54 lines
1.9 KiB
Vue
54 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import type { FileUploadUploadEvent } from '~/node_modules/primevue/fileupload/FileUpload.d.ts'
|
|
interface SvgContext {
|
|
paths: string[],
|
|
width: number,
|
|
height: number
|
|
}
|
|
const config = useRuntimeConfig()
|
|
const plan: Ref<SvgContext | {}> = useState('plan', () => ({}));
|
|
|
|
const loading = ref<boolean>(false)
|
|
const canvasElement: Ref<HTMLCanvasElement | undefined> = ref();
|
|
const context: Ref<CanvasRenderingContext2D | undefined> = ref();
|
|
|
|
const beforeUpload = () => {
|
|
loading.value = true
|
|
}
|
|
|
|
const onUpload = (event: FileUploadUploadEvent) => {
|
|
loading.value = false
|
|
try {
|
|
const data = JSON.parse(event.xhr.response)
|
|
plan.value = data.response
|
|
|
|
context.value = canvasElement.value?.getContext('2d') || undefined;
|
|
if (canvasElement.value && context.value) {
|
|
context.value.clearRect(0, 0, canvasElement.value.width, canvasElement.value.height);
|
|
if (!plan.value.hasOwnProperty('paths')) return
|
|
plan.value.paths.forEach((path: string) => {
|
|
if (!context.value) return
|
|
context.value.fillStyle = 'rgba(255, 0, 0, 0.25)'
|
|
context.value.fill(new Path2D(path));
|
|
|
|
context.value.strokeStyle = 'blue'
|
|
context.value.stroke(new Path2D(path));
|
|
});
|
|
}
|
|
} catch (error) {
|
|
console.error(error)
|
|
}
|
|
}
|
|
</script>
|
|
<template>
|
|
<div class="flex flex-col gap-4">
|
|
<Panel>
|
|
<FileUpload mode="basic" name="demo" :url="`${config.public.apiBase}/api/prepare_image`" accept="image/*"
|
|
:maxFileSize="10000000" @upload="onUpload" @before-upload="beforeUpload" :auto="true"
|
|
chooseLabel="Выберите файл" :disabled="loading" />
|
|
</Panel>
|
|
<Panel v-if="plan && plan.paths">
|
|
<canvas ref="canvasElement" width="1200" height="1000"></canvas>
|
|
</Panel>
|
|
</div>
|
|
</template> |