@aloudata/ink-flow 1.0.26 → 1.0.28

package/dist/hooks/useKeyPress.js

@@ -0,0 +1,117 @@
+import { useState, useEffect, useRef, useMemo } from 'react';
+import { isInputDOMNode } from '../utils/dom';
+var defaultDoc = typeof document !== 'undefined' ? document : null;
+/**
+ * Hook for handling key events.
+ *
+ * @public
+ * @param param.keyCode - The key code (string or array of strings) to use
+ * @param param.options - Options
+ * @returns boolean
+ */
+export function useKeyPress(
+// the keycode can be a string 'a' or an array of strings ['a', 'a+d']
+// a string means a single key 'a' or a combination when '+' is used 'a+d'
+// an array means different possibilites. Explainer: ['a', 'd+s'] here the
+// user can use the single key 'a' or the combination 'd' + 's'
+keyCode, options) {
+    if (keyCode === void 0) { keyCode = null; }
+    if (options === void 0) { options = {
+        target: defaultDoc,
+        actInsideInputWithModifier: true,
+    }; }
+    var _a = __read(useState(false), 2), keyPressed = _a[0], setKeyPressed = _a[1];
+    // we need to remember if a modifier key is pressed in order to track it
+    var modifierPressed = useRef(false);
+    // we need to remember the pressed keys in order to support combinations
+    var pressedKeys = useRef(new Set([]));
+    // keyCodes = array with single keys [['a']] or key combinations [['a', 's']]
+    // keysToWatch = array with all keys flattened ['a', 'd', 'ShiftLeft']
+    // used to check if we store event.code or event.key. When the code is in the list of keysToWatch
+    // we use the code otherwise the key. Explainer: When you press the left "command" key, the code is "MetaLeft"
+    // and the key is "Meta". We want users to be able to pass keys and codes so we assume that the key is meant when
+    // we can't find it in the list of keysToWatch.
+    var _b = __read(useMemo(function () {
+        if (keyCode !== null) {
+            var keyCodeArr = Array.isArray(keyCode) ? keyCode : [keyCode];
+            var keys = keyCodeArr
+                .filter(function (kc) { return typeof kc === 'string'; })
+                .map(function (kc) { return kc.split('+'); });
+            var keysFlat = keys.reduce(function (res, item) { return res.concat.apply(res, __spreadArray([], __read(item), false)); }, []);
+            return [keys, keysFlat];
+        }
+        return [[], []];
+    }, [keyCode]), 2), keyCodes = _b[0], keysToWatch = _b[1];
+    useEffect(function () {
+        var target = (options === null || options === void 0 ? void 0 : options.target) || defaultDoc;
+        if (keyCode !== null) {
+            var downHandler_1 = function (event) {
+                modifierPressed.current =
+                    event.ctrlKey || event.metaKey || event.shiftKey;
+                var preventAction = (!modifierPressed.current ||
+                    (modifierPressed.current && !options.actInsideInputWithModifier)) &&
+                    isInputDOMNode(event);
+                if (preventAction) {
+                    return false;
+                }
+                var keyOrCode = useKeyOrCode(event.code, keysToWatch);
+                pressedKeys.current.add(event[keyOrCode]);
+                if (isMatchingKey(keyCodes, pressedKeys.current, false)) {
+                    event.preventDefault();
+                    setKeyPressed(true);
+                }
+            };
+            var upHandler_1 = function (event) {
+                var preventAction = (!modifierPressed.current ||
+                    (modifierPressed.current && !options.actInsideInputWithModifier)) &&
+                    isInputDOMNode(event);
+                if (preventAction) {
+                    return false;
+                }
+                var keyOrCode = useKeyOrCode(event.code, keysToWatch);
+                if (isMatchingKey(keyCodes, pressedKeys.current, true)) {
+                    setKeyPressed(false);
+                    pressedKeys.current.clear();
+                }
+                else {
+                    pressedKeys.current.delete(event[keyOrCode]);
+                }
+                // fix for Mac: when cmd key is pressed, keyup is not triggered for any other key, see: https://stackoverflow.com/questions/27380018/when-cmd-key-is-kept-pressed-keyup-is-not-triggered-for-any-other-key
+                if (event.key === 'Meta') {
+                    pressedKeys.current.clear();
+                }
+                modifierPressed.current = false;
+            };
+            var resetHandler_1 = function () {
+                pressedKeys.current.clear();
+                setKeyPressed(false);
+            };
+            target === null || target === void 0 ? void 0 : target.addEventListener('keydown', downHandler_1);
+            target === null || target === void 0 ? void 0 : target.addEventListener('keyup', upHandler_1);
+            window.addEventListener('blur', resetHandler_1);
+            window.addEventListener('contextmenu', resetHandler_1);
+            return function () {
+                target === null || target === void 0 ? void 0 : target.removeEventListener('keydown', downHandler_1);
+                target === null || target === void 0 ? void 0 : target.removeEventListener('keyup', upHandler_1);
+                window.removeEventListener('blur', resetHandler_1);
+                window.removeEventListener('contextmenu', resetHandler_1);
+            };
+        }
+    }, [keyCode, setKeyPressed]);
+    return keyPressed;
+}
+// utils
+function isMatchingKey(keyCodes, pressedKeys, isUp) {
+    return (keyCodes
+        // we only want to compare same sizes of keyCode definitions
+        // and pressed keys. When the user specified 'Meta' as a key somewhere
+        // this would also be truthy without this filter when user presses 'Meta' + 'r'
+        .filter(function (keys) { return isUp || keys.length === pressedKeys.size; })
+        // since we want to support multiple possibilities only one of the
+        // combinations need to be part of the pressed keys
+        .some(function (keys) { return keys.every(function (k) { return pressedKeys.has(k); }); }));
+}
+function useKeyOrCode(eventCode, keysToWatch) {
+    return keysToWatch.includes(eventCode) ? 'code' : 'key';
+}
+//# sourceMappingURL=useKeyPress.js.map

package/dist/hooks/useKeyPress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useKeyPress.js","sourceRoot":"","sources":["../../src/hooks/useKeyPress.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAY9C,IAAM,UAAU,GAAG,OAAO,QAAQ,KAAK,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC;AAErE;;;;;;;GAOG;AACH,MAAM,UAAU,WAAW;AACzB,sEAAsE;AACtE,0EAA0E;AAC1E,0EAA0E;AAC1E,+DAA+D;AAC/D,OAA8B,EAC9B,OAGC;IAJD,wBAAA,EAAA,cAA8B;IAC9B,wBAAA,EAAA;QACE,MAAM,EAAE,UAAU;QAClB,0BAA0B,EAAE,IAAI;KACjC;IAEK,IAAA,KAAA,OAA8B,QAAQ,CAAC,KAAK,CAAC,IAAA,EAA5C,UAAU,QAAA,EAAE,aAAa,QAAmB,CAAC;IAEpD,wEAAwE;IACxE,IAAM,eAAe,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAEtC,wEAAwE;IACxE,IAAM,WAAW,GAAG,MAAM,CAAc,IAAI,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;IAErD,6EAA6E;IAC7E,sEAAsE;IACtE,iGAAiG;IACjG,8GAA8G;IAC9G,iHAAiH;IACjH,+CAA+C;IACzC,IAAA,KAAA,OAA0B,OAAO,CAAsB;QAC3D,IAAI,OAAO,KAAK,IAAI,EAAE,CAAC;YACrB,IAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;YAChE,IAAM,IAAI,GAAG,UAAU;iBACpB,MAAM,CAAC,UAAC,EAAE,IAAK,OAAA,OAAO,EAAE,KAAK,QAAQ,EAAtB,CAAsB,CAAC;iBACtC,GAAG,CAAC,UAAC,EAAE,IAAK,OAAA,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,EAAb,CAAa,CAAC,CAAC;YAC9B,IAAM,QAAQ,GAAG,IAAI,CAAC,MAAM,CAC1B,UAAC,GAAS,EAAE,IAAI,IAAK,OAAA,GAAG,CAAC,MAAM,OAAV,GAAG,2BAAW,IAAI,YAAlB,CAAmB,EACxC,EAAE,CACH,CAAC;YAEF,OAAO,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;QAC1B,CAAC;QAED,OAAO,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;IAClB,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,IAAA,EAfN,QAAQ,QAAA,EAAE,WAAW,QAef,CAAC;IAEd,SAAS,CAAC;QACR,IAAM,MAAM,GAAG,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,MAAM,KAAI,UAAU,CAAC;QAE7C,IAAI,OAAO,KAAK,IAAI,EAAE,CAAC;YACrB,IAAM,aAAW,GAAG,UAAC,KAAoB;gBACvC,eAAe,CAAC,OAAO;oBACrB,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,QAAQ,CAAC;gBACnD,IAAM,aAAa,GACjB,CAAC,CAAC,eAAe,CAAC,OAAO;oBACvB,CAAC,eAAe,CAAC,OAAO,IAAI,CAAC,OAAO,CAAC,0BAA0B,CAAC,CAAC;oBACnE,cAAc,CAAC,KAAK,CAAC,CAAC;gBAExB,IAAI,aAAa,EAAE,CAAC;oBAClB,OAAO,KAAK,CAAC;gBACf,CAAC;gBACD,IAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;gBACxD,WAAW,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;gBAE1C,IAAI,aAAa,CAAC,QAAQ,EAAE,WAAW,CAAC,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC;oBACxD,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,aAAa,CAAC,IAAI,CAAC,CAAC;gBACtB,CAAC;YACH,CAAC,CAAC;YAEF,IAAM,WAAS,GAAG,UAAC,KAAoB;gBACrC,IAAM,aAAa,GACjB,CAAC,CAAC,eAAe,CAAC,OAAO;oBACvB,CAAC,eAAe,CAAC,OAAO,IAAI,CAAC,OAAO,CAAC,0BAA0B,CAAC,CAAC;oBACnE,cAAc,CAAC,KAAK,CAAC,CAAC;gBAExB,IAAI,aAAa,EAAE,CAAC;oBAClB,OAAO,KAAK,CAAC;gBACf,CAAC;gBACD,IAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;gBAExD,IAAI,aAAa,CAAC,QAAQ,EAAE,WAAW,CAAC,OAAO,EAAE,IAAI,CAAC,EAAE,CAAC;oBACvD,aAAa,CAAC,KAAK,CAAC,CAAC;oBACrB,WAAW,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;gBAC9B,CAAC;qBAAM,CAAC;oBACN,WAAW,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;gBAC/C,CAAC;gBAED,0MAA0M;gBAC1M,IAAI,KAAK,CAAC,GAAG,KAAK,MAAM,EAAE,CAAC;oBACzB,WAAW,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;gBAC9B,CAAC;gBAED,eAAe,CAAC,OAAO,GAAG,KAAK,CAAC;YAClC,CAAC,CAAC;YAEF,IAAM,cAAY,GAAG;gBACnB,WAAW,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;gBAC5B,aAAa,CAAC,KAAK,CAAC,CAAC;YACvB,CAAC,CAAC;YAEF,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,gBAAgB,CACtB,SAAS,EACT,aAAiD,CAClD,CAAC;YACF,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,gBAAgB,CACtB,OAAO,EACP,WAA+C,CAChD,CAAC;YACF,MAAM,CAAC,gBAAgB,CAAC,MAAM,EAAE,cAAY,CAAC,CAAC;YAC9C,MAAM,CAAC,gBAAgB,CAAC,aAAa,EAAE,cAAY,CAAC,CAAC;YAErD,OAAO;gBACL,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,mBAAmB,CACzB,SAAS,EACT,aAAiD,CAClD,CAAC;gBACF,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,mBAAmB,CACzB,OAAO,EACP,WAA+C,CAChD,CAAC;gBACF,MAAM,CAAC,mBAAmB,CAAC,MAAM,EAAE,cAAY,CAAC,CAAC;gBACjD,MAAM,CAAC,mBAAmB,CAAC,aAAa,EAAE,cAAY,CAAC,CAAC;YAC1D,CAAC,CAAC;QACJ,CAAC;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC,CAAC;IAE7B,OAAO,UAAU,CAAC;AACpB,CAAC;AAED,QAAQ;AAER,SAAS,aAAa,CACpB,QAAqB,EACrB,WAAwB,EACxB,IAAa;IAEb,OAAO,CACL,QAAQ;QACN,4DAA4D;QAC5D,sEAAsE;QACtE,+EAA+E;SAC9E,MAAM,CAAC,UAAC,IAAI,IAAK,OAAA,IAAI,IAAI,IAAI,CAAC,MAAM,KAAK,WAAW,CAAC,IAAI,EAAxC,CAAwC,CAAC;QAC3D,kEAAkE;QAClE,mDAAmD;SAClD,IAAI,CAAC,UAAC,IAAI,IAAK,OAAA,IAAI,CAAC,KAAK,CAAC,UAAC,CAAC,IAAK,OAAA,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC,EAAlB,CAAkB,CAAC,EAArC,CAAqC,CAAC,CACzD,CAAC;AACJ,CAAC;AAED,SAAS,YAAY,CAAC,SAAiB,EAAE,WAAoB;IAC3D,OAAO,WAAW,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC;AAC1D,CAAC"}

package/dist/hooks/useMoveSelectedNodes.js

@@ -0,0 +1,65 @@
+import { useCallback } from 'react';
+import { useStoreApi } from './useStore';
+import { snapPosition } from '../utils/general';
+import { calculateNodePosition } from '../utils/graph';
+var selectedAndDraggable = function (nodesDraggable) { return function (n) {
+    return n.selected &&
+        (n.draggable || (nodesDraggable && typeof n.draggable === 'undefined'));
+}; };
+/**
+ * Hook for updating node positions by passing a direction and factor
+ *
+ * @internal
+ * @returns function for updating node positions
+ */
+export function useMoveSelectedNodes() {
+    var store = useStoreApi();
+    var moveSelectedNodes = useCallback(function (params) {
+        var e_1, _a;
+        var _b = store.getState(), nodeExtent = _b.nodeExtent, snapToGrid = _b.snapToGrid, snapGrid = _b.snapGrid, nodesDraggable = _b.nodesDraggable, onError = _b.onError, updateNodePositions = _b.updateNodePositions, nodeLookup = _b.nodeLookup, nodeOrigin = _b.nodeOrigin;
+        var nodeUpdates = new Map();
+        var isSelected = selectedAndDraggable(nodesDraggable);
+        // by default a node moves 5px on each key press
+        // if snap grid is enabled, we use that for the velocity
+        var xVelo = snapToGrid ? snapGrid[0] : 5;
+        var yVelo = snapToGrid ? snapGrid[1] : 5;
+        var xDiff = params.direction.x * xVelo * params.factor;
+        var yDiff = params.direction.y * yVelo * params.factor;
+        try {
+            for (var nodeLookup_1 = __values(nodeLookup), nodeLookup_1_1 = nodeLookup_1.next(); !nodeLookup_1_1.done; nodeLookup_1_1 = nodeLookup_1.next()) {
+                var _c = __read(nodeLookup_1_1.value, 2), node = _c[1];
+                if (!isSelected(node)) {
+                    continue;
+                }
+                var nextPosition = {
+                    x: node.internals.positionAbsolute.x + xDiff,
+                    y: node.internals.positionAbsolute.y + yDiff,
+                };
+                if (snapToGrid) {
+                    nextPosition = snapPosition(nextPosition, snapGrid);
+                }
+                var _d = calculateNodePosition({
+                    nodeId: node.id,
+                    nextPosition: nextPosition,
+                    nodeLookup: nodeLookup,
+                    nodeExtent: nodeExtent,
+                    nodeOrigin: nodeOrigin,
+                    onError: onError,
+                }), position = _d.position, positionAbsolute = _d.positionAbsolute;
+                node.position = position;
+                node.internals.positionAbsolute = positionAbsolute;
+                nodeUpdates.set(node.id, node);
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (nodeLookup_1_1 && !nodeLookup_1_1.done && (_a = nodeLookup_1.return)) _a.call(nodeLookup_1);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+        updateNodePositions(nodeUpdates);
+    }, []);
+    return moveSelectedNodes;
+}
+//# sourceMappingURL=useMoveSelectedNodes.js.map

package/dist/hooks/useMoveSelectedNodes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMoveSelectedNodes.js","sourceRoot":"","sources":["../../src/hooks/useMoveSelectedNodes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAGpC,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,qBAAqB,EAAE,MAAM,gBAAgB,CAAC;AAGvD,IAAM,oBAAoB,GAAG,UAAC,cAAuB,IAAK,OAAA,UAAC,CAAO;IAChE,OAAA,CAAC,CAAC,QAAQ;QACV,CAAC,CAAC,CAAC,SAAS,IAAI,CAAC,cAAc,IAAI,OAAO,CAAC,CAAC,SAAS,KAAK,WAAW,CAAC,CAAC;AADvE,CACuE,EAFf,CAEe,CAAC;AAE1E;;;;;GAKG;AACH,MAAM,UAAU,oBAAoB;IAClC,IAAM,KAAK,GAAG,WAAW,EAAE,CAAC;IAE5B,IAAM,iBAAiB,GAAG,WAAW,CACnC,UAAC,MAAiD;;QAC1C,IAAA,KASF,KAAK,CAAC,QAAQ,EAAE,EARlB,UAAU,gBAAA,EACV,UAAU,gBAAA,EACV,QAAQ,cAAA,EACR,cAAc,oBAAA,EACd,OAAO,aAAA,EACP,mBAAmB,yBAAA,EACnB,UAAU,gBAAA,EACV,UAAU,gBACQ,CAAC;QACrB,IAAM,WAAW,GAAG,IAAI,GAAG,EAAE,CAAC;QAC9B,IAAM,UAAU,GAAG,oBAAoB,CAAC,cAAc,CAAC,CAAC;QAExD,gDAAgD;QAChD,wDAAwD;QACxD,IAAM,KAAK,GAAG,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC3C,IAAM,KAAK,GAAG,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAE3C,IAAM,KAAK,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,GAAG,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC;QACzD,IAAM,KAAK,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,GAAG,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC;;YAEzD,KAAuB,IAAA,eAAA,SAAA,UAAU,CAAA,sCAAA,8DAAE,CAAC;gBAAzB,IAAA,KAAA,+BAAQ,EAAL,IAAI,QAAA;gBAChB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC;oBACtB,SAAS;gBACX,CAAC;gBAED,IAAI,YAAY,GAAG;oBACjB,CAAC,EAAE,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC,GAAG,KAAK;oBAC5C,CAAC,EAAE,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC,GAAG,KAAK;iBAC7C,CAAC;gBAEF,IAAI,UAAU,EAAE,CAAC;oBACf,YAAY,GAAG,YAAY,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;gBACtD,CAAC;gBAEK,IAAA,KAAiC,qBAAqB,CAAC;oBAC3D,MAAM,EAAE,IAAI,CAAC,EAAE;oBACf,YAAY,cAAA;oBACZ,UAAU,YAAA;oBACV,UAAU,YAAA;oBACV,UAAU,YAAA;oBACV,OAAO,SAAA;iBACR,CAAC,EAPM,QAAQ,cAAA,EAAE,gBAAgB,sBAOhC,CAAC;gBAEH,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;gBACzB,IAAI,CAAC,SAAS,CAAC,gBAAgB,GAAG,gBAAgB,CAAC;gBAEnD,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC;YACjC,CAAC;;;;;;;;;QAED,mBAAmB,CAAC,WAAW,CAAC,CAAC;IACnC,CAAC,EACD,EAAE,CACH,CAAC;IAEF,OAAO,iBAAiB,CAAC;AAC3B,CAAC"}

package/dist/hooks/useNodeInView.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Hook for checking if a specific node is visible in the viewport.
+ *
+ * @public
+ * @param nodeId - The id of the node to check visibility for
+ * @returns boolean indicating if the node is visible in the viewport
+ *
+ */
+export declare function useNodeInView(nodeId: string): boolean;
+//# sourceMappingURL=useNodeInView.d.ts.map

package/dist/hooks/useNodeInView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useNodeInView.d.ts","sourceRoot":"","sources":["../../src/hooks/useNodeInView.ts"],"names":[],"mappings":"AAQA;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAsCrD"}

package/dist/hooks/useNodeInView.js

@@ -0,0 +1,41 @@
+import { useCallback } from 'react';
+import { useStore } from './useStore';
+import { isNodeInViewport, pointToRendererPoint, } from '../utils/general';
+/**
+ * Hook for checking if a specific node is visible in the viewport.
+ *
+ * @public
+ * @param nodeId - The id of the node to check visibility for
+ * @returns boolean indicating if the node is visible in the viewport
+ *
+ */
+export function useNodeInView(nodeId) {
+    var isInView = useStore(useCallback(function (s) {
+        if (!s.width || !s.height) {
+            return false;
+        }
+        if (s.autoLayout && !s.layoutComplete) {
+            return false;
+        }
+        var node = s.nodeLookup.get(nodeId);
+        if (!node) {
+            return false;
+        }
+        // Calculate viewport rect in renderer coordinates
+        var _a = __read(s.transform, 3), tx = _a[0], ty = _a[1], tScale = _a[2];
+        var paneOrigin = pointToRendererPoint({ x: 0, y: 0 }, [
+            tx,
+            ty,
+            tScale,
+        ]);
+        var paneRect = {
+            x: paneOrigin.x,
+            y: paneOrigin.y,
+            width: s.width / tScale,
+            height: s.height / tScale,
+        };
+        return isNodeInViewport(node, paneRect);
+    }, [nodeId]));
+    return isInView;
+}
+//# sourceMappingURL=useNodeInView.js.map

package/dist/hooks/useNodeInView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useNodeInView.js","sourceRoot":"","sources":["../../src/hooks/useNodeInView.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,OAAO,EACL,gBAAgB,EAChB,oBAAoB,GACrB,MAAM,kBAAkB,CAAC;AAE1B;;;;;;;GAOG;AACH,MAAM,UAAU,aAAa,CAAC,MAAc;IAC1C,IAAM,QAAQ,GAAG,QAAQ,CACvB,WAAW,CACT,UAAC,CAAe;QACd,IAAI,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC;YAC1B,OAAO,KAAK,CAAC;QACf,CAAC;QAED,IAAI,CAAC,CAAC,UAAU,IAAI,CAAC,CAAC,CAAC,cAAc,EAAE,CAAC;YACtC,OAAO,KAAK,CAAC;QACf,CAAC;QAED,IAAM,IAAI,GAAG,CAAC,CAAC,UAAU,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;QACtC,IAAI,CAAC,IAAI,EAAE,CAAC;YACV,OAAO,KAAK,CAAC;QACf,CAAC;QAED,kDAAkD;QAC5C,IAAA,KAAA,OAAmB,CAAC,CAAC,SAAS,IAAA,EAA7B,EAAE,QAAA,EAAE,EAAE,QAAA,EAAE,MAAM,QAAe,CAAC;QACrC,IAAM,UAAU,GAAG,oBAAoB,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE;YACtD,EAAE;YACF,EAAE;YACF,MAAM;SACP,CAAC,CAAC;QACH,IAAM,QAAQ,GAAG;YACf,CAAC,EAAE,UAAU,CAAC,CAAC;YACf,CAAC,EAAE,UAAU,CAAC,CAAC;YACf,KAAK,EAAE,CAAC,CAAC,KAAK,GAAG,MAAM;YACvB,MAAM,EAAE,CAAC,CAAC,MAAM,GAAG,MAAM;SAC1B,CAAC;QAEF,OAAO,gBAAgB,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;IAC1C,CAAC,EACD,CAAC,MAAM,CAAC,CACT,CACF,CAAC;IAEF,OAAO,QAAQ,CAAC;AAClB,CAAC"}

package/dist/hooks/useNodesInView.d.ts

@@ -0,0 +1,12 @@
+import type { Node } from '../types';
+/**
+ * Hook for getting nodes that are currently visible in the viewport.
+ * Unlike getNodesInside, this hook does NOT force initial render visibility,
+ * making it suitable for lazy loading scenarios.
+ *
+ * @public
+ * @returns array of visible nodes
+ *
+ */
+export declare function useNodesInView<NodeType extends Node = Node>(): NodeType[];
+//# sourceMappingURL=useNodesInView.d.ts.map

package/dist/hooks/useNodesInView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useNodesInView.d.ts","sourceRoot":"","sources":["../../src/hooks/useNodesInView.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAgB,MAAM,UAAU,CAAC;AAGnD;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,KAAK,QAAQ,EAAE,CAsCzE"}

package/dist/hooks/useNodesInView.js

@@ -0,0 +1,52 @@
+import { useCallback } from 'react';
+import { shallow } from 'zustand/shallow';
+import { useStore } from './useStore';
+import { isNodeInViewport, pointToRendererPoint } from '../utils/general';
+/**
+ * Hook for getting nodes that are currently visible in the viewport.
+ * Unlike getNodesInside, this hook does NOT force initial render visibility,
+ * making it suitable for lazy loading scenarios.
+ *
+ * @public
+ * @returns array of visible nodes
+ *
+ */
+export function useNodesInView() {
+    var visibleNodes = useStore(useCallback(function (s) {
+        var e_1, _a;
+        if (!s.width || !s.height) {
+            return [];
+        }
+        // 如果开启了自动布局，须等待布局完成
+        if (s.autoLayout && !s.layoutComplete) {
+            return [];
+        }
+        var _b = __read(s.transform, 3), tx = _b[0], ty = _b[1], tScale = _b[2];
+        var paneOrigin = pointToRendererPoint({ x: 0, y: 0 }, [tx, ty, tScale]);
+        var paneRect = {
+            x: paneOrigin.x,
+            y: paneOrigin.y,
+            width: s.width / tScale,
+            height: s.height / tScale,
+        };
+        var result = [];
+        try {
+            for (var _c = __values(s.nodeLookup.values()), _d = _c.next(); !_d.done; _d = _c.next()) {
+                var node = _d.value;
+                if (isNodeInViewport(node, paneRect)) {
+                    result.push(node.internals.userNode);
+                }
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+        return result;
+    }, []), shallow);
+    return visibleNodes;
+}
+//# sourceMappingURL=useNodesInView.js.map

package/dist/hooks/useNodesInView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useNodesInView.js","sourceRoot":"","sources":["../../src/hooks/useNodesInView.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,OAAO,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAE1E;;;;;;;;GAQG;AACH,MAAM,UAAU,cAAc;IAC5B,IAAM,YAAY,GAAG,QAAQ,CAC3B,WAAW,CACT,UAAC,CAAe;;QACd,IAAI,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC;YAC1B,OAAO,EAAgB,CAAC;QAC1B,CAAC;QAED,oBAAoB;QACpB,IAAI,CAAC,CAAC,UAAU,IAAI,CAAC,CAAC,CAAC,cAAc,EAAE,CAAC;YACtC,OAAO,EAAgB,CAAC;QAC1B,CAAC;QAEK,IAAA,KAAA,OAAmB,CAAC,CAAC,SAAS,IAAA,EAA7B,EAAE,QAAA,EAAE,EAAE,QAAA,EAAE,MAAM,QAAe,CAAC;QACrC,IAAM,UAAU,GAAG,oBAAoB,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,MAAM,CAAC,CAAC,CAAC;QAC1E,IAAM,QAAQ,GAAG;YACf,CAAC,EAAE,UAAU,CAAC,CAAC;YACf,CAAC,EAAE,UAAU,CAAC,CAAC;YACf,KAAK,EAAE,CAAC,CAAC,KAAK,GAAG,MAAM;YACvB,MAAM,EAAE,CAAC,CAAC,MAAM,GAAG,MAAM;SAC1B,CAAC;QAEF,IAAM,MAAM,GAAe,EAAE,CAAC;;YAE9B,KAAmB,IAAA,KAAA,SAAA,CAAC,CAAC,UAAU,CAAC,MAAM,EAAE,CAAA,gBAAA,4BAAE,CAAC;gBAAtC,IAAM,IAAI,WAAA;gBACb,IAAI,gBAAgB,CAAC,IAAI,EAAE,QAAQ,CAAC,EAAE,CAAC;oBACrC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,QAAoB,CAAC,CAAC;gBACnD,CAAC;YACH,CAAC;;;;;;;;;QAED,OAAO,MAAM,CAAC;IAChB,CAAC,EACD,EAAE,CACH,EACD,OAAO,CACR,CAAC;IAEF,OAAO,YAAY,CAAC;AACtB,CAAC"}

package/dist/hooks/useNodesState.js

@@ -0,0 +1,6 @@
+import { useState } from 'react';
+export function useNodesState(initialNodes) {
+    var _a = __read(useState(initialNodes), 2), nodes = _a[0], setNodes = _a[1];
+    return [nodes, setNodes];
+}
+//# sourceMappingURL=useNodesState.js.map

package/dist/hooks/useNodesState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useNodesState.js","sourceRoot":"","sources":["../../src/hooks/useNodesState.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAsC,MAAM,OAAO,CAAC;AAGrE,MAAM,UAAU,aAAa,CAC3B,YAAwB;IAElB,IAAA,KAAA,OAAoB,QAAQ,CAAC,YAAY,CAAC,IAAA,EAAzC,KAAK,QAAA,EAAE,QAAQ,QAA0B,CAAC;IAEjD,OAAO,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;AAC3B,CAAC"}

package/dist/hooks/useResizeHandler.js

@@ -0,0 +1,38 @@
+import { useEffect } from 'react';
+import { useStoreApi } from '../hooks/useStore';
+import { getDimensions } from '../utils/dom';
+import { errorMessages } from '@aloudata/ink-core';
+/**
+ * Hook for handling resize events.
+ *
+ * @internal
+ */
+export function useResizeHandler(domNode) {
+    var store = useStoreApi();
+    useEffect(function () {
+        var updateDimensions = function () {
+            var _a, _b;
+            if (!domNode.current) {
+                return false;
+            }
+            var size = getDimensions(domNode.current);
+            if (size.height === 0 || size.width === 0) {
+                (_b = (_a = store.getState()).onError) === null || _b === void 0 ? void 0 : _b.call(_a, '004', errorMessages['error004']());
+            }
+            store.setState({ width: size.width || 500, height: size.height || 500 });
+        };
+        if (domNode.current) {
+            updateDimensions();
+            window.addEventListener('resize', updateDimensions);
+            var resizeObserver_1 = new ResizeObserver(function () { return updateDimensions(); });
+            resizeObserver_1.observe(domNode.current);
+            return function () {
+                window.removeEventListener('resize', updateDimensions);
+                if (resizeObserver_1 && domNode.current) {
+                    resizeObserver_1.unobserve(domNode.current);
+                }
+            };
+        }
+    }, []);
+}
+//# sourceMappingURL=useResizeHandler.js.map

package/dist/hooks/useResizeHandler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResizeHandler.js","sourceRoot":"","sources":["../../src/hooks/useResizeHandler.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAyB,MAAM,OAAO,CAAC;AAEzD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEnD;;;;GAIG;AACH,MAAM,UAAU,gBAAgB,CAC9B,OAAgD;IAEhD,IAAM,KAAK,GAAG,WAAW,EAAE,CAAC;IAE5B,SAAS,CAAC;QACR,IAAM,gBAAgB,GAAG;;YACvB,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC;gBACrB,OAAO,KAAK,CAAC;YACf,CAAC;YACD,IAAM,IAAI,GAAG,aAAa,CAAC,OAAO,CAAC,OAAQ,CAAC,CAAC;YAE7C,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,IAAI,IAAI,CAAC,KAAK,KAAK,CAAC,EAAE,CAAC;gBAC1C,MAAA,MAAA,KAAK,CAAC,QAAQ,EAAE,EAAC,OAAO,mDAAG,KAAK,EAAE,aAAa,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC;YACjE,CAAC;YAED,KAAK,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,IAAI,GAAG,EAAE,CAAC,CAAC;QAC3E,CAAC,CAAC;QAEF,IAAI,OAAO,CAAC,OAAO,EAAE,CAAC;YACpB,gBAAgB,EAAE,CAAC;YACnB,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAC;YAEpD,IAAM,gBAAc,GAAG,IAAI,cAAc,CAAC,cAAM,OAAA,gBAAgB,EAAE,EAAlB,CAAkB,CAAC,CAAC;YACpE,gBAAc,CAAC,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;YAExC,OAAO;gBACL,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAC;gBAEvD,IAAI,gBAAc,IAAI,OAAO,CAAC,OAAO,EAAE,CAAC;oBACtC,gBAAc,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;gBAC5C,CAAC;YACH,CAAC,CAAC;QACJ,CAAC;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;AACT,CAAC"}

package/dist/hooks/useStore.js

@@ -0,0 +1,37 @@
+import { useContext, useMemo } from 'react';
+import { useStoreWithEqualityFn as useZustandStore, } from 'zustand/traditional';
+import StoreContext from '../contexts/StoreContext';
+import { errorMessages } from '@aloudata/ink-core';
+var zustandErrorMessage = errorMessages['error001']();
+/**
+ * Hook for accessing the internal store. Should only be used in rare cases.
+ *
+ * @public
+ * @param selector
+ * @param equalityFn
+ * @returns The selected state slice
+ *
+ * @example
+ * const nodes = useStore((state: InkFlowState<MyNodeType>) => state.nodes);
+ *
+ */
+function useStore(selector, equalityFn) {
+    var store = useContext(StoreContext);
+    if (store === null) {
+        throw new Error(zustandErrorMessage);
+    }
+    return useZustandStore(store, selector, equalityFn);
+}
+function useStoreApi() {
+    var store = useContext(StoreContext);
+    if (store === null) {
+        throw new Error(zustandErrorMessage);
+    }
+    return useMemo(function () { return ({
+        getState: store.getState,
+        setState: store.setState,
+        subscribe: store.subscribe,
+    }); }, [store]);
+}
+export { useStore, useStoreApi };
+//# sourceMappingURL=useStore.js.map

package/dist/hooks/useStore.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStore.js","sourceRoot":"","sources":["../../src/hooks/useStore.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAEL,sBAAsB,IAAI,eAAe,GAC1C,MAAM,qBAAqB,CAAC;AAI7B,OAAO,YAAY,MAAM,0BAA0B,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEnD,IAAM,mBAAmB,GAAG,aAAa,CAAC,UAAU,CAAC,EAAE,CAAC;AAExD;;;;;;;;;;;GAWG;AACH,SAAS,QAAQ,CACf,QAA6C,EAC7C,UAAsD;IAEtD,IAAM,KAAK,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IAEvC,IAAI,KAAK,KAAK,IAAI,EAAE,CAAC;QACnB,MAAM,IAAI,KAAK,CAAC,mBAAmB,CAAC,CAAC;IACvC,CAAC;IAED,OAAO,eAAe,CAAC,KAAK,EAAE,QAAQ,EAAE,UAAU,CAAC,CAAC;AACtD,CAAC;AAED,SAAS,WAAW;IAIlB,IAAM,KAAK,GAAG,UAAU,CAAC,YAAY,CAE7B,CAAC;IAET,IAAI,KAAK,KAAK,IAAI,EAAE,CAAC;QACnB,MAAM,IAAI,KAAK,CAAC,mBAAmB,CAAC,CAAC;IACvC,CAAC;IAED,OAAO,OAAO,CACZ,cAAM,OAAA,CAAC;QACL,QAAQ,EAAE,KAAK,CAAC,QAAQ;QACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ;QACxB,SAAS,EAAE,KAAK,CAAC,SAAS;KAC3B,CAAC,EAJI,CAIJ,EACF,CAAC,KAAK,CAAC,CACR,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC"}

package/dist/hooks/useViewportHelper.js

@@ -0,0 +1,149 @@
+import { useMemo } from 'react';
+import { useStoreApi } from '../hooks/useStore';
+import { getViewportForBounds, pointToRendererPoint, rendererPointToPoint, } from '../utils/general';
+import { fitView } from '../utils/graph';
+import { getDimensions, getFitViewNodes, } from '@aloudata/ink-core';
+/**
+ * Hook for getting viewport helper functions.
+ *
+ * @internal
+ * @returns viewport helper functions
+ */
+var useViewportHelper = function () {
+    var store = useStoreApi();
+    return useMemo(function () {
+        return {
+            zoomIn: function (options) {
+                var panZoom = store.getState().panZoom;
+                return panZoom
+                    ? panZoom.scaleBy(1.2, { duration: options === null || options === void 0 ? void 0 : options.duration })
+                    : Promise.resolve(false);
+            },
+            zoomOut: function (options) {
+                var panZoom = store.getState().panZoom;
+                return panZoom
+                    ? panZoom.scaleBy(1 / 1.2, { duration: options === null || options === void 0 ? void 0 : options.duration })
+                    : Promise.resolve(false);
+            },
+            zoomTo: function (zoomLevel, options) {
+                var panZoom = store.getState().panZoom;
+                return panZoom
+                    ? panZoom.scaleTo(zoomLevel, { duration: options === null || options === void 0 ? void 0 : options.duration })
+                    : Promise.resolve(false);
+            },
+            getZoom: function () { return store.getState().transform[2]; },
+            setViewport: function (viewport, options) { return __awaiter(void 0, void 0, void 0, function () {
+                var _a, _b, tX, tY, tZoom, panZoom;
+                var _c, _d, _e;
+                return __generator(this, function (_f) {
+                    switch (_f.label) {
+                        case 0:
+                            _a = store.getState(), _b = __read(_a.transform, 3), tX = _b[0], tY = _b[1], tZoom = _b[2], panZoom = _a.panZoom;
+                            if (!panZoom) {
+                                return [2 /*return*/, Promise.resolve(false)];
+                            }
+                            return [4 /*yield*/, panZoom.setViewport({
+                                    x: (_c = viewport.x) !== null && _c !== void 0 ? _c : tX,
+                                    y: (_d = viewport.y) !== null && _d !== void 0 ? _d : tY,
+                                    zoom: (_e = viewport.zoom) !== null && _e !== void 0 ? _e : tZoom,
+                                }, { duration: options === null || options === void 0 ? void 0 : options.duration })];
+                        case 1:
+                            _f.sent();
+                            return [2 /*return*/, Promise.resolve(true)];
+                    }
+                });
+            }); },
+            getViewport: function () {
+                var _a = __read(store.getState().transform, 3), x = _a[0], y = _a[1], zoom = _a[2];
+                return { x: x, y: y, zoom: zoom };
+            },
+            fitView: function (options) {
+                var _a = store.getState(), nodeLookup = _a.nodeLookup, minZoom = _a.minZoom, maxZoom = _a.maxZoom, panZoom = _a.panZoom, domNode = _a.domNode;
+                if (!panZoom || !domNode) {
+                    return Promise.resolve(false);
+                }
+                var fitViewNodes = getFitViewNodes(nodeLookup, options);
+                var _b = getDimensions(domNode), width = _b.width, height = _b.height;
+                return fitView({
+                    nodes: fitViewNodes,
+                    width: width,
+                    height: height,
+                    minZoom: minZoom,
+                    maxZoom: maxZoom,
+                    panZoom: panZoom,
+                }, options);
+            },
+            setCenter: function (x, y, options) { return __awaiter(void 0, void 0, void 0, function () {
+                var _a, width, height, maxZoom, panZoom, nextZoom, centerX, centerY;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            _a = store.getState(), width = _a.width, height = _a.height, maxZoom = _a.maxZoom, panZoom = _a.panZoom;
+                            nextZoom = typeof (options === null || options === void 0 ? void 0 : options.zoom) !== 'undefined' ? options.zoom : maxZoom;
+                            centerX = width / 2 - x * nextZoom;
+                            centerY = height / 2 - y * nextZoom;
+                            if (!panZoom) {
+                                return [2 /*return*/, Promise.resolve(false)];
+                            }
+                            return [4 /*yield*/, panZoom.setViewport({
+                                    x: centerX,
+                                    y: centerY,
+                                    zoom: nextZoom,
+                                }, { duration: options === null || options === void 0 ? void 0 : options.duration })];
+                        case 1:
+                            _b.sent();
+                            return [2 /*return*/, Promise.resolve(true)];
+                    }
+                });
+            }); },
+            fitBounds: function (bounds, options) { return __awaiter(void 0, void 0, void 0, function () {
+                var _a, width, height, minZoom, maxZoom, panZoom, viewport;
+                var _b;
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
+                        case 0:
+                            _a = store.getState(), width = _a.width, height = _a.height, minZoom = _a.minZoom, maxZoom = _a.maxZoom, panZoom = _a.panZoom;
+                            viewport = getViewportForBounds(bounds, width, height, minZoom, maxZoom, (_b = options === null || options === void 0 ? void 0 : options.padding) !== null && _b !== void 0 ? _b : 0.1);
+                            if (!panZoom) {
+                                return [2 /*return*/, Promise.resolve(false)];
+                            }
+                            return [4 /*yield*/, panZoom.setViewport(viewport, { duration: options === null || options === void 0 ? void 0 : options.duration })];
+                        case 1:
+                            _c.sent();
+                            return [2 /*return*/, Promise.resolve(true)];
+                    }
+                });
+            }); },
+            screenToFlowPosition: function (clientPosition, options) {
+                var _a, _b;
+                if (options === void 0) { options = {}; }
+                var _c = store.getState(), transform = _c.transform, snapGrid = _c.snapGrid, snapToGrid = _c.snapToGrid, domNode = _c.domNode;
+                if (!domNode) {
+                    return clientPosition;
+                }
+                var _d = domNode.getBoundingClientRect(), domX = _d.x, domY = _d.y;
+                var correctedPosition = {
+                    x: clientPosition.x - domX,
+                    y: clientPosition.y - domY,
+                };
+                var _snapGrid = (_a = options.snapGrid) !== null && _a !== void 0 ? _a : snapGrid;
+                var _snapToGrid = (_b = options.snapToGrid) !== null && _b !== void 0 ? _b : snapToGrid;
+                return pointToRendererPoint(correctedPosition, transform, _snapToGrid, _snapGrid);
+            },
+            flowToScreenPosition: function (flowPosition) {
+                var _a = store.getState(), transform = _a.transform, domNode = _a.domNode;
+                if (!domNode) {
+                    return flowPosition;
+                }
+                var _b = domNode.getBoundingClientRect(), domX = _b.x, domY = _b.y;
+                var rendererPosition = rendererPointToPoint(flowPosition, transform);
+                return {
+                    x: rendererPosition.x + domX,
+                    y: rendererPosition.y + domY,
+                };
+            },
+        };
+    }, []);
+};
+export default useViewportHelper;
+//# sourceMappingURL=useViewportHelper.js.map

package/dist/hooks/useViewportHelper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useViewportHelper.js","sourceRoot":"","sources":["../../src/hooks/useViewportHelper.ts"],"names":[],"mappings":"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"}

package/dist/hooks/useVisibleEdgeIds.js

@@ -0,0 +1,50 @@
+import { useCallback } from 'react';
+import { shallow } from 'zustand/shallow';
+import { useStore } from './useStore';
+import { isEdgeVisible } from '../utils/edges';
+/**
+ * Hook for getting the visible edge ids from the store.
+ *
+ * @internal
+ * @param onlyRenderVisible
+ * @returns array with visible edge ids
+ */
+export function useVisibleEdgeIds(onlyRenderVisible) {
+    var edgeIds = useStore(useCallback(function (s) {
+        var e_1, _a;
+        if (!onlyRenderVisible) {
+            return s.edges.map(function (edge) { return edge.id; });
+        }
+        var visibleEdgeIds = [];
+        if (s.width && s.height) {
+            try {
+                for (var _b = __values(s.edges), _c = _b.next(); !_c.done; _c = _b.next()) {
+                    var edge = _c.value;
+                    var sourceNode = s.nodeLookup.get(edge.source);
+                    var targetNode = s.nodeLookup.get(edge.target);
+                    if (sourceNode &&
+                        targetNode &&
+                        isEdgeVisible({
+                            sourceNode: sourceNode,
+                            targetNode: targetNode,
+                            width: s.width,
+                            height: s.height,
+                            transform: s.transform,
+                        })) {
+                        visibleEdgeIds.push(edge.id);
+                    }
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+        }
+        return visibleEdgeIds;
+    }, [onlyRenderVisible]), shallow);
+    return edgeIds;
+}
+//# sourceMappingURL=useVisibleEdgeIds.js.map