Simple layer crud operations

apps/web/src/components/canvasViewport.tsx

@@ -10,6 +10,7 @@ import {
   useFitToViewport,
   useDrawTool,
   useObservable,
+  useCanvasHistory,
 } from "@/hooks";
 import { useToolStore } from "@/store/toolState";
 import { Ruler } from "./Ruler";
@@ -26,18 +27,19 @@ export const CanvasViewport = () => {
   const rootElementRef = useRef<HTMLDivElement>(null);
   const hostElementRef = useRef<HTMLDivElement>(null);
   const viewport = useObservable<Viewport>(defaultViewport);
+  const { commitChanges, revertChanges } = useCanvasHistory();
   const renderer = useCanvasRenderer(hostElementRef, size);
-  const drawToolId = useToolStore((state) => state.selectedToolId);
-  const drawToolSettings = useToolStore(
-    (state) => state.toolSettings[drawToolId]
-  );
 
+  const toolId = useToolStore((state) => state.selectedToolId);
+  const toolSettings = useToolStore((state) => state.toolSettings[toolId]);
   useDrawTool(
     hostElementRef,
-    drawToolId,
-    drawToolSettings,
+    toolId,
+    toolSettings,
     (position) => screenToViewportPosition(position, viewport.getValue()),
-    () => renderer.getDrawContext(layerId)
+    () => renderer.getDrawContext(layerId),
+    commitChanges,
+    revertChanges
   );
 
   const updateViewport = (partialViewport: Partial<Viewport>) => {

apps/web/src/components/panels/layersPanel.tsx

@@ -2,51 +2,18 @@ import { translations } from "@/translations";
 import { PanelHeader } from "./panelHeader";
 import { IconButton } from "../iconButton";
 import { cn } from "@/utils/css";
+import { useWorkspacesStore } from "@/store";
+import { Layer } from "@/store/workspacesStore";
 
-type Layer = {
-  id: string;
-  name: string;
-  visible: boolean;
-  locked: boolean;
-  preview: string;
-  //opacity
-};
-
-const layers: Layer[] = [
-  {
-    id: "1",
-    name: "Layer 1",
-    visible: false,
-    locked: true,
-    preview: "sss",
-  },
-  {
-    id: "2",
-    name: "Layer 2",
-    visible: true,
-    locked: false,
-    preview: "sss",
-  },
-  {
-    id: "3",
-    name: "Layer 3",
-    visible: true,
-    locked: false,
-    preview: "sss",
-  },
-  {
-    id: "4",
-    name: "Layer 43",
-    visible: true,
-    locked: false,
-    preview: "sss",
-  },
-];
-
-const LayerItem = (props: { layer: Layer; selected: boolean }) => {
-  const { layer } = props;
+const LayerItem = (props: {
+  layer: Layer;
+  selected: boolean;
+  onClick: () => void;
+}) => {
+  const { layer, onClick } = props;
   return (
     <div
+      onClick={onClick}
       className={cn(
         "border flex flex-row p-small gap-small items-center overflow-hidden min-h-16",
         props.selected && "border-primary bg-primary/25"
@@ -59,7 +26,7 @@ const LayerItem = (props: { layer: Layer; selected: boolean }) => {
       />
 
       <div className="min-w-16 min-h-12 border border-black bg-white"></div>
-      <div className="truncate flex-1 ml-1">Name</div>
+      <div className="truncate flex-1 ml-1">{layer.name}</div>
       <div className="flex flex-col justify-between">
         <IconButton
           type={layer.locked ? "lock" : "unlock"}
@@ -77,23 +44,64 @@ const LayerItem = (props: { layer: Layer; selected: boolean }) => {
 };
 
 export const LayersPanel = () => {
+  const {
+    selectedWorkspaceId,
+    addLayer,
+    removeLayer,
+    duplicateLayer,
+    selectLayer,
+    moveLayerUp,
+    moveLayerDown,
+  } = useWorkspacesStore((state) => state);
+  const { layers, selectedLayerId } = useWorkspacesStore(
+    (state) =>
+      state.workspaces.find(
+        (workspace) => workspace.id === selectedWorkspaceId
+      )!
+  );
+
   return (
     <div className="flex flex-col size-full">
       <PanelHeader title={translations.layers + " (work in progress!!!)"} />
       <div className="flex flex-row gap-small p-small mt-small items-center justify-between">
         <div className="flex flex-row gap-small items-center">
-          <IconButton type="plus" size="small"></IconButton>
-          <IconButton type="copy" size="small"></IconButton>
-          <IconButton type="arrow-up" size="small"></IconButton>
-          <IconButton type="arrow-down" size="small"></IconButton>
+          <IconButton
+            type="plus"
+            size="small"
+            onClick={() => addLayer()}
+          ></IconButton>
+          <IconButton
+            type="copy"
+            size="small"
+            onClick={() => duplicateLayer(selectedLayerId)}
+          ></IconButton>
+          <IconButton
+            type="arrow-up"
+            size="small"
+            onClick={() => moveLayerUp(selectedLayerId)}
+          ></IconButton>
+          <IconButton
+            type="arrow-down"
+            size="small"
+            onClick={() => moveLayerDown(selectedLayerId)}
+          ></IconButton>
           <IconButton type="arrow-up-to-line" size="small"></IconButton>
           <IconButton type="arrow-down-to-line" size="small"></IconButton>
         </div>
-        <IconButton type="x" size="small"></IconButton>
+        <IconButton
+          type="x"
+          size="small"
+          onClick={() => removeLayer(selectedLayerId)}
+        ></IconButton>
       </div>
       <div className="flex flex-col gap-small overflow-auto p-small">
-        {layers.map((layer, index) => (
-          <LayerItem key={layer.id} layer={layer} selected={index === 1} />
+        {layers.map((layer) => (
+          <LayerItem
+            key={layer.id}
+            layer={layer}
+            selected={selectedLayerId === layer.id}
+            onClick={() => selectLayer(layer.id)}
+          />
         ))}
       </div>
     </div>

apps/web/src/hooks/index.ts

@@ -1,10 +1,10 @@
 export { useDrawTool } from "./useDrawTool";
 export { useCanvasRenderer } from "./useCanvasRenderer";
+export { useCanvasHistory } from "./useCanvasHistory";
 export { useAfterPaintEffect } from "./useAfterPaintEffect";
 export { useViewportManipulator } from "./useViewportManipulator";
 export { useFitToViewport } from "./useFitToViewport";
 export { useSyncTheme } from "./useSyncTheme";
 export { useStableCallback } from "./useStableCallback";
 export { useObservable } from "./useObservable";
 export { useListener } from "./useListener";
-

apps/web/src/hooks/useCanvasHistory.ts

@@ -0,0 +1,20 @@
+import { CanvasContext } from "@/utils/common";
+import { ImageCompressedData } from "@/utils/imageData";
+
+type LayerData = ImageCompressedData["data"];
+
+export const useCanvasHistory = () => {
+  return {
+    getLayersData: (): Record<string, LayerData> => {
+      return {
+        "1": new Uint8ClampedArray([1, 2, 3, 4]),
+        "2": new Uint8ClampedArray([1, 2, 3, 4]),
+      };
+    },
+    commitChanges: (_context: CanvasContext) =>
+      console.log("commit/save context to current"),
+    revertChanges: (_context: CanvasContext) =>
+      console.log("revert/draw current to context"),
+  };
+};
+

apps/web/src/hooks/useCanvasRenderer.ts

@@ -16,6 +16,14 @@ const applyTransform = (viewport: Viewport, element: HTMLElement) => {
 
 export const useCanvasRenderer = (
   hostElementRef: RefObject<HTMLElement>,
+  // layers: Record<
+  //   string,
+  //   {
+  //     config: any;
+  //     data: Uint8ClampedArray;
+  //   }
+  // >,
+  // activeLayerId: string,
   size: Size
 ) => {
   const canvasRef = useRef<HTMLCanvasElement | null>(null);

apps/web/src/hooks/useDrawTool.ts

@@ -47,7 +47,9 @@ export const useDrawTool = (
   drawToolId: DrawToolId | null,
   drawToolSettings: Record<string, unknown>,
   transformToCanvasPosition: (position: Position) => Position,
-  getCanvasContext: () => CanvasContext
+  getCanvasContext: () => CanvasContext,
+  _commitChanges: (context: CanvasContext) => void,
+  _revertChanges: (context: CanvasContext) => void
 ) => {
   let toolRef = useRef<DrawTool | null>(null);