add type selector

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>