lapsha/src/App.vue

<script setup lang="ts">
import Sidebar from "./components/Sidebar.vue";
import SidebarBlock from "./components/SidebarBlock.vue";
import ButtonsBar from "./components/ButtonsBar.vue";
import Button from "./components/Button.vue";
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,
  DEFAULT_IMAGE_BACKGROUND_COLOR,
  DEFAULT_VERTICAL_ROTATION,
} from "./const";
import { ButtonSize, InputType } from "./types";

const vMargin = ref(DEFAULT_VERTICAL_MARGIN);
const vRotation = ref(DEFAULT_VERTICAL_ROTATION);
const hMargin = ref(DEFAULT_HORIZONTAL_MARGIN);
const hMargin2 = 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;

  if (canvas) {
    const image = canvas.toDataURL("image/png");
    const link = document.createElement("a");
    link.setAttribute("download", "image.png");
    link.href = image;
    link.click();
  }
};

const rotatePage = () => {
  const tmp = imageHeight.value;
  imageHeight.value = imageWidth.value;
  imageWidth.value = tmp;
};
</script>

<template>
  <div class="container">
    <Sidebar>
      <SidebarBlock title="Фон">
        <Input v-model="imageBackgroundColor" :type="InputType.Color">
        Цвет {{ imageBackgroundColor }}
        </Input>
      </SidebarBlock>
      <SidebarBlock title="Вертикальные линии">
        <Input v-model="vMargin">Отступ, мм</Input>
        <Input v-model="vRotation">Поворот, градусы</Input>
      </SidebarBlock>
      <SidebarBlock title="Горизонтальные линии">
        <Input v-model="hMargin">Отступ, мм</Input>
        <Input v-model="hMargin2">Дополнительный отступ, мм</Input>
      </SidebarBlock>
      <SidebarBlock title="Изображение">
        <Input v-model="imageHeight">Высота, мм</Input>
        <Input v-model="imageWidth">Ширина, мм</Input>
        <ButtonsBar>
          <Button :size="ButtonSize.Small" :click="() => {
            imageWidth = 148;
            imageHeight = 210;
          }
            ">
            A5
          </Button>
          <Button :size="ButtonSize.Small" :click="() => {
            imageWidth = 210;
            imageHeight = 297;
          }
            ">
            A4
          </Button>
          <Button :size="ButtonSize.Small" :click="rotatePage">
            Повернуть
          </Button>
        </ButtonsBar>
        <Button :click="savePng">Сохранить как png</Button>
      </SidebarBlock>
    </Sidebar>
    <Page>
      <Canvas :vMargin="vMargin" :vRotation="vRotation" :hMargin="hMargin" :hMargin2="hMargin2" :imageWidth="imageWidth"
        :imageHeight="imageHeight" :imageBackgroundColor="imageBackgroundColor" />
    </Page>
  </div>
</template>

<style scoped>
#app,
body,
html {
  height: 100vh;
  width: 100vw;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  font-family: MPLUS1p, sans-serif;
}

body {
  background-color: aqua;
}
</style>