VLADIMIR/lapsha
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactoring
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Вячеслав Нагель
2023-07-01 23:43:06 +07:00
parent c99d41fd53
commit 2e3f3dcc99
7 changed files with 194 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+59 -90
View File
@@ -1,60 +1,82 @@
<script setup lang="ts">
import Sidebar from './components/Sidebar.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 } from './const';
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,
} from "./const";
import { ButtonSize, InputType } from "./types";
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 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;
if (canvas) {
const image = canvas.toDataURL("image/png")
const image = canvas.toDataURL("image/png");
const link = document.createElement("a");
link.setAttribute("download", "image.png");
link.href = image
link.href = image;
link.click();
}
}
};
const rotatePage = () => {
const tmp = imageHeight.value;
imageHeight.value = imageWidth.value;
imageWidth.value = tmp;
};
</script>
<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>
<SidebarBlock title="Фон">
<Input v-model="imageBackgroundColor" :type="InputType.Color">
Цвет {{ imageBackgroundColor }}
</Input>
</SidebarBlock>
<SidebarBlock title="Линии">
<Input v-model="vMargin">Отступ по горизонтали, мм</Input>
<Input v-model="hMargin">Отступ по вертикали, мм</Input>
</div>
<div class="l-sidebar-block">
<h1>Изображение</h1>
</SidebarBlock>
<SidebarBlock title="Изображение">
<Input v-model="imageHeight">Высота, мм</Input>
<Input v-model="imageWidth">Ширина, мм</Input>
<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>
<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" :hMargin="hMargin" :imageWidth="imageWidth" :imageHeight="imageHeight"
@@ -83,57 +105,4 @@ html {
body {
background-color: aqua;
}
.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;
src: local('MPLUS1p'), url(/fonts/ttf/MPLUS1p-Light.ttf) format('truetype');
}
h1 {
color: #C6AC8F;
}
.l-sidebar-block {
border: 1px solid #C6AC8F;
border-radius: 10px;
margin: 0 0 30px 0;
padding: 20px;
background-color: white;
}
.l-mini-buttons-bar {
padding: 0 0 20px 5px;
}
.input {
margin: 10px;
}
.l-input {
margin: 10px 0;
}
</style>