feat(svelte): make nodes deletable

packages/svelte/src/lib/components/KeyHandler/KeyHandler.d.ts

@@ -0,0 +1,6 @@
+import { KeyDefinition } from '$lib/types';
+
+export type KeyHandlerProps = {
+	selectionKey?: KeyDefinition;
+	deleteKey?: KeyDefinition;
+};

packages/svelte/src/lib/components/KeyHandler/KeyHandler.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import { shortcut } from '@svelte-put/shortcut';
+
+  import { useStore } from '$lib/store';
+  import type { KeyHandlerProps } from './KeyHandler'
+	import type { KeyDefinition, KeyDefinitionObject } from '$lib/types';
+
+  const { selectionKeyPressedStore, deleteKeyPressedStore } = useStore();
+
+  type $$Props = KeyHandlerProps;
+
+  export let selectionKey: $$Props['selectionKey'] = 'Shift'; 
+  export let deleteKey: $$Props['deleteKey'] = 'Backspace'; 
+
+  function isKeyObject(key?: KeyDefinition): key is KeyDefinitionObject {
+    return typeof key === 'object';
+  } 
+
+  $: selectionKeyString = typeof selectionKey === 'string' ? selectionKey : selectionKey!.key;
+  $: selectionKeyModifier = isKeyObject(selectionKey) ? selectionKey?.modifier : [];
+
+  $: deleteKeyString = typeof deleteKey === 'string' ? deleteKey : deleteKey!.key;
+  $: deleteKeyModifier = isKeyObject(deleteKey) ? deleteKey?.modifier : [];
+</script>
+
+<svelte:window
+  use:shortcut={{ 
+    trigger: [{ key: selectionKeyString, modifier: selectionKeyModifier, callback: () => selectionKeyPressedStore.set(true) }],
+    type: 'keydown'
+  }}
+  use:shortcut={{ 
+    trigger: [{ key: selectionKeyString, modifier: selectionKeyModifier, callback: () => selectionKeyPressedStore.set(false) }],
+    type: 'keyup'
+  }}
+  use:shortcut={{ 
+    trigger: [{ key: deleteKeyString, modifier: deleteKeyModifier, callback: () => deleteKeyPressedStore.set(true) }],
+    type: 'keydown'
+  }}
+  use:shortcut={{ 
+    trigger: [{ key: deleteKeyString, modifier: deleteKeyModifier, callback: () => deleteKeyPressedStore.set(false) }],
+    type: 'keyup'
+  }}
+/>

packages/svelte/src/lib/components/KeyHandler/index.svelte

@@ -1,26 +0,0 @@
-<script lang="ts">
-  import { shortcut } from '@svelte-put/shortcut';
-
-  import { useStore } from '$lib/store';
-
-  const { selectionKeyPressedStore } = useStore();
-
-  function onSelectionKeyDown() {
-    selectionKeyPressedStore.set(true);
-  }
-
-  function onSelectionKeyUp() {
-    selectionKeyPressedStore.set(false);
-  }
-</script>
-
-<svelte:window
-  use:shortcut={{ 
-    trigger: [{ key: 'Shift', callback: onSelectionKeyDown }],
-    type: 'keydown'
-  }}
-  use:shortcut={{ 
-    trigger: [{ key: 'Shift', callback: onSelectionKeyUp }],
-    type: 'keyup'
-  }}
-/>

packages/svelte/src/lib/components/KeyHandler/index.ts

@@ -0,0 +1,2 @@
+export { default as KeyHandler } from './KeyHandler.svelte';
+export type { KeyHandlerProps } from './KeyHandler';

packages/svelte/src/lib/components/nodes/BaseNode.svelte

@@ -23,14 +23,16 @@
   export let type: WrapNodeProps['type'] = 'default';
   export let sourcePosition: WrapNodeProps['sourcePosition'] = Position.Bottom;
   export let targetPosition: WrapNodeProps['targetPosition'] = Position.Top;
-
   let className: string = '';
   export { className as class };
 
   let nodeRef: HTMLDivElement;
-  
-  const { nodesStore, transformStore, updateNodePositions, nodeTypesStore } = useStore();
+
+  const { nodesStore, transformStore, nodeTypesStore, updateNodePositions, addSelectedNodes } = useStore();
   const nodeComponent: typeof SvelteComponentTyped<Partial<NodeProps>> = $nodeTypesStore[type] || DefaultNode;
+  const isSelectable = true;
+  const selectNodesOnDrag = false;
+  const isDraggable = true;
 
   setContext('rf_nodeid', id);
 
@@ -41,6 +43,18 @@
       resizeObserver?.unobserve(nodeRef);
     }
   });
+
+  function onSelectNodeHandler(event: MouseEvent) {
+    if (isSelectable && (!selectNodesOnDrag || !isDraggable)) {
+      // this handler gets called within the drag start event when selectNodesOnDrag=true
+      addSelectedNodes([id]);
+    }
+
+    // if (onClick) {
+    //   const node = store.getState().nodeInternals.get(id)!;
+    //   onClick(event, { ...node });
+    // }
+  };
 </script>
 
 <div
@@ -48,7 +62,9 @@
   class={cc(['react-flow__node', `react-flow__node-${type}`, className])}
   class:initializing={!width && !height}
   class:dragging={dragging}
+  class:selected={selected}
   bind:this={nodeRef}
+  on:click={onSelectNodeHandler}
   style:transform={`translate(${positionAbsolute.x}px, ${positionAbsolute.y}px)`}
   {style}
   data-id={id}
@@ -82,6 +98,11 @@
     user-select: none;
   }
 
+  .selected {
+    outline: none;
+    box-shadow: 0 0 0 0.5px #1a192b;
+  }
+
   .dragging {
     cursor: grabbing;
   }