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

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

@@ -18,7 +18,12 @@ import { getHandleBounds, getConnectedEdges, addEdge as addEdgeUtil } from '$lib
 import type { EdgeTypes, NodeTypes, Node, Edge, ConnectionData } from '$lib/types';
 import { getEdgesLayouted } from './edges-layouted';
 import { getConnectionPath } from './connection-path';
-import { initConnectionData, initialStoreState } from './initial-store';
+import {
+  initConnectionData,
+  initialEdgeTypes,
+  initialNodeTypes,
+  initialStoreState
+} from './initial-store';
 import type { SvelteFlowStore } from './types';
 
 export const key = Symbol();
@@ -32,20 +37,27 @@ type CreateStoreProps = {
   id?: string;
 };
 
-export function createStore({
-  transform = [0, 0, 1],
-  nodeOrigin = [0, 0],
-  fitView: fitViewOnInit = false,
-  nodeTypes = {},
-  edgeTypes = {},
-  id = '1'
-}: CreateStoreProps): SvelteFlowStore {
+export function createStore({ fitView: fitViewOnInit = false }: CreateStoreProps): SvelteFlowStore {
   const store = {
     ...initialStoreState
   };
 
   let fitViewOnInitDone = false;
 
+  function setNodeTypes(nodeTypes: NodeTypes) {
+    store.nodeTypes.set({
+      ...initialNodeTypes,
+      ...nodeTypes
+    });
+  }
+
+  function setEdgeTypes(edgeTypes: EdgeTypes) {
+    store.edgeTypes.set({
+      ...initialEdgeTypes,
+      ...edgeTypes
+    });
+  }
+
   function setEdges(edges: Edge[]) {
     store.edges.set(edges);
   }
@@ -91,7 +103,7 @@ export function createStore({
   }
 
   function updateNodeDimensions(updates: NodeDimensionUpdate[]) {
-    const viewportNode = document?.querySelector('.react-flow__viewport');
+    const viewportNode = document?.querySelector('.svelte-flow__viewport');
 
     if (!viewportNode) {
       return;
@@ -153,6 +165,25 @@ export function createStore({
     }
   }
 
+  function setMinZoom(minZoom: number) {
+    const d3Zoom = get(store.d3).zoom;
+
+    if (d3Zoom) {
+      d3Zoom?.scaleExtent([minZoom, get(store.maxZoom)]);
+
+      store.minZoom.set(minZoom);
+    }
+  }
+
+  function setMaxZoom(maxZoom: number) {
+    const d3Zoom = get(store.d3).zoom;
+    if (d3Zoom) {
+      d3Zoom?.scaleExtent([get(store.minZoom), maxZoom]);
+
+      store.maxZoom.set(maxZoom);
+    }
+  }
+
   function fitView() {
     const { zoom: d3Zoom, selection: d3Selection } = get(store.d3);
 
@@ -309,12 +340,16 @@ export function createStore({
     // actions
     setNodes,
     setEdges,
+    setNodeTypes,
+    setEdgeTypes,
     addEdge,
     updateNodePositions,
     updateNodeDimensions,
     zoomIn,
     zoomOut,
     fitView,
+    setMinZoom,
+    setMaxZoom,
     resetSelectedElements,
     addSelectedNodes,
     panBy,

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

@@ -13,10 +13,10 @@ import {
 import DefaultNode from '$lib/components/nodes/DefaultNode.svelte';
 import InputNode from '$lib/components/nodes/InputNode.svelte';
 import OutputNode from '$lib/components/nodes/OutputNode.svelte';
-import type { Node, Edge, ConnectionData, NodeTypes, EdgeTypes, EdgeLayouted } from '$lib/types';
 import BezierEdge from '$lib/components/edges/BezierEdge.svelte';
 import StraightEdge from '$lib/components/edges/StraightEdge.svelte';
 import SmoothStepEdge from '$lib/components/edges/SmoothStepEdge.svelte';
+import type { Node, Edge, ConnectionData, NodeTypes, EdgeTypes, EdgeLayouted } from '$lib/types';
 
 export const initConnectionData = {
   nodeId: null,
@@ -26,18 +26,32 @@ export const initConnectionData = {
   status: null
 };
 
+export const initialNodeTypes = {
+  input: InputNode,
+  output: OutputNode,
+  default: DefaultNode
+};
+
+export const initialEdgeTypes = {
+  straight: StraightEdge,
+  smoothstep: SmoothStepEdge,
+  default: BezierEdge
+};
+
 export const initialStoreState = {
+  id: writable<string | null>(null),
   nodes: writable<Node[]>([]),
   edges: writable<Edge[]>([]),
   edgesLayouted: readable<EdgeLayouted[]>([]),
   height: writable<number>(500),
   width: writable<number>(500),
-  nodeOrigin: writable<NodeOrigin>([0.5, 0.5]),
+  minZoom: writable<number>(0.5),
+  maxZoom: writable<number>(2),
+  nodeOrigin: writable<NodeOrigin>([0, 0]),
   d3: writable<{ zoom: D3ZoomInstance | null; selection: D3SelectionInstance | null }>({
     zoom: null,
     selection: null
   }),
-  id: writable<string | null>(null),
   dragging: writable<boolean>(false),
   selectionRect: writable<SelectionRect | null>(null),
   selectionKeyPressed: writable<boolean>(false),
@@ -45,16 +59,8 @@ export const initialStoreState = {
   deleteKeyPressed: writable<boolean>(false),
   selectionRectMode: writable<string | null>(null),
   selectionMode: writable<SelectionMode>(SelectionMode.Partial),
-  nodeTypes: writable<NodeTypes>({
-    input: InputNode,
-    output: OutputNode,
-    default: DefaultNode
-  }),
-  edgeTypes: writable<EdgeTypes>({
-    straight: StraightEdge,
-    smoothstep: SmoothStepEdge,
-    default: BezierEdge
-  }),
+  nodeTypes: writable<NodeTypes>(initialNodeTypes),
+  edgeTypes: writable<EdgeTypes>(initialEdgeTypes),
   transform: writable<Transform>([0, 0, 1]),
   connectionMode: writable<ConnectionMode>(ConnectionMode.Strict),
   domNode: writable<HTMLDivElement | null>(null),

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

@@ -7,14 +7,18 @@ import type {
 } from '@reactflow/system';
 
 import type { initialStoreState } from './initial-store';
-import type { Node, Edge, ConnectionData } from '$lib/types';
+import type { Node, Edge, ConnectionData, NodeTypes, EdgeTypes } from '$lib/types';
 
 export type SvelteFlowStoreActions = {
   setNodes: (nodes: Node[]) => void;
   setEdges: (edges: Edge[]) => void;
+  setNodeTypes: (nodeTypes: NodeTypes) => void;
+  setEdgeTypes: (edgeTypes: EdgeTypes) => void;
   addEdge: (edge: Edge | Connection) => void;
   zoomIn: (options?: ViewportHelperFunctionOptions) => void;
   zoomOut: (options?: ViewportHelperFunctionOptions) => void;
+  setMinZoom: (minZoom: number) => void;
+  setMaxZoom: (maxZoom: number) => void;
   fitView: (options?: ViewportHelperFunctionOptions) => boolean;
   updateNodePositions: (
     nodeDragItems: NodeDragItem[],