109 lines
2.2 KiB
Vue
109 lines
2.2 KiB
Vue
<script lang="ts">
|
|
/*
|
|
|
|
stroke-light-red
|
|
stroke-light-orange
|
|
stroke-light-yellow
|
|
stroke-light-green
|
|
stroke-light-cyan
|
|
stroke-light-purple
|
|
dark:stroke-dark-red
|
|
dark:stroke-dark-orange
|
|
dark:stroke-dark-yellow
|
|
dark:stroke-dark-green
|
|
dark:stroke-dark-cyan
|
|
dark:stroke-dark-purple
|
|
fill-light-red
|
|
fill-light-orange
|
|
fill-light-yellow
|
|
fill-light-green
|
|
fill-light-cyan
|
|
fill-light-purple
|
|
dark:fill-dark-red
|
|
dark:fill-dark-orange
|
|
dark:fill-dark-yellow
|
|
dark:fill-dark-green
|
|
dark:fill-dark-cyan
|
|
dark:fill-dark-purple
|
|
bg-light-red
|
|
bg-light-orange
|
|
bg-light-yellow
|
|
bg-light-green
|
|
bg-light-cyan
|
|
bg-light-purple
|
|
dark:bg-dark-red
|
|
dark:bg-dark-orange
|
|
dark:bg-dark-yellow
|
|
dark:bg-dark-green
|
|
dark:bg-dark-cyan
|
|
dark:bg-dark-purple
|
|
border-light-red
|
|
border-light-orange
|
|
border-light-yellow
|
|
border-light-green
|
|
border-light-cyan
|
|
border-light-purple
|
|
dark:border-dark-red
|
|
dark:border-dark-orange
|
|
dark:border-dark-yellow
|
|
dark:border-dark-green
|
|
dark:border-dark-cyan
|
|
dark:border-dark-purple
|
|
outline-light-red
|
|
outline-light-orange
|
|
outline-light-yellow
|
|
outline-light-green
|
|
outline-light-cyan
|
|
outline-light-purple
|
|
dark:outline-dark-red
|
|
dark:outline-dark-orange
|
|
dark:outline-dark-yellow
|
|
dark:outline-dark-green
|
|
dark:outline-dark-cyan
|
|
dark:outline-dark-purple
|
|
|
|
*/
|
|
</script>
|
|
|
|
<script setup lang="ts">
|
|
import type { CanvasContent } from '~/types/content';
|
|
import { Canvas } from '#shared/canvas.util';
|
|
|
|
const { path } = defineProps<{
|
|
path: string
|
|
}>();
|
|
|
|
const { user } = useUserSession();
|
|
const { content, get } = useContent();
|
|
const overview = computed(() => content.value.find(e => e.path === path) as CanvasContent | undefined);
|
|
const isOwner = computed(() => user.value?.id === overview.value?.owner);
|
|
const element = useTemplateRef('element');
|
|
|
|
onMounted(() => {
|
|
mount();
|
|
});
|
|
|
|
if(overview.value && !overview.value.content)
|
|
{
|
|
await get(path);
|
|
mount();
|
|
}
|
|
|
|
const canvas = computed(() => overview.value && overview.value.content ? overview.value.content : undefined);
|
|
console.log(canvas.value);
|
|
|
|
function mount()
|
|
{
|
|
if(element.value && canvas.value)
|
|
{
|
|
const c = new Canvas(canvas.value);
|
|
element.value.appendChild(c.container);
|
|
c.mount();
|
|
}
|
|
updateScaleVar();
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div ref="element"></div>
|
|
</template> |