Merge branch 'next' into svelte-edge-type-change

packages/svelte/src/lib/components/Attribution/Attribution.svelte

@@ -4,8 +4,8 @@
 
   type $$Props = AttributionProps;
 
-  export let proOptions: AttributionProps['proOptions'] = undefined;
-  export let position: AttributionProps['position'] = 'bottom-right';
+  export let proOptions: $$Props['proOptions'] = undefined;
+  export let position: $$Props['position'] = 'bottom-right';
 </script>
 
 {#if !proOptions?.hideAttribution}

packages/svelte/src/lib/components/EdgeLabelRenderer/EdgeLabelRenderer.svelte

@@ -2,8 +2,6 @@
   import portal from '$lib/actions/portal';
   import { useStore } from '$lib/store';
 
-  type $$Props = {};
-
   const { domNode } = useStore();
 </script>
 

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

@@ -1 +1 @@
-export { default as EdgeLabelRenderer } from './EdgeLabelRenderer.svelte';
+export { default as EdgeLabelRenderer } from './EdgeLabelRenderer.svelte';

packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte

@@ -80,7 +80,7 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 {#if !hidden}
-  <svg style:zIndex>
+  <svg style:z-index={zIndex}>
     <g
       class={cc(['svelte-flow__edge', className])}
       class:animated

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

@@ -1,5 +1,9 @@
 <script lang="ts">
-  import { shortcut, type ShortcutModifierDefinition } from '@svelte-put/shortcut';
+  import {
+    shortcut,
+    type ShortcutEventDetail,
+    type ShortcutModifierDefinition
+  } from '@svelte-put/shortcut';
   import { isInputDOMNode, isMacOs } from '@xyflow/system';
 
   import { useStore } from '$lib/store';
@@ -19,7 +23,8 @@
     multiselectionKeyPressed,
     deleteKeyPressed,
     panActivationKeyPressed,
-    zoomActivationKeyPressed
+    zoomActivationKeyPressed,
+    selectionRect
   } = useStore();
 
   function isKeyObject(key?: KeyDefinition | null): key is KeyDefinitionObject {
@@ -40,140 +45,81 @@
     return isKeyObject(key) ? key.key : key;
   }
 
-  $: selectionKeyDefinition = {
-    key: getKeyString(selectionKey),
-    modifier: getModifier(selectionKey)
-  };
+  function getShortcutTrigger(
+    key: KeyDefinition | KeyDefinition[] | null | undefined,
+    callback: (detail: ShortcutEventDetail) => void
+  ) {
+    const keys = Array.isArray(key) ? key : [key];
+    return keys.map((_key) => {
+      const keyString = getKeyString(_key);
+      return {
+        key: keyString,
+        modifier: getModifier(_key),
+        enabled: keyString !== null,
+        callback
+      };
+    });
+  }
 
-  $: multiSelectionKeyDefinition = {
-    key: getKeyString(multiSelectionKey),
-    modifier: getModifier(multiSelectionKey)
-  };
-
-  $: deleteKeyDefinition = {
-    key: getKeyString(deleteKey),
-    modifier: getModifier(deleteKey)
-  };
-
-  $: panActivationKeyDefinition = {
-    key: getKeyString(panActivationKey),
-    modifier: getModifier(panActivationKey)
-  };
-
-  $: zoomActivationKeyDefinition = {
-    key: getKeyString(zoomActivationKey),
-    modifier: getModifier(zoomActivationKey)
-  };
+  function resetKeysAndSelection() {
+    selectionRect.set(null);
+    selectionKeyPressed.set(false);
+    multiselectionKeyPressed.set(false);
+    deleteKeyPressed.set(false);
+    panActivationKeyPressed.set(false);
+    zoomActivationKeyPressed.set(false);
+  }
 </script>
 
 <svelte:window
+  on:blur={resetKeysAndSelection}
+  on:contextmenu={resetKeysAndSelection}
   use:shortcut={{
-    trigger: [
-      {
-        ...selectionKeyDefinition,
-        enabled: selectionKeyDefinition.key !== null,
-        callback: () => selectionKeyPressed.set(true)
-      }
-    ],
-
+    trigger: getShortcutTrigger(selectionKey, () => selectionKeyPressed.set(true)),
     type: 'keydown'
   }}
   use:shortcut={{
-    trigger: [
-      {
-        ...selectionKeyDefinition,
-        enabled: selectionKeyDefinition.key !== null,
-        callback: () => selectionKeyPressed.set(false)
-      }
-    ],
+    trigger: getShortcutTrigger(selectionKey, () => selectionKeyPressed.set(false)),
     type: 'keyup'
   }}
   use:shortcut={{
-    trigger: [
-      {
-        ...multiSelectionKeyDefinition,
-        enabled: multiSelectionKeyDefinition.key !== null,
-        callback: () => multiselectionKeyPressed.set(true)
-      }
-    ],
+    trigger: getShortcutTrigger(multiSelectionKey, () => multiselectionKeyPressed.set(true)),
     type: 'keydown'
   }}
   use:shortcut={{
-    trigger: [
-      {
-        ...multiSelectionKeyDefinition,
-        enabled: multiSelectionKeyDefinition.key !== null,
-        callback: () => multiselectionKeyPressed.set(false)
-      }
-    ],
+    trigger: getShortcutTrigger(multiSelectionKey, () => multiselectionKeyPressed.set(false)),
     type: 'keyup'
   }}
   use:shortcut={{
-    trigger: [
-      {
-        ...deleteKeyDefinition,
-        enabled: deleteKeyDefinition.key !== null,
-        callback: (detail) => {
-          const isModifierKey =
-            detail.originalEvent.ctrlKey ||
-            detail.originalEvent.metaKey ||
-            detail.originalEvent.shiftKey;
-          if (!isModifierKey && !isInputDOMNode(detail.originalEvent)) {
-            deleteKeyPressed.set(true);
-          }
-        }
+    trigger: getShortcutTrigger(deleteKey, (detail) => {
+      const isModifierKey =
+        detail.originalEvent.ctrlKey ||
+        detail.originalEvent.metaKey ||
+        detail.originalEvent.shiftKey;
+      if (!isModifierKey && !isInputDOMNode(detail.originalEvent)) {
+        deleteKeyPressed.set(true);
       }
-    ],
+    }),
     type: 'keydown'
   }}
   use:shortcut={{
-    trigger: [
-      {
-        ...deleteKeyDefinition,
-        enabled: deleteKeyDefinition.key !== null,
-        callback: () => deleteKeyPressed.set(false)
-      }
-    ],
+    trigger: getShortcutTrigger(deleteKey, () => deleteKeyPressed.set(false)),
     type: 'keyup'
   }}
   use:shortcut={{
-    trigger: [
-      {
-        ...panActivationKeyDefinition,
-        enabled: panActivationKeyDefinition.key !== null,
-        callback: () => panActivationKeyPressed.set(true)
-      }
-    ],
+    trigger: getShortcutTrigger(panActivationKey, () => panActivationKeyPressed.set(true)),
     type: 'keydown'
   }}
   use:shortcut={{
-    trigger: [
-      {
-        ...panActivationKeyDefinition,
-        enabled: panActivationKeyDefinition.key !== null,
-        callback: () => panActivationKeyPressed.set(false)
-      }
-    ],
+    trigger: getShortcutTrigger(panActivationKey, () => panActivationKeyPressed.set(false)),
     type: 'keyup'
   }}
   use:shortcut={{
-    trigger: [
-      {
-        ...zoomActivationKeyDefinition,
-        enabled: zoomActivationKeyDefinition.key !== null,
-        callback: () => zoomActivationKeyPressed.set(true)
-      }
-    ],
+    trigger: getShortcutTrigger(zoomActivationKey, () => zoomActivationKeyPressed.set(true)),
     type: 'keydown'
   }}
   use:shortcut={{
-    trigger: [
-      {
-        ...zoomActivationKeyDefinition,
-        enabled: zoomActivationKeyDefinition.key !== null,
-        callback: () => zoomActivationKeyPressed.set(false)
-      }
-    ],
+    trigger: getShortcutTrigger(zoomActivationKey, () => zoomActivationKeyPressed.set(false)),
     type: 'keyup'
   }}
 />

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

@@ -1,9 +1,9 @@
 import type { KeyDefinition } from '$lib/types';
 
 export type KeyHandlerProps = {
-  selectionKey?: KeyDefinition | null;
-  multiSelectionKey?: KeyDefinition | null;
-  deleteKey?: KeyDefinition | null;
-  panActivationKey?: KeyDefinition | null;
-  zoomActivationKey?: KeyDefinition | null;
+  selectionKey?: KeyDefinition | KeyDefinition[] | null;
+  multiSelectionKey?: KeyDefinition | KeyDefinition[] | null;
+  deleteKey?: KeyDefinition | KeyDefinition[] | null;
+  panActivationKey?: KeyDefinition | KeyDefinition[] | null;
+  zoomActivationKey?: KeyDefinition | KeyDefinition[] | null;
 };

packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte

@@ -1,7 +1,7 @@
 <svelte:options immutable />
 
 <script lang="ts">
-  import { createEventDispatcher, setContext, onDestroy } from 'svelte';
+  import { setContext, onDestroy } from 'svelte';
   import { get, writable } from 'svelte/store';
   import cc from 'classcat';
   import { errorMessages, Position } from '@xyflow/system';
@@ -10,40 +10,39 @@
   import { useStore } from '$lib/store';
   import DefaultNode from '$lib/components/nodes/DefaultNode.svelte';
   import type { NodeWrapperProps } from './types';
-  import type { Node } from '$lib/types';
   import { getNodeInlineStyleDimensions } from './utils';
   import { createNodeEventDispatcher } from '$lib';
 
   interface $$Props extends NodeWrapperProps {}
 
-  export let node: NodeWrapperProps['node'];
-  export let id: NodeWrapperProps['id'];
-  export let data: NodeWrapperProps['data'] = {};
-  export let selected: NodeWrapperProps['selected'] = false;
-  export let draggable: NodeWrapperProps['draggable'] = undefined;
-  export let selectable: NodeWrapperProps['selectable'] = undefined;
-  export let connectable: NodeWrapperProps['connectable'] = true;
-  export let hidden: NodeWrapperProps['hidden'] = false;
+  export let node: $$Props['node'];
+  export let id: $$Props['id'];
+  export let data: $$Props['data'] = {};
+  export let selected: $$Props['selected'] = false;
+  export let draggable: $$Props['draggable'] = undefined;
+  export let selectable: $$Props['selectable'] = undefined;
+  export let connectable: $$Props['connectable'] = true;
+  export let hidden: $$Props['hidden'] = false;
   export let dragging: boolean = false;
-  export let resizeObserver: NodeWrapperProps['resizeObserver'] = null;
-  export let style: NodeWrapperProps['style'] = undefined;
-  export let type: NodeWrapperProps['type'] = 'default';
-  export let isParent: NodeWrapperProps['isParent'] = false;
-  export let positionX: NodeWrapperProps['positionX'];
-  export let positionY: NodeWrapperProps['positionY'];
-  export let positionOriginX: NodeWrapperProps['positionOriginX'];
-  export let positionOriginY: NodeWrapperProps['positionOriginY'];
-  export let sourcePosition: NodeWrapperProps['sourcePosition'] = undefined;
-  export let targetPosition: NodeWrapperProps['targetPosition'] = undefined;
-  export let zIndex: NodeWrapperProps['zIndex'];
-  export let computedWidth: NodeWrapperProps['computedWidth'] = undefined;
-  export let computedHeight: NodeWrapperProps['computedHeight'] = undefined;
-  export let initialWidth: NodeWrapperProps['initialWidth'] = undefined;
-  export let initialHeight: NodeWrapperProps['initialHeight'] = undefined;
-  export let width: NodeWrapperProps['width'] = undefined;
-  export let height: NodeWrapperProps['height'] = undefined;
-  export let dragHandle: NodeWrapperProps['dragHandle'] = undefined;
-  export let initialized: NodeWrapperProps['initialized'] = false;
+  export let resizeObserver: $$Props['resizeObserver'] = null;
+  export let style: $$Props['style'] = undefined;
+  export let type: $$Props['type'] = 'default';
+  export let isParent: $$Props['isParent'] = false;
+  export let positionX: $$Props['positionX'];
+  export let positionY: $$Props['positionY'];
+  export let positionOriginX: $$Props['positionOriginX'];
+  export let positionOriginY: $$Props['positionOriginY'];
+  export let sourcePosition: $$Props['sourcePosition'] = undefined;
+  export let targetPosition: $$Props['targetPosition'] = undefined;
+  export let zIndex: $$Props['zIndex'];
+  export let computedWidth: $$Props['computedWidth'] = undefined;
+  export let computedHeight: $$Props['computedHeight'] = undefined;
+  export let initialWidth: $$Props['initialWidth'] = undefined;
+  export let initialHeight: $$Props['initialHeight'] = undefined;
+  export let width: $$Props['width'] = undefined;
+  export let height: $$Props['height'] = undefined;
+  export let dragHandle: $$Props['dragHandle'] = undefined;
+  export let initialized: $$Props['initialized'] = false;
   let className: string = '';
   export { className as class };
 
@@ -57,7 +56,15 @@
   } = store;
 
   let nodeRef: HTMLDivElement;
-  let prevNodeRef: HTMLDivElement;
+  let prevNodeRef: HTMLDivElement | null = null;
+
+  const nodeTypeValid = !!$nodeTypes[nodeType];
+
+  if (!nodeTypeValid) {
+    console.warn('003', errorMessages['error003'](type!));
+  }
+
+  const nodeComponent = $nodeTypes[nodeType] || DefaultNode;
   const dispatchNodeEvent = createNodeEventDispatcher();
   const connectableStore = writable(connectable);
   let prevType: string | undefined = undefined;
@@ -121,20 +128,17 @@
   setContext('svelteflow__node_connectable', connectableStore);
 
   $: {
-    if (nodeRef) {
-      if (!prevNodeRef) {
-        resizeObserver?.observe(nodeRef);
-        prevNodeRef = nodeRef;
-      } else if (prevNodeRef !== nodeRef || (!computedWidth && !computedHeight)) {
-        resizeObserver?.unobserve(prevNodeRef);
-        resizeObserver?.observe(nodeRef);
-        prevNodeRef = nodeRef;
-      }
+    if (resizeObserver && nodeRef !== prevNodeRef) {
+      prevNodeRef && resizeObserver.unobserve(prevNodeRef);
+      nodeRef && resizeObserver.observe(nodeRef);
+      prevNodeRef = nodeRef;
     }
   }
 
   onDestroy(() => {
-    resizeObserver?.unobserve(nodeRef);
+    if (prevNodeRef) {
+      resizeObserver?.unobserve(prevNodeRef);
+    }
   });
 
   function onSelectNodeHandler(event: MouseEvent | TouchEvent) {

packages/svelte/src/lib/components/ViewportPortal/ViewportPortal.svelte

@@ -2,8 +2,6 @@
   import portal from '$lib/actions/portal';
   import { useStore } from '$lib/store';
 
-  type $$Props = {};
-
   const { domNode } = useStore();
 </script>