From 27dabed2d26b9397f7c6a89b14a95628a8d20ec9 Mon Sep 17 00:00:00 2001 From: Frank John Begornia Date: Mon, 12 Jan 2026 23:00:32 +0800 Subject: [PATCH] feat: enhance designer canvas with multi-view support and model viewer integration - Added canvasId prop to DesignerCanvas for identifying multiple canvases. - Implemented active view selection (front, top, left, right) in designer page. - Updated DesignerCanvas to maintain aspect ratio and dimensions based on view. - Integrated @google/model-viewer for 3D model rendering on the index page. - Refactored useSlipmatDesigner to manage multiple canvases and their states. - Added LAMESA.glb model file for 3D representation. - Updated package.json and package-lock.json to include @google/model-viewer dependency. --- app/components/designer/DesignerCanvas.vue | 48 +++--- app/pages/designer.vue | 88 +++++++++-- app/pages/index.vue | 173 +++++++++++++------- composables/useSlipmatDesigner.ts | 176 ++++++++++++++------- package-lock.json | 119 ++++++++++++++ package.json | 3 +- public/LAMESA.glb | Bin 0 -> 896624 bytes 7 files changed, 457 insertions(+), 150 deletions(-) create mode 100644 public/LAMESA.glb diff --git a/app/components/designer/DesignerCanvas.vue b/app/components/designer/DesignerCanvas.vue index 6194d66..a183d58 100644 --- a/app/components/designer/DesignerCanvas.vue +++ b/app/components/designer/DesignerCanvas.vue @@ -4,12 +4,14 @@ import { onBeforeUnmount, onMounted, ref, watch } from "vue"; import type { Canvas as FabricCanvas } from "fabric"; const props = defineProps<{ + canvasId?: string; size: number; registerCanvas: (payload: { canvas: FabricCanvas; fabric: typeof import("fabric"); + canvasId?: string; }) => void; - unregisterCanvas: () => void; + unregisterCanvas: (canvasId?: string) => void; backgroundColor: string; }>(); @@ -30,28 +32,28 @@ const syncCanvasDomStyles = () => { if (!element) { return; } - element.classList.add("rounded-full"); - element.style.borderRadius = "9999px"; + element.classList.add("rounded-lg"); + element.style.borderRadius = "8px"; element.style.backgroundColor = "transparent"; }); }; -const updateCssDimensions = (dimension?: number) => { +const updateCssDimensions = (containerWidth?: number) => { if (!fabricCanvas) { return; } - const targetSize = - dimension ?? + const targetWidth = + containerWidth ?? containerElement.value?.clientWidth ?? - containerElement.value?.clientHeight ?? null; - if (!targetSize) { + if (!targetWidth) { return; } + const targetHeight = Math.round(targetWidth * 0.67); // 3:2 aspect ratio fabricCanvas.setDimensions( { - width: targetSize, - height: targetSize, + width: targetWidth, + height: targetHeight, }, { cssOnly: true } ); @@ -70,8 +72,8 @@ const observeContainer = () => { if (!entry) { return; } - const dimension = Math.min(entry.contentRect.width, entry.contentRect.height); - updateCssDimensions(dimension); + const containerWidth = entry.contentRect.width; + updateCssDimensions(containerWidth); }); resizeObserver.observe(containerElement.value); updateCssDimensions(); @@ -91,9 +93,14 @@ const setupCanvas = async () => { preserveObjectStacking: true, }); - fabricCanvas.setDimensions({ width: props.size, height: props.size }); + const canvasHeight = Math.round(props.size * 0.67); // 3:2 aspect ratio + fabricCanvas.setDimensions({ width: props.size, height: canvasHeight }); - props.registerCanvas({ canvas: fabricCanvas, fabric: fabricModule }); + props.registerCanvas({ + canvas: fabricCanvas, + fabric: fabricModule, + canvasId: props.canvasId + }); observeContainer(); syncCanvasDomStyles(); isReady.value = true; @@ -104,7 +111,7 @@ onMounted(() => { }); onBeforeUnmount(() => { - props.unregisterCanvas(); + props.unregisterCanvas(props.canvasId); resizeObserver?.disconnect(); resizeObserver = null; fabricCanvas = null; @@ -118,7 +125,8 @@ watch( if (!isReady.value || next === prev || !fabricCanvas) { return; } - fabricCanvas.setDimensions({ width: next, height: next }); + const canvasHeight = Math.round(next * 0.67); // 3:2 aspect ratio + fabricCanvas.setDimensions({ width: next, height: canvasHeight }); updateCssDimensions(); fabricCanvas.renderAll(); } @@ -127,20 +135,20 @@ watch(