feat(svelte): add event handlers and props, rename class names

packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-  import { setContext, onMount } from 'svelte';
-  import { ConnectionLineType } from '@reactflow/system';
+  import { setContext, onMount, createEventDispatcher } from 'svelte';
   import cc from 'classcat';
 
   import { key, createStore } from '$lib/store';
@@ -13,21 +12,27 @@
   import { NodeSelection } from '$lib/components/NodeSelection';
   import { KeyHandler } from '$lib/components/KeyHandler';
   import { ConnectionLine } from '$lib/components/ConnectionLine';
-  import type { SvelteFlowProps } from './types';
+  import type { SvelteFlowProps, SvelteFlowEvents } from './types';
 
   type $$Props = SvelteFlowProps;
+  type $$Events = SvelteFlowEvents;
 
   export let id: $$Props['id'] = '1';
   export let nodes: $$Props['nodes'] = [];
   export let edges: $$Props['edges'] = [];
   export let fitView: $$Props['fitView'] = undefined;
+  export let minZoom: $$Props['minZoom'] = undefined;
+  export let maxZoom: $$Props['maxZoom'] = undefined;
+  export let initialViewport: $$Props['initialViewport'] = undefined;
   export let nodeTypes: $$Props['nodeTypes'] = undefined;
+  export let edgeTypes: $$Props['edgeTypes'] = undefined;
   export let selectionKey: $$Props['selectionKey'] = undefined;
   export let deleteKey: $$Props['deleteKey'] = undefined;
-  export let connectionLineType: $$Props['connectionLineType'] = ConnectionLineType.Bezier;
-
+  export let connectionLineType: $$Props['connectionLineType'] = undefined
   let className: $$Props['class'] = undefined;
   export { className as class };
+  const dispatch = createEventDispatcher<{ 'on:nodeclick': number }>();
+
 
   let domNode: HTMLDivElement;
 
@@ -51,8 +56,33 @@
     store.nodes.subscribe((ns) => {
       nodes = ns;
     });
+
+    store.edges.subscribe((es) => {
+      edges = es;
+    });
   });
 
+  $: {
+    const updatableProps = {
+      id,
+      connectionLineType,
+    };
+
+    Object.keys(updatableProps).forEach(prop => {
+      // @ts-ignore
+      if (updatableProps[prop] !== undefined) {
+        // @ts-ignore
+        if (!store[prop]) {
+          // @ts-ignore
+          console.warn(store[prop], prop, 'ups')
+        } else {
+        // @ts-ignore
+        store[prop].set(updatableProps[prop]);
+        }
+      }
+    })
+  }
+
   $: {
     store.setNodes(nodes);
   }
@@ -60,23 +90,47 @@
   $: {
     store.setEdges(edges);
   }
+
+  $: {
+    if (nodeTypes !== undefined) {
+      store.setNodeTypes(nodeTypes);
+    }
+
+    if (edgeTypes !== undefined) {
+      store.setEdgeTypes(edgeTypes);
+    }
+
+    if (minZoom !== undefined) {
+      store.setMinZoom(minZoom);
+    }
+
+    if (maxZoom !== undefined) {
+      store.setMaxZoom(maxZoom);
+    }
+  }
 </script>
 
 <div
-  {...$$restProps}
-  class={cc(['react-flow', className])}
+  class={cc(['svelte-flow', className])}
   data-testid="rf__wrapper"
-  {id}
   bind:this={domNode}
 >
   <KeyHandler {selectionKey} {deleteKey} />
-  <Zoom>
-    <Pane>
+  <Zoom {initialViewport}>
+    <Pane on:pane:click>
       <Viewport>
-        <EdgeRenderer />
+        <EdgeRenderer on:edge:click />
         <ConnectionLine />
-        <div class="react-flow__edgelabel-renderer" />
-        <NodeRenderer />
+        <div class="svelte-flow__edgelabel-renderer" />
+        <NodeRenderer
+          on:node:click
+          on:node:mouseenter
+          on:node:mousemove
+          on:node:mouseleave
+          on:connect:start
+          on:connect
+          on:connect:end
+        />
         <NodeSelection />
       </Viewport>
       <UserSelection />
@@ -86,7 +140,7 @@
 </div>
 
 <style>
-  .react-flow {
+  .svelte-flow {
     width: 100%;
     height: 100%;
     overflow: hidden;
@@ -94,13 +148,13 @@
     z-index: 0;
   }
 
-  .react-flow :global(.react-flow__node-default),
-  .react-flow :global(.react-flow__node-input),
-  .react-flow :global(.react-flow__node-output) {
+  .svelte-flow :global(.svelte-flow__node-default),
+  .svelte-flow :global(.svelte-flow__node-input),
+  .svelte-flow :global(.svelte-flow__node-output) {
     padding: 10px;
   }
 
-  .react-flow__edgelabel-renderer {
+  .svelte-flow__edgelabel-renderer {
     position: absolute;
     width: 100%;
     height: 100%;

packages/svelte/src/lib/container/SvelteFlow/index.ts

@@ -1,2 +1,2 @@
 export { default as SvelteFlow } from './SvelteFlow.svelte';
-export type { SvelteFlowProps } from './types';
+export * from './types';

packages/svelte/src/lib/container/SvelteFlow/types.ts

@@ -1,17 +1,49 @@
-import type { ConnectionLineType } from '@reactflow/system';
+import type { ConnectionLineType, NodeOrigin, Viewport } from '@reactflow/system';
 
-import type { Edge, Node, NodeTypes, KeyDefinition } from '$lib/types';
+import type {
+  Edge,
+  Node,
+  NodeTypes,
+  KeyDefinition,
+  EdgeTypes,
+  DefaultEdgeOptions
+} from '$lib/types';
 
 export type SvelteFlowProps = {
   nodes: Node[];
   edges: Edge[];
 
-  connectionLineType?: ConnectionLineType;
+  id?: string;
+  nodeTypes?: NodeTypes;
+  edgeTypes?: EdgeTypes;
   selectionKey?: KeyDefinition;
   deleteKey?: KeyDefinition;
-  nodeTypes?: NodeTypes;
   fitView?: boolean;
+  nodeOrigin?: NodeOrigin;
+  minZoom?: number;
+  maxZoom?: number;
+  initialViewport?: Viewport;
+  defaultEdgeOptions?: DefaultEdgeOptions;
+
   class?: string;
   style?: string;
-  id?: string;
+
+  connectionLineType?: ConnectionLineType;
+};
+
+export type SvelteFlowEvents = {
+  'node:click': CustomEvent<Node>;
+  'node:mouseenter': CustomEvent<Node>;
+  'node:mousemove': CustomEvent<Node>;
+  'node:mouseleave': CustomEvent<Node>;
+  'edge:click': CustomEvent<Edge>;
+  'connect:start': CustomEvent<number>;
+  connect: CustomEvent<number>;
+  'connect:end': CustomEvent<number>;
+  'pane:click': CustomEvent;
+  'pane:contextmenu': CustomEvent;
+};
+
+export type SvelteFlowSlots = {
+  default: { slotValue: string };
 };