add color

src/App.vue

@@ -4,12 +4,13 @@ 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';
+import { DEFAULT_HORIZONTAL_MARGIN, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH, DEFAULT_VERTICAL_MARGIN, DEFAULT_IMAGE_BACKGROUND_COLOR } 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 imageBackgroundColor = ref(DEFAULT_IMAGE_BACKGROUND_COLOR)
 
 const savePng = async () => {
   const canvas = document.getElementById("canvas") as HTMLCanvasElement;
@@ -27,6 +28,16 @@ const savePng = async () => {
 <template>
   <div class="container">
     <Sidebar>
+      <div class="l-sidebar-block">
+        <h1>Фон</h1>
+        <div class="input">
+          <label class="l-label">
+            Цвет {{ imageBackgroundColor }}
+          </label>
+          <br>
+          <input class="l-input" type="color" v-model="imageBackgroundColor">
+        </div>
+      </div>
       <div class="l-sidebar-block">
         <h1>Линии</h1>
         <Input v-model="vMargin">Отступ по горизонтали, мм</Input>
@@ -36,11 +47,18 @@ const savePng = async () => {
         <h1>Изображение</h1>
         <Input v-model="imageHeight">Высота, мм</Input>
         <Input v-model="imageWidth">Ширина, мм</Input>
-        <button class="l-button" @click="savePng">Сохранить как png</button>
+        <div class="l-mini-buttons-bar">
+          <button class="l-base-button l-mini-button" @click="imageWidth = 148; imageHeight = 210">A5</button>
+          <button class="l-base-button l-mini-button" @click="imageWidth = 210; imageHeight = 297">A4</button>
+          <button class="l-base-button l-mini-button"
+            @click="var tmp; tmp = imageHeight; imageHeight = imageWidth; imageWidth = tmp">Повернуть</button>
+        </div>
+        <button class="l-base-button l-button" @click="savePng">Сохранить как png</button>
       </div>
     </Sidebar>
     <Page>
-      <Canvas :vMargin="vMargin" :hMargin="hMargin" :imageWidth="imageWidth" :imageHeight="imageHeight" />
+      <Canvas :vMargin="vMargin" :hMargin="hMargin" :imageWidth="imageWidth" :imageHeight="imageHeight"
+        :imageBackgroundColor="imageBackgroundColor" />
     </Page>
   </div>
 </template>
@@ -66,15 +84,29 @@ body {
   background-color: aqua;
 }
 
-.l-button {
+.l-base-button {
   color: #22333B;
   background-color: #EAE0D5;
   border: 1px solid #5E503F;
+}
+
+.l-base-button:hover {
+  background-color: #d7c7b6;
+}
+
+.l-button {
   border-radius: 10px;
   margin: 5px;
   padding: 10px;
 }
 
+.l-mini-button {
+  border-radius: 3px;
+  margin: 3px;
+  padding: 2px 10px;
+  font-size: 10pt;
+}
+
 @font-face {
   font-family: 'MPLUS1p';
   font-style: normal;
@@ -92,4 +124,16 @@ h1 {
   padding: 20px;
   background-color: white;
 }
+
+.l-mini-buttons-bar {
+  padding: 0 0 20px 5px;
+}
+
+.input {
+  margin: 10px;
+}
+
+.l-input {
+  margin: 10px 0;
+}
 </style>