feat(core): add deletable option to nodes and edges

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

packages/core/src/store/actions.ts

@@ -373,10 +373,20 @@ export function useActions(state: State, getters: ComputedGetters): Actions {
     const curr = nodes instanceof Function ? nodes(state.nodes) : nodes
     const nodeChanges: NodeRemoveChange[] = []
     const edgeChanges: EdgeRemoveChange[] = []
+
     curr.forEach((item) => {
-      nodeChanges.push(createRemoveChange(typeof item === 'string' ? item : item.id))
+      const currNode = typeof item === 'string' ? findNode(item)! : item
+
+      if (isDef(currNode.deletable) && !currNode.deletable) return
+
+      nodeChanges.push(createRemoveChange(currNode.id))
+
       if (removeConnectedEdges) {
-        const connections = getConnectedEdges([typeof item === 'string' ? ({ id: item } as any) : item], state.edges)
+        const connections = getConnectedEdges([currNode], state.edges).filter((edge) => {
+          if (isDef(edge.deletable)) return edge.deletable
+          return true
+        })
+
         edgeChanges.push(...connections.map((connection) => createRemoveChange(connection.id)))
       }
     })
@@ -393,7 +403,12 @@ export function useActions(state: State, getters: ComputedGetters): Actions {
   const removeEdges: Actions['removeEdges'] = (edges) => {
     const curr = edges instanceof Function ? edges(state.edges) : edges
     const changes: EdgeRemoveChange[] = []
+
     curr.forEach((item) => {
+      const currEdge = typeof item === 'string' ? findEdge(item)! : item
+
+      if (isDef(currEdge.deletable) && !currEdge.deletable) return
+
       changes.push(createRemoveChange(typeof item === 'string' ? item : item.id))
     })
 

packages/core/src/types/edge.ts

@@ -84,8 +84,10 @@ export interface DefaultEdge<Data = ElementData, CustomEvents extends Record<str
   updatable?: EdgeUpdatable
   /** Disable/enable selecting edge */
   selectable?: boolean
-  /** Disable/enable focusing edges (a11y) */
+  /** Disable/enable focusing edge (a11y) */
   focusable?: boolean
+  /** Disable/enable deleting edge */
+  deletable?: boolean
   /** Additional class names, can be a string or a callback returning a string (receives current flow element) */
   class?: string | ClassFunc<GraphEdge<Data, CustomEvents>>
   /** Additional styles, can be an object or a callback returning an object (receives current flow element) */

packages/core/src/types/node.ts

@@ -35,10 +35,15 @@ export interface Node<Data = ElementData, CustomEvents extends Record<string, Cu
   targetPosition?: Position
   /** handle position */
   sourcePosition?: Position
+  /** Disable/enable dragging node */
   draggable?: boolean
+  /** Disable/enable selecting node */
   selectable?: boolean
   connectable?: HandleConnectable
+  /** Disable/enable focusing node (a11y) */
   focusable?: boolean
+  /** Disable/enable deleting node */
+  deletable?: boolean
   dragHandle?: string
   // todo: deprecate this and remove them in next minor release
   /** called when used as target for new connection */

packages/core/src/utils/graph.ts

@@ -321,8 +321,9 @@ export const getNodesInside = (
   })
 }
 
-export const getConnectedEdges = (nodes: GraphNode[], edges: GraphEdge[]) => {
+export const getConnectedEdges = (nodes: (Node | GraphNode)[], edges: GraphEdge[]) => {
   const nodeIds = nodes.map((node) => node.id)
+
   return edges.filter((edge) => nodeIds.includes(edge.source) || nodeIds.includes(edge.target))
 }