@rkmodules/rules 0.0.70 → 0.0.72

package/dist/index.esm.js

@@ -1,9 +1,10 @@
 import { create, all } from 'mathjs';
 import React, { createContext, memo, useEffect, useLayoutEffect, useState, useCallback, useMemo, isValidElement, cloneElement, useContext } from 'react';
-import { Handle, Position, useConnection, getSimpleBezierPath, ReactFlowProvider, useOnSelectionChange, applyNodeChanges, applyEdgeChanges, ReactFlow, Background, BackgroundVariant, Controls } from '@xyflow/react';
+import { Handle, Position, useReactFlow, useConnection, getSimpleBezierPath, ReactFlowProvider, useOnSelectionChange, applyNodeChanges, applyEdgeChanges, ReactFlow, Background, BackgroundVariant, Controls } from '@xyflow/react';
 import katex from 'katex';
 import classNames from 'classnames';
 import rcin from 'rc-input-number';
+import { useLongPress } from 'use-long-press';
 import { create as create$1 } from 'zustand';
 import { persist } from 'zustand/middleware';
 import { jsx } from 'react/jsx-runtime';
@@ -1544,8 +1545,36 @@ var primitives$1 = (_a$1 = {},
     _a$1[groupOr.name] = groupOr,
     _a$1);
 
+var output = {
+    name: "output",
+    label: "Output",
+    description: "Data output.",
+    nodeType: "Output",
+    inputs: {},
+    outputs: {},
+    impl: function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            return [2 /*return*/, {}];
+        });
+    }); },
+};
+
+var inputs = {
+    name: "inputs",
+    label: "Input",
+    description: "Data input.",
+    nodeType: "Input",
+    inputs: {},
+    outputs: {},
+    impl: function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            return [2 /*return*/, {}];
+        });
+    }); },
+};
+
 var Lib = { Util: primitives$6, Math: primitives$5, List: primitives$4, Sequence: primitives$3, Tree: primitives$2, Logic: primitives$1 };
-var primitives = __assign(__assign(__assign(__assign(__assign(__assign({}, primitives$6), primitives$5), primitives$4), primitives$3), primitives$2), primitives$1);
+var primitives = __assign(__assign(__assign(__assign(__assign(__assign({ inputs: inputs, output: output }, primitives$6), primitives$5), primitives$4), primitives$3), primitives$2), primitives$1);
 
 function isPrimitive(node) {
     return node.impl !== undefined;
@@ -1644,6 +1673,14 @@ var Engine = /** @class */ (function () {
                     case 0:
                         _a = node.body, body = _a === void 0 ? {} : _a;
                         executionId = uid$1();
+                        // add input defaults
+                        Object.entries(node.inputs || {}).forEach(function (_a) {
+                            var _b = __read(_a, 2), name = _b[0], def = _b[1];
+                            var normDef = normalizeVarDef(def);
+                            if (!inputs[name] && normDef.default !== undefined) {
+                                inputs[name] = normDef.default;
+                            }
+                        });
                         context = {
                             scope: { inputs: inputs },
                             timings: {},
@@ -1859,6 +1896,13 @@ var Engine = /** @class */ (function () {
     // node handlers
     Engine.prototype.applyNodeDelete = function (oldFn, nodeIds) {
         var newFn = __assign(__assign({}, oldFn), { body: __assign({}, oldFn.body) });
+        if (nodeIds.every(function (id) { return id === "output"; })) {
+            // cannot delete output node
+            return oldFn;
+        }
+        if (nodeIds.includes("inputs")) {
+            delete newFn.inputs;
+        }
         nodeIds.forEach(function (id) {
             delete newFn.body[id];
         });
@@ -1882,10 +1926,13 @@ var Engine = /** @class */ (function () {
     Engine.prototype.applyEdgeDelete = function (oldFn, fromNode, toNode, fromField, toField) {
         var _a;
         var newFn = __assign(__assign({}, oldFn), { body: __assign({}, oldFn.body) });
-        var from = newFn.body[fromNode];
+        if (toNode === "output") {
+            // no deleting of output edges
+            return oldFn;
+        }
         var to = newFn.body[toNode];
         var fn = this.fnIndex[to === null || to === void 0 ? void 0 : to.name];
-        if (!from || !to) {
+        if (!to) {
             console.warn("Invalid nodes for edge deletion");
             return newFn;
         }
@@ -1906,6 +1953,11 @@ var Engine = /** @class */ (function () {
     };
     Engine.prototype.applyNodeAdd = function (oldFn, nodeName, callback) {
         var newFn = __assign(__assign({}, oldFn), { body: __assign({}, oldFn.body) });
+        if (nodeName === "inputs") {
+            // ensure inputs node
+            newFn.inputs = newFn.inputs || {};
+            return newFn;
+        }
         var id = uid$1();
         // ensure unique id
         while (newFn.body[id]) {
@@ -1939,10 +1991,16 @@ var Engine = /** @class */ (function () {
         return topSort(newFn);
     };
     Engine.prototype.applyNodeConnect = function (oldFn, fromNode, toNode, fromField, toField) {
+        var _a;
         var newFn = __assign(__assign({}, oldFn), { body: __assign({}, oldFn.body) });
-        var from = newFn.body[fromNode];
+        if (toNode === "output") {
+            newFn.outputs = __assign(__assign({}, oldFn.outputs), (_a = {}, _a[toField] = "<".concat(fromNode, ".").concat(fromField, ">"), _a));
+            // no need to sort, as only output has changed
+            return newFn;
+        }
+        // const from = newFn.body[fromNode];
         var to = __assign({}, newFn.body[toNode]);
-        if (!from || !to) {
+        if (!to) {
             console.warn("Invalid nodes for connection");
             return newFn;
         }
@@ -4724,6 +4782,7 @@ function useRegisteredDropTarget(spec, monitor, connector) {
 
 var dummyEngine = new Engine();
 var FlowContext = React.createContext({
+    graphedFn: {},
     engine: dummyEngine,
 });
 var useEngine = function () {
@@ -4733,6 +4792,9 @@ var empty = {};
 var useControls = function () {
     return React.useContext(FlowContext).controls || empty;
 };
+var useGraphedFunction = function () {
+    return React.useContext(FlowContext).graphedFn;
+};
 
 var _a;
 // normalizing import
@@ -4767,7 +4829,7 @@ function Control(_a) {
     }
 }
 
-var styles$1 = {"Port":"Port_XWl7K","required":"required_ofB6J","Icon":"Icon_YJDC5","Input":"Input_PHp3D","Output":"Output_FMRNv","ConnectionPath":"ConnectionPath_XkXr1","valid":"valid_LGNvc","Edge":"Edge_aNtpH","Hover":"Hover_1v8QT"};
+var styles$1 = {"Port":"Port_XWl7K","required":"required_ofB6J","Icon":"Icon_YJDC5","PortLabel":"PortLabel_wwLN0","Input":"Input_PHp3D","Output":"Output_FMRNv","ConnectionPath":"ConnectionPath_XkXr1","valid":"valid_LGNvc","Edge":"Edge_aNtpH","Hover":"Hover_1v8QT","Menu":"Menu_cusza","MenuCanvas":"MenuCanvas_3M2Ek","MenuItem":"MenuItem_UWLzD"};
 
 var Input = function (_a) {
     var _b;
@@ -4784,7 +4846,7 @@ var Input = function (_a) {
     return (React.createElement(Handle, { type: "target", position: Position.Left, id: "".concat(id, "-").concat(name), className: classNames(styles$1.Input, styles$1.Port, styles$1["type-".concat(normalized.type)]), style: {
             "--type-color": "var(--color-".concat(normalized.type, ")"),
         }, onClick: onClick },
-        normalized.label || name,
+        React.createElement("span", { className: styles$1.PortLabel }, normalized.label || name),
         !isRef && (React.createElement(Control, { vardef: normalized, value: value, onChange: handleInputChange(name) }))));
 };
 
@@ -4800,10 +4862,10 @@ var Param = function (_a) {
             params: __assign(__assign({}, data.params), (_a = {}, _a[param] = value, _a)),
         });
     }; };
-    return (React.createElement("div", { className: classNames(styles$1.Input, styles$1.Port, styles$1["type-".concat(normalized.type)]), style: {
+    return (React.createElement("div", { className: classNames(styles$1.Param, styles$1.Port, styles$1["type-".concat(normalized.type)]), style: {
             "--type-color": "var(--color-".concat(normalized.type, ")"),
         }, onClick: onClick },
-        React.createElement("span", null, normalized.label || name),
+        React.createElement("span", { className: styles$1.PortLabel }, normalized.label || name),
         !isRef && (React.createElement(Control, { vardef: normalized, value: value, onChange: handleParamChange(name) }))));
 };
 
@@ -4813,18 +4875,25 @@ var Output = function (_a) {
     return (React.createElement(Handle, { type: "source", position: Position.Right, id: "".concat(id, "-").concat(name), className: classNames(styles$1.Output, styles$1.Port, styles$1["type-".concat(normalized.type)]), style: {
             "--type-color": "var(--color-".concat(normalized.type, ")"),
         }, onClick: onClick },
-        React.createElement("span", null,
+        React.createElement("span", { className: styles$1.PortLabel },
             focus && "👁 ",
             normalized.label || name)));
 };
 
-var styles = {"DefaultNode":"DefaultNode_R2P6c","selected":"selected_VmB-F","active":"active_zjUzx","Log":"Log_dsq5e","Label":"Label_wBwWA","Description":"Description_f9s4l","PreviewHead":"PreviewHead_oFT4K","expanded":"expanded_3vnbi","Preview":"Preview_HbkZ6","Duration":"Duration_0jqWx","GroupHead":"GroupHead_QJhST","GroupName":"GroupName_Qvu4r","GroupCnt":"GroupCnt_3ctdd","GroupMore":"GroupMore_D1Kiz","GroupChildren":"GroupChildren_NKx-B","GroupLeaf":"GroupLeaf_eliT8"};
+var styles = {"NodeContainer":"NodeContainer_gSdHY","selected":"selected_VmB-F","active":"active_zjUzx","Log":"Log_dsq5e","Label":"Label_wBwWA","Description":"Description_f9s4l","Body":"Body_ptEZP","PreviewHead":"PreviewHead_oFT4K","expanded":"expanded_3vnbi","Preview":"Preview_HbkZ6","Duration":"Duration_0jqWx","GroupHead":"GroupHead_QJhST","GroupName":"GroupName_Qvu4r","GroupCnt":"GroupCnt_3ctdd","GroupMore":"GroupMore_D1Kiz","GroupChildren":"GroupChildren_NKx-B","GroupLeaf":"GroupLeaf_eliT8"};
 
 function NodeContainer(_a) {
     var _b;
-    var id = _a.id, label = _a.label, className = _a.className, selected = _a.selected, children = _a.children;
+    var id = _a.id, label = _a.label, className = _a.className, selected = _a.selected, children = _a.children, noDelete = _a.noDelete;
     var engine = useEngine();
     var _c = __read(React.useState(false), 2), active = _c[0], setActive = _c[1];
+    var _d = __read(React.useState(false), 2), deleteMode = _d[0], setDeleteMode = _d[1];
+    var instance = useReactFlow();
+    React.useEffect(function () {
+        if (!selected) {
+            setDeleteMode(false);
+        }
+    }, [selected]);
     React.useEffect(function () {
         if (!id)
             return;
@@ -4845,11 +4914,22 @@ function NodeContainer(_a) {
             removeOnResult();
         };
     }, [id]);
-    return (React.createElement("div", { className: classNames(className, styles.DefaultNode, (_b = {},
+    var handlers = useLongPress(function () {
+        if (!noDelete) {
+            setDeleteMode(true);
+        }
+    });
+    var handleDelete = function () {
+        instance.deleteElements({ nodes: [{ id: id }] });
+    };
+    return (React.createElement("div", { className: classNames(className, styles.NodeContainer, (_b = {},
             _b[styles.selected] = selected,
             _b[styles.active] = active,
             _b)) },
-        React.createElement("div", { className: styles.Label }, label),
+        React.createElement("div", __assign({ className: styles.Label }, handlers()),
+            React.createElement("span", null),
+            label,
+            React.createElement("span", null, deleteMode && (React.createElement("button", { className: styles.DeleteButton, onClick: handleDelete }, "\u2715")))),
         children));
 }
 
@@ -5025,6 +5105,118 @@ var Default = React.memo(function (_a) {
 });
 Default.displayName = "DefaultNode";
 
+function Menu(_a) {
+    var handle = _a.handle, children = _a.children;
+    var _b = __read(React.useState(false), 2), open = _b[0], setOpen = _b[1];
+    var handleOpen = function () {
+        setOpen(!open);
+    };
+    var handleClose = function () {
+        setOpen(false);
+    };
+    return (React.createElement("div", { className: styles$1.Menu },
+        React.createElement("div", { onClick: handleOpen }, handle),
+        open && (React.createElement("div", { className: styles$1.MenuCanvas, onClick: handleClose }, children))));
+}
+function MenuItem(_a) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    return (React.createElement("div", __assign({ className: styles$1.MenuItem }, props), children));
+}
+
+/**
+ * todo: get input data from graphed function
+ */
+var InputNode = React.memo(function (_a) {
+    var id = _a.id, data = _a.data, selected = _a.selected;
+    var fn = useGraphedFunction();
+    var outputs = Object.fromEntries(Object.keys(fn.inputs || {}).map(function (name) { return [
+        name,
+        normalizeVarDef(fn.inputs[name]),
+    ]; }));
+    var onRename = function (id, oldLabel) {
+        var _a;
+        var label = prompt("Enter new name", oldLabel);
+        if (label !== null && label !== oldLabel) {
+            (_a = data.onIOChange) === null || _a === void 0 ? void 0 : _a.call(data, function (fn) {
+                var inputs = __assign({}, fn.inputs);
+                var n = normalizeVarDef(inputs[id]);
+                inputs[id] = __assign(__assign({}, n), { label: label });
+                return { inputs: inputs };
+            });
+        }
+    };
+    var onAdd = function () {
+        var _a;
+        var label = prompt("Enter new name");
+        if (label !== null) {
+            (_a = data.onIOChange) === null || _a === void 0 ? void 0 : _a.call(data, function (fn) {
+                var inputs = __assign({}, fn.inputs);
+                inputs[uid$1()] = { type: "any", label: label };
+                return { inputs: inputs };
+            });
+        }
+    };
+    var onDelete = function (name) {
+        var _a;
+        (_a = data.onIOChange) === null || _a === void 0 ? void 0 : _a.call(data, function (fn) {
+            var inputs = __assign({}, fn.inputs);
+            delete inputs[name];
+            return { inputs: inputs };
+        });
+    };
+    var onDefault = function (id) {
+        var _a, _b;
+        var value = prompt("Enter default value");
+        if (value !== null && ((_a = fn.inputs) === null || _a === void 0 ? void 0 : _a[id])) {
+            var n_1 = normalizeVarDef(fn.inputs[id]);
+            if (n_1.type === "number") {
+                value = Number(value);
+            }
+            else if (n_1.type === "boolean") {
+                value = value.toLowerCase() === "true";
+            }
+            (_b = data.onIOChange) === null || _b === void 0 ? void 0 : _b.call(data, function (fn) {
+                var inputs = __assign({}, fn.inputs);
+                inputs[id] = __assign(__assign({}, n_1), { default: value });
+                return { inputs: inputs };
+            });
+        }
+    };
+    var onType = function (id) {
+        var _a, _b;
+        var type = prompt("Enter type");
+        if (type !== null && ((_a = fn.inputs) === null || _a === void 0 ? void 0 : _a[id])) {
+            var n_2 = normalizeVarDef(fn.inputs[id]);
+            (_b = data.onIOChange) === null || _b === void 0 ? void 0 : _b.call(data, function (fn) {
+                var inputs = __assign({}, fn.inputs);
+                inputs[id] = __assign(__assign({}, n_2), { type: type });
+                return { inputs: inputs };
+            });
+        }
+    };
+    return (React.createElement(NodeContainer, { label: data.label, selected: selected, id: id, noDelete: true },
+        React.createElement("div", { className: styles.Description }, data.description),
+        React.createElement("div", { className: styles.Ports },
+            Object.entries(outputs || {}).map(function (_a) {
+                var _b = __read(_a, 2), name = _b[0], normalized = _b[1];
+                return (React.createElement(Handle, { key: name, type: "source", position: Position.Right, id: "".concat(id, "-").concat(name), className: classNames(styles$1.Output, styles$1.Port, styles$1["type-".concat(normalized.type)]), style: {
+                        "--type-color": "var(--color-".concat(normalized.type, ")"),
+                    } },
+                    React.createElement(Menu, { handle: React.createElement("button", null, "...") },
+                        React.createElement(MenuItem, { onClick: function () {
+                                return onRename(name, normalized.label || name);
+                            } }, "Rename"),
+                        React.createElement(MenuItem, { onClick: function () { return onDelete(name); } }, "Delete"),
+                        React.createElement(MenuItem, { onClick: function () { return onDefault(name); } }, "Set Default"),
+                        React.createElement(MenuItem, { onClick: function () { return onType(name); } }, "Set Type")),
+                    React.createElement("span", { style: { flex: 1 } }),
+                    React.createElement("span", { className: styles$1.PortLabel }, normalized.label || name)));
+            }),
+            React.createElement("div", { className: styles.Body },
+                React.createElement("button", { onClick: function () { return onAdd(); } }, "+")))));
+});
+InputNode.displayName = "InputNode";
+
 function uid() {
     return Math.random().toString(36).substring(2, 15);
 }
@@ -5037,7 +5229,8 @@ var Merge = React.memo(function (_a) {
     var inputCount = Object.keys(inputs).length;
     inputs[uid()] = { type: "any", label: "D".concat(inputCount + 1) };
     var outputs = __assign({}, (data.outputDefs || {}));
-    return (React.createElement(NodeContainer, { label: data.name, selected: selected, id: id },
+    return (React.createElement(NodeContainer, { label: data.label, selected: selected, id: id },
+        React.createElement("div", { className: styles.Description }, data.description),
         React.createElement("div", { className: styles.Ports },
             Object.entries(outputs || {}).map(function (_a) {
                 var _b = __read(_a, 2), name = _b[0], varDef = _b[1];
@@ -5050,11 +5243,93 @@ var Merge = React.memo(function (_a) {
 });
 Merge.displayName = "MergeNode";
 
+/**
+ * todo: create a factory for output component
+ * - allow to pass prompt handler (async)
+ * - allow to pass custom UI for renaming/adding/deleting
+ *
+ * - create input node
+ */
+var OutputNode = React.memo(function (_a) {
+    var id = _a.id, data = _a.data, selected = _a.selected;
+    var engine = useEngine();
+    var fn = useGraphedFunction();
+    var inputs = Object.fromEntries(Object.entries(data.inputs || {}).map(function (_a, i) {
+        var _b, _c;
+        var _d = __read(_a, 2), name = _d[0], ref = _d[1];
+        var type = "any";
+        if (isReference(ref)) {
+            var _e = __read(parseReference(ref).split("."), 2), fnId = _e[0], outputName = _e[1];
+            var fnName = (_b = fn.body[fnId]) === null || _b === void 0 ? void 0 : _b.name;
+            if (fnName) {
+                var calledFn = engine.getFunction(fnName);
+                var outputDef = (_c = calledFn === null || calledFn === void 0 ? void 0 : calledFn.outputs) === null || _c === void 0 ? void 0 : _c[outputName];
+                if (outputDef) {
+                    var n = normalizeVarDef(outputDef);
+                    if (n === null || n === void 0 ? void 0 : n.type) {
+                        type = n.type;
+                    }
+                }
+            }
+        }
+        return [name, { type: type, label: name }];
+    }));
+    var onRename = function (oldName) {
+        var _a;
+        var newName = prompt("Enter new name", oldName);
+        if (newName !== null && newName !== oldName) {
+            (_a = data.onIOChange) === null || _a === void 0 ? void 0 : _a.call(data, function (fn) {
+                var outputs = __assign({}, fn.outputs);
+                outputs[newName] = outputs[oldName];
+                delete outputs[oldName];
+                return { outputs: outputs };
+            });
+        }
+    };
+    var onAdd = function () {
+        var _a;
+        var newName = prompt("Enter new name");
+        if (newName !== null) {
+            (_a = data.onIOChange) === null || _a === void 0 ? void 0 : _a.call(data, function (fn) {
+                var outputs = __assign({}, fn.outputs);
+                outputs[newName] = "";
+                return { outputs: outputs };
+            });
+        }
+    };
+    var onDelete = function (name) {
+        var _a;
+        (_a = data.onIOChange) === null || _a === void 0 ? void 0 : _a.call(data, function (fn) {
+            var outputs = __assign({}, fn.outputs);
+            delete outputs[name];
+            return { outputs: outputs };
+        });
+    };
+    return (React.createElement(NodeContainer, { label: data.label, selected: selected, id: id, noDelete: true },
+        React.createElement("div", { className: styles.Description }, data.description),
+        React.createElement("div", { className: styles.Ports }, Object.entries(inputs || {}).map(function (_a) {
+            var _b = __read(_a, 2), name = _b[0], varDef = _b[1];
+            return (React.createElement(Handle, { key: name, type: "target", position: Position.Left, id: "".concat(id, "-").concat(name), className: classNames(styles$1.Input, styles$1.Port, styles$1["type-".concat(varDef.type)]), style: {
+                    "--type-color": "var(--color-".concat(varDef.type, ")"),
+                } },
+                React.createElement("span", { className: styles$1.PortLabel }, name),
+                React.createElement("span", { style: { flex: 1 } }),
+                React.createElement(Menu, { handle: React.createElement("button", null, "...") },
+                    React.createElement(MenuItem, { onClick: function () { return onRename(name); } }, "Rename"),
+                    React.createElement(MenuItem, { onClick: function () { return onDelete(name); } }, "Delete"))));
+        })),
+        React.createElement("div", { className: styles.Body },
+            React.createElement("button", { onClick: function () { return onAdd(); } }, "+"))));
+});
+OutputNode.displayName = "OutputNode";
+
 var nodeTypes = {
     Default: Default,
     Calc: Calc,
     Log: Log,
     Merge: Merge,
+    Input: InputNode,
+    Output: OutputNode,
 };
 
 var variableStore = create$1(function (set, get, api) {
@@ -5129,6 +5404,38 @@ function useUpdatePositions(fn) {
 function updateNodeArguments(node, inputs, params) {
     return __assign(__assign({}, node), { data: __assign(__assign({}, node.data), { inputs: inputs, params: params }) });
 }
+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,
+            label: fncall.label || (calledFn === null || calledFn === void 0 ? void 0 : calledFn.label) || fncall.name,
+            description: calledFn === null || calledFn === void 0 ? void 0 : calledFn.description,
+            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 () { }),
+            onIOChange: options.onIOChange || (function (fn) { return fn; }),
+        },
+        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),
+    };
+}
 /**
  * flow state stores nodes and edges for the flow graph these can be updated when the function changes
  * using setFn
@@ -5137,17 +5444,22 @@ var useFlowState = create$1(function (set, get) { return ({
     engine: null,
     fn: null,
     options: {},
-    nodes: [],
+    nodes: {},
     edges: [],
     setNodes: function (updater) {
-        set(function (state) { return ({ nodes: updater(state.nodes) }); });
+        set(function (state) {
+            var currentNodes = Object.values(state.nodes);
+            var newNodes = updater(currentNodes);
+            var nodes = Object.fromEntries(newNodes.map(function (n) { return [n.id, n]; }));
+            return { nodes: nodes };
+        });
     },
     setEdges: function (updater) {
         set(function (state) { return ({ edges: updater(state.edges) }); });
     },
-    setFn: function (fn) {
+    setFn: function (fn, options) {
         // console.log("setFn", fn);
-        var _a = get(), oldFn = _a.fn, nodes = _a.nodes, edges = _a.edges, engine = _a.engine, options = _a.options;
+        var _a = get(), oldFn = _a.fn, nodes = _a.nodes, edges = _a.edges, engine = _a.engine;
         // update the graph by shallow comparison
         if (!engine) {
             throw new Error("Engine not set");
@@ -5155,18 +5467,51 @@ var useFlowState = create$1(function (set, get) { return ({
         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); });
+        Object.keys(nodes).forEach(function (key) {
+            if (!newKeys.includes(key)) {
+                delete nodes[key];
+            }
+        });
         // 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));
+            return ((newKeys.includes(edge.source) || edge.source === "inputs") &&
+                newKeys.includes(edge.target));
         });
+        // make sure there is an output node if outputs are defined
+        if (fn.outputs && !nodes["output"]) {
+            var key_1 = "output";
+            var fncall = {
+                name: "output",
+                inputs: fn.outputs || {},
+                params: {},
+            };
+            var newNode = createNode(engine, key_1, fncall, options);
+            nodes[key_1] = newNode;
+            // add edges
+            var refs = getReferences(fncall.inputs || {});
+            refs.forEach(function (ref) {
+                edges.push(createEdge(key_1, ref));
+            });
+        }
+        // make sure there is an input node if inputs are defined
+        if (fn.inputs && !nodes["inputs"]) {
+            var key = "inputs";
+            var fncall = {
+                name: "inputs",
+                inputs: {},
+                params: {},
+            };
+            var newNode = createNode(engine, key, fncall, options);
+            nodes[key] = newNode;
+        }
         // 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));
+            var newNode = createNode(engine, key, fncall, options);
+            nodes[newNode.id] = newNode;
             // add edges
             var refs = getReferences(fncall.inputs || {});
             refs.forEach(function (ref) {
@@ -5184,12 +5529,8 @@ var useFlowState = create$1(function (set, get) { return ({
             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;
-            });
+            var node = nodes[key];
+            nodes[key] = updateNodeArguments(node, fncall.inputs, fncall.params);
             // update incoming edges
             var refs = getReferences(fncall.inputs || {});
             // remove all incoming edges
@@ -5206,7 +5547,7 @@ var useFlowState = create$1(function (set, get) { return ({
     init: function (fn, engine, options) {
         // console.log("initing");
         set({ engine: engine, options: options });
-        get().setFn(fn);
+        get().setFn(fn, options);
     },
 }); });
 /**
@@ -5218,46 +5559,15 @@ function useFlow(fn, engine, options) {
         state.init(fn, engine, options);
     }, [engine]);
     React.useEffect(function () {
-        state.setFn(fn);
-    }, [fn]);
+        state.setFn(fn, options);
+    }, [fn, options]);
     return React.useMemo(function () { return ({
-        nodes: state.nodes,
+        nodes: Object.values(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,
-            label: fncall.label || (calledFn === null || calledFn === void 0 ? void 0 : calledFn.label) || fncall.name,
-            description: calledFn === null || calledFn === void 0 ? void 0 : calledFn.description,
-            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),
-    };
-}
 
 var ConnectionLine = (function (_a) {
     var _b;
@@ -5289,27 +5599,37 @@ var ConnectionLine = (function (_a) {
 });
 
 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 fn = _a.function, engine = _a.engine, _b = _a.center, center = _b === void 0 ? true : _b, fitView = _a.fitView, onChange = _a.onChange, onClick = _a.onClick, onSelect = _a.onSelect;
+    var _c = __read(React.useState(null), 2), instance = _c[0], setInstance = _c[1];
     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),
-        positions: positions,
-        onDataChange: handleDataChange,
-    }), nodes = _d.nodes, edges = _d.edges, setNodes = _d.setNodes, setEdges = _d.setEdges;
+    var _d = __read(usePositions(fn), 1), positions = _d[0];
+    var options = React.useMemo(function () {
+        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 handleIOChange = function (callback) {
+            var changes = callback(fn);
+            onChange === null || onChange === void 0 ? void 0 : onChange(function (oldFn) {
+                return __assign(__assign({}, oldFn), changes);
+            });
+        };
+        return {
+            dragHandle: ".".concat(styles.Label),
+            positions: positions,
+            onDataChange: handleDataChange,
+            onIOChange: handleIOChange,
+        };
+    }, [fn, onChange]);
+    var _e = useFlow(fn, engine, options), nodes = _e.nodes, edges = _e.edges, setNodes = _e.setNodes, setEdges = _e.setEdges;
     // node selection handler
     var handleSelect = React.useCallback(function (_a) {
         var nodes = _a.nodes;
@@ -5319,7 +5639,7 @@ function FlowInner(_a) {
         onChange: handleSelect,
     });
     // dropping nodes
-    var _e = __read(useDrop({
+    var _f = __read(useDrop({
         accept: "flow-node",
         drop: function (item, monitor) {
             var pos = monitor.getClientOffset();
@@ -5339,7 +5659,7 @@ function FlowInner(_a) {
                 isOver: monitor.isOver(),
             };
         },
-    }), 2); _e[0].isOver; var drop = _e[1];
+    }), 2); _f[0].isOver; var drop = _f[1];
     // connecting nodes
     var onConnect = React.useCallback(function (params) {
         var _a, _b;
@@ -5387,27 +5707,43 @@ function FlowInner(_a) {
         }
     };
     var onNodesChange = React.useCallback(function (changes) {
+        changes = changes.filter(function (change) {
+            if (change.id === "output" && change.type === "remove")
+                return false;
+            return true;
+        });
         return setNodes(function (nodesSnapshot) {
             return applyNodeChanges(changes, nodesSnapshot);
         });
     }, []);
     var onEdgesChange = React.useCallback(function (changes) {
+        changes = changes.filter(function (change) {
+            if (change.id.includes("-output.") && change.type === "remove")
+                return false;
+            return true;
+        });
         return setEdges(function (edgesSnapshot) {
             return applyEdgeChanges(changes, edgesSnapshot);
         });
     }, []);
-    return (React.createElement(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, 
+    return (React.createElement(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: center || fitView, fitViewOptions: {
+            minZoom: fitView ? undefined : 1,
+            maxZoom: fitView ? undefined : 1,
+        }, 
         // panOnDrag={false}
         selectionOnDrag: true, minZoom: 0.1, maxZoom: 4, deleteKeyCode: "Delete", connectionLineComponent: ConnectionLine },
         React.createElement(Background, { variant: BackgroundVariant.Dots }),
         React.createElement(Controls, null)));
 }
-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, customControls = _a.customControls;
-    var contextValue = React.useMemo(function () { return ({ engine: engine, controls: customControls }); }, [engine, customControls]);
+function Flow(props) {
+    var contextValue = React.useMemo(function () { return ({
+        engine: props.engine,
+        controls: props.customControls,
+        graphedFn: props.function,
+    }); }, [props.engine, props.customControls, props.function]);
     return (React.createElement(FlowContext.Provider, { value: contextValue },
         React.createElement(ReactFlowProvider, null,
-            React.createElement(FlowInner, { function: fn, engine: engine, onChange: onChange, onClick: onClick, onSelect: onSelect }))));
+            React.createElement(FlowInner, __assign({}, props)))));
 }
 
 function useDraggableNode(name, fn) {