From d4763e35577d163a2f50f69e73d8bf070f925a72 Mon Sep 17 00:00:00 2001
From: Fedorov Vladimir <vladimir.fodorow@gmail.com>
Date: Sat, 1 Jul 2023 21:20:54 +0700
Subject: [PATCH 1/3] add color

---
 src/App.vue               | 52 ++++++++++++++++++++++++++++++++++++---
 src/components/Canvas.vue | 13 +++++-----
 src/components/Input.vue  |  1 -
 src/const.ts              |  4 ++-
 4 files changed, 57 insertions(+), 13 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 649b0c8..2bd170b 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/components/Canvas.vue b/src/components/Canvas.vue
index 2084ff2..48fc979 100644
--- a/src/components/Canvas.vue
+++ b/src/components/Canvas.vue
@@ -7,15 +7,18 @@ const props = defineProps<{
   hMargin: number;
   imageWidth: number;
   imageHeight: number;
+  imageBackgroundColor: string;
 }>();
 
 const ctx = ref<null | CanvasRenderingContext2D>(null);
 
 const clearCanvas = () => {
-  const { imageWidth, imageHeight } = props;
+  const { imageWidth, imageHeight, imageBackgroundColor } = props;
 
   if (ctx.value) {
-    ctx.value.clearRect(0, 0, imageWidth * ONE_MM, imageHeight * ONE_MM);
+    ctx.value.shadowColor
+    ctx.value.fillStyle = imageBackgroundColor;
+    ctx.value.fillRect(0, 0, imageWidth * ONE_MM, imageHeight * ONE_MM);
     ctx.value.beginPath();
   }
 };
@@ -58,11 +61,7 @@ onUpdated(() => {
 </script>
 
 <template>
-  <canvas
-    id="canvas"
-    :width="imageWidth * ONE_MM"
-    :height="imageHeight * ONE_MM"
-  />
+  <canvas id="canvas" :width="imageWidth * ONE_MM" :height="imageHeight * ONE_MM" />
 </template>
 
 <style scoped>
diff --git a/src/components/Input.vue b/src/components/Input.vue
index 436ebfa..0c61ba2 100644
--- a/src/components/Input.vue
+++ b/src/components/Input.vue
@@ -15,7 +15,6 @@ const modelValue = defineModel();
 <style scoped>
 .input {
     margin: 10px;
-
 }
 
 input {
diff --git a/src/const.ts b/src/const.ts
index 7bcefe6..df7e5d5 100644
--- a/src/const.ts
+++ b/src/const.ts
@@ -5,4 +5,6 @@ export const DEFAULT_IMAGE_WIDTH = 100;
 export const DEFAULT_IMAGE_HEIGHT = 100;
 
 export const DEFAULT_VERTICAL_MARGIN = 10;
-export const DEFAULT_HORIZONTAL_MARGIN = 10;
\ No newline at end of file
+export const DEFAULT_HORIZONTAL_MARGIN = 10;
+
+export const DEFAULT_IMAGE_BACKGROUND_COLOR = "#ffffff"
\ No newline at end of file

From bb94e50de14c34e3c457cb2d6b7d0a0dbb8c9a19 Mon Sep 17 00:00:00 2001
From: Fedorov Vladimir <vladimir.fodorow@gmail.com>
Date: Sat, 1 Jul 2023 22:13:56 +0700
Subject: [PATCH 2/3] add ccrollbar

---
 src/components/Sidebar.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index ce96057..ba56bcf 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -10,9 +10,15 @@
     top: 0;
     left: 0;
 
-    margin: 10px;
     padding: 10px;
 
     z-index: 2;
+
+    height: 100vh;
+    overflow: auto;
 }
+
+.sidebar::-webkit-scrollbar{
+    display: none;
+  }
 </style>

From 3e3de1021d5deabcb24e48881626ba5c0348b71e Mon Sep 17 00:00:00 2001
From: Fedorov Vladimir <vladimir.fodorow@gmail.com>
Date: Sat, 1 Jul 2023 22:41:25 +0700
Subject: [PATCH 3/3] fib readme

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 2e2bafe..d5eeef0 100644
--- a/README.md
+++ b/README.md
@@ -2,9 +2,9 @@
 
 Line generator for writing
 
-## Licence 
+## Licence
 
 Thanks to [icons8](https://icons8.com/icon/vPDvU8cYImOg/noodles) for the logo
 
 ___
-[![Build Status](https://drone.3crabs.ru/api/badges/v9gel/lapsha/status.svg)](https://drone.3crabs.ru/v9gel/lapsha)
+[![Build Status](https://drone.3crabs.ru/api/badges/VLADIMIR/lapsha/status.svg)](https://drone.3crabs.ru/VLADIMIR/lapsha)