From f976829ba391c2f1f41f149fd2d9e26e09d05fc7 Mon Sep 17 00:00:00 2001
From: Fedorov Vladimir <vladimir.fodorow@gmail.com>
Date: Sun, 24 Sep 2023 16:18:57 +0700
Subject: [PATCH] add templates

---
 src/App.vue | 77 ++++++++++++++++++++++++++++++++++-------------------
 1 file changed, 49 insertions(+), 28 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 21a63dd..9f90f73 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -51,33 +51,58 @@ const savePng = async () => {
         <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 v-for="deg in VARIANTS_VERTICAL_ROTATION" :key="deg" :active="vRotation == deg" :size="ButtonSize.Small" :click="() => store.setVRotation(deg)">
-            {{ deg }}°
-          </Button>
-        </ButtonsBar>
-      </SidebarBlock>
+      <div v-if="typeSelector == 'rus'">
+        <SidebarBlock title="Вертикальные линии">
+          <Input v-model="vMargin" :min="1">Отступ, мм</Input>
+          <Input v-model="vRotation" :min="0" :max="359">Поворот, градусы</Input>
+          <ButtonsBar>
+            <Button v-for="deg in VARIANTS_VERTICAL_ROTATION" :key="deg" :active="vRotation == 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="Горизонтальные линии">
+          <Input v-model="hMargin" :min="1">Отступ, мм</Input>
+          <Input v-model="hMargin2" :min="1">Дополнительный отступ, мм</Input>
+        </SidebarBlock>
 
-      <SidebarBlock title="Поля">
-        <Switch v-model="marginEnable"/>
-        <div v-if="marginEnable">
-          <Input v-model="marginColor" :type="InputType.Color">
-          Цвет {{ marginColor }}
-          </Input>
-          <Input v-model="marginLeftMargin" :min="1">Отступ слева, мм</Input>
-        </div>
-      </SidebarBlock>
+        <SidebarBlock title="Поля">
+          <Switch v-model="marginEnable" />
+          <div v-if="marginEnable">
+            <Input v-model="marginColor" :type="InputType.Color">
+            Цвет {{ marginColor }}
+            </Input>
+            <Input v-model="marginLeftMargin" :min="1">Отступ слева, мм</Input>
+          </div>
+        </SidebarBlock>
+      </div>
     </Sidebar>
     <Page>
       <div id="typeSelector">
+        <Button :size="ButtonSize.Small"
+          :active="typeSelector == 'rus' && vRotation == 65 && vMargin == 15 && hMargin == 40 && hMargin2 == 20 && imageWidth == 210 && imageHeight == 297"
+          :click="() => {
+            typeSelector = 'rus';
+            vRotation = 65;
+            vMargin = 15;
+            hMargin = 40;
+            hMargin2 = 20;
+            imageWidth = 210;
+            imageHeight = 297;
+          }">Тетрадь в линию</Button>
+        <Button :size="ButtonSize.Small"
+          :active="typeSelector == 'rus' && vRotation == 90 && vMargin == 30 && hMargin == 30 && hMargin2 == 30 && imageWidth == 210 && imageHeight == 297"
+          :click="() => {
+            typeSelector = 'rus';
+            vRotation = 90;
+            vMargin = 30;
+            hMargin = 30;
+            hMargin2 = 30;
+            imageWidth = 210;
+            imageHeight = 297;
+          }">Тетрадь в клетку</Button>
         <Button :size="ButtonSize.Small" :active="typeSelector == 'rus'"
           :click="() => { typeSelector = 'rus' }">Пропись</Button>
         <Button :size="ButtonSize.Small" :active="typeSelector == 'math'"
@@ -90,13 +115,9 @@ const savePng = async () => {
         <Input v-model="imageHeight" :min="1">Высота, мм</Input>
         <Input v-model="imageWidth" :min="1">Ширина, мм</Input>
         <ButtonsBar>
-          <Button
-            v-for="size in VARIANTS_IMAGE_SIZE"
-            :key="size.name"
-            :size="ButtonSize.Small"
+          <Button v-for="  size   in   VARIANTS_IMAGE_SIZE  " :key="size.name" :size="ButtonSize.Small"
             :active="imageWidth == size.width && imageHeight == size.height || imageWidth == size.height && imageHeight == size.width"
-            :click="() => store.setImageSize(size)"
-          >
+            :click="() => store.setImageSize(size)">
             {{ size.name }}
           </Button>
           <Button :size="ButtonSize.Small" :click="store.rotateImage">