add type selector

package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "html2canvas": "^1.4.1",
-    "pinia": "^2.1.4",
+    "pinia": "^2.1.6",
     "vue": "3.3.4"
   },
   "devDependencies": {

src/App.vue

@@ -12,6 +12,7 @@ import { ButtonSize, InputType } from "./types";
 import { useStore } from "./store";
 import { storeToRefs } from "pinia";
 import { VARIANTS_VERTICAL_ROTATION, VARIANTS_IMAGE_SIZE } from './const';
+import { ref } from "vue";
 
 const store = useStore();
 
@@ -28,6 +29,8 @@ const {
   imageHeight,
 } = storeToRefs(store);
 
+const typeSelector = ref('rus');
+
 const savePng = async () => {
   const canvas = document.getElementById("canvas") as HTMLCanvasElement;
 
@@ -52,7 +55,7 @@ const savePng = async () => {
         <Input v-model="vMargin" :min="1">Отступ, мм</Input>
         <Input v-model="vRotation" :min="0" :max="359">Поворот, градусы</Input>
         <ButtonsBar>
-          <Button v-for="deg in VARIANTS_VERTICAL_ROTATION" :key="deg" :size="ButtonSize.Small" :click="() => store.setVRotation(deg)">
+          <Button v-for="deg in VARIANTS_VERTICAL_ROTATION" :key="deg" :active="vRotation == deg" :size="ButtonSize.Small" :click="() => store.setVRotation(deg)">
             {{ deg }}°
           </Button>
         </ButtonsBar>
@@ -74,6 +77,12 @@ const savePng = async () => {
       </SidebarBlock>
     </Sidebar>
     <Page>
+      <div id="typeSelector">
+        <Button :size="ButtonSize.Small" :active="typeSelector == 'rus'"
+          :click="() => { typeSelector = 'rus' }">Пропись</Button>
+        <Button :size="ButtonSize.Small" :active="typeSelector == 'math'"
+          :click="() => { typeSelector = 'math' }">Математика</Button>
+      </div>
       <Canvas />
     </Page>
     <Sidebar horizontalPosition="right">
@@ -85,6 +94,7 @@ const savePng = async () => {
             v-for="size in VARIANTS_IMAGE_SIZE"
             :key="size.name"
             :size="ButtonSize.Small"
+            :active="imageWidth == size.width && imageHeight == size.height || imageWidth == size.height && imageHeight == size.width"
             :click="() => store.setImageSize(size)"
           >
             {{ size.name }}
@@ -102,4 +112,9 @@ const savePng = async () => {
 </template>
 
 <style scoped>
+#typeSelector {
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+}
 </style>

src/components/Button.vue

@@ -4,10 +4,12 @@ import { ButtonSize } from '../types';
 interface Props {
   click: (payload?: MouseEvent) => void;
   size?: ButtonSize;
+  active: boolean;
 }
 
 withDefaults(defineProps<Props>(), {
   size: ButtonSize.Medium,
+  active: false,
 })
 </script>
 
@@ -16,6 +18,7 @@ withDefaults(defineProps<Props>(), {
     :class="{
       button: true,
       'button--small': size === ButtonSize.Small,
+      'active': active === true,
     }"
     @click="click"
   >
@@ -45,4 +48,8 @@ withDefaults(defineProps<Props>(), {
   font-size: 10pt;
   width: auto;
 }
+
+.active {
+  background-color: #ffce99;
+}
 </style>

src/components/Canvas.vue

@@ -119,6 +119,6 @@ watch(store, () => {
 canvas {
   border: 1px solid black;
   margin: 20px;
-  height: calc(100vh - 40px);
+  height: calc(100vh - 100px);
 }
 </style>

src/components/Page.vue

@@ -2,7 +2,9 @@
 </script>
 
 <template>
+  <div>
     <slot></slot>
+  </div>
 </template>
 
 <style scoped>

yarn.lock

@@ -386,10 +386,10 @@ picocolors@^1.0.0:
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
   integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
 
-pinia@^2.1.4:
-  version "2.1.4"
-  resolved "https://registry.yarnpkg.com/pinia/-/pinia-2.1.4.tgz#a642adfe6208e10c36d3dc16184a91064788142a"
-  integrity sha512-vYlnDu+Y/FXxv1ABo1vhjC+IbqvzUdiUC3sfDRrRyY2CQSrqqaa+iiHmqtARFxJVqWQMCJfXx1PBvFs9aJVLXQ==
+pinia@^2.1.6:
+  version "2.1.6"
+  resolved "https://registry.yarnpkg.com/pinia/-/pinia-2.1.6.tgz#e88959f14b61c4debd9c42d0c9944e2875cbe0fa"
+  integrity sha512-bIU6QuE5qZviMmct5XwCesXelb5VavdOWKWaB17ggk++NUwQWWbP5YnsONTk3b752QkW9sACiR81rorpeOMSvQ==
   dependencies:
     "@vue/devtools-api" "^6.5.0"
     vue-demi ">=0.14.5"