@logicflow/extension 1.0.0-alhpa.0 → 1.0.0-alpha.3

package/cjs/index.js

@@ -27,3 +27,4 @@ __exportStar(require("./materials/group"), exports);
 __exportStar(require("./NodeResize"), exports);
 __exportStar(require("./tools/flow-path"), exports);
 __exportStar(require("./tools/auto-layout"), exports);
+__exportStar(require("./materials/node-selection"), exports);

package/cjs/materials/node-selection/index.js

@@ -0,0 +1,267 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NodeSelection = void 0;
+var lodash_es_1 = require("lodash-es");
+var core_1 = require("@logicflow/core");
+var NodeSelectionView = /** @class */ (function (_super) {
+    __extends(NodeSelectionView, _super);
+    function NodeSelectionView() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.d = 10;
+        return _this;
+    }
+    NodeSelectionView.prototype.getShapeStyle = function () {
+        // 设置边框为虚线
+        var style = _super.prototype.getShapeStyle.call(this);
+        // @ts-ignore
+        style.strokeDashArray = '10 5';
+        return style;
+    };
+    NodeSelectionView.prototype.getLabelShape = function () {
+        var attributes = _super.prototype.getAttributes.call(this);
+        var x = attributes.x, // 元素中心点
+        y = attributes.y, // 元素中心点
+        width = attributes.width, height = attributes.height, stroke = attributes.stroke, id = attributes.id, _a = attributes.properties, labelText = _a.label_text, disabledDelete = _a.disabled_delete;
+        return core_1.h('svg', {
+            x: x - width / 2,
+            y: y - height / 2,
+            style: 'z-index: 0; background: none; overflow: auto;',
+        }, labelText ? core_1.h('text', {
+            x: 0,
+            y: -5,
+            width: 50,
+            height: 24,
+            fontSize: '16px',
+            fill: stroke,
+        }, '方案') : '', disabledDelete ? '' : core_1.h('text', {
+            x: labelText ? 50 : 0,
+            y: -5,
+            width: 50,
+            height: 24,
+            fontSize: '24px',
+            cursor: 'pointer',
+            fill: stroke,
+            onclick: this.handleCustomDeleteIconClick.bind(this, id),
+        }, 'x'));
+    };
+    NodeSelectionView.prototype.getShape = function () {
+        var attributes = _super.prototype.getAttributes.call(this);
+        var x = attributes.x, // 元素中心点
+        y = attributes.y, // 元素中心点
+        width = attributes.width, height = attributes.height, fill = attributes.fill, stroke = attributes.stroke, strokeWidth = attributes.strokeWidth, strokeDashArray = attributes.strokeDashArray, id = attributes.id;
+        return core_1.h('g', {}, [
+            core_1.h('rect', {
+                x: x - width / 2,
+                y: y - height / 2,
+                fill: fill,
+                stroke: stroke,
+                strokeWidth: strokeWidth,
+                width: width,
+                height: height,
+                strokeDashArray: strokeDashArray,
+                id: id,
+            }),
+            this.getLabelShape(),
+        ]);
+    };
+    NodeSelectionView.prototype.toFront = function () { };
+    /**
+     * 点击删除
+     * @param id
+     */
+    NodeSelectionView.prototype.handleCustomDeleteIconClick = function (id) {
+        var graphModel = this.props.graphModel;
+        graphModel.deleteNode(id);
+    };
+    return NodeSelectionView;
+}(core_1.PolygonNode));
+var NodeSelectionModel = /** @class */ (function (_super) {
+    __extends(NodeSelectionModel, _super);
+    function NodeSelectionModel() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.d = 10;
+        return _this;
+    }
+    NodeSelectionModel.prototype.setAttributes = function () {
+        var _this = this;
+        // 默认不显示
+        this.points = [];
+        this.text = {
+            value: '',
+            x: 0,
+            y: 0,
+            draggable: false,
+            editable: false,
+        };
+        this.stroke = this.properties.active_color || '#008000';
+        this.zIndex = 0;
+        this.draggable = false;
+        this.anchorsOffset = [[0, 0]];
+        if (this.properties.node_selection_ids.length > 1) {
+            setTimeout(function () {
+                _this.updatePointsByNodes(_this.properties.node_selection_ids);
+            });
+        }
+    };
+    NodeSelectionModel.prototype.getAnchorsByOffset = function () {
+        return [];
+    };
+    /**
+     * 更新points
+     * @param points
+     */
+    NodeSelectionModel.prototype.updatePoints = function (points) {
+        this.points = points;
+    };
+    /**
+     * 更新x y
+     */
+    NodeSelectionModel.prototype.updateCoordinate = function (_a) {
+        var x = _a.x, y = _a.y;
+        this.x = x;
+        this.y = y;
+    };
+    /**
+     * 更新points
+     */
+    NodeSelectionModel.prototype.updatePointsByNodes = function (nodesIds) {
+        var _this = this;
+        // TODO: 临时方案矩形
+        var points = [];
+        var minX = Infinity;
+        var minY = Infinity;
+        var maxX = -Infinity;
+        var maxY = -Infinity;
+        nodesIds.forEach(function (id) {
+            var model = _this.graphModel.getNodeModel(id);
+            if (!model)
+                return;
+            var width = model.width, height = model.height, x = model.x, y = model.y;
+            minX = Math.min(minX, x - width / 2 - _this.d);
+            minY = Math.min(minY, y - height / 2 - _this.d);
+            maxX = Math.max(maxX, x + width / 2 + _this.d);
+            maxY = Math.max(maxY, y + height / 2 + _this.d);
+        });
+        points.push([minX, minY], [maxX, minY], [maxX, maxY], [minX, maxY]);
+        if ([minX, minY, maxX, maxY].some(function (n) { return Math.abs(n) === Infinity; }))
+            return;
+        this.updatePoints(points);
+        this.updateCoordinate({ x: ((maxX + minX) / 2), y: (maxY + minY) / 2 });
+    };
+    return NodeSelectionModel;
+}(core_1.PolygonNodeModel));
+var NodeSelection = /** @class */ (function () {
+    function NodeSelection(_a) {
+        var lf = _a.lf;
+        this.lf = null; // lf 实例
+        this.selectNodes = []; // 选择的nodes
+        this.currentClickNode = null; // 当前点击的节点，选中的节点是无序的
+        this.d = 10;
+        lf.register({
+            type: 'node-selection',
+            view: NodeSelectionView,
+            model: NodeSelectionModel,
+        });
+    }
+    Object.defineProperty(NodeSelection.prototype, "selectNodesIds", {
+        /**
+         * 获取所选node的id数组
+         */
+        get: function () {
+            return this.selectNodes.map(function (node) { return node.id; });
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * 新建node-selection节点
+     */
+    NodeSelection.prototype.addNodeSelection = function () {
+        var node = this.lf.addNode({
+            type: 'node-selection',
+            text: '',
+            properties: {
+                node_selection_ids: this.selectNodesIds,
+            },
+        });
+        node.updatePointsByNodes(this.selectNodesIds);
+    };
+    /**
+     * 更新node-selection节点
+     */
+    NodeSelection.prototype.updateNodeSelection = function () {
+        var nodeSelection = this.getNodeSelection();
+        if (!nodeSelection)
+            return;
+        this.lf.setProperties(nodeSelection.id, {
+            node_selection_ids: this.selectNodesIds,
+        });
+        this.lf.getNodeModel(nodeSelection.id).updatePointsByNodes(this.selectNodesIds);
+    };
+    /**
+     * 获取所属的node-selection
+     */
+    NodeSelection.prototype.getNodeSelection = function () {
+        var _this = this;
+        var ids = this.selectNodesIds;
+        var rawData = this.lf.getGraphRawData();
+        var oldIds = ids.filter(function (id) { return id !== _this.currentClickNode.id; });
+        return rawData.nodes.find(function (node) {
+            if (node.type === 'node-selection') {
+                var nodeSelectionIds_1 = lodash_es_1.default.get(node, 'properties.node_selection_ids', []);
+                return oldIds.every(function (id) { return nodeSelectionIds_1.includes(id); });
+            }
+            return false;
+        });
+    };
+    NodeSelection.prototype.render = function (lf) {
+        var _this = this;
+        this.lf = lf;
+        lf.on('node:click', function (val) {
+            if (!val.e.shiftKey || val.data.type === 'node-selection')
+                return;
+            _this.currentClickNode = val.data;
+            // 如果selectNodesIds中已存在此节点，则取消选中此节点
+            var isUnSelected = false;
+            if (_this.selectNodesIds.includes(val.data.id)) {
+                _this.lf.getNodeModel(val.data.id).setSelected(false);
+                isUnSelected = true;
+            }
+            // 获取所有被选中的节点，获取到的数组是无序的
+            var nodes = lf.getSelectElements(true).nodes;
+            // 使用插件时判断是否允许使用node-selection
+            if (lf.disableNodeSelection && lf.disableNodeSelection(nodes)) {
+                return;
+            }
+            _this.selectNodes = nodes;
+            if (_this.selectNodes.length === 1) {
+                if (!isUnSelected) {
+                    _this.addNodeSelection();
+                }
+                else {
+                    _this.updateNodeSelection();
+                }
+            }
+            else if (_this.selectNodes.length > 1) {
+                _this.updateNodeSelection();
+            }
+        });
+    };
+    NodeSelection.pluginName = 'node-selection';
+    return NodeSelection;
+}());
+exports.NodeSelection = NodeSelection;
+exports.default = NodeSelection;

package/es/index.d.ts

@@ -14,3 +14,4 @@ export * from './materials/group';
 export * from './NodeResize';
 export * from './tools/flow-path';
 export * from './tools/auto-layout';
+export * from './materials/node-selection';

package/es/index.js

@@ -15,3 +15,4 @@ export * from './materials/group';
 export * from './NodeResize';
 export * from './tools/flow-path';
 export * from './tools/auto-layout';
+export * from './materials/node-selection';

package/es/materials/node-selection/index.d.ts

@@ -0,0 +1,29 @@
+declare class NodeSelection {
+    static pluginName: string;
+    lf: any;
+    selectNodes: any[];
+    currentClickNode: any;
+    d: number;
+    constructor({ lf }: {
+        lf: any;
+    });
+    /**
+     * 获取所选node的id数组
+     */
+    get selectNodesIds(): any[];
+    /**
+     * 新建node-selection节点
+     */
+    addNodeSelection(): void;
+    /**
+     * 更新node-selection节点
+     */
+    updateNodeSelection(): void;
+    /**
+     * 获取所属的node-selection
+     */
+    getNodeSelection(): any;
+    render(lf: any): void;
+}
+export default NodeSelection;
+export { NodeSelection, };

package/es/materials/node-selection/index.js

@@ -0,0 +1,264 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import _ from 'lodash-es';
+import { h, PolygonNode, PolygonNodeModel } from '@logicflow/core';
+var NodeSelectionView = /** @class */ (function (_super) {
+    __extends(NodeSelectionView, _super);
+    function NodeSelectionView() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.d = 10;
+        return _this;
+    }
+    NodeSelectionView.prototype.getShapeStyle = function () {
+        // 设置边框为虚线
+        var style = _super.prototype.getShapeStyle.call(this);
+        // @ts-ignore
+        style.strokeDashArray = '10 5';
+        return style;
+    };
+    NodeSelectionView.prototype.getLabelShape = function () {
+        var attributes = _super.prototype.getAttributes.call(this);
+        var x = attributes.x, // 元素中心点
+        y = attributes.y, // 元素中心点
+        width = attributes.width, height = attributes.height, stroke = attributes.stroke, id = attributes.id, _a = attributes.properties, labelText = _a.label_text, disabledDelete = _a.disabled_delete;
+        return h('svg', {
+            x: x - width / 2,
+            y: y - height / 2,
+            style: 'z-index: 0; background: none; overflow: auto;',
+        }, labelText ? h('text', {
+            x: 0,
+            y: -5,
+            width: 50,
+            height: 24,
+            fontSize: '16px',
+            fill: stroke,
+        }, '方案') : '', disabledDelete ? '' : h('text', {
+            x: labelText ? 50 : 0,
+            y: -5,
+            width: 50,
+            height: 24,
+            fontSize: '24px',
+            cursor: 'pointer',
+            fill: stroke,
+            onclick: this.handleCustomDeleteIconClick.bind(this, id),
+        }, 'x'));
+    };
+    NodeSelectionView.prototype.getShape = function () {
+        var attributes = _super.prototype.getAttributes.call(this);
+        var x = attributes.x, // 元素中心点
+        y = attributes.y, // 元素中心点
+        width = attributes.width, height = attributes.height, fill = attributes.fill, stroke = attributes.stroke, strokeWidth = attributes.strokeWidth, strokeDashArray = attributes.strokeDashArray, id = attributes.id;
+        return h('g', {}, [
+            h('rect', {
+                x: x - width / 2,
+                y: y - height / 2,
+                fill: fill,
+                stroke: stroke,
+                strokeWidth: strokeWidth,
+                width: width,
+                height: height,
+                strokeDashArray: strokeDashArray,
+                id: id,
+            }),
+            this.getLabelShape(),
+        ]);
+    };
+    NodeSelectionView.prototype.toFront = function () { };
+    /**
+     * 点击删除
+     * @param id
+     */
+    NodeSelectionView.prototype.handleCustomDeleteIconClick = function (id) {
+        var graphModel = this.props.graphModel;
+        graphModel.deleteNode(id);
+    };
+    return NodeSelectionView;
+}(PolygonNode));
+var NodeSelectionModel = /** @class */ (function (_super) {
+    __extends(NodeSelectionModel, _super);
+    function NodeSelectionModel() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.d = 10;
+        return _this;
+    }
+    NodeSelectionModel.prototype.setAttributes = function () {
+        var _this = this;
+        // 默认不显示
+        this.points = [];
+        this.text = {
+            value: '',
+            x: 0,
+            y: 0,
+            draggable: false,
+            editable: false,
+        };
+        this.stroke = this.properties.active_color || '#008000';
+        this.zIndex = 0;
+        this.draggable = false;
+        this.anchorsOffset = [[0, 0]];
+        if (this.properties.node_selection_ids.length > 1) {
+            setTimeout(function () {
+                _this.updatePointsByNodes(_this.properties.node_selection_ids);
+            });
+        }
+    };
+    NodeSelectionModel.prototype.getAnchorsByOffset = function () {
+        return [];
+    };
+    /**
+     * 更新points
+     * @param points
+     */
+    NodeSelectionModel.prototype.updatePoints = function (points) {
+        this.points = points;
+    };
+    /**
+     * 更新x y
+     */
+    NodeSelectionModel.prototype.updateCoordinate = function (_a) {
+        var x = _a.x, y = _a.y;
+        this.x = x;
+        this.y = y;
+    };
+    /**
+     * 更新points
+     */
+    NodeSelectionModel.prototype.updatePointsByNodes = function (nodesIds) {
+        var _this = this;
+        // TODO: 临时方案矩形
+        var points = [];
+        var minX = Infinity;
+        var minY = Infinity;
+        var maxX = -Infinity;
+        var maxY = -Infinity;
+        nodesIds.forEach(function (id) {
+            var model = _this.graphModel.getNodeModel(id);
+            if (!model)
+                return;
+            var width = model.width, height = model.height, x = model.x, y = model.y;
+            minX = Math.min(minX, x - width / 2 - _this.d);
+            minY = Math.min(minY, y - height / 2 - _this.d);
+            maxX = Math.max(maxX, x + width / 2 + _this.d);
+            maxY = Math.max(maxY, y + height / 2 + _this.d);
+        });
+        points.push([minX, minY], [maxX, minY], [maxX, maxY], [minX, maxY]);
+        if ([minX, minY, maxX, maxY].some(function (n) { return Math.abs(n) === Infinity; }))
+            return;
+        this.updatePoints(points);
+        this.updateCoordinate({ x: ((maxX + minX) / 2), y: (maxY + minY) / 2 });
+    };
+    return NodeSelectionModel;
+}(PolygonNodeModel));
+var NodeSelection = /** @class */ (function () {
+    function NodeSelection(_a) {
+        var lf = _a.lf;
+        this.lf = null; // lf 实例
+        this.selectNodes = []; // 选择的nodes
+        this.currentClickNode = null; // 当前点击的节点，选中的节点是无序的
+        this.d = 10;
+        lf.register({
+            type: 'node-selection',
+            view: NodeSelectionView,
+            model: NodeSelectionModel,
+        });
+    }
+    Object.defineProperty(NodeSelection.prototype, "selectNodesIds", {
+        /**
+         * 获取所选node的id数组
+         */
+        get: function () {
+            return this.selectNodes.map(function (node) { return node.id; });
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * 新建node-selection节点
+     */
+    NodeSelection.prototype.addNodeSelection = function () {
+        var node = this.lf.addNode({
+            type: 'node-selection',
+            text: '',
+            properties: {
+                node_selection_ids: this.selectNodesIds,
+            },
+        });
+        node.updatePointsByNodes(this.selectNodesIds);
+    };
+    /**
+     * 更新node-selection节点
+     */
+    NodeSelection.prototype.updateNodeSelection = function () {
+        var nodeSelection = this.getNodeSelection();
+        if (!nodeSelection)
+            return;
+        this.lf.setProperties(nodeSelection.id, {
+            node_selection_ids: this.selectNodesIds,
+        });
+        this.lf.getNodeModel(nodeSelection.id).updatePointsByNodes(this.selectNodesIds);
+    };
+    /**
+     * 获取所属的node-selection
+     */
+    NodeSelection.prototype.getNodeSelection = function () {
+        var _this = this;
+        var ids = this.selectNodesIds;
+        var rawData = this.lf.getGraphRawData();
+        var oldIds = ids.filter(function (id) { return id !== _this.currentClickNode.id; });
+        return rawData.nodes.find(function (node) {
+            if (node.type === 'node-selection') {
+                var nodeSelectionIds_1 = _.get(node, 'properties.node_selection_ids', []);
+                return oldIds.every(function (id) { return nodeSelectionIds_1.includes(id); });
+            }
+            return false;
+        });
+    };
+    NodeSelection.prototype.render = function (lf) {
+        var _this = this;
+        this.lf = lf;
+        lf.on('node:click', function (val) {
+            if (!val.e.shiftKey || val.data.type === 'node-selection')
+                return;
+            _this.currentClickNode = val.data;
+            // 如果selectNodesIds中已存在此节点，则取消选中此节点
+            var isUnSelected = false;
+            if (_this.selectNodesIds.includes(val.data.id)) {
+                _this.lf.getNodeModel(val.data.id).setSelected(false);
+                isUnSelected = true;
+            }
+            // 获取所有被选中的节点，获取到的数组是无序的
+            var nodes = lf.getSelectElements(true).nodes;
+            // 使用插件时判断是否允许使用node-selection
+            if (lf.disableNodeSelection && lf.disableNodeSelection(nodes)) {
+                return;
+            }
+            _this.selectNodes = nodes;
+            if (_this.selectNodes.length === 1) {
+                if (!isUnSelected) {
+                    _this.addNodeSelection();
+                }
+                else {
+                    _this.updateNodeSelection();
+                }
+            }
+            else if (_this.selectNodes.length > 1) {
+                _this.updateNodeSelection();
+            }
+        });
+    };
+    NodeSelection.pluginName = 'node-selection';
+    return NodeSelection;
+}());
+export default NodeSelection;
+export { NodeSelection, };