@logicflow/core 1.2.27 → 2.0.0-beta.0

package/lib/view/overlay/BezierAdjustOverlay.js

@@ -0,0 +1,145 @@
+"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;
+};
+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.BezierAdjustOverlay = exports.BezierAdjustAnchor = void 0;
+var jsx_runtime_1 = require("preact/jsx-runtime");
+var compat_1 = require("preact/compat");
+var shape_1 = require("../shape");
+var __1 = require("../..");
+var constant_1 = require("../../constant");
+var util_1 = require("../../util");
+// bezier曲线的可调整锚点
+var BezierAdjustAnchor = /** @class */ (function (_super) {
+    __extends(BezierAdjustAnchor, _super);
+    function BezierAdjustAnchor() {
+        var _this = _super.call(this) || this;
+        _this.onDragging = function (_a) {
+            var event = _a.event;
+            var _b = _this.props, graphModel = _b.graphModel, bezierModel = _b.bezierModel, type = _b.type;
+            var _c = graphModel.getPointByClient({
+                x: event.clientX,
+                y: event.clientY,
+            }).canvasOverlayPosition, x = _c.x, y = _c.y;
+            bezierModel.updateAdjustAnchor({
+                x: x,
+                y: y,
+            }, type);
+            graphModel.eventCenter.emit(constant_1.EventType.EDGE_ADJUST, {
+                data: bezierModel.getData(),
+            });
+        };
+        _this.onDragEnd = function () {
+            var bezierModel = _this.props.bezierModel;
+            bezierModel.isDragging = false;
+        };
+        _this.dragHandler = new util_1.StepDrag({
+            onDragging: _this.onDragging,
+            onDragEnd: _this.onDragEnd,
+        });
+        return _this;
+    }
+    BezierAdjustAnchor.prototype.render = function () {
+        var _this = this;
+        var position = this.props.position;
+        var x = position.x, y = position.y;
+        var bezierModel = this.props.bezierModel;
+        var adjustAnchor = bezierModel.getEdgeStyle().adjustAnchor;
+        return ((0, jsx_runtime_1.jsx)(shape_1.Circle, __assign({ className: "lf-bezier-adjust-anchor", x: x, y: y }, adjustAnchor, { onMouseDown: function (ev) {
+                // if (edgeAddable !== false) {
+                _this.dragHandler.handleMouseDown(ev);
+                // }
+            } })));
+    };
+    return BezierAdjustAnchor;
+}(compat_1.Component));
+exports.BezierAdjustAnchor = BezierAdjustAnchor;
+var BezierAdjustOverlay = /** @class */ (function (_super) {
+    __extends(BezierAdjustOverlay, _super);
+    function BezierAdjustOverlay() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    BezierAdjustOverlay.prototype.getBezierAdjust = function (bezier, graphModel) {
+        var path = bezier.path, id = bezier.id;
+        var pointsList = (0, util_1.getBezierPoints)(path);
+        var _a = __read(pointsList, 4), start = _a[0], sNext = _a[1], ePre = _a[2], end = _a[3];
+        var adjustLine = bezier.getEdgeStyle().adjustLine;
+        var result = []; // TODO: 类型定义
+        result.push((0, jsx_runtime_1.jsx)(shape_1.Line, __assign({ x1: start.x, y1: start.y, x2: sNext.x, y2: sNext.y }, adjustLine)));
+        result.push((0, jsx_runtime_1.jsx)(BezierAdjustAnchor, { position: sNext, bezierModel: bezier, graphModel: graphModel, type: "sNext" }, "".concat(id, "_ePre")));
+        result.push((0, jsx_runtime_1.jsx)(shape_1.Line, __assign({ x1: end.x, y1: end.y, x2: ePre.x, y2: ePre.y }, adjustLine)));
+        result.push((0, jsx_runtime_1.jsx)(BezierAdjustAnchor, { position: ePre, bezierModel: bezier, graphModel: graphModel, type: "ePre" }, "".concat(id, "_sNext")));
+        return result;
+    };
+    // 获取选中bezier曲线，调整操作线和锚点
+    BezierAdjustOverlay.prototype.selectedBezierEdge = function () {
+        var graphModel = this.props.graphModel;
+        var edgeList = graphModel.edges;
+        var edgeAdjust = []; // TODO：类型定义
+        for (var i = 0; i < edgeList.length; i++) {
+            var edge = edgeList[i];
+            if (edge.isSelected &&
+                edge.modelType === constant_1.ModelType.BEZIER_EDGE &&
+                edge.draggable) {
+                edgeAdjust.push(this.getBezierAdjust(edge, graphModel));
+            }
+        }
+        return edgeAdjust;
+    };
+    BezierAdjustOverlay.prototype.render = function () {
+        return (0, jsx_runtime_1.jsx)("g", { className: "lf-bezier-adjust", children: this.selectedBezierEdge() });
+    };
+    BezierAdjustOverlay = __decorate([
+        __1.observer
+    ], BezierAdjustOverlay);
+    return BezierAdjustOverlay;
+}(compat_1.Component));
+exports.BezierAdjustOverlay = BezierAdjustOverlay;
+exports.default = BezierAdjustOverlay;
+//# sourceMappingURL=BezierAdjustOverlay.js.map

package/lib/view/overlay/BezierAdjustOverlay.js.map

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

package/lib/view/overlay/CanvasOverlay.d.ts

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

package/lib/view/overlay/CanvasOverlay.js

@@ -0,0 +1,175 @@
+"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 });
+exports.CanvasOverlay = void 0;
+var jsx_runtime_1 = require("preact/jsx-runtime");
+var compat_1 = require("preact/compat");
+var __1 = require("../..");
+var constant_1 = require("../../constant");
+var util_1 = require("../../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(constant_1.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(constant_1.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(constant_1.EventType.BLANK_MOUSEDOWN, { e: ev });
+                }
+                // 为了处理画布移动的时候，编辑和菜单仍然存在的问题。
+                _this.clickHandler(ev);
+            }
+        };
+        var _a = props.graphModel, gridSize = _a.gridSize, eventCenter = _a.eventCenter;
+        _this.stepDrag = new util_1.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 ((0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)("g", { transform: transform, children: children }) })));
+    };
+    CanvasOverlay = __decorate([
+        __1.observer
+    ], CanvasOverlay);
+    return CanvasOverlay;
+}(compat_1.Component));
+exports.CanvasOverlay = CanvasOverlay;
+exports.default = CanvasOverlay;
+//# sourceMappingURL=CanvasOverlay.js.map

package/lib/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/lib/view/overlay/Grid.d.ts

@@ -0,0 +1,30 @@
+import { Component } from 'preact/compat';
+import { GraphModel } from '../../model';
+export type GridOptions = {
+    /**
+     * 网格格子间距
+     */
+    size?: number;
+    /**
+     * 网格是否可见
+     */
+    visible?: boolean;
+    graphModel: GraphModel;
+    /**
+     * 网格类型
+     * 'dot' || 'mesh'
+     */
+    type?: string;
+    config?: {
+        color: string;
+        thickness?: number;
+    };
+};
+type IProps = GridOptions;
+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 default Grid;

package/lib/view/overlay/Grid.js

@@ -0,0 +1,121 @@
+"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 __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));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Grid = void 0;
+var jsx_runtime_1 = require("preact/jsx-runtime");
+var compat_1 = require("preact/compat");
+var __1 = require("../..");
+var util_1 = require("../../util");
+var constant_1 = require("../../constant");
+var Grid = /** @class */ (function (_super) {
+    __extends(Grid, _super);
+    function Grid() {
+        var _this = _super.apply(this, __spreadArray([], __read(arguments), false)) || this;
+        _this.id = (0, util_1.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 length = Math.min(Math.max(1.5, thickness), size / 2); // 2 < length < size /2
+        var opacity = 1;
+        if (!visible) {
+            opacity = 0;
+        }
+        /* eslint-disable-next-line */
+        return ((0, jsx_runtime_1.jsx)("rect", { width: length, height: length, rx: length / 2, ry: length / 2, fill: color, opacity: opacity }));
+    };
+    // 网格类型为交叉线
+    // 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); // 1 < strokeWidth < size /2
+        var d = "M ".concat(size, " 0 H0 M0 0 V0 ").concat(size);
+        var opacity = 1;
+        if (!visible) {
+            opacity = 0;
+        }
+        return ((0, jsx_runtime_1.jsx)("path", { d: d, stroke: color, strokeWidth: strokeWidth, opacity: opacity }));
+    };
+    Grid.prototype.render = function () {
+        // TODO 生成网格️️️✔、网格支持 options（size）✔
+        var _a = this.props, type = _a.type, size = _a.size, 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 ((0, jsx_runtime_1.jsx)("div", { className: "lf-grid", children: (0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "100%", height: "100%", children: [(0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.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()] }) }), (0, jsx_runtime_1.jsx)("rect", { width: "100%", height: "100%", fill: "url(#".concat(this.id, ")") })] }) }));
+    };
+    Grid = __decorate([
+        __1.observer
+    ], Grid);
+    return Grid;
+}(compat_1.Component));
+exports.Grid = Grid;
+Grid.defaultProps = {
+    size: constant_1.DEFAULT_GRID_SIZE,
+    visible: true,
+    type: 'dot',
+    config: {
+        color: '#ababab',
+        thickness: 1,
+    },
+};
+exports.default = Grid;
+//# sourceMappingURL=Grid.js.map

package/lib/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/lib/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/lib/view/overlay/ModificationOverlay.js

@@ -0,0 +1,46 @@
+"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 __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 });
+exports.ModificationOverlay = void 0;
+var jsx_runtime_1 = require("preact/jsx-runtime");
+var compat_1 = require("preact/compat");
+var __1 = require("../..");
+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 ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "100%", height: "100%", className: "modification-overlay", children: (0, jsx_runtime_1.jsx)("g", { transform: transform, children: children }) }));
+    };
+    ModificationOverlay = __decorate([
+        __1.observer
+    ], ModificationOverlay);
+    return ModificationOverlay;
+}(compat_1.Component));
+exports.ModificationOverlay = ModificationOverlay;
+exports.default = ModificationOverlay;
+//# sourceMappingURL=ModificationOverlay.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ModificationOverlay.js","sourceRoot":"","sources":["../../../src/view/overlay/ModificationOverlay.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,wCAAyC;AACzC,2BAAgC;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,gCACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,KAAK,EACb,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,MAAM,EACb,SAAS,EAAC,sBAAsB,YAEhC,8BAAG,SAAS,EAAE,SAAS,YAAG,QAAQ,GAAK,GACnC,CACP,CAAA;IACH,CAAC;IAlBU,mBAAmB;QAD/B,YAAQ;OACI,mBAAmB,CAmB/B;IAAD,0BAAC;CAAA,AAnBD,CAAyC,kBAAS,GAmBjD;AAnBY,kDAAmB;AAqBhC,kBAAe,mBAAmB,CAAA"}

package/lib/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;