@solidxai/core-ui 0.1.13-beta.1 → 0.1.13-beta.2

package/dist/components/workflow/WorkflowFlowCanvas.js

@@ -0,0 +1,705 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from "react";
+import { Background, BackgroundVariant, Controls, Handle, MarkerType, MiniMap, Position, ReactFlow, ReactFlowProvider, } from "@xyflow/react";
+import { BookOpen, CircleHelp, Pencil, Plus, Trash2 } from "lucide-react";
+import { normalizeSolidIconName, SolidButton, SolidIcon, SolidTag } from "../shad-cn-ui";
+import "@xyflow/react/dist/style.css";
+import "./WorkflowFlowCanvas.css";
+var DIMENSIONS = {
+    workflowWidth: 248,
+    workflowHeight: 118,
+    triggerWidth: 248,
+    triggerHeight: 108,
+    insertWidth: 160,
+    insertHeight: 40,
+    sectionLabelWidth: 104,
+    sectionLabelHeight: 28,
+    groupPaddingX: 28,
+    groupPaddingTop: 42,
+    groupPaddingBottom: 22,
+    loopGroupPaddingX: 70,
+    loopGroupPaddingTop: 46,
+    loopGroupPaddingBottom: 34,
+    controlChildLabelOffsetY: 138,
+    controlChildStartOffsetY: 150,
+};
+function normalizeChildSlots(node, nodeType) {
+    var _a, _b;
+    if ((_b = (_a = nodeType === null || nodeType === void 0 ? void 0 : nodeType.authoring) === null || _a === void 0 ? void 0 : _a.childSlots) === null || _b === void 0 ? void 0 : _b.length) {
+        return nodeType.authoring.childSlots;
+    }
+    var slots = [];
+    if (Array.isArray(node.then) || Array.isArray(node.else)) {
+        slots.push({ key: "then", label: "Then", kind: "sequence" });
+        slots.push({ key: "else", label: "Else", kind: "sequence" });
+    }
+    else if (Array.isArray(node.branches)) {
+        slots.push({ key: "branches", label: "Branches", kind: "branch-collection" });
+    }
+    else if (Array.isArray(node.children) || Array.isArray(node.nodes)) {
+        slots.push({ key: "children", label: "Children", kind: "sequence" });
+    }
+    return slots;
+}
+function isLoopNode(workflowNode, nodeType) {
+    var _a, _b, _c;
+    var nodeTypeId = String((_b = (_a = workflowNode.type) !== null && _a !== void 0 ? _a : nodeType === null || nodeType === void 0 ? void 0 : nodeType.type) !== null && _b !== void 0 ? _b : "").toLowerCase();
+    var category = String((_c = nodeType === null || nodeType === void 0 ? void 0 : nodeType.category) !== null && _c !== void 0 ? _c : "").toLowerCase();
+    var nodeTypeTags = nodeType === null || nodeType === void 0 ? void 0 : nodeType.tags;
+    var tags = Array.isArray(nodeTypeTags)
+        ? nodeTypeTags.map(function (tag) { return String(tag).toLowerCase(); })
+        : [];
+    return (nodeTypeId === "foreach" ||
+        nodeTypeId === "for.each" ||
+        nodeTypeId === "loopuntil" ||
+        nodeTypeId === "loop.until" ||
+        category.includes("loop") ||
+        tags.includes("loop") ||
+        tags.includes("iteration"));
+}
+function getNodeRect(node) {
+    var _a, _b, _c, _d;
+    var width = node.type === "workflow"
+        ? DIMENSIONS.workflowWidth
+        : node.type === "trigger"
+            ? DIMENSIONS.triggerWidth
+            : node.type === "insert"
+                ? DIMENSIONS.insertWidth
+                : node.type === "sectionLabel"
+                    ? DIMENSIONS.sectionLabelWidth
+                    : Number((_b = (_a = node.style) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : 0);
+    var height = node.type === "workflow"
+        ? DIMENSIONS.workflowHeight
+        : node.type === "trigger"
+            ? DIMENSIONS.triggerHeight
+            : node.type === "insert"
+                ? DIMENSIONS.insertHeight
+                : node.type === "sectionLabel"
+                    ? DIMENSIONS.sectionLabelHeight
+                    : Number((_d = (_c = node.style) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : 0);
+    return {
+        left: node.position.x,
+        top: node.position.y,
+        right: node.position.x + width,
+        bottom: node.position.y + height,
+    };
+}
+function createEdge(source, target) {
+    return {
+        id: "".concat(source, "->").concat(target),
+        source: source,
+        target: target,
+        type: "smoothstep",
+        markerEnd: { type: MarkerType.ArrowClosed, width: 14, height: 14 },
+        style: {
+            stroke: "rgba(191, 219, 254, 0.88)",
+            strokeWidth: 2,
+            strokeDasharray: "5 5",
+        },
+        zIndex: 2,
+    };
+}
+function resolveWorkflowNodeIcon(nodeType) {
+    var _a, _b, _c;
+    return (_c = normalizeSolidIconName((_b = (_a = nodeType === null || nodeType === void 0 ? void 0 : nodeType.ui) === null || _a === void 0 ? void 0 : _a.icon) !== null && _b !== void 0 ? _b : nodeType === null || nodeType === void 0 ? void 0 : nodeType.icon)) !== null && _c !== void 0 ? _c : "si-th-large";
+}
+function estimateSequenceWidth(sequence, nodeTypeMap) {
+    if (!sequence.length) {
+        return DIMENSIONS.insertWidth;
+    }
+    return sequence.reduce(function (maxWidth, workflowNode) {
+        var nodeType = nodeTypeMap.get(String(workflowNode.type));
+        var nodeWidth = estimateWorkflowNodeWidth(workflowNode, nodeTypeMap, nodeType);
+        return Math.max(maxWidth, nodeWidth);
+    }, DIMENSIONS.workflowWidth);
+}
+function estimateWorkflowNodeWidth(workflowNode, nodeTypeMap, nodeType) {
+    var slotDefinitions = normalizeChildSlots(workflowNode, nodeType);
+    var branchSlots = slotDefinitions.filter(function (slot) { return slot.key === "then" || slot.key === "else"; });
+    if (branchSlots.length >= 2) {
+        var branchGap = 60;
+        var branchWidths = branchSlots.map(function (slot) {
+            return estimateSequenceWidth(Array.isArray(workflowNode[slot.key]) ? workflowNode[slot.key] : [], nodeTypeMap);
+        });
+        var totalBranchWidth = branchWidths.reduce(function (sum, width) { return sum + width; }, 0) +
+            branchGap * Math.max(branchWidths.length - 1, 0);
+        return Math.max(DIMENSIONS.workflowWidth, totalBranchWidth);
+    }
+    if (slotDefinitions.length === 1 && slotDefinitions[0].kind === "sequence") {
+        var slotKey = slotDefinitions[0].key;
+        return Math.max(DIMENSIONS.workflowWidth, estimateSequenceWidth(Array.isArray(workflowNode[slotKey]) ? workflowNode[slotKey] : [], nodeTypeMap));
+    }
+    if (slotDefinitions.length === 1 && slotDefinitions[0].kind === "branch-collection") {
+        var branchGap = 56;
+        var branches = Array.isArray(workflowNode.branches) ? workflowNode.branches : [];
+        var branchWidths = branches.map(function (branch) {
+            return estimateSequenceWidth(Array.isArray(branch.nodes) ? branch.nodes : [], nodeTypeMap);
+        });
+        var totalBranchWidth = branchWidths.reduce(function (sum, width) { return sum + width; }, 0) +
+            branchGap * Math.max(branchWidths.length - 1, 0);
+        return Math.max(DIMENSIONS.workflowWidth, totalBranchWidth);
+    }
+    return DIMENSIONS.workflowWidth;
+}
+function WorkflowCanvasNodeRenderer(_a) {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    var data = _a.data;
+    if (data.kind === "group") {
+        return (_jsx("div", { className: "workflow-flow-group-node workflow-flow-group-node--".concat((_b = data.tone) !== null && _b !== void 0 ? _b : "control"), children: _jsxs("div", { className: "workflow-flow-group-node__header", children: [_jsx("span", { children: data.label }), data.workflowNode ? (_jsx("button", { type: "button", className: "workflow-flow-help-button nodrag nopan nowheel", "aria-label": "Open ".concat((_d = (_c = data.nodeType) === null || _c === void 0 ? void 0 : _c.label) !== null && _d !== void 0 ? _d : data.label, " documentation"), title: "Documentation", onPointerDown: function (event) {
+                            event.stopPropagation();
+                        }, onClick: function (event) {
+                            var _a, _b;
+                            event.stopPropagation();
+                            (_a = data.onViewDocs) === null || _a === void 0 ? void 0 : _a.call(data, String((_b = data.workflowNode) === null || _b === void 0 ? void 0 : _b.id));
+                        }, children: _jsx(CircleHelp, { size: 12 }) })) : null] }) }));
+    }
+    if (data.kind === "insert") {
+        return (_jsxs("div", { className: "workflow-flow-insert-node", children: [_jsx("button", { type: "button", onClick: data.onInsert, className: "workflow-flow-insert-node__button", children: _jsx(Plus, { size: 16 }) }), _jsx("div", { className: "workflow-flow-insert-node__label", children: data.enabled
+                        ? "Add ".concat((_e = data.selectedTypeLabel) !== null && _e !== void 0 ? _e : "node")
+                        : "Pick a node type to insert" })] }));
+    }
+    if (data.kind === "section-label") {
+        return _jsx("div", { className: "workflow-flow-section-label", children: data.label });
+    }
+    if (data.kind === "workflow-trigger") {
+        var triggerTitle = data.readOnly
+            ? String(data.trigger.id)
+            : (_g = (_f = data.trigger.name) !== null && _f !== void 0 ? _f : data.trigger.label) !== null && _g !== void 0 ? _g : data.trigger.id;
+        return (_jsxs("div", { className: "workflow-flow-node-card workflow-flow-node-card--trigger ".concat(data.selected ? "is-selected" : "", " ").concat(data.readOnly ? "is-readonly workflow-flow-node-card--readonly-compact" : ""), onClick: function () { return data.onSelectTrigger(String(data.trigger.id)); }, role: "button", tabIndex: 0, onKeyDown: function (event) {
+                if (event.key === "Enter" || event.key === " ") {
+                    event.preventDefault();
+                    data.onSelectTrigger(String(data.trigger.id));
+                }
+            }, children: [_jsxs("div", { className: "workflow-flow-node-card__header", children: [_jsxs("div", { className: "workflow-flow-node-card__header-main", children: [_jsx("div", { className: "workflow-flow-node-card__icon-shell", children: _jsx(SolidIcon, { name: "si-calendar", size: 16, "aria-hidden": true }) }), _jsxs("div", { children: [_jsx("div", { className: "workflow-flow-node-card__title", children: triggerTitle }), !data.readOnly ? (_jsx("div", { className: "workflow-flow-node-card__subtitle", children: (_h = data.trigger.type) !== null && _h !== void 0 ? _h : "Trigger" })) : null] })] }), !data.readOnly ? (_jsx("div", { className: "workflow-flow-node-card__tags", children: data.trigger.disabled ? _jsx(SolidTag, { tone: "warn", children: "disabled" }) : _jsx(SolidTag, { children: "trigger" }) })) : null] }), !data.readOnly && data.trigger.description ? (_jsx("div", { className: "workflow-flow-node-card__description", children: data.trigger.description })) : null, !data.readOnly ? (_jsx("div", { className: "workflow-flow-node-card__actions", children: _jsx(SolidButton, { size: "small", variant: "ghost", onClick: function (event) {
+                            event.stopPropagation();
+                            data.onViewDocs(String(data.trigger.id));
+                        }, children: _jsx(BookOpen, { size: 14 }) }) })) : null, _jsx(Handle, { type: "target", position: Position.Top, className: "workflow-flow-node-card__handle workflow-flow-node-card__handle--top", isConnectable: false }), _jsx(Handle, { type: "source", position: Position.Bottom, className: "workflow-flow-node-card__handle workflow-flow-node-card__handle--bottom", isConnectable: false })] }));
+    }
+    var workflowNode = data.workflowNode, nodeType = data.nodeType, selected = data.selected;
+    var iconName = resolveWorkflowNodeIcon(nodeType);
+    var nodeTitle = data.readOnly ? String(workflowNode.id) : (_j = workflowNode.name) !== null && _j !== void 0 ? _j : workflowNode.id;
+    var nodeTypeLabel = (_m = (_l = (_k = nodeType === null || nodeType === void 0 ? void 0 : nodeType.label) !== null && _k !== void 0 ? _k : workflowNode.type) !== null && _l !== void 0 ? _l : workflowNode.kind) !== null && _m !== void 0 ? _m : "node";
+    return (_jsxs("div", { className: "workflow-flow-node-card ".concat(selected ? "is-selected" : "", " ").concat(data.readOnly ? "is-readonly workflow-flow-node-card--readonly-compact" : ""), onClick: function () { return data.onSelectNode(String(workflowNode.id)); }, role: "button", tabIndex: 0, onKeyDown: function (event) {
+            if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
+                data.onSelectNode(String(workflowNode.id));
+            }
+        }, children: [_jsxs("div", { className: "workflow-flow-node-card__typebar", children: [_jsx("span", { children: nodeTypeLabel }), _jsxs("span", { className: "workflow-flow-node-card__quick-actions", children: [!data.readOnly ? (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "workflow-flow-icon-button nodrag nopan nowheel", "aria-label": "Edit ".concat(nodeTitle), title: "Edit", onPointerDown: function (event) {
+                                            event.stopPropagation();
+                                        }, onClick: function (event) {
+                                            event.stopPropagation();
+                                            data.onEditNode(String(workflowNode.id));
+                                        }, children: _jsx(Pencil, { size: 12 }) }), _jsx("button", { type: "button", className: "workflow-flow-icon-button workflow-flow-icon-button--danger nodrag nopan nowheel", "aria-label": "Delete ".concat(nodeTitle), title: "Delete", onPointerDown: function (event) {
+                                            event.stopPropagation();
+                                        }, onClick: function (event) {
+                                            event.stopPropagation();
+                                            data.onDeleteNode(String(workflowNode.id));
+                                        }, children: _jsx(Trash2, { size: 12 }) })] })) : null, _jsx("button", { type: "button", className: "workflow-flow-icon-button nodrag nopan nowheel", "aria-label": "Open ".concat(nodeTypeLabel, " documentation"), title: "Documentation", onPointerDown: function (event) {
+                                    event.stopPropagation();
+                                }, onClick: function (event) {
+                                    event.stopPropagation();
+                                    data.onViewDocs(String(workflowNode.id));
+                                }, children: _jsx(CircleHelp, { size: 12 }) })] })] }), _jsx("div", { className: "workflow-flow-node-card__body", children: _jsxs("div", { className: "workflow-flow-node-card__header-main", children: [_jsx("div", { className: "workflow-flow-node-card__icon-shell", children: _jsx(SolidIcon, { name: iconName, size: 16, "aria-hidden": true }) }), _jsx("div", { children: _jsx("div", { className: "workflow-flow-node-card__title", children: nodeTitle }) })] }) }), !data.readOnly && workflowNode.description ? (_jsx("div", { className: "workflow-flow-node-card__description", children: workflowNode.description })) : null, _jsx(Handle, { type: "target", position: Position.Top, className: "workflow-flow-node-card__handle workflow-flow-node-card__handle--top", isConnectable: false }), _jsx(Handle, { type: "source", position: Position.Bottom, className: "workflow-flow-node-card__handle workflow-flow-node-card__handle--bottom", isConnectable: false })] }));
+}
+var canvasNodeTypes = {
+    group: WorkflowCanvasNodeRenderer,
+    workflow: WorkflowCanvasNodeRenderer,
+    trigger: WorkflowCanvasNodeRenderer,
+    insert: WorkflowCanvasNodeRenderer,
+    sectionLabel: WorkflowCanvasNodeRenderer,
+};
+function pushGroupNode(ctx, id, label, tone, subset, workflowNode, nodeType) {
+    if (!subset.length) {
+        return;
+    }
+    var bounds = subset.reduce(function (acc, node) {
+        var rect = getNodeRect(node);
+        return {
+            left: Math.min(acc.left, rect.left),
+            top: Math.min(acc.top, rect.top),
+            right: Math.max(acc.right, rect.right),
+            bottom: Math.max(acc.bottom, rect.bottom),
+        };
+    }, {
+        left: Number.POSITIVE_INFINITY,
+        top: Number.POSITIVE_INFINITY,
+        right: Number.NEGATIVE_INFINITY,
+        bottom: Number.NEGATIVE_INFINITY,
+    });
+    var paddingX = tone === "loop" ? DIMENSIONS.loopGroupPaddingX : DIMENSIONS.groupPaddingX;
+    var paddingTop = tone === "loop" ? DIMENSIONS.loopGroupPaddingTop : DIMENSIONS.groupPaddingTop;
+    var paddingBottom = tone === "loop" ? DIMENSIONS.loopGroupPaddingBottom : DIMENSIONS.groupPaddingBottom;
+    ctx.backgroundNodes.push({
+        id: id,
+        type: "group",
+        position: {
+            x: bounds.left - paddingX,
+            y: bounds.top - paddingTop,
+        },
+        draggable: false,
+        selectable: false,
+        style: {
+            width: bounds.right - bounds.left + paddingX * 2,
+            height: bounds.bottom - bounds.top + paddingTop + paddingBottom,
+            zIndex: 0,
+        },
+        data: {
+            kind: "group",
+            label: label,
+            tone: tone,
+            workflowNode: workflowNode,
+            nodeType: nodeType,
+            onViewDocs: ctx.onViewDocs,
+        },
+    });
+}
+function pushInsertNode(ctx, id, x, y, target) {
+    var _a;
+    ctx.nodes.push({
+        id: id,
+        type: "insert",
+        position: { x: x, y: y },
+        draggable: false,
+        selectable: false,
+        data: {
+            kind: "insert",
+            enabled: !!ctx.activePaletteNodeType,
+            selectedTypeLabel: (_a = ctx.activePaletteNodeType) === null || _a === void 0 ? void 0 : _a.label,
+            onInsert: function () { return ctx.onInsertNode(target); },
+        },
+        sourcePosition: Position.Bottom,
+        targetPosition: Position.Top,
+    });
+}
+function pushWorkflowNode(ctx, workflowNode, x, y) {
+    var nodeType = ctx.nodeTypeMap.get(String(workflowNode.type));
+    ctx.nodes.push({
+        id: String(workflowNode.id),
+        type: "workflow",
+        position: { x: x, y: y },
+        draggable: false,
+        data: {
+            kind: "workflow-node",
+            workflowNode: workflowNode,
+            nodeType: nodeType,
+            selected: ctx.selectedNodeId === String(workflowNode.id),
+            readOnly: ctx.readOnly,
+            onSelectNode: ctx.onSelectNode,
+            onEditNode: ctx.onEditNode,
+            onDeleteNode: ctx.onDeleteNode,
+            onViewDocs: ctx.onViewDocs,
+        },
+        sourcePosition: Position.Bottom,
+        targetPosition: Position.Top,
+    });
+}
+function pushTriggerNode(ctx, trigger, x, y) {
+    ctx.nodes.push({
+        id: "trigger-".concat(String(trigger.id)),
+        type: "trigger",
+        position: { x: x, y: y },
+        draggable: false,
+        selectable: false,
+        sourcePosition: Position.Bottom,
+        targetPosition: Position.Top,
+        data: {
+            kind: "workflow-trigger",
+            trigger: trigger,
+            selected: ctx.selectedTriggerId === String(trigger.id),
+            readOnly: ctx.readOnly,
+            onSelectTrigger: ctx.onSelectTrigger,
+            onViewDocs: ctx.onViewTriggerDocs,
+        },
+    });
+}
+function pushSectionLabelNode(ctx, id, x, y, label) {
+    ctx.nodes.push({
+        id: id,
+        type: "sectionLabel",
+        position: { x: x, y: y },
+        draggable: false,
+        selectable: false,
+        data: {
+            kind: "section-label",
+            label: label,
+        },
+    });
+}
+function buildSequenceGraph(sequence, ctx, laneX, startY, scope) {
+    var _a, _b;
+    var cursorY = startY;
+    var previousGraphNodeId = null;
+    var maxWidth = DIMENSIONS.workflowWidth;
+    var initialInsertId = "insert-".concat(JSON.stringify(scope), "-0");
+    pushInsertNode(ctx, initialInsertId, laneX, cursorY, __assign(__assign({}, scope), { index: 0 }));
+    previousGraphNodeId = initialInsertId;
+    var exitId = initialInsertId;
+    var _loop_1 = function (index) {
+        var workflowNode = sequence[index];
+        var nodeType = ctx.nodeTypeMap.get(String(workflowNode.type));
+        var slotDefinitions = normalizeChildSlots(workflowNode, nodeType);
+        var isControlNode = (nodeType === null || nodeType === void 0 ? void 0 : nodeType.kind) === "control" || slotDefinitions.length > 0;
+        var estimatedNodeWidth = estimateWorkflowNodeWidth(workflowNode, ctx.nodeTypeMap, nodeType);
+        maxWidth = Math.max(maxWidth, estimatedNodeWidth);
+        var subtreeStartIndex = ctx.nodes.length;
+        cursorY += 82;
+        pushWorkflowNode(ctx, workflowNode, laneX - 56, cursorY);
+        if (previousGraphNodeId) {
+            ctx.edges.push(createEdge(previousGraphNodeId, String(workflowNode.id)));
+        }
+        var deepestY = cursorY;
+        var connectionSources = [String(workflowNode.id)];
+        var branchSlots = slotDefinitions.filter(function (slot) { return slot.key === "then" || slot.key === "else"; });
+        if (branchSlots.length >= 2) {
+            var branchGap_1 = 60;
+            var branchWidths_1 = branchSlots.map(function (slot) {
+                return estimateSequenceWidth(Array.isArray(workflowNode[slot.key]) ? workflowNode[slot.key] : [], ctx.nodeTypeMap);
+            });
+            var totalBranchWidth = branchWidths_1.reduce(function (sum, width) { return sum + width; }, 0) +
+                branchGap_1 * Math.max(branchWidths_1.length - 1, 0);
+            var branchStartX_1 = laneX - totalBranchWidth / 2;
+            var branchLayouts = branchSlots.map(function (slot, branchIndex) {
+                var _a;
+                var slotKey = slot.key;
+                var childNodes = Array.isArray(workflowNode[slotKey]) ? workflowNode[slotKey] : [];
+                var beforeWidth = branchWidths_1
+                    .slice(0, branchIndex)
+                    .reduce(function (sum, width) { return sum + width; }, 0);
+                var branchLaneX = branchStartX_1 +
+                    beforeWidth +
+                    branchGap_1 * branchIndex +
+                    branchWidths_1[branchIndex] / 2;
+                var labelX = branchLaneX + 24;
+                var labelY = cursorY + 60;
+                pushSectionLabelNode(ctx, "".concat(workflowNode.id, "-").concat(slotKey, "-label"), labelX, labelY, (_a = slot.label) !== null && _a !== void 0 ? _a : slotKey);
+                var childLayout = buildSequenceGraph(childNodes, ctx, branchLaneX, cursorY + 82, {
+                    scope: "slot",
+                    parentNodeId: String(workflowNode.id),
+                    slotKey: slotKey,
+                });
+                ctx.edges.push(createEdge(String(workflowNode.id), childLayout.entryId));
+                deepestY = Math.max(deepestY, childLayout.endY);
+                maxWidth = Math.max(maxWidth, childLayout.width);
+                return childLayout;
+            });
+            connectionSources = branchLayouts.map(function (layout) { return layout.exitId; });
+        }
+        else if (slotDefinitions.length === 1 && slotDefinitions[0].kind === "sequence") {
+            var slot = slotDefinitions[0];
+            var slotKey = slot.key;
+            var childNodes = Array.isArray(workflowNode[slotKey]) ? workflowNode[slotKey] : [];
+            if (slot.label) {
+                var isLoop = isLoopNode(workflowNode, nodeType);
+                pushSectionLabelNode(ctx, "".concat(workflowNode.id, "-").concat(slotKey, "-label"), laneX + 24, cursorY + (isLoop ? DIMENSIONS.controlChildLabelOffsetY : 132), isLoop ? (_a = slot.label) !== null && _a !== void 0 ? _a : "Loop Body" : slot.label);
+            }
+            var childLayout = buildSequenceGraph(childNodes, ctx, laneX, cursorY + DIMENSIONS.controlChildStartOffsetY, {
+                scope: "slot",
+                parentNodeId: String(workflowNode.id),
+                slotKey: slotKey,
+            });
+            ctx.edges.push(createEdge(String(workflowNode.id), childLayout.entryId));
+            deepestY = Math.max(deepestY, childLayout.endY);
+            maxWidth = Math.max(maxWidth, childLayout.width);
+            connectionSources = [childLayout.exitId];
+        }
+        else if (slotDefinitions.length === 1 && slotDefinitions[0].kind === "branch-collection") {
+            var branches = Array.isArray(workflowNode.branches) ? workflowNode.branches : [];
+            var branchGap_2 = 56;
+            var branchWidths_2 = branches.map(function (branch) {
+                return estimateSequenceWidth(Array.isArray(branch.nodes) ? branch.nodes : [], ctx.nodeTypeMap);
+            });
+            var totalBranchWidth = branchWidths_2.reduce(function (sum, width) { return sum + width; }, 0) +
+                branchGap_2 * Math.max(branchWidths_2.length - 1, 0);
+            var branchStartX_2 = laneX - totalBranchWidth / 2;
+            var branchLayouts = branches.map(function (branch, branchIndex) {
+                var _a;
+                var beforeWidth = branchWidths_2
+                    .slice(0, branchIndex)
+                    .reduce(function (sum, width) { return sum + width; }, 0);
+                var branchLaneX = branchStartX_2 +
+                    beforeWidth +
+                    branchGap_2 * branchIndex +
+                    branchWidths_2[branchIndex] / 2;
+                pushSectionLabelNode(ctx, "".concat(workflowNode.id, "-").concat(branch.id, "-label"), branchLaneX + 24, cursorY + 60, (_a = branch.name) !== null && _a !== void 0 ? _a : branch.id);
+                var branchLayout = buildSequenceGraph(Array.isArray(branch.nodes) ? branch.nodes : [], ctx, branchLaneX, cursorY + 82, {
+                    scope: "branch",
+                    parentNodeId: String(workflowNode.id),
+                    branchId: String(branch.id),
+                });
+                ctx.edges.push(createEdge(String(workflowNode.id), branchLayout.entryId));
+                deepestY = Math.max(deepestY, branchLayout.endY);
+                maxWidth = Math.max(maxWidth, branchLayout.width);
+                return branchLayout;
+            });
+            connectionSources = branchLayouts.length
+                ? branchLayouts.map(function (layout) { return layout.exitId; })
+                : [String(workflowNode.id)];
+        }
+        if (isControlNode) {
+            pushGroupNode(ctx, "group-".concat(String(workflowNode.id)), (_b = workflowNode.name) !== null && _b !== void 0 ? _b : workflowNode.id, isLoopNode(workflowNode, nodeType) ? "loop" : "control", ctx.nodes.slice(subtreeStartIndex), workflowNode, nodeType);
+        }
+        cursorY = Math.max(cursorY + 82, deepestY + (isControlNode ? 40 : 0));
+        var afterInsertId = "insert-".concat(JSON.stringify(scope), "-").concat(index + 1, "-").concat(workflowNode.id);
+        pushInsertNode(ctx, afterInsertId, laneX, cursorY, __assign(__assign({}, scope), { index: index + 1 }));
+        connectionSources.forEach(function (sourceId) {
+            ctx.edges.push(createEdge(sourceId, afterInsertId));
+        });
+        previousGraphNodeId = afterInsertId;
+        exitId = afterInsertId;
+    };
+    for (var index = 0; index < sequence.length; index += 1) {
+        _loop_1(index);
+    }
+    return {
+        entryId: initialInsertId,
+        exitId: exitId,
+        endY: cursorY,
+        width: maxWidth,
+    };
+}
+function buildReadOnlySequenceGraph(sequence, ctx, laneX, startY) {
+    var _a, _b;
+    var cursorY = startY;
+    var previousExitIds = [];
+    var entryIds = [];
+    var maxWidth = sequence.length ? DIMENSIONS.workflowWidth : 0;
+    var _loop_2 = function (workflowNode) {
+        var nodeType = ctx.nodeTypeMap.get(String(workflowNode.type));
+        var slotDefinitions = normalizeChildSlots(workflowNode, nodeType);
+        var isControlNode = (nodeType === null || nodeType === void 0 ? void 0 : nodeType.kind) === "control" || slotDefinitions.length > 0;
+        var estimatedNodeWidth = estimateWorkflowNodeWidth(workflowNode, ctx.nodeTypeMap, nodeType);
+        maxWidth = Math.max(maxWidth, estimatedNodeWidth);
+        var subtreeStartIndex = ctx.nodes.length;
+        cursorY += 82;
+        pushWorkflowNode(ctx, workflowNode, laneX - 56, cursorY);
+        if (!entryIds.length) {
+            entryIds = [String(workflowNode.id)];
+        }
+        previousExitIds.forEach(function (sourceId) {
+            ctx.edges.push(createEdge(sourceId, String(workflowNode.id)));
+        });
+        var deepestY = cursorY;
+        var exitIds = [String(workflowNode.id)];
+        var branchSlots = slotDefinitions.filter(function (slot) { return slot.key === "then" || slot.key === "else"; });
+        if (branchSlots.length >= 2) {
+            var branchGap_3 = 60;
+            var branchWidths_3 = branchSlots.map(function (slot) {
+                return estimateSequenceWidth(Array.isArray(workflowNode[slot.key]) ? workflowNode[slot.key] : [], ctx.nodeTypeMap);
+            });
+            var totalBranchWidth = branchWidths_3.reduce(function (sum, width) { return sum + width; }, 0) +
+                branchGap_3 * Math.max(branchWidths_3.length - 1, 0);
+            var branchStartX_3 = laneX - totalBranchWidth / 2;
+            var branchLayouts = branchSlots
+                .map(function (slot, branchIndex) {
+                var _a;
+                var slotKey = slot.key;
+                var childNodes = Array.isArray(workflowNode[slotKey])
+                    ? workflowNode[slotKey]
+                    : [];
+                var beforeWidth = branchWidths_3
+                    .slice(0, branchIndex)
+                    .reduce(function (sum, width) { return sum + width; }, 0);
+                var branchLaneX = branchStartX_3 +
+                    beforeWidth +
+                    branchGap_3 * branchIndex +
+                    branchWidths_3[branchIndex] / 2;
+                pushSectionLabelNode(ctx, "".concat(workflowNode.id, "-").concat(slotKey, "-label"), branchLaneX + 24, cursorY + 60, (_a = slot.label) !== null && _a !== void 0 ? _a : slotKey);
+                var childLayout = buildReadOnlySequenceGraph(childNodes, ctx, branchLaneX, cursorY + 82);
+                childLayout.entryIds.forEach(function (entryId) {
+                    ctx.edges.push(createEdge(String(workflowNode.id), entryId));
+                });
+                deepestY = Math.max(deepestY, childLayout.endY);
+                maxWidth = Math.max(maxWidth, childLayout.width);
+                return childLayout;
+            })
+                .filter(function (layout) { return layout.entryIds.length; });
+            exitIds = branchLayouts.length
+                ? branchLayouts.flatMap(function (layout) { return layout.exitIds; })
+                : [String(workflowNode.id)];
+        }
+        else if (slotDefinitions.length === 1 && slotDefinitions[0].kind === "sequence") {
+            var slot = slotDefinitions[0];
+            var slotKey = slot.key;
+            var childNodes = Array.isArray(workflowNode[slotKey]) ? workflowNode[slotKey] : [];
+            if (slot.label) {
+                var isLoop = isLoopNode(workflowNode, nodeType);
+                pushSectionLabelNode(ctx, "".concat(workflowNode.id, "-").concat(slotKey, "-label"), laneX + 24, cursorY + (isLoop ? DIMENSIONS.controlChildLabelOffsetY : 132), isLoop ? (_a = slot.label) !== null && _a !== void 0 ? _a : "Loop Body" : slot.label);
+            }
+            var childLayout = buildReadOnlySequenceGraph(childNodes, ctx, laneX, cursorY + DIMENSIONS.controlChildStartOffsetY);
+            childLayout.entryIds.forEach(function (entryId) {
+                ctx.edges.push(createEdge(String(workflowNode.id), entryId));
+            });
+            deepestY = Math.max(deepestY, childLayout.endY);
+            maxWidth = Math.max(maxWidth, childLayout.width);
+            exitIds = childLayout.exitIds.length ? childLayout.exitIds : [String(workflowNode.id)];
+        }
+        else if (slotDefinitions.length === 1 && slotDefinitions[0].kind === "branch-collection") {
+            var branches = Array.isArray(workflowNode.branches) ? workflowNode.branches : [];
+            var branchGap_4 = 56;
+            var branchWidths_4 = branches.map(function (branch) {
+                return estimateSequenceWidth(Array.isArray(branch.nodes) ? branch.nodes : [], ctx.nodeTypeMap);
+            });
+            var totalBranchWidth = branchWidths_4.reduce(function (sum, width) { return sum + width; }, 0) +
+                branchGap_4 * Math.max(branchWidths_4.length - 1, 0);
+            var branchStartX_4 = laneX - totalBranchWidth / 2;
+            var branchLayouts = branches
+                .map(function (branch, branchIndex) {
+                var _a;
+                var beforeWidth = branchWidths_4
+                    .slice(0, branchIndex)
+                    .reduce(function (sum, width) { return sum + width; }, 0);
+                var branchLaneX = branchStartX_4 +
+                    beforeWidth +
+                    branchGap_4 * branchIndex +
+                    branchWidths_4[branchIndex] / 2;
+                pushSectionLabelNode(ctx, "".concat(workflowNode.id, "-").concat(branch.id, "-label"), branchLaneX + 24, cursorY + 60, (_a = branch.name) !== null && _a !== void 0 ? _a : branch.id);
+                var branchLayout = buildReadOnlySequenceGraph(Array.isArray(branch.nodes) ? branch.nodes : [], ctx, branchLaneX, cursorY + 82);
+                branchLayout.entryIds.forEach(function (entryId) {
+                    ctx.edges.push(createEdge(String(workflowNode.id), entryId));
+                });
+                deepestY = Math.max(deepestY, branchLayout.endY);
+                maxWidth = Math.max(maxWidth, branchLayout.width);
+                return branchLayout;
+            })
+                .filter(function (layout) { return layout.entryIds.length; });
+            exitIds = branchLayouts.length
+                ? branchLayouts.flatMap(function (layout) { return layout.exitIds; })
+                : [String(workflowNode.id)];
+        }
+        if (isControlNode) {
+            pushGroupNode(ctx, "group-".concat(String(workflowNode.id)), (_b = workflowNode.name) !== null && _b !== void 0 ? _b : workflowNode.id, isLoopNode(workflowNode, nodeType) ? "loop" : "control", ctx.nodes.slice(subtreeStartIndex), workflowNode, nodeType);
+        }
+        cursorY = Math.max(cursorY + 82, deepestY + (isControlNode ? 40 : 0));
+        previousExitIds = exitIds;
+    };
+    for (var _i = 0, sequence_1 = sequence; _i < sequence_1.length; _i++) {
+        var workflowNode = sequence_1[_i];
+        _loop_2(workflowNode);
+    }
+    return {
+        entryIds: entryIds,
+        exitIds: previousExitIds,
+        endY: cursorY,
+        width: maxWidth,
+    };
+}
+function buildGraph(definition, nodeTypes, props) {
+    var _a, _b;
+    var ctx = {
+        backgroundNodes: [],
+        nodes: [],
+        edges: [],
+        nodeTypeMap: new Map(nodeTypes.map(function (item) { return [item.type, item]; })),
+        readOnly: props.readOnly,
+        activePaletteNodeType: props.activePaletteNodeType,
+        selectedNodeId: props.selectedNodeId,
+        selectedTriggerId: props.selectedTriggerId,
+        onSelectNode: props.onSelectNode,
+        onSelectTrigger: props.onSelectTrigger,
+        onEditNode: props.onEditNode,
+        onDeleteNode: props.onDeleteNode,
+        onViewDocs: props.onViewDocs,
+        onViewTriggerDocs: props.onViewTriggerDocs,
+        onInsertNode: props.onInsertNode,
+        onAddBranch: props.onAddBranch,
+    };
+    var triggers = Array.isArray(definition.triggers) ? definition.triggers : [];
+    var startY = 0;
+    var previousTriggerId = null;
+    if (triggers.length) {
+        var triggerStartIndex = ctx.nodes.length;
+        var triggerY_1 = 60;
+        triggers.forEach(function (trigger) {
+            var triggerNodeId = "trigger-".concat(String(trigger.id));
+            pushTriggerNode(ctx, trigger, 32, triggerY_1);
+            if (previousTriggerId) {
+                ctx.edges.push(createEdge(previousTriggerId, triggerNodeId));
+            }
+            previousTriggerId = triggerNodeId;
+            triggerY_1 += 96;
+        });
+        pushGroupNode(ctx, "group-triggers", "Triggers", "trigger", ctx.nodes.slice(triggerStartIndex));
+        startY = triggerY_1 + 2;
+    }
+    if (props.readOnly) {
+        var readOnlyLayout = buildReadOnlySequenceGraph((_a = definition.nodes) !== null && _a !== void 0 ? _a : [], ctx, 80, startY);
+        if (previousTriggerId) {
+            var triggerSourceId_1 = previousTriggerId;
+            readOnlyLayout.entryIds.forEach(function (entryId) {
+                ctx.edges.push(createEdge(triggerSourceId_1, entryId));
+            });
+        }
+    }
+    else {
+        buildSequenceGraph((_b = definition.nodes) !== null && _b !== void 0 ? _b : [], ctx, 80, startY, { scope: "root" });
+        if (previousTriggerId) {
+            var firstRootInsertId = "insert-".concat(JSON.stringify({ scope: "root" }), "-0");
+            ctx.edges.push(createEdge(previousTriggerId, firstRootInsertId));
+        }
+    }
+    return {
+        nodes: __spreadArray(__spreadArray([], ctx.backgroundNodes, true), ctx.nodes, true),
+        edges: ctx.edges,
+    };
+}
+function WorkflowFlowCanvasInner(props) {
+    var graph = React.useMemo(function () {
+        return buildGraph(props.definition, props.nodeTypes, {
+            selectedNodeId: props.selectedNodeId,
+            selectedTriggerId: props.selectedTriggerId,
+            activePaletteNodeType: props.activePaletteNodeType,
+            onSelectNode: props.onSelectNode,
+            onSelectTrigger: props.onSelectTrigger,
+            onEditNode: props.onEditNode,
+            onDeleteNode: props.onDeleteNode,
+            onViewDocs: props.onViewDocs,
+            onViewTriggerDocs: props.onViewTriggerDocs,
+            onInsertNode: props.onInsertNode,
+            onAddBranch: props.onAddBranch,
+            readOnly: props.readOnly,
+        });
+    }, [
+        props.activePaletteNodeType,
+        props.definition,
+        props.nodeTypes,
+        props.onAddBranch,
+        props.onDeleteNode,
+        props.onEditNode,
+        props.onInsertNode,
+        props.onSelectNode,
+        props.onSelectTrigger,
+        props.onViewDocs,
+        props.onViewTriggerDocs,
+        props.readOnly,
+        props.selectedNodeId,
+        props.selectedTriggerId,
+    ]);
+    return (_jsx("div", { className: "workflow-flow-canvas ".concat(props.readOnly ? "workflow-flow-canvas--readonly" : ""), children: _jsxs(ReactFlow, { nodes: graph.nodes, edges: graph.edges, nodeTypes: canvasNodeTypes, fitView: true, fitViewOptions: {
+                padding: props.readOnly ? 0.28 : 0.24,
+                maxZoom: props.readOnly ? 0.92 : 1,
+            }, minZoom: 0.25, maxZoom: 1.6, proOptions: { hideAttribution: true }, defaultEdgeOptions: { zIndex: 2 }, nodesDraggable: false, nodesConnectable: false, elementsSelectable: !props.readOnly, panOnDrag: true, zoomOnDoubleClick: false, children: [!props.readOnly ? (_jsx(MiniMap, { pannable: true, zoomable: true, className: "workflow-flow-canvas__minimap" })) : null, _jsx(Controls, { showInteractive: false }), _jsx(Background, { variant: BackgroundVariant.Dots, gap: 18, size: 1.45, color: "rgba(148, 163, 184, 0.34)" })] }) }));
+}
+export function WorkflowFlowCanvas(props) {
+    return (_jsx(ReactFlowProvider, { children: _jsx(WorkflowFlowCanvasInner, __assign({}, props)) }));
+}
+//# sourceMappingURL=WorkflowFlowCanvas.js.map