@operato/flow 9.0.1 → 9.0.2

package/dist/src/ox-flow-editor.js

@@ -0,0 +1,426 @@
+import { __decorate } from "tslib";
+import '@material/web/icon/icon.js';
+import './components/flow-sidebar.js';
+import './components/flow-toolbar.js';
+import './components/flow-side-panel.js';
+import { LitElement, html, svg, css, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import dagre from 'dagre-esm';
+import { provide } from '@lit/context';
+import { OxPopup } from '@operato/popup';
+import { FlowExecutor } from './components/flow-executor.js';
+import { flowContext } from './context/flow-context.js';
+import { flowDebugContext } from './context/flow-debug-context.js';
+import { flowEditContext } from './context/flow-edit-context.js';
+import { FlowNodeAbstract } from './base/flow-node-abstract.js';
+import { FlowEdgeInstance } from './base/flow-edge-instance.js';
+import { PointerEventHandler } from './handlers/pointer-event-handler.js';
+import { KeydownEventHandler } from './handlers/keydown-event-handler.js';
+import { DndEventHandler } from './handlers/dnd-event-handler.js';
+import { TaskTypes } from './api/tasks.js';
+let OxFlowEditor = class OxFlowEditor extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.availableNodeTypes = {};
+        this.model = { nodes: [], edges: [] };
+        this.mode = 'edit';
+        this.logs = [];
+        this.edgeGuide = null;
+        this._nodes = [];
+        this._edges = [];
+        this._selected = null;
+        this.pointerEventHandler = new PointerEventHandler(this);
+        this.keydownEventHandler = new KeydownEventHandler(this);
+        this.dndEventHandler = new DndEventHandler(this);
+        this.flowContext = {
+            nodes: this.nodes,
+            edges: this.edges,
+            mode: this.mode,
+            setMode: mode => this.setMode(mode),
+            addLog: log => this.addLog(log),
+            logs: this.logs,
+            availableNodeTypes: this.availableNodeTypes || {},
+            setAvailableNodeTypes: (availableNodeTypes) => this.setAvailableNodeTypes(availableNodeTypes),
+            selected: this.selected,
+            getTaskTypes() {
+                return TaskTypes;
+            },
+            getTaskType(taskType) {
+                return TaskTypes.find(type => type.name == taskType);
+            }
+        };
+        this.flowEditContext = {
+            runLayout: () => this.runLayout(),
+            updateEntity: (entity, model) => {
+                entity.update(model);
+                this.requestUpdate();
+            },
+            updateOptions: (entity, options) => {
+                entity.updateOptions(options);
+                this.requestUpdate();
+            }
+        };
+        this.flowDebugContext = {
+            executeFlow: () => this.executeFlow(),
+            pauseFlow: () => this.pauseFlow(),
+            stopFlow: () => this.stopFlow(),
+            stepOver: () => this.stepOver(),
+            stepInto: () => this.stepInto(),
+            stepOut: () => this.stepOut(),
+            continueExecution: () => this.continueExecution(),
+            setBreakpoint: nodeId => this.toggleBreakpoint(nodeId),
+            breakpoints: new Set(),
+            currentExecutionNode: null,
+            setCurrentExecutionNode: nodeId => this.setCurrentExecutionNode(nodeId)
+        };
+    }
+    static getUniqueId() {
+        return Math.random().toString(36).substring(2, 9);
+    }
+    /** 렌더링 */
+    render() {
+        return html `
+      <flow-sidebar></flow-sidebar>
+
+      <div class="editor">
+        <flow-toolbar></flow-toolbar>
+
+        <svg @dblclick=${this.onDblClick}>
+          ${this.edges.map(edge => edge.render())}
+          ${this.edgeGuide
+            ? svg `<path d="M ${this.edgeGuide.fromX},${this.edgeGuide.fromY} L ${this.edgeGuide.toX},${this.edgeGuide.toY}"
+           stroke="#aaa" stroke-dasharray="5,5" stroke-width="2" fill="none" 
+           />`
+            : nothing}
+          ${this.nodes.map(node => node.render())}
+        </svg>
+      </div>
+
+      <flow-side-panel></flow-side-panel>
+    `;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.pointerEventHandler.addEventListeners();
+        this.keydownEventHandler.addEventListeners();
+        this.dndEventHandler.addEventListeners();
+        this.flowContext = {
+            ...this.flowContext,
+            availableNodeTypes: this.availableNodeTypes
+        };
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.keydownEventHandler.removeEventListeners();
+        this.pointerEventHandler.removeEventListeners();
+        this.dndEventHandler.removeEventListeners();
+    }
+    updated(changes) {
+        if (changes.has('model')) {
+            const { edges = [], nodes = [] } = this.model;
+            this._nodes = nodes
+                .map(node => {
+                const clazz = this.availableNodeTypes[node.type];
+                if (clazz) {
+                    return new clazz(node);
+                }
+            })
+                .filter(Boolean);
+            this._edges = edges
+                .map(edge => {
+                const { from, to } = edge;
+                const fromNode = this._nodes.find(node => node.id == from.nodeId);
+                const toNode = this._nodes.find(node => node.id == to.nodeId);
+                const fromAnchor = fromNode === null || fromNode === void 0 ? void 0 : fromNode.findAnchor(from.anchorId);
+                const toAnchor = toNode === null || toNode === void 0 ? void 0 : toNode.findAnchor(to.anchorId);
+                if (fromAnchor && toAnchor) {
+                    return new FlowEdgeInstance(edge, fromNode, toNode);
+                }
+            })
+                .filter(Boolean);
+            this.flowContext = {
+                ...this.flowContext,
+                nodes: this._nodes,
+                edges: this._edges
+            };
+        }
+    }
+    setAvailableNodeTypes(availableNodeTypes) {
+        this.availableNodeTypes = availableNodeTypes;
+        this.flowContext = {
+            ...this.flowContext,
+            availableNodeTypes
+        };
+    }
+    get context() {
+        return this.flowContext;
+    }
+    getModel() {
+        return {
+            nodes: this.nodes.map(node => {
+                const { id, label, type, pos, size, options } = node;
+                return { id, label, type, pos, size, options };
+            }),
+            edges: this.edges.map(edge => {
+                const { id, label, from, to, weight } = edge;
+                return { id, label, from, to, weight };
+            })
+        };
+    }
+    get nodes() {
+        return this._nodes;
+    }
+    set nodes(nodes) {
+        this._nodes = nodes;
+    }
+    get edges() {
+        return this._edges;
+    }
+    set edges(edges) {
+        this._edges = edges;
+    }
+    get selected() {
+        return this._selected;
+    }
+    updateFlowContext(partial) {
+        this.flowContext = {
+            ...this.flowContext,
+            ...partial
+        };
+    }
+    set selected(selected) {
+        this._selected = selected;
+        this.nodes.forEach(node => (node.selected = node.id == (selected === null || selected === void 0 ? void 0 : selected.id)));
+        this.edges.forEach(edge => (edge.selected = edge.id == (selected === null || selected === void 0 ? void 0 : selected.id)));
+        this.updateFlowContext({ selected });
+    }
+    addFlowNode(node, withSelect = true) {
+        this.nodes = [...this.nodes, node];
+        if (withSelect) {
+            this.selected = node;
+        }
+    }
+    addFlowEdge(edge, withSelect = true) {
+        this.edges = [...this.edges, edge];
+        if (withSelect) {
+            this.selected = edge;
+        }
+    }
+    drawEdgeGuide(edgeGuide) {
+        this.edgeGuide = edgeGuide;
+        this.requestUpdate();
+    }
+    /** 노드 삭제 */
+    deleteEntity(target) {
+        this.nodes = this.nodes.filter(node => node.id !== target.id);
+        this.edges = this.edges.filter(edge => edge.id !== target.id && edge.from.nodeId !== target.id && edge.to.nodeId !== target.id);
+        this.selected = null;
+    }
+    setMode(mode) {
+        this.mode = mode;
+        this.flowContext = {
+            ...this.flowContext,
+            mode
+        };
+    }
+    /** 플로우 실행 */
+    executeFlow() {
+        if (!this.flowExecutor) {
+            this.flowExecutor = new FlowExecutor(this.nodes, this.edges);
+        }
+        this.flowExecutor.run();
+        this.addLog('Flow execution started.');
+    }
+    /** 플로우 일시정지 */
+    pauseFlow() {
+        var _a;
+        (_a = this.flowExecutor) === null || _a === void 0 ? void 0 : _a.pause();
+        this.addLog('Flow execution paused.');
+    }
+    /** 플로우 정지 */
+    stopFlow() {
+        var _a;
+        (_a = this.flowExecutor) === null || _a === void 0 ? void 0 : _a.stop();
+        this.addLog('Flow execution stopped.');
+    }
+    stepOver() {
+        var _a;
+        (_a = this.flowExecutor) === null || _a === void 0 ? void 0 : _a.stepOver();
+        this.addLog('Flow execution stepOver');
+    }
+    stepInto() {
+        var _a;
+        (_a = this.flowExecutor) === null || _a === void 0 ? void 0 : _a.stepInto();
+        this.addLog('Flow execution stepInto');
+    }
+    stepOut() {
+        var _a;
+        (_a = this.flowExecutor) === null || _a === void 0 ? void 0 : _a.stepOut();
+        this.addLog('Flow execution stepOut');
+    }
+    continueExecution() {
+        var _a;
+        (_a = this.flowExecutor) === null || _a === void 0 ? void 0 : _a.continueExecution();
+        this.addLog('Flow execution continueExecution');
+    }
+    onNodeUpdated(updatedNode) {
+        this.nodes = this.nodes.map(node => (node.id === updatedNode.id ? updatedNode : node));
+        this.requestUpdate();
+    }
+    addLog(log) {
+        this.logs = [...this.logs, log];
+    }
+    toggleBreakpoint(nodeId) {
+        if (this.flowDebugContext.breakpoints.has(nodeId)) {
+            this.flowDebugContext.breakpoints.delete(nodeId);
+            this.addLog(`Breakpoint removed from ${nodeId}`);
+        }
+        else {
+            this.flowDebugContext.breakpoints.add(nodeId);
+            this.addLog(`Breakpoint added to ${nodeId}`);
+        }
+    }
+    setCurrentExecutionNode(nodeId) {
+        this.flowDebugContext.currentExecutionNode = nodeId;
+        this.requestUpdate();
+    }
+    runLayout() {
+        const g = new dagre.graphlib.Graph();
+        g.setGraph({ rankdir: 'TB', nodesep: 20, ranksep: 100 });
+        g.setDefaultEdgeLabel(() => ({}));
+        this.nodes.forEach(node => {
+            g.setNode(node.id, { width: 120, height: 40 });
+        });
+        /* 밸런스 배치를 위한 소팅 */
+        this.edges = this.edges.sort((a, b) => { var _a, _b; return ((_a = a.weight) !== null && _a !== void 0 ? _a : 0) - ((_b = b.weight) !== null && _b !== void 0 ? _b : 0); });
+        this.edges.forEach(edge => {
+            g.setEdge(edge.from.nodeId, edge.to.nodeId, { weight: edge.weight });
+        });
+        dagre.layout(g);
+        const offsetX = 200;
+        const offsetY = 100;
+        g.nodes().forEach((nodeId) => {
+            const node = this.nodes.find(n => n.id === nodeId);
+            const nodeData = g.node(nodeId);
+            if (node && nodeData) {
+                node.pos = { x: nodeData.x + offsetX, y: nodeData.y + offsetY };
+            }
+        });
+        this.requestUpdate();
+    }
+    onDblClick(e) {
+        const edgeElement = e.target.closest('.edge');
+        if (!edgeElement) {
+            return;
+        }
+        const id = edgeElement.dataset.id;
+        const edge = this.edges.find(edge => edge.id == id);
+        if (!edge) {
+            return;
+        }
+        const popup = OxPopup.open({
+            template: html `
+        <data-mapper-popup
+          .nodes=${this.flowContext.nodes}
+          .edge=${edge}
+          @change=${(e) => {
+                e.stopPropagation();
+                const model = { dataMappings: e.detail };
+                this.flowEditContext.updateEntity(edge, model);
+                popup.close();
+                this.requestUpdate();
+            }}
+        ></data-mapper-popup>
+      `,
+            style: 'width: 80vw; height: 80vh;',
+            preventCloseOnBlur: true,
+            backdrop: true
+        });
+    }
+};
+OxFlowEditor.styles = [
+    css `
+      :host {
+        display: flex;
+        position: relative;
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+      }
+
+      flow-sidebar {
+        position: absolute;
+        left: 0;
+        top: 0;
+        margin: 10px;
+        background-color: #f0f0f0;
+        border-right: 1px solid #ccc;
+        border-radius: 6px;
+        z-index: 1;
+      }
+
+      flow-toolbar {
+        position: absolute;
+        display: flex;
+        flex-direction: column;
+        top: 10px;
+        gap: 10px;
+        right: 10px;
+        z-index: 1;
+      }
+
+      .editor {
+        flex: 1;
+        position: relative;
+        background-color: #f9f9f9;
+        overflow: hidden;
+      }
+
+      svg {
+        width: 100%;
+        height: 100%;
+        background-image: radial-gradient(circle, #ccc 1px, transparent 1px);
+        background-size: 20px 20px;
+      }
+    `,
+    FlowNodeAbstract.styles,
+    FlowEdgeInstance.styles
+];
+__decorate([
+    property({ type: Object })
+], OxFlowEditor.prototype, "availableNodeTypes", void 0);
+__decorate([
+    property({ type: Object })
+], OxFlowEditor.prototype, "model", void 0);
+__decorate([
+    state()
+], OxFlowEditor.prototype, "mode", void 0);
+__decorate([
+    state()
+], OxFlowEditor.prototype, "logs", void 0);
+__decorate([
+    state()
+], OxFlowEditor.prototype, "edgeGuide", void 0);
+__decorate([
+    state()
+], OxFlowEditor.prototype, "_nodes", void 0);
+__decorate([
+    state()
+], OxFlowEditor.prototype, "_edges", void 0);
+__decorate([
+    state()
+], OxFlowEditor.prototype, "_selected", void 0);
+__decorate([
+    provide({ context: flowContext })
+], OxFlowEditor.prototype, "flowContext", void 0);
+__decorate([
+    provide({ context: flowEditContext })
+], OxFlowEditor.prototype, "flowEditContext", void 0);
+__decorate([
+    provide({ context: flowDebugContext })
+], OxFlowEditor.prototype, "flowDebugContext", void 0);
+OxFlowEditor = __decorate([
+    customElement('ox-flow-editor')
+], OxFlowEditor);
+export { OxFlowEditor };
+//# sourceMappingURL=ox-flow-editor.js.map

package/dist/src/ox-flow-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-flow-editor.js","sourceRoot":"","sources":["../../src/ox-flow-editor.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,8BAA8B,CAAA;AACrC,OAAO,8BAA8B,CAAA;AACrC,OAAO,iCAAiC,CAAA;AAExC,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,EAAkB,OAAO,EAAE,MAAM,KAAK,CAAA;AACzE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAClE,OAAO,KAAK,MAAM,WAAW,CAAA;AAC7B,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AAExC,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAA;AAY5D,OAAO,EAAE,WAAW,EAAmB,MAAM,2BAA2B,CAAA;AACxE,OAAO,EAAE,gBAAgB,EAAwB,MAAM,iCAAiC,CAAA;AACxF,OAAO,EAAE,eAAe,EAAuB,MAAM,gCAAgC,CAAA;AACrF,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAA;AAC/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAA;AAE/D,OAAO,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAA;AACzE,OAAO,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAA;AACzE,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAA;AAEjE,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAInC,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IAArC;;QAsDuB,uBAAkB,GAA+C,EAAE,CAAA;QACnE,UAAK,GAAuD,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,CAAA;QAE/F,SAAI,GAAe,MAAM,CAAA;QACzB,SAAI,GAAa,EAAE,CAAA;QACnB,cAAS,GAOf,IAAI,CAAA;QAIE,WAAM,GAAe,EAAE,CAAA;QACvB,WAAM,GAAe,EAAE,CAAA;QAEvB,cAAS,GAAsB,IAAI,CAAA;QAE5C,wBAAmB,GAAG,IAAI,mBAAmB,CAAC,IAAI,CAAC,CAAA;QACnD,wBAAmB,GAAG,IAAI,mBAAmB,CAAC,IAAI,CAAC,CAAA;QACnD,oBAAe,GAAG,IAAI,eAAe,CAAC,IAAI,CAAC,CAAA;QAG3C,gBAAW,GAAoB;YACrC,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,OAAO,EAAE,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;YACnC,MAAM,EAAE,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC;YAC/B,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,kBAAkB,EAAE,IAAI,CAAC,kBAAkB,IAAI,EAAE;YACjD,qBAAqB,EAAE,CAAC,kBAA8D,EAAE,EAAE,CACxF,IAAI,CAAC,qBAAqB,CAAC,kBAAkB,CAAC;YAChD,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,YAAY;gBACV,OAAO,SAAS,CAAA;YAClB,CAAC;YACD,WAAW,CAAC,QAAgB;gBAC1B,OAAO,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,IAAI,QAAQ,CAAE,CAAA;YACvD,CAAC;SACF,CAAA;QAGO,oBAAe,GAAwB;YAC7C,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE;YAEjC,YAAY,EAAE,CAAC,MAAkB,EAAE,KAA+B,EAAE,EAAE;gBACpE,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;gBACpB,IAAI,CAAC,aAAa,EAAE,CAAA;YACtB,CAAC;YAED,aAAa,EAAE,CAAC,MAAkB,EAAE,OAA+B,EAAE,EAAE;gBACrE,MAAM,CAAC,aAAa,CAAC,OAAO,CAAC,CAAA;gBAC7B,IAAI,CAAC,aAAa,EAAE,CAAA;YACtB,CAAC;SACF,CAAA;QAGO,qBAAgB,GAAyB;YAC/C,WAAW,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE;YACrC,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE;YACjC,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE;YAC/B,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE;YAC/B,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE;YAC/B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE;YAC7B,iBAAiB,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,iBAAiB,EAAE;YAEjD,aAAa,EAAE,MAAM,CAAC,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC;YACtD,WAAW,EAAE,IAAI,GAAG,EAAE;YACtB,oBAAoB,EAAE,IAAI;YAC1B,uBAAuB,EAAE,MAAM,CAAC,EAAE,CAAC,IAAI,CAAC,uBAAuB,CAAC,MAAM,CAAC;SACxE,CAAA;IA0TH,CAAC;IAxYC,MAAM,CAAC,WAAW;QAChB,OAAO,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;IACnD,CAAC;IA8ED,UAAU;IACV,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;yBAMU,IAAI,CAAC,UAAU;YAC5B,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;YACrC,IAAI,CAAC,SAAS;YACd,CAAC,CAAC,GAAG,CAAA,cAAc,IAAI,CAAC,SAAS,CAAC,KAAK,IAAI,IAAI,CAAC,SAAS,CAAC,KAAK,MAAM,IAAI,CAAC,SAAS,CAAC,GAAG,IAAI,IAAI,CAAC,SAAS,CAAC,GAAG;;cAE3G;YACF,CAAC,CAAC,OAAO;YACT,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;;;;;KAK5C,CAAA;IACH,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;QAEzB,IAAI,CAAC,mBAAmB,CAAC,iBAAiB,EAAE,CAAA;QAC5C,IAAI,CAAC,mBAAmB,CAAC,iBAAiB,EAAE,CAAA;QAC5C,IAAI,CAAC,eAAe,CAAC,iBAAiB,EAAE,CAAA;QAExC,IAAI,CAAC,WAAW,GAAG;YACjB,GAAG,IAAI,CAAC,WAAW;YACnB,kBAAkB,EAAE,IAAI,CAAC,kBAAkB;SAC5C,CAAA;IACH,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAA;QAE5B,IAAI,CAAC,mBAAmB,CAAC,oBAAoB,EAAE,CAAA;QAC/C,IAAI,CAAC,mBAAmB,CAAC,oBAAoB,EAAE,CAAA;QAC/C,IAAI,CAAC,eAAe,CAAC,oBAAoB,EAAE,CAAA;IAC7C,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACzB,MAAM,EAAE,KAAK,GAAG,EAAE,EAAE,KAAK,GAAG,EAAE,EAAE,GAAG,IAAI,CAAC,KAAK,CAAA;YAE7C,IAAI,CAAC,MAAM,GAAG,KAAK;iBAChB,GAAG,CAAC,IAAI,CAAC,EAAE;gBACV,MAAM,KAAK,GAAG,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;gBAEhD,IAAI,KAAK,EAAE,CAAC;oBACV,OAAO,IAAI,KAAK,CAAC,IAAI,CAAC,CAAA;gBACxB,CAAC;YACH,CAAC,CAAC;iBACD,MAAM,CAAC,OAAO,CAAe,CAAA;YAEhC,IAAI,CAAC,MAAM,GAAG,KAAK;iBAChB,GAAG,CAAC,IAAI,CAAC,EAAE;gBACV,MAAM,EAAE,IAAI,EAAE,EAAE,EAAE,GAAG,IAAI,CAAA;gBACzB,MAAM,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,MAAM,CAAC,CAAA;gBACjE,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC,MAAM,CAAC,CAAA;gBAC7D,MAAM,UAAU,GAAG,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;gBACtD,MAAM,QAAQ,GAAG,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAA;gBAEhD,IAAI,UAAU,IAAI,QAAQ,EAAE,CAAC;oBAC3B,OAAO,IAAI,gBAAgB,CAAC,IAAI,EAAE,QAAS,EAAE,MAAO,CAAC,CAAA;gBACvD,CAAC;YACH,CAAC,CAAC;iBACD,MAAM,CAAC,OAAO,CAAe,CAAA;YAEhC,IAAI,CAAC,WAAW,GAAG;gBACjB,GAAG,IAAI,CAAC,WAAW;gBACnB,KAAK,EAAE,IAAI,CAAC,MAAM;gBAClB,KAAK,EAAE,IAAI,CAAC,MAAM;aACnB,CAAA;QACH,CAAC;IACH,CAAC;IAED,qBAAqB,CAAC,kBAA8D;QAClF,IAAI,CAAC,kBAAkB,GAAG,kBAAkB,CAAA;QAE5C,IAAI,CAAC,WAAW,GAAG;YACjB,GAAG,IAAI,CAAC,WAAW;YACnB,kBAAkB;SACnB,CAAA;IACH,CAAC;IAED,IAAI,OAAO;QACT,OAAO,IAAI,CAAC,WAAW,CAAA;IACzB,CAAC;IAED,QAAQ;QACN,OAAO;YACL,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;gBAC3B,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,IAAI,CAAA;gBACpD,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,CAAA;YAChD,CAAC,CAAC;YACF,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;gBAC3B,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,GAAG,IAAI,CAAA;gBAC5C,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,CAAA;YACxC,CAAC,CAAC;SACH,CAAA;IACH,CAAC;IAED,IAAI,KAAK;QACP,OAAO,IAAI,CAAC,MAAM,CAAA;IACpB,CAAC;IAED,IAAI,KAAK,CAAC,KAAK;QACb,IAAI,CAAC,MAAM,GAAG,KAAK,CAAA;IACrB,CAAC;IAED,IAAI,KAAK;QACP,OAAO,IAAI,CAAC,MAAM,CAAA;IACpB,CAAC;IAED,IAAI,KAAK,CAAC,KAAK;QACb,IAAI,CAAC,MAAM,GAAG,KAAK,CAAA;IACrB,CAAC;IAED,IAAI,QAAQ;QACV,OAAO,IAAI,CAAC,SAAS,CAAA;IACvB,CAAC;IAED,iBAAiB,CAAC,OAAiC;QACjD,IAAI,CAAC,WAAW,GAAG;YACjB,GAAG,IAAI,CAAC,WAAW;YACnB,GAAG,OAAO;SACX,CAAA;IACH,CAAC;IAED,IAAI,QAAQ,CAAC,QAA2B;QACtC,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAA;QAEzB,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,EAAE,KAAI,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,EAAE,CAAA,CAAC,CAAC,CAAA;QACrE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,EAAE,KAAI,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,EAAE,CAAA,CAAC,CAAC,CAAA;QAErE,IAAI,CAAC,iBAAiB,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAA;IACtC,CAAC;IAED,WAAW,CAAC,IAAc,EAAE,aAAsB,IAAI;QACpD,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,CAAA;QAClC,IAAI,UAAU,EAAE,CAAC;YACf,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAA;QACtB,CAAC;IACH,CAAC;IAED,WAAW,CAAC,IAAc,EAAE,aAAsB,IAAI;QACpD,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,CAAA;QAClC,IAAI,UAAU,EAAE,CAAC;YACf,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAA;QACtB,CAAC;IACH,CAAC;IAED,aAAa,CAAC,SAAc;QAC1B,IAAI,CAAC,SAAS,GAAG,SAAS,CAAA;QAC1B,IAAI,CAAC,aAAa,EAAE,CAAA;IACtB,CAAC;IAED,YAAY;IACL,YAAY,CAAC,MAAkB;QACpC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,MAAM,CAAC,EAAE,CAAC,CAAA;QAC7D,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAC5B,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,MAAM,CAAC,EAAE,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,KAAK,MAAM,CAAC,EAAE,IAAI,IAAI,CAAC,EAAE,CAAC,MAAM,KAAK,MAAM,CAAC,EAAE,CAChG,CAAA;QAED,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAA;IACtB,CAAC;IAEO,OAAO,CAAC,IAAgB;QAC9B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAA;QAEhB,IAAI,CAAC,WAAW,GAAG;YACjB,GAAG,IAAI,CAAC,WAAW;YACnB,IAAI;SACL,CAAA;IACH,CAAC;IAED,aAAa;IACL,WAAW;QACjB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;YACvB,IAAI,CAAC,YAAY,GAAG,IAAI,YAAY,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAA;QAC9D,CAAC;QACD,IAAI,CAAC,YAAY,CAAC,GAAG,EAAE,CAAA;QACvB,IAAI,CAAC,MAAM,CAAC,yBAAyB,CAAC,CAAA;IACxC,CAAC;IAED,eAAe;IACP,SAAS;;QACf,MAAA,IAAI,CAAC,YAAY,0CAAE,KAAK,EAAE,CAAA;QAC1B,IAAI,CAAC,MAAM,CAAC,wBAAwB,CAAC,CAAA;IACvC,CAAC;IAED,aAAa;IACL,QAAQ;;QACd,MAAA,IAAI,CAAC,YAAY,0CAAE,IAAI,EAAE,CAAA;QACzB,IAAI,CAAC,MAAM,CAAC,yBAAyB,CAAC,CAAA;IACxC,CAAC;IAEO,QAAQ;;QACd,MAAA,IAAI,CAAC,YAAY,0CAAE,QAAQ,EAAE,CAAA;QAC7B,IAAI,CAAC,MAAM,CAAC,yBAAyB,CAAC,CAAA;IACxC,CAAC;IAEO,QAAQ;;QACd,MAAA,IAAI,CAAC,YAAY,0CAAE,QAAQ,EAAE,CAAA;QAC7B,IAAI,CAAC,MAAM,CAAC,yBAAyB,CAAC,CAAA;IACxC,CAAC;IAEO,OAAO;;QACb,MAAA,IAAI,CAAC,YAAY,0CAAE,OAAO,EAAE,CAAA;QAC5B,IAAI,CAAC,MAAM,CAAC,wBAAwB,CAAC,CAAA;IACvC,CAAC;IAEO,iBAAiB;;QACvB,MAAA,IAAI,CAAC,YAAY,0CAAE,iBAAiB,EAAE,CAAA;QACtC,IAAI,CAAC,MAAM,CAAC,kCAAkC,CAAC,CAAA;IACjD,CAAC;IAEM,aAAa,CAAC,WAAqB;QACxC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,EAAE,KAAK,WAAW,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAA;QACtF,IAAI,CAAC,aAAa,EAAE,CAAA;IACtB,CAAC;IAEM,MAAM,CAAC,GAAW;QACvB,IAAI,CAAC,IAAI,GAAG,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,CAAA;IACjC,CAAC;IAEO,gBAAgB,CAAC,MAAc;QACrC,IAAI,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC;YAClD,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAAC,MAAM,CAAC,MAAM,CAAC,CAAA;YAChD,IAAI,CAAC,MAAM,CAAC,2BAA2B,MAAM,EAAE,CAAC,CAAA;QAClD,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAAC,GAAG,CAAC,MAAM,CAAC,CAAA;YAC7C,IAAI,CAAC,MAAM,CAAC,uBAAuB,MAAM,EAAE,CAAC,CAAA;QAC9C,CAAC;IACH,CAAC;IAEO,uBAAuB,CAAC,MAAqB;QACnD,IAAI,CAAC,gBAAgB,CAAC,oBAAoB,GAAG,MAAM,CAAA;QACnD,IAAI,CAAC,aAAa,EAAE,CAAA;IACtB,CAAC;IAEO,SAAS;QACf,MAAM,CAAC,GAAG,IAAI,KAAK,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAA;QAEpC,CAAC,CAAC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,CAAA;QACxD,CAAC,CAAC,mBAAmB,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;QAEjC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YACxB,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAA;QAChD,CAAC,CAAC,CAAA;QAEF,mBAAmB;QACnB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,eAAC,OAAA,CAAC,MAAA,CAAC,CAAC,MAAM,mCAAI,CAAC,CAAC,GAAG,CAAC,MAAA,CAAC,CAAC,MAAM,mCAAI,CAAC,CAAC,CAAA,EAAA,CAAC,CAAA;QAEzE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YACxB,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,MAAM,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAA;QACtE,CAAC,CAAC,CAAA;QAEF,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAA;QAEf,MAAM,OAAO,GAAG,GAAG,CAAA;QACnB,MAAM,OAAO,GAAG,GAAG,CAAA;QAEnB,CAAC,CAAC,KAAK,EAAE,CAAC,OAAO,CAAC,CAAC,MAAc,EAAE,EAAE;YACnC,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,MAAM,CAAC,CAAA;YAClD,MAAM,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;YAC/B,IAAI,IAAI,IAAI,QAAQ,EAAE,CAAC;gBACrB,IAAI,CAAC,GAAG,GAAG,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC,GAAG,OAAO,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC,GAAG,OAAO,EAAE,CAAA;YACjE,CAAC;QACH,CAAC,CAAC,CAAA;QAEF,IAAI,CAAC,aAAa,EAAE,CAAA;IACtB,CAAC;IAEO,UAAU,CAAC,CAAe;QAChC,MAAM,WAAW,GAAI,CAAC,CAAC,MAAsB,CAAC,OAAO,CAAC,OAAO,CAAgB,CAAA;QAC7E,IAAI,CAAC,WAAW,EAAE,CAAC;YACjB,OAAM;QACR,CAAC;QAED,MAAM,EAAE,GAAG,WAAW,CAAC,OAAO,CAAC,EAAE,CAAA;QACjC,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAK,CAAC,EAAE,IAAI,EAAE,CAAC,CAAA;QAEpD,IAAI,CAAC,IAAI,EAAE,CAAC;YACV,OAAM;QACR,CAAC;QAED,MAAM,KAAK,GAAG,OAAO,CAAC,IAAI,CAAC;YACzB,QAAQ,EAAE,IAAI,CAAA;;mBAED,IAAI,CAAC,WAAW,CAAC,KAAK;kBACvB,IAAI;oBACF,CAAC,CAAc,EAAE,EAAE;gBAC3B,CAAC,CAAC,eAAe,EAAE,CAAA;gBACnB,MAAM,KAAK,GAA2B,EAAE,YAAY,EAAE,CAAC,CAAC,MAAM,EAAE,CAAA;gBAChE,IAAI,CAAC,eAAgB,CAAC,YAAY,CAAC,IAAI,EAAE,KAAK,CAAC,CAAA;gBAE/C,KAAK,CAAC,KAAK,EAAE,CAAA;gBAEb,IAAI,CAAC,aAAa,EAAE,CAAA;YACtB,CAAC;;OAEJ;YACD,KAAK,EAAE,4BAA4B;YACnC,kBAAkB,EAAE,IAAI;YACxB,QAAQ,EAAE,IAAI;SACf,CAAC,CAAA;IACJ,CAAC;;AAxbM,mBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2CF;IACD,gBAAgB,CAAC,MAAM;IACvB,gBAAgB,CAAC,MAAM;CACxB,AA/CY,CA+CZ;AAM2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAAoE;AACnE;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAqF;AAE/F;IAAhB,KAAK,EAAE;0CAAkC;AACzB;IAAhB,KAAK,EAAE;0CAA4B;AACnB;IAAhB,KAAK,EAAE;+CAOO;AAIE;IAAhB,KAAK,EAAE;4CAAgC;AACvB;IAAhB,KAAK,EAAE;4CAAgC;AAEvB;IAAhB,KAAK,EAAE;+CAA4C;AAO5C;IADP,OAAO,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,CAAC;iDAkBjC;AAGO;IADP,OAAO,CAAC,EAAE,OAAO,EAAE,eAAe,EAAE,CAAC;qDAarC;AAGO;IADP,OAAO,CAAC,EAAE,OAAO,EAAE,gBAAgB,EAAE,CAAC;sDActC;AAhIU,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CA0bxB","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport './components/flow-sidebar.js'\nimport './components/flow-toolbar.js'\nimport './components/flow-side-panel.js'\n\nimport { LitElement, html, svg, css, PropertyValues, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport dagre from 'dagre-esm'\nimport { provide } from '@lit/context'\nimport { OxPopup } from '@operato/popup'\n\nimport { FlowExecutor } from './components/flow-executor.js'\nimport {\n  FlowNodeImplementation,\n  FlowNode,\n  FlowEdge,\n  EditorMode,\n  FlowNodeModel,\n  FlowEdgeModel,\n  FlowEntity,\n  FlowEntityModel,\n  TaskType\n} from './types.js'\nimport { flowContext, FlowContextType } from './context/flow-context.js'\nimport { flowDebugContext, FlowDebugContextType } from './context/flow-debug-context.js'\nimport { flowEditContext, FlowEditContextType } from './context/flow-edit-context.js'\nimport { FlowNodeAbstract } from './base/flow-node-abstract.js'\nimport { FlowEdgeInstance } from './base/flow-edge-instance.js'\n\nimport { PointerEventHandler } from './handlers/pointer-event-handler.js'\nimport { KeydownEventHandler } from './handlers/keydown-event-handler.js'\nimport { DndEventHandler } from './handlers/dnd-event-handler.js'\n\nimport { TaskTypes } from './api/tasks.js'\nimport { Task } from './nodes/task.js'\n\n@customElement('ox-flow-editor')\nexport class OxFlowEditor extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        position: relative;\n        width: 100%;\n        height: 100%;\n        box-sizing: border-box;\n      }\n\n      flow-sidebar {\n        position: absolute;\n        left: 0;\n        top: 0;\n        margin: 10px;\n        background-color: #f0f0f0;\n        border-right: 1px solid #ccc;\n        border-radius: 6px;\n        z-index: 1;\n      }\n\n      flow-toolbar {\n        position: absolute;\n        display: flex;\n        flex-direction: column;\n        top: 10px;\n        gap: 10px;\n        right: 10px;\n        z-index: 1;\n      }\n\n      .editor {\n        flex: 1;\n        position: relative;\n        background-color: #f9f9f9;\n        overflow: hidden;\n      }\n\n      svg {\n        width: 100%;\n        height: 100%;\n        background-image: radial-gradient(circle, #ccc 1px, transparent 1px);\n        background-size: 20px 20px;\n      }\n    `,\n    FlowNodeAbstract.styles,\n    FlowEdgeInstance.styles\n  ]\n\n  static getUniqueId() {\n    return Math.random().toString(36).substring(2, 9)\n  }\n\n  @property({ type: Object }) availableNodeTypes: { [type: string]: FlowNodeImplementation } = {}\n  @property({ type: Object }) model: { nodes: FlowNodeModel[]; edges: FlowEdgeModel[] } = { nodes: [], edges: [] }\n\n  @state() private mode: EditorMode = 'edit'\n  @state() private logs: string[] = []\n  @state() private edgeGuide: {\n    fromX: number\n    fromY: number\n    toX: number\n    toY: number\n    weight?: number\n    label?: string\n  } | null = null\n\n  private flowExecutor?: FlowExecutor\n\n  @state() private _nodes: FlowNode[] = []\n  @state() private _edges: FlowEdge[] = []\n\n  @state() private _selected: FlowEntity | null = null\n\n  private pointerEventHandler = new PointerEventHandler(this)\n  private keydownEventHandler = new KeydownEventHandler(this)\n  private dndEventHandler = new DndEventHandler(this)\n\n  @provide({ context: flowContext })\n  private flowContext: FlowContextType = {\n    nodes: this.nodes,\n    edges: this.edges,\n    mode: this.mode,\n    setMode: mode => this.setMode(mode),\n    addLog: log => this.addLog(log),\n    logs: this.logs,\n    availableNodeTypes: this.availableNodeTypes || {},\n    setAvailableNodeTypes: (availableNodeTypes: { [type: string]: FlowNodeImplementation }) =>\n      this.setAvailableNodeTypes(availableNodeTypes),\n    selected: this.selected,\n    getTaskTypes(): TaskType[] {\n      return TaskTypes\n    },\n    getTaskType(taskType: string): TaskType {\n      return TaskTypes.find(type => type.name == taskType)!\n    }\n  }\n\n  @provide({ context: flowEditContext })\n  private flowEditContext: FlowEditContextType = {\n    runLayout: () => this.runLayout(),\n\n    updateEntity: (entity: FlowEntity, model: Partial<FlowEntityModel>) => {\n      entity.update(model)\n      this.requestUpdate()\n    },\n\n    updateOptions: (entity: FlowEntity, options: { [key: string]: any }) => {\n      entity.updateOptions(options)\n      this.requestUpdate()\n    }\n  }\n\n  @provide({ context: flowDebugContext })\n  private flowDebugContext: FlowDebugContextType = {\n    executeFlow: () => this.executeFlow(),\n    pauseFlow: () => this.pauseFlow(),\n    stopFlow: () => this.stopFlow(),\n    stepOver: () => this.stepOver(),\n    stepInto: () => this.stepInto(),\n    stepOut: () => this.stepOut(),\n    continueExecution: () => this.continueExecution(),\n\n    setBreakpoint: nodeId => this.toggleBreakpoint(nodeId),\n    breakpoints: new Set(),\n    currentExecutionNode: null,\n    setCurrentExecutionNode: nodeId => this.setCurrentExecutionNode(nodeId)\n  }\n\n  /** 렌더링 */\n  render() {\n    return html`\n      <flow-sidebar></flow-sidebar>\n\n      <div class=\"editor\">\n        <flow-toolbar></flow-toolbar>\n\n        <svg @dblclick=${this.onDblClick}>\n          ${this.edges.map(edge => edge.render())}\n          ${this.edgeGuide\n            ? svg`<path d=\"M ${this.edgeGuide.fromX},${this.edgeGuide.fromY} L ${this.edgeGuide.toX},${this.edgeGuide.toY}\"\n           stroke=\"#aaa\" stroke-dasharray=\"5,5\" stroke-width=\"2\" fill=\"none\" \n           />`\n            : nothing}\n          ${this.nodes.map(node => node.render())}\n        </svg>\n      </div>\n\n      <flow-side-panel></flow-side-panel>\n    `\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    this.pointerEventHandler.addEventListeners()\n    this.keydownEventHandler.addEventListeners()\n    this.dndEventHandler.addEventListeners()\n\n    this.flowContext = {\n      ...this.flowContext,\n      availableNodeTypes: this.availableNodeTypes\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n\n    this.keydownEventHandler.removeEventListeners()\n    this.pointerEventHandler.removeEventListeners()\n    this.dndEventHandler.removeEventListeners()\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('model')) {\n      const { edges = [], nodes = [] } = this.model\n\n      this._nodes = nodes\n        .map(node => {\n          const clazz = this.availableNodeTypes[node.type]\n\n          if (clazz) {\n            return new clazz(node)\n          }\n        })\n        .filter(Boolean) as FlowNode[]\n\n      this._edges = edges\n        .map(edge => {\n          const { from, to } = edge\n          const fromNode = this._nodes.find(node => node.id == from.nodeId)\n          const toNode = this._nodes.find(node => node.id == to.nodeId)\n          const fromAnchor = fromNode?.findAnchor(from.anchorId)\n          const toAnchor = toNode?.findAnchor(to.anchorId)\n\n          if (fromAnchor && toAnchor) {\n            return new FlowEdgeInstance(edge, fromNode!, toNode!)\n          }\n        })\n        .filter(Boolean) as FlowEdge[]\n\n      this.flowContext = {\n        ...this.flowContext,\n        nodes: this._nodes,\n        edges: this._edges\n      }\n    }\n  }\n\n  setAvailableNodeTypes(availableNodeTypes: { [type: string]: FlowNodeImplementation }) {\n    this.availableNodeTypes = availableNodeTypes\n\n    this.flowContext = {\n      ...this.flowContext,\n      availableNodeTypes\n    }\n  }\n\n  get context() {\n    return this.flowContext\n  }\n\n  getModel() {\n    return {\n      nodes: this.nodes.map(node => {\n        const { id, label, type, pos, size, options } = node\n        return { id, label, type, pos, size, options }\n      }),\n      edges: this.edges.map(edge => {\n        const { id, label, from, to, weight } = edge\n        return { id, label, from, to, weight }\n      })\n    }\n  }\n\n  get nodes() {\n    return this._nodes\n  }\n\n  set nodes(nodes) {\n    this._nodes = nodes\n  }\n\n  get edges() {\n    return this._edges\n  }\n\n  set edges(edges) {\n    this._edges = edges\n  }\n\n  get selected(): FlowEntity | null {\n    return this._selected\n  }\n\n  updateFlowContext(partial: Partial<FlowContextType>) {\n    this.flowContext = {\n      ...this.flowContext,\n      ...partial\n    }\n  }\n\n  set selected(selected: FlowEntity | null) {\n    this._selected = selected\n\n    this.nodes.forEach(node => (node.selected = node.id == selected?.id))\n    this.edges.forEach(edge => (edge.selected = edge.id == selected?.id))\n\n    this.updateFlowContext({ selected })\n  }\n\n  addFlowNode(node: FlowNode, withSelect: boolean = true) {\n    this.nodes = [...this.nodes, node]\n    if (withSelect) {\n      this.selected = node\n    }\n  }\n\n  addFlowEdge(edge: FlowEdge, withSelect: boolean = true) {\n    this.edges = [...this.edges, edge]\n    if (withSelect) {\n      this.selected = edge\n    }\n  }\n\n  drawEdgeGuide(edgeGuide: any) {\n    this.edgeGuide = edgeGuide\n    this.requestUpdate()\n  }\n\n  /** 노드 삭제 */\n  public deleteEntity(target: FlowEntity) {\n    this.nodes = this.nodes.filter(node => node.id !== target.id)\n    this.edges = this.edges.filter(\n      edge => edge.id !== target.id && edge.from.nodeId !== target.id && edge.to.nodeId !== target.id\n    )\n\n    this.selected = null\n  }\n\n  private setMode(mode: EditorMode) {\n    this.mode = mode\n\n    this.flowContext = {\n      ...this.flowContext,\n      mode\n    }\n  }\n\n  /** 플로우 실행 */\n  private executeFlow() {\n    if (!this.flowExecutor) {\n      this.flowExecutor = new FlowExecutor(this.nodes, this.edges)\n    }\n    this.flowExecutor.run()\n    this.addLog('Flow execution started.')\n  }\n\n  /** 플로우 일시정지 */\n  private pauseFlow() {\n    this.flowExecutor?.pause()\n    this.addLog('Flow execution paused.')\n  }\n\n  /** 플로우 정지 */\n  private stopFlow() {\n    this.flowExecutor?.stop()\n    this.addLog('Flow execution stopped.')\n  }\n\n  private stepOver() {\n    this.flowExecutor?.stepOver()\n    this.addLog('Flow execution stepOver')\n  }\n\n  private stepInto() {\n    this.flowExecutor?.stepInto()\n    this.addLog('Flow execution stepInto')\n  }\n\n  private stepOut() {\n    this.flowExecutor?.stepOut()\n    this.addLog('Flow execution stepOut')\n  }\n\n  private continueExecution() {\n    this.flowExecutor?.continueExecution()\n    this.addLog('Flow execution continueExecution')\n  }\n\n  public onNodeUpdated(updatedNode: FlowNode) {\n    this.nodes = this.nodes.map(node => (node.id === updatedNode.id ? updatedNode : node))\n    this.requestUpdate()\n  }\n\n  public addLog(log: string) {\n    this.logs = [...this.logs, log]\n  }\n\n  private toggleBreakpoint(nodeId: string) {\n    if (this.flowDebugContext.breakpoints.has(nodeId)) {\n      this.flowDebugContext.breakpoints.delete(nodeId)\n      this.addLog(`Breakpoint removed from ${nodeId}`)\n    } else {\n      this.flowDebugContext.breakpoints.add(nodeId)\n      this.addLog(`Breakpoint added to ${nodeId}`)\n    }\n  }\n\n  private setCurrentExecutionNode(nodeId: string | null) {\n    this.flowDebugContext.currentExecutionNode = nodeId\n    this.requestUpdate()\n  }\n\n  private runLayout() {\n    const g = new dagre.graphlib.Graph()\n\n    g.setGraph({ rankdir: 'TB', nodesep: 20, ranksep: 100 })\n    g.setDefaultEdgeLabel(() => ({}))\n\n    this.nodes.forEach(node => {\n      g.setNode(node.id, { width: 120, height: 40 })\n    })\n\n    /* 밸런스 배치를 위한 소팅 */\n    this.edges = this.edges.sort((a, b) => (a.weight ?? 0) - (b.weight ?? 0))\n\n    this.edges.forEach(edge => {\n      g.setEdge(edge.from.nodeId, edge.to.nodeId, { weight: edge.weight })\n    })\n\n    dagre.layout(g)\n\n    const offsetX = 200\n    const offsetY = 100\n\n    g.nodes().forEach((nodeId: string) => {\n      const node = this.nodes.find(n => n.id === nodeId)\n      const nodeData = g.node(nodeId)\n      if (node && nodeData) {\n        node.pos = { x: nodeData.x + offsetX, y: nodeData.y + offsetY }\n      }\n    })\n\n    this.requestUpdate()\n  }\n\n  private onDblClick(e: PointerEvent) {\n    const edgeElement = (e.target as HTMLElement).closest('.edge') as HTMLElement\n    if (!edgeElement) {\n      return\n    }\n\n    const id = edgeElement.dataset.id\n    const edge = this.edges.find(edge => edge!.id == id)\n\n    if (!edge) {\n      return\n    }\n\n    const popup = OxPopup.open({\n      template: html`\n        <data-mapper-popup\n          .nodes=${this.flowContext.nodes}\n          .edge=${edge}\n          @change=${(e: CustomEvent) => {\n            e.stopPropagation()\n            const model: Partial<FlowEdgeModel> = { dataMappings: e.detail }\n            this.flowEditContext!.updateEntity(edge, model)\n\n            popup.close()\n\n            this.requestUpdate()\n          }}\n        ></data-mapper-popup>\n      `,\n      style: 'width: 80vw; height: 80vh;',\n      preventCloseOnBlur: true,\n      backdrop: true\n    })\n  }\n}\n"]}

package/dist/src/ox-flow-monitor.d.ts

@@ -0,0 +1,24 @@
+import { LitElement } from 'lit';
+interface NodeExecutionStatus {
+    nodeId: string;
+    status: 'idle' | 'running' | 'success' | 'error';
+    logs: string[];
+}
+interface EdgeExecutionStatus {
+    edgeId: string;
+    status: 'active' | 'inactive';
+}
+export declare class OxFlowMonitor extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** 실행 상태 */
+    nodeStatuses: NodeExecutionStatus[];
+    edgeStatuses: EdgeExecutionStatus[];
+    render(): import("lit-html").TemplateResult<1>;
+    /** 노드 상태 렌더링 */
+    private renderNodeStatus;
+    /** 외부에서 실행 상태 업데이트 */
+    updateNodeStatus(nodeId: string, status: NodeExecutionStatus['status'], log?: string): void;
+    /** 엣지 활성화 상태 업데이트 */
+    updateEdgeStatus(edgeId: string, status: EdgeExecutionStatus['status']): void;
+}
+export {};

package/dist/src/ox-flow-monitor.js

@@ -0,0 +1,117 @@
+import { __decorate } from "tslib";
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+let OxFlowMonitor = class OxFlowMonitor extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** 실행 상태 */
+        this.nodeStatuses = [];
+        this.edgeStatuses = [];
+    }
+    render() {
+        return html `
+      <div class="monitor-header">Flow Execution Monitor</div>
+      <div class="execution-list">${this.nodeStatuses.map(status => this.renderNodeStatus(status))}</div>
+    `;
+    }
+    /** 노드 상태 렌더링 */
+    renderNodeStatus(status) {
+        return html `
+      <div class="node-status ${status.status}">
+        <strong>Node: ${status.nodeId}</strong> — <em>${status.status}</em>
+        ${status.logs.map(log => html `<div class="log">${log}</div>`)}
+      </div>
+    `;
+    }
+    /** 외부에서 실행 상태 업데이트 */
+    updateNodeStatus(nodeId, status, log) {
+        const index = this.nodeStatuses.findIndex(s => s.nodeId === nodeId);
+        if (index !== -1) {
+            const updatedStatus = { ...this.nodeStatuses[index] };
+            updatedStatus.status = status;
+            if (log)
+                updatedStatus.logs.push(log);
+            this.nodeStatuses = [...this.nodeStatuses.slice(0, index), updatedStatus, ...this.nodeStatuses.slice(index + 1)];
+        }
+        else {
+            this.nodeStatuses = [...this.nodeStatuses, { nodeId, status, logs: log ? [log] : [] }];
+        }
+    }
+    /** 엣지 활성화 상태 업데이트 */
+    updateEdgeStatus(edgeId, status) {
+        const index = this.edgeStatuses.findIndex(e => e.edgeId === edgeId);
+        if (index !== -1) {
+            const updatedEdge = { ...this.edgeStatuses[index], status };
+            this.edgeStatuses = [...this.edgeStatuses.slice(0, index), updatedEdge, ...this.edgeStatuses.slice(index + 1)];
+        }
+        else {
+            this.edgeStatuses = [...this.edgeStatuses, { edgeId, status }];
+        }
+    }
+};
+OxFlowMonitor.styles = css `
+    :host {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      height: 100%;
+      border: 1px solid #ccc;
+      font-family: Arial, sans-serif;
+    }
+
+    .monitor-header {
+      padding: 10px;
+      background-color: #f0f0f0;
+      border-bottom: 1px solid #ddd;
+      font-weight: bold;
+    }
+
+    .execution-list {
+      flex: 1;
+      overflow: auto;
+      padding: 10px;
+    }
+
+    .node-status {
+      padding: 8px;
+      border: 1px solid #ddd;
+      border-radius: 4px;
+      margin-bottom: 8px;
+      background-color: #fff;
+    }
+
+    .node-status.running {
+      border-color: #007acc;
+      background-color: #e3f2fd;
+    }
+
+    .node-status.success {
+      border-color: #4caf50;
+      background-color: #e8f5e9;
+    }
+
+    .node-status.error {
+      border-color: #f44336;
+      background-color: #ffebee;
+    }
+
+    .log {
+      font-size: 12px;
+      background-color: #f9f9f9;
+      padding: 5px;
+      border-radius: 3px;
+      margin-top: 5px;
+      white-space: pre-wrap;
+    }
+  `;
+__decorate([
+    property({ type: Array })
+], OxFlowMonitor.prototype, "nodeStatuses", void 0);
+__decorate([
+    property({ type: Array })
+], OxFlowMonitor.prototype, "edgeStatuses", void 0);
+OxFlowMonitor = __decorate([
+    customElement('ox-flow-monitor')
+], OxFlowMonitor);
+export { OxFlowMonitor };
+//# sourceMappingURL=ox-flow-monitor.js.map

package/dist/src/ox-flow-monitor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-flow-monitor.js","sourceRoot":"","sources":["../../src/ox-flow-monitor.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { customElement, state, property } from 'lit/decorators.js'\nimport { provide, consume } from '@lit/context'\n\ninterface NodeExecutionStatus {\n  nodeId: string\n  status: 'idle' | 'running' | 'success' | 'error'\n  logs: string[]\n}\n\ninterface EdgeExecutionStatus {\n  edgeId: string\n  status: 'active' | 'inactive'\n}\n\n@customElement('ox-flow-monitor')\nexport class OxFlowMonitor extends LitElement {\n  static styles = css`\n    :host {\n      display: flex;\n      flex-direction: column;\n      width: 100%;\n      height: 100%;\n      border: 1px solid #ccc;\n      font-family: Arial, sans-serif;\n    }\n\n    .monitor-header {\n      padding: 10px;\n      background-color: #f0f0f0;\n      border-bottom: 1px solid #ddd;\n      font-weight: bold;\n    }\n\n    .execution-list {\n      flex: 1;\n      overflow: auto;\n      padding: 10px;\n    }\n\n    .node-status {\n      padding: 8px;\n      border: 1px solid #ddd;\n      border-radius: 4px;\n      margin-bottom: 8px;\n      background-color: #fff;\n    }\n\n    .node-status.running {\n      border-color: #007acc;\n      background-color: #e3f2fd;\n    }\n\n    .node-status.success {\n      border-color: #4caf50;\n      background-color: #e8f5e9;\n    }\n\n    .node-status.error {\n      border-color: #f44336;\n      background-color: #ffebee;\n    }\n\n    .log {\n      font-size: 12px;\n      background-color: #f9f9f9;\n      padding: 5px;\n      border-radius: 3px;\n      margin-top: 5px;\n      white-space: pre-wrap;\n    }\n  `\n\n  /** 실행 상태 */\n  @property({ type: Array }) nodeStatuses: NodeExecutionStatus[] = []\n  @property({ type: Array }) edgeStatuses: EdgeExecutionStatus[] = []\n\n  render() {\n    return html`\n      <div class=\"monitor-header\">Flow Execution Monitor</div>\n      <div class=\"execution-list\">${this.nodeStatuses.map(status => this.renderNodeStatus(status))}</div>\n    `\n  }\n\n  /** 노드 상태 렌더링 */\n  private renderNodeStatus(status: NodeExecutionStatus) {\n    return html`\n      <div class=\"node-status ${status.status}\">\n        <strong>Node: ${status.nodeId}</strong> — <em>${status.status}</em>\n        ${status.logs.map(log => html`<div class=\"log\">${log}</div>`)}\n      </div>\n    `\n  }\n\n  /** 외부에서 실행 상태 업데이트 */\n  public updateNodeStatus(nodeId: string, status: NodeExecutionStatus['status'], log?: string) {\n    const index = this.nodeStatuses.findIndex(s => s.nodeId === nodeId)\n    if (index !== -1) {\n      const updatedStatus = { ...this.nodeStatuses[index] }\n      updatedStatus.status = status\n      if (log) updatedStatus.logs.push(log)\n      this.nodeStatuses = [...this.nodeStatuses.slice(0, index), updatedStatus, ...this.nodeStatuses.slice(index + 1)]\n    } else {\n      this.nodeStatuses = [...this.nodeStatuses, { nodeId, status, logs: log ? [log] : [] }]\n    }\n  }\n\n  /** 엣지 활성화 상태 업데이트 */\n  public updateEdgeStatus(edgeId: string, status: EdgeExecutionStatus['status']) {\n    const index = this.edgeStatuses.findIndex(e => e.edgeId === edgeId)\n    if (index !== -1) {\n      const updatedEdge = { ...this.edgeStatuses[index], status }\n      this.edgeStatuses = [...this.edgeStatuses.slice(0, index), updatedEdge, ...this.edgeStatuses.slice(index + 1)]\n    } else {\n      this.edgeStatuses = [...this.edgeStatuses, { edgeId, status }]\n    }\n  }\n}\n"]}

package/dist/src/property-editors/ox-input-anchors.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import '@material/web/icon/icon.js';
+import { OxFormField } from '@operato/input';
+import { AnchorModel } from '../types';
+export declare class OxInputAnchors extends OxFormField<AnchorModel[]> {
+    static styles: import("lit").CSSResult[];
+    value: AnchorModel[];
+    render(): import("lit-html").TemplateResult<1>;
+    onClick(e: MouseEvent): void;
+}