feat(svelte): make nodes deletable

2023-02-23 13:44:57 +01:00
parent 658366e67f
commit bb528e6798
12 changed files with 167 additions and 39 deletions
@@ -0,0 +1,6 @@
+import { KeyDefinition } from '$lib/types';
+
+export type KeyHandlerProps = {
+	selectionKey?: KeyDefinition;
+	deleteKey?: KeyDefinition;
+};
@@ -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'
+  }}
+/>
@@ -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'
-  }}
-/>
@@ -0,0 +1,2 @@
+export { default as KeyHandler } from './KeyHandler.svelte';
+export type { KeyHandlerProps } from './KeyHandler';