add rotation line

src/App.vue

@@ -13,11 +13,14 @@ import {
   DEFAULT_IMAGE_WIDTH,
   DEFAULT_VERTICAL_MARGIN,
   DEFAULT_IMAGE_BACKGROUND_COLOR,
+  DEFAULT_VERTICAL_ROTATION,
 } from "./const";
 import { ButtonSize, InputType } from "./types";
 
 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);
@@ -49,25 +52,29 @@ const rotatePage = () => {
         Цвет {{ imageBackgroundColor }}
         </Input>
       </SidebarBlock>
-      <SidebarBlock title="Линии">
-        <Input v-model="vMargin">Отступ по горизонтали, мм</Input>
-        <Input v-model="hMargin">Отступ по вертикали, мм</Input>
+      <SidebarBlock title="Вертикальные линии">
+        <Input v-model="vMargin">Отступ, мм</Input>
+        <Input v-model="vRotation">Поворот, градусы</Input>
+      </SidebarBlock>
+      <SidebarBlock title="Горизонтальные линии">
+        <Input v-model="hMargin">Отступ, мм</Input>
+        <Input v-model="hMargin2">Дополнительный отступ, мм</Input>
       </SidebarBlock>
       <SidebarBlock title="Изображение">
         <Input v-model="imageHeight">Высота, мм</Input>
         <Input v-model="imageWidth">Ширина, мм</Input>
         <ButtonsBar>
           <Button :size="ButtonSize.Small" :click="() => {
-              imageWidth = 148;
-              imageHeight = 210;
-            }
+            imageWidth = 148;
+            imageHeight = 210;
+          }
             ">
             A5
           </Button>
           <Button :size="ButtonSize.Small" :click="() => {
-              imageWidth = 210;
-              imageHeight = 297;
-            }
+            imageWidth = 210;
+            imageHeight = 297;
+          }
             ">
             A4
           </Button>
@@ -79,8 +86,8 @@ const rotatePage = () => {
       </SidebarBlock>
     </Sidebar>
     <Page>
-      <Canvas :vMargin="vMargin" :hMargin="hMargin" :imageWidth="imageWidth" :imageHeight="imageHeight"
-        :imageBackgroundColor="imageBackgroundColor" />
+      <Canvas :vMargin="vMargin" :vRotation="vRotation" :hMargin="hMargin" :hMargin2="hMargin2" :imageWidth="imageWidth"
+        :imageHeight="imageHeight" :imageBackgroundColor="imageBackgroundColor" />
     </Page>
   </div>
 </template>