@rkmodules/rules 0.0.30 → 0.0.32

package/dist/index.css

@@ -1,3 +1,83 @@
+/** port */
+.Port_XWl7K,
+.Port_XWl7K.react-flow__handle {
+    position: relative;
+    border: 1px solid red;
+    border: initial;
+    width:auto;
+    border-radius: 0;
+    height: initial;
+    transform: initial;
+    left: initial;
+    right: initial;
+    background: initial;
+    padding: 2px 8px;
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    min-height: 22px;
+}
+.Port_XWl7K.required_ofB6J {
+    font-weight: bold;
+}
+
+.Port_XWl7K.react-flow__handle-right {
+    text-align: right;
+}
+
+.Port_XWl7K.react-flow__handle::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    border: 1px solid white;
+    background-color: var(--type-color, black);
+}
+
+.Port_XWl7K.react-flow__handle-left::after,
+.Port_XWl7K.react-flow__handle-left .Icon_YJDC5 {
+    left: -1px;
+    transform: translate(-50%, -50%);
+}
+
+.Port_XWl7K.react-flow__handle-right::after,
+.Port_XWl7K.react-flow__handle-right .Icon_YJDC5 {
+    right: -1px;
+    transform: translate(50%, -50%);
+}
+
+.Input_PHp3D {
+    color: var(--type-color);
+    --xy-handle-background-color: var(--type-color);
+}
+
+.Output_FMRNv {
+    text-align: right;
+    color: var(--type-color);
+    --xy-handle-background-color: var(--type-color);
+    justify-content: right;
+}
+
+
+/** edges */
+
+.ConnectionPath_XkXr1.valid_LGNvc {
+    --xy-edge-stroke: var(--connection-color, #333);
+    --xy-edge-stroke-width: 2;
+    stroke: var(--connection-color, #333);
+    stroke-width: 2;
+}
+
+.react-flow__edge.selected .Edge_aNtpH .react-flow__edge-path,
+.react-flow__edge .Edge_aNtpH.Hover_1v8QT .react-flow__edge-path {
+    --xy-edge-stroke: var(--connection-color, #333);
+    --xy-edge-stroke-width: 2;
+    stroke: var(--connection-color, #333);
+    stroke-width: 2;
+}
+
 .DefaultNode_R2P6c {
     --ln: var(--node-line);
     --bg: var(--node-background);
@@ -60,15 +140,8 @@
     max-width: 200px;
 }
 
-.Input_Yhvzf {
-    color: var(--type-color);
-    --xy-handle-background-color: var(--type-color);
-}
-.Output_e4yF- {
-    text-align: right;
-    color: var(--type-color);
-    --xy-handle-background-color: var(--type-color);
-}
+
+
 
 
 .PreviewHead_oFT4K {

package/dist/index.js

@@ -946,9 +946,9 @@ var series = {
     label: "Series",
     description: "Create a series of numbers.",
     inputs: {
-        start: "number",
-        step: "number",
-        count: "number",
+        start: { type: "number", default: 1 },
+        step: { type: "number", default: 1 },
+        count: { type: "number", default: 10 },
     },
     outputs: {
         series: "number",
@@ -1483,7 +1483,7 @@ function Control(_a) {
     }
 }
 
-var styles = {"DefaultNode":"DefaultNode_R2P6c","selected":"selected_VmB-F","active":"active_zjUzx","Log":"Log_dsq5e","Label":"Label_wBwWA","Description":"Description_f9s4l","Input":"Input_Yhvzf","Output":"Output_e4yF-","PreviewHead":"PreviewHead_oFT4K","expanded":"expanded_3vnbi","Preview":"Preview_HbkZ6","Duration":"Duration_0jqWx","Table":"Table_aZyRT","GroupHead":"GroupHead_QJhST","GroupChildren":"GroupChildren_NKx-B","GroupLeaf":"GroupLeaf_eliT8"};
+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 Input = function (_a) {
     var _b;
@@ -1497,13 +1497,11 @@ var Input = function (_a) {
             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: {
+    return (React.createElement(react.Handle, { type: "target", position: react.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 },
-        React.createElement("td", null,
-            normalized.label || name,
-            React.createElement(react.Handle, { type: "target", position: react.Position.Left, id: "".concat(id, "-").concat(name) })),
-        React.createElement("td", null, !isRef && (React.createElement(Control, { type: normalized.type, value: value, onChange: handleInputChange(name) })))));
+        normalized.label || name,
+        !isRef && (React.createElement(Control, { type: normalized.type, value: value, onChange: handleInputChange(name) }))));
 };
 
 var Param = function (_a) {
@@ -1518,23 +1516,22 @@ var Param = function (_a) {
             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: {
+    return (React.createElement("div", { className: classNames(styles$1.Input, styles$1.Port, styles$1["type-".concat(normalized.type)]), style: {
             "--type-color": "var(--color-".concat(normalized.type, ")"),
         }, onClick: onClick },
-        React.createElement("td", null, normalized.label || name),
-        React.createElement("td", null, !isRef && (React.createElement(Control, { type: normalized.type, options: normalized.options, value: value, onChange: handleParamChange(name) })))));
+        React.createElement("span", null, normalized.label || name),
+        !isRef && (React.createElement(Control, { type: normalized.type, options: normalized.options, value: value, onChange: handleParamChange(name) }))));
 };
 
 var Output = function (_a) {
     var name = _a.name, varDef = _a.varDef, id = _a.id, onClick = _a.onClick, focus = _a.focus;
     var normalized = normalizeVarDef(varDef);
-    return (React.createElement("tr", { key: name, className: classNames(styles.Output, styles["type-".concat(normalized.type)]), style: {
+    return (React.createElement(react.Handle, { type: "source", position: react.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("td", { colSpan: 2 },
+        React.createElement("span", null,
             focus && "👁 ",
-            normalized.label || name,
-            React.createElement(react.Handle, { type: "source", position: react.Position.Right, id: "".concat(id, "-").concat(name) }))));
+            normalized.label || name)));
 };
 
 var dummyEngine = new Engine();
@@ -1543,6 +1540,8 @@ var useEngine = function () {
     return React.useContext(EngineContext);
 };
 
+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","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;
@@ -1664,20 +1663,19 @@ function GenericNode(_a) {
     return (React.createElement(NodeContainer, { label: data.label, selected: selected, id: id },
         React.createElement("div", { className: styles.Description }, data.description),
         children,
-        React.createElement("table", null,
-            React.createElement("tbody", null,
-                outputEntries.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, onClick: function () { return setFocus(name); }, focus: showPreview && focus === name }));
-                }),
-                inputEntries.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 }));
-                }),
-                paramEntries.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 }));
-                }))),
+        React.createElement("div", { className: styles.Ports },
+            outputEntries.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, onClick: function () { return setFocus(name); }, focus: showPreview && focus === name }));
+            }),
+            inputEntries.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 }));
+            }),
+            paramEntries.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 }));
+            })),
         React.createElement("div", { className: classNames(styles.PreviewHead, (_b = {},
                 _b[styles.expanded] = showPreview,
                 _b)), onClick: function () { return setShowPreview(!showPreview); } }, "Preview"),
@@ -1940,7 +1938,7 @@ function createNode(engine, id, fncall, options) {
         id: id,
         data: {
             name: fncall.name,
-            label: (calledFn === null || calledFn === void 0 ? void 0 : calledFn.label) || 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,
@@ -1964,6 +1962,35 @@ function createEdge(nodeId, ref) {
     };
 }
 
+var ConnectionLine = (function (_a) {
+    var _b;
+    var fromX = _a.fromX, fromY = _a.fromY, toX = _a.toX, toY = _a.toY, fromHandle = _a.fromHandle, fromNode = _a.fromNode, connectionStatus = _a.connectionStatus;
+    var _c = react.useConnection(), toNode = _c.toNode, toHandle = _c.toHandle;
+    // correcting the start point as we moved the nodes in our custom ports
+    if (fromNode && fromHandle) {
+        fromX = (fromNode === null || fromNode === void 0 ? void 0 : fromNode.position.x) + fromHandle.x;
+        if (fromHandle.position === "right") {
+            fromX += fromHandle.width;
+        }
+    }
+    if (toNode && toHandle) {
+        toX = toHandle.x - toHandle.width / 2; // align to left side of the handle
+        if (toHandle.position === "right") {
+            toX += toHandle.width;
+        }
+    }
+    var d = react.getSimpleBezierPath({
+        sourceX: fromX,
+        sourceY: fromY,
+        targetX: toX,
+        targetY: toY,
+        sourcePosition: react.Position.Right,
+        targetPosition: react.Position.Left,
+    });
+    return (React.createElement("g", { className: classNames(styles$1.ConnectionPath, "react-flow__connection-path", (_b = {}, _b[styles$1.valid] = connectionStatus === "valid", _b)) },
+        React.createElement("path", { d: d[0] })));
+});
+
 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];
@@ -2074,7 +2101,7 @@ function FlowInner(_a) {
     }, []);
     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, maxZoom: 4, deleteKeyCode: "Delete" },
+        selectionOnDrag: true, minZoom: 0.1, maxZoom: 4, deleteKeyCode: "Delete", connectionLineComponent: ConnectionLine },
         React.createElement(react.Background, { color: "#ccc", variant: react.BackgroundVariant.Dots }),
         React.createElement(react.Controls, null)));
 }