add margin

src/App.vue

@@ -14,6 +14,9 @@ import {
   DEFAULT_VERTICAL_MARGIN,
   DEFAULT_IMAGE_BACKGROUND_COLOR,
   DEFAULT_VERTICAL_ROTATION,
+  DEFAULT_MARGIN_ENABLE,
+  DEFAULT_MARGIN_BACKGROUND_COLOR,
+  DEFAULT_MARGIN_LEFT_MARGIN,
 } from "./const";
 import { ButtonSize, InputType } from "./types";
 
@@ -25,6 +28,10 @@ const imageWidth = ref(DEFAULT_IMAGE_WIDTH);
 const imageHeight = ref(DEFAULT_IMAGE_HEIGHT);
 const imageBackgroundColor = ref(DEFAULT_IMAGE_BACKGROUND_COLOR);
 
+const marginEnable = ref(DEFAULT_MARGIN_ENABLE);
+const marginColor = ref(DEFAULT_MARGIN_BACKGROUND_COLOR);
+const marginLeftMargin = ref(DEFAULT_MARGIN_LEFT_MARGIN);
+
 const savePng = async () => {
   const canvas = document.getElementById("canvas") as HTMLCanvasElement;
 
@@ -86,14 +93,23 @@ const rotatePage = () => {
         <Input v-model="hMargin">Отступ, мм</Input>
         <Input v-model="hMargin2">Дополнительный отступ, мм</Input>
       </SidebarBlock>
+      <SidebarBlock title="Поля">
+        <label class="switch">
+          <input v-model="marginEnable" type="checkbox">
+          <span class="slider round"></span>
+        </label>
+        <Input v-model="marginColor" :type="InputType.Color">
+        Цвет {{ marginColor }}
+        </Input>
+        <Input v-model="marginLeftMargin">Отступ слева, мм</Input>
+      </SidebarBlock>
     </Sidebar>
     <Page>
-      <Canvas :vMargin="vMargin" :vRotation="vRotation" :hMargin="hMargin" :hMargin2="hMargin2" :imageWidth="imageWidth"
+      <Canvas :imageBackgroundColor="imageBackgroundColor" :vMargin="vMargin" :vRotation="vRotation" :hMargin="hMargin"
-        :imageHeight="imageHeight" :imageBackgroundColor="imageBackgroundColor" />
+        :hMargin2="hMargin2" :imageWidth="imageWidth" :marginEnable="marginEnable" :marginColor="marginColor"
+        :marginLeftMargin="marginLeftMargin" :imageHeight="imageHeight" />
     </Page>
-    <Sidebar
+    <Sidebar horizontalPosition="right">
-      horizontalPosition="right"
-    >
       <SidebarBlock title="Изображение">
         <Input v-model="imageHeight">Высота, мм</Input>
         <Input v-model="imageWidth">Ширина, мм</Input>
@@ -144,4 +160,69 @@ html {
 body {
   background-color: aqua;
 }
+
+/* The switch - the box around the slider */
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 27px;
+  margin: 10px 0;
+}
+
+/* Hide default HTML checkbox */
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+/* The slider */
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+  border: 1px solid #5E503F;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 17px;
+  width: 17px;
+  left: 5px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked+.slider {
+  background-color: #EAE0D5;
+}
+
+input:focus+.slider {
+  box-shadow: 0 0 1px #EAE0D5;
+}
+
+input:checked+.slider:before {
+  -webkit-transform: translateX(31px);
+  -ms-transform: translateX(31px);
+  transform: translateX(31px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}
 </style>

src/components/Canvas.vue

@@ -3,13 +3,19 @@ import { onMounted, onUpdated, ref } from "vue";
 import { ONE_MM } from "../const";
 
 const props = defineProps<{
+  imageBackgroundColor: string;
+
   vMargin: number;
   vRotation: number;
   hMargin: number;
   hMargin2: number;
+
+  marginEnable: boolean;
+  marginColor: string;
+  marginLeftMargin: number;
+
   imageWidth: number;
   imageHeight: number;
-  imageBackgroundColor: string;
 }>();
 
 const ctx = ref<null | CanvasRenderingContext2D>(null);
@@ -26,7 +32,7 @@ const clearCanvas = () => {
 };
 
 const render = () => {
-  const { vMargin, vRotation, hMargin, hMargin2, imageWidth, imageHeight } = props;
+  const { vMargin, vRotation, hMargin, hMargin2, imageWidth, imageHeight, marginEnable, marginColor, marginLeftMargin } = props;
 
   if (vMargin < 1 || hMargin < 1 || hMargin2 < 1) {
     return
@@ -45,6 +51,10 @@ const render = () => {
   var rotationDelta = imageHeightPx / Math.tan(vRotation / 180 * Math.PI);
 
   if (ctx.value) {
+    ctx.value.strokeStyle = "#000000";
+    ctx.value.beginPath();
+    ctx.value.stroke();
+
     var x = 0;
     var y = 0;
 
@@ -71,6 +81,17 @@ const render = () => {
       ctx.value.stroke();
       i++;
     }
+
+
+    x = marginLeftMargin * ONE_MM;
+    if (marginEnable) {
+      ctx.value.strokeStyle = marginColor;
+      ctx.value.lineWidth = 2;
+      ctx.value.beginPath();
+      ctx.value.moveTo(x, 0);
+      ctx.value.lineTo(x, imageHeightPx);
+      ctx.value.stroke();
+    }
   }
 };
 

src/const.ts

@@ -8,4 +8,8 @@ export const DEFAULT_VERTICAL_MARGIN = 10;
 export const DEFAULT_HORIZONTAL_MARGIN = 10;
 export const DEFAULT_VERTICAL_ROTATION = 90;
 
-export const DEFAULT_IMAGE_BACKGROUND_COLOR = "#ffffff"
+export const DEFAULT_IMAGE_BACKGROUND_COLOR = "#ffffff"
+
+export const DEFAULT_MARGIN_ENABLE = false;
+export const DEFAULT_MARGIN_BACKGROUND_COLOR = "#dd3333";
+export const DEFAULT_MARGIN_LEFT_MARGIN = 25;