refactor(svelte): cleanup node options and props

packages/svelte/src/lib/components/Handle/Handle.svelte

@@ -1,20 +1,23 @@
 <script lang="ts">
-  import { getContext } from 'svelte';
-  import { createEventDispatcher } from 'svelte';
+  import { getContext, createEventDispatcher } from 'svelte';
   import cc from 'classcat';
-  import { Position, type Connection, type HandleProps } from '@reactflow/system';
+  import { Position, type Connection } from '@reactflow/system';
   import { isMouseEvent } from '@reactflow/utils';
 
   import { handlePointerDown } from './handler';
   import { useStore } from '$lib/store';
+  import type { HandleComponentProps } from '$lib/types';
 
-  type $$Props = HandleProps;
+  type $$Props = HandleComponentProps;
 
   export let id: $$Props['id'] = undefined;
   export let type: $$Props['type'] = 'source';
   export let position: $$Props['position'] = Position.Top;
   export let isConnectable: $$Props['isConnectable'] = true;
+  export let style: $$Props['style'] = undefined;
   export let isValidConnection: $$Props['isValidConnection'] = (_: Connection) => true;
+  let className: $$Props['class'] = undefined;
+  export { className as class };
 
   const isTarget = type === 'target';
   const nodeId = getContext<string>('rf_nodeid');
@@ -78,13 +81,15 @@
     `svelte-flow__handle-${position}`,
     'nodrag',
     'nopan',
-    position
+    position,
+    className
   ])}
   class:source={!isTarget}
   class:target={isTarget}
   class:connectable={isConnectable}
   on:mousedown={onPointerDown}
   on:touchstart={onPointerDown}
+  {style}
 >
   <slot />
 </div>

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

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { createEventDispatcher, onMount, setContext, SvelteComponentTyped } from 'svelte';
   import cc from 'classcat';
-  import { type XYPosition, Position, errorMessages } from '@reactflow/system';
+  import { errorMessages } from '@reactflow/system';
 
   import drag from '$lib/actions/drag';
   import { useStore } from '$lib/store';
@@ -14,16 +14,17 @@
   export let id: NodeWrapperProps['id'];
   export let data: NodeWrapperProps['data'] = {};
   export let selected: NodeWrapperProps['selected'] = false;
-  export let positionAbsolute: XYPosition = { x: 0, y: 0 };
-  export let position: XYPosition = { x: 0, y: 0 };
+  export let draggable: NodeWrapperProps['draggable'] = undefined;
   export let dragging: boolean = false;
   export let resizeObserver: NodeWrapperProps['resizeObserver'] = null;
   export let style: NodeWrapperProps['style'] = undefined;
   export let width: NodeWrapperProps['width'] = undefined;
   export let height: NodeWrapperProps['height'] = undefined;
   export let type: NodeWrapperProps['type'] = 'default';
-  export let sourcePosition: NodeWrapperProps['sourcePosition'] = Position.Bottom
-  export let targetPosition: NodeWrapperProps['targetPosition'] = Position.Top;
+  export let positionAbsolute: NodeWrapperProps['positionAbsolute'] = undefined;
+  export let positionOrigin: NodeWrapperProps['positionOrigin'] = undefined;
+  export let sourcePosition: NodeWrapperProps['sourcePosition'] = undefined;
+  export let targetPosition: NodeWrapperProps['targetPosition'] = undefined;
 
   let className: string = '';
   export { className as class };
@@ -42,7 +43,6 @@
     $nodeTypes[type!] || DefaultNode;
   const isSelectable = true;
   const selectNodesOnDrag = false;
-  const isDraggable = true;
   const dispatch = createEventDispatcher();
 
   setContext('rf_nodeid', id);
@@ -61,7 +61,7 @@
   }
 
   function onSelectNodeHandler(event: MouseEvent) {
-    if (isSelectable && (!selectNodesOnDrag || !isDraggable)) {
+    if (isSelectable && (!selectNodesOnDrag || !draggable)) {
       // this handler gets called within the drag start event when selectNodesOnDrag=true
       addSelectedNodes([id]);
     }
@@ -72,13 +72,14 @@
 
 <div
   use:drag={{ nodeId: id, nodes, transform, updateNodePositions }}
+  bind:this={nodeRef}
   data-id={id}
   class={cc(['svelte-flow__node', `svelte-flow__node-${type}`, className])}
   class:initializing={!width && !height}
   class:dragging
   class:selected
-  bind:this={nodeRef}
-  style:transform={`translate(${positionAbsolute.x}px, ${positionAbsolute.y}px)`}
+  class:draggable
+  style:transform={`translate(${positionOrigin?.x ?? 0}px, ${positionOrigin?.y ?? 0}px)`}
   {style}
   on:click={onSelectNodeHandler}
   on:mouseenter={() => dispatchEvent('node:mouseenter')}
@@ -93,8 +94,8 @@
     {sourcePosition}
     {targetPosition}
     isConnectable={true}
-    xPos={positionAbsolute.x}
-    yPos={positionAbsolute.y}
+    xPos={positionAbsolute?.x ?? 0}
+    yPos={positionAbsolute?.y ?? 0}
     on:connect:start
     on:connect
     on:connect:end
@@ -111,9 +112,13 @@
     border-color: #1a192b;
     background-color: white;
     position: absolute;
+    pointer-events: none;
+    user-select: none;
+  }
+
+  .draggable {
     cursor: grab;
     pointer-events: all;
-    user-select: none;
   }
 
   .selected {

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

@@ -1,6 +1,23 @@
+import type { XYPosition } from '@reactflow/system';
 import type { Node } from '$lib/types';
 
-export type NodeWrapperProps = Node & {
+export type NodeWrapperProps = Pick<
+  Node,
+  | 'id'
+  | 'class'
+  | 'data'
+  | 'draggable'
+  | 'dragging'
+  | 'positionAbsolute'
+  | 'selected'
+  | 'style'
+  | 'type'
+  | 'width'
+  | 'height'
+  | 'sourcePosition'
+  | 'targetPosition'
+> & {
+  positionOrigin?: XYPosition;
   'on:nodeclick'?: (event: MouseEvent) => void;
   resizeObserver?: ResizeObserver | null;
 };