125 lines
3.9 KiB
Vue
125 lines
3.9 KiB
Vue
<script setup lang="ts">
|
||
import DesignerCanvas from "~/components/designer/DesignerCanvas.vue";
|
||
import DesignerPreview from "~/components/designer/DesignerPreview.vue";
|
||
import DesignerToolbar from "~/components/designer/DesignerToolbar.vue";
|
||
import TemplatePicker from "~/components/designer/TemplatePicker.vue";
|
||
|
||
import { useSlipmatDesigner } from "~/composables/useSlipmatDesigner";
|
||
|
||
const {
|
||
templates,
|
||
selectedTemplate,
|
||
selectTemplate,
|
||
displaySize,
|
||
templateLabel,
|
||
productionPixelSize,
|
||
previewUrl,
|
||
registerCanvas,
|
||
unregisterCanvas,
|
||
addTextbox,
|
||
addShape,
|
||
addImageFromFile,
|
||
clearDesign,
|
||
downloadPreview,
|
||
downloadProduction,
|
||
exportDesign,
|
||
isExporting,
|
||
activeFillColor,
|
||
activeStrokeColor,
|
||
canStyleSelection,
|
||
setActiveFillColor,
|
||
setActiveStrokeColor,
|
||
zoomLevel,
|
||
minZoom,
|
||
maxZoom,
|
||
setZoom,
|
||
zoomIn,
|
||
zoomOut,
|
||
resetZoom,
|
||
} = useSlipmatDesigner();
|
||
|
||
const handleTemplateSelect = (templateId: string) => {
|
||
selectTemplate(templateId);
|
||
};
|
||
|
||
const handleExport = async () => {
|
||
await exportDesign();
|
||
};
|
||
</script>
|
||
|
||
<template>
|
||
<main class="min-h-screen bg-slate-950 pb-16 text-slate-100">
|
||
<div class="mx-auto max-w-6xl px-4 pt-12 sm:px-6 lg:px-8">
|
||
<header class="space-y-3">
|
||
<p class="text-sm uppercase tracking-[0.35em] text-sky-400">
|
||
Slipmatz Designer
|
||
</p>
|
||
<h1 class="text-3xl font-bold text-white sm:text-4xl">
|
||
Craft custom slipmats ready for the pressing plant.
|
||
</h1>
|
||
<p class="max-w-3xl text-base text-slate-300">
|
||
Pick a template, drop in artwork, and we’ll generate both a high-fidelity
|
||
preview and a print-ready PNG at exact specs. Everything stays within a
|
||
circular safe zone to ensure clean results on vinyl.
|
||
</p>
|
||
</header>
|
||
|
||
<section class="mt-10 grid gap-8 lg:grid-cols-[320px_minmax(0,1fr)]">
|
||
<div class="space-y-6">
|
||
<TemplatePicker
|
||
:templates="templates"
|
||
:selected-template-id="selectedTemplate.id"
|
||
@select="handleTemplateSelect"
|
||
/>
|
||
|
||
<DesignerToolbar
|
||
:on-add-text="addTextbox"
|
||
:on-add-circle="() => addShape('circle')"
|
||
:on-add-rectangle="() => addShape('rect')"
|
||
:on-clear="clearDesign"
|
||
:on-import-image="addImageFromFile"
|
||
:on-fill-change="setActiveFillColor"
|
||
:on-stroke-change="setActiveStrokeColor"
|
||
:active-fill="activeFillColor"
|
||
:active-stroke="activeStrokeColor"
|
||
:can-style-selection="canStyleSelection"
|
||
:zoom="zoomLevel"
|
||
:min-zoom="minZoom"
|
||
:max-zoom="maxZoom"
|
||
:on-zoom-change="setZoom"
|
||
:on-zoom-in="zoomIn"
|
||
:on-zoom-out="zoomOut"
|
||
:on-zoom-reset="resetZoom"
|
||
/>
|
||
|
||
<DesignerPreview
|
||
:preview-url="previewUrl"
|
||
:template-label="templateLabel"
|
||
:production-pixels="productionPixelSize"
|
||
:is-exporting="isExporting"
|
||
@export="handleExport"
|
||
@download-preview="downloadPreview"
|
||
@download-production="downloadProduction"
|
||
/>
|
||
</div>
|
||
|
||
<div class="flex flex-col gap-6">
|
||
<div class="rounded-3xl border border-slate-800/60 bg-linear-to-br from-slate-900 via-slate-950 to-black p-6 shadow-2xl shadow-slate-950/60">
|
||
<DesignerCanvas
|
||
:size="displaySize"
|
||
:background-color="selectedTemplate.backgroundColor"
|
||
:register-canvas="registerCanvas"
|
||
:unregister-canvas="unregisterCanvas"
|
||
/>
|
||
<p class="mt-4 text-sm text-slate-400">
|
||
Safe zone and bleed guides update automatically when you switch
|
||
templates. Use the toolbar to layer text, shapes, and imagery inside the
|
||
circular boundary.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</main>
|
||
</template>
|