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"
-        :imageHeight="imageHeight" :imageBackgroundColor="imageBackgroundColor" />
+      <Canvas :imageBackgroundColor="imageBackgroundColor" :vMargin="vMargin" :vRotation="vRotation" :hMargin="hMargin"
+        :hMargin2="hMargin2" :imageWidth="imageWidth" :marginEnable="marginEnable" :marginColor="marginColor"
+        :marginLeftMargin="marginLeftMargin" :imageHeight="imageHeight" />
     </Page>
-    <Sidebar
-      horizontalPosition="right"
-    >
+    <Sidebar 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>