From fce7a0ec72e1ddd33f04dab85c329677350cc2b5 Mon Sep 17 00:00:00 2001
From: Frank John Begornia <frank.begornia@yahoo.com>
Date: Tue, 18 Nov 2025 01:37:09 +0800
Subject: [PATCH] feat: add background color picker and update related
 functionality in DesignerToolbar

---
 app/components/designer/DesignerToolbar.vue | 26 +++++++++++++++++++++
 app/pages/index.vue                         |  3 +++
 composables/useSlipmatDesigner.ts           | 15 ++++++++++++
 3 files changed, 44 insertions(+)

diff --git a/app/components/designer/DesignerToolbar.vue b/app/components/designer/DesignerToolbar.vue
index 4217144..ba39e76 100644
--- a/app/components/designer/DesignerToolbar.vue
+++ b/app/components/designer/DesignerToolbar.vue
@@ -9,8 +9,10 @@ const props = defineProps<{
   onImportImage: (file: File) => Promise<void>;
   onFillChange: (fill: string) => void;
   onStrokeChange: (stroke: string) => void;
+  onBackgroundChange: (background: string) => void;
   activeFill: string | null;
   activeStroke: string | null;
+  activeBackground: string;
   canStyleSelection: boolean;
   zoom: number;
   minZoom: number;
@@ -28,6 +30,7 @@ const emit = defineEmits<{
 const fileInput = ref<HTMLInputElement | null>(null);
 const fillValue = ref(props.activeFill ?? "#111827");
 const strokeValue = ref(props.activeStroke ?? "#3b82f6");
+const backgroundValue = ref(props.activeBackground ?? "#ffffff");
 const zoomSliderValue = ref(Math.round(props.zoom * 100));
 
 watch(
@@ -44,6 +47,13 @@ watch(
   }
 );
 
+watch(
+  () => props.activeBackground,
+  (next) => {
+    backgroundValue.value = next ?? "#ffffff";
+  }
+);
+
 watch(
   () => props.zoom,
   (next) => {
@@ -88,6 +98,13 @@ const handleStrokeChange = (event: Event) => {
   props.onStrokeChange(value);
 };
 
+const handleBackgroundChange = (event: Event) => {
+  const input = event.target as HTMLInputElement;
+  const value = input.value;
+  backgroundValue.value = value;
+  props.onBackgroundChange(value);
+};
+
 const handleZoomInput = (event: Event) => {
   const input = event.target as HTMLInputElement;
   const value = Number(input.value);
@@ -141,6 +158,15 @@ const zoomLabel = computed(() => `${Math.round(props.zoom * 100)}%`);
 
     <!-- Color Pickers Group -->
     <div class="flex items-center gap-2 border-r border-slate-700/50 pr-3">
+      <label class="flex items-center gap-1.5" title="Canvas Background">
+        <span class="text-xs text-slate-400">Canvas</span>
+        <input
+          type="color"
+          class="h-8 w-12 cursor-pointer rounded border border-slate-700/70 bg-slate-800/80 p-0.5"
+          :value="backgroundValue"
+          @input="handleBackgroundChange"
+        />
+      </label>
       <label class="flex items-center gap-1.5" title="Fill Color">
         <span class="text-xs text-slate-400">Fill</span>
         <input
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 735c130..d11b512 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -31,6 +31,7 @@ const {
   canStyleSelection,
   setActiveFillColor,
   setActiveStrokeColor,
+  setBackgroundColor,
   zoomLevel,
   minZoom,
   maxZoom,
@@ -406,8 +407,10 @@ const handleCheckout = async () => {
               :on-import-image="addImageFromFile"
               :on-fill-change="setActiveFillColor"
               :on-stroke-change="setActiveStrokeColor"
+              :on-background-change="setBackgroundColor"
               :active-fill="activeFillColor"
               :active-stroke="activeStrokeColor"
+              :active-background="selectedTemplate.backgroundColor"
               :can-style-selection="canStyleSelection"
               :zoom="zoomLevel"
               :min-zoom="minZoom"
diff --git a/composables/useSlipmatDesigner.ts b/composables/useSlipmatDesigner.ts
index 111743f..4bd7d3b 100644
--- a/composables/useSlipmatDesigner.ts
+++ b/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,