add text

src/App.vue

@@ -27,6 +27,7 @@ const {
   marginLeftMargin,
   imageWidth,
   imageHeight,
+  textPropisi,
 } = storeToRefs(store);
 
 const typeSelector = ref('rus');
@@ -77,12 +78,16 @@ const savePng = async () => {
             <Input v-model="marginLeftMargin" :min="1">Отступ слева, мм</Input>
           </div>
         </SidebarBlock>
+
+        <SidebarBlock title="Текст">
+          <textarea v-model="textPropisi"></textarea>
+        </SidebarBlock>
       </div>
     </Sidebar>
     <Page>
       <div id="typeSelector">
         <Button :size="ButtonSize.Small"
-          :active="typeSelector == 'rus' && vRotation == 65 && vMargin == 3 && hMargin == 8 && hMargin2 == 4 && imageWidth == 148 && imageHeight == 210 && marginEnable == true"
+          :active="typeSelector == 'rus' && vRotation == 65 && vMargin == 3 && hMargin == 8 && hMargin2 == 4 && imageWidth == 148 && imageHeight == 210 && marginEnable == true && marginLeftMargin == 20"
           :click="() => {
             typeSelector = 'rus';
             vRotation = 65;
@@ -92,6 +97,7 @@ const savePng = async () => {
             imageWidth = 148;
             imageHeight = 210;
             marginEnable = true;
+            marginLeftMargin = 20;
           }">Тетрадь в линию</Button>
         <Button :size="ButtonSize.Small"
           :active="typeSelector == 'rus' && vRotation == 90 && vMargin == 30 && hMargin == 30 && hMargin2 == 30 && imageWidth == 210 && imageHeight == 297"

src/components/Canvas.vue

@@ -20,6 +20,8 @@ const {
 
   imageHeight,
   imageWidth,
+
+  textPropisi,
 } = storeToRefs(store);
 
 const ctx = ref<null | CanvasRenderingContext2D>(null);
@@ -94,9 +96,14 @@ const render = () => {
       ctx.value.stroke();
     }
 
-    // ctx.value.font = hMargins[1] * 3 * ONE_MM + "px propisi"; // todo хз почему тут x3
-    // ctx.value.fillStyle = "#cccccc";
-    // ctx.value.fillText("Привет мир", 100, (hMargins[0] + hMargins[1]) * ONE_MM);
+    ctx.value.font = hMargins[1] * 3 * ONE_MM + "px propisi"; // todo хз почему тут x3
+    ctx.value.fillStyle = "#cccccc";
+    let lines = textPropisi.value.split('\n')
+    i = 0;
+    while (i < lines.length) {
+      ctx.value.fillText(lines[i], (marginLeftMargin.value + 10) * ONE_MM, (hMargins[0] + hMargins[1]) * ONE_MM + (hMargins[0] + hMargins[1]) * ONE_MM * i);
+      i++
+    }
   }
 };
 

src/store.ts

@@ -39,6 +39,8 @@ export const useStore = defineStore("store", () => {
     imageWidth.value = tmp;
   };
 
+  const textPropisi = ref("Текст...");
+
   return {
     imageBackgroundColor,
 
@@ -57,5 +59,7 @@ export const useStore = defineStore("store", () => {
     imageHeight,
     setImageSize,
     rotateImage,
+
+    textPropisi,
   };
 });