@rkmodules/rules 0.0.24 → 0.0.26

package/dist/index.js

@@ -1,14 +1,13 @@
 '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 reactDnd = require('react-dnd');
 var katex = require('katex');
 var classNames = require('classnames');
 var zustand = require('zustand');
 var middleware = require('zustand/middleware');
-var reactDnd = require('react-dnd');
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -875,7 +874,7 @@ var listItem = {
                     //         return indices.map((i) => branch[i]);
                     //     }
                     // }),
-                    item: binaryOnTreeBranch(inputs.list, inputs.index, function (branch, indices) {
+                    item: binaryOnTreeBranch(inputs.list || {}, inputs.index || {}, function (branch, indices) {
                         if (indices) {
                             return indices.map(function (i) { return branch[i]; });
                         }
@@ -1173,6 +1172,7 @@ var Engine = /** @class */ (function () {
                             endTime: endTime_1,
                             duration: endTime_1 - startTime_1,
                         });
+                        console.log("functionReult", name_1, inputs_1, params_1, result_1);
                         _e.label = 4;
                     case 4:
                         _i++;
@@ -1191,6 +1191,7 @@ var Engine = /** @class */ (function () {
                             endTime: endTime,
                             duration: endTime - startTime,
                         });
+                        console.log("graph run done", result, context, endTime - startTime);
                         return [2 /*return*/, result];
                 }
             });
@@ -1302,11 +1303,12 @@ var Engine = /** @class */ (function () {
                             }
                             return [2 /*return*/, this.run(builtFn, inputs)];
                         }
-                        console.log("Engine running with inputs", inputs, interpolate(inputs, {}));
                         mappedInputs = interpolate(inputs, {});
+                        console.log("Engine running with inputs", inputs, mappedInputs);
                         return [4 /*yield*/, ((_a = node.impl) === null || _a === void 0 ? void 0 : _a.call(node, mappedInputs, {}))];
                     case 1:
                         result = _b.sent();
+                        console.log("Engine run complete", result);
                         return [2 /*return*/, result];
                 }
             });
@@ -1316,8 +1318,8 @@ var Engine = /** @class */ (function () {
         return this.fnIndex[name];
     };
     // node handlers
-    Engine.prototype.applyNodeDelete = function (fn, nodeIds) {
-        var newFn = __assign(__assign({}, fn), { body: __assign({}, fn.body) });
+    Engine.prototype.applyNodeDelete = function (oldFn, nodeIds) {
+        var newFn = __assign(__assign({}, oldFn), { body: __assign({}, oldFn.body) });
         nodeIds.forEach(function (id) {
             delete newFn.body[id];
         });
@@ -1338,8 +1340,8 @@ var Engine = /** @class */ (function () {
         });
         return newFn;
     };
-    Engine.prototype.applyEdgeDelete = function (fn, fromNode, toNode, fromField, toField) {
-        var newFn = __assign(__assign({}, fn), { body: __assign({}, fn.body) });
+    Engine.prototype.applyEdgeDelete = function (oldFn, fromNode, toNode, fromField, toField) {
+        var newFn = __assign(__assign({}, oldFn), { body: __assign({}, oldFn.body) });
         var from = newFn.body[fromNode];
         var to = newFn.body[toNode];
         if (!from || !to) {
@@ -1354,8 +1356,8 @@ var Engine = /** @class */ (function () {
         }
         return newFn;
     };
-    Engine.prototype.applyNodeAdd = function (fn, nodeName, callback) {
-        var newFn = __assign(__assign({}, fn), { body: __assign({}, fn.body) });
+    Engine.prototype.applyNodeAdd = function (oldFn, nodeName, callback) {
+        var newFn = __assign(__assign({}, oldFn), { body: __assign({}, oldFn.body) });
         var id = uid$1();
         // ensure unique id
         while (newFn.body[id]) {
@@ -1388,10 +1390,10 @@ var Engine = /** @class */ (function () {
         callback === null || callback === void 0 ? void 0 : callback(newCall, id);
         return topSort(newFn);
     };
-    Engine.prototype.applyNodeConnect = function (fn, fromNode, toNode, fromField, toField) {
-        var newFn = __assign(__assign({}, fn), { body: __assign({}, fn.body) });
+    Engine.prototype.applyNodeConnect = function (oldFn, fromNode, toNode, fromField, toField) {
+        var newFn = __assign(__assign({}, oldFn), { body: __assign({}, oldFn.body) });
         var from = newFn.body[fromNode];
-        var to = newFn.body[toNode];
+        var to = __assign({}, newFn.body[toNode]);
         if (!from || !to) {
             console.warn("Invalid nodes for connection");
             return newFn;
@@ -1401,54 +1403,12 @@ var Engine = /** @class */ (function () {
         }
         // add the reference
         to.inputs[toField] = "<".concat(fromNode, ".").concat(fromField, ">");
+        newFn.body[toNode] = to;
         return topSort(newFn);
     };
     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 +1431,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 +1456,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 +1484,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 +1562,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 +1573,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 +1596,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 +1604,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 +1621,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 +1637,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";
@@ -1688,12 +1662,21 @@ var variableStore = zustand.create(function (set, get, api) {
         },
         setVar: function (scope, name, value, persist) {
             var _a, _b;
+            var key = "".concat(scope, "|").concat(name);
             if (persist) {
-                var data = __assign(__assign({}, pget().data), (_a = {}, _a["".concat(scope, "|").concat(name)] = value, _a));
+                var oldData = pget().data;
+                var newValue = typeof value === "function"
+                    ? value(oldData[key])
+                    : value;
+                var data = __assign(__assign({}, oldData), (_a = {}, _a[key] = newValue, _a));
                 pset({ data: data });
             }
             else {
-                var data = __assign(__assign({}, get().data), (_b = {}, _b["".concat(scope, "|").concat(name)] = value, _b));
+                var oldData = get().data;
+                var newValue = typeof value === "function"
+                    ? value(oldData[key])
+                    : value;
+                var data = __assign(__assign({}, oldData), (_b = {}, _b[key] = newValue, _b));
                 set({ data: data });
             }
         },
@@ -1729,79 +1712,187 @@ function usePositions(fn) {
 function useUpdatePositions(fn) {
     var _a = __read(usePositions(fn), 2), positions = _a[0], setPositions = _a[1];
     return React.useCallback(function (id, position) {
-        var _a;
-        setPositions(__assign(__assign({}, positions), (_a = {}, _a[id] = position, _a)));
+        positions[id] = position;
+        setPositions(positions);
     }, [positions, setPositions]);
 }
 
-function createGraph(fn, engine, positions, options) {
-    var nodes = [];
-    var edges = [];
-    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);
-        // create a node for each function call
-        nodes.push({
-            id: id,
-            data: {
-                name: fncall.name,
-                caller: fn,
-                inputs: fncall.inputs,
-                params: fncall.params,
-            },
-            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",
+// helpers
+function updateNodeArguments(node, inputs, params) {
+    return __assign(__assign({}, node), { data: __assign(__assign({}, node.data), { inputs: inputs, params: params }) });
+}
+/**
+ * flow state stores nodes and edges for the flow graph these can be updated when the function changes
+ * using setFn
+ */
+var useFlowState = zustand.create(function (set, get) { return ({
+    engine: null,
+    fn: null,
+    options: {},
+    nodes: [],
+    edges: [],
+    setNodes: function (updater) {
+        set(function (state) { return ({ nodes: updater(state.nodes) }); });
+    },
+    setEdges: function (updater) {
+        set(function (state) { return ({ edges: updater(state.edges) }); });
+    },
+    setFn: function (fn) {
+        // console.log("setFn", fn);
+        var _a = get(), oldFn = _a.fn, nodes = _a.nodes, edges = _a.edges, engine = _a.engine, options = _a.options;
+        // update the graph by shallow comparison
+        if (!engine) {
+            throw new Error("Engine not set");
+        }
+        var oldKeys = Object.keys((oldFn === null || oldFn === void 0 ? void 0 : oldFn.body) || {});
+        var newKeys = Object.keys(fn.body || {});
+        // remove all the nodes that were removed
+        nodes = nodes === null || nodes === void 0 ? void 0 : nodes.filter(function (node) { return newKeys.includes(node.id); });
+        // remove all the edges that were removed
+        edges = edges === null || edges === void 0 ? void 0 : edges.filter(function (edge) {
+            return (newKeys.includes(edge.source) && newKeys.includes(edge.target));
         });
-        var refs = getReferences(fncall.inputs || {});
-        refs.forEach(function (ref) {
-            // create an edge for each reference
-            edges.push({
-                id: "".concat(ref.path, "-").concat(id, ".").concat(ref.name),
-                source: ref.refNode,
-                target: id,
-                sourceHandle: "".concat(ref.refNode, "-").concat(ref.refField),
-                targetHandle: "".concat(id, "-").concat(ref.name),
+        // create the new nodes that were added
+        var addedKeys = newKeys.filter(function (key) { return !oldKeys.includes(key); });
+        addedKeys.forEach(function (key, index) {
+            var _a;
+            var fncall = (_a = fn.body) === null || _a === void 0 ? void 0 : _a[key];
+            // add the node
+            nodes.push(createNode(engine, key, fncall, options));
+            // add edges
+            var refs = getReferences(fncall.inputs || {});
+            refs.forEach(function (ref) {
+                edges.push(createEdge(key, ref));
             });
         });
-    });
-    return { nodes: nodes, edges: edges };
-}
+        // update the changed nodes
+        var changedKeys = newKeys.filter(function (key) {
+            var _a, _b;
+            // shallow comparison
+            return ((_a = fn.body) === null || _a === void 0 ? void 0 : _a[key]) !== ((_b = oldFn === null || oldFn === void 0 ? void 0 : oldFn.body) === null || _b === void 0 ? void 0 : _b[key]);
+        });
+        // console.log("changed keys", changedKeys);
+        changedKeys.forEach(function (key) {
+            var _a;
+            //  update the nodes that were changed
+            var fncall = (_a = fn.body) === null || _a === void 0 ? void 0 : _a[key];
+            nodes = nodes === null || nodes === void 0 ? void 0 : nodes.map(function (n) {
+                if (n.id === key) {
+                    return updateNodeArguments(n, fncall.inputs, fncall.params);
+                }
+                return n;
+            });
+            // update incoming edges
+            var refs = getReferences(fncall.inputs || {});
+            // remove all incoming edges
+            edges = edges === null || edges === void 0 ? void 0 : edges.filter(function (e) { return e.target !== key; });
+            // add the edge
+            refs.forEach(function (ref) {
+                edges.push(createEdge(key, ref));
+            });
+        });
+        // console.log("final graph", nodes, edges);
+        // update the function, nodes and edges
+        set({ fn: fn, nodes: nodes, edges: edges });
+    },
+    init: function (fn, engine, options) {
+        // console.log("initing");
+        set({ engine: engine, options: options });
+        get().setFn(fn);
+    },
+}); });
+/**
+ * creates a flow state and provides handlers to update nodes and edges
+ */
 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]);
+    var state = useFlowState();
+    React.useEffect(function () {
+        state.init(fn, engine, options);
+    }, [engine]);
+    React.useEffect(function () {
+        state.setFn(fn);
+    }, [fn]);
+    return React.useMemo(function () { return ({
+        nodes: state.nodes,
+        edges: state.edges,
+        setNodes: state.setNodes,
+        setEdges: state.setEdges,
+    }); }, [state]);
+}
+function createNode(engine, id, fncall, options) {
+    var _a, _b;
+    var calledFn = engine.getFunction(fncall.name);
+    // create a node for each function call
+    return {
+        id: id,
+        data: {
+            name: fncall.name,
+            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: ((_a = options.onDataChange) === null || _a === void 0 ? void 0 : _a.call(options, id)) || (function () { }),
+        },
+        position: ((_b = options.positions) === null || _b === void 0 ? void 0 : _b[id]) || { x: 0, y: 0 },
+        dragHandle: options.dragHandle,
+        type: (calledFn === null || calledFn === void 0 ? void 0 : calledFn.nodeType) || "Default",
+    };
+}
+function createEdge(nodeId, ref) {
+    return {
+        id: "".concat(ref.path, "-").concat(nodeId, ".").concat(ref.name),
+        source: ref.refNode,
+        target: nodeId,
+        sourceHandle: "".concat(ref.refNode, "-").concat(ref.refField),
+        targetHandle: "".concat(nodeId, "-").concat(ref.name),
+    };
 }
 
 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 updatePosition = useUpdatePositions(fn);
+    var _c = __read(usePositions(fn), 1), positions = _c[0];
+    var handleDataChange = function (id) { return function (newData) {
+        onChange === null || onChange === void 0 ? void 0 : onChange(function (fn) {
+            // update the function definition
+            // console.log("before fn call update", Object.keys(fn.body));
+            var body = __assign({}, fn.body);
+            var fncall = __assign(__assign({}, (body[id] || {})), newData);
+            body[id] = fncall;
+            // console.log("after fn call update", Object.keys(body));
+            var updatedFn = __assign(__assign({}, fn), { body: body });
+            return updatedFn;
+        });
+    }; };
+    var _d = 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];
+        positions: positions,
+        onDataChange: handleDataChange,
+    }), nodes = _d.nodes, edges = _d.edges, setNodes = _d.setNodes, setEdges = _d.setEdges;
     // node selection handler
-    var handleChange = React.useCallback(function (_a) {
+    var handleSelect = React.useCallback(function (_a) {
         var nodes = _a.nodes;
         onSelect === null || onSelect === void 0 ? void 0 : onSelect(nodes.map(function (n) { return n.id; }) || []);
     }, [onSelect]);
     react.useOnSelectionChange({
-        onChange: handleChange,
+        onChange: handleSelect,
     });
     // dropping nodes
-    var _f = __read(reactDnd.useDrop({
+    var _e = __read(reactDnd.useDrop({
         accept: "flow-node",
         drop: function (item, monitor) {
             var pos = monitor.getClientOffset();
             if (instance && pos) {
                 var position_1 = instance.screenToFlowPosition(pos);
-                onChange === null || onChange === void 0 ? void 0 : onChange(engine.applyNodeAdd(fn, item.name, function (fnCall, id) {
-                    console.log("node added", id, position_1);
-                    updatePositions(id, position_1);
-                }));
+                // console.log("handle drop", position);
+                onChange === null || onChange === void 0 ? void 0 : onChange(function (fn) {
+                    return engine.applyNodeAdd(fn, item.name, function (fnCall, id) {
+                        // console.log("node added", id, position);
+                        updatePosition(id, position_1);
+                    });
+                });
             }
         },
         collect: function (monitor) {
@@ -1809,19 +1900,8 @@ function FlowInner(_a) {
                 isOver: monitor.isOver(),
             };
         },
-    }), 2); _f[0].isOver; var drop = _f[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]);
+    }), 2); _e[0].isOver; var drop = _e[1];
+    // connecting nodes
     var onConnect = React.useCallback(function (params) {
         var _a, _b;
         var sourceField = (_a = params.sourceHandle) === null || _a === void 0 ? void 0 : _a.split("-")[1];
@@ -1830,37 +1910,34 @@ function FlowInner(_a) {
             console.warn("Invalid connection handles", params);
             return;
         }
-        onChange === null || onChange === void 0 ? void 0 : onChange(engine.applyNodeConnect(fn, params.source, params.target, sourceField, targetField));
-        setEdges(function (edgesSnapshot) { return react.addEdge(params, edgesSnapshot); });
-    }, [setEdges, fn, onChange]);
-    var onNodesDelete = React.useCallback(function (nodesToDelete) {
-        onChange === null || onChange === void 0 ? void 0 : onChange(engine.applyNodeDelete(fn, nodesToDelete.map(function (n) { return n.id; })));
-        setNodes(function (nodesSnapshot) {
-            return nodesSnapshot.filter(function (node) { return !nodesToDelete.some(function (n) { return n.id === node.id; }); });
+        onChange === null || onChange === void 0 ? void 0 : onChange(function (fn) {
+            return engine.applyNodeConnect(fn, params.source, params.target, sourceField, targetField);
         });
-        setEdges(function (edgesSnapshot) {
-            return edgesSnapshot.filter(function (edge) {
-                return !nodesToDelete.some(function (n) { return n.id === edge.source || n.id === edge.target; });
-            });
+    }, [fn, onChange]);
+    // deleting nodes
+    var onNodesDelete = React.useCallback(function (nodesToDelete) {
+        onChange === null || onChange === void 0 ? void 0 : onChange(function (fn) {
+            return engine.applyNodeDelete(fn, nodesToDelete.map(function (n) { return n.id; }));
         });
-    }, [setNodes, setEdges, onChange, fn]);
+    }, [onChange, fn]);
+    // deleting edges
     var onEdgesDelete = React.useCallback(function (edgesToDelete) {
-        var newFn = fn;
-        edgesToDelete.forEach(function (edge) {
-            var _a, _b;
-            var sourceField = (_a = edge.sourceHandle) === null || _a === void 0 ? void 0 : _a.split("-")[1];
-            var targetField = (_b = edge.targetHandle) === null || _b === void 0 ? void 0 : _b.split("-")[1];
-            if (!sourceField || !targetField) {
-                console.warn("Invalid connection handles", edge);
-                return;
-            }
-            newFn = engine.applyEdgeDelete(newFn, edge.source, edge.target, sourceField, targetField);
-        });
-        onChange === null || onChange === void 0 ? void 0 : onChange(newFn);
-        setEdges(function (edgesSnapshot) {
-            return edgesSnapshot.filter(function (edge) { return !edgesToDelete.some(function (e) { return e.id === edge.id; }); });
+        onChange === null || onChange === void 0 ? void 0 : onChange(function (fn) {
+            var newFn = fn;
+            edgesToDelete.forEach(function (edge) {
+                var _a, _b;
+                var sourceField = (_a = edge.sourceHandle) === null || _a === void 0 ? void 0 : _a.split("-")[1];
+                var targetField = (_b = edge.targetHandle) === null || _b === void 0 ? void 0 : _b.split("-")[1];
+                if (!sourceField || !targetField) {
+                    console.warn("Invalid connection handles", edge);
+                    return;
+                }
+                newFn = engine.applyEdgeDelete(newFn, edge.source, edge.target, sourceField, targetField);
+            });
+            return newFn;
         });
-    }, [setEdges, onChange, fn]);
+    }, [onChange, fn]);
+    // handle canvas clicks to be able to place nodes
     var handleClick = function (e) {
         if (instance) {
             var position = instance.screenToFlowPosition({
@@ -1870,6 +1947,16 @@ function FlowInner(_a) {
             onClick === null || onClick === void 0 ? void 0 : onClick(e, position);
         }
     };
+    var onNodesChange = React.useCallback(function (changes) {
+        return setNodes(function (nodesSnapshot) {
+            return react.applyNodeChanges(changes, nodesSnapshot);
+        });
+    }, []);
+    var onEdgesChange = React.useCallback(function (changes) {
+        return setEdges(function (edgesSnapshot) {
+            return react.applyEdgeChanges(changes, edgesSnapshot);
+        });
+    }, []);
     return (React.createElement(react.ReactFlow, { ref: drop, nodes: nodes, edges: edges, nodeTypes: nodeTypes, onNodesChange: onNodesChange, onEdgesChange: onEdgesChange, onNodesDelete: onNodesDelete, onEdgesDelete: onEdgesDelete, onNodeDragStop: function (e, n) { return updatePosition(n.id, n.position); }, onConnect: onConnect, onInit: setInstance, onPaneClick: handleClick, fitView: true, 
         // panOnDrag={false}
         selectionOnDrag: true, minZoom: 0.1, deleteKeyCode: "Delete" },
@@ -1879,9 +1966,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) {
@@ -1940,7 +2026,6 @@ exports.Flow = Flow;
 exports.binaryOnTree = binaryOnTree;
 exports.binaryOnTreeBranch = binaryOnTreeBranch;
 exports.broadCast = broadCast;
-exports.createGraph = createGraph;
 exports.expandTree = expandTree;
 exports.getBranch = getBranch;
 exports.getReferences = getReferences;