@xyflow/svelte - npm Package Compare versions

Comparing version 0.1.18 to 0.1.19

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

@@ -178,2 +178,8 @@ /// <reference types="svelte" />
     translateExtent?: CoordinateExtent;
+    /** By default the nodes can be placed anywhere. You can use this prop to set a boundary.
+     *
+     * The first pair of coordinates is the top left boundary and the second pair is the bottom right.
+     * @example [[-1000, -10000], [1000, 1000]]
+     */
+    nodeExtent?: CoordinateExtent;
     /** Disabling this prop will allow the user to scroll the page even when their pointer is over the flow.
@@ -180,0 +186,0 @@ * @default true

dist/lib/hooks/useSvelteFlow.d.ts

@@ -215,4 +215,11 @@ /// <reference types="svelte" />
     /**
-     * Gets all connections for a given handle belonging to a specific node.
+     * Returns the bounds of the given nodes or node ids.
      *
+     * @param nodes - the nodes or node ids to calculate the bounds for
+     *
+     * @returns the bounds of the given nodes
+     */
+    getNodesBounds: (nodes: (Node | InternalNode | string)[]) => Rect;
+    /** Gets all connections for a given handle belonging to a specific node.
+     *
      * @param type - handle type 'source' or 'target'
@@ -219,0 +226,0 @@ * @param id - the handle id (this is only needed if you have multiple handles of the same type, meaning you have to provide a unique id for each handle)

dist/lib/hooks/useSvelteFlow.js

 import { get } from 'svelte/store';
-import { getOverlappingArea, isRectObject, nodeToRect, pointToRendererPoint, getViewportForBounds, getElementsToRemove, rendererPointToPoint, evaluateAbsolutePosition } from '@xyflow/system';
+import { getOverlappingArea, isRectObject, nodeToRect, pointToRendererPoint, getViewportForBounds, getElementsToRemove, rendererPointToPoint, evaluateAbsolutePosition, getNodesBounds } from '@xyflow/system';
 import { useStore } from '../store';
@@ -13,3 +13,3 @@ import { isNode } from '../utils';
 export function useSvelteFlow() {
-    const { zoomIn, zoomOut, fitView, onbeforedelete, snapGrid, viewport, width, height, minZoom, maxZoom, panZoom, nodes, edges, domNode, nodeLookup, edgeLookup, connectionLookup, nodeOrigin } = useStore();
+    const { zoomIn, zoomOut, fitView, onbeforedelete, snapGrid, viewport, width, height, minZoom, maxZoom, panZoom, nodes, edges, domNode, nodeLookup, nodeOrigin, edgeLookup, connectionLookup } = useStore();
     const getNodeRect = (node) => {
@@ -203,2 +203,7 @@ const $nodeLookup = get(nodeLookup);
         },
+        getNodesBounds: (nodes) => {
+            const _nodeLookup = get(nodeLookup);
+            const _nodeOrigin = get(nodeOrigin);
+            return getNodesBounds(nodes, { nodeLookup: _nodeLookup, nodeOrigin: _nodeOrigin });
+        },
         getHandleConnections: ({ type, id, nodeId }) => Array.from(get(connectionLookup)
@@ -205,0 +210,0 @@ .get(`${nodeId}-${type}-${id ?? null}`)

dist/lib/store/index.d.ts

@@ -1,6 +0,6 @@
-import { type NodeOrigin } from '@xyflow/system';
+import { type CoordinateExtent, type NodeOrigin } from '@xyflow/system';
 import type { Node, Edge } from '../types';
 import type { SvelteFlowStore } from './types';
 export declare const key: unique symbol;
-export declare function createStore({ nodes, edges, width, height, fitView: fitViewOnCreate, nodeOrigin }: {
+export declare function createStore({ nodes, edges, width, height, fitView: fitViewOnCreate, nodeOrigin, nodeExtent }: {
     nodes?: Node[];
@@ -12,5 +12,6 @@ edges?: Edge[];
     nodeOrigin?: NodeOrigin;
+    nodeExtent?: CoordinateExtent;
 }): SvelteFlowStore;
 export declare function useStore(): SvelteFlowStore;
-export declare function createStoreContext({ nodes, edges, width, height, fitView, nodeOrigin }: {
+export declare function createStoreContext({ nodes, edges, width, height, fitView, nodeOrigin, nodeExtent }: {
     nodes?: Node[];
@@ -22,2 +23,3 @@ edges?: Edge[];
     nodeOrigin?: NodeOrigin;
+    nodeExtent?: CoordinateExtent;
 }): SvelteFlowStore;

dist/lib/store/index.js

@@ -9,3 +9,3 @@ import { getContext, setContext } from 'svelte';
 export const key = Symbol();
-export function createStore({ nodes, edges, width, height, fitView: fitViewOnCreate, nodeOrigin }) {
+export function createStore({ nodes, edges, width, height, fitView: fitViewOnCreate, nodeOrigin, nodeExtent }) {
     const store = getInitialStore({
@@ -17,3 +17,4 @@ nodes,
         fitView: fitViewOnCreate,
-        nodeOrigin
+        nodeOrigin,
+        nodeExtent
     });
@@ -342,4 +343,4 @@ function setNodeTypes(nodeTypes) {
 }
-export function createStoreContext({ nodes, edges, width, height, fitView, nodeOrigin }) {
-    const store = createStore({ nodes, edges, width, height, fitView, nodeOrigin });
+export function createStoreContext({ nodes, edges, width, height, fitView, nodeOrigin, nodeExtent }) {
+    const store = createStore({ nodes, edges, width, height, fitView, nodeOrigin, nodeExtent });
     setContext(key, {
@@ -346,0 +347,0 @@ getStore: () => store

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

@@ -22,3 +22,3 @@ /// <reference types="svelte" />
 };
-export declare const getInitialStore: ({ nodes, edges, width, height, fitView, nodeOrigin }: {
+export declare const getInitialStore: ({ nodes, edges, width, height, fitView, nodeOrigin, nodeExtent }: {
     nodes?: Node[] | undefined;
@@ -30,2 +30,3 @@ edges?: Edge[] | undefined;
     nodeOrigin?: NodeOrigin | undefined;
+    nodeExtent?: CoordinateExtent | undefined;
 }) => {
@@ -32,0 +33,0 @@ flowId: import("svelte/store").Writable<string | null>;

dist/lib/store/initial-store.js

@@ -21,7 +21,11 @@ import { readable, writable } from 'svelte/store';
 };
-export const getInitialStore = ({ nodes = [], edges = [], width, height, fitView, nodeOrigin }) => {
+export const getInitialStore = ({ nodes = [], edges = [], width, height, fitView, nodeOrigin, nodeExtent }) => {
     const nodeLookup = new Map();
     const parentLookup = new Map();
+    const connectionLookup = new Map();
+    const edgeLookup = new Map();
     const storeNodeOrigin = nodeOrigin ?? [0, 0];
+    const storeNodeExtent = nodeExtent ?? infiniteExtent;
     adoptUserNodes(nodes, nodeLookup, parentLookup, {
+        nodeExtent: storeNodeExtent,
         nodeOrigin: storeNodeOrigin,
@@ -31,4 +35,2 @@ elevateNodesOnSelect: false,
     });
-    const connectionLookup = new Map();
-    const edgeLookup = new Map();
     updateConnectionLookup(connectionLookup, edgeLookup, edges);
@@ -44,3 +46,3 @@ let viewport = { x: 0, y: 0, zoom: 1 };
         flowId: writable(null),
-        nodes: createNodesStore(nodes, nodeLookup, parentLookup, storeNodeOrigin),
+        nodes: createNodesStore(nodes, nodeLookup, parentLookup, storeNodeOrigin, storeNodeExtent),
         nodeLookup: readable(nodeLookup),
@@ -59,3 +61,3 @@ parentLookup: readable(parentLookup),
         nodeDragThreshold: writable(1),
-        nodeExtent: writable(infiniteExtent),
+        nodeExtent: writable(storeNodeExtent),
         translateExtent: writable(infiniteExtent),
@@ -62,0 +64,0 @@ autoPanOnNodeDrag: writable(true),

dist/lib/store/utils.d.ts

 /// <reference types="svelte" />
 /// <reference types=".pnpm/svelte@4.2.1/node_modules/svelte" />
 import { type Unsubscriber, type Subscriber, type Updater, type Writable } from 'svelte/store';
-import { type Viewport, type PanZoomInstance, type ConnectionLookup, type EdgeLookup, type NodeLookup, type ParentLookup, type NodeOrigin } from '@xyflow/system';
+import { type Viewport, type PanZoomInstance, type ConnectionLookup, type EdgeLookup, type NodeLookup, type ParentLookup, type NodeOrigin, type CoordinateExtent } from '@xyflow/system';
 import type { DefaultEdgeOptions, DefaultNodeOptions, Edge, InternalNode, Node } from '../types';
@@ -12,3 +12,3 @@ export declare function syncNodeStores(nodesStore: ReturnType<typeof createNodesStore>, userNodesStore: Writable<Node[]>): void;
 };
-export declare const createNodesStore: (nodes: Node[], nodeLookup: NodeLookup<InternalNode>, parentLookup: ParentLookup<InternalNode>, nodeOrigin?: NodeOrigin) => {
+export declare const createNodesStore: (nodes: Node[], nodeLookup: NodeLookup<InternalNode>, parentLookup: ParentLookup<InternalNode>, nodeOrigin?: NodeOrigin, nodeExtent?: CoordinateExtent) => {
     subscribe: (this: void, run: Subscriber<Node[]>) => Unsubscriber;
@@ -15,0 +15,0 @@ update: (this: void, updater: Updater<Node[]>) => void;

dist/lib/store/utils.js

 import { writable, get } from 'svelte/store';
-import { adoptUserNodes, updateConnectionLookup } from '@xyflow/system';
+import { adoptUserNodes, updateConnectionLookup, infiniteExtent } from '@xyflow/system';
 // we need to sync the user nodes and the internal nodes so that the user can receive the updates
@@ -73,3 +73,3 @@ // made by Svelte Flow (like dragging or selecting a node).
 // The user only passes in relative positions, so we need to calculate the absolute positions based on the parent nodes.
-export const createNodesStore = (nodes, nodeLookup, parentLookup, nodeOrigin = [0, 0]) => {
+export const createNodesStore = (nodes, nodeLookup, parentLookup, nodeOrigin = [0, 0], nodeExtent = infiniteExtent) => {
     const { subscribe, set, update } = writable([]);
@@ -83,2 +83,3 @@ let value = nodes;
             nodeOrigin,
+            nodeExtent,
             defaults,
@@ -85,0 +86,0 @@ checkEquality: false

package.json

 {
   "name": "@xyflow/svelte",
-  "version": "0.1.18",
+  "version": "0.1.19",
   "description": "Svelte Flow - A highly customizable Svelte library for building node-based editors, workflow systems, diagrams and more.",
@@ -44,3 +44,3 @@ "keywords": [
     "classcat": "^5.0.4",
-    "@xyflow/system": "0.0.41"
+    "@xyflow/system": "0.0.42"
   },
@@ -47,0 +47,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

281812

increased by0.5%

Lines of code

5175

increased by0.49%

Dependency changes

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

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

• Updated@xyflow/system@0.0.42