@xyflow/svelte - npm Package Compare versions

Comparing version 0.0.34 to 0.0.35

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

@@ -15,4 +15,5 @@ import { SvelteComponentTyped } from "svelte";
 export type HandleSlots = typeof __propDef.slots;
+/** The Handle component is the part of a node that can be used to connect nodes. */
 export default class Handle extends SvelteComponentTyped<HandleProps, HandleEvents, HandleSlots> {
 }
 export {};

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

@@ -301,2 +301,4 @@ import type { DOMAttributes } from 'svelte/elements';
     onconnectend?: OnConnectEnd;
+    /** This handler gets called when the flow is finished initializing */
+    oninit?: () => void;
 };

dist/lib/hooks/useSvelteFlow.d.ts

@@ -8,20 +8,128 @@ import { type Writable } from 'svelte/store';
  * @public
+ *
  * @returns helper functions
  */
 export declare function useSvelteFlow(): {
+    /**
+     * Zooms viewport in by 1.2.
+     *
+     * @param options.duration - optional duration. If set, a transition will be applied
+     */
     zoomIn: ZoomInOut;
+    /**
+     * Zooms viewport out by 1 / 1.2.
+     *
+     * @param options.duration - optional duration. If set, a transition will be applied
+     */
     zoomOut: ZoomInOut;
+    /**
+     * Returns a node by id.
+     *
+     * @param id - the node id
+     * @returns the node or undefined if no node was found
+     */
+    getNode: (id: string) => Node | undefined;
+    /**
+     * Returns nodes.
+     *
+     * @returns nodes array
+     */
+    getNodes: (ids?: string[]) => Node[];
+    /**
+     * Returns an edge by id.
+     *
+     * @param id - the edge id
+     * @returns the edge or undefined if no edge was found
+     */
+    getEdge: (id: string) => Edge | undefined;
+    /**
+     * Returns edges.
+     *
+     * @returns edges array
+     */
+    getEdges: (ids?: string[]) => Edge[];
+    /**
+     * Sets the current zoom level.
+     *
+     * @param zoomLevel - the zoom level to set
+     * @param options.duration - optional duration. If set, a transition will be applied
+     */
     setZoom: (zoomLevel: number, options?: ViewportHelperFunctionOptions) => void;
+    /**
+     * Returns the current zoom level.
+     *
+     * @returns current zoom as a number
+     */
     getZoom: () => number;
+    /**
+     * Sets the center of the view to the given position.
+     *
+     * @param x - x position
+     * @param y - y position
+     * @param options.zoom - optional zoom
+     */
     setCenter: (x: number, y: number, options?: SetCenterOptions) => void;
+    /**
+     * Sets the current viewport.
+     *
+     * @param viewport - the viewport to set
+     * @param options.duration - optional duration. If set, a transition will be applied
+     */
     setViewport: (viewport: Viewport, options?: ViewportHelperFunctionOptions) => void;
+    /**
+     * Returns the current viewport.
+     *
+     * @returns Viewport
+     */
     getViewport: () => Viewport;
+    /**
+     * Fits the view.
+     *
+     * @param options.padding - optional padding
+     * @param options.includeHiddenNodes - optional includeHiddenNodes
+     * @param options.minZoom - optional minZoom
+     * @param options.maxZoom - optional maxZoom
+     * @param options.duration - optional duration. If set, a transition will be applied
+     * @param options.nodes - optional nodes to fit the view to
+     */
     fitView: (options?: FitViewOptions) => void;
+    /**
+     * Returns all nodes that intersect with the given node or rect.
+     *
+     * @param node - the node or rect to check for intersections
+     * @param partially - if true, the node is considered to be intersecting if it partially overlaps with the passed node or rect
+     * @param nodes - optional nodes array to check for intersections
+     *
+     * @returns an array of intersecting nodes
+     */
     getIntersectingNodes: (nodeOrRect: Node | {
         id: Node['id'];
     } | Rect, partially?: boolean, nodesToIntersect?: Node[]) => Node[];
+    /**
+     * Checks if the given node or rect intersects with the passed rect.
+     *
+     * @param node - the node or rect to check for intersections
+     * @param area - the rect to check for intersections
+     * @param partially - if true, the node is considered to be intersecting if it partially overlaps with the passed react
+     *
+     * @returns true if the node or rect intersects with the given area
+     */
     isNodeIntersecting: (nodeOrRect: Node | {
         id: Node['id'];
     } | Rect, area: Rect, partially?: boolean) => boolean;
+    /**
+     * Fits the view to the given bounds .
+     *
+     * @param bounds - the bounds ({ x: number, y: number, width: number, height: number }) to fit the view to
+     * @param options.padding - optional padding
+     */
     fitBounds: (bounds: Rect, options?: FitBoundsOptions) => void;
+    /**
+     * Deletes nodes and edges.
+     *
+     * @param params.nodes - optional nodes array to delete
+     * @param params.edges - optional edges array to delete
+     *
+     * @returns a promise that resolves with the deleted nodes and edges
+     */
     deleteElements: ({ nodes, edges }: {
@@ -38,13 +146,57 @@ nodes?: (Node | {
     }>;
-    screenToFlowPosition: (position: XYPosition, options?: {
+    /**
+     * Converts a screen / client position to a flow position.
+     *
+     * @param clientPosition - the screen / client position. When you are working with events you can use event.clientX and event.clientY
+     * @param options.snapToGrid - if true, the converted position will be snapped to the grid
+     * @returns position as { x: number, y: number }
+     *
+     * @example
+     * const flowPosition = screenToFlowPosition({ x: event.clientX, y: event.clientY })
+     */
+    screenToFlowPosition: (clientPosition: XYPosition, options?: {
         snapToGrid: boolean;
     }) => XYPosition;
-    flowToScreenPosition: (position: XYPosition) => XYPosition;
+    /**
+     * Converts a flow position to a screen / client position.
+     *
+     * @param flowPosition - the screen / client position. When you are working with events you can use event.clientX and event.clientY
+     * @returns position as { x: number, y: number }
+     *
+     * @example
+     * const clientPosition = flowToScreenPosition({ x: node.position.x, y: node.position.y })
+     */
+    flowToScreenPosition: (flowPosition: XYPosition) => XYPosition;
     viewport: Writable<Viewport>;
+    /**
+     * Updates a node.
+     *
+     * @param id - id of the node to update
+     * @param nodeUpdate - the node update as an object or a function that receives the current node and returns the node update
+     * @param options.replace - if true, the node is replaced with the node update, otherwise the changes get merged
+     *
+     * @example
+     * updateNode('node-1', (node) => ({ position: { x: node.position.x + 10, y: node.position.y } }));
+     */
     updateNode: (id: string, nodeUpdate: Partial<Node> | ((node: Node) => Partial<Node>), options?: {
         replace: boolean;
     }) => void;
+    /**
+     * Updates the data attribute of a node.
+     *
+     * @param id - id of the node to update
+     * @param dataUpdate - the data update as an object or a function that receives the current data and returns the data update
+     * @param options.replace - if true, the data is replaced with the data update, otherwise the changes get merged
+     *
+     * @example
+     * updateNodeData('node-1', { label: 'A new label' });
+     */
     updateNodeData: (id: string, dataUpdate: object | ((node: Node) => object), options?: {
         replace: boolean;
     }) => void;
+    /**
+     * Returns the nodes, edges and the viewport as a JSON object.
+     *
+     * @returns the nodes, edges and the viewport as a JSON object
+     */
     toObject: () => {
@@ -51,0 +203,0 @@ nodes: Node[];

dist/lib/hooks/useSvelteFlow.js

@@ -9,6 +9,7 @@ import { get } from 'svelte/store';
  * @public
+ *
  * @returns helper functions
  */
 export function useSvelteFlow() {
-    const { zoomIn, zoomOut, fitView, onbeforedelete, snapGrid, viewport, width, height, minZoom, maxZoom, panZoom, nodes, edges, domNode } = useStore();
+    const { zoomIn, zoomOut, fitView, onbeforedelete, snapGrid, viewport, width, height, minZoom, maxZoom, panZoom, nodes, edges, domNode, nodeLookup, edgeLookup } = useStore();
     const getNodeRect = (nodeOrRect) => {
@@ -35,2 +36,6 @@ const isRect = isRectObject(nodeOrRect);
         zoomOut,
+        getNode: (id) => get(nodeLookup).get(id),
+        getNodes: (ids) => (ids === undefined ? get(nodes) : getElements(get(nodeLookup), ids)),
+        getEdge: (id) => get(edgeLookup).get(id),
+        getEdges: (ids) => (ids === undefined ? get(edges) : getElements(get(edgeLookup), ids)),
         setZoom: (zoomLevel, options) => {
@@ -119,2 +124,7 @@ get(panZoom)?.scaleTo(zoomLevel, { duration: options?.duration });
         },
+        /**
+         *
+         * @param position
+         * @returns
+         */
         flowToScreenPosition: (position) => {
@@ -158,1 +168,11 @@ const _domNode = get(domNode);
 }
+function getElements(lookup, ids) {
+    const result = [];
+    for (const id of ids) {
+        const element = lookup.get(id);
+        if (element) {
+            result.push(element);
+        }
+    }
+    return result;
+}

dist/lib/index.d.ts

@@ -23,2 +23,3 @@ export { SvelteFlow } from './container/SvelteFlow';
 export * from './hooks/useNodesData';
+export { useInitialized, useNodesInitialized } from './hooks/useInitialized';
 export type { Edge, EdgeProps, BezierEdgeProps, SmoothStepEdgeProps, StepEdgeProps, StraightEdgeProps, EdgeTypes, DefaultEdgeOptions } from './types/edges';
@@ -28,3 +29,3 @@ export type { HandleComponentProps, FitViewOptions } from './types/general';
 export type { SvelteFlowStore } from './store/types';
-export { type SmoothStepPathOptions, type BezierPathOptions, ConnectionLineType, type EdgeMarker, type EdgeMarkerType, MarkerType, type OnMove, type OnMoveStart, type OnMoveEnd, type Connection, type ConnectionStatus, ConnectionMode, type OnConnectStartParams, type OnConnectStart, type OnConnect, type OnConnectEnd, type IsValidConnection, type Viewport, type SnapGrid, PanOnScrollMode, type ViewportHelperFunctionOptions, type SetCenterOptions, type FitBoundsOptions, type PanelPosition, type ProOptions, SelectionMode, type SelectionRect, type OnError, type NodeProps, type NodeOrigin, type OnNodeDrag, type OnSelectionDrag, Position, type XYPosition, type XYZPosition, type Dimensions, type Rect, type Box, type Transform, type CoordinateExtent, type ColorMode, type ColorModeClass, type ShouldResize, type OnResizeStart, type OnResize, type OnResizeEnd, type ControlPosition, type ControlLinePosition, type ResizeControlVariant } from '@xyflow/system';
+export { type SmoothStepPathOptions, type BezierPathOptions, ConnectionLineType, type EdgeMarker, type EdgeMarkerType, MarkerType, type OnMove, type OnMoveStart, type OnMoveEnd, type Connection, type ConnectionStatus, ConnectionMode, type OnConnectStartParams, type OnConnectStart, type OnConnect, type OnConnectEnd, type IsValidConnection, type Viewport, type SnapGrid, PanOnScrollMode, type ViewportHelperFunctionOptions, type SetCenterOptions, type FitBoundsOptions, type PanelPosition, type ProOptions, SelectionMode, type SelectionRect, type OnError, type NodeProps, type NodeOrigin, type OnSelectionDrag, Position, type XYPosition, type XYZPosition, type Dimensions, type Rect, type Box, type Transform, type CoordinateExtent, type ColorMode, type ColorModeClass, type ShouldResize, type OnResizeStart, type OnResize, type OnResizeEnd, type ControlPosition, type ControlLinePosition, type ResizeControlVariant } from '@xyflow/system';
 export { type GetBezierPathParams, getBezierEdgeCenter, getBezierPath, getEdgeCenter, type GetSmoothStepPathParams, getSmoothStepPath, type GetStraightPathParams, getStraightPath, getViewportForBounds, getNodesBounds, getIncomers, getOutgoers, getConnectedEdges, addEdge, updateEdge, internalsSymbol } from '@xyflow/system';

dist/lib/index.js

@@ -29,2 +29,3 @@ // main component
 export * from './hooks/useNodesData';
+export { useInitialized, useNodesInitialized } from './hooks/useInitialized';
 // system types
@@ -31,0 +32,0 @@ export { ConnectionLineType, MarkerType, ConnectionMode, PanOnScrollMode, SelectionMode, Position } from '@xyflow/system';

dist/lib/store/index.js

@@ -62,2 +62,5 @@ import { getContext, setContext } from 'svelte';
         store.nodes.set(nextNodes);
+        if (!get(store.nodesInitialized)) {
+            store.nodesInitialized.set(true);
+        }
     }
@@ -248,2 +251,23 @@ function fitView(nodes, options) {
         markers: derived([store.edges, store.defaultMarkerColor, store.flowId], ([edges, defaultColor, id]) => createMarkerIds(edges, { defaultColor, id })),
+        initialized: (() => {
+            let initialized = false;
+            const initialNodesLength = get(store.nodes).length;
+            const initialEdgesLength = get(store.edges).length;
+            return derived([store.nodesInitialized, store.edgesInitialized, store.viewportInitialized], ([nodesInitialized, edgesInitialized, viewportInitialized]) => {
+                // If it was already initialized, return true from then on
+                if (initialized)
+                    return initialized;
+                // if it hasn't been initialised check if it's now
+                if (initialNodesLength === 0) {
+                    initialized = viewportInitialized;
+                }
+                else if (initialEdgesLength === 0) {
+                    initialized = viewportInitialized && nodesInitialized;
+                }
+                else {
+                    initialized = viewportInitialized && nodesInitialized && edgesInitialized;
+                }
+                return initialized;
+            });
+        })(),
         // actions
@@ -250,0 +274,0 @@ syncNodeStores: (nodes) => syncNodeStores(store.nodes, nodes),

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

 /// <reference types="svelte" />
-import { SelectionMode, ConnectionMode, ConnectionLineType, type SelectionRect, type SnapGrid, type MarkerProps, type PanZoomInstance, type CoordinateExtent, type IsValidConnection, type NodeOrigin, type OnError, type Viewport, type ConnectionLookup, type OnConnect, type OnConnectStart, type OnConnectEnd, type NodeLookup, type OnBeforeDelete, type EdgeLookup } from '@xyflow/system';
+import { SelectionMode, ConnectionMode, ConnectionLineType, type SelectionRect, type SnapGrid, type MarkerProps, type PanZoomInstance, type CoordinateExtent, type IsValidConnection, type NodeOrigin, type OnError, type Viewport, type ConnectionLookup, type OnConnect, type OnConnectStart, type OnConnectEnd, type NodeLookup, type EdgeLookup } from '@xyflow/system';
 import DefaultNode from '../components/nodes/DefaultNode.svelte';
@@ -8,3 +8,3 @@ import InputNode from '../components/nodes/InputNode.svelte';
 import { BezierEdgeInternal, SmoothStepEdgeInternal, StraightEdgeInternal, StepEdgeInternal } from '../components/edges';
-import type { NodeTypes, EdgeTypes, EdgeLayouted, Node, Edge, FitViewOptions, OnDelete, OnEdgeCreate } from '../types';
+import type { NodeTypes, EdgeTypes, EdgeLayouted, Node, Edge, FitViewOptions, OnDelete, OnEdgeCreate, OnBeforeDelete } from '../types';
 import { type ConnectionProps } from './derived-connection-props';
@@ -94,2 +94,6 @@ export declare const initialNodeTypes: {
     onbeforedelete: import("svelte/store").Writable<OnBeforeDelete>;
+    nodesInitialized: import("svelte/store").Writable<boolean>;
+    edgesInitialized: import("svelte/store").Writable<boolean>;
+    viewportInitialized: import("svelte/store").Writable<boolean>;
+    initialized: import("svelte/store").Readable<boolean>;
 };

dist/lib/store/initial-store.js

@@ -34,3 +34,4 @@ import { readable, writable } from 'svelte/store';
         const nodesWithDimensions = nextNodes.filter((node) => node.width && node.height);
-        const bounds = getNodesBounds(nodesWithDimensions, [0, 0]);
+        // @todo users nodeOrigin should be used here
+        const bounds = getNodesBounds(nodesWithDimensions, { nodeOrigin: [0, 0] });
         viewport = getViewportForBounds(bounds, width, height, 0.5, 2, 0.1);
@@ -94,4 +95,8 @@ }
         onconnectend: writable(undefined),
-        onbeforedelete: writable(undefined)
+        onbeforedelete: writable(undefined),
+        nodesInitialized: writable(false),
+        edgesInitialized: writable(false),
+        viewportInitialized: writable(false),
+        initialized: readable(false)
     };
 };

dist/lib/types/general.d.ts

 import type { ShortcutModifierDefinition } from '@svelte-put/shortcut';
-import type { FitViewOptionsBase, HandleType, Position, XYPosition, ConnectingHandle, Connection } from '@xyflow/system';
+import type { FitViewOptionsBase, HandleType, Position, XYPosition, ConnectingHandle, Connection, OnBeforeDeleteBase } from '@xyflow/system';
 import type { Node } from './nodes';
@@ -48,1 +48,2 @@ import type { Edge } from './edges';
 export type OnEdgeCreate = (connection: Connection) => Edge | Connection | void;
+export type OnBeforeDelete<NodeType extends Node = Node, EdgeType extends Edge = Edge> = OnBeforeDeleteBase<NodeType, EdgeType>;

package.json

 {
   "name": "@xyflow/svelte",
-  "version": "0.0.34",
+  "version": "0.0.35",
   "description": "Svelte Flow - A highly customizable Svelte library for building node-based editors, workflow systems, diagrams and more.",
@@ -35,3 +35,3 @@ "keywords": [
     "classcat": "^5.0.4",
-    "@xyflow/system": "0.0.15"
+    "@xyflow/system": "0.0.16"
   },
@@ -38,0 +38,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

279060

increased by4.74%

Number of package files

247

increased by5.11%

Lines of code

4749

increased by6.84%

Dependency changes

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

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

• Updated@xyflow/system@0.0.16