@logicflow/layout 1.2.0-alpha.14

package/README.md

@@ -0,0 +1,17 @@
+# layout
+
+layout 扩展包
+
+## 使用方式
+
+```js
+import LogicFlow from '@logicflow/core';
+import { dagre } from '@logicflow/layout';
+
+const lf = new LogicFlow({
+  container: '#app',
+  plugin: [dagre]
+})
+
+lf.extension.dagre.layout()
+```

package/cjs/dagre.js

@@ -0,0 +1,146 @@
+"use strict";
+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 __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Dagre = void 0;
+var layout_1 = require("@antv/layout");
+var Dagre = /** @class */ (function () {
+    function Dagre() {
+    }
+    Dagre.prototype.render = function (lf) {
+        this.lf = lf;
+    };
+    /**
+     * option: {
+     *   rankdir: "TB", // layout 方向, 可选 TB, BT, LR, RL
+     *   align: undefined, // 节点对齐方式，可选 UL, UR, DL, DR
+     *   nodeSize: undefined, // 节点大小
+     *   nodesepFunc: undefined, // 节点水平间距(px)
+     *   ranksepFunc: undefined, // 每一层节点之间间距
+     *   nodesep: 50, // 节点水平间距(px)
+     *   ranksep: 50, // 每一层节点之间间距
+     *   controlPoints: false, // 是否保留布局连线的控制点
+     *   radial: false, // 是否基于 dagre 进行辐射布局
+     *   focusNode: null, // radial 为 true 时生效，关注的节点
+     * };
+     */
+    Dagre.prototype.layout = function (option) {
+        var _this = this;
+        if (option === void 0) { option = {}; }
+        var _a = this.lf.graphModel, nodes = _a.nodes, edges = _a.edges;
+        this.option = __assign({ type: 'dagre', rankdir: 'LR', nodesep: 20, begin: [100, 100] }, option);
+        var layoutInstance = new layout_1.DagreLayout(this.option);
+        var layoutData = layoutInstance.layout({
+            nodes: nodes.map(function (node) { return ({
+                id: node.id,
+                size: {
+                    width: node.width,
+                    height: node.height,
+                },
+                model: node,
+            }); }),
+            edges: edges.map(function (edge) { return ({
+                source: edge.sourceNodeId,
+                target: edge.targetNodeId,
+                model: edge,
+            }); }),
+        });
+        var newGraphData = {
+            nodes: [],
+            edges: [],
+        };
+        layoutData.nodes.forEach(function (node) {
+            // @ts-ignore: pass node data
+            var model = node.model;
+            var data = model.getData();
+            // @ts-ignore: pass node data
+            data.x = node.x;
+            // @ts-ignore: pass node data
+            data.y = node.y;
+            newGraphData.nodes.push(data);
+        });
+        layoutData.edges.forEach(function (edge) {
+            // @ts-ignore: pass edge data
+            var model = edge.model;
+            var data = model.getData();
+            data.pointsList = _this.calcPointsList(model, newGraphData.nodes);
+            if (data.pointsList) {
+                var _a = __read(data.pointsList, 4), first = _a[0], next = _a[1], third = _a[2], last = _a[3];
+                data.startPoint = { x: first.x, y: first.y };
+                data.endPoint = { x: last.x, y: last.y };
+                if (data.text && data.text.value) {
+                    data.text = {
+                        x: (third.x + last.x) / 2,
+                        y: last.y,
+                        value: data.text.value,
+                    };
+                }
+            }
+            else {
+                data.startPoint = undefined;
+                data.endPoint = undefined;
+                if (data.text && data.text.value) {
+                    data.text = data.text.value;
+                }
+            }
+            newGraphData.edges.push(data);
+        });
+        this.lf.render(newGraphData);
+    };
+    Dagre.prototype.calcPointsList = function (model, nodes) {
+        console.log(this.option.rankdir, model.modelType);
+        // 在节点确认从左向右后，通过计算来保证节点连线清晰。
+        if (this.option.rankdir === 'LR' && model.modelType === 'polyline-edge') {
+            var sourceNodeModel = this.lf.getNodeModelById(model.sourceNodeId);
+            var targetNodeModel = this.lf.getNodeModelById(model.targetNodeId);
+            var newSourceNodeData = nodes.find(function (node) { return node.id === model.sourceNodeId; });
+            var newTargetNodeData = nodes.find(function (node) { return node.id === model.targetNodeId; });
+            var firstPoint = {
+                x: newSourceNodeData.x + sourceNodeModel.width / 2,
+                y: newSourceNodeData.y,
+            };
+            var nextPoint = {
+                x: newSourceNodeData.x + sourceNodeModel.width / 2 + (model.offset || 50),
+                y: newSourceNodeData.y,
+            };
+            var thirdPoint = {
+                x: newSourceNodeData.x + sourceNodeModel.width / 2 + (model.offset || 50),
+                y: newTargetNodeData.y,
+            };
+            var lastPoint = {
+                x: newTargetNodeData.x - targetNodeModel.width / 2,
+                y: newTargetNodeData.y,
+            };
+            return [firstPoint, nextPoint, thirdPoint, lastPoint];
+        }
+        return undefined;
+    };
+    Dagre.pluginName = 'dagre';
+    return Dagre;
+}());
+exports.Dagre = Dagre;

package/cjs/index.js

@@ -0,0 +1,13 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./dagre"), exports);

package/es/dagre.d.ts

@@ -0,0 +1,26 @@
+import { DagreLayoutOptions } from '@antv/layout';
+export declare class Dagre {
+    static pluginName: string;
+    lf: any;
+    option: DagreLayoutOptions;
+    render(lf: any): void;
+    /**
+     * option: {
+     *   rankdir: "TB", // layout 方向, 可选 TB, BT, LR, RL
+     *   align: undefined, // 节点对齐方式，可选 UL, UR, DL, DR
+     *   nodeSize: undefined, // 节点大小
+     *   nodesepFunc: undefined, // 节点水平间距(px)
+     *   ranksepFunc: undefined, // 每一层节点之间间距
+     *   nodesep: 50, // 节点水平间距(px)
+     *   ranksep: 50, // 每一层节点之间间距
+     *   controlPoints: false, // 是否保留布局连线的控制点
+     *   radial: false, // 是否基于 dagre 进行辐射布局
+     *   focusNode: null, // radial 为 true 时生效，关注的节点
+     * };
+     */
+    layout(option?: {}): void;
+    calcPointsList(model: any, nodes: any): {
+        x: any;
+        y: any;
+    }[];
+}

package/es/dagre.js

@@ -0,0 +1,143 @@
+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 __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+import { DagreLayout } from '@antv/layout';
+var Dagre = /** @class */ (function () {
+    function Dagre() {
+    }
+    Dagre.prototype.render = function (lf) {
+        this.lf = lf;
+    };
+    /**
+     * option: {
+     *   rankdir: "TB", // layout 方向, 可选 TB, BT, LR, RL
+     *   align: undefined, // 节点对齐方式，可选 UL, UR, DL, DR
+     *   nodeSize: undefined, // 节点大小
+     *   nodesepFunc: undefined, // 节点水平间距(px)
+     *   ranksepFunc: undefined, // 每一层节点之间间距
+     *   nodesep: 50, // 节点水平间距(px)
+     *   ranksep: 50, // 每一层节点之间间距
+     *   controlPoints: false, // 是否保留布局连线的控制点
+     *   radial: false, // 是否基于 dagre 进行辐射布局
+     *   focusNode: null, // radial 为 true 时生效，关注的节点
+     * };
+     */
+    Dagre.prototype.layout = function (option) {
+        var _this = this;
+        if (option === void 0) { option = {}; }
+        var _a = this.lf.graphModel, nodes = _a.nodes, edges = _a.edges;
+        this.option = __assign({ type: 'dagre', rankdir: 'LR', nodesep: 20, begin: [100, 100] }, option);
+        var layoutInstance = new DagreLayout(this.option);
+        var layoutData = layoutInstance.layout({
+            nodes: nodes.map(function (node) { return ({
+                id: node.id,
+                size: {
+                    width: node.width,
+                    height: node.height,
+                },
+                model: node,
+            }); }),
+            edges: edges.map(function (edge) { return ({
+                source: edge.sourceNodeId,
+                target: edge.targetNodeId,
+                model: edge,
+            }); }),
+        });
+        var newGraphData = {
+            nodes: [],
+            edges: [],
+        };
+        layoutData.nodes.forEach(function (node) {
+            // @ts-ignore: pass node data
+            var model = node.model;
+            var data = model.getData();
+            // @ts-ignore: pass node data
+            data.x = node.x;
+            // @ts-ignore: pass node data
+            data.y = node.y;
+            newGraphData.nodes.push(data);
+        });
+        layoutData.edges.forEach(function (edge) {
+            // @ts-ignore: pass edge data
+            var model = edge.model;
+            var data = model.getData();
+            data.pointsList = _this.calcPointsList(model, newGraphData.nodes);
+            if (data.pointsList) {
+                var _a = __read(data.pointsList, 4), first = _a[0], next = _a[1], third = _a[2], last = _a[3];
+                data.startPoint = { x: first.x, y: first.y };
+                data.endPoint = { x: last.x, y: last.y };
+                if (data.text && data.text.value) {
+                    data.text = {
+                        x: (third.x + last.x) / 2,
+                        y: last.y,
+                        value: data.text.value,
+                    };
+                }
+            }
+            else {
+                data.startPoint = undefined;
+                data.endPoint = undefined;
+                if (data.text && data.text.value) {
+                    data.text = data.text.value;
+                }
+            }
+            newGraphData.edges.push(data);
+        });
+        this.lf.render(newGraphData);
+    };
+    Dagre.prototype.calcPointsList = function (model, nodes) {
+        console.log(this.option.rankdir, model.modelType);
+        // 在节点确认从左向右后，通过计算来保证节点连线清晰。
+        if (this.option.rankdir === 'LR' && model.modelType === 'polyline-edge') {
+            var sourceNodeModel = this.lf.getNodeModelById(model.sourceNodeId);
+            var targetNodeModel = this.lf.getNodeModelById(model.targetNodeId);
+            var newSourceNodeData = nodes.find(function (node) { return node.id === model.sourceNodeId; });
+            var newTargetNodeData = nodes.find(function (node) { return node.id === model.targetNodeId; });
+            var firstPoint = {
+                x: newSourceNodeData.x + sourceNodeModel.width / 2,
+                y: newSourceNodeData.y,
+            };
+            var nextPoint = {
+                x: newSourceNodeData.x + sourceNodeModel.width / 2 + (model.offset || 50),
+                y: newSourceNodeData.y,
+            };
+            var thirdPoint = {
+                x: newSourceNodeData.x + sourceNodeModel.width / 2 + (model.offset || 50),
+                y: newTargetNodeData.y,
+            };
+            var lastPoint = {
+                x: newTargetNodeData.x - targetNodeModel.width / 2,
+                y: newTargetNodeData.y,
+            };
+            return [firstPoint, nextPoint, thirdPoint, lastPoint];
+        }
+        return undefined;
+    };
+    Dagre.pluginName = 'dagre';
+    return Dagre;
+}());
+export { Dagre };

package/es/index.d.ts

@@ -0,0 +1 @@
+export * from './dagre';

package/es/index.js

@@ -0,0 +1 @@
+export * from './dagre';