refactor(svelte): cleanup node options and props

packages/core/src/components/Nodes/wrapNode.tsx

@@ -84,7 +84,7 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
     };
 
     const onKeyDown = (event: KeyboardEvent) => {
-      if (isInputDOMNode(event)) {
+      if (isInputDOMNode(event.nativeEvent)) {
         return;
       }
 

packages/core/src/container/NodeRenderer/index.tsx

@@ -1,13 +1,12 @@
 import { memo, useMemo, useEffect, useRef, type ComponentType } from 'react';
 import { shallow } from 'zustand/shallow';
 import { internalsSymbol, errorMessages, Position } from '@reactflow/system';
-import { clampPosition } from '@reactflow/utils';
+import { clampPosition, getPositionWithOrigin } from '@reactflow/utils';
 
 import useVisibleNodes from '../../hooks/useVisibleNodes';
 import { useStore } from '../../hooks/useStore';
 import { containerStyle } from '../../styles';
 import { GraphViewProps } from '../GraphView';
-import { getPositionWithOrigin } from './utils';
 import type { ReactFlowState, WrapNodeProps } from '../../types';
 
 type NodeRendererProps = Pick<

packages/core/src/container/NodeRenderer/utils.ts

@@ -1,5 +1,5 @@
 import type { ComponentType } from 'react';
-import type { NodeProps, NodeOrigin, XYPosition } from '@reactflow/system';
+import type { NodeProps } from '@reactflow/system';
 
 import DefaultNode from '../../components/Nodes/DefaultNode';
 import InputNode from '../../components/Nodes/InputNode';
@@ -32,30 +32,3 @@ export function createNodeTypes(nodeTypes: NodeTypes): NodeTypesWrapped {
     ...specialTypes,
   };
 }
-
-export const getPositionWithOrigin = ({
-  x,
-  y,
-  width,
-  height,
-  origin,
-}: {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-  origin: NodeOrigin;
-}): XYPosition => {
-  if (!width || !height) {
-    return { x, y };
-  }
-
-  if (origin[0] < 0 || origin[1] < 0 || origin[0] > 1 || origin[1] > 1) {
-    return { x, y };
-  }
-
-  return {
-    x: x - width * origin[0],
-    y: y - height * origin[1],
-  };
-};

packages/svelte/src/customnodes/Custom.svelte

@@ -10,8 +10,12 @@
 <div class="custom">
   <div>{data.label}</div>
   <div>{~~xPos}, {~~yPos}</div>
+
   <Handle type="target" position={Position.Top} />
-  <Handle type="source" position={Position.Bottom} />
+
+  <Handle type="source" position={Position.Bottom} style="left: 10%;" id="a" />
+  <Handle type="source" position={Position.Bottom} id="b" />
+  <Handle type="source" position={Position.Bottom} style="left: 90%;" id="c" />
 </div>
 
 <style>

packages/svelte/src/lib/actions/drag/utils.ts

@@ -37,7 +37,10 @@ export function hasSelector(target: Element, selector: string, domNode: Element)
 export function getDragItems(nodes: Node[], mousePos: XYPosition, nodeId?: string): NodeDragItem[] {
   return nodes
     .filter(
-      (n) => (n.selected || n.id === nodeId) && (!n.parentNode || !isParentSelected(n, nodes))
+      (n) =>
+        (n.selected || n.id === nodeId) &&
+        (n.draggable || n.draggable === undefined) &&
+        (!n.parentNode || !isParentSelected(n, nodes))
     )
     .map((n) => ({
       id: n.id,

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;
 };

packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte

@@ -3,8 +3,10 @@
 
   import { NodeWrapper } from '$lib/components/NodeWrapper';
   import { useStore } from '$lib/store';
+    import { getPositionWithOrigin } from '@reactflow/utils';
+    import { Position } from '@reactflow/system';
 
-  const { nodes, updateNodeDimensions } = useStore();
+  const { nodes, nodeOrigin, updateNodeDimensions } = useStore();
   const resizeObserver: ResizeObserver | null =
     typeof ResizeObserver === 'undefined'
       ? null
@@ -21,13 +23,32 @@
   onDestroy(() => {
     resizeObserver?.disconnect();
   });
-
 </script>
 
 <div class="svelte-flow__nodes">
   {#each $nodes as node (node.id)}
+    {@const posOrigin = getPositionWithOrigin({
+      x: node.positionAbsolute?.x ?? 0,
+      y: node.positionAbsolute?.y ?? 0,
+      width: node.width ?? 0,
+      height: node.height ?? 0,
+      origin: $nodeOrigin
+    })}
     <NodeWrapper
-      {...node}
+      id={node.id}
+      data={node.data}
+      selected={node.selected}
+      draggable={node.draggable || node.draggable === undefined}
+      positionAbsolute={node.positionAbsolute}
+      positionOrigin={posOrigin}
+      width={node.width}
+      height={node.height}
+      style={node.style}
+      class={node.class}
+      type={node.type}
+      sourcePosition={node.sourcePosition}
+      targetPosition={node.targetPosition}
+      dragging={node.dragging}
       {resizeObserver}
       on:node:click
       on:node:mouseenter

packages/svelte/src/lib/store/index.ts

@@ -19,7 +19,7 @@ import {
   getElementsToRemove
 } from '@reactflow/utils';
 
-import { getHandleBounds, getConnectedEdges, addEdge as addEdgeUtil } from '$lib/utils';
+import { getHandleBounds, addEdge as addEdgeUtil } from '$lib/utils';
 import type { EdgeTypes, NodeTypes, Node, Edge, ConnectionData } from '$lib/types';
 import { getEdgesLayouted } from './edges-layouted';
 import { getConnectionPath } from './connection-path';
@@ -77,11 +77,14 @@ export function createStore({ fitView: fitViewOnInit = false }: CreateStoreProps
   }
 
   function setNodes(nodes: Node[]) {
+    const defaultNodeOptions = get(store.defaultNodeOptions) || {};
+
     store.nodes.update((currentNodes) => {
       const nextNodes = nodes.map((n) => {
         const currentNode = currentNodes.find((cn) => cn.id === n.id) || {};
 
         return {
+          ...defaultNodeOptions,
           ...currentNode,
           ...n,
           positionAbsolute: n.position

packages/svelte/src/lib/store/initial-store.ts

@@ -23,7 +23,8 @@ import type {
   NodeTypes,
   EdgeTypes,
   EdgeLayouted,
-  DefaultEdgeOptions
+  DefaultEdgeOptions,
+  DefaultNodeOptions
 } from '$lib/types';
 
 export const initConnectionData = {
@@ -60,6 +61,7 @@ export const initialStoreState = {
     zoom: null,
     selection: null
   }),
+  defaultNodeOptions: writable<DefaultNodeOptions | null>(null),
   defaultEdgeOptions: writable<DefaultEdgeOptions | null>(null),
   dragging: writable<boolean>(false),
   selectionRect: writable<SelectionRect | null>(null),

packages/svelte/src/lib/types/general.ts

@@ -1,5 +1,5 @@
 import type { ShortcutModifierDefinition } from '@svelte-put/shortcut';
-import type { HandleType, XYPosition } from '@reactflow/system';
+import type { HandleProps, HandleType, XYPosition } from '@reactflow/system';
 
 export type KeyModifier = ShortcutModifierDefinition;
 export type KeyDefinitionObject = { key: string; modifier?: KeyModifier };
@@ -12,3 +12,8 @@ export type ConnectionData = {
   handleType: HandleType | null;
   status: string | null;
 };
+
+export type HandleComponentProps = HandleProps & {
+  class?: string;
+  style?: string;
+};

packages/svelte/src/lib/types/nodes.ts

@@ -25,3 +25,5 @@ export type NodeProps<NodeData = any> = Pick<
 };
 
 export type NodeTypes = Record<string, typeof SvelteComponentTyped<Partial<NodeProps>>>;
+
+export type DefaultNodeOptions = Omit<Node, 'id'>;

packages/svelte/src/routes/+page.svelte

@@ -65,7 +65,14 @@
       type: 'default',
       data: { label: 'Styled with class' },
       class: 'custom-style',
-      position: { x: 150, y: 150 }
+      position: { x: 150, y: 150 },
+    },
+    {
+      id: 'D',
+      type: 'default',
+      data: { label: 'Not draggable' },
+      position: { x: 150, y: 200 },
+      draggable: false
     },
     {
       id: '3',

packages/utils/src/utils.ts

@@ -1,4 +1,13 @@
-import type { Dimensions, XYPosition, CoordinateExtent, Box, Rect, BaseNode, BaseEdge } from '@reactflow/system';
+import type {
+  Dimensions,
+  XYPosition,
+  CoordinateExtent,
+  Box,
+  Rect,
+  BaseNode,
+  BaseEdge,
+  NodeOrigin,
+} from '@reactflow/system';
 import { getConnectedEdgesBase } from './graph';
 
 export const getDimensions = (node: HTMLDivElement): Dimensions => ({
@@ -157,3 +166,30 @@ export function getElementsToRemove<NodeType extends BaseNode = BaseNode, EdgeTy
     matchingNodes,
   };
 }
+
+export const getPositionWithOrigin = ({
+  x,
+  y,
+  width,
+  height,
+  origin,
+}: {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  origin: NodeOrigin;
+}): XYPosition => {
+  if (!width || !height) {
+    return { x, y };
+  }
+
+  if (origin[0] < 0 || origin[1] < 0 || origin[0] > 1 || origin[1] > 1) {
+    return { x, y };
+  }
+
+  return {
+    x: x - width * origin[0],
+    y: y - height * origin[1],
+  };
+};