add pinia

src/App.vue

@@ -6,31 +6,25 @@ import Button from "./components/Button.vue";
 import Page from "./components/Page.vue";
 import Input from "./components/Input.vue";
 import Canvas from "./components/Canvas.vue";
-import { ref } from "vue";
-import {
-  DEFAULT_HORIZONTAL_MARGIN,
-  DEFAULT_IMAGE_HEIGHT,
-  DEFAULT_IMAGE_WIDTH,
-  DEFAULT_VERTICAL_MARGIN,
-  DEFAULT_IMAGE_BACKGROUND_COLOR,
-  DEFAULT_VERTICAL_ROTATION,
-  DEFAULT_MARGIN_ENABLE,
-  DEFAULT_MARGIN_BACKGROUND_COLOR,
-  DEFAULT_MARGIN_LEFT_MARGIN,
-} from "./const";
 import { ButtonSize, InputType } from "./types";
+import { useStore } from "./store";
+import { storeToRefs } from "pinia";
+import { VARIANTS_VERTICAL_ROTATION, VARIANTS_IMAGE_SIZE } from './const';
 
-const vMargin = ref(DEFAULT_VERTICAL_MARGIN);
-const vRotation = ref(DEFAULT_VERTICAL_ROTATION);
-const hMargin = ref(DEFAULT_HORIZONTAL_MARGIN);
-const hMargin2 = ref(DEFAULT_HORIZONTAL_MARGIN);
-const imageWidth = ref(DEFAULT_IMAGE_WIDTH);
-const imageHeight = ref(DEFAULT_IMAGE_HEIGHT);
-const imageBackgroundColor = ref(DEFAULT_IMAGE_BACKGROUND_COLOR);
+const store = useStore();
 
-const marginEnable = ref(DEFAULT_MARGIN_ENABLE);
-const marginColor = ref(DEFAULT_MARGIN_BACKGROUND_COLOR);
-const marginLeftMargin = ref(DEFAULT_MARGIN_LEFT_MARGIN);
+const {
+  imageBackgroundColor,
+  vMargin,
+  vRotation,
+  hMargin,
+  hMargin2,
+  marginEnable,
+  marginColor,
+  marginLeftMargin,
+  imageWidth,
+  imageHeight,
+} = storeToRefs(store);
 
 const savePng = async () => {
   const canvas = document.getElementById("canvas") as HTMLCanvasElement;
@@ -43,90 +37,60 @@ const savePng = async () => {
     link.click();
   }
 };
-
-const rotatePage = () => {
-  const tmp = imageHeight.value;
-  imageHeight.value = imageWidth.value;
-  imageWidth.value = tmp;
-};
 </script>
 
 <template>
   <div class="container">
     <Sidebar>
       <SidebarBlock title="Фон">
-        <Input v-model="imageBackgroundColor" :type="InputType.Color">Цвет {{ imageBackgroundColor }}</Input>
+        <Input v-model="imageBackgroundColor" :type="InputType.Color">Цвет {{ store.imageBackgroundColor }}</Input>
       </SidebarBlock>
+
       <SidebarBlock title="Вертикальные линии">
         <Input v-model="vMargin" :min="1">Отступ, мм</Input>
         <Input v-model="vRotation" :min="0" :max="359">Поворот, градусы</Input>
         <ButtonsBar>
-          <Button :size="ButtonSize.Small" :click="() => {
-            vRotation = 45;
-          }
-            ">
-            45°
-          </Button>
-          <Button :size="ButtonSize.Small" :click="() => {
-            vRotation = 60;
-          }
-            ">
-            60°
-          </Button>
-          <Button :size="ButtonSize.Small" :click="() => {
-            vRotation = 65;
-          }
-            ">
-            65°
-          </Button>
-          <Button :size="ButtonSize.Small" :click="() => {
-            vRotation = 90;
-          }
-            ">
-            90°
+          <Button v-for="deg in VARIANTS_VERTICAL_ROTATION" :key="deg" :size="ButtonSize.Small" :click="() => store.setVRotation(deg)">
+            {{ deg }}°
           </Button>
         </ButtonsBar>
       </SidebarBlock>
+
       <SidebarBlock title="Горизонтальные линии">
         <Input v-model="hMargin" :min="1">Отступ, мм</Input>
         <Input v-model="hMargin2" :min="1">Дополнительный отступ, мм</Input>
       </SidebarBlock>
+
       <SidebarBlock title="Поля">
         <label class="switch">
           <input v-model="marginEnable" type="checkbox">
           <span class="slider round"></span>
         </label>
-        <Input v-model="marginColor" :type="InputType.Color">
-        Цвет {{ marginColor }}
-        </Input>
-        <Input v-model="marginLeftMargin" :min="1">Отступ слева, мм</Input>
+        <div v-if="marginEnable">
+          <Input v-model="marginColor" :type="InputType.Color">
+          Цвет {{ marginColor }}
+          </Input>
+          <Input v-model="marginLeftMargin" :min="1">Отступ слева, мм</Input>
+        </div>
       </SidebarBlock>
     </Sidebar>
     <Page>
-      <Canvas :imageBackgroundColor="imageBackgroundColor" :vMargin="vMargin" :vRotation="vRotation" :hMargin="hMargin"
-        :hMargin2="hMargin2" :imageWidth="imageWidth" :marginEnable="marginEnable" :marginColor="marginColor"
-        :marginLeftMargin="marginLeftMargin" :imageHeight="imageHeight" />
+      <Canvas />
     </Page>
     <Sidebar horizontalPosition="right">
       <SidebarBlock title="Изображение">
         <Input v-model="imageHeight" :min="1">Высота, мм</Input>
         <Input v-model="imageWidth" :min="1">Ширина, мм</Input>
         <ButtonsBar>
-          <Button :size="ButtonSize.Small" :click="() => {
-            imageWidth = 148;
-            imageHeight = 210;
-          }
-            ">
-            A5
+          <Button
+            v-for="size in VARIANTS_IMAGE_SIZE"
+            :key="size.name"
+            :size="ButtonSize.Small"
+            :click="() => store.setImageSize(size)"
+          >
+            {{ size.name }}
           </Button>
-          <Button :size="ButtonSize.Small" :click="() => {
-            imageWidth = 210;
-            imageHeight = 297;
-          }
-            ">
-            A4
-          </Button>
-          <Button :size="ButtonSize.Small" :click="rotatePage">
+          <Button :size="ButtonSize.Small" :click="store.rotateImage">
             Повернуть
           </Button>
         </ButtonsBar>