feat(svelte): custom nodes

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

@@ -6,13 +6,14 @@
   export let type: HandleType = 'source';
   export let position: Position = Position.Top;
   export let id: string | null = null;
-  export let className: string | null = null;;
+  
+  let className: string | null = null;
+  export { className as class };
 
   const isTarget = type === 'target';
   const nodeId = getContext('rf_nodeid');
 </script>
 
-
 <div
   data-handleid={id}
   data-nodeid={nodeId}
@@ -28,7 +29,7 @@
   class:source={!isTarget}
   class:target={isTarget}
   >
-  <slot></slot>
+  <slot />
 </div>
 
 
@@ -46,27 +47,26 @@
   }
 
   .bottom {
-    top: auto;
+    top: 100%;
     left: 50%;
-    bottom: -4px;
-    transform: translate(-50%, 0);
+    transform: translate(-50%, -50%);
   }
 
   .top {
     left: 50%;
-    top: -4px;
-    transform: translate(-50%, 0);
+    top: 0;
+    transform: translate(-50%, -50%);
   }
 
   .left {
     top: 50%;
-    left: -4px;
-    transform: translate(0, -50%);
+    left: 0;
+    transform: translate(-50%, -50%);
   }
 
   .right {
-    right: -4px;
     top: 50%;
-    transform: translate(0, -50%);
+    left: 100%;
+    transform: translate(-50%, -50%);
   }
 </style>

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

@@ -1,24 +1,30 @@
 <script lang="ts">
-	import { onMount, setContext } from 'svelte';
-  import type { XYPosition } from '@reactflow/system';
+	import { onMount, setContext, SvelteComponentTyped, type ComponentType } from 'svelte';
+  import { type XYPosition, Position } from '@reactflow/system';
 
   import drag  from '$lib/actions/drag'
 	import { useStore } from '$lib/store';
 	import DefaultNode from './DefaultNode.svelte';
+	import type { NodeProps } from '$lib/types';
 
-  export let id: string;
+  export let id: NodeProps['id'];
+  export let data: NodeProps['data'] = {};
+  export let selected: NodeProps['selected'] = false;
   export let positionAbsolute: XYPosition = { x: 0, y: 0 };
   export let position: XYPosition = { x: 0, y: 0 };
   export let dragging: boolean = false;
-  export let data: any = {};
   export let resizeObserver: ResizeObserver | null = null;
   export let style: any = {};
   export let width: number = 0;
   export let height: number = 0;
+  export let type: string = 'default';
+  export let sourcePosition: Position = Position.Bottom;
+  export let targetPosition: Position = Position.Top;
 
   let nodeRef: HTMLDivElement;
-
-  const { nodesStore, transformStore, updateNodePositions } = useStore();
+  
+  const { nodesStore, transformStore, updateNodePositions, nodeTypesStore } = useStore();
+  const nodeComponent: typeof SvelteComponentTyped<NodeProps> = $nodeTypesStore[type] || DefaultNode;
 
   setContext('rf_nodeid', id);
 
@@ -37,17 +43,26 @@
   class:initializing={!width && !height}
   class:dragging={dragging}
   bind:this={nodeRef}
-  style="transform: translate({positionAbsolute.x}px, {positionAbsolute.y}px);"
+  style:transform={`translate(${positionAbsolute.x}px, ${positionAbsolute.y}px)`}
+  {style}
   data-id={id}
 >
-  <svelte:component this={DefaultNode} data={data} />
+  <svelte:component
+    this={nodeComponent}
+    {data}
+    {id}
+    {selected}
+    {sourcePosition}
+    {targetPosition}
+    isConnectable={true}
+    xPos={positionAbsolute.x}
+    yPos={positionAbsolute.y}
+  />
 </div>
 
 <style>
   .react-flow__node {
-    padding: 10px;
     border-radius: 3px;
-    width: 50px;
     font-size: 12px;
     color: #222;
     text-align: center;

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

@@ -1,12 +1,19 @@
 <script lang="ts">
   import { Position } from '@reactflow/system';
   
-  import Handle from '$lib/components/Handle.svelte';
+  import Handle from '$lib/components/Handle/index.svelte';
+	import type { NodeProps } from '$lib/types';
 
-  export let data: any = {};
-  export let isConnectable: boolean = true;
-  export let targetPosition: Position = Position.Top;
-  export let sourcePosition: Position = Position.Bottom;
+  interface $$Props extends NodeProps<{ label: string }>{}
+
+  export let id: $$Props['id'];
+  export let data: $$Props['data'] = { label: 'Node' };
+  export let isConnectable: $$Props['isConnectable'] = true;
+  export let targetPosition: $$Props['targetPosition'] = Position.Top;
+  export let sourcePosition: $$Props['sourcePosition'] = Position.Bottom;
+  export let xPos: $$Props['xPos'];
+  export let yPos: $$Props['yPos'];
+  export let selected: $$Props['selected'];
 </script>
 
 <Handle type="target" position={targetPosition} />

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

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { Position } from '@reactflow/system';
+  
+  import Handle from '$lib/components/Handle/index.svelte';
+
+  export let data: { label: string } = { label: 'Node' };
+  export let isConnectable: boolean = true;
+  export let sourcePosition: Position = Position.Bottom;
+</script>
+
+{data?.label}
+<Handle type="source" position={sourcePosition} />
+

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

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { Position } from '@reactflow/system';
+  
+  import Handle from '$lib/components/Handle/index.svelte';
+
+  export let data: { label: string } = { label: 'Node' };
+  export let isConnectable: boolean = true;
+  export let targetPosition: Position = Position.Top;
+</script>
+
+{data?.label}
+<Handle type="target" position={targetPosition} />
+