Fix fabric.js v6 import error causing blank page

- Replace deprecated 'import { fabric } from fabric' with named imports
- Editor.vue: import Canvas, Rect, FabricText
- symmetry.js: import FabricImage, Rect, Group
- Clear Vite cache to rebuild dependencies

frontend/src/utils/symmetry.js

@@ -1,12 +1,12 @@
-import { fabric } from 'fabric'
+import { FabricImage, Rect, Group } from 'fabric'
 
 export async function createSymmetricalImage(originalImage, canvasWidth, canvasHeight) {
   const imgWidth = originalImage.width
   const imgHeight = originalImage.height
   const halfHeight = imgHeight / 2
 
-  const topHalf = new fabric.Image(originalImage, {
-    clipPath: new fabric.Rect({
+  const topHalf = new FabricImage(originalImage, {
+    clipPath: new Rect({
       width: imgWidth,
       height: halfHeight,
       originX: 'left',
@@ -17,8 +17,8 @@ export async function createSymmetricalImage(originalImage, canvasWidth, canvasH
     scaleY: (canvasHeight / 2) / halfHeight
   })
 
-  const bottomHalf = new fabric.Image(originalImage, {
-    clipPath: new fabric.Rect({
+  const bottomHalf = new FabricImage(originalImage, {
+    clipPath: new Rect({
       width: imgWidth,
       height: halfHeight,
       originX: 'left',
@@ -31,7 +31,7 @@ export async function createSymmetricalImage(originalImage, canvasWidth, canvasH
     flipY: true
   })
 
-  const group = new fabric.Group([topHalf, bottomHalf], {
+  const group = new Group([topHalf, bottomHalf], {
     left: 0,
     top: 0,
     width: canvasWidth,
@@ -42,20 +42,16 @@ export async function createSymmetricalImage(originalImage, canvasWidth, canvasH
 }
 
 export async function loadAndProcessImage(imageUrl) {
-  return new Promise((resolve, reject) => {
-    fabric.Image.fromURL(imageUrl, (img) => {
-      if (!img) {
-        reject(new Error('Failed to load image'))
-        return
-      }
-      resolve(img)
-    }, { crossOrigin: 'anonymous' })
-  })
+  const img = await FabricImage.fromURL(imageUrl, { crossOrigin: 'anonymous' })
+  if (!img) {
+    throw new Error('Failed to load image')
+  }
+  return img
 }
 
 export function applySymmetryToFaceCard(canvas, imageUrl, cardWidth, cardHeight) {
   return new Promise((resolve, reject) => {
-    fabric.Image.fromURL(imageUrl, async (originalImage) => {
+    FabricImage.fromURL(imageUrl, { crossOrigin: 'anonymous' }).then(async (originalImage) => {
       if (!originalImage) {
         reject(new Error('Failed to load image'))
         return
@@ -76,6 +72,6 @@ export function applySymmetryToFaceCard(canvas, imageUrl, cardWidth, cardHeight)
       canvas.add(symmetricalGroup)
       canvas.renderAll()
       resolve(symmetricalGroup)
-    }, { crossOrigin: 'anonymous' })
+    }).catch(reject)
   })
-}
+}

frontend/src/views/Editor.vue

@@ -85,7 +85,7 @@
 <script setup>
 import { ref, onMounted, computed, watch, nextTick } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { fabric } from 'fabric'
+import { Canvas, Rect, Text as FabricText } from 'fabric'
 import { ElMessage } from 'element-plus'
 import { getProject, updateProject } from '@/api/project'
 import { exportProject, getExportUrl } from '@/api/export'
@@ -166,7 +166,7 @@ async function loadProject() {
 function initCanvas() {
   if (!canvasRef.value) return
 
-  canvas.value = new fabric.Canvas('main-canvas', {
+  canvas.value = new Canvas('main-canvas', {
     width: 750,
     height: 1050,
     backgroundColor: '#ffffff',
@@ -182,7 +182,7 @@ function drawDefaultCard() {
   canvas.value.clear()
   canvas.value.setBackgroundColor('#ffffff', canvas.value.renderAll.bind(canvas.value))
 
-  const rect = new fabric.Rect({
+  const rect = new Rect({
     left: 50,
     top: 50,
     width: 650,
@@ -197,7 +197,7 @@ function drawDefaultCard() {
   const suitSymbol = getSuitSymbol(currentSuit.value)
   const rank = currentCard.value.split('-')[1] || 'A'
 
-  const topText = new fabric.Text(`${rank}${suitSymbol}`, {
+  const topText = new FabricText(`${rank}${suitSymbol}`, {
     left: 70,
     top: 70,
     fontSize: 48,
@@ -206,7 +206,7 @@ function drawDefaultCard() {
   })
   canvas.value.add(topText)
 
-  const centerSymbol = new fabric.Text(suitSymbol, {
+  const centerSymbol = new FabricText(suitSymbol, {
     left: 375,
     top: 525,
     fontSize: 120,
@@ -217,7 +217,7 @@ function drawDefaultCard() {
   })
   canvas.value.add(centerSymbol)
 
-  const bottomText = new fabric.Text(`${rank}${suitSymbol}`, {
+  const bottomText = new FabricText(`${rank}${suitSymbol}`, {
     left: 630,
     top: 930,
     fontSize: 48,