@logicflow/core 1.2.27 → 2.0.0-beta.1

package/lib/view/Control.js

@@ -0,0 +1,327 @@
+"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 (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+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.ResizeControlGroup = exports.ResizeControl = exports.ResizeControlIndex = void 0;
+var jsx_runtime_1 = require("preact/jsx-runtime");
+var compat_1 = require("preact/compat");
+var lodash_es_1 = require("lodash-es");
+var shape_1 = require("./shape");
+var util_1 = require("../util");
+var constant_1 = require("../constant");
+var ResizeControlIndex;
+(function (ResizeControlIndex) {
+    ResizeControlIndex[ResizeControlIndex["LEFT_TOP"] = 0] = "LEFT_TOP";
+    ResizeControlIndex[ResizeControlIndex["RIGHT_TOP"] = 1] = "RIGHT_TOP";
+    ResizeControlIndex[ResizeControlIndex["RIGHT_BOTTOM"] = 2] = "RIGHT_BOTTOM";
+    ResizeControlIndex[ResizeControlIndex["LEFT_BOTTOM"] = 3] = "LEFT_BOTTOM";
+})(ResizeControlIndex || (exports.ResizeControlIndex = ResizeControlIndex = {}));
+var ResizeControl = /** @class */ (function (_super) {
+    __extends(ResizeControl, _super);
+    function ResizeControl(props) {
+        var _this = _super.call(this) || this;
+        _this.updateEdgePointByAnchors = function () {
+            // https://github.com/didi/LogicFlow/issues/807
+            // https://github.com/didi/LogicFlow/issues/875
+            // 之前的做法，比如Rect是使用getRectResizeEdgePoint()计算边的point缩放后的位置
+            // getRectResizeEdgePoint()考虑了瞄点在四条边以及在4个圆角的情况
+            // 使用的是一种等比例缩放的模式，比如：
+            // const pct = (y - beforeNode.y) / (beforeNode.height / 2 - radius)
+            // afterPoint.y = afterNode.y + (afterNode.height / 2 - radius) * pct
+            // 但是用户自定义的getDefaultAnchor()不一定是按照比例编写的
+            // 它可能是 x: x + 20：每次缩放都会保持在x右边20的位置，因此用户自定义瞄点时，然后产生无法跟随的问题
+            // 现在的做法是：直接获取用户自定义瞄点的位置，然后用这个位置作为边的新的起点，而不是自己进行计算
+            var _a = _this.nodeModel, id = _a.id, anchors = _a.anchors;
+            var edges = _this.graphModel.getNodeEdges(id);
+            // 更新边
+            (0, lodash_es_1.forEach)(edges, function (edge) {
+                if (edge.sourceNodeId === id) {
+                    // 边是以该节点为 sourceNode 时
+                    var anchorItem = (0, lodash_es_1.find)(anchors, function (anchor) { return anchor.id === edge.sourceAnchorId; });
+                    if (anchorItem) {
+                        edge.updateStartPoint({
+                            x: anchorItem.x,
+                            y: anchorItem.y,
+                        });
+                    }
+                }
+                else if (edge.targetNodeId === id) {
+                    // 边是以该节点为 targetNode 时
+                    var anchorItem = (0, lodash_es_1.find)(anchors, function (anchor) { return anchor.id === edge.targetAnchorId; });
+                    if (anchorItem) {
+                        edge.updateEndPoint({
+                            x: anchorItem.x,
+                            y: anchorItem.y,
+                        });
+                    }
+                }
+            });
+        };
+        _this.triggerResizeEvent = function (preNodeData, nextNodeData) {
+            _this.graphModel.eventCenter.emit(constant_1.EventType.NODE_RESIZE, {
+                preNodeData: preNodeData,
+                nextNodeData: nextNodeData,
+            });
+        };
+        /**
+         * 计算 Control 拖动后，节点的高度信息
+         * @param index
+         * @param resizeInfo
+         * @param pct
+         * @param freezeWidth
+         * @param freezeHeight
+         */
+        _this.recalcResizeInfo = function (index, resizeInfo, pct, freezeWidth, freezeHeight) {
+            if (pct === void 0) { pct = 1; }
+            if (freezeWidth === void 0) { freezeWidth = false; }
+            if (freezeHeight === void 0) { freezeHeight = false; }
+            var nextResizeInfo = (0, lodash_es_1.cloneDeep)(resizeInfo);
+            var deltaX = nextResizeInfo.deltaX, deltaY = nextResizeInfo.deltaY;
+            var width = nextResizeInfo.width, height = nextResizeInfo.height, PCTResizeInfo = nextResizeInfo.PCTResizeInfo;
+            if (PCTResizeInfo) {
+                var sensitivity = 4; // 越低越灵敏
+                var deltaScale = 0;
+                var combineDelta = 0;
+                switch (index) {
+                    case ResizeControlIndex.LEFT_TOP:
+                        combineDelta = (deltaX * -1 - deltaY) / sensitivity;
+                        break;
+                    case ResizeControlIndex.RIGHT_TOP:
+                        combineDelta = (deltaX - deltaY) / sensitivity;
+                        break;
+                    case ResizeControlIndex.RIGHT_BOTTOM:
+                        combineDelta = (deltaX + deltaY) / sensitivity;
+                        break;
+                    case ResizeControlIndex.LEFT_BOTTOM:
+                        combineDelta = (deltaX * -1 + deltaY) / sensitivity;
+                        break;
+                    default:
+                        break;
+                }
+                if (combineDelta !== 0) {
+                    deltaScale =
+                        Math.round((combineDelta / PCTResizeInfo.ResizeBasis.basisHeight) * 100000) / 1000;
+                }
+                PCTResizeInfo.ResizePCT.widthPCT = Math.max(Math.min(PCTResizeInfo.ResizePCT.widthPCT + deltaScale, PCTResizeInfo.ScaleLimit.maxScaleLimit), PCTResizeInfo.ScaleLimit.minScaleLimit);
+                PCTResizeInfo.ResizePCT.heightPCT = Math.max(Math.min(PCTResizeInfo.ResizePCT.heightPCT + deltaScale, PCTResizeInfo.ScaleLimit.maxScaleLimit), PCTResizeInfo.ScaleLimit.minScaleLimit);
+                var spcWidth = Math.round((PCTResizeInfo.ResizePCT.widthPCT *
+                    PCTResizeInfo.ResizeBasis.basisWidth) /
+                    100);
+                var spcHeight = Math.round((PCTResizeInfo.ResizePCT.heightPCT *
+                    PCTResizeInfo.ResizeBasis.basisHeight) /
+                    100);
+                switch (index) {
+                    case ResizeControlIndex.LEFT_TOP:
+                        deltaX = width - spcWidth;
+                        deltaY = height - spcHeight;
+                        break;
+                    case ResizeControlIndex.RIGHT_TOP:
+                        deltaX = spcWidth - width;
+                        deltaY = height - spcHeight;
+                        break;
+                    case ResizeControlIndex.RIGHT_BOTTOM:
+                        deltaX = spcWidth - width;
+                        deltaY = spcHeight - height;
+                        break;
+                    case ResizeControlIndex.LEFT_BOTTOM:
+                        deltaX = width - spcWidth;
+                        deltaY = spcHeight - height;
+                        break;
+                    default:
+                        break;
+                }
+                return nextResizeInfo;
+            }
+            // 如果限制了宽/高不变，对应的 width/height 保持一致
+            switch (index) {
+                case ResizeControlIndex.LEFT_TOP:
+                    nextResizeInfo.width = freezeWidth ? width : width - deltaX * pct;
+                    nextResizeInfo.height = freezeHeight ? height : height - deltaY * pct;
+                    break;
+                case ResizeControlIndex.RIGHT_TOP:
+                    nextResizeInfo.width = freezeWidth ? width : width + deltaX * pct;
+                    nextResizeInfo.height = freezeHeight ? height : height - deltaY * pct;
+                    break;
+                case ResizeControlIndex.RIGHT_BOTTOM:
+                    nextResizeInfo.width = freezeWidth ? width : width + deltaX * pct;
+                    nextResizeInfo.height = freezeHeight ? height : height + deltaY * pct;
+                    break;
+                case ResizeControlIndex.LEFT_BOTTOM:
+                    nextResizeInfo.width = freezeWidth ? width : width - deltaX * pct;
+                    nextResizeInfo.height = freezeHeight ? height : height + deltaY * pct;
+                    break;
+                default:
+                    break;
+            }
+            return nextResizeInfo;
+        };
+        _this.resizeNode = function (_a) {
+            var deltaX = _a.deltaX, deltaY = _a.deltaY;
+            // TODO: 调用每个节点中更新缩放时的方法 updateNode 函数，用来各节点缩放的方法
+            // 1. 计算当前 Control 的一些信息，
+            var _b = _this.nodeModel, r = _b.r, // circle
+            rx = _b.rx, // ellipse/diamond
+            ry = _b.ry, width = _b.width, // rect/html
+            height = _b.height, PCTResizeInfo = _b.PCTResizeInfo, minWidth = _b.minWidth, minHeight = _b.minHeight, maxWidth = _b.maxWidth, maxHeight = _b.maxHeight;
+            var isFreezeWidth = minWidth === maxWidth;
+            var isFreezeHeight = minHeight === maxHeight;
+            var resizeInfo = {
+                width: r || rx || width,
+                height: r || ry || height,
+                deltaX: deltaX,
+                deltaY: deltaY,
+                PCTResizeInfo: PCTResizeInfo,
+            };
+            var pct = r || (rx && ry) ? 1 / 2 : 1;
+            var nextSize = _this.recalcResizeInfo(_this.index, resizeInfo, pct, isFreezeWidth, isFreezeHeight);
+            // 限制放大缩小的最大最小范围
+            if (nextSize.width < minWidth ||
+                nextSize.width > maxWidth ||
+                nextSize.height < minHeight ||
+                nextSize.height > maxHeight) {
+                _this.dragHandler.cancelDrag();
+                return;
+            }
+            // 如果限制了宽高不变，对应的 x/y 不产生位移
+            nextSize.deltaX = isFreezeWidth ? 0 : nextSize.deltaX;
+            nextSize.deltaY = isFreezeWidth ? 0 : nextSize.deltaY;
+            var preNodeData = _this.nodeModel.getData();
+            var nextNodeData = _this.nodeModel.resize(nextSize);
+            console.log('nextNodeData ===>>>', nextNodeData);
+            // 更新边
+            _this.updateEdgePointByAnchors();
+            // 触发 resize 事件
+            _this.triggerResizeEvent(preNodeData, nextNodeData);
+        };
+        _this.onDragging = function (_a) {
+            var deltaX = _a.deltaX, deltaY = _a.deltaY;
+            var transformModel = _this.graphModel.transformModel;
+            var _b = __read(transformModel.fixDeltaXY(deltaX, deltaY), 2), dx = _b[0], dy = _b[1];
+            _this.resizeNode({
+                deltaX: dx,
+                deltaY: dy,
+            });
+        };
+        // 由于将拖拽放大缩小改成丝滑模式，这个时候需要再拖拽结束的时候，将节点的位置更新到 grid 上。
+        _this.onDragEnd = function () {
+            // const { gridSize = 1 } = this.graphModel
+            // const x = gridSize * Math.round(this.nodeModel.x / gridSize)
+            // const y = gridSize * Math.round(this.nodeModel.y / gridSize)
+            var x = _this.nodeModel.x;
+            var y = _this.nodeModel.y;
+            _this.nodeModel.moveTo(x, y);
+            // 先触发 onDragging() -> 更新边 -> 再触发用户自定义的 getDefaultAnchor()，所以 onDragging()
+            // 拿到的 anchors 是滞后的，为了正确的设置最终的位置，应该在拖拽结束的时候，再设置一次边的 Point 位置，
+            // 此时拿到的 anchors 是最新的
+            _this.updateEdgePointByAnchors();
+        };
+        var index = props.index, model = props.model, graphModel = props.graphModel;
+        _this.index = index;
+        _this.nodeModel = model;
+        _this.graphModel = graphModel;
+        // 初始化拖拽工具
+        _this.dragHandler = new util_1.StepDrag({
+            onDragging: _this.onDragging,
+            onDragEnd: _this.onDragEnd,
+            step: graphModel.gridSize,
+        });
+        return _this;
+    }
+    ResizeControl.prototype.render = function () {
+        var _a = this.props, x = _a.x, y = _a.y, direction = _a.direction, model = _a.model;
+        var style = model.getResizeControlStyle();
+        return ((0, jsx_runtime_1.jsx)("g", { className: "lf-resize-control lf-resize-control-".concat(direction), children: (0, jsx_runtime_1.jsx)(shape_1.Rect, __assign({ className: "lf-resize-control-content", x: x, y: y }, style, { onMouseDown: this.dragHandler.handleMouseDown })) }));
+    };
+    return ResizeControl;
+}(compat_1.Component));
+exports.ResizeControl = ResizeControl;
+var ResizeControlGroup = /** @class */ (function (_super) {
+    __extends(ResizeControlGroup, _super);
+    function ResizeControlGroup() {
+        return _super.call(this) || this;
+    }
+    ResizeControlGroup.prototype.getResizeControl = function () {
+        var _a = this.props, model = _a.model, graphModel = _a.graphModel;
+        var _b = (0, util_1.getNodeBBox)(model), minX = _b.minX, minY = _b.minY, maxX = _b.maxX, maxY = _b.maxY;
+        var controlList = [
+            {
+                index: ResizeControlIndex.LEFT_TOP,
+                direction: 'nw',
+                x: minX,
+                y: minY,
+            }, // 左上角
+            {
+                index: ResizeControlIndex.RIGHT_TOP,
+                direction: 'ne',
+                x: maxX,
+                y: minY,
+            }, // 右上角
+            {
+                index: ResizeControlIndex.RIGHT_BOTTOM,
+                direction: 'se',
+                x: maxX,
+                y: maxY,
+            }, // 右下角
+            {
+                index: ResizeControlIndex.LEFT_BOTTOM,
+                direction: 'sw',
+                x: minX,
+                y: maxY,
+            }, // 左下角
+        ];
+        return (0, lodash_es_1.map)(controlList, function (control) { return ((0, jsx_runtime_1.jsx)(ResizeControl, __assign({}, control, { model: model, graphModel: graphModel }))); });
+    };
+    ResizeControlGroup.prototype.getResizeOutline = function () {
+        var model = this.props.model;
+        var x = model.x, y = model.y, width = model.width, height = model.height;
+        var style = model.getResizeOutlineStyle();
+        return (0, jsx_runtime_1.jsx)(shape_1.Rect, __assign({}, style, { x: x, y: y, width: width, height: height }));
+    };
+    ResizeControlGroup.prototype.render = function () {
+        return ((0, jsx_runtime_1.jsxs)("g", { className: "lf-resize-control-group", children: [this.getResizeOutline(), this.getResizeControl()] }));
+    };
+    return ResizeControlGroup;
+}(compat_1.Component));
+exports.ResizeControlGroup = ResizeControlGroup;
+exports.default = ResizeControlGroup;
+//# sourceMappingURL=Control.js.map

package/lib/view/Control.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Control.js","sourceRoot":"","sources":["../../src/view/Control.tsx"],"names":[],"mappings":"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"}

package/lib/view/Graph.d.ts

@@ -0,0 +1,18 @@
+import { Component, ComponentType } from 'preact/compat';
+import DnD from './behavior/dnd';
+import { Options as LFOptions } from '../options';
+import Tool from '../tool/tool';
+import { GraphModel, BaseEdgeModel, BaseNodeModel, SnaplineModel } from '../model';
+type IGraphProps = {
+    getView: (type: string) => ComponentType<any> | undefined;
+    tool: Tool;
+    options: LFOptions.Definition;
+    dnd: DnD;
+    snaplineModel?: SnaplineModel;
+    graphModel: GraphModel;
+};
+declare class Graph extends Component<IGraphProps> {
+    getComponent(model: BaseEdgeModel | BaseNodeModel, graphModel: GraphModel, overlay?: string): import("preact/compat").JSX.Element | null;
+    render(): import("preact/compat").JSX.Element;
+}
+export default Graph;

package/lib/view/Graph.js

@@ -0,0 +1,79 @@
+"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 (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+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 __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("preact/jsx-runtime");
+var compat_1 = require("preact/compat");
+var lodash_es_1 = require("lodash-es");
+var overlay_1 = require("./overlay");
+var __1 = require("..");
+var Graph = /** @class */ (function (_super) {
+    __extends(Graph, _super);
+    function Graph() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Graph.prototype.getComponent = function (model, graphModel, overlay) {
+        if (overlay === void 0) { overlay = 'canvas-overlay'; }
+        var getView = this.props.getView;
+        // https://juejin.cn/post/7046639346656493582 - 几种方式来声明React Component的类型
+        var View = getView(model.type);
+        if (View) {
+            return ((0, jsx_runtime_1.jsx)(View, { model: model, graphModel: graphModel, overlay: overlay }, model.id));
+        }
+        return null;
+    };
+    Graph.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, graphModel = _a.graphModel, tool = _a.tool, options = _a.options, dnd = _a.dnd, snaplineModel = _a.snaplineModel;
+        var style = {};
+        // 如果初始化的时候，不传宽高，则默认为父容器宽高。
+        if (options.width) {
+            style.width = "".concat(graphModel.width, "px");
+        }
+        if (options.height) {
+            style.height = "".concat(graphModel.height, "px");
+        }
+        var grid = options.grid && overlay_1.Grid.getGridOptions(options.grid);
+        var fakeNode = graphModel.fakeNode, editConfigModel = graphModel.editConfigModel;
+        var adjustEdge = editConfigModel.adjustEdge;
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "lf-graph", "flow-id": graphModel.flowId, style: style, children: [(0, jsx_runtime_1.jsxs)(overlay_1.CanvasOverlay, { graphModel: graphModel, dnd: dnd, children: [(0, jsx_runtime_1.jsx)("g", { className: "lf-base", children: (0, lodash_es_1.map)(graphModel.sortElements, function (nodeModel) {
+                                return _this.getComponent(nodeModel, graphModel);
+                            }) }), fakeNode ? this.getComponent(fakeNode, graphModel) : ''] }), (0, jsx_runtime_1.jsxs)(overlay_1.ModificationOverlay, { graphModel: graphModel, children: [(0, jsx_runtime_1.jsx)(overlay_1.OutlineOverlay, { graphModel: graphModel }), adjustEdge ? (0, jsx_runtime_1.jsx)(overlay_1.BezierAdjustOverlay, { graphModel: graphModel }) : '', options.snapline !== false ? ((0, jsx_runtime_1.jsx)(overlay_1.SnaplineOverlay, { snaplineModel: snaplineModel })) : ('')] }), (0, jsx_runtime_1.jsx)(overlay_1.ToolOverlay, { graphModel: graphModel, tool: tool }), options.background && ((0, jsx_runtime_1.jsx)(overlay_1.BackgroundOverlay, { background: options.background })), grid && (0, jsx_runtime_1.jsx)(overlay_1.Grid, __assign({}, grid, { graphModel: graphModel }))] }));
+    };
+    Graph = __decorate([
+        __1.observer
+    ], Graph);
+    return Graph;
+}(compat_1.Component));
+exports.default = Graph;
+//# sourceMappingURL=Graph.js.map

package/lib/view/Graph.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Graph.js","sourceRoot":"","sources":["../../src/view/Graph.tsx"],"names":[],"mappings":"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"}

package/lib/view/Rotate.d.ts

@@ -0,0 +1,21 @@
+import { Component } from 'preact/compat';
+import LogicFlow from '../LogicFlow';
+import EventEmitter from '../event/eventEmitter';
+import { GraphModel, BaseNodeModel } from '../model';
+import { Vector } from '../util';
+interface IRotateControlProps {
+    graphModel: GraphModel;
+    nodeModel: BaseNodeModel;
+    eventCenter: EventEmitter;
+    style: LogicFlow.CommonTheme;
+}
+declare class RotateControlPoint extends Component<IRotateControlProps> {
+    readonly style: {};
+    private defaultAngle;
+    normal: Vector;
+    stepperDrag: any;
+    constructor(props: IRotateControlProps);
+    onDragging: ({ event }: any) => void;
+    render(): import("preact/compat").JSX.Element;
+}
+export default RotateControlPoint;

package/lib/view/Rotate.js

@@ -0,0 +1,113 @@
+"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 (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("preact/jsx-runtime");
+var compat_1 = require("preact/compat");
+var lodash_es_1 = require("lodash-es");
+var Circle_1 = __importDefault(require("./shape/Circle"));
+var constant_1 = require("../constant");
+var util_1 = require("../util");
+var RotateControlPoint = /** @class */ (function (_super) {
+    __extends(RotateControlPoint, _super);
+    function RotateControlPoint(props) {
+        var _this = _super.call(this, props) || this;
+        _this.style = {};
+        _this.onDragging = function (_a) {
+            var _b;
+            var event = _a.event;
+            var _c = _this.props, graphModel = _c.graphModel, nodeModel = _c.nodeModel, eventCenter = _c.eventCenter;
+            var selectNodes = graphModel.selectNodes;
+            var x = nodeModel.x, y = nodeModel.y;
+            var clientX = event.clientX, clientY = event.clientY;
+            var _d = graphModel.getPointByClient({
+                x: clientX,
+                y: clientY,
+            }).canvasOverlayPosition, cx = _d.x, cy = _d.y;
+            var v = new util_1.Vector(cx - x, cy - y);
+            var angle = ((_b = _this.normal) === null || _b === void 0 ? void 0 : _b.angle(v)) - _this.defaultAngle;
+            var matrix = new util_1.TranslateMatrix(-x, -y)
+                .rotate(angle)
+                .translate(x, y)
+                .toString();
+            nodeModel.transform = matrix;
+            nodeModel.rotate = angle;
+            var nodeIds = (0, lodash_es_1.map)(selectNodes, function (node) { return node.id; });
+            if (nodeIds.indexOf(nodeModel.id) === -1) {
+                nodeIds = [nodeModel.id];
+            }
+            var nodeIdMap = (0, lodash_es_1.reduce)(nodeIds, function (acc, nodeId) {
+                var node = graphModel.getNodeModelById(nodeId);
+                acc[nodeId] = node === null || node === void 0 ? void 0 : node.getMoveDistance(0, 0, false);
+                return acc;
+            }, {});
+            nodeIds.forEach(function (nodeId) {
+                var edges = graphModel.getNodeEdges(nodeId);
+                edges.forEach(function (edge) {
+                    if (nodeIdMap[edge.sourceNodeId]) {
+                        var model = graphModel.getNodeModelById(edge.sourceNodeId);
+                        var anchor = model.anchors.find(function (item) { return item.id === edge.sourceAnchorId; });
+                        edge.updateStartPoint(anchor);
+                    }
+                    if (nodeIdMap[edge.targetNodeId]) {
+                        var model = graphModel.getNodeModelById(edge.targetNodeId);
+                        var anchor = model.anchors.find(function (item) { return item.id === edge.targetAnchorId; });
+                        edge.updateEndPoint(anchor);
+                    }
+                });
+            });
+            eventCenter.emit(constant_1.EventType.NODE_ROTATE, {
+                e: event,
+                nodeModel: nodeModel,
+            });
+        };
+        _this.style = props.style;
+        _this.stepperDrag = new util_1.StepDrag({
+            onDragging: _this.onDragging,
+        });
+        return _this;
+    }
+    RotateControlPoint.prototype.render = function () {
+        var _this = this;
+        var nodeModel = this.props.nodeModel;
+        var x = nodeModel.x, y = nodeModel.y, width = nodeModel.width, height = nodeModel.height;
+        var cx = x + width / 2 + 20;
+        var cy = y - height / 2 - 20;
+        this.normal = new util_1.Vector(1, 0);
+        this.defaultAngle = this.normal.angle(new util_1.Vector(cx - x, cy - y));
+        nodeModel.defaultAngle = this.defaultAngle;
+        return ((0, jsx_runtime_1.jsx)("g", { className: "lf-rotate-control", children: (0, jsx_runtime_1.jsx)("g", { onMouseDown: function (ev) {
+                    _this.stepperDrag.handleMouseDown(ev);
+                }, children: (0, jsx_runtime_1.jsx)(Circle_1.default, __assign({}, this.style, { cx: cx, cy: cy })) }) }));
+    };
+    return RotateControlPoint;
+}(compat_1.Component));
+exports.default = RotateControlPoint;
+//# sourceMappingURL=Rotate.js.map

package/lib/view/Rotate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Rotate.js","sourceRoot":"","sources":["../../src/view/Rotate.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,wCAAyC;AACzC,uCAAuC;AACvC,0DAAmC;AAEnC,wCAAuC;AAGvC,gCAA2D;AAS3D;IAAiC,sCAA8B;IAM7D,4BAAY,KAA0B;QACpC,YAAA,MAAK,YAAC,KAAK,CAAC,SAAA;QANL,WAAK,GAAG,EAAE,CAAA;QAanB,gBAAU,GAAG,UAAC,EAAc;;gBAAZ,KAAK,WAAA;YACb,IAAA,KAAyC,KAAI,CAAC,KAAK,EAAjD,UAAU,gBAAA,EAAE,SAAS,eAAA,EAAE,WAAW,iBAAe,CAAA;YACjD,IAAA,WAAW,GAAK,UAAU,YAAf,CAAe;YAC1B,IAAA,CAAC,GAAQ,SAAS,EAAjB,EAAE,CAAC,GAAK,SAAS,EAAd,CAAc;YAClB,IAAA,OAAO,GAAc,KAAK,QAAnB,EAAE,OAAO,GAAK,KAAK,QAAV,CAAU;YAEhC,IAAA,KACE,UAAU,CAAC,gBAAgB,CAAC;gBAC9B,CAAC,EAAE,OAAO;gBACV,CAAC,EAAE,OAAO;aACX,CAAC,sBAJuC,EAAX,EAAE,OAAA,EAAK,EAAE,OAAE,CAIvC;YACF,IAAM,CAAC,GAAG,IAAI,aAAM,CAAC,EAAE,GAAG,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC,CAAA;YACpC,IAAM,KAAK,GAAG,CAAA,MAAA,KAAI,CAAC,MAAM,0CAAE,KAAK,CAAC,CAAC,CAAC,IAAG,KAAI,CAAC,YAAY,CAAA;YACvD,IAAM,MAAM,GAAG,IAAI,sBAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;iBACvC,MAAM,CAAC,KAAK,CAAC;iBACb,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC;iBACf,QAAQ,EAAE,CAAA;YACb,SAAS,CAAC,SAAS,GAAG,MAAM,CAAA;YAC5B,SAAS,CAAC,MAAM,GAAG,KAAK,CAAA;YAExB,IAAI,OAAO,GAAG,IAAA,eAAG,EAAC,WAAW,EAAE,UAAC,IAAI,IAAK,OAAA,IAAI,CAAC,EAAE,EAAP,CAAO,CAAC,CAAA;YACjD,IAAI,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC;gBACzC,OAAO,GAAG,CAAC,SAAS,CAAC,EAAE,CAAC,CAAA;YAC1B,CAAC;YACD,IAAM,SAAS,GAAG,IAAA,kBAAM,EACtB,OAAO,EACP,UAAC,GAAG,EAAE,MAAM;gBACV,IAAM,IAAI,GAAG,UAAU,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAA;gBAChD,GAAG,CAAC,MAAM,CAAC,GAAG,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,eAAe,CAAC,CAAC,EAAE,CAAC,EAAE,KAAK,CAAC,CAAA;gBAChD,OAAO,GAAG,CAAA;YACZ,CAAC,EACD,EAAE,CACH,CAAA;YACD,OAAO,CAAC,OAAO,CAAC,UAAC,MAAM;gBACrB,IAAM,KAAK,GAAG,UAAU,CAAC,YAAY,CAAC,MAAM,CAAC,CAAA;gBAC7C,KAAK,CAAC,OAAO,CAAC,UAAC,IAAI;oBACjB,IAAI,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE,CAAC;wBACjC,IAAM,KAAK,GAAG,UAAU,CAAC,gBAAgB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAA;wBAC5D,IAAM,MAAM,GAAG,KAAM,CAAC,OAAO,CAAC,IAAI,CAChC,UAAC,IAAI,IAAK,OAAA,IAAI,CAAC,EAAE,KAAK,IAAI,CAAC,cAAc,EAA/B,CAA+B,CACzC,CAAA;wBACF,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAA;oBAC/B,CAAC;oBACD,IAAI,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE,CAAC;wBACjC,IAAM,KAAK,GAAG,UAAU,CAAC,gBAAgB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAA;wBAC5D,IAAM,MAAM,GAAG,KAAM,CAAC,OAAO,CAAC,IAAI,CAChC,UAAC,IAAI,IAAK,OAAA,IAAI,CAAC,EAAE,KAAK,IAAI,CAAC,cAAc,EAA/B,CAA+B,CACzC,CAAA;wBACF,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,CAAA;oBAC7B,CAAC;gBACH,CAAC,CAAC,CAAA;YACJ,CAAC,CAAC,CAAA;YAEF,WAAW,CAAC,IAAI,CAAC,oBAAS,CAAC,WAAW,EAAE;gBACtC,CAAC,EAAE,KAAK;gBACR,SAAS,WAAA;aACV,CAAC,CAAA;QACJ,CAAC,CAAA;QA/DC,KAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAA;QACxB,KAAI,CAAC,WAAW,GAAG,IAAI,eAAQ,CAAC;YAC9B,UAAU,EAAE,KAAI,CAAC,UAAU;SAC5B,CAAC,CAAA;;IACJ,CAAC;IA6DD,mCAAM,GAAN;QAAA,iBAmBC;QAlBS,IAAA,SAAS,GAAK,IAAI,CAAC,KAAK,UAAf,CAAe;QACxB,IAAA,CAAC,GAAuB,SAAS,EAAhC,EAAE,CAAC,GAAoB,SAAS,EAA7B,EAAE,KAAK,GAAa,SAAS,MAAtB,EAAE,MAAM,GAAK,SAAS,OAAd,CAAc;QACzC,IAAM,EAAE,GAAG,CAAC,GAAG,KAAK,GAAG,CAAC,GAAG,EAAE,CAAA;QAC7B,IAAM,EAAE,GAAG,CAAC,GAAG,MAAM,GAAG,CAAC,GAAG,EAAE,CAAA;QAC9B,IAAI,CAAC,MAAM,GAAG,IAAI,aAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;QAC9B,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,aAAM,CAAC,EAAE,GAAG,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC,CAAC,CAAA;QACjE,SAAS,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAA;QAC1C,OAAO,CACL,8BAAG,SAAS,EAAC,mBAAmB,YAC9B,8BACE,WAAW,EAAE,UAAC,EAAE;oBACd,KAAI,CAAC,WAAW,CAAC,eAAe,CAAC,EAAE,CAAC,CAAA;gBACtC,CAAC,YAED,uBAAC,gBAAM,eAAK,IAAI,CAAC,KAAK,IAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,IAAI,GACxC,GACF,CACL,CAAA;IACH,CAAC;IACH,yBAAC;AAAD,CAAC,AA7FD,CAAiC,kBAAS,GA6FzC;AAED,kBAAe,kBAAkB,CAAA"}

package/lib/view/behavior/dnd.d.ts

@@ -0,0 +1,27 @@
+import LogicFlow from '../../LogicFlow';
+import { BaseNodeModel } from '../../model';
+import Position = LogicFlow.Position;
+import OnDragNodeConfig = LogicFlow.OnDragNodeConfig;
+export declare class Dnd {
+    nodeConfig: OnDragNodeConfig | null;
+    lf: LogicFlow;
+    fakeNode: BaseNodeModel | null;
+    constructor(params: {
+        lf: LogicFlow;
+    });
+    clientToLocalPoint({ x, y }: Position): Position;
+    startDrag(nodeConfig: OnDragNodeConfig): void;
+    stopDrag: () => void;
+    dragEnter: (e: MouseEvent) => void;
+    onDragOver: (e: MouseEvent) => boolean;
+    onDragLeave: () => void;
+    onDrop: (e: MouseEvent) => void;
+    eventMap(): {
+        onMouseEnter: (e: MouseEvent) => void;
+        onMouseOver: (e: MouseEvent) => void;
+        onMouseMove: (e: MouseEvent) => boolean;
+        onMouseLeave: () => void;
+        onMouseUp: (e: MouseEvent) => void;
+    };
+}
+export default Dnd;