@xyflow/svelte - npm Package Compare versions

Comparing version 0.0.21 to 0.0.22

dist/lib/components/ConnectionLine/ConnectionLine.svelte.d.ts

 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: Record<string, never>;
+    props: {
+        containerStyle?: string | undefined;
+        style?: string | undefined;
+        usingCustomLine?: boolean | undefined;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        connectionLine: {};
+    };
 };
@@ -9,0 +15,0 @@ export type ConnectionLineProps = typeof __propDef.props;

dist/lib/components/EdgeWrapper/EdgeWrapper.svelte.d.ts

@@ -11,2 +11,3 @@ import { SvelteComponentTyped } from "svelte";
         ariaLabel?: string | undefined;
+        class?: string | undefined;
         style?: string | undefined;
@@ -34,2 +35,3 @@ sourceHandle?: string | null | undefined;
         edgeclick: CustomEvent<any>;
+        edgecontextmenu: CustomEvent<any>;
     } & {
@@ -36,0 +38,0 @@ [evt: string]: CustomEvent<any>;

dist/lib/container/EdgeRenderer/EdgeRenderer.svelte.d.ts

 import { SvelteComponentTyped } from "svelte";
+import type { DefaultEdgeOptions } from '../../types';
 declare const __propDef: {
-    props: Record<string, never>;
+    props: {
+        defaultEdgeOptions: DefaultEdgeOptions | undefined;
+    };
     events: {
         edgeclick: CustomEvent<any>;
+        edgecontextmenu: CustomEvent<any>;
     } & {
@@ -7,0 +11,0 @@ [evt: string]: CustomEvent<any>;

dist/lib/container/SvelteFlow/SvelteFlow.svelte.d.ts

 import { SvelteComponentTyped } from "svelte";
-import { PanOnScrollMode, type Viewport } from '@xyflow/system';
+import { ConnectionMode, PanOnScrollMode, type Viewport } from '@xyflow/system';
 import type { SvelteFlowProps } from './types';
@@ -118,2 +118,3 @@ declare const __propDef: {
         fitView?: boolean | undefined;
+        fitViewOptions?: import("../..").FitViewOptions | undefined;
         nodeOrigin?: import("@xyflow/system").NodeOrigin | undefined;
@@ -124,2 +125,5 @@ minZoom?: number | undefined;
         connectionRadius?: number | undefined;
+        connectionMode?: ConnectionMode | undefined;
+        connectionLineStyle?: string | undefined;
+        connectionLineContainerStyle?: string | undefined;
         selectionMode?: import("@xyflow/system").SelectionMode | undefined;
@@ -140,2 +144,7 @@ snapGrid?: import("@xyflow/system").SnapGrid | undefined;
         onlyRenderVisibleElements?: boolean | undefined;
+        autoPanOnConnect?: boolean | undefined;
+        autoPanOnNodeDrag?: boolean | undefined;
+        attributionPosition?: import("@xyflow/system").PanelPosition | undefined;
+        proOptions?: import("@xyflow/system").ProOptions | undefined;
+        defaultEdgeOptions?: import("../..").DefaultEdgeOptions | undefined;
         class?: string | undefined;
@@ -148,2 +157,3 @@ style?: string | undefined;
         onMoveEnd?: import("@xyflow/system").OnMove | undefined;
+        onError?: import("@xyflow/system").OnError | undefined;
         'on:nodeclick'?: CustomEvent<{
@@ -169,2 +179,6 @@ event: MouseEvent | TouchEvent;
         }> | undefined;
+        'on:edgecontextmenu'?: CustomEvent<{
+            event: MouseEvent;
+            edge: import("../..").Edge;
+        }> | undefined;
         'on:connectstart'?: CustomEvent<{
@@ -213,2 +227,3 @@ event: MouseEvent | TouchEvent;
         edgeclick: CustomEvent<any>;
+        edgecontextmenu: CustomEvent<any>;
         nodeclick: CustomEvent<any>;
@@ -229,2 +244,5 @@ nodemouseenter: CustomEvent<any>;
     slots: {
+        connectionLine: {
+            slot: string;
+        };
         default: {};
@@ -231,0 +249,0 @@ };

dist/lib/container/SvelteFlow/types.d.ts

 import type { DOMAttributes } from 'svelte/elements';
-import type { Connection, ConnectionLineType, NodeOrigin, Viewport, SelectionMode, SnapGrid, OnMoveStart, OnMove, OnMoveEnd, CoordinateExtent, PanOnScrollMode, IsValidConnection, HandleType, NodeBase } from '@xyflow/system';
-import type { Edge, Node, NodeTypes, KeyDefinition, EdgeTypes } from '../../types';
+import type { Connection, ConnectionLineType, NodeOrigin, Viewport, SelectionMode, SnapGrid, OnMoveStart, OnMove, OnMoveEnd, CoordinateExtent, PanOnScrollMode, IsValidConnection, HandleType, NodeBase, OnError, ConnectionMode, PanelPosition, ProOptions } from '@xyflow/system';
+import type { Edge, Node, NodeTypes, KeyDefinition, EdgeTypes, DefaultEdgeOptions, FitViewOptions } from '../../types';
 import type { Writable } from 'svelte/store';
@@ -15,2 +15,3 @@ export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
     fitView?: boolean;
+    fitViewOptions?: FitViewOptions;
     nodeOrigin?: NodeOrigin;
@@ -21,2 +22,5 @@ minZoom?: number;
     connectionRadius?: number;
+    connectionMode?: ConnectionMode;
+    connectionLineStyle?: string;
+    connectionLineContainerStyle?: string;
     selectionMode?: SelectionMode;
@@ -37,2 +41,7 @@ snapGrid?: SnapGrid;
     onlyRenderVisibleElements?: boolean;
+    autoPanOnConnect?: boolean;
+    autoPanOnNodeDrag?: boolean;
+    attributionPosition?: PanelPosition;
+    proOptions?: ProOptions;
+    defaultEdgeOptions?: DefaultEdgeOptions;
     class?: string;
@@ -45,2 +54,3 @@ style?: string;
     onMoveEnd?: OnMoveEnd;
+    onError?: OnError;
     'on:nodeclick'?: CustomEvent<{
@@ -66,2 +76,6 @@ event: MouseEvent | TouchEvent;
     }>;
+    'on:edgecontextmenu'?: CustomEvent<{
+        event: MouseEvent;
+        edge: Edge;
+    }>;
     'on:connectstart'?: CustomEvent<{
@@ -68,0 +82,0 @@ event: MouseEvent | TouchEvent;

dist/lib/container/SvelteFlow/utils.d.ts

@@ -25,4 +25,8 @@ import type { SvelteFlowStore } from '../../store/types';
     isValidConnection?: UnwrapWritable<SvelteFlowStore['isValidConnection']>;
+    autoPanOnConnect?: UnwrapWritable<SvelteFlowStore['autoPanOnConnect']>;
+    autoPanOnNodeDrag?: UnwrapWritable<SvelteFlowStore['autoPanOnNodeDrag']>;
+    connectionMode?: UnwrapWritable<SvelteFlowStore['connectionMode']>;
+    onError?: UnwrapWritable<SvelteFlowStore['onError']>;
 };
 export declare function updateStoreByKeys(store: SvelteFlowStore, keys: UpdatableStoreProps): void;
 export {};

dist/lib/index.d.ts

@@ -15,2 +15,3 @@ export { SvelteFlow } from './container/SvelteFlow';
 export * from './hooks/useUpdateNodeInternals';
+export * from './hooks/useConnection';
 export type { Edge, EdgeProps, EdgeTypes, DefaultEdgeOptions } from './types/edges';
@@ -17,0 +18,0 @@ export type { HandleComponentProps, FitViewOptions } from './types/general';

dist/lib/index.js

@@ -20,2 +20,3 @@ // main component
 export * from './hooks/useUpdateNodeInternals';
+export * from './hooks/useConnection';
 // system types
@@ -22,0 +23,0 @@ export { ConnectionLineType, MarkerType, ConnectionMode, PanOnScrollMode, SelectionMode, Position } from '@xyflow/system';

dist/lib/store/edge-tree.d.ts

 /// <reference types="svelte" />
-import { type OnError } from '@xyflow/system';
 import type { EdgeLayouted } from '../types';
 import type { SvelteFlowStoreState } from './types';
-export declare function getEdgeTree(store: SvelteFlowStoreState, onError: OnError): import("svelte/store").Readable<import("@xyflow/system").GroupedEdges<EdgeLayouted>[]>;
+export declare function getEdgeTree(store: SvelteFlowStoreState): import("svelte/store").Readable<import("@xyflow/system").GroupedEdges<EdgeLayouted>[]>;

dist/lib/store/edge-tree.js

 import { derived } from 'svelte/store';
 import { groupEdgesByZLevel, isEdgeVisible, getEdgePosition } from '@xyflow/system';
-export function getEdgeTree(store, onError) {
+export function getEdgeTree(store) {
     const visibleEdges = derived([
@@ -29,3 +29,3 @@ store.edges,
     });
-    return derived([visibleEdges, store.nodes, store.connectionMode], ([visibleEdges, nodes, connectionMode]) => {
+    return derived([visibleEdges, store.nodes, store.connectionMode, store.onError], ([visibleEdges, nodes, connectionMode, onError]) => {
         const layoutedEdges = visibleEdges.reduce((res, edge) => {
@@ -32,0 +32,0 @@ const sourceNode = nodes.find((node) => node.id === edge.source);

dist/lib/store/index.js

 import { getContext, setContext } from 'svelte';
-import { derived, get } from 'svelte/store';
+import { derived, get, writable } from 'svelte/store';
 import { internalsSymbol, createMarkerIds, fitView as fitViewUtil, getElementsToRemove, panBy as panBySystem, updateNodeDimensions as updateNodeDimensionsSystem } from '@xyflow/system';
 import { addEdge as addEdgeUtil } from '../utils';
-import { getConnectionPath } from './connection-path';
-import { initConnectionData, initialEdgeTypes, initialNodeTypes, getInitialStore } from './initial-store';
+import { initialEdgeTypes, initialNodeTypes, getInitialStore } from './initial-store';
 import { syncNodeStores, syncEdgeStores } from './utils';
 import { getEdgeTree } from './edge-tree';
 import { getVisibleNodes } from './visible-nodes';
+import { getDerivedConnectionProps } from './derived-connection-props';
 export const key = Symbol();
@@ -51,6 +51,27 @@ export function createStore() {
         }
-        const fitViewOnInitDone = get(store.fitViewOnInitDone) || (get(store.fitViewOnInit) && fitView({ nodes: nextNodes }));
-        store.fitViewOnInitDone.set(fitViewOnInitDone);
+        if (!get(store.fitViewOnInitDone) && get(store.fitViewOnInit)) {
+            const fitViewOptions = get(store.fitViewOptions);
+            const fitViewOnInitDone = fitView(nextNodes, {
+                ...fitViewOptions,
+                nodes: fitViewOptions?.nodes || nextNodes
+            });
+            store.fitViewOnInitDone.set(fitViewOnInitDone);
+        }
         store.nodes.set(nextNodes);
     }
+    function fitView(nodes, options) {
+        const panZoom = get(store.panZoom);
+        if (!panZoom) {
+            return false;
+        }
+        return fitViewUtil({
+            nodes,
+            width: get(store.width),
+            height: get(store.height),
+            minZoom: get(store.minZoom),
+            maxZoom: get(store.maxZoom),
+            panZoom,
+            nodeOrigin: get(store.nodeOrigin)
+        }, options);
+    }
     function zoomBy(factor, options) {
@@ -89,18 +110,2 @@ const panZoom = get(store.panZoom);
     }
-    function fitView(options) {
-        const panZoom = get(store.panZoom);
-        const fitViewNodes = options?.nodes || get(store.nodes);
-        if (!panZoom) {
-            return false;
-        }
-        return fitViewUtil({
-            nodes: fitViewNodes,
-            width: get(store.width),
-            height: get(store.height),
-            minZoom: get(store.minZoom),
-            maxZoom: get(store.maxZoom),
-            panZoom,
-            nodeOrigin: get(store.nodeOrigin)
-        }, {});
-    }
     function resetSelectedItem(item) {
@@ -175,18 +180,16 @@ if (item.selected) {
     }
-    const updateConnection = (update) => {
-        const currentConnectionData = get(store.connection);
-        const nextConnectionData = currentConnectionData
-            ? {
-                ...initConnectionData,
-                ...currentConnectionData,
-                ...update
-            }
-            : {
-                ...initConnectionData,
-                ...update
-            };
-        store.connection.set(nextConnectionData);
+    const initConnectionUpdateData = {
+        connectionStartHandle: null,
+        connectionEndHandle: null,
+        connectionPosition: null,
+        connectionStatus: null
     };
+    // by creating an internal, unexposed store and using a derived store
+    // we prevent using slow get() calls
+    const currentConnection = writable(initConnectionUpdateData);
+    const updateConnection = (newConnection) => {
+        currentConnection.set(newConnection);
+    };
     function cancelConnection() {
-        updateConnection(initConnectionData);
+        updateConnection(initConnectionUpdateData);
     }
@@ -204,5 +207,2 @@ function reset() {
     }
-    function onError(id, msg) {
-        console.log(msg);
-    }
     return {
@@ -212,4 +212,4 @@ // state
         // derived state
-        edgeTree: getEdgeTree(store, onError),
-        connectionPath: getConnectionPath(store),
+        edgeTree: getEdgeTree(store),
+        connection: getDerivedConnectionProps(store, currentConnection),
         visibleNodes: getVisibleNodes(store),
@@ -237,4 +237,3 @@ markers: derived([store.edges, store.defaultMarkerColor, store.flowId], ([edges, defaultColor, id]) => createMarkerIds(edges, { defaultColor, id })),
         cancelConnection,
-        reset,
-        onError
+        reset
     };
@@ -241,0 +240,0 @@ }

dist/lib/store/initial-store.d.ts

 /// <reference types="svelte" />
-import { SelectionMode, ConnectionMode, ConnectionLineType, type SelectionRect, type Transform, type SnapGrid, type MarkerProps, type PanZoomInstance, type CoordinateExtent, type IsValidConnection, type GroupedEdges, type NodeOrigin } from '@xyflow/system';
+import { SelectionMode, ConnectionMode, ConnectionLineType, type SelectionRect, type Transform, type SnapGrid, type MarkerProps, type PanZoomInstance, type CoordinateExtent, type IsValidConnection, type GroupedEdges, type NodeOrigin, type OnError } from '@xyflow/system';
 import DefaultNode from '../components/nodes/DefaultNode.svelte';
@@ -10,9 +10,4 @@ import InputNode from '../components/nodes/InputNode.svelte';
 import StepEdge from '../components/edges/StepEdge.svelte';
-import type { ConnectionData, NodeTypes, EdgeTypes, EdgeLayouted, Node } from '../types';
-export declare const initConnectionData: {
-    connectionStartHandle: null;
-    connectionEndHandle: null;
-    connectionPosition: null;
-    connectionStatus: null;
-};
+import type { NodeTypes, EdgeTypes, EdgeLayouted, Node, FitViewOptions } from '../types';
+import { type ConnectionProps } from './derived-connection-props';
 export declare const initialNodeTypes: {
@@ -51,4 +46,6 @@ input: typeof InputNode;
     autoPanOnNodeDrag: import("svelte/store").Writable<boolean>;
+    autoPanOnConnect: import("svelte/store").Writable<boolean>;
     fitViewOnInit: import("svelte/store").Writable<boolean>;
     fitViewOnInitDone: import("svelte/store").Writable<boolean>;
+    fitViewOptions: import("svelte/store").Writable<FitViewOptions>;
     panZoom: import("svelte/store").Writable<PanZoomInstance | null>;
@@ -69,6 +66,5 @@ snapGrid: import("svelte/store").Writable<SnapGrid | null>;
     domNode: import("svelte/store").Writable<HTMLDivElement | null>;
-    connectionPath: import("svelte/store").Readable<string | null>;
-    connection: import("svelte/store").Writable<ConnectionData>;
+    connection: import("svelte/store").Readable<ConnectionProps>;
+    connectionLineType: import("svelte/store").Writable<ConnectionLineType>;
     connectionRadius: import("svelte/store").Writable<number>;
-    connectionLineType: import("svelte/store").Writable<ConnectionLineType>;
     isValidConnection: import("svelte/store").Writable<IsValidConnection>;
@@ -83,2 +79,3 @@ nodesDraggable: import("svelte/store").Writable<boolean>;
     onlyRenderVisibleElements: import("svelte/store").Writable<boolean>;
+    onError: import("svelte/store").Writable<OnError>;
 };

dist/lib/store/initial-store.js

 import { readable, writable } from 'svelte/store';
-import { infiniteExtent, SelectionMode, ConnectionMode, ConnectionLineType } from '@xyflow/system';
+import { infiniteExtent, SelectionMode, ConnectionMode, ConnectionLineType, devWarn } from '@xyflow/system';
 import DefaultNode from '../components/nodes/DefaultNode.svelte';
@@ -11,8 +11,3 @@ import InputNode from '../components/nodes/InputNode.svelte';
 import { createNodesStore, createEdgesStore } from './utils';
-export const initConnectionData = {
-    connectionStartHandle: null,
-    connectionEndHandle: null,
-    connectionPosition: null,
-    connectionStatus: null
-};
+import { initConnectionProps } from './derived-connection-props';
 export const initialNodeTypes = {
@@ -43,4 +38,6 @@ input: InputNode,
     autoPanOnNodeDrag: writable(true),
+    autoPanOnConnect: writable(true),
     fitViewOnInit: writable(false),
     fitViewOnInitDone: writable(false),
+    fitViewOptions: writable(undefined),
     panZoom: writable(null),
@@ -61,6 +58,5 @@ snapGrid: writable(null),
     domNode: writable(null),
-    connectionPath: readable(null),
-    connection: writable(initConnectionData),
+    connection: readable(initConnectionProps),
+    connectionLineType: writable(ConnectionLineType.Bezier),
     connectionRadius: writable(20),
-    connectionLineType: writable(ConnectionLineType.Bezier),
     isValidConnection: writable(() => true),
@@ -74,3 +70,4 @@ nodesDraggable: writable(true),
     lib: readable('svelte'),
-    onlyRenderVisibleElements: writable(false)
+    onlyRenderVisibleElements: writable(false),
+    onError: writable(devWarn)
 });

dist/lib/store/types.d.ts

 import type { Writable } from 'svelte/store';
-import type { NodeDimensionUpdate, XYPosition, ViewportHelperFunctionOptions, Connection, UpdateNodePositions, CoordinateExtent, UpdateConnection, OnError } from '@xyflow/system';
+import type { NodeDimensionUpdate, XYPosition, ViewportHelperFunctionOptions, Connection, UpdateNodePositions, CoordinateExtent, UpdateConnection } from '@xyflow/system';
 import type { getInitialStore } from './initial-store';
@@ -26,5 +26,4 @@ import type { Node, Edge, NodeTypes, EdgeTypes, FitViewOptions } from '../types';
     reset(): void;
-    onError: OnError;
 };
 export type SvelteFlowStoreState = ReturnType<typeof getInitialStore>;
 export type SvelteFlowStore = SvelteFlowStoreState & SvelteFlowStoreActions;

dist/lib/types/edges.d.ts

@@ -30,3 +30,3 @@ import type { SvelteComponent, ComponentType } from 'svelte';
 export type DefaultEdgeOptions = DefaultEdgeOptionsBase<Edge>;
-export type EdgeLayouted = Pick<Edge, 'type' | 'id' | 'data' | 'style' | 'source' | 'target' | 'animated' | 'selected' | 'selectable' | 'label' | 'labelStyle' | 'interactionWidth' | 'markerStart' | 'markerEnd' | 'sourceHandle' | 'targetHandle' | 'ariaLabel' | 'hidden'> & EdgePosition & {
+export type EdgeLayouted = Pick<Edge, 'type' | 'id' | 'data' | 'style' | 'source' | 'target' | 'animated' | 'selected' | 'selectable' | 'label' | 'labelStyle' | 'interactionWidth' | 'markerStart' | 'markerEnd' | 'sourceHandle' | 'targetHandle' | 'ariaLabel' | 'hidden' | 'class'> & EdgePosition & {
     sourceHandleId?: string | null;
@@ -33,0 +33,0 @@ targetHandleId?: string | null;

package.json

 {
   "name": "@xyflow/svelte",
-  "version": "0.0.21",
+  "version": "0.0.22",
   "description": "Svelte Flow - A highly customizable Svelte library for building node-based editors, workflow systems, diagrams and more.",
@@ -34,3 +34,3 @@ "keywords": [
     "classcat": "^5.0.4",
-    "@xyflow/system": "0.0.6"
+    "@xyflow/system": "0.0.7"
   },
@@ -37,0 +37,0 @@ "devDependencies": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

217024

increased by3.52%

Number of package files

195

increased by1.04%

Lines of code

3675

increased by3.43%

Dependency changes

• + Added@xyflow/system@0.0.7(transitive)

• - Removed@xyflow/system@0.0.6(transitive)

• Updated@xyflow/system@0.0.7