add pinia

src/components/Canvas.vue

@@ -1,54 +1,55 @@
 <script setup lang="ts">
 import { onMounted, onUpdated, ref } from "vue";
 import { ONE_MM } from "../const";
+import { useStore } from "../store";
+import { storeToRefs } from "pinia";
 
-const props = defineProps<{
-  imageBackgroundColor: string;
+const store = useStore();
+const {
+  imageBackgroundColor,
 
-  vMargin: number;
-  vRotation: number;
-  hMargin: number;
-  hMargin2: number;
+  vMargin,
+  vRotation,
 
-  marginEnable: boolean;
-  marginColor: string;
-  marginLeftMargin: number;
+  hMargin,
+  hMargin2,
 
-  imageWidth: number;
-  imageHeight: number;
-}>();
+  marginEnable,
+  marginColor,
+  marginLeftMargin,
+
+  imageHeight,
+  imageWidth,
+} = storeToRefs(store);
 
 const ctx = ref<null | CanvasRenderingContext2D>(null);
 
 const clearCanvas = () => {
-  const { imageWidth, imageHeight, imageBackgroundColor } = props;
 
   if (ctx.value) {
     ctx.value.shadowColor
-    ctx.value.fillStyle = imageBackgroundColor;
-    ctx.value.fillRect(0, 0, imageWidth * ONE_MM, imageHeight * ONE_MM);
+    ctx.value.fillStyle = imageBackgroundColor.value;
+    ctx.value.fillRect(0, 0, imageWidth.value * ONE_MM, imageHeight.value * ONE_MM);
     ctx.value.beginPath();
   }
 };
 
 const render = () => {
-  const { vMargin, vRotation, hMargin, hMargin2, imageWidth, imageHeight, marginEnable, marginColor, marginLeftMargin } = props;
-
-  if (vMargin < 1 || hMargin < 1 || hMargin2 < 1) {
+  if (vMargin.value < 1 || hMargin.value < 1 || hMargin2.value < 1) {
     return
   }
-  if (imageWidth < 1 || imageHeight < 1) {
+  if (imageWidth.value < 1 || imageHeight.value < 1) {
     return
   }
 
   clearCanvas();
 
-  var hMargins = [hMargin, hMargin2];
+  var hMargins = [hMargin.value, hMargin2.value];
 
-  var imageHeightPx = imageHeight * ONE_MM;
-  var imageWidthPx = imageWidth * ONE_MM;
-  var vMarginPx = vMargin * ONE_MM;
-  var rotationDelta = imageHeightPx / Math.tan(vRotation / 180 * Math.PI);
+  var imageHeightPx = imageHeight.value * ONE_MM;
+  var imageWidthPx = imageWidth.value * ONE_MM;
+  var vMarginPx = vMargin.value * ONE_MM;
+  var rotationDelta = imageHeightPx / Math.tan(vRotation.value / 180 * Math.PI);
 
   if (ctx.value) {
     ctx.value.strokeStyle = "#000000";
@@ -83,9 +84,9 @@ const render = () => {
     }
 
 
-    x = marginLeftMargin * ONE_MM;
-    if (marginEnable) {
-      ctx.value.strokeStyle = marginColor;
+    x = marginLeftMargin.value * ONE_MM;
+    if (marginEnable.value) {
+      ctx.value.strokeStyle = marginColor.value;
       ctx.value.lineWidth = 2;
       ctx.value.beginPath();
       ctx.value.moveTo(x, 0);
@@ -112,6 +113,10 @@ onUpdated(() => {
 
 <template>
   <canvas id="canvas" :width="imageWidth * ONE_MM" :height="imageHeight * ONE_MM" />
+  <!-- Костыль, чтобы обновлялся стейт, неужели vue не может красиво это делать -->
+  <div style="display: none;">
+    {{ store }}
+  </div>
 </template>
 
 <style scoped>