zoom control

src/pages/editor/store/editorStore.ts

@@ -88,6 +88,10 @@ type EditorStoreType = {
   setStageRef: (ref: React.RefObject<Konva.Stage | null>) => void;
   layerRef: React.RefObject<Konva.Layer | null> | null;
   setLayerRef: (ref: React.RefObject<Konva.Layer | null>) => void;
+  zoom: number;
+  setZoom: (zoom: number) => void;
+  zoomIn: () => void;
+  zoomOut: () => void;
 };
 
 const createTableCellId = (row: number, col: number) => `cell-${row}-${col}`;
@@ -350,4 +354,16 @@ export const useEditorStore = create<EditorStoreType>((set, get) => ({
   setStageRef: (ref) => set({ stageRef: ref }),
   layerRef: null,
   setLayerRef: (ref) => set({ layerRef: ref }),
+  zoom: 1,
+  setZoom: (zoom) => set({ zoom }),
+  zoomIn: () => {
+    const state = get();
+    const newZoom = Math.min(state.zoom + 0.1, 2);
+    set({ zoom: newZoom });
+  },
+  zoomOut: () => {
+    const state = get();
+    const newZoom = Math.max(state.zoom - 0.1, 0.5);
+    set({ zoom: newZoom });
+  },
 }));