prevent delete when annotation is present (#281)

packages/graph-editor/src/components/contextMenus/nodeContextMenu.tsx

@@ -10,6 +10,8 @@ import { Graph } from 'graphlib';
 import { useAction } from '@/editor/actions/provider';
 import { graph } from '@/redux/selectors';
 import { useLocalGraph } from '@/hooks';
+import { useCanDeleteNode } from '@/hooks/useCanDeleteNode';
+import { useToast } from '@/hooks/useToast';
 
 export interface INodeContextMenuProps {
   id: string;
@@ -72,11 +74,19 @@ export const NodeContextMenu = ({
   id,
   nodes,
 }: INodeContextMenuProps) => {
+  const trigger = useToast();
   const reactFlowInstance = useReactFlow();
   const duplicateNodes = useAction('duplicateNodes');
   const graph = useLocalGraph();
 
+  const isDeletable = useCanDeleteNode(nodes?.[0]?.id);
+
   const deleteEl = useCallback(() => {
+    if (isDeletable) {
+      trigger({ title: 'Node is not deletable', description: 'This node cannot be deleted' })
+      return;
+    }
+
     if (nodes) {
       reactFlowInstance.deleteElements({ nodes });
     }
@@ -143,21 +153,21 @@ export const NodeContextMenu = ({
 
   const forceExecution = useCallback(() => {
     if (nodes) {
- 
+
       nodes.forEach((node) => {
         const graphNode = graph.getNode(node.id);
         if (graphNode) {
           graphNode.run();
         }
       });
     }
-  },[graph, nodes]);
+  }, [graph, nodes]);
 
   return (
     <Menu id={id}>
       <Item onClick={onDuplicate}>Duplicate</Item>
       <Item onClick={focus}>Focus</Item>
-      <Item onClick={deleteEl}>Delete</Item>
+      <Item disabled={!isDeletable} onClick={deleteEl}>Delete</Item>
       <Item onClick={forceExecution}>Force Execution</Item>
       <Separator />
       {nodes?.length == 1 && (

packages/graph-editor/src/components/hotKeys/index.tsx

@@ -12,6 +12,7 @@ import { HotKeys as HotKeysComp } from 'react-hotkeys';
 import { useAction } from '@/editor/actions/provider';
 import { useAutoLayout } from '@/editor/hooks/useAutolayout';
 import React from 'react';
+import { annotatedDeleteable } from '@tokens-studio/graph-engine';
 
 export const keyMap = {
     AUTO_LAYOUT: 'ctrl+alt+f',
@@ -58,7 +59,6 @@ export const useHotkeys = () => {
     const duplicateNodes = useAction('duplicateNodes');
     const deleteNode = useAction('deleteNode');
     const copyNodes = useAction('copyNodes');
-
     const layout = useAutoLayout();
 
     const dispatch = useDispatch();
@@ -110,6 +110,11 @@ export const useHotkeys = () => {
                 const selectedNodes = reactFlowInstance.getNodes().filter((x) => x.selected).map((x) => x.id);
 
                 selectedNodes.forEach((id) => {
+                    const edgeNode = graph.getNode(id);
+                    if (edgeNode?.annotations[annotatedDeleteable] === false) {
+                        trigger({ title: 'Node not deletable', description: `Node ${edgeNode.nodeType()} is not deletable` });
+                        return;
+                    }
                     deleteNode(id);
                 });
 

packages/graph-editor/src/hooks/useCanDeleteNode.ts

@@ -0,0 +1,15 @@
+import { annotatedDeleteable } from "@tokens-studio/graph-engine";
+import { useLocalGraph } from "./useLocalGraph";
+
+export const useCanDeleteNode = (nodeId: string) => {
+    const graph = useLocalGraph();
+    const node = graph.getNode(nodeId);
+
+    if (node) {
+        if (node.annotations[annotatedDeleteable] === false) {
+            return false;
+        }
+    }
+
+    return true;
+}