More layer operations

mateuszmigas · Mar 10, 2024 · 5d7c150 · 5d7c150
1 parent 340169f
commit 5d7c150
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 2 deletions.
diff --git a/apps/web/src/components/panels/layersPanel.tsx b/apps/web/src/components/panels/layersPanel.tsx
@@ -11,6 +11,9 @@ const LayerItem = (props: {
   onClick: () => void;
 }) => {
   const { layer, onClick } = props;
+  const { showLayer, hideLayer, lockLayer, unlockLayer } = useWorkspacesStore(
+    (state) => state
+  );
   return (
     <div
       onClick={onClick}
@@ -22,7 +25,9 @@ const LayerItem = (props: {
       <IconButton
         type={layer.visible ? "visible" : "hidden"}
         size="small"
-        onClick={() => console.log("eye clicked")}
+        onClick={() =>
+          layer.visible ? hideLayer(layer.id) : showLayer(layer.id)
+        }
       />
 
       <div className="min-w-16 min-h-12 border border-black bg-white"></div>
@@ -31,7 +36,9 @@ const LayerItem = (props: {
         <IconButton
           type={layer.locked ? "lock" : "unlock"}
           size="small"
-          onClick={() => console.log("eye clicked")}
+          onClick={() =>
+            layer.locked ? unlockLayer(layer.id) : lockLayer(layer.id)
+          }
         />
         {/* <IconButton
           type={layer.locked ? "lock" : "unlock"}

diff --git a/apps/web/src/store/workspacesStore.ts b/apps/web/src/store/workspacesStore.ts
@@ -55,6 +55,11 @@ type AppWorkspacesSlice = AppWorkspacesState & {
   duplicateLayer: (layerId: LayerId) => void;
   moveLayerUp: (layerId: LayerId) => void;
   moveLayerDown: (layerId: LayerId) => void;
+  lockLayer: (layerId: LayerId) => void;
+  unlockLayer: (layerId: LayerId) => void;
+  showLayer: (layerId: LayerId) => void;
+  hideLayer: (layerId: LayerId) => void;
+
   // mergeLayerUp: (workspaceId: string, layerId: string) => void;
   // mergeLayerDown: (workspaceId: string, layerId: string) => void;
 };
@@ -181,6 +186,46 @@ export const workspacesStoreCreator: StateCreator<AppWorkspacesSlice> = (
       })
     );
   },
+  lockLayer: (layerId: LayerId) => {
+    return set((state) =>
+      forSelectedWorkspace(state, (workspace) => {
+        const newLayers = workspace.layers.map((layer) =>
+          layer.id === layerId ? { ...layer, locked: true } : layer
+        );
+        return { ...workspace, layers: newLayers };
+      })
+    );
+  },
+  unlockLayer: (layerId: LayerId) => {
+    return set((state) =>
+      forSelectedWorkspace(state, (workspace) => {
+        const newLayers = workspace.layers.map((layer) =>
+          layer.id === layerId ? { ...layer, locked: false } : layer
+        );
+        return { ...workspace, layers: newLayers };
+      })
+    );
+  },
+  showLayer: (layerId: LayerId) => {
+    return set((state) =>
+      forSelectedWorkspace(state, (workspace) => {
+        const newLayers = workspace.layers.map((layer) =>
+          layer.id === layerId ? { ...layer, visible: true } : layer
+        );
+        return { ...workspace, layers: newLayers };
+      })
+    );
+  },
+  hideLayer: (layerId: LayerId) => {
+    return set((state) =>
+      forSelectedWorkspace(state, (workspace) => {
+        const newLayers = workspace.layers.map((layer) =>
+          layer.id === layerId ? { ...layer, visible: false } : layer
+        );
+        return { ...workspace, layers: newLayers };
+      })
+    );
+  },
 });
 
 export const useWorkspacesStore = create<AppWorkspacesSlice>(