@rkmodules/rules 0.0.23 → 0.0.25

package/dist/index.js

@@ -1,9 +1,8 @@
 'use strict';
 
 var mathjs = require('mathjs');
-var react = require('@xyflow/react');
-var useInner = require('@rkmodules/use-inner');
 var React = require('react');
+var react = require('@xyflow/react');
 var katex = require('katex');
 var classNames = require('classnames');
 var zustand = require('zustand');
@@ -1406,49 +1405,6 @@ var Engine = /** @class */ (function () {
     return Engine;
 }());
 
-var dummyEngine = new Engine();
-var EngineContext = React.createContext(dummyEngine);
-var useEngine = function () {
-    return React.useContext(EngineContext);
-};
-var ChangeContext = React.createContext(function () { });
-var useChange = function () {
-    return React.useContext(ChangeContext);
-};
-
-var styles = {"DefaultNode":"DefaultNode_R2P6c","selected":"selected_VmB-F","active":"active_zjUzx","Log":"Log_dsq5e","Label":"Label_wBwWA","Input":"Input_Yhvzf","Output":"Output_e4yF-","Table":"Table_aZyRT"};
-
-function NodeContainer(_a) {
-    var _b;
-    var id = _a.id, label = _a.label, className = _a.className, selected = _a.selected, children = _a.children;
-    var engine = useEngine();
-    var _c = __read(React.useState(false), 2), active = _c[0], setActive = _c[1];
-    React.useEffect(function () {
-        if (!id)
-            return;
-        var removeOnCall = engine.subscribe("functionCall", function (event) {
-            if (event.name === id) {
-                setActive(true);
-            }
-        });
-        var removeOnResult = engine.subscribe("functionResult", function (event) {
-            if (event.name === id) {
-                setTimeout(function () { return setActive(false); }, Math.max(0, 1000 - (event.duration || 0)));
-            }
-        });
-        return function () {
-            removeOnCall();
-            removeOnResult();
-        };
-    }, [id]);
-    return (React.createElement("div", { className: classNames(className, styles.DefaultNode, (_b = {},
-            _b[styles.selected] = selected,
-            _b[styles.active] = active,
-            _b)) },
-        React.createElement("div", { className: styles.Label }, label),
-        children));
-}
-
 function Control(_a) {
     var value = _a.value, type = _a.type, options = _a.options, onChange = _a.onChange;
     if (options) {
@@ -1471,21 +1427,19 @@ function Control(_a) {
     }
 }
 
+var styles = {"DefaultNode":"DefaultNode_R2P6c","selected":"selected_VmB-F","active":"active_zjUzx","Log":"Log_dsq5e","Label":"Label_wBwWA","Input":"Input_Yhvzf","Output":"Output_e4yF-","Table":"Table_aZyRT"};
+
 var Input = function (_a) {
     var _b;
-    var name = _a.name, varDef = _a.varDef, id = _a.id, data = _a.data, onChange = _a.onChange;
+    var name = _a.name, varDef = _a.varDef, id = _a.id, data = _a.data;
     var normalized = normalizeVarDef(varDef);
     var value = (_b = data.inputs) === null || _b === void 0 ? void 0 : _b[name];
     var isRef = isReference(value);
     var handleInputChange = function (param) { return function (value) {
         var _a;
-        // Update the function instance with the new input value
-        var body = __assign({}, data.caller.body);
-        var call = __assign({}, (body[id] || {}));
-        call.inputs = __assign(__assign({}, call.inputs), (_a = {}, _a[param] = value, _a));
-        body[id] = call;
-        var updatedFn = __assign(__assign({}, data.caller), { body: body });
-        onChange(updatedFn);
+        data.onChange({
+            inputs: __assign(__assign({}, data.inputs), (_a = {}, _a[param] = value, _a)),
+        });
     }; };
     return (React.createElement("tr", { key: name, className: classNames(styles.Input, styles["type-".concat(normalized.type)]), style: {
             "--type-color": "var(--color-".concat(normalized.type, ")"),
@@ -1498,19 +1452,15 @@ var Input = function (_a) {
 
 var Param = function (_a) {
     var _b;
-    var id = _a.id, name = _a.name, varDef = _a.varDef, data = _a.data, onChange = _a.onChange;
+    _a.id; var name = _a.name, varDef = _a.varDef, data = _a.data;
     var normalized = normalizeVarDef(varDef);
     var value = (_b = data.params) === null || _b === void 0 ? void 0 : _b[name];
     var isRef = isReference(value);
     var handleParamChange = function (param) { return function (value) {
         var _a;
-        // Update the function instance with the new param value
-        var body = __assign({}, data.caller.body);
-        var call = __assign({}, (body[id] || {}));
-        call.params = __assign(__assign({}, call.params), (_a = {}, _a[param] = value, _a));
-        body[id] = call;
-        var updatedFn = __assign(__assign({}, data.caller), { body: body });
-        onChange(updatedFn);
+        data.onChange({
+            params: __assign(__assign({}, data.params), (_a = {}, _a[param] = value, _a)),
+        });
     }; };
     return (React.createElement("tr", { key: name, className: classNames(styles.Input, styles["type-".concat(normalized.type)]), style: {
             "--type-color": "var(--color-".concat(normalized.type, ")"),
@@ -1530,23 +1480,62 @@ var Output = function (_a) {
             React.createElement(react.Handle, { type: "source", position: react.Position.Right, id: "".concat(id, "-").concat(name) }))));
 };
 
+var dummyEngine = new Engine();
+var EngineContext = React.createContext(dummyEngine);
+var useEngine = function () {
+    return React.useContext(EngineContext);
+};
+
+function NodeContainer(_a) {
+    var _b;
+    var id = _a.id, label = _a.label, className = _a.className, selected = _a.selected, children = _a.children;
+    var engine = useEngine();
+    var _c = __read(React.useState(false), 2), active = _c[0], setActive = _c[1];
+    React.useEffect(function () {
+        if (!id)
+            return;
+        var timer;
+        var removeOnCall = engine.subscribe("functionCall", function (event) {
+            if (event.name === id) {
+                setActive(true);
+            }
+        });
+        var removeOnResult = engine.subscribe("functionResult", function (event) {
+            if (event.name === id) {
+                clearTimeout(timer);
+                timer = setTimeout(function () { return setActive(false); }, Math.max(0, 1000 - (event.duration || 0)));
+            }
+        });
+        return function () {
+            removeOnCall();
+            removeOnResult();
+        };
+    }, [id]);
+    return (React.createElement("div", { className: classNames(className, styles.DefaultNode, (_b = {},
+            _b[styles.selected] = selected,
+            _b[styles.active] = active,
+            _b)) },
+        React.createElement("div", { className: styles.Label }, label),
+        children));
+}
+
 function GenericNode(_a) {
-    var id = _a.id, data = _a.data, selected = _a.selected, inputs = _a.inputs, outputs = _a.outputs, params = _a.params, children = _a.children, onChange = _a.onChange;
+    var id = _a.id, data = _a.data, selected = _a.selected, inputs = _a.inputs, outputs = _a.outputs, params = _a.params, children = _a.children;
     return (React.createElement(NodeContainer, { label: data.name, selected: selected, id: id },
         children,
         React.createElement("table", null,
             React.createElement("tbody", null,
-                Object.entries(outputs || {}).map(function (_a) {
+                Object.entries(outputs || data.outputDefs || {}).map(function (_a) {
                     var _b = __read(_a, 2), name = _b[0], varDef = _b[1];
                     return (React.createElement(Output, { key: name, name: name, varDef: varDef, id: id }));
                 }),
-                Object.entries(inputs || {}).map(function (_a) {
+                Object.entries(inputs || data.inputDefs || {}).map(function (_a) {
                     var _b = __read(_a, 2), name = _b[0], varDef = _b[1];
-                    return (React.createElement(Input, { key: name, name: name, varDef: varDef, id: id, data: data, onChange: onChange }));
+                    return (React.createElement(Input, { key: name, name: name, varDef: varDef, id: id, data: data }));
                 }),
-                Object.entries(params || {}).map(function (_a) {
+                Object.entries(params || data.paramDefs || {}).map(function (_a) {
                     var _b = __read(_a, 2), name = _b[0], varDef = _b[1];
-                    return (React.createElement(Param, { key: name, name: name, varDef: varDef, id: id, data: data, onChange: onChange }));
+                    return (React.createElement(Param, { key: name, name: name, varDef: varDef, id: id, data: data }));
                 })))));
 }
 
@@ -1569,15 +1558,9 @@ function MathView(_a) {
 var Calc = React.memo(function (_a) {
     var _b;
     var id = _a.id, data = _a.data, selected = _a.selected;
-    var engine = useEngine();
-    var onChange = useChange();
-    var calledFn = engine.getFunction(data.name);
-    if (!calledFn) {
-        return (React.createElement(NodeContainer, { label: "Function not found", selected: selected }));
-    }
     var expression = (((_b = data.params) === null || _b === void 0 ? void 0 : _b.expression) || "").toString();
     // add free variables to inputs
-    var inputs = __assign({}, (calledFn.inputs || {}));
+    var inputs = __assign({}, (data.inputDefs || {}));
     var symbols = getUnboundSymbols(expression);
     symbols.forEach(function (symbol) {
         if (!inputs[symbol]) {
@@ -1586,27 +1569,20 @@ var Calc = React.memo(function (_a) {
             };
         }
     });
-    return (React.createElement(GenericNode, { id: id, data: data, selected: selected, inputs: inputs, outputs: calledFn.outputs, params: calledFn.params, onChange: onChange },
+    return (React.createElement(GenericNode, { id: id, data: data, selected: selected, inputs: inputs },
         React.createElement(MathView, { expr: expression, displayMode: true })));
 });
 Calc.displayName = "CalcNode";
 
 var Default = React.memo(function (_a) {
     var id = _a.id, data = _a.data, selected = _a.selected;
-    var engine = useEngine();
-    var onChange = useChange();
-    var calledFn = engine.getFunction(data.name);
-    if (!calledFn) {
-        return (React.createElement(NodeContainer, { label: "Function not found", selected: selected }));
-    }
-    return (React.createElement(GenericNode, { id: id, data: data, selected: selected, inputs: calledFn.inputs, outputs: calledFn.outputs, params: calledFn.params, onChange: onChange }));
+    return React.createElement(GenericNode, { id: id, data: data, selected: selected });
 });
 Default.displayName = "DefaultNode";
 
 var Log = React.memo(function (_a) {
     var id = _a.id, data = _a.data, selected = _a.selected;
     var engine = useEngine();
-    var calledFn = engine.getFunction(data.name);
     var _b = __read(React.useState(null), 2), value = _b[0], setValue = _b[1];
     React.useEffect(function () {
         return engine.subscribe("functionResult", function (event) {
@@ -1616,9 +1592,6 @@ var Log = React.memo(function (_a) {
             }
         });
     }, []);
-    if (!calledFn) {
-        return (React.createElement(NodeContainer, { label: "Function not found", selected: selected }));
-    }
     return (React.createElement(NodeContainer, { id: id, label: data.name, selected: selected, className: styles.Log },
         React.createElement("div", { className: styles.Table },
             React.createElement("table", null, Object.entries(value || {}).map(function (_a) {
@@ -1627,9 +1600,12 @@ var Log = React.memo(function (_a) {
                     React.createElement("tbody", null,
                         React.createElement("tr", null,
                             React.createElement("th", { colSpan: 2 }, "{".concat(key, "}"))),
-                        val.map(function (item, index) { return (React.createElement("tr", { key: "".concat(key, "-").concat(index) },
-                            React.createElement("td", null, index),
-                            React.createElement("td", { title: JSON.stringify(item, null, 2) }, item === null || item === void 0 ? void 0 : item.toString()))); }))));
+                        val.map(function (item, index) {
+                            var _a;
+                            return (React.createElement("tr", { key: "".concat(key, "-").concat(index) },
+                                React.createElement("td", null, index),
+                                React.createElement("td", { title: JSON.stringify(item, null, 2) }, (_a = item === null || item === void 0 ? void 0 : item.toString) === null || _a === void 0 ? void 0 : _a.call(item))));
+                        }))));
             }))),
         React.createElement(react.Handle, { type: "target", position: react.Position.Left, id: "".concat(id, "-data") }),
         React.createElement(react.Handle, { type: "source", position: react.Position.Right, id: "".concat(id, "-data") })));
@@ -1641,19 +1617,13 @@ function uid() {
 }
 var Merge = React.memo(function (_a) {
     var id = _a.id, data = _a.data, selected = _a.selected;
-    var engine = useEngine();
-    var onChange = useChange();
-    var calledFn = engine.getFunction(data.name);
-    if (!calledFn) {
-        return (React.createElement(NodeContainer, { label: "Function not found", selected: selected }));
-    }
     var inputs = Object.fromEntries(Object.keys(data.inputs || {}).map(function (name, i) { return [
         name,
         { type: "any", label: "D".concat(i + 1) },
     ]; }));
     var inputCount = Object.keys(inputs).length;
     inputs[uid()] = { type: "any", label: "D".concat(inputCount + 1) };
-    var outputs = __assign({}, (calledFn.outputs || {}));
+    var outputs = __assign({}, (data.outputDefs || {}));
     return (React.createElement(NodeContainer, { label: data.name, selected: selected, id: id },
         React.createElement("table", null,
             React.createElement("tbody", null,
@@ -1663,7 +1633,7 @@ var Merge = React.memo(function (_a) {
                 }),
                 Object.entries(inputs || {}).map(function (_a) {
                     var _b = __read(_a, 2), name = _b[0], varDef = _b[1];
-                    return (React.createElement(Input, { key: name, name: name, varDef: varDef, id: id, data: data, onChange: onChange }));
+                    return (React.createElement(Input, { key: name, name: name, varDef: varDef, id: id, data: data }));
                 })))));
 });
 Merge.displayName = "MergeNode";
@@ -1737,9 +1707,29 @@ function useUpdatePositions(fn) {
 function createGraph(fn, engine, positions, options) {
     var nodes = [];
     var edges = [];
+    var handleChange = function (id) { return function (newData) {
+        var _a;
+        // console.log("handleChange", id, newData);
+        options === null || options === void 0 ? void 0 : options.setNodes(function (nds) {
+            return nds.map(function (node) {
+                if (node.id === id) {
+                    // console.log("update node", id, newData);
+                    return __assign(__assign({}, node), { data: __assign(__assign({}, node.data), newData) });
+                }
+                return node;
+            });
+        });
+        // update the function definition
+        var body = __assign({}, fn.body);
+        var fncall = __assign(__assign({}, (body[id] || {})), newData);
+        body[id] = fncall;
+        var updatedFn = __assign(__assign({}, fn), { body: body });
+        (_a = options === null || options === void 0 ? void 0 : options.onChange) === null || _a === void 0 ? void 0 : _a.call(options, updatedFn);
+        // console.log("updated call", fncall);
+    }; };
     Object.entries(fn.body || {}).forEach(function (_a, index) {
         var _b = __read(_a, 2), id = _b[0], fncall = _b[1];
-        var reffedFn = engine.getFunction(fncall.name);
+        var calledFn = engine.getFunction(fncall.name);
         // create a node for each function call
         nodes.push({
             id: id,
@@ -1748,10 +1738,14 @@ function createGraph(fn, engine, positions, options) {
                 caller: fn,
                 inputs: fncall.inputs,
                 params: fncall.params,
+                inputDefs: (calledFn === null || calledFn === void 0 ? void 0 : calledFn.inputs) || {},
+                paramDefs: (calledFn === null || calledFn === void 0 ? void 0 : calledFn.params) || {},
+                outputDefs: (calledFn === null || calledFn === void 0 ? void 0 : calledFn.outputs) || {},
+                onChange: handleChange(id),
             },
             position: (positions === null || positions === void 0 ? void 0 : positions[id]) || { x: 250 * index, y: 0 },
             dragHandle: options === null || options === void 0 ? void 0 : options.dragHandle,
-            type: (reffedFn === null || reffedFn === void 0 ? void 0 : reffedFn.nodeType) || "Default",
+            type: (calledFn === null || calledFn === void 0 ? void 0 : calledFn.nodeType) || "Default",
         });
         var refs = getReferences(fncall.inputs || {});
         refs.forEach(function (ref) {
@@ -1769,30 +1763,35 @@ function createGraph(fn, engine, positions, options) {
 }
 function useFlow(fn, engine, options) {
     var _a = __read(usePositions(fn), 1), positions = _a[0];
-    return React.useMemo(function () {
-        return createGraph(fn, engine, positions, options);
-    }, [fn, engine]);
+    React.useEffect(function () {
+        var _a = createGraph(fn, engine, positions, options), nodes = _a.nodes, edges = _a.edges;
+        options.setNodes(nodes);
+        options.setEdges(edges);
+    }, [engine]);
 }
 
 function FlowInner(_a) {
     var fn = _a.function, engine = _a.engine, onChange = _a.onChange, onClick = _a.onClick, onSelect = _a.onSelect;
     var _b = __read(React.useState(null), 2), instance = _b[0], setInstance = _b[1];
     var updatePositions = useUpdatePositions(fn);
-    var _c = useFlow(fn, engine, {
+    var _c = __read(react.useNodesState([]), 3), nodes = _c[0], setNodes = _c[1], onNodesChange = _c[2];
+    var _d = __read(react.useEdgesState([]), 3), edges = _d[0], setEdges = _d[1], onEdgesChange = _d[2];
+    useFlow(fn, engine, {
         dragHandle: ".".concat(styles.Label),
-    }), initialNodes = _c.nodes, initialEdges = _c.edges;
-    var _d = __read(useInner.useInner(initialNodes), 2), nodes = _d[0], setNodes = _d[1];
-    var _e = __read(useInner.useInner(initialEdges), 2), edges = _e[0], setEdges = _e[1];
+        setNodes: setNodes,
+        setEdges: setEdges,
+        onChange: onChange,
+    });
     // node selection handler
     var handleChange = React.useCallback(function (_a) {
-        var nodes = _a.nodes, edges = _a.edges;
-        onSelect === null || onSelect === void 0 ? void 0 : onSelect(nodes, edges);
+        var nodes = _a.nodes;
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect(nodes.map(function (n) { return n.id; }) || []);
     }, [onSelect]);
     react.useOnSelectionChange({
         onChange: handleChange,
     });
     // dropping nodes
-    var _f = __read(reactDnd.useDrop({
+    var _e = __read(reactDnd.useDrop({
         accept: "flow-node",
         drop: function (item, monitor) {
             var pos = monitor.getClientOffset();
@@ -1809,19 +1808,9 @@ function FlowInner(_a) {
                 isOver: monitor.isOver(),
             };
         },
-    }), 2); _f[0].isOver; var drop = _f[1];
+    }), 2); _e[0].isOver; var drop = _e[1];
     // useLayoutNodes();
     var updatePosition = useUpdatePositions(fn);
-    var onNodesChange = React.useCallback(function (changes) {
-        return setNodes(function (nodesSnapshot) {
-            return react.applyNodeChanges(changes, nodesSnapshot);
-        });
-    }, [setNodes]);
-    var onEdgesChange = React.useCallback(function (changes) {
-        return setEdges(function (edgesSnapshot) {
-            return react.applyEdgeChanges(changes, edgesSnapshot);
-        });
-    }, [setEdges]);
     var onConnect = React.useCallback(function (params) {
         var _a, _b;
         var sourceField = (_a = params.sourceHandle) === null || _a === void 0 ? void 0 : _a.split("-")[1];
@@ -1879,9 +1868,8 @@ function FlowInner(_a) {
 function Flow(_a) {
     var fn = _a.function, engine = _a.engine, _b = _a.onChange, onChange = _b === void 0 ? function () { } : _b, onClick = _a.onClick, onSelect = _a.onSelect;
     return (React.createElement(EngineContext.Provider, { value: engine },
-        React.createElement(ChangeContext.Provider, { value: onChange },
-            React.createElement(react.ReactFlowProvider, null,
-                React.createElement(FlowInner, { function: fn, engine: engine, onChange: onChange, onClick: onClick, onSelect: onSelect })))));
+        React.createElement(react.ReactFlowProvider, null,
+            React.createElement(FlowInner, { function: fn, engine: engine, onChange: onChange, onClick: onClick, onSelect: onSelect }))));
 }
 
 function useDraggableNode(name, fn) {