init

src/App.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import Sidebar from './components/Sidebar.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 } from './const';
+
+const vMargin = ref(DEFAULT_VERTICAL_MARGIN)
+const hMargin = ref(DEFAULT_HORIZONTAL_MARGIN)
+const imageWidth = ref(DEFAULT_IMAGE_WIDTH)
+const imageHeight = ref(DEFAULT_IMAGE_HEIGHT)
+
+const savePng = async () => {
+  const canvas = document.getElementById("canvas") as HTMLCanvasElement;
+
+  if (canvas) {
+    const image = canvas.toDataURL("image/png")
+    const link = document.createElement("a");
+    link.setAttribute("download", "image.png");
+    link.href = image
+    link.click();
+  }
+}
+</script>
+
+<template>
+  <div class="container">
+    <Sidebar>
+      <Input v-model="hMargin">Отступ для горизонтальных линий, мм</Input>
+      <Input v-model="vMargin">Отступ для вертикальных линии, мм</Input>
+      <Input v-model="imageWidth">Высота изображения, мм</Input>
+      <Input v-model="imageHeight">Ширина изображения, мм</Input>
+      <button @click="savePng">Сохранить png</button>
+    </Sidebar>
+    <Page>
+      <Canvas :vMargin="vMargin" :hMargin="hMargin" :imageWidth="imageWidth" :imageHeight="imageHeight" />
+    </Page>
+  </div>
+</template>
+
+<style scoped>
+#app,
+body,
+html {
+  height: 100vh;
+  width: 100vw;
+}
+
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  width: 100vw;
+}
+
+body {
+  background-color: aqua;
+}
+</style>