duoyun-ui 2.2.3 → 2.2.8

package/elements/flow.js

@@ -1,703 +0,0 @@
-// webkit marker arrow bug: https://duoyun-ui.gemjs.org/zh/elements/flow
-var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
-    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
-    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
-    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
-    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
-    var _, done = false;
-    for (var i = decorators.length - 1; i >= 0; i--) {
-        var context = {};
-        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
-        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
-        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
-        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
-        if (kind === "accessor") {
-            if (result === void 0) continue;
-            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
-            if (_ = accept(result.get)) descriptor.get = _;
-            if (_ = accept(result.set)) descriptor.set = _;
-            if (_ = accept(result.init)) initializers.unshift(_);
-        }
-        else if (_ = accept(result)) {
-            if (kind === "field") initializers.unshift(_);
-            else descriptor[key] = _;
-        }
-    }
-    if (target) Object.defineProperty(target, contextIn.name, descriptor);
-    done = true;
-};
-var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
-    var useValue = arguments.length > 2;
-    for (var i = 0; i < initializers.length; i++) {
-        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
-    }
-    return useValue ? value : void 0;
-};
-import { createDecoratorTheme } from '@mantou/gem/helper/theme';
-import { adoptedStyle, customElement, effect, memo, part, property, shadow, state } from '@mantou/gem/lib/decorators';
-import { createRef, createState, css, html, svg } from '@mantou/gem/lib/element';
-import { styleMap } from '@mantou/gem/lib/utils';
-import ELK from 'elkjs/lib/elk.bundled.js';
-import { utf8ToB64 } from '../lib/encode';
-import { formatToPrecision } from '../lib/number';
-import { theme } from '../lib/theme';
-import { isNotNullish, isNullish } from '../lib/types';
-import { DuoyunResizeBaseElement } from './base/resize';
-const elk = new ELK();
-// https://github.com/reaviz/reaflow/blob/master/src/layout/elkLayout.ts
-const defaultLayout = {
-    /**
-     * Select a specific layout algorithm.
-     *
-     * Uses "layered" strategy.
-     * It emphasizes the direction of edges by pointing as many edges as possible into the same direction.
-     * The nodes are arranged in layers, which are sometimes called “hierarchies”,
-     * and then reordered such that the number of edge crossings is minimized.
-     * Afterwards, concrete coordinates are computed for the nodes and edge bend points.
-     *
-     * @see https://www.eclipse.org/elk/reference/algorithms.html
-     * @see https://www.eclipse.org/elk/reference/options/org-eclipse-elk-algorithm.html
-     * @see https://www.eclipse.org/elk/reference/algorithms/org-eclipse-elk-layered.html
-     */
-    'elk.algorithm': 'org.eclipse.elk.layered',
-    /**
-     * Hints for where node labels are to be placed; if empty, the node label’s position is not modified.
-     *
-     * @see https://www.eclipse.org/elk/reference/options/org-eclipse-elk-nodeLabels-placement.html
-     */
-    'elk.nodeLabels.placement': 'OUTSIDE V_TOP H_LEFT',
-    /**
-     * The minimal distance to be preserved between a label and the edge it is associated with. Note that the placement of a label is influenced by the ‘edgelabels.placement’ option.
-     *
-     * @see https://www.eclipse.org/elk/reference/options/org-eclipse-elk-spacing-edgeLabel.html
-     */
-    'org.eclipse.elk.spacing.edgeLabel': '8',
-    /**
-     * Method to decide on edge label sides.
-     *
-     * @see https://www.eclipse.org/elk/reference/options/org-eclipse-elk-layered-edgeLabels-sideSelection.html
-     */
-    'org.eclipse.elk.layered.edgeLabels.sideSelection': 'ALWAYS_UP',
-    /**
-     * Overall direction of edges: horizontal (right / left) or vertical (down / up).
-     *
-     * @see https://www.eclipse.org/elk/reference/options/org-eclipse-elk-direction.html
-     */
-    'elk.direction': 'DOWN',
-    /**
-     * Strategy for node layering.
-     *
-     * @see https://www.eclipse.org/elk/reference/options/org-eclipse-elk-layered-layering-strategy.html
-     */
-    'org.eclipse.elk.layered.layering.strategy': 'INTERACTIVE',
-    /**
-     * What kind of edge routing style should be applied for the content of a parent node.
-     * Algorithms may also set this option to single edges in order to mark them as splines.
-     * The bend point list of edges with this option set to SPLINES
-     * must be interpreted as control points for a piecewise cubic spline.
-     *
-     * @see https://www.eclipse.org/elk/reference/options/org-eclipse-elk-edgeRouting.html
-     */
-    'org.eclipse.elk.edgeRouting': 'SPLINES',
-    /**
-     * Adds bend points even if an edge does not change direction.
-     * If true, each long edge dummy will contribute a bend point to its edges
-     * and hierarchy-crossing edges will always get a bend point where they cross hierarchy boundaries.
-     * By default, bend points are only added where an edge changes direction.
-     *
-     * @see https://www.eclipse.org/elk/reference/options/org-eclipse-elk-layered-unnecessaryBendpoints.html
-     */
-    'elk.layered.unnecessaryBendpoints': 'true',
-    /**
-     * The spacing to be preserved between nodes and edges that are routed next to the node’s layer.
-     * For the spacing between nodes and edges that cross the node’s layer ‘spacing.edgeNode’ is used.
-     *
-     * @see https://www.eclipse.org/elk/reference/options/org-eclipse-elk-layered-spacing-edgeNodeBetweenLayers.html
-     */
-    'elk.layered.spacing.edgeNodeBetweenLayers': '50',
-    /**
-     * Tells the BK node placer to use a certain alignment (out of its four)
-     * instead of the one producing the smallest height, or the combination of all four.
-     *
-     * @see https://www.eclipse.org/elk/reference/options/org-eclipse-elk-layered-nodePlacement-bk-fixedAlignment.html
-     */
-    'org.eclipse.elk.layered.nodePlacement.bk.fixedAlignment': 'BALANCED',
-    /**
-     * Strategy for cycle breaking.
-     *
-     * Cycle breaking looks for cycles in the graph and determines which edges to reverse to break the cycles.
-     * Reversed edges will end up pointing to the opposite direction of regular edges
-     * (that is, reversed edges will point left if edges usually point right).
-     *
-     * @see https://www.eclipse.org/elk/reference/options/org-eclipse-elk-layered-cycleBreaking-strategy.html
-     */
-    'org.eclipse.elk.layered.cycleBreaking.strategy': 'DEPTH_FIRST',
-    /**
-     * Whether this node allows to route self loops inside of it instead of around it.
-     *
-     * If set to true, this will make the node a compound node if it isn’t already,
-     * and will require the layout algorithm to support compound nodes with hierarchical ports.
-     *
-     * @see https://www.eclipse.org/elk/reference/options/org-eclipse-elk-insideSelfLoops-activate.html
-     */
-    'org.eclipse.elk.insideSelfLoops.activate': 'true',
-    /**
-     * Whether each connected component should be processed separately.
-     *
-     * @see https://www.eclipse.org/elk/reference/options/org-eclipse-elk-separateConnectedComponents.html
-     */
-    separateConnectedComponents: 'false',
-    /**
-     * Spacing to be preserved between pairs of connected components.
-     * This option is only relevant if ‘separateConnectedComponents’ is activated.
-     *
-     * @see https://www.eclipse.org/elk/reference/options/org-eclipse-elk-spacing-componentComponent.html
-     */
-    'spacing.componentComponent': '70',
-    /**
-     * TODO: Should be spacing.baseValue?
-     * An optional base value for all other layout options of the ‘spacing’ group.
-     * It can be used to conveniently alter the overall ‘spaciousness’ of the drawing.
-     * Whenever an explicit value is set for the other layout options, this base value will have no effect.
-     * The base value is not inherited, i.e. it must be set for each hierarchical node.
-     *
-     * @see https://www.eclipse.org/elk/reference/groups/org-eclipse-elk-layered-spacing.html
-     */
-    spacing: '75',
-    /**
-     * The spacing to be preserved between any pair of nodes of two adjacent layers.
-     * Note that ‘spacing.nodeNode’ is used for the spacing between nodes within the layer itself.
-     *
-     * @see https://www.eclipse.org/elk/reference/options/org-eclipse-elk-layered-spacing-nodeNodeBetweenLayers.html
-     */
-    'spacing.nodeNodeBetweenLayers': '70',
-};
-const elementTheme = createDecoratorTheme({ opacity: 0, width: '', height: '' });
-const canvasStyle = css `
-  :scope:where(:not([hidden])) {
-    display: block;
-    position: relative;
-    flex-shrink: 0;
-    opacity: ${elementTheme.opacity};
-    width: ${elementTheme.width};
-    height: ${elementTheme.height};
-  }
-  .node {
-    height: 100%;
-    border: 1px solid;
-    box-sizing: border-box;
-    padding: 0.5em 1em;
-    border-radius: ${theme.normalRound};
-  }
-  .node-label,
-  .edge-label {
-    font-size: 0.875em;
-    color: ${theme.describeColor};
-  }
-  .edge-label {
-    background: ${theme.backgroundColor};
-  }
-  .edge {
-    stroke: currentColor;
-    stroke-width: 1;
-    fill: none;
-  }
-`;
-let DuoyunFlowCanvasElement = (() => {
-    let _classDecorators = [customElement('dy-flow-canvas'), adoptedStyle(canvasStyle)];
-    let _classDescriptor;
-    let _classExtraInitializers = [];
-    let _classThis;
-    let _classSuper = DuoyunResizeBaseElement;
-    let _resizeThrottle_decorators;
-    let _resizeThrottle_initializers = [];
-    let _resizeThrottle_extraInitializers = [];
-    let _graph_decorators;
-    let _graph_initializers = [];
-    let _graph_extraInitializers = [];
-    let _layout_decorators;
-    let _layout_initializers = [];
-    let _layout_extraInitializers = [];
-    let _renderEdge_decorators;
-    let _renderEdge_initializers = [];
-    let _renderEdge_extraInitializers = [];
-    let _renderEdgeLabel_decorators;
-    let _renderEdgeLabel_initializers = [];
-    let _renderEdgeLabel_extraInitializers = [];
-    let _renderNode_decorators;
-    let _renderNode_initializers = [];
-    let _renderNode_extraInitializers = [];
-    let _renderNodeLabel_decorators;
-    let _renderNodeLabel_initializers = [];
-    let _renderNodeLabel_extraInitializers = [];
-    let _renderEndMarker_decorators;
-    let _renderEndMarker_initializers = [];
-    let _renderEndMarker_extraInitializers = [];
-    let _renderStartMarker_decorators;
-    let _renderStartMarker_initializers = [];
-    let _renderStartMarker_extraInitializers = [];
-    let _private_update_decorators;
-    let _private_update_initializers = [];
-    let _private_update_extraInitializers = [];
-    let _private_theme_decorators;
-    let _private_theme_initializers = [];
-    let _private_theme_extraInitializers = [];
-    var DuoyunFlowCanvasElement = class extends _classSuper {
-        static { _classThis = this; }
-        static {
-            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-            _resizeThrottle_decorators = [property];
-            _graph_decorators = [property];
-            _layout_decorators = [property];
-            _renderEdge_decorators = [property];
-            _renderEdgeLabel_decorators = [property];
-            _renderNode_decorators = [property];
-            _renderNodeLabel_decorators = [property];
-            _renderEndMarker_decorators = [property];
-            _renderStartMarker_decorators = [property];
-            _private_update_decorators = [effect()];
-            _private_theme_decorators = [elementTheme()];
-            __esDecorate(null, null, _resizeThrottle_decorators, { kind: "field", name: "resizeThrottle", static: false, private: false, access: { has: obj => "resizeThrottle" in obj, get: obj => obj.resizeThrottle, set: (obj, value) => { obj.resizeThrottle = value; } }, metadata: _metadata }, _resizeThrottle_initializers, _resizeThrottle_extraInitializers);
-            __esDecorate(null, null, _graph_decorators, { kind: "field", name: "graph", static: false, private: false, access: { has: obj => "graph" in obj, get: obj => obj.graph, set: (obj, value) => { obj.graph = value; } }, metadata: _metadata }, _graph_initializers, _graph_extraInitializers);
-            __esDecorate(null, null, _layout_decorators, { kind: "field", name: "layout", static: false, private: false, access: { has: obj => "layout" in obj, get: obj => obj.layout, set: (obj, value) => { obj.layout = value; } }, metadata: _metadata }, _layout_initializers, _layout_extraInitializers);
-            __esDecorate(null, null, _renderEdge_decorators, { kind: "field", name: "renderEdge", static: false, private: false, access: { has: obj => "renderEdge" in obj, get: obj => obj.renderEdge, set: (obj, value) => { obj.renderEdge = value; } }, metadata: _metadata }, _renderEdge_initializers, _renderEdge_extraInitializers);
-            __esDecorate(null, null, _renderEdgeLabel_decorators, { kind: "field", name: "renderEdgeLabel", static: false, private: false, access: { has: obj => "renderEdgeLabel" in obj, get: obj => obj.renderEdgeLabel, set: (obj, value) => { obj.renderEdgeLabel = value; } }, metadata: _metadata }, _renderEdgeLabel_initializers, _renderEdgeLabel_extraInitializers);
-            __esDecorate(null, null, _renderNode_decorators, { kind: "field", name: "renderNode", static: false, private: false, access: { has: obj => "renderNode" in obj, get: obj => obj.renderNode, set: (obj, value) => { obj.renderNode = value; } }, metadata: _metadata }, _renderNode_initializers, _renderNode_extraInitializers);
-            __esDecorate(null, null, _renderNodeLabel_decorators, { kind: "field", name: "renderNodeLabel", static: false, private: false, access: { has: obj => "renderNodeLabel" in obj, get: obj => obj.renderNodeLabel, set: (obj, value) => { obj.renderNodeLabel = value; } }, metadata: _metadata }, _renderNodeLabel_initializers, _renderNodeLabel_extraInitializers);
-            __esDecorate(null, null, _renderEndMarker_decorators, { kind: "field", name: "renderEndMarker", static: false, private: false, access: { has: obj => "renderEndMarker" in obj, get: obj => obj.renderEndMarker, set: (obj, value) => { obj.renderEndMarker = value; } }, metadata: _metadata }, _renderEndMarker_initializers, _renderEndMarker_extraInitializers);
-            __esDecorate(null, null, _renderStartMarker_decorators, { kind: "field", name: "renderStartMarker", static: false, private: false, access: { has: obj => "renderStartMarker" in obj, get: obj => obj.renderStartMarker, set: (obj, value) => { obj.renderStartMarker = value; } }, metadata: _metadata }, _renderStartMarker_initializers, _renderStartMarker_extraInitializers);
-            __esDecorate(null, null, _private_update_decorators, { kind: "field", name: "#update", static: false, private: true, access: { has: obj => #update in obj, get: obj => obj.#update, set: (obj, value) => { obj.#update = value; } }, metadata: _metadata }, _private_update_initializers, _private_update_extraInitializers);
-            __esDecorate(null, null, _private_theme_decorators, { kind: "field", name: "#theme", static: false, private: true, access: { has: obj => #theme in obj, get: obj => obj.#theme, set: (obj, value) => { obj.#theme = value; } }, metadata: _metadata }, _private_theme_initializers, _private_theme_extraInitializers);
-            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
-            DuoyunFlowCanvasElement = _classThis = _classDescriptor.value;
-            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-            __runInitializers(_classThis, _classExtraInitializers);
-        }
-        resizeThrottle = __runInitializers(this, _resizeThrottle_initializers, false);
-        graph = (__runInitializers(this, _resizeThrottle_extraInitializers), __runInitializers(this, _graph_initializers, void 0));
-        layout = (__runInitializers(this, _graph_extraInitializers), __runInitializers(this, _layout_initializers, void 0));
-        renderEdge = (__runInitializers(this, _layout_extraInitializers), __runInitializers(this, _renderEdge_initializers, void 0));
-        renderEdgeLabel = (__runInitializers(this, _renderEdge_extraInitializers), __runInitializers(this, _renderEdgeLabel_initializers, void 0));
-        renderNode = (__runInitializers(this, _renderEdgeLabel_extraInitializers), __runInitializers(this, _renderNode_initializers, void 0));
-        renderNodeLabel = (__runInitializers(this, _renderNode_extraInitializers), __runInitializers(this, _renderNodeLabel_initializers, void 0));
-        renderEndMarker = (__runInitializers(this, _renderNodeLabel_extraInitializers), __runInitializers(this, _renderEndMarker_initializers, void 0));
-        renderStartMarker = (__runInitializers(this, _renderEndMarker_extraInitializers), __runInitializers(this, _renderStartMarker_initializers, void 0));
-        get #isReady() {
-            const node = this.graph?.children?.[0];
-            if (!node)
-                return true;
-            return !!node.width && !!this.graph?.width;
-        }
-        #renderNode = (__runInitializers(this, _renderStartMarker_extraInitializers), (data, node) => {
-            return this.renderNode
-                ? this.renderNode(data, node)
-                : html `<div class="node" part=${DuoyunFlowElement.node}>${data}</div>`;
-        });
-        #renderNodeLabel = (label, edge) => {
-            return this.renderNodeLabel
-                ? this.renderNodeLabel(label, edge)
-                : html `<div class="node-label" part=${DuoyunFlowElement.nodeLabel}>${label}</div>`;
-        };
-        #renderEdge = (section, edge) => {
-            return this.renderEdge
-                ? this.renderEdge(section, edge)
-                : svg `
-          <path
-            class="edge"
-            part=${DuoyunFlowElement.edge}
-            d=${section.d || ''}
-            marker-start="url(#startmarker)"
-            marker-end="url(#endmarker)"
-          ></path>
-        `;
-        };
-        #renderEdgeLabel = (label, edge) => {
-            return this.renderEdgeLabel
-                ? this.renderEdgeLabel(label, edge)
-                : html `<div class="edge-label" part=${DuoyunFlowElement.edgeLabel}>${label}</div>`;
-        };
-        #renderEndMarker = () => {
-            return this.renderEndMarker
-                ? this.renderEndMarker()
-                : svg `
-          <marker
-            id="endmarker"
-            viewBox="0 0 10 10"
-            refX="10"
-            refY="5"
-            markerUnits="strokeWidth"
-            markerWidth="10"
-            markerHeight="10"
-            orient="auto"
-          >
-            <path d="M 0 1 L 10 5 L 0 9 z" fill="currentColor" />
-          </marker>
-        `;
-        };
-        #renderStartMarker = () => {
-            return this.renderStartMarker ? this.renderStartMarker() : undefined;
-        };
-        #genId = (str) => utf8ToB64(str || '.', true);
-        #genLabelId = (parentId, id) => this.#genId(`label-${parentId}-${id}`);
-        #initShape = (id, node) => {
-            const ele = this.querySelector(`#${id}`);
-            if (ele) {
-                const { width, height } = ele.getBoundingClientRect();
-                node.width = width;
-                node.height = height;
-            }
-        };
-        #updateSize = () => {
-            const { children, edges } = this.graph || {};
-            children?.forEach((node) => {
-                this.#initShape(this.#genId(node.id), node);
-                node.labels?.forEach((label, index) => {
-                    this.#initShape(this.#genLabelId(node.id, index), label);
-                });
-            });
-            edges?.forEach((edge) => {
-                this.#initShape(this.#genId(edge.id), edge);
-            });
-            this.update();
-        };
-        #distance = (p1, p2) => Math.sqrt((p1.x - p2.x) ** 2 + (p1.y - p2.y) ** 2);
-        #sortPoints = (points) => {
-            const start = points[0];
-            return points.sort((a, b) => {
-                return this.#distance(a, start) - this.#distance(b, start);
-            });
-        };
-        #calcPath = (node) => {
-            node?.edges?.forEach((edge) => {
-                edge.sections?.forEach((section) => {
-                    const { startPoint, bendPoints, endPoint } = section;
-                    const joinPoint = (point) => `${point.x + node.x},${point.y + node.y}`;
-                    if (!bendPoints) {
-                        section.d = `M${joinPoint(startPoint)}L${joinPoint(endPoint)}`;
-                        return;
-                    }
-                    switch (node.layoutOptions?.['org.eclipse.elk.edgeRouting']) {
-                        case 'ORTHOGONAL': {
-                            const bend = bendPoints.map((point) => `L${joinPoint(point)}`).join('');
-                            section.d = `M${joinPoint(startPoint)}${bend || ''}L${joinPoint(endPoint)}`;
-                            break;
-                        }
-                        default: {
-                            const precision = node.width > 1500 ? 0 : 1;
-                            const points = [startPoint, ...bendPoints, endPoint]
-                                .map((e) => ({ x: formatToPrecision(e.x, precision), y: formatToPrecision(e.y, precision) }))
-                                .filter((e, i, arr) => {
-                                if (i === arr.length - 1)
-                                    return true;
-                                const nextPoint = arr[i + 1];
-                                const isEqNextPoint = joinPoint(e) === joinPoint(nextPoint);
-                                if (isEqNextPoint)
-                                    return false;
-                                if (i === 0)
-                                    return true;
-                                const prevPoint = arr[i - 1];
-                                const nextDiffY = nextPoint.y - e.y;
-                                const nextDiffX = nextPoint.x - e.x;
-                                const prevDiffY = e.y - prevPoint.y;
-                                const prevDiffX = e.x - prevPoint.x;
-                                const isPointInLine = nextDiffY / nextDiffX === prevDiffY / prevDiffX;
-                                const isSomeDirection = Math.sign(nextDiffY) === Math.sign(prevDiffY) && Math.sign(nextDiffX) === Math.sign(prevDiffX);
-                                return !isSomeDirection || !isPointInLine;
-                            });
-                            if (points.length === 3) {
-                                const controlPoint = joinPoint(points[1]);
-                                section.d = `M${joinPoint(points[0])}C${controlPoint} ${controlPoint} ${joinPoint(points[2])}`;
-                            }
-                            else if (points.length > 3 && (points.length - 5) % 3 === 0) {
-                                const start = points.shift();
-                                const end = points.pop();
-                                let c = '';
-                                for (let i = 0; i < points.length; i += 3) {
-                                    const [_, f, center] = this.#sortPoints([start, ...points.slice(i, i + 3), end]);
-                                    c += ` ${joinPoint(f)} ${joinPoint(center)}C${joinPoint(points[i + 2])} `;
-                                }
-                                section.d = `M${joinPoint(start)}C${joinPoint(start)}${c}${joinPoint(end)} ${joinPoint(end)}`;
-                            }
-                            else {
-                                this.#sortPoints(points);
-                                const controlPoint = joinPoint(points[1]);
-                                const end = points[points.length - 1];
-                                section.d = `M${joinPoint(points[0])}C${controlPoint} ${controlPoint} ${joinPoint(end)}`;
-                            }
-                        }
-                    }
-                });
-            });
-            node?.children?.forEach(this.#calcPath);
-        };
-        #layout = async () => {
-            try {
-                await elk.layout(this.graph, { layoutOptions: { ...defaultLayout, ...(this.layout || {}) } });
-            }
-            catch {
-                //
-            }
-            this.#calcPath(this.graph);
-            this.update();
-        };
-        #renderWrap = (id, { width, height, x = 0, y = 0 }, children) => {
-            return html `
-      <div
-        id=${id}
-        style=${styleMap({
-                position: 'absolute',
-                width: width ? `${width}px` : 'auto',
-                height: height ? `${height}px` : 'auto',
-                left: `${x}px`,
-                top: `${y}px`,
-            })}
-      >
-        ${children}
-      </div>
-    `;
-        };
-        #renderChildren = (node) => {
-            return html `
-      ${this.#renderWrap(this.#genId(node.id), node, html `
-          <!-- children -->
-          ${node.children?.map(this.#renderChildren)}
-          <!-- node -->
-          ${this.#renderNode(node.data || node.id, node)}
-          <!-- label -->
-          ${node.labels?.map((label, index) => this.#renderWrap(this.#genLabelId(node.id, index), label, this.#renderNodeLabel(label.text, node)))}
-        `)}
-    `;
-        };
-        #renderChildrenEdge = (node) => {
-            return html `
-      <!-- parent -->
-      ${node.edges?.map((edge) => edge.sections?.map((section) => this.#renderEdge(section, edge)))}
-      <!-- children -->
-      ${node.children?.map((childrenNode) => this.#renderChildrenEdge(childrenNode))}
-    `;
-        };
-        #update = __runInitializers(this, _private_update_initializers, async () => {
-            if (this.#isReady)
-                return;
-            if (isNullish(this.graph?.children?.[0]?.width)) {
-                this.#updateSize();
-            }
-            else {
-                await this.#layout();
-            }
-        });
-        #theme = (__runInitializers(this, _private_update_extraInitializers), __runInitializers(this, _private_theme_initializers, () => {
-            const { width, height } = this.graph || {};
-            return {
-                opacity: this.#isReady ? 1 : 0,
-                width: width ? `${width}px` : '100%',
-                height: height ? `${height}px` : '100%',
-            };
-        }));
-        render = (__runInitializers(this, _private_theme_extraInitializers), () => {
-            if (!this.graph)
-                return html ``;
-            const { children, edges, width, height } = this.graph;
-            return html `
-      <!-- edge -->
-      <svg
-        v-if=${!!width && !!height}
-        aria-hidden="true"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 ${width} ${height}"
-      >
-        <defs>${this.#renderEndMarker()} ${this.#renderStartMarker()}</defs>
-        ${this.#renderChildrenEdge(this.graph)}
-      </svg>
-      <!-- node -->
-      ${children?.map(this.#renderChildren)}
-      <!-- edge labels -->
-      ${edges?.map((edge) => html `${edge.labels?.map((label, index) => this.#renderWrap(this.#genLabelId(edge.id, index), label, this.#renderEdgeLabel(label.text, edge)))}`)}
-    `;
-        });
-    };
-    return DuoyunFlowCanvasElement = _classThis;
-})();
-export { DuoyunFlowCanvasElement };
-const style = css `
-  :host(:where(:not([hidden]))) {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-`;
-let DuoyunFlowElement = (() => {
-    let _classDecorators = [customElement('dy-flow'), adoptedStyle(style), shadow()];
-    let _classDescriptor;
-    let _classExtraInitializers = [];
-    let _classThis;
-    let _classSuper = DuoyunResizeBaseElement;
-    let _static_node_decorators;
-    let _static_node_initializers = [];
-    let _static_node_extraInitializers = [];
-    let _static_nodeLabel_decorators;
-    let _static_nodeLabel_initializers = [];
-    let _static_nodeLabel_extraInitializers = [];
-    let _static_edge_decorators;
-    let _static_edge_initializers = [];
-    let _static_edge_extraInitializers = [];
-    let _static_edgeLabel_decorators;
-    let _static_edgeLabel_initializers = [];
-    let _static_edgeLabel_extraInitializers = [];
-    let _graph_decorators;
-    let _graph_initializers = [];
-    let _graph_extraInitializers = [];
-    let _layout_decorators;
-    let _layout_initializers = [];
-    let _layout_extraInitializers = [];
-    let _renderEdge_decorators;
-    let _renderEdge_initializers = [];
-    let _renderEdge_extraInitializers = [];
-    let _renderEdgeLabel_decorators;
-    let _renderEdgeLabel_initializers = [];
-    let _renderEdgeLabel_extraInitializers = [];
-    let _renderNode_decorators;
-    let _renderNode_initializers = [];
-    let _renderNode_extraInitializers = [];
-    let _renderNodeLabel_decorators;
-    let _renderNodeLabel_initializers = [];
-    let _renderNodeLabel_extraInitializers = [];
-    let _renderEndMarker_decorators;
-    let _renderEndMarker_initializers = [];
-    let _renderEndMarker_extraInitializers = [];
-    let _loaded_decorators;
-    let _loaded_initializers = [];
-    let _loaded_extraInitializers = [];
-    let _private_updateState_decorators;
-    let _private_updateState_initializers = [];
-    let _private_updateState_extraInitializers = [];
-    let _private_updateScale_decorators;
-    let _private_updateScale_initializers = [];
-    let _private_updateScale_extraInitializers = [];
-    var DuoyunFlowElement = class extends _classSuper {
-        static { _classThis = this; }
-        static {
-            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-            _static_node_decorators = [part];
-            _static_nodeLabel_decorators = [part];
-            _static_edge_decorators = [part];
-            _static_edgeLabel_decorators = [part];
-            _graph_decorators = [property];
-            _layout_decorators = [property];
-            _renderEdge_decorators = [property];
-            _renderEdgeLabel_decorators = [property];
-            _renderNode_decorators = [property];
-            _renderNodeLabel_decorators = [property];
-            _renderEndMarker_decorators = [property];
-            _loaded_decorators = [state];
-            _private_updateState_decorators = [memo((i) => [i.graph])];
-            _private_updateScale_decorators = [effect((i) => [i.contentRect.width])];
-            __esDecorate(null, null, _static_node_decorators, { kind: "field", name: "node", static: true, private: false, access: { has: obj => "node" in obj, get: obj => obj.node, set: (obj, value) => { obj.node = value; } }, metadata: _metadata }, _static_node_initializers, _static_node_extraInitializers);
-            __esDecorate(null, null, _static_nodeLabel_decorators, { kind: "field", name: "nodeLabel", static: true, private: false, access: { has: obj => "nodeLabel" in obj, get: obj => obj.nodeLabel, set: (obj, value) => { obj.nodeLabel = value; } }, metadata: _metadata }, _static_nodeLabel_initializers, _static_nodeLabel_extraInitializers);
-            __esDecorate(null, null, _static_edge_decorators, { kind: "field", name: "edge", static: true, private: false, access: { has: obj => "edge" in obj, get: obj => obj.edge, set: (obj, value) => { obj.edge = value; } }, metadata: _metadata }, _static_edge_initializers, _static_edge_extraInitializers);
-            __esDecorate(null, null, _static_edgeLabel_decorators, { kind: "field", name: "edgeLabel", static: true, private: false, access: { has: obj => "edgeLabel" in obj, get: obj => obj.edgeLabel, set: (obj, value) => { obj.edgeLabel = value; } }, metadata: _metadata }, _static_edgeLabel_initializers, _static_edgeLabel_extraInitializers);
-            __esDecorate(null, null, _graph_decorators, { kind: "field", name: "graph", static: false, private: false, access: { has: obj => "graph" in obj, get: obj => obj.graph, set: (obj, value) => { obj.graph = value; } }, metadata: _metadata }, _graph_initializers, _graph_extraInitializers);
-            __esDecorate(null, null, _layout_decorators, { kind: "field", name: "layout", static: false, private: false, access: { has: obj => "layout" in obj, get: obj => obj.layout, set: (obj, value) => { obj.layout = value; } }, metadata: _metadata }, _layout_initializers, _layout_extraInitializers);
-            __esDecorate(null, null, _renderEdge_decorators, { kind: "field", name: "renderEdge", static: false, private: false, access: { has: obj => "renderEdge" in obj, get: obj => obj.renderEdge, set: (obj, value) => { obj.renderEdge = value; } }, metadata: _metadata }, _renderEdge_initializers, _renderEdge_extraInitializers);
-            __esDecorate(null, null, _renderEdgeLabel_decorators, { kind: "field", name: "renderEdgeLabel", static: false, private: false, access: { has: obj => "renderEdgeLabel" in obj, get: obj => obj.renderEdgeLabel, set: (obj, value) => { obj.renderEdgeLabel = value; } }, metadata: _metadata }, _renderEdgeLabel_initializers, _renderEdgeLabel_extraInitializers);
-            __esDecorate(null, null, _renderNode_decorators, { kind: "field", name: "renderNode", static: false, private: false, access: { has: obj => "renderNode" in obj, get: obj => obj.renderNode, set: (obj, value) => { obj.renderNode = value; } }, metadata: _metadata }, _renderNode_initializers, _renderNode_extraInitializers);
-            __esDecorate(null, null, _renderNodeLabel_decorators, { kind: "field", name: "renderNodeLabel", static: false, private: false, access: { has: obj => "renderNodeLabel" in obj, get: obj => obj.renderNodeLabel, set: (obj, value) => { obj.renderNodeLabel = value; } }, metadata: _metadata }, _renderNodeLabel_initializers, _renderNodeLabel_extraInitializers);
-            __esDecorate(null, null, _renderEndMarker_decorators, { kind: "field", name: "renderEndMarker", static: false, private: false, access: { has: obj => "renderEndMarker" in obj, get: obj => obj.renderEndMarker, set: (obj, value) => { obj.renderEndMarker = value; } }, metadata: _metadata }, _renderEndMarker_initializers, _renderEndMarker_extraInitializers);
-            __esDecorate(null, null, _loaded_decorators, { kind: "field", name: "loaded", static: false, private: false, access: { has: obj => "loaded" in obj, get: obj => obj.loaded, set: (obj, value) => { obj.loaded = value; } }, metadata: _metadata }, _loaded_initializers, _loaded_extraInitializers);
-            __esDecorate(null, null, _private_updateState_decorators, { kind: "field", name: "#updateState", static: false, private: true, access: { has: obj => #updateState in obj, get: obj => obj.#updateState, set: (obj, value) => { obj.#updateState = value; } }, metadata: _metadata }, _private_updateState_initializers, _private_updateState_extraInitializers);
-            __esDecorate(null, null, _private_updateScale_decorators, { kind: "field", name: "#updateScale", static: false, private: true, access: { has: obj => #updateScale in obj, get: obj => obj.#updateScale, set: (obj, value) => { obj.#updateScale = value; } }, metadata: _metadata }, _private_updateScale_initializers, _private_updateScale_extraInitializers);
-            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
-            DuoyunFlowElement = _classThis = _classDescriptor.value;
-            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-        }
-        static node = __runInitializers(_classThis, _static_node_initializers, void 0);
-        static nodeLabel = (__runInitializers(_classThis, _static_node_extraInitializers), __runInitializers(_classThis, _static_nodeLabel_initializers, void 0));
-        static edge = (__runInitializers(_classThis, _static_nodeLabel_extraInitializers), __runInitializers(_classThis, _static_edge_initializers, void 0));
-        static edgeLabel = (__runInitializers(_classThis, _static_edge_extraInitializers), __runInitializers(_classThis, _static_edgeLabel_initializers, void 0));
-        graph = __runInitializers(this, _graph_initializers, void 0);
-        layout = (__runInitializers(this, _graph_extraInitializers), __runInitializers(this, _layout_initializers, void 0));
-        renderEdge = (__runInitializers(this, _layout_extraInitializers), __runInitializers(this, _renderEdge_initializers, void 0));
-        renderEdgeLabel = (__runInitializers(this, _renderEdge_extraInitializers), __runInitializers(this, _renderEdgeLabel_initializers, void 0));
-        renderNode = (__runInitializers(this, _renderEdgeLabel_extraInitializers), __runInitializers(this, _renderNode_initializers, void 0));
-        renderNodeLabel = (__runInitializers(this, _renderNode_extraInitializers), __runInitializers(this, _renderNodeLabel_initializers, void 0));
-        renderEndMarker = (__runInitializers(this, _renderNodeLabel_extraInitializers), __runInitializers(this, _renderEndMarker_initializers, void 0));
-        loaded = (__runInitializers(this, _renderEndMarker_extraInitializers), __runInitializers(this, _loaded_initializers, void 0));
-        #canvasRef = (__runInitializers(this, _loaded_extraInitializers), createRef());
-        #state = createState({});
-        #setScale = ({ width }) => {
-            const rect = this.getBoundingClientRect();
-            const scale = Math.min(formatToPrecision(rect.width / width), 1);
-            this.#state({
-                scale,
-                marginBlock: ((scale - 1) / 2) * rect.height,
-            });
-        };
-        #onCanvasResize = (evt) => {
-            const { contentRect } = evt.target;
-            if (contentRect.width && contentRect.height && !this.loaded) {
-                this.#setScale(contentRect);
-            }
-        };
-        #normalizeGraph = () => {
-            const graph = this.graph;
-            if (!graph)
-                return;
-            const setLabels = (e) => {
-                if (e.label)
-                    e.labels = [{ id: '', text: e.label }];
-                if ('children' in e)
-                    e.children?.forEach((n) => setLabels(n));
-            };
-            graph.children?.forEach((e) => setLabels(e));
-            graph.edges?.forEach((e) => {
-                setLabels(e);
-                if (isNotNullish(e.source))
-                    e.sources = [e.source];
-                if (isNotNullish(e.target))
-                    e.targets = [e.target];
-                if (!e.sources)
-                    throw new Error('must have `source` or `sources`');
-                if (!e.targets)
-                    throw new Error('must have `target` or `targets`');
-            });
-        };
-        #updateState = __runInitializers(this, _private_updateState_initializers, () => {
-            this.#state({ scale: undefined, marginBlock: undefined });
-            this.#normalizeGraph();
-        });
-        #updateScale = (__runInitializers(this, _private_updateState_extraInitializers), __runInitializers(this, _private_updateScale_initializers, () => {
-            if (!this.loaded)
-                return;
-            this.#setScale(this.#canvasRef.value.contentRect);
-        }));
-        render = (__runInitializers(this, _private_updateScale_extraInitializers), () => {
-            const { scale, marginBlock } = this.#state;
-            this.loaded = !!scale;
-            return html `
-      <dy-flow-canvas
-        ${this.#canvasRef}
-        @resize=${this.#onCanvasResize}
-        style=${styleMap({
-                transform: scale && `scale(${scale})`,
-                marginBlock: scale && `${marginBlock}px`,
-                opacity: scale ? 1 : 0,
-            })}
-        .renderEdge=${this.renderEdge}
-        .renderEdgeLabel=${this.renderEdgeLabel}
-        .renderNode=${this.renderNode}
-        .renderNodeLabel=${this.renderNodeLabel}
-        .renderEndMarker=${this.renderEndMarker}
-        .graph=${this.graph}
-        .layout=${this.layout}
-      ></dy-flow-canvas>
-    `;
-        });
-        static {
-            __runInitializers(_classThis, _static_edgeLabel_extraInitializers);
-            __runInitializers(_classThis, _classExtraInitializers);
-        }
-    };
-    return DuoyunFlowElement = _classThis;
-})();
-export { DuoyunFlowElement };
-//# sourceMappingURL=flow.js.map