feat: add background color picker and update related functionality in DesignerToolbar

composables/useSlipmatDesigner.ts

@@ -753,6 +753,20 @@ export const useSlipmatDesigner = () => {
     );
   };
 
+  const setBackgroundColor = (color: string) => {
+    const bgCircle = backgroundCircle.value;
+    if (!bgCircle || !canvas.value) {
+      return;
+    }
+    bgCircle.set({ fill: color });
+    selectedTemplate.value = {
+      ...selectedTemplate.value,
+      backgroundColor: color,
+    };
+    canvas.value.requestRenderAll();
+    schedulePreviewRefresh();
+  };
+
   watch(selectedTemplate, () => {
     resetZoom();
     applyTemplateToCanvas();
@@ -788,6 +802,7 @@ export const useSlipmatDesigner = () => {
     addImageFromFile,
     setActiveFillColor,
     setActiveStrokeColor,
+    setBackgroundColor,
     setZoom,
     zoomIn,
     zoomOut,