@logicflow/core 1.2.27 → 2.0.0-beta.1

package/{types → es}/view/overlay/CanvasOverlay.d.ts

@@ -1,28 +1,25 @@
-import { h, Component } from 'preact';
+import { Component } from 'preact/compat';
+import Dnd from '../behavior/dnd';
 import GraphModel from '../../model/GraphModel';
-import { StepDrag } from '../../util/drag';
-import Dnd from '../behavior/DnD';
-declare type IProps = {
+import { StepDrag, IDragParams } from '../../util';
+type IProps = {
     graphModel: GraphModel;
     dnd: Dnd;
 };
-declare type IState = {
+type IState = {
     isDragging: boolean;
 };
-declare class CanvasOverlay extends Component<IProps, IState> {
+export declare class CanvasOverlay extends Component<IProps, IState> {
     stepDrag: StepDrag;
     stepScrollX: number;
     stepScrollY: number;
     constructor(props: IProps);
-    onDragging: ({ deltaX, deltaY }: {
-        deltaX: any;
-        deltaY: any;
-    }) => void;
+    onDragging: ({ deltaX, deltaY }: IDragParams) => void;
     onDragEnd: () => void;
     zoomHandler: (ev: WheelEvent) => void;
     clickHandler: (ev: MouseEvent) => void;
     handleContextMenu: (ev: MouseEvent) => void;
     mouseDownHandler: (ev: MouseEvent) => void;
-    render(): h.JSX.Element;
+    render(): import("preact/compat").JSX.Element;
 }
 export default CanvasOverlay;

package/es/view/overlay/CanvasOverlay.js

@@ -0,0 +1,172 @@
+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;
+};
+import { jsx as _jsx } from "preact/jsx-runtime";
+import { Component } from 'preact/compat';
+import { observer } from '../..';
+import { EventType } from '../../constant';
+import { StepDrag } from '../../util';
+var CanvasOverlay = /** @class */ (function (_super) {
+    __extends(CanvasOverlay, _super);
+    function CanvasOverlay(props) {
+        var _this = _super.call(this) || this;
+        _this.stepScrollX = 0;
+        _this.stepScrollY = 0;
+        // get InjectedProps() {
+        //   return this.props as InjectedProps;
+        // }
+        _this.onDragging = function (_a) {
+            var deltaX = _a.deltaX, deltaY = _a.deltaY;
+            _this.setState({
+                isDragging: true,
+            });
+            var _b = _this.props.graphModel, transformModel = _b.transformModel, editConfigModel = _b.editConfigModel;
+            if (editConfigModel.stopMoveGraph === true) {
+                return;
+            }
+            transformModel.translate(deltaX, deltaY);
+        };
+        _this.onDragEnd = function () {
+            _this.setState({
+                isDragging: false,
+            });
+        };
+        _this.zoomHandler = function (ev) {
+            var _a = _this.props, _b = _a.graphModel, editConfigModel = _b.editConfigModel, transformModel = _b.transformModel, gridSize = _b.gridSize, graphModel = _a.graphModel;
+            var eX = ev.deltaX, eY = ev.deltaY;
+            // 如果没有禁止滚动移动画布, 并且当前触发的时候ctrl键没有按住, 那么移动画布
+            if (!editConfigModel.stopScrollGraph && ev.ctrlKey !== true) {
+                ev.preventDefault();
+                _this.stepScrollX += eX;
+                _this.stepScrollY += eY;
+                if (Math.abs(_this.stepScrollX) >= gridSize) {
+                    var remainderX = _this.stepScrollX % gridSize;
+                    var moveDistance = _this.stepScrollX - remainderX;
+                    transformModel.translate(-moveDistance * transformModel.SCALE_X, 0);
+                    _this.stepScrollX = remainderX;
+                }
+                if (Math.abs(_this.stepScrollY) >= gridSize) {
+                    var remainderY = _this.stepScrollY % gridSize;
+                    var moveDistanceY = _this.stepScrollY - remainderY;
+                    transformModel.translate(0, -moveDistanceY * transformModel.SCALE_Y);
+                    _this.stepScrollY = remainderY;
+                }
+                return;
+            }
+            // 如果没有禁止缩放画布，那么进行缩放. 在禁止缩放画布后，按住ctrl键也不能缩放了。
+            if (!editConfigModel.stopZoomGraph) {
+                ev.preventDefault();
+                var position = graphModel.getPointByClient({
+                    x: ev.clientX,
+                    y: ev.clientY,
+                });
+                var _c = position.canvasOverlayPosition, x = _c.x, y = _c.y;
+                transformModel.zoom(ev.deltaY < 0, [x, y]);
+            }
+        };
+        _this.clickHandler = function (ev) {
+            // 点击空白处取消节点选中状态, 不包括冒泡过来的事件。
+            var target = ev.target;
+            if (target.getAttribute('name') === 'canvas-overlay') {
+                var graphModel = _this.props.graphModel;
+                var selectElements = graphModel.selectElements;
+                if (selectElements.size > 0) {
+                    graphModel.clearSelectElements();
+                }
+                graphModel.eventCenter.emit(EventType.BLANK_CLICK, { e: ev });
+            }
+        };
+        _this.handleContextMenu = function (ev) {
+            var target = ev.target;
+            if (target.getAttribute('name') === 'canvas-overlay') {
+                ev.preventDefault();
+                var graphModel = _this.props.graphModel;
+                var position = graphModel.getPointByClient({
+                    x: ev.clientX,
+                    y: ev.clientY,
+                });
+                // graphModel.setElementState(ElementState.SHOW_MENU, position.domOverlayPosition);
+                graphModel.eventCenter.emit(EventType.BLANK_CONTEXTMENU, {
+                    e: ev,
+                    position: position,
+                });
+            }
+        };
+        _this.mouseDownHandler = function (ev) {
+            var _a = _this.props.graphModel, eventCenter = _a.eventCenter, editConfigModel = _a.editConfigModel, SCALE_X = _a.transformModel.SCALE_X, gridSize = _a.gridSize;
+            var target = ev.target;
+            var isFrozenElement = !editConfigModel.adjustEdge && !editConfigModel.adjustNodePosition;
+            if (target.getAttribute('name') === 'canvas-overlay' || isFrozenElement) {
+                if (editConfigModel.stopMoveGraph !== true) {
+                    _this.stepDrag.setStep(gridSize * SCALE_X);
+                    _this.stepDrag.handleMouseDown(ev);
+                }
+                else {
+                    eventCenter.emit(EventType.BLANK_MOUSEDOWN, { e: ev });
+                }
+                // 为了处理画布移动的时候，编辑和菜单仍然存在的问题。
+                _this.clickHandler(ev);
+            }
+        };
+        var _a = props.graphModel, gridSize = _a.gridSize, eventCenter = _a.eventCenter;
+        _this.stepDrag = new StepDrag({
+            onDragging: _this.onDragging,
+            onDragEnd: _this.onDragEnd,
+            step: gridSize,
+            eventType: 'BLANK',
+            isStopPropagation: false,
+            eventCenter: eventCenter,
+            model: undefined,
+        });
+        // 当ctrl键被按住的时候，可以放大缩小。
+        _this.state = {
+            isDragging: false,
+        };
+        return _this;
+    }
+    CanvasOverlay.prototype.render = function () {
+        var transformModel = this.props.graphModel.transformModel;
+        var transform = transformModel.getTransformStyle().transform;
+        var _a = this.props, children = _a.children, dnd = _a.dnd;
+        var isDragging = this.state.isDragging;
+        return (_jsx("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", name: "canvas-overlay", onWheel: this.zoomHandler, onMouseDown: this.mouseDownHandler, onContextMenu: this.handleContextMenu, className: isDragging
+                ? 'lf-canvas-overlay lf-dragging'
+                : 'lf-canvas-overlay lf-drag-able' }, dnd.eventMap(), { children: _jsx("g", { transform: transform, children: children }) })));
+    };
+    CanvasOverlay = __decorate([
+        observer
+    ], CanvasOverlay);
+    return CanvasOverlay;
+}(Component));
+export { CanvasOverlay };
+export default CanvasOverlay;
+//# sourceMappingURL=CanvasOverlay.js.map

package/es/view/overlay/CanvasOverlay.js.map

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

package/es/view/overlay/Grid.d.ts

@@ -0,0 +1,45 @@
+import { Component } from 'preact/compat';
+import { GraphModel } from '../../model';
+import GridOptions = Grid.GridOptions;
+type IProps = GridOptions & {
+    graphModel: GraphModel;
+};
+export declare class Grid extends Component<IProps> {
+    readonly id: string;
+    renderDot(): import("preact/compat").JSX.Element;
+    renderMesh(): import("preact/compat").JSX.Element;
+    render(): import("preact/compat").JSX.Element;
+}
+export declare namespace Grid {
+    type GridOptions = {
+        /**
+         * 网格格子间距
+         */
+        size?: number;
+        /**
+         * 网格是否可见
+         */
+        visible?: boolean;
+        /**
+         * 网格类型
+         * - `dot` 点状网格
+         * - `mesh` 交叉线网格
+         */
+        type?: 'dot' | 'mesh';
+        config?: {
+            /**
+             * 网格的颜色
+             */
+            color: string;
+            /**
+             * 网格的宽度
+             * - 对于 `dot` 点状网格，表示点的大小
+             * - 对于 `mesh` 交叉线网格，表示线的宽度
+             */
+            thickness?: number;
+        };
+    };
+    const defaultProps: GridOptions;
+    function getGridOptions(options: number | boolean | GridOptions): GridOptions;
+}
+export {};

package/es/view/overlay/Grid.js

@@ -0,0 +1,127 @@
+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 __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;
+};
+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;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { Component } from 'preact/compat';
+import { cloneDeep, assign } from 'lodash-es';
+import { observer } from '../..';
+import { createUuid } from '../../util';
+import { DEFAULT_GRID_SIZE } from '../../constant';
+var Grid = /** @class */ (function (_super) {
+    __extends(Grid, _super);
+    function Grid() {
+        var _this = _super.apply(this, __spreadArray([], __read(arguments), false)) || this;
+        _this.id = createUuid();
+        return _this;
+    }
+    // 网格类型为点状
+    Grid.prototype.renderDot = function () {
+        var _a = this.props, config = _a.config, _b = _a.size, size = _b === void 0 ? 1 : _b, visible = _a.visible;
+        var _c = config !== null && config !== void 0 ? config : {}, color = _c.color, _d = _c.thickness, thickness = _d === void 0 ? 2 : _d;
+        // 对于点状网格，点的半径不能大于网格大小的四分之一
+        var radius = Math.min(Math.max(2, thickness), size / 4);
+        var opacity = visible ? 1 : 0;
+        return (_jsxs("g", { fill: color, opacity: opacity, children: [_jsx("circle", { cx: 0, cy: 0, r: radius / 2 }), _jsx("circle", { cx: 0, cy: size, r: radius / 2 }), _jsx("circle", { cx: size, cy: 0, r: radius / 2 }), _jsx("circle", { cx: size, cy: size, r: radius / 2 })] }));
+    };
+    // 网格类型为交叉线
+    // todo: 采用背景缩放的方式，实现更好的体验
+    Grid.prototype.renderMesh = function () {
+        var _a = this.props, config = _a.config, _b = _a.size, size = _b === void 0 ? 1 : _b, visible = _a.visible;
+        var _c = config !== null && config !== void 0 ? config : {}, color = _c.color, _d = _c.thickness, thickness = _d === void 0 ? 1 : _d;
+        // 对于交叉线网格，线的宽度不能大于网格大小的一半
+        var strokeWidth = Math.min(Math.max(1, thickness), size / 2);
+        var d = "M 0 0 H ".concat(size, " V ").concat(size, " H 0 Z");
+        var opacity = visible ? 1 : 0;
+        return (_jsx("path", { d: d, stroke: color, strokeWidth: strokeWidth, opacity: opacity, fill: "transparent" }));
+    };
+    Grid.prototype.render = function () {
+        var _a = this.props, type = _a.type, _b = _a.size, size = _b === void 0 ? 1 : _b, transformModel = _a.graphModel.transformModel;
+        var SCALE_X = transformModel.SCALE_X, SKEW_Y = transformModel.SKEW_Y, SKEW_X = transformModel.SKEW_X, SCALE_Y = transformModel.SCALE_Y, TRANSLATE_X = transformModel.TRANSLATE_X, TRANSLATE_Y = transformModel.TRANSLATE_Y;
+        var matrixString = [
+            SCALE_X,
+            SKEW_Y,
+            SKEW_X,
+            SCALE_Y,
+            TRANSLATE_X,
+            TRANSLATE_Y,
+        ].join(',');
+        var transform = "matrix(".concat(matrixString, ")");
+        // const transitionStyle = {
+        //   transition: 'all 0.1s ease',
+        // };
+        return (_jsx("div", { className: "lf-grid", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "100%", height: "100%", children: [_jsx("defs", { children: _jsxs("pattern", { id: this.id, patternUnits: "userSpaceOnUse", patternTransform: transform, x: "0", y: "0", width: size, height: size, children: [type === 'dot' && this.renderDot(), type === 'mesh' && this.renderMesh()] }) }), _jsx("rect", { width: "100%", height: "100%", fill: "url(#".concat(this.id, ")") })] }) }));
+    };
+    Grid = __decorate([
+        observer
+    ], Grid);
+    return Grid;
+}(Component));
+export { Grid };
+(function (Grid) {
+    Grid.defaultProps = {
+        size: DEFAULT_GRID_SIZE,
+        visible: true,
+        type: 'dot',
+        config: {
+            color: '#ababab',
+            thickness: 1,
+        },
+    };
+    function getGridOptions(options) {
+        var defaultOptions = cloneDeep(Grid.defaultProps);
+        if (typeof options === 'number') {
+            return assign(defaultOptions, { size: options });
+        }
+        else if (typeof options === 'boolean') {
+            return assign(defaultOptions, { visible: options });
+        }
+        else {
+            return assign(defaultOptions, options);
+        }
+    }
+    Grid.getGridOptions = getGridOptions;
+})(Grid || (Grid = {}));
+//# sourceMappingURL=Grid.js.map

package/es/view/overlay/Grid.js.map

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

package/es/view/overlay/ModificationOverlay.d.ts

@@ -0,0 +1,9 @@
+import { Component } from 'preact/compat';
+import GraphModel from '../../model/GraphModel';
+type IProps = {
+    graphModel: GraphModel;
+};
+export declare class ModificationOverlay extends Component<IProps> {
+    render(): import("preact/compat").JSX.Element;
+}
+export default ModificationOverlay;

package/es/view/overlay/ModificationOverlay.js

@@ -0,0 +1,43 @@
+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 __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;
+};
+import { jsx as _jsx } from "preact/jsx-runtime";
+import { Component } from 'preact/compat';
+import { observer } from '../..';
+var ModificationOverlay = /** @class */ (function (_super) {
+    __extends(ModificationOverlay, _super);
+    function ModificationOverlay() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    ModificationOverlay.prototype.render = function () {
+        var transformModel = this.props.graphModel.transformModel;
+        var transform = transformModel.getTransformStyle().transform;
+        var children = this.props.children;
+        return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "100%", height: "100%", className: "modification-overlay", children: _jsx("g", { transform: transform, children: children }) }));
+    };
+    ModificationOverlay = __decorate([
+        observer
+    ], ModificationOverlay);
+    return ModificationOverlay;
+}(Component));
+export { ModificationOverlay };
+export default ModificationOverlay;
+//# sourceMappingURL=ModificationOverlay.js.map

package/es/view/overlay/ModificationOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModificationOverlay.js","sourceRoot":"","sources":["../../../src/view/overlay/ModificationOverlay.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAQhC;IAAyC,uCAAiB;IAA1D;;IAmBA,CAAC;IAlBC,oCAAM,GAAN;QAEkB,IAAA,cAAc,GAC1B,IAAI,CAAC,KAAK,0BADgB,CAChB;QACN,IAAA,SAAS,GAAK,cAAc,CAAC,iBAAiB,EAAE,UAAvC,CAAuC;QAChD,IAAA,QAAQ,GAAK,IAAI,CAAC,KAAK,SAAf,CAAe;QAC/B,OAAO,CACL,cACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,KAAK,EACb,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,MAAM,EACb,SAAS,EAAC,sBAAsB,YAEhC,YAAG,SAAS,EAAE,SAAS,YAAG,QAAQ,GAAK,GACnC,CACP,CAAA;IACH,CAAC;IAlBU,mBAAmB;QAD/B,QAAQ;OACI,mBAAmB,CAmB/B;IAAD,0BAAC;CAAA,AAnBD,CAAyC,SAAS,GAmBjD;SAnBY,mBAAmB;AAqBhC,eAAe,mBAAmB,CAAA"}

package/es/view/overlay/OutlineOverlay.d.ts

@@ -0,0 +1,14 @@
+import { Component } from 'preact/compat';
+import { GraphModel, LineEdgeModel, BezierEdgeModel, PolylineEdgeModel } from '../../model';
+type IProps = {
+    graphModel: GraphModel;
+};
+export declare class OutlineOverlay extends Component<IProps> {
+    getNodesOutline(): any;
+    getEdgeOutline(): any;
+    getLineOutline(line: LineEdgeModel): import("preact/compat").JSX.Element;
+    getPolylineOutline(polyline: PolylineEdgeModel): import("preact/compat").JSX.Element;
+    getBezierOutline(bezier: BezierEdgeModel): import("preact/compat").JSX.Element;
+    render(): import("preact/compat").JSX.Element;
+}
+export default OutlineOverlay;

package/es/view/overlay/OutlineOverlay.js

@@ -0,0 +1,134 @@
+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;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { Component } from 'preact/compat';
+import { Rect } from '../shape';
+import { observer } from '../..';
+import { ModelType } from '../../constant';
+import { points2PointsList, getBezierPoints, getBBoxOfPoints } from '../../util';
+var OutlineOverlay = /** @class */ (function (_super) {
+    __extends(OutlineOverlay, _super);
+    function OutlineOverlay() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    // 节点outline
+    OutlineOverlay.prototype.getNodesOutline = function () {
+        var graphModel = this.props.graphModel;
+        var nodes = graphModel.nodes, _a = graphModel.editConfigModel, hoverOutline = _a.hoverOutline, nodeSelectedOutline = _a.nodeSelectedOutline;
+        var nodeOutline = [];
+        nodes.forEach(function (element) {
+            if (element.isHovered || element.isSelected) {
+                var isHovered = element.isHovered, isSelected = element.isSelected, x = element.x, y = element.y, width = element.width, height = element.height;
+                if ((nodeSelectedOutline && isSelected) ||
+                    (hoverOutline && isHovered)) {
+                    var style_1 = element.getOutlineStyle();
+                    var attributes_1 = {};
+                    Object.keys(style_1).forEach(function (key) {
+                        if (key !== 'hover') {
+                            attributes_1[key] = style_1[key];
+                        }
+                    });
+                    if (isHovered) {
+                        var hoverStyle = style_1.hover;
+                        attributes_1 = __assign(__assign({}, attributes_1), hoverStyle);
+                    }
+                    nodeOutline.push(_jsx(Rect, __assign({ transform: element.transform, className: "lf-outline-node", x: x, y: y, 
+                        // width: width + 10,
+                        // height: height + 10,
+                        width: width + 10,
+                        height: height + 10 }, attributes_1)));
+                }
+            }
+        });
+        return nodeOutline;
+    };
+    // 边的outline
+    OutlineOverlay.prototype.getEdgeOutline = function () {
+        var _a = this.props.graphModel, edgeList = _a.edges, _b = _a.editConfigModel, edgeSelectedOutline = _b.edgeSelectedOutline, hoverOutline = _b.hoverOutline;
+        var edgeOutline = [];
+        for (var i = 0; i < edgeList.length; i++) {
+            var edge = edgeList[i];
+            if ((edgeSelectedOutline && edge.isSelected) ||
+                (hoverOutline && edge.isHovered)) {
+                if (edge.modelType === ModelType.LINE_EDGE) {
+                    edgeOutline.push(this.getLineOutline(edge));
+                }
+                else if (edge.modelType === ModelType.POLYLINE_EDGE) {
+                    edgeOutline.push(this.getPolylineOutline(edge));
+                }
+                else if (edge.modelType === ModelType.BEZIER_EDGE) {
+                    edgeOutline.push(this.getBezierOutline(edge));
+                }
+            }
+        }
+        return edgeOutline;
+    };
+    // 直线outline
+    OutlineOverlay.prototype.getLineOutline = function (line) {
+        var startPoint = line.startPoint, endPoint = line.endPoint;
+        var x = (startPoint.x + endPoint.x) / 2;
+        var y = (startPoint.y + endPoint.y) / 2;
+        var width = Math.abs(startPoint.x - endPoint.x) + 10;
+        var height = Math.abs(startPoint.y - endPoint.y) + 10;
+        var style = line.getOutlineStyle();
+        return (_jsx(Rect, __assign({ className: "lf-outline-edge", x: x, y: y, width: width, height: height }, style)));
+    };
+    // 折线outline
+    OutlineOverlay.prototype.getPolylineOutline = function (polyline) {
+        var points = polyline.points;
+        var pointsList = points2PointsList(points);
+        var bbox = getBBoxOfPoints(pointsList, 8);
+        var x = bbox.x, y = bbox.y, width = bbox.width, height = bbox.height;
+        var style = polyline.getOutlineStyle();
+        return (_jsx(Rect, __assign({ className: "lf-outline", x: x, y: y, width: width, height: height }, style)));
+    };
+    // 曲线outline
+    OutlineOverlay.prototype.getBezierOutline = function (bezier) {
+        var path = bezier.path;
+        var pointsList = getBezierPoints(path);
+        var bbox = getBBoxOfPoints(pointsList, 8);
+        var x = bbox.x, y = bbox.y, width = bbox.width, height = bbox.height;
+        var style = bezier.getOutlineStyle();
+        return (_jsx(Rect, __assign({ className: "lf-outline", x: x, y: y, width: width, height: height }, style)));
+    };
+    OutlineOverlay.prototype.render = function () {
+        return (_jsxs("g", { className: "lf-outline", children: [this.getNodesOutline(), this.getEdgeOutline()] }));
+    };
+    OutlineOverlay = __decorate([
+        observer
+    ], OutlineOverlay);
+    return OutlineOverlay;
+}(Component));
+export { OutlineOverlay };
+export default OutlineOverlay;
+//# sourceMappingURL=OutlineOverlay.js.map

package/es/view/overlay/OutlineOverlay.js.map

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

package/es/view/overlay/SnaplineOverlay.d.ts

@@ -0,0 +1,10 @@
+import { Component } from 'preact/compat';
+import SnaplineModel from '../../model/SnaplineModel';
+import OutlineOverlay from './OutlineOverlay';
+type IProps = {
+    snaplineModel?: SnaplineModel;
+};
+export declare class SnaplineOverlay extends Component<IProps> {
+    render(): import("preact/compat").JSX.Element;
+}
+export default OutlineOverlay;