dcim-topology2d 1.0.1

package/core/src/core.js

@@ -0,0 +1,2281 @@
+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 {Store} from 'le5le-store';
+import { Common } from './common'
+import {HoverLayer} from './hoverLayer';
+import {ActiveLayer} from './activeLayer';
+import {KeyType, KeydownType} from './options';
+import {PenType, Node, Point, Line, TopologyData, Lock, AnchorMode, Rect} from './models';
+import {drawNodeFns, drawLineFns} from './middles/index';
+import { s8, pointInRect, formatPadding, previewType} from './utils';
+import axios from 'axios'
+
+var resizeCursors = ['nw-resize', 'ne-resize', 'se-resize', 'sw-resize'];
+var dockOffset = 10;
+var Topology = (function (_super) {
+    __extends(Topology, _super);
+    function Topology(parent, options) {
+        var _this = _super.call(this, parent, options) || this;
+        _this.hoverLayer = new HoverLayer(this.options, _this.id);
+        _this.activeLayer = new ActiveLayer(this.options, _this.id);
+        _this.offscreen.getRoutineLayer();
+        _this.activeLayer.topology = this;
+        _this.gridElem = document.createElement('div');
+        _this.caches = {
+            index: 0,
+            list: [],
+        };
+        _this.needCache = false;
+        _this.addingArbitraryGraph = false;
+        _this.arbitrarygGraphData = {
+            points: [],
+            circles: [],
+            indexCircle: 0, //当前点击的圆圈
+            oZindex: -1, //是否达到起点
+            isDragging: false, //是否在抓取
+            close: false, //闭合
+        };
+        _this.onMouseMove = function (e) {
+            if (Store.get('addingArbitraryGraph')) {
+                return
+            }
+            if (_this.scheduledAnimationFrame || _this.data.locked === Lock.NoEvent) {
+                return;
+            }
+            // https://caniuse.com/#feat=mdn-api_mouseevent_buttons
+            if (_this.mouseDown && !_this.mouseDown.restore && e.buttons !== 1) {
+                // 防止异常情况导致mouseup事件没有触发
+                _this.onmouseup(e);
+                return;
+            }
+            if (_this.mouseDown) {
+                var b = false;
+                switch (_this.options.translateKey) {
+                    case KeyType.None:
+                        b = true;
+                        break;
+                    case KeyType.Ctrl:
+                        if (e.ctrlKey) {
+                            b = true;
+                        }
+                        break;
+                    case KeyType.Shift:
+                        if (e.shiftKey) {
+                            b = true;
+                        }
+                        break;
+                    case KeyType.Alt:
+                        if (e.altKey) {
+                            b = true;
+                        }
+                        break;
+                    default:
+                        if (e.ctrlKey || e.altKey) {
+                            b = true;
+                        }
+                }
+                if (b) {
+                    var canvasPos_1 = _this.divLayer.canvas.getBoundingClientRect();
+                    const x = e.x - _this.mouseDown.x - canvasPos_1.x;
+                    const y = e.y - _this.mouseDown.y - canvasPos_1.y;
+                    _this.translate(x, y, true);
+                    _this.render();
+                    _this.cache();
+                    _this.dispatch('translate', {x, y});
+                    return false;
+                }
+            }
+            if (_this.data.locked && _this.mouseDown) {
+                return;
+            }
+            _this.scheduledAnimationFrame = true;
+            var canvasPos = _this.divLayer.canvas.getBoundingClientRect();
+            var pos = new Point(e.x - canvasPos.x, e.y - canvasPos.y);
+            if (_this.raf)
+                cancelAnimationFrame(_this.raf);
+            _this.raf = requestAnimationFrame(function () {
+                _this.raf = null;
+                if (!_this.mouseDown) {
+                    _this.getMoveIn(pos);
+                    // Render hover anchors.
+                    if (_this.moveIn.hoverNode !== _this.lastHoverNode) {
+                        if (_this.lastHoverNode) {
+                            // Send a move event.
+                            _this.dispatch('moveOutNode', _this.lastHoverNode);
+                            _this.hideTip();
+                            // Clear hover anchors.
+                            _this.hoverLayer.node = null;
+                        }
+                        if (_this.moveIn.hoverNode) {
+                            _this.hoverLayer.node = _this.moveIn.hoverNode;
+                            // Send a move event.
+                            _this.dispatch('moveInNode', _this.moveIn.hoverNode);
+                            _this.showTip(_this.moveIn.hoverNode, pos);
+                            // _this.showTipText(_this.moveIn.hoverNode, pos);
+                        }
+                    }
+                    if (_this.moveIn.hoverLine !== _this.lastHoverLine) {
+                        if (_this.lastHoverLine) {
+                            _this.dispatch('moveOutLine', _this.lastHoverLine);
+                            _this.hideTip();
+                        }
+                        if (_this.moveIn.hoverLine) {
+                            _this.dispatch('moveInLine', _this.moveIn.hoverLine);
+                            _this.showTip(_this.moveIn.hoverLine, pos);
+                        }
+                    }
+                    if (_this.moveIn.type === _this.moveInType.LineControlPoint) {
+                        _this.hoverLayer.hoverLineCP = _this.moveIn.lineControlPoint;
+                    } else if (_this.hoverLayer.hoverLineCP) {
+                        _this.hoverLayer.hoverLineCP = null;
+                    }
+                    if (_this.moveIn.hoverNode !== _this.lastHoverNode ||
+                            _this.moveIn.type === _this.moveInType.HoverAnchors ||
+                            _this.hoverLayer.lasthoverLineCP !== _this.hoverLayer.hoverLineCP) {
+                        _this.hoverLayer.lasthoverLineCP = _this.hoverLayer.hoverLineCP;
+                        _this.render();
+                    }
+                    _this.scheduledAnimationFrame = false;
+                    return;
+                }
+                // Move out parent element.
+                var moveOutX = pos.x + 50 > _this.parentElem.clientWidth + _this.parentElem.scrollLeft;
+                var moveOutY = pos.y + 50 > _this.parentElem.clientHeight + _this.parentElem.scrollTop;
+                if (!_this.options.disableMoveOutParent && (moveOutX || moveOutY)) {
+                    _this.dispatch('moveOutParent', pos);
+                    if (_this.options.autoExpandDistance > 0) {
+                        var resize = false;
+                        if (pos.x + 50 > _this.divLayer.canvas.clientWidth) {
+                            _this.canvas.width += _this.options.autoExpandDistance;
+                            resize = true;
+                        }
+                        if (pos.y + 50 > _this.divLayer.canvas.clientHeight) {
+                            _this.canvas.height += _this.options.autoExpandDistance;
+                            resize = true;
+                        }
+                        if (resize) {
+                            _this.resize({
+                                width: _this.canvas.width,
+                                height: _this.canvas.height,
+                            });
+                        }
+                        _this.scroll(moveOutX ? _this.options.autoExpandDistance / 2 : 0, moveOutY ? _this.options.autoExpandDistance / 2 : 0);
+                    }
+                }
+                var moveLeft = pos.x - 100 < _this.parentElem.scrollLeft;
+                var moveTop = pos.y - 100 < _this.parentElem.scrollTop;
+                if ((moveLeft || moveTop)) {
+                    _this.scroll(moveLeft ? -100 : 0, moveTop ? -100 : 0);
+                }
+                // console.log('_this.moveIn.type----', _this.moveIn.type)
+                switch (_this.moveIn.type) {
+                    case _this.moveInType.None:
+                        _this.hoverLayer.dragRect = new Rect(_this.mouseDown.x, _this.mouseDown.y, pos.x - _this.mouseDown.x, pos.y - _this.mouseDown.y);
+                        break;
+                    case _this.moveInType.Nodes:
+                        if (_this.activeLayer.locked()) {
+                            break;
+                        }
+                        var x = pos.x - _this.mouseDown.x;
+                        var y = pos.y - _this.mouseDown.y;
+                        if (x || y) {
+                            var offset = _this.getDockPos(x, y, e.ctrlKey || e.shiftKey || e.altKey);
+                            _this.activeLayer.move(offset.x ? offset.x : x, offset.y ? offset.y : y);
+                            _this.needCache = true;
+                        }
+                        break;
+                    case _this.moveInType.ResizeCP:
+                        var p1 = new Point(_this.mouseDown.x, _this.mouseDown.y);
+                        var p2 = new Point(pos.x, pos.y);
+                        var offsetX = p2.x - p1.x;
+                        var offsetY = p2.y - p1.y;
+                        switch (_this.moveIn.activeAnchorIndex) {
+                            case 0:
+                                offsetX = -offsetX;
+                                offsetY = -offsetY;
+                                break;
+                            case 1:
+                                offsetY = -offsetY;
+                                break;
+                            case 3:
+                                offsetX = -offsetX;
+                                break;
+                        }
+                        if (_this.activeLayer.pens.length === 1 && _this.activeLayer.pens[0].name === 'arbitraryGraph') {
+
+                            if (_this.activeLayer.pens.length === 1 && _this.activeLayer.pens[0].rotate % 360) {
+
+                                if (offsetX <= 0 && (_this.activeLayer.pens[0].rect.width) <= 20) {
+
+                                    // console.log('已无法缩小');
+                                } else if (offsetY <= 0 && (_this.activeLayer.pens[0].rect.height) <= 20) {
+
+                                    // console.log('已无法缩小');
+
+                                } else {
+                                    _this.activeLayer.resize(_this.moveIn.activeAnchorIndex, _this.mouseDown, pos);
+                                    _this.dispatch('resizePens', _this.activeLayer.pens);
+                                    _this.needCache = true;
+                                }
+                            } else {
+                                if (offsetX <= 0 && (_this.activeLayer.nodeRects[0].width + offsetX) <= 10) {
+
+                                    // console.log('宽度已无法缩小');
+
+                                } else if (offsetY <= 0 && (_this.activeLayer.nodeRects[0].height + offsetY) <= 10) {
+
+                                    // console.log('高度已无法缩小');
+                                } else {
+                                    _this.activeLayer.resize(_this.moveIn.activeAnchorIndex, _this.mouseDown, pos);
+                                    _this.dispatch('resizePens', _this.activeLayer.pens);
+                                    _this.needCache = true;
+                                }
+                            }
+                        } else {
+                            _this.activeLayer.resize(_this.moveIn.activeAnchorIndex, _this.mouseDown, pos);
+                            _this.dispatch('resizePens', _this.activeLayer.pens);
+                            _this.needCache = true;
+                        }
+                        break;
+                    case _this.moveInType.LineTo:
+                    case _this.moveInType.HoverAnchors:
+                        if (_this.moveIn.hoverNode && _this.moveIn.hoverNode.name == 'arbitraryGraph') {
+
+                            _this.activeLayer.pens[0].rect.circles[_this.moveIn.hoverAnchorIndex].x = pos.x;
+
+                            _this.activeLayer.pens[0].rect.circles[_this.moveIn.hoverAnchorIndex].y = pos.y;
+
+                            _this.activeLayer.pens[0].anchors[_this.moveIn.hoverAnchorIndex].x = pos.x;
+
+                            _this.activeLayer.pens[0].anchors[_this.moveIn.hoverAnchorIndex].y = pos.y;
+
+                            let circles = _this.activeLayer.pens[0].rect.circles;
+                            let minX = Math.min.apply(Math, circles.map((item) => {
+                                return item.x
+                            }));
+                            let minY = Math.min.apply(Math, circles.map((item) => {
+                                return item.y
+                            }));
+                            let rectW = Math.max.apply(Math, circles.map((item) => {
+                                return item.x
+                            })) - minX;
+                            let rectH = Math.max.apply(Math, circles.map((item) => {
+                                return item.y
+                            })) - minY;
+
+                            _this.activeLayer.pens[0].rect.x = minX;
+                            _this.activeLayer.pens[0].rect.y = minY;
+                            _this.activeLayer.pens[0].rect.ex = _this.activeLayer.pens[0].rect.x + rectW;
+                            _this.activeLayer.pens[0].rect.ey = _this.activeLayer.pens[0].rect.y + rectH;
+                            _this.activeLayer.pens[0].rect.width = rectW;
+                            _this.activeLayer.pens[0].rect.height = rectH;
+
+                            _this.activeLayer.pens[0].init();
+
+                        } else {
+
+                            var arrow = _this.data.toArrowType;
+                            if (_this.moveIn.hoverLine) {
+                                arrow = _this.moveIn.hoverLine.toArrow;
+                            }
+                            if (_this.hoverLayer.line) {
+                                _this.activeLayer.pens = [_this.hoverLayer.line];
+                            }
+                            _this.hoverLayer.lineTo(_this.getLineDock(pos), arrow);
+                        }
+                        _this.needCache = true;
+                        break;
+                    case _this.moveInType.LineFrom:
+                        _this.hoverLayer.lineFrom(_this.getLineDock(pos));
+                        _this.needCache = true;
+                        break;
+                    case _this.moveInType.LineMove:
+                        _this.hoverLayer.lineMove(pos, _this.mouseDown);
+                        _this.needCache = true;
+                        break;
+                    case _this.moveInType.Line: {
+                        var x_1 = pos.x - _this.mouseDown.x;
+                        var y_1 = pos.y - _this.mouseDown.y;
+                        if (x_1 || y_1) {
+                            _this.activeLayer.move(x_1, y_1);
+                            _this.needCache = true;
+                        }
+                    }
+                        break;
+                    case _this.moveInType.LineControlPoint:
+                        _this.moveIn.hoverLine.controlPoints[_this.moveIn.lineControlPoint.id].x = pos.x;
+                        _this.moveIn.hoverLine.controlPoints[_this.moveIn.lineControlPoint.id].y = pos.y;
+                        _this.moveIn.hoverLine.textRect = null;
+                        if (drawLineFns[_this.moveIn.hoverLine.name] &&
+                                drawLineFns[_this.moveIn.hoverLine.name].dockControlPointFn) {
+                            drawLineFns[_this.moveIn.hoverLine.name].dockControlPointFn(_this.moveIn.hoverLine.controlPoints[_this.moveIn.lineControlPoint.id], _this.moveIn.hoverLine);
+                        }
+                        _this.needCache = true;
+                        Store.set(_this.generateStoreKey('LT:updateLines'), [
+                            _this.moveIn.hoverLine,
+                        ]);
+                        break;
+                    case _this.moveInType.Rotate:
+                        if (_this.activeLayer.pens.length) {
+                            _this.activeLayer.offsetRotate(_this.getAngle(pos));
+                            _this.activeLayer.updateLines();
+                        }
+                        _this.needCache = true;
+                        break;
+                }
+                _this.render();
+                _this.scheduledAnimationFrame = false;
+            });
+        };
+        _this.onmousedown = function (e) {
+            if (e.button !== 0)
+                return;
+            var canvasPos = _this.divLayer.canvas.getBoundingClientRect();
+            _this.mouseDown = {x: e.x - canvasPos.x, y: e.y - canvasPos.y};
+            if (e.altKey) {
+                _this.divLayer.canvas.style.cursor = 'move';
+            }
+            if (_this.inputObj) {
+                _this.setNodeText();
+            }
+            if (Store.get('addingArbitraryGraph')) {
+                _this.addingArbitraryGraph = true;
+                _this.handleAddArbitrary();
+                return
+            } else {
+                switch (_this.moveIn.type) {
+                        // Click the space.
+                    case _this.moveInType.None:
+                        _this.activeLayer.clear();
+                        _this.hoverLayer.clear();
+                        _this.pageListAndPageInputHide();
+                        _this.dispatch('space', _this.mouseDown);
+                        break;
+                        // Click a line.
+                    case _this.moveInType.Line:
+                    case _this.moveInType.LineControlPoint:
+                        if (e.ctrlKey || e.shiftKey) {
+                            _this.activeLayer.add(_this.moveIn.hoverLine);
+                            _this.dispatch('multi', _this.activeLayer.pens);
+                        } else {
+                            _this.activeLayer.pens = [_this.moveIn.hoverLine];
+                            _this.dispatch('line', _this.moveIn.hoverLine);
+                        }
+                        break;
+                    case _this.moveInType.LineMove:
+                        _this.hoverLayer.initLine = new Line(_this.moveIn.hoverLine);
+                        if (_this.data.locked || _this.moveIn.hoverLine.locked) {
+                            _this.moveIn.hoverLine.click();
+                        }
+                        // tslint:disable-next-line:no-switch-case-fall-through
+                    case _this.moveInType.LineFrom:
+                    case _this.moveInType.LineTo:
+                        _this.activeLayer.pens = [_this.moveIn.hoverLine];
+                        _this.dispatch('line', _this.moveIn.hoverLine);
+                        _this.hoverLayer.line = _this.moveIn.hoverLine;
+                        break;
+                    case _this.moveInType.HoverAnchors:
+
+                        if (_this.moveIn.hoverNode && _this.moveIn.hoverNode.name == 'arbitraryGraph') {
+
+                            _this.activeLayer.pens = [_this.moveIn.hoverNode];
+
+                        } else {
+                            _this.hoverLayer.line = _this.addLine({
+                                name: _this.data.lineName,
+                                from: new Point(_this.moveIn.hoverNode.rotatedAnchors[_this.moveIn.hoverAnchorIndex].x, _this.moveIn.hoverNode.rotatedAnchors[_this.moveIn.hoverAnchorIndex].y, _this.moveIn.hoverNode.rotatedAnchors[_this.moveIn.hoverAnchorIndex].direction, _this.moveIn.hoverAnchorIndex, _this.moveIn.hoverNode.id),
+                                fromArrow: _this.data.fromArrowType,
+                                to: new Point(_this.moveIn.hoverNode.rotatedAnchors[_this.moveIn.hoverAnchorIndex].x, _this.moveIn.hoverNode.rotatedAnchors[_this.moveIn.hoverAnchorIndex].y),
+                                toArrow: _this.data.toArrowType,
+                                strokeStyle: _this.options.color,
+                            });
+                            _this.dispatch('anchor', {
+                                anchor: _this.moveIn.hoverNode.rotatedAnchors[_this.moveIn.hoverAnchorIndex],
+                                anchorIndex: _this.moveIn.hoverAnchorIndex,
+                                node: _this.moveIn.hoverNode,
+                                line: _this.hoverLayer.line,
+                            });
+                        }
+                        // tslint:disable-next-line:no-switch-case-fall-through
+                    case _this.moveInType.Nodes:
+                        if (!_this.moveIn.activeNode) {
+                            break;
+                        }
+                        if (e.ctrlKey || e.shiftKey) {
+                            if (_this.moveIn.hoverNode &&
+                                    _this.activeLayer.hasInAll(_this.moveIn.hoverNode)) {
+                                _this.activeLayer.setPens([_this.moveIn.hoverNode]);
+                                _this.dispatch('node', _this.moveIn.hoverNode);
+                            } else if (!_this.activeLayer.has(_this.moveIn.activeNode)) {
+                                // 非绘画页面下禁止不包含点击、双击事件的节点选中事件
+                                if (!_this.checkNodeOfClickType(_this.moveIn.activeNode)) {
+                                    _this.activeLayer.add(_this.moveIn.activeNode);
+                                    if (_this.activeLayer.pens.length > 1) {
+                                        _this.dispatch('multi', _this.activeLayer.pens);
+                                    } else {
+                                        _this.dispatch('node', _this.moveIn.activeNode);
+                                    }
+                                }
+                            }
+                        } else if (e.altKey) {
+                            if (_this.moveIn.hoverNode) {
+                                _this.activeLayer.setPens([_this.moveIn.hoverNode]);
+                                _this.dispatch('node', _this.moveIn.hoverNode);
+                            } else if (_this.moveIn.hoverLine) {
+                                _this.activeLayer.setPens([_this.moveIn.hoverLine]);
+                                _this.dispatch('line', _this.moveIn.hoverLine);
+                            }
+                        } else if (_this.activeLayer.pens.length < 2) {
+                            // 非绘画页面下禁止不包含点击、双击事件的节点选中事件
+                            const activeNode = _this.moveIn.activeNode;
+                            if (!_this.checkNodeOfClickType(activeNode)) {
+                                _this.activeLayer.setPens([activeNode]);
+                                if (activeNode && activeNode.name == 'arbitraryGraph') {
+                                    _this.dispatch('node', activeNode);
+                                } else if (activeNode && activeNode.name == 'tablePagination') {
+                                    if (_this.options.type === 'topology') return _this.dispatch('node', activeNode);
+                                    const pnlKeys = Object.keys(activeNode.paginationData.pageNumberLocals);
+                                    const pageNumArea = pnlKeys.find((pna) => {
+                                        return e.offsetX - 32 < pna && e.offsetX - parseInt(pna) > 0
+                                    });
+                                    //console.log('pageNumArea=============', pageNumArea)
+                                    if (pageNumArea) {
+                                        _this.paginationPrevNextPage(activeNode, activeNode.paginationData.pageNumberLocals[pageNumArea]);
+                                    } else {
+                                        //console.log('targetPageLocal.hide----------------', activeNode.paginationData.targetPageLocal.hide)
+                                        if (activeNode.paginationData.pageListState) _this.spreadPageListHandle(activeNode, e);
+                                        if (activeNode.paginationData.targetPageLocal.hide) _this.targetPageInputHandle(activeNode, e);
+                                    }
+                                } else {
+                                    _this.dispatch('node', activeNode);
+                                    if(!window.location.pathname.includes('workspace')) {
+                                        const staticTypeNode = activeNode.events.find((ev) => {
+                                            return parseInt(ev.action) === 8
+                                        }); // 若绑定的是echarts统计图事件
+                                        if (staticTypeNode) {
+                                            _this.switchStaticsCheckType(activeNode, staticTypeNode);
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                        if (_this.data.locked || _this.moveIn.activeNode.locked) {
+                            _this.moveIn.activeNode.click();
+                        }
+                        break;
+                }
+            }
+            // Save node rects to move.
+            if (_this.activeLayer.pens.length) {
+                _this.activeLayer.saveNodeRects();
+            }
+            _this.render();
+        };
+        _this.onmouseup = function (e) {
+            if (Store.get('addingArbitraryGraph')) {
+                _this.createArbitraryGraph();
+                return
+            }
+            if (!_this.mouseDown)
+                return;
+            _this.clipboard = null;
+            _this.mouseDown = null;
+            _this.lastTranlated.x = 0;
+            _this.lastTranlated.y = 0;
+            _this.hoverLayer.dockAnchor = null;
+            _this.hoverLayer.dockLineX = 0;
+            _this.hoverLayer.dockLineY = 0;
+            _this.divLayer.canvas.style.cursor = 'default';
+            if (_this.hoverLayer.dragRect) {
+                _this.getPensInRect(_this.hoverLayer.dragRect);
+                if (_this.activeLayer.pens && _this.activeLayer.pens.length) {
+                    _this.dispatch('multi', _this.activeLayer.pens);
+                }
+            } else {
+                switch (_this.moveIn.type) {
+                        // Add the line.
+                    case _this.moveInType.HoverAnchors:
+
+                        // New active.
+                        if (_this.hoverLayer.line) {
+                            var willAddLine = void 0;
+                            if (_this.hoverLayer.line.to.id) {
+                                if (!_this.options.disableRepeatLine) {
+                                    willAddLine = true;
+                                } else {
+                                    var lines = _this.data.pens.filter(function (pen) {
+                                        return pen.type === PenType.Line &&
+                                                pen.from.isSameAs(_this.hoverLayer.line.from) &&
+                                                pen.to.isSameAs(_this.hoverLayer.line.to);
+                                    });
+                                    willAddLine = lines.length <= 1;
+                                }
+                            } else {
+                                willAddLine = !_this.options.disableEmptyLine;
+                            }
+                            if (willAddLine) {
+                                _this.activeLayer.pens = [_this.hoverLayer.line];
+                                _this.dispatch('addLine', _this.hoverLayer.line);
+                            } else {
+                                _this.data.pens.pop();
+                                _this.activeLayer.clear();
+                            }
+                        }
+                        _this.offscreen.render();
+                        _this.hoverLayer.line = null;
+                        break;
+                    case _this.moveInType.Rotate:
+                        _this.activeLayer.updateRotate();
+                        break;
+                    case _this.moveInType.LineControlPoint:
+                        Store.set(_this.generateStoreKey('pts-') + _this.moveIn.hoverLine.id, null);
+                        break;
+                    case _this.moveInType.LineFrom:
+                    case _this.moveInType.LineTo:
+                        if (_this.hoverLayer.line.disableEmptyLine &&
+                                (!_this.hoverLayer.line.from.id || !_this.hoverLayer.line.to.id)) {
+                            _this.needCache = true;
+                            _this.activeLayer.clear();
+                            _this.data.pens.splice(_this.findIndex(_this.hoverLayer.line), 1);
+                        }
+                        break;
+                }
+            }
+            _this.hoverLayer.dragRect = null;
+            _this.render();
+            if (_this.needCache) {
+                _this.cache();
+            }
+            _this.needCache = false;
+        };
+        _this.onkeydown = function (key) {
+            if (_this.data.locked ||
+                    key.target.tagName === 'INPUT' ||
+                    key.target.tagName === 'TEXTAREA') {
+                return;
+            }
+            var done = false;
+            var moveX = 0;
+            var moveY = 0;
+            switch (key.key) {
+                case 'a':
+                case 'A':
+                    _this.activeLayer.setPens(_this.data.pens);
+                    _this.dispatch('multi', _this.activeLayer.pens);
+                    done = true;
+                    break;
+                case 'Delete':
+                case 'Backspace':
+                    _this.delete();
+                    break;
+                case 'ArrowLeft':
+                    moveX = -5;
+                    if (key.ctrlKey) {
+                        moveX = -1;
+                    }
+                    done = true;
+                    break;
+                case 'ArrowUp':
+                    moveY = -5;
+                    if (key.ctrlKey) {
+                        moveY = -1;
+                    }
+                    done = true;
+                    break;
+                case 'ArrowRight':
+                    moveX = 5;
+                    if (key.ctrlKey) {
+                        moveX = 1;
+                    }
+                    done = true;
+                    break;
+                case 'ArrowDown':
+                    moveY = 5;
+                    if (key.ctrlKey) {
+                        moveY = 1;
+                    }
+                    done = true;
+                    break;
+                case 'x':
+                case 'X':
+                    if (key.ctrlKey) {
+                        _this.cut();
+                    }
+                    break;
+                case 'c':
+                case 'C':
+                    const copyState = _this.copy();
+                    if(!copyState) _this.dispatch('copyNone');
+                    break;
+                case 'v':
+                case 'V':
+                    _this.paste();
+                    break;
+                case 'y':
+                case 'Y':
+                    if (key.ctrlKey) {
+                        _this.redo();
+                    }
+                    break;
+                case 'z':
+                case 'Z':
+                    if (key.shiftKey) {
+                        _this.redo();
+                    } else {
+                        _this.undo();
+                    }
+                    break;
+                case 'g':
+                case 'G':
+                    if (key.ctrlKey && _this.activeLayer.pens.length > 1) {
+                        _this.combine();
+                    }
+                    break;
+                case 'b':
+                case 'B':
+                    if (key.ctrlKey && _this.activeLayer.pens.length == 1 && _this.activeLayer.pens[0].name === 'combine') {
+                        _this.uncombine();
+                    }
+                    break;
+
+            }
+            if (!done) {
+                return;
+            }
+            key.preventDefault();
+            if (moveX || moveY) {
+                _this.activeLayer.saveNodeRects();
+                _this.activeLayer.move(moveX, moveY);
+                _this.overflow();
+                _this.animateLayer.animate();
+            }
+            _this.render();
+            _this.cache();
+        };
+        _this.createGrid();
+        _this.divLayer.canvas.ondragover = function (event) {
+            return event.preventDefault();
+        };
+        _this.divLayer.canvas.ondrop = function (event) {
+            try {
+                var json = event.dataTransfer.getData('Topology') ||
+                        event.dataTransfer.getData('Text');
+                if (!json)
+                    return;
+                var obj = JSON.parse(json);
+                event.preventDefault();
+                if (obj.name && obj.name == 'arbitraryGraph') {
+                    Store.set('addingArbitraryGraph', true);
+                    _this.addingArbitraryGraph = true;
+                    _this.dispatch('addingArbitraryGraph', true);
+                    return
+                }
+                _this.addingArbitraryGraph = false;
+                Store.set('addingArbitraryGraph', false);
+                _this.arbitrarygGraphData = {
+                    points: [],
+                    circles: [],
+                    indexCircle: 0, //当前点击的圆圈
+                    oZindex: -1, //是否达到起点
+                    isDragging: false, //是否在抓取
+                    close: false, //闭合
+                };
+                if (obj.name == 'temp') {
+                    // 温湿度元件
+                    let activeTempNodes = []
+                    _this.dropNodes([obj.children[0]], event.offsetX - 23.5, event.offsetY)
+                    activeTempNodes.push(_this.activeLayer.pens[0])
+                    _this.dropNodes([obj.children[1]], event.offsetX + 11.5, event.offsetY - 8.5)
+                    activeTempNodes.push(_this.activeLayer.pens[0])
+                    _this.dropNodes([obj.children[2]], event.offsetX + 11.5, event.offsetY + 8.5)
+                    activeTempNodes.push(_this.activeLayer.pens[0])
+                    _this.activeLayer.pens = activeTempNodes
+                    _this.combine(activeTempNodes, null, 'temp');
+                } else {
+                    _this.dropNodes(Array.isArray(obj) ? obj : [obj], event.offsetX, event.offsetY);
+                }
+            } catch (_a) {
+            }
+        };
+        _this.subcribeAnimateMoved = Store.subscribe(this.generateStoreKey('LT:rectChanged'), function (e) {
+            _this.activeLayer.updateLines(_this.data.pens);
+        });
+        _this.subcribeMediaEnd = Store.subscribe(this.generateStoreKey('mediaEnd'), function (node) {
+            if (node.nextPlay) {
+                _this.animateLayer.readyPlay(node.nextPlay);
+                _this.animateLayer.animate();
+            }
+            _this.dispatch('mediaEnd', node);
+        });
+        _this.subcribeHidePen = Store.subscribe(this.generateStoreKey('LT:hidePen'), function (e) {
+            if (window.location.pathname.includes('workspace')) {
+                return
+            }
+            _this.hidePenByTag(_this.data.pens, e);
+            const obj = e ? JSON.parse(e) : {}
+            const visibleRange = obj.visibleRange
+            if (visibleRange == '1') {
+                _this.openCount++
+            }
+        });
+        _this.divLayer.canvas.onmousemove = this.onMouseMove;
+        _this.divLayer.canvas.onmousedown = this.onmousedown;
+        _this.divLayer.canvas.onmouseup = this.onmouseup;
+        _this.divLayer.canvas.onwheel = function (event) {
+            if (_this.options.disableScale) {
+                return;
+            }
+            switch (_this.options.scaleKey) {
+                case KeyType.None:
+                    break;
+                case KeyType.Ctrl:
+                    if (!event.ctrlKey) {
+                        return;
+                    }
+                    break;
+                case KeyType.Shift:
+                    if (!event.shiftKey) {
+                        return;
+                    }
+                    break;
+                case KeyType.Alt:
+                    if (!event.altKey) {
+                        return;
+                    }
+                    break;
+                default:
+                    if (!event.ctrlKey && !event.altKey) {
+                        return;
+                    }
+            }
+            event.preventDefault();
+            if (event.deltaY < 0) {
+                if (event.layerX && event.layerY) {
+                    _this.scale(1.1, {x: event.layerX, y: event.layerY});
+                    _this.canvas.scale(1.1, {x: event.layerX, y: event.layerY});
+                } else {
+                    _this.scale(1.1);
+                    _this.canvas.scale(1.1);
+                }
+            } else {
+                if (event.layerX && event.layerY) {
+                    _this.scale(0.9, {x: event.layerX, y: event.layerY});
+                   _this.canvas.scale(0.9, {x: event.layerX, y: event.layerY});
+                } else {
+                    _this.scale(0.9);
+                  _this.canvas.scale(0.9);
+                }
+            }
+            _this.divLayer.canvas.focus();
+            return false;
+        };
+        _this.cache();
+        switch (_this.options.keydown) {
+            case KeydownType.Document:
+                document.onkeydown = _this.onkeydown;
+                break;
+            case KeydownType.Canvas:
+                _this.divLayer.canvas.onkeydown = _this.onkeydown;
+                break;
+        }
+        this.winResize = function () {
+            var timer;
+            if (timer) {
+                clearTimeout(timer);
+            }
+            timer = setTimeout(function () {
+                _this.overflow();
+                _this.render();
+            }, 100);
+        };
+        window.addEventListener('resize', this.winResize);
+        return _this;
+    }
+    // Render or redraw
+    Topology.prototype.render = function (noFocus, type) {
+      try{
+        if (noFocus === void 0) {
+          noFocus = false;
+        }
+        if (noFocus) {
+          this.activeLayer.pens = [];
+          this.hoverLayer.node = null;
+          this.hoverLayer.line = null;
+        }
+        if (this.rendering) {
+          return this;
+        }
+        this.rendering = true;
+        this.offscreen.render();
+        this.canvas.render();
+        this.rendering = false;
+      }catch (e){
+        console.log('render-error-------------')
+      }
+    };
+    Topology.prototype.resize = function (size) {
+        this.canvasResize(size);
+        this.showGrid();
+        this.dispatch('resize', size);
+    };
+    Topology.prototype.dropNodes = function (jsonList, offsetX, offsetY) {
+        var _this = this;
+        var x, y;
+        if (jsonList.length) {
+            var rect = jsonList[0].rect;
+            x = rect.x;
+            y = rect.y;
+        }
+        var firstNode;
+        jsonList.forEach(function (json) {
+            if (!firstNode) {
+                json.rect.x = (offsetX - json.rect.width / 2) << 0;
+                json.rect.y = (offsetY - json.rect.height / 2) << 0;
+                firstNode = json;
+            } else {
+                //Layout relative to the first node
+                var rect = json.rect;
+                var dx = rect.x - x, dy = rect.y - y;
+                json.rect.x = firstNode.rect.x + dx;
+                json.rect.y = firstNode.rect.y + dy;
+            }
+            if (json.name === 'lineAlone') {
+                _this.addLine({
+                    name: _this.data.lineName,
+                    from: new Point(json.rect.x, json.rect.y),
+                    fromArrow: _this.data.fromArrowType,
+                    to: new Point(json.rect.x + json.rect.width, json.rect.y + json.rect.height),
+                    toArrow: _this.data.toArrowType,
+                    strokeStyle: _this.options.color,
+                }, true);
+            }
+
+            if (json.name == 'define') {
+
+                // console.log('创建自定义组件 ', json);
+
+                console.log('store 中的 自定义 ', Store.get('defineNode'));
+                if (_this.data.locked) return
+                // let defineNode = Store.get('defineNode');
+                // let nodesList = Store.get('defineNode').pens;
+                let defineNode = JSON.parse(localStorage.getItem("defineNode_"))
+                let nodesList = defineNode.pens;
+
+                let renderNodesList = [];
+
+                for (let i = 0, len = nodesList.length; i < len; i++) {
+
+                    nodesList[i].rect.x = offsetX - nodesList[i].rect.width / 2;
+
+                    nodesList[i].rect.y = offsetY - nodesList[i].rect.height / 2;
+
+                    let node = new Node(nodesList[i]);
+
+                    node.setTID(s8());
+                    node.id = s8();
+                    node.fileId = defineNode.fileId;
+
+                    // console.log('push之前的node', node);
+
+                    _this.data.pens.push(node);
+
+                    renderNodesList.push(node);
+                }
+                _this.activeLayer.setPens([renderNodesList[0]]);
+
+                _this.render(false);
+
+                _this.animate(true);
+
+                _this.cache();
+
+                _this.dispatch('addNode', renderNodesList[0]);
+
+            } else {
+                var node = new Node(json);
+                node.setTID(_this.id);
+                node.clearChildrenIds();
+                _this.addNode(node, true);
+                if (node.name === 'div') {
+                    _this.dispatch('LT:addDiv', node);
+                }
+                if (node.name === 'formTable') {
+                    _this.data.dataConstruct[node.id] = {
+                        id: node.id,
+                        name: 'table'
+                    }
+                }
+            }
+        });
+        this.divLayer.canvas.focus();
+    };
+    Topology.prototype.addNode = function (node, focus) {
+        if (focus === void 0) {
+            focus = false;
+        }
+        if (this.data.locked || !drawNodeFns[node.name]) {
+            return null;
+        }
+        // if it's not a Node
+        if (!node.init) {
+            node = new Node(node);
+        }
+        if (!node.strokeStyle && this.options.color) {
+            node.strokeStyle = this.options.color;
+        }
+        for (var key in node.font) {
+            if (!node.font[key]) {
+                node.font[key] = this.options.font[key];
+            }
+        }
+        if (this.data.scale !== 1) {
+            node.scale(this.data.scale);
+        }
+        this.data.pens.push(node);
+        this.setSwitchTabData(node, this.data.pens.length-1);
+        if (focus) {
+            this.activeLayer.setPens([node]);
+            this.render();
+            this.animate(true);
+            this.cache();
+            this.dispatch('addNode', node);
+        }
+        return node;
+    };
+    Topology.prototype.addLine = function (line, focus) {
+        if (focus === void 0) {
+            focus = false;
+        }
+        if (this.data.locked) {
+            return null;
+        }
+        if (!line.clone) {
+            line = new Line(line);
+            line.calcControlPoints(true);
+        }
+        this.data.pens.push(line);
+        if (focus) {
+            this.activeLayer.setPens([line]);
+            this.render();
+            this.animate(true);
+            this.cache();
+            this.dispatch('addLine', line);
+        }
+        return line;
+    };
+    // open - redraw by the data
+    Topology.prototype.open = function (topoJSon) {
+        this.conversionData(topoJSon);
+        Store.set(this.generateStoreKey('LT:scale'), this.data.scale);
+        this.dispatch('scale', this.data.scale);
+        this.parentElem.scrollLeft = 0;
+        this.parentElem.scrollTop = 0;
+        this.caches.list = [];
+        this.divLayer.clear();
+        this.cache();
+        this.overflow();
+        this.render(true);
+        this.animate(true);
+        this.showGrid();
+    };
+    Topology.prototype.overflow = function () {
+      try {
+        var rect = this.getRect();
+        let _a = this.canvas;
+        if(!_a.width) return;
+        let width = _a.width, height = _a.height;
+        if (width < rect.width) {
+          width = rect.width;
+        }
+        if (height < rect.height) {
+          height = rect.height;
+        }
+        this.resize({width: width, height: height});
+        return rect;
+      }catch (e){
+        console.log('init-error-----------')
+      }
+    };
+    Topology.prototype.getMoveIn = function (pt) {
+        this.lastHoverNode = this.moveIn.hoverNode;
+        this.lastHoverLine = this.moveIn.hoverLine;
+        this.moveIn.type = this.moveInType.None;
+        this.moveIn.hoverNode = null;
+        this.moveIn.lineControlPoint = null;
+        this.moveIn.hoverLine = null;
+        this.hoverLayer.hoverAnchorIndex = -1;
+        if (!this.data.locked &&
+                !(this.activeLayer.pens.length === 1 && this.activeLayer.pens[0].type) &&
+                !this.activeLayer.locked() &&
+                this.activeLayer.rotateCPs[0] &&
+                this.activeLayer.rotateCPs[0].hit(pt, 15)) {
+            this.moveIn.type = this.moveInType.Rotate;
+            var cursor = this.options.rotateCursor;
+            this.divLayer.canvas.style.cursor = cursor.includes('/')
+                    ? "url(\"" + cursor + "\"), auto"
+                    : cursor;
+            return;
+        }
+        if (this.activeLayer.pens.length > 1 &&
+                pointInRect(pt, this.activeLayer.sizeCPs)) {
+            this.moveIn.type = this.moveInType.Nodes;
+        }
+        if (!this.data.locked &&
+                !this.activeLayer.locked() &&
+                !this.options.hideSizeCP) {
+            if (this.activeLayer.pens.length > 1 ||
+                    (!this.activeLayer.pens[0].type && !this.activeLayer.pens[0].hideSizeCP)) {
+                for (var i = 0; i < this.activeLayer.sizeCPs.length; ++i) {
+                    if (this.activeLayer.sizeCPs[i].hit(pt, 10)) {
+                        this.moveIn.type = this.moveInType.ResizeCP;
+                        this.moveIn.activeAnchorIndex = i;
+                        this.divLayer.canvas.style.cursor = resizeCursors[i];
+                        return;
+                    }
+                }
+            }
+        }
+        // In active pen.
+        if (!this.data.locked) {
+            for (var _i = 0, _a = this.activeLayer.pens; _i < _a.length; _i++) {
+                var item = _a[_i];
+                if (item instanceof Line && !item.locked) {
+                    for (var i = 0; i < item.controlPoints.length; ++i) {
+                        if (!item.locked && item.controlPoints[i].hit(pt, 10)) {
+                            item.controlPoints[i].id = i;
+                            this.moveIn.type = this.moveInType.LineControlPoint;
+                            this.moveIn.lineControlPoint = item.controlPoints[i];
+                            this.moveIn.hoverLine = item;
+                            this.divLayer.canvas.style.cursor = 'pointer';
+                            return;
+                        }
+                    }
+                    if (this.inLine(pt, item)) {
+                        return;
+                    }
+                }
+            }
+        }
+        this.divLayer.canvas.style.cursor = 'default';
+        var len = this.data.pens.length;
+        for (var i = len - 1; i > -1; --i) {
+            if (this.data.pens[i].type === PenType.Node &&
+                    this.inNode(pt, this.data.pens[i])) {
+                return;
+            } else if (this.data.pens[i].type === PenType.Line &&
+                    this.inLine(pt, this.data.pens[i])) {
+                // 需要优先判断十分在节点锚点上
+                // return;
+            }
+        }
+    };
+    Topology.prototype.inChildNode = function (pt, children) {
+        if (!children) {
+            return null;
+        }
+        for (var _i = 0, children_1 = children; _i < children_1.length; _i++) {
+            var item = children_1[_i];
+            if (item.type === PenType.Line) {
+                if (this.inLine(pt, item)) {
+                    return item;
+                }
+                continue;
+            }
+            var node = this.inChildNode(pt, item.children);
+            if (node) {
+                return node;
+            }
+            node = this.inNode(pt, item, true);
+            if (node) {
+                return node;
+            }
+        }
+        return null;
+    };
+    Topology.prototype.inNode = function (pt, node, inChild) {
+        if (inChild === void 0) {
+            inChild = false;
+        }
+        if (this.data.locked === Lock.NoEvent ||
+                (!node.visible && !window.location.pathname.includes('workspace')) ||
+                node.locked === Lock.NoEvent) {
+            return null;
+        }
+        var child = this.inChildNode(pt, node.children);
+        if (child) {
+            if (this.moveIn.type !== this.moveInType.HoverAnchors) {
+                if (child.type === PenType.Line) {
+                    this.moveIn.activeNode = node;
+                    this.moveIn.type = this.moveInType.Nodes;
+                } else if (child.stand) {
+                    this.moveIn.activeNode = child;
+                    this.moveIn.type = this.moveInType.Nodes;
+                } else {
+                    this.moveIn.activeNode = node;
+                    this.moveIn.type = this.moveInType.Nodes;
+                }
+            }
+            return child;
+        }
+        if (node.hit(pt)) {
+            this.moveIn.hoverNode = node;
+            this.moveIn.type = this.moveInType.Nodes;
+            // 非绘画页面下禁止不包含点击、双击事件的节点选中鼠标样式
+            if (!this.checkNodeOfClickType(node)) {
+                if (!this.data.locked && !node.locked) {
+                    this.divLayer.canvas.style.cursor = 'move';
+                } else {
+                    this.divLayer.canvas.style.cursor = this.options.hoverCursor;
+                }
+            }
+            // Too small
+            if (!this.data.locked &&
+                    !node.locked &&
+                    !(this.options.hideAnchor ||
+                            node.hideAnchor ||
+                            node.rect.width < 20 ||
+                            node.rect.height < 20)) {
+                for (var j = 0; j < node.rotatedAnchors.length; ++j) {
+                    if (node.rotatedAnchors[j].hit(pt, 5)) {
+                        if (!this.mouseDown &&
+                                node.rotatedAnchors[j].mode === AnchorMode.In) {
+                            continue;
+                        }
+                        this.moveIn.type = this.moveInType.HoverAnchors;
+                        this.moveIn.hoverAnchorIndex = j;
+                        this.hoverLayer.hoverAnchorIndex = j;
+                        this.divLayer.canvas.style.cursor = 'pointer';
+                        break;
+                    }
+                }
+            }
+            if (!inChild) {
+                this.moveIn.activeNode = this.moveIn.hoverNode;
+            }
+            return node;
+        }
+        if (this.options.hideAnchor ||
+                node.hideAnchor ||
+                this.data.locked ||
+                node.locked) {
+            return null;
+        }
+        if (node.hit(pt, 5)) {
+            for (var j = 0; j < node.rotatedAnchors.length; ++j) {
+                if (node.rotatedAnchors[j].hit(pt, 5)) {
+                    if (!this.mouseDown &&
+                            node.rotatedAnchors[j].mode === AnchorMode.In) {
+                        continue;
+                    }
+                    this.moveIn.hoverNode = node;
+                    this.moveIn.type = this.moveInType.HoverAnchors;
+                    this.moveIn.hoverAnchorIndex = j;
+                    this.hoverLayer.hoverAnchorIndex = j;
+                    this.divLayer.canvas.style.cursor = 'crosshair';
+                    if (!inChild) {
+                        this.moveIn.activeNode = node;
+                    }
+                    return node;
+                }
+            }
+        }
+        return null;
+    };
+    Topology.prototype.inLine = function (point, line) {
+        if (!line.visible) {
+            return null;
+        }
+        if (line.from.hit(point, 5)) {
+            this.moveIn.type = this.moveInType.LineFrom;
+            this.moveIn.hoverLine = line;
+            if (this.data.locked || line.locked) {
+                this.divLayer.canvas.style.cursor = this.options.hoverCursor;
+            } else {
+                this.divLayer.canvas.style.cursor = 'move';
+            }
+            return line;
+        }
+        if (line.to.hit(point, 5)) {
+            this.moveIn.type = this.moveInType.LineTo;
+            this.moveIn.hoverLine = line;
+            if (this.data.locked || line.locked) {
+                this.divLayer.canvas.style.cursor = this.options.hoverCursor;
+            } else {
+                this.divLayer.canvas.style.cursor = 'move';
+            }
+            return line;
+        }
+        if (line.pointIn(point)) {
+            this.moveIn.type = this.moveInType.LineMove;
+            this.moveIn.hoverLine = line;
+            this.divLayer.canvas.style.cursor = this.options.hoverCursor;
+            if (line.from.id || line.to.id) {
+                this.moveIn.type = this.moveInType.Line;
+            }
+            return line;
+        }
+        return null;
+    };
+    Topology.prototype.getLineDock = function (point) {
+        this.hoverLayer.dockAnchor = null;
+        for (var _i = 0, _a = this.data.pens; _i < _a.length; _i++) {
+            var item = _a[_i];
+            if (item instanceof Node) {
+                if (item.rect.hit(point, 10)) {
+                    this.hoverLayer.node = item;
+                }
+                for (var i = 0; i < item.rotatedAnchors.length; ++i) {
+                    if (item.rotatedAnchors[i].mode &&
+                            item.rotatedAnchors[i].mode !== AnchorMode.In) {
+                        continue;
+                    }
+                    if (item.rotatedAnchors[i].hit(point, 10)) {
+                        point.id = item.id;
+                        point.anchorIndex = i;
+                        point.direction = item.rotatedAnchors[point.anchorIndex].direction;
+                        point.x = item.rotatedAnchors[point.anchorIndex].x;
+                        point.y = item.rotatedAnchors[point.anchorIndex].y;
+                        this.hoverLayer.dockAnchor = item.rotatedAnchors[i];
+                        break;
+                    }
+                }
+            } else if (item instanceof Line) {
+                if (item.id === this.hoverLayer.line.id) {
+                    continue;
+                }
+                if (item.from.hit(point, 10)) {
+                    point.x = item.from.x;
+                    point.y = item.from.y;
+                    this.hoverLayer.dockAnchor = item.from;
+                    break;
+                }
+                if (item.to.hit(point, 10)) {
+                    point.x = item.to.x;
+                    point.y = item.to.y;
+                    this.hoverLayer.dockAnchor = item.to;
+                    break;
+                }
+                if (item.controlPoints) {
+                    for (var _b = 0, _c = item.controlPoints; _b < _c.length; _b++) {
+                        var cp = _c[_b];
+                        if (cp.hit(point, 10)) {
+                            point.x = cp.x;
+                            point.y = cp.y;
+                            this.hoverLayer.dockAnchor = cp;
+                            break;
+                        }
+                    }
+                }
+            }
+            if (this.hoverLayer.dockAnchor) {
+                break;
+            }
+        }
+        return point;
+    };
+    Topology.prototype.getPensInRect = function (rect) {
+        if (rect.width < 0) {
+            rect.width = -rect.width;
+            rect.x = rect.ex;
+            rect.ex = rect.x + rect.width;
+        }
+        if (rect.height < 0) {
+            rect.height = -rect.height;
+            rect.y = rect.ey;
+            rect.ey = rect.y + rect.height;
+        }
+        this.activeLayer.pens = [];
+        for (var _i = 0, _a = this.data.pens; _i < _a.length; _i++) {
+            var item = _a[_i];
+            if (item.locked === Lock.NoEvent) {
+                continue;
+            }
+            if (item instanceof Node) {
+                if (rect.hitByRect(item.rect)) {
+                    this.activeLayer.add(item);
+                }
+            }
+            if (item instanceof Line) {
+                if (rect.hit(item.from) && rect.hit(item.to)) {
+                    this.activeLayer.add(item);
+                }
+            }
+        }
+    };
+    Topology.prototype.getAngle = function (pt) {
+        if (pt.x === this.activeLayer.rect.center.x) {
+            return pt.y <= this.activeLayer.rect.center.y ? 0 : 180;
+        }
+        if (pt.y === this.activeLayer.rect.center.y) {
+            return pt.x < this.activeLayer.rect.center.x ? 270 : 90;
+        }
+        var x = pt.x - this.activeLayer.rect.center.x;
+        var y = pt.y - this.activeLayer.rect.center.y;
+        var angle = (Math.atan(Math.abs(x / y)) / (2 * Math.PI)) * 360;
+        if (x > 0 && y > 0) {
+            angle = 180 - angle;
+        } else if (x < 0 && y > 0) {
+            angle += 180;
+        } else if (x < 0 && y < 0) {
+            angle = 360 - angle;
+        }
+        if (this.activeLayer.pens.length === 1) {
+            return angle - this.activeLayer.pens[0].rotate;
+        }
+        return angle;
+    };
+    // Get a dock rect for moving nodes.
+    Topology.prototype.getDockPos = function (offsetX, offsetY, noDock) {
+        this.hoverLayer.dockLineX = 0;
+        this.hoverLayer.dockLineY = 0;
+        var offset = {
+            x: 0,
+            y: 0,
+        };
+        if (noDock || this.options.disableDockLine) {
+            return offset;
+        }
+        var x = 0;
+        var y = 0;
+        var disX = dockOffset;
+        var disY = dockOffset;
+        for (var _i = 0, _a = this.activeLayer.dockWatchers; _i < _a.length; _i++) {
+            var activePt = _a[_i];
+            for (var _b = 0, _c = this.data.pens; _b < _c.length; _b++) {
+                var item = _c[_b];
+                if (!(item instanceof Node) ||
+                        this.activeLayer.has(item) ||
+                        item.name === 'text') {
+                    continue;
+                }
+                if (!item.dockWatchers) {
+                    item.getDockWatchers();
+                }
+                for (var _d = 0, _e = item.dockWatchers; _d < _e.length; _d++) {
+                    var p = _e[_d];
+                    x = Math.abs(p.x - activePt.x - offsetX);
+                    if (x < disX) {
+                        disX = -99999;
+                        offset.x = p.x - activePt.x;
+                        this.hoverLayer.dockLineX = p.x | 0;
+                    }
+                    y = Math.abs(p.y - activePt.y - offsetY);
+                    if (y < disY) {
+                        disY = -99999;
+                        offset.y = p.y - activePt.y;
+                        this.hoverLayer.dockLineY = p.y | 0;
+                    }
+                }
+            }
+        }
+        return offset;
+    };
+    Topology.prototype.cache = function () {
+        if (this.caches.index < this.caches.list.length - 1) {
+            this.caches.list.splice(this.caches.index + 1, this.caches.list.length - this.caches.index - 1);
+        }
+        var data = new TopologyData(this.data);
+        this.caches.list.push(data);
+        if (this.caches.list.length > this.options.cacheLen) {
+            this.caches.list.shift();
+        }
+        this.caches.index = this.caches.list.length - 1;
+    };
+    Topology.prototype.cacheReplace = function (pens) {
+        if (pens && pens.length) {
+            var needPenMap = {};
+            for (var i = 0, len = pens.length; i < len; i++) {
+                var pen = pens[i];
+                var id = pen.id;
+                if (pen instanceof Node) {
+                    needPenMap[id] = new Node(pen);
+                } else if (pen instanceof Line) {
+                    needPenMap[id] = new Line(pen);
+                }
+            }
+            var cacheListData = this.caches.list[0];
+            if (!cacheListData) {
+                return;
+            }
+            for (var i = 0, len = cacheListData.pens.length; i < len; i++) {
+                var id = cacheListData.pens[i].id;
+                if (needPenMap[id]) {
+                    cacheListData.pens[i] = needPenMap[id];
+                }
+            }
+        }
+    };
+    Topology.prototype.undo = function (noRedo) {
+        if (noRedo === void 0) {
+            noRedo = false;
+        }
+        if (this.data.locked || this.caches.index < 1) {
+            return;
+        }
+        this.divLayer.clear();
+        var data = new TopologyData(this.caches.list[--this.caches.index]);
+        this.data.pens.splice(0, this.data.pens.length);
+        this.data.pens.push.apply(this.data.pens, data.pens);
+        this.render(true);
+        this.divLayer.render();
+        if (noRedo) {
+            this.caches.list.splice(this.caches.index + 1, this.caches.list.length - this.caches.index - 1);
+        }
+        this.dispatch('undo', this.data);
+    };
+    Topology.prototype.redo = function () {
+        if (this.data.locked || this.caches.index > this.caches.list.length - 2) {
+            return;
+        }
+        this.divLayer.clear();
+        var data = new TopologyData(this.caches.list[++this.caches.index]);
+        this.data.pens.splice(0, this.data.pens.length);
+        this.data.pens.push.apply(this.data.pens, data.pens);
+        this.render(true);
+        this.divLayer.render();
+        this.dispatch('redo', this.data);
+    };
+    Topology.prototype.toImage = function (type, quality, callback, padding, thumbnail) {
+        if (thumbnail === void 0) {
+            thumbnail = true;
+        }
+        var rect = new Rect(0, 0, this.canvas.width, this.canvas.height);
+        if (thumbnail) {
+            rect = this.getRect();
+        }
+        if (!padding) {
+            padding = {
+                left: 10,
+                top: 10,
+                right: 10,
+                bottom: 10,
+            };
+        }
+        rect.x -= padding.left;
+        rect.y -= padding.top;
+        rect.width += padding.left + padding.right;
+        rect.height += padding.top + padding.bottom;
+        rect.round();
+        var srcRect = rect.clone();
+        srcRect.scale(this.offscreen.getDpiRatio(), new Point(0, 0));
+        srcRect.round();
+        var canvas = document.createElement('canvas');
+        canvas.width = srcRect.width;
+        canvas.height = srcRect.height;
+        canvas.style.width = rect.width + 'px';
+        canvas.style.height = rect.height + 'px';
+        var ctx = canvas.getContext('2d');
+        if (type && type !== 'image/png') {
+            ctx.fillStyle = '#fff';
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+        }
+        ctx.drawImage(this.canvas.canvas, srcRect.x, srcRect.y, srcRect.width, srcRect.height, 0, 0, srcRect.width, srcRect.height);
+        if (callback) {
+            canvas.toBlob(callback);
+            return '';
+        }
+        return canvas.toDataURL(type, quality);
+    };
+    Topology.prototype.saveAsImage = function (name, type, quality, padding, thumbnail) {
+        if (thumbnail === void 0) {
+            thumbnail = true;
+        }
+        var a = document.createElement('a');
+        a.setAttribute('download', name || 'le5le.topology.png');
+        a.setAttribute('href', this.toImage(type, quality, null, padding, thumbnail));
+        var evt = document.createEvent('MouseEvents');
+        evt.initEvent('click', true, true);
+        a.dispatchEvent(evt);
+    };
+    Topology.prototype.delete = function (force, nodes) {
+        var pens = [];
+        const deleteNodes = nodes ? nodes : this.activeLayer.pens;
+        for (var i = 0; i < deleteNodes.length; i++) {
+            var pen = deleteNodes[i];
+            if (!force && pen.locked) {
+                continue;
+            }
+            var found = this.findIndex(pen);
+            if (found > -1) {
+                if (this.data.pens[found].type === PenType.Node) {
+                    this.divLayer.removeDiv(this.data.pens[found]);
+                }
+                if (this.options.disableEmptyLine) {
+                    this.delEmptyLines(pen.id);
+                }
+                pens.push.apply(pens, this.data.pens.splice(found, 1));
+                this.setSwitchTabData(pen, found, 'delete');
+                --i;
+            }
+            this.animateLayer.pens.delete(pen.id);
+        }
+        if (!pens.length) {
+            return;
+        }
+        this.render(true);
+        this.cache();
+        this.dispatch('delete', pens);
+    };
+    Topology.prototype.delEmptyLines = function (deleteedId) {
+        for (var i = 0; i < this.data.pens.length; i++) {
+            if (this.data.pens[i].type !== PenType.Line) {
+                continue;
+            }
+            var line = this.data.pens[i];
+            if (!line.from.id ||
+                    !line.to.id ||
+                    line.from.id === deleteedId ||
+                    line.to.id === deleteedId) {
+                this.data.pens.splice(i, 1);
+                this.animateLayer.pens.delete(line.id);
+                --i;
+            }
+        }
+    };
+    Topology.prototype.removeNode = function (node) {
+        var i = this.findIndex(node);
+        if (i > -1) {
+            this.divLayer.removeDiv(this.data.pens[i]);
+            var nodes = this.data.pens.splice(i, 1);
+            this.dispatch('delete', nodes);
+        }
+        this.render(true);
+        this.cache();
+    };
+    Topology.prototype.removeLine = function (line) {
+        var i = this.findIndex(line);
+        if (i > -1) {
+            var lines = this.data.pens.splice(i, 1);
+            this.dispatch('delete', lines);
+        }
+        this.render(true);
+        this.cache();
+    };
+    Topology.prototype.cut = function () {
+        if (this.data.locked) {
+            return;
+        }
+        this.clipboard = new TopologyData({
+            pens: [],
+        });
+        for (var i = 0; i < this.activeLayer.pens.length; i++) {
+            var pen = this.activeLayer.pens[i];
+            this.clipboard.pens.push(pen.clone());
+            var found = this.findIndex(pen);
+            if (found > -1) {
+                if (pen.type === PenType.Node) {
+                    this.divLayer.removeDiv(this.data.pens[found]);
+                }
+                this.data.pens.splice(found, 1);
+                --i;
+            }
+        }
+        this.cache();
+        this.activeLayer.clear();
+        this.hoverLayer.node = null;
+        this.moveIn.hoverLine = null;
+        this.moveIn.hoverNode = null;
+        this.render();
+        this.dispatch('delete', this.clipboard.pens);
+    };
+    Topology.prototype.copy = function () {
+        let isAnimate = this.activeLayer.pens.find((item) => {
+            return item.animatePlay;
+        });
+        if(isAnimate) return false;
+        this.clipboard = new TopologyData({
+            pens: [],
+        });
+        for (var _i = 0, _a = this.activeLayer.pens; _i < _a.length; _i++) {
+            var pen = _a[_i];
+            this.clipboard.pens.push(pen.clone());
+        };
+        return true;
+    };
+    Topology.prototype.paste = function () {
+        if (!this.clipboard || this.data.locked) {
+            return;
+        }
+        this.hoverLayer.node = null;
+        this.hoverLayer.line = null;
+        this.activeLayer.pens = [];
+        var idMaps = {};
+        const clipboardPens = JSON.parse(JSON.stringify(this.clipboard.pens));
+        for (var _i = 0, _a = clipboardPens; _i < _a.length; _i++) {
+            const pen = new Node(_a[_i]);
+            if (pen.type === PenType.Node) {
+                this.newId(pen, idMaps);
+                pen.rect.x += 20;
+                pen.rect.ex += 20;
+                pen.rect.y += 20;
+                pen.rect.ey += 20;
+                const rectType = ['rect', 'textRect', 'fullTextRect', 'iconRect', 'fullIconRect']
+                if (pen.subName && pen.subName == 'temp') {
+                    // 温湿度元件
+                    rectType.forEach((type) => {
+                        pen.children.forEach((item) => {
+                            item[type].x += 20;
+                            item[type].ex += 20;
+                            item[type].y += 20;
+                            item[type].ey += 20;
+                        })
+                    })
+                }
+                //pen.init();
+            }
+            if (pen instanceof Line) {
+                pen.id = s8();
+                pen.from = new Point(pen.from.x + 20, pen.from.y + 20, pen.from.direction, pen.from.anchorIndex, idMaps[pen.from.id]);
+                pen.to = new Point(pen.to.x + 20, pen.to.y + 20, pen.to.direction, pen.to.anchorIndex, idMaps[pen.to.id]);
+                var controlPoints = [];
+                for (var _b = 0, _c = pen.controlPoints; _b < _c.length; _b++) {
+                    var pt = _c[_b];
+                    controlPoints.push(new Point(pt.x + 20, pt.y + 20));
+                }
+                pen.controlPoints = controlPoints;
+            }
+            this.data.pens.push(pen);
+            this.activeLayer.add(pen);
+            this.setSwitchTabData(pen, this.data.pens.length-1);
+        }
+        this.render();
+        this.animate(true);
+        this.cache();
+        this.copy();
+        if (this.clipboard.pens.length > 1) {
+            this.dispatch('multi', {
+                pens: this.clipboard.pens,
+            });
+        } else if (this.activeLayer.pens.length > 0) {
+            if (this.activeLayer.pens[0].type === PenType.Node) {
+                this.dispatch('addNode', this.activeLayer.pens[0]);
+            } else if (this.activeLayer.pens[0].type === PenType.Line) {
+                this.dispatch('addLine', this.activeLayer.pens[0]);
+            }
+        }
+    };
+    Topology.prototype.bind = function (item, exite, dataType, index) {
+        this.clipboard = new TopologyData({
+            pens: [],
+        });
+        for (var _i = 0, _a = this.activeLayer.pens; _i < _a.length; _i++) {
+            var pen = _a[_i];
+            pen.data = []
+            this.bindInfo(item, pen, dataType, index)
+            this.clipboard.pens.push(pen.clone());
+        }
+        if (exite == true) {
+            this.paste();
+        }
+    };
+    Topology.prototype.bindInfo = async function (item, pen, type, index) {
+        if (type == 0) {
+            pen.data.push({
+                "key": "tagId",
+                "value": item.tagId,
+                "isControlDis": item.isControlDis,
+                "type": item.tagType,
+                "tagVal": item.value,
+                "valExplain": item.valExplain,
+                "tagId": item.tagId
+            }, {
+                "key": "测点名称",
+                "value": item.tagName
+            })
+            let obj = {
+                "key": "threeCategoryId",
+                "value": item.threeCategoryId
+            }
+            // 绑定悬浮文字
+            pen.title = item.touchpname
+            if (!JSON.stringify(pen.data).includes(JSON.stringify(obj))) {
+                pen.data.push(obj)
+            }
+        } else if (type == 1) {
+            pen.data.push({
+                "key": "kpiAddr",
+                "value": item.kpiId + '_' + item.kpiAddr,
+                "isControlDis": item.isControlDis,
+                "type": item.tagType
+            }, {
+                "key": "指标名称",
+                "value": item.kpiName
+            })
+        } else if (type == 2) {
+            pen.data.push({
+                "key": "assetId",
+                "value": item.id
+            }, {
+                "key": "资产名称",
+                "value": item.name
+            })
+            // 绑定悬浮文字
+            pen.title = item.bak
+            if (pen.subName && pen.subName == 'temp') {
+                // 温湿度元件
+                // 通讯状态
+                pen.children[0].data = []
+                if (index > 0) {
+                    pen.children[0].text = index + 1 + '#'
+                }
+                this.bindInfo(item, pen.children[0], type);
+                // 温度/湿度
+                const _type = 0
+                const ret = await axios.post('/asset/touch_css3000_api/findlist', {assetIds: item.id})
+                ret.data.data.forEach((elem) => {
+                    // if(elem.kpiName=='通讯状态'){
+                    // }else
+                    if (elem.kpiName == '温度') {
+                        pen.children[1].data = []
+                        this.bindInfo(elem, pen.children[1], _type);
+                    } else if (elem.kpiName == '湿度') {
+                        pen.children[2].data = []
+                        this.bindInfo(elem, pen.children[2], _type);
+                    }
+                })
+                pen.children.forEach((item) => {
+                    item.events = [{
+                        "type": 3,
+                        "action": 2,
+                        "value": "",
+                        "show": true
+                    }]
+                })
+            }
+        } else if (type == 3) {
+            pen.data.push({
+                "key": "areaId",
+                "value": item.id
+            }, {
+                "key": "区域名称",
+                "value": item.name
+            })
+        }
+        // let str = JSON.stringify(pen.events)
+        // pen.events.forEach((_item) => {
+        //     if(_item.action==0 && _item.dcimDetailPage && _item.dcimDetailPage != '' && item.devId){
+        //         str = str.replace(new RegExp(_item.dcimAssetValue,'g'), item.devId)
+        //     }
+        // });
+        // pen.events = JSON.parse(str)
+        return pen
+    };
+    Topology.prototype.newId = function (node, idMaps) {
+        var old = node.id;
+        node.id = s8();
+        idMaps[old] = node.id;
+        if (node.children) {
+            for (var _i = 0, _a = node.children; _i < _a.length; _i++) {
+                var item = _a[_i];
+                this.newId(item, idMaps);
+            }
+        }
+    };
+    Topology.prototype.updateProps = function (cache, pens) {
+        if (cache === void 0) {
+            cache = true;
+        }
+        if (!pens) {
+            pens = this.activeLayer.pens;
+        }
+        for (var _i = 0, pens_1 = pens; _i < pens_1.length; _i++) {
+            var pen = pens_1[_i];
+            if (pen instanceof Node) {
+                let isRotateBug = false
+                if (pen.rotate === 0) {
+                    pen.rotate = 360
+                    isRotateBug = true
+                }
+                pen.init();
+                pen.initRect();
+                if (isRotateBug === true) {
+                    pen.rotate = 0
+                }
+                if (!pen.strokeStyle) {
+                    pen.strokeStyle = 'transparent'
+                }
+            }
+        }
+        this.activeLayer.updateLines(pens);
+        this.activeLayer.calcControlPoints();
+        this.activeLayer.saveNodeRects();
+        this.render();
+        // tslint:disable-next-line: no-unused-expression
+        cache && this.cache();
+    };
+    Topology.prototype.lock = function (lock) {
+        this.data.locked = lock;
+        for (var _i = 0, _a = this.data.pens; _i < _a.length; _i++) {
+            var item = _a[_i];
+            item.addToDiv && item.addToDiv();
+        }
+        this.dispatch('locked', this.data.locked);
+    };
+    Topology.prototype.lockPens = function (pens, lock) {
+        for (var _i = 0, _a = this.data.pens; _i < _a.length; _i++) {
+            var item = _a[_i];
+            for (var _b = 0, pens_2 = pens; _b < pens_2.length; _b++) {
+                var pen = pens_2[_b];
+                if (item.id === pen.id) {
+                    item.locked = lock;
+                    item.addToDiv && item.addToDiv();
+                    break;
+                }
+            }
+        }
+        this.dispatch('lockPens', {
+            pens: pens,
+            lock: lock,
+        });
+    };
+    Topology.prototype.up = function (pen) {
+        var i = this.findIndex(pen);
+        if (i > -1 && i !== this.data.pens.length - 1) {
+            this.data.pens.splice(i + 2, 0, this.data.pens[i]);
+            this.data.pens.splice(i, 1);
+        }
+    };
+    Topology.prototype.top = function (pen) {
+        var i = this.findIndex(pen);
+        if (i > -1) {
+            this.data.pens.push(this.data.pens[i]);
+            this.data.pens.splice(i, 1);
+        }
+    };
+    Topology.prototype.down = function (pen) {
+        var i = this.findIndex(pen);
+        if (i > -1 && i !== 0) {
+            this.data.pens.splice(i - 1, 0, this.data.pens[i]);
+            this.data.pens.splice(i + 1, 1);
+        }
+    };
+    Topology.prototype.bottom = function (pen) {
+        var i = this.findIndex(pen);
+        if (i > -1) {
+            this.data.pens.unshift(this.data.pens[i]);
+            this.data.pens.splice(i + 1, 1);
+        }
+    };
+    Topology.prototype.combine = function (pens, stand, temp) {
+        if (stand === void 0) {
+            stand = false;
+        }
+        if (!pens) {
+            pens = this.activeLayer.pens;
+        }
+        const converPens = JSON.parse(JSON.stringify(pens));
+        var rect = this.getRect(converPens);
+        for (var _i = 0, pens_3 = converPens; _i < pens_3.length; _i++) {
+            var item = pens_3[_i];
+            var i = this.findIndex(item);
+            if (i > -1) {
+                this.data.pens.splice(i, 1);
+            }
+        }
+        var node = new Node({
+            name: 'combine',
+            rect: new Rect(rect.x, rect.y, rect.width, rect.height),
+            text: '',
+            paddingLeft: 0,
+            paddingRight: 0,
+            paddingTop: 0,
+            paddingBottom: 0,
+            strokeStyle: 'transparent',
+            children: [],
+        });
+        if (temp) {
+            node.subName = temp
+        }
+        for (var _a = 0, pens_4 = converPens; _a < pens_4.length; _a++) {
+            var item = new Node(pens_4[_a]);
+            item.stand = stand;
+            item.parentId = node.id;
+            item.animatePlay = false;
+            item.calcRectInParent(node);
+            node.children.push(item);
+        }
+        this.data.pens.push(node);
+        this.activeLayer.setPens([node]);
+        this.dispatch('node', node);
+        this.cache();
+    };
+    Topology.prototype.uncombine = function (node) {
+        if (!node) {
+            node = this.activeLayer.pens[0];
+        }
+        if (!(node instanceof Node)) {
+            return;
+        }
+        const nodeChildren = JSON.parse(JSON.stringify(node));
+        for (var _i = 0, _a = nodeChildren.children; _i < _a.length; _i++) {
+            var item = new Node(_a[_i]);
+            item.parentId = undefined;
+            item.rectInParent = undefined;
+            item.locked = Lock.None;
+            this.data.pens.push(item);
+        }
+        var i = this.findIndex(nodeChildren);
+        if (i > -1 && nodeChildren.name === 'combine') {
+            this.data.pens.splice(i, 1);
+        } else {
+            nodeChildren.children = null;
+        }
+        this.cache();
+        this.activeLayer.clear();
+        this.hoverLayer.clear();
+    };
+    Topology.prototype.find = function (idOrTag, pens) {
+        var _this = this;
+        if (!pens) {
+            pens = this.data.pens;
+        }
+        var result = [];
+        pens.forEach(function (item) {
+            if (item.id === idOrTag || item.tags.indexOf(idOrTag) > -1) {
+                result.push(item);
+            }
+            if (item.children) {
+                result.push.apply(result, _this.find(idOrTag, item.children));
+            }
+        });
+        if (result.length === 1) {
+            return result[0];
+        }
+        return result;
+    };
+    Topology.prototype.findIndex = function (pen) {
+        for (var i = 0; i < this.data.pens.length; ++i) {
+            if (pen.id === this.data.pens[i].id) {
+                return i;
+            }
+        }
+        return -1;
+    };
+    Topology.prototype.anchor = function (anchor) {
+        this.options.hideAnchor = anchor
+        this.dispatch('hideAnchor', anchor);
+    };
+    // scale for scaled canvas:
+    //   > 1, expand
+    //   < 1, reduce
+    Topology.prototype.scale = function (scale, center, w, h) {
+        if (this.data.scale * scale < this.options.minScale ||
+                this.data.scale * scale > this.options.maxScale) {
+            return;
+        }
+        this.data.scale *= scale;
+        !center && (center = this.getRect().center);
+        for (var _i = 0, _a = this.data.pens; _i < _a.length; _i++) {
+            var item = _a[_i];
+            item.scale(scale, center, w, h);
+        }
+        this.animateLayer.pens.forEach(function (pen) {
+            if (pen instanceof Line) {
+                pen.scale(scale, center);
+            }
+        });
+        Store.set(this.generateStoreKey('LT:scale'), this.data.scale);
+        this.render();
+        this.cache();
+        this.dispatch('scale', this.data.scale);
+    };
+    // scale for origin canvas:
+    Topology.prototype.scaleTo = function (scale) {
+        this.scale(scale / this.data.scale);
+        this.data.scale = scale;
+    };
+    Topology.prototype.round = function () {
+        for (var _i = 0, _a = this.data.pens; _i < _a.length; _i++) {
+            var item = _a[_i];
+            if (item instanceof Node) {
+                item.round();
+            }
+        }
+    }
+    Topology.prototype.fitView = function (viewPadding) {
+        if (!this.hasView())
+            return;
+        // 1. 重置画布尺寸为容器尺寸
+        var parentElem = this.canvas.parentElem;
+        var width = parentElem.offsetWidth, height = parentElem.offsetHeight;
+        this.resize({
+            width: width,
+            height: height,
+        });
+        // 2. 图形居中
+        this.centerView(viewPadding);
+        // 3. 获取设置的留白值
+        var padding = formatPadding(viewPadding || this.options.viewPadding);
+        // 4. 获取图形尺寸
+        var rect = this.getRect();
+        // 6. 计算缩放比
+        var w = (width - padding[1] - padding[3]) / rect.width;
+        var h = (height - padding[0] - padding[2]) / rect.height;
+        var ratio = w;
+        if (w > h) {
+            ratio = h;
+        }
+        this.scale(ratio);
+    };
+    Topology.prototype.showTipText = function (data, pos) {
+        if (this.data.locked && data.title) {
+            this.divLayer.canvas.title = data.title;
+            this.tip = data.id;
+        }
+    };
+    Topology.prototype.scroll = function (x, y) {
+        var _this = this;
+        if (this.scrolling) {
+            return;
+        }
+        this.scrolling = true;
+        this.parentElem.scrollLeft += x;
+        this.parentElem.scrollTop += y;
+        setTimeout(function () {
+            _this.scrolling = false;
+        }, 700);
+    };
+    Topology.prototype.toComponent = function (pens) {
+        if (!pens) {
+            pens = this.data.pens;
+        }
+        var rect = this.getRect(pens);
+        var node = new Node({
+            name: 'combine',
+            rect: new Rect(rect.x, rect.y, rect.width, rect.height),
+            text: '',
+            paddingLeft: 0,
+            paddingRight: 0,
+            paddingTop: 0,
+            paddingBottom: 0,
+            strokeStyle: 'transparent',
+            children: [],
+        });
+        for (var _i = 0, pens_5 = pens; _i < pens_5.length; _i++) {
+            var item = pens_5[_i];
+            if (item.type === PenType.Node &&
+                    rect.width === item.rect.width &&
+                    rect.height === item.rect.height) {
+                node = item;
+                if (!node.children) {
+                    node.children = [];
+                }
+                break;
+            }
+        }
+        for (var _a = 0, pens_6 = pens; _a < pens_6.length; _a++) {
+            var item = pens_6[_a];
+            if (item !== node) {
+                item.parentId = node.id;
+                item.calcRectInParent(node);
+                node.children.push(item);
+            }
+        }
+        return node;
+    };
+    Topology.prototype.getValue = function (idOrTag, attr) {
+        if (attr === void 0) {
+            attr = 'text';
+        }
+        var pen;
+        this.data.pens.forEach(function (item) {
+            if (item.id === idOrTag || item.tags.indexOf(idOrTag) > -1) {
+                pen = item;
+            }
+        });
+        return pen[attr];
+    };
+    Topology.prototype.setValue = function (idOrTag, val, attr) {
+        if (attr === void 0) {
+            attr = 'text';
+        }
+        var pen;
+        this.data.pens.forEach(function (item) {
+            if (item.id === idOrTag || item.tags.indexOf(idOrTag) > -1) {
+                pen = item;
+            }
+        });
+        pen[attr] = val;
+    };
+    Topology.prototype.createGrid = function () {
+        this.gridElem.style.position = 'absolute';
+        this.gridElem.style.display = 'none';
+        this.gridElem.style.left = '0';
+        this.gridElem.style.top = '0';
+        this.gridElem.innerHTML = "<svg class=\"svg-grid\" width=\"100%\" height=\"100%\" style=\"position:absolute;left:0;right:0;top:0;bottom:0\"\n      xmlns=\"http://www.w3.org/2000/svg\">\n      <defs>\n        <pattern id=\"grid\" width=\"10\" height=\"10\" patternUnits=\"userSpaceOnUse\">\n          <path d=\"M 10 0 L 0 0 0 10\" fill=\"none\" stroke=\"#f3f3f3\" stroke-width=\"1\" />\n        </pattern>\n      </defs>\n      <rect width=\"100%\" height=\"100%\" fill=\"url(#grid)\" />\n    </svg>";
+        this.parentElem.appendChild(this.gridElem);
+    };
+    Topology.prototype.showGrid = function (show) {
+        if (show === undefined) {
+            show = this.data.grid;
+        }
+        this.gridElem.style.width = this.canvas.width + 'px';
+        this.gridElem.style.height = this.canvas.height + 'px';
+        this.gridElem.style.display = show ? 'block' : 'none';
+    };
+    Topology.prototype.destroy = function () {
+        this.subcribeAnimateMoved.unsubscribe();
+        this.subcribeMediaEnd.unsubscribe();
+        this.destroyStatic();
+        this.hoverLayer = null;
+        this.activeLayer = null;
+        this.gridElem = null;
+        this.onMouseMove = null;
+        this.onmousedown = null;
+        this.onmouseup = null;
+        this.onkeydown = null;
+        window.removeEventListener('resize', this.winResize);
+    };
+    Topology.prototype.handleAddArbitrary = function () {
+        let _this = this;
+        let graphData = _this.arbitrarygGraphData;
+        let circles = graphData.circles;
+        let points = graphData.points;
+        let canvas = _this.canvas.canvas;
+        let context = canvas.getContext('2d');
+        for (var i = 0; i < circles.length; i++) {
+            let circle = circles[i];
+            var distanceFromCenter = Math.sqrt(Math.pow(circle.x - _this.mouseDown.x, 2)
+                    + Math.pow(circle.y - _this.mouseDown.y, 2));
+
+            if (distanceFromCenter <= circle.radius) {
+
+                graphData.indexCircle = i;
+                graphData.isDragging = true;
+                return;
+            }
+        }
+        let circle = new Circle(_this.mouseDown.x, _this.mouseDown.y);
+        circles.push(circle);
+        circles[0].color = "green";
+        for (var i = 0; i < circles.length; i++) {
+            let circle = circles[i];
+            context.beginPath();
+            context.arc(circle.x, circle.y, circle.radius, 0, Math.PI * 2);
+            context.fillStyle = circle.color;
+            context.strokeStyle = "black";
+            context.fill();
+            context.stroke();
+        }
+        var point = new Point(_this.mouseDown.x, _this.mouseDown.y);
+        points.push(point);
+        context.beginPath();
+        context.lineWidth = 1;
+        if (points.length > 1) {
+
+            var distanceFromStart = Math.sqrt(Math.pow(points[0].x - _this.mouseDown.x, 2)
+                    + Math.pow(points[0].y - _this.mouseDown.y, 2));
+        }
+
+        if (distanceFromStart <= 30) {
+            graphData.oIndex = 1;
+        }
+
+        context.moveTo(points[0].x, points[0].y);
+        for (var i = 0; i < points.length; i++) {
+            context.lineTo(points[i].x, points[i].y);
+        }
+        context.fillStyle = "rgb(0,0,0)";
+
+        if (graphData.oIndex == 1) {
+
+            context.lineTo(points[0].x, points[0].y);
+
+            _this.arbitrarygGraphData.close = true;
+
+        }
+        context.strokeStyle = "#339fff";
+        context.stroke();
+        context.closePath();
+
+    };
+    Topology.prototype.createCanvas = function () {
+        if (document.getElementById('arbitraryCanvas')) return
+        var canvas = document.createElement('canvas');
+        canvas.width = 500;
+        canvas.height = 500;
+        canvas.style.width = 500 + 'px';
+        canvas.style.height = 500 + 'px';
+        canvas.style.zIndex = 1;
+        canvas.setAttribute('id', 'arbitraryCanvas');
+        this.parentElem.appendChild(canvas)
+    };
+    Topology.prototype.createArbitraryGraph = function () {
+
+        let _this = this;
+
+        if (_this.addingArbitraryGraph && _this.arbitrarygGraphData.close) {
+
+            let rectW = Math.max.apply(Math, _this.arbitrarygGraphData.circles.map((item) => {
+                return item.x
+            })) - Math.min.apply(Math, _this.arbitrarygGraphData.circles.map((item) => {
+                return item.x
+            }));
+
+            let rectH = Math.max.apply(Math, _this.arbitrarygGraphData.circles.map((item) => {
+                return item.y
+            })) - Math.min.apply(Math, _this.arbitrarygGraphData.circles.map((item) => {
+                return item.y
+            }));
+
+            let obj = {
+                name: 'arbitraryGraph',
+                rect: {
+                    width: rectW,
+                    height: rectH,
+                    x: _this.mouseDown.x,
+                    y: _this.mouseDown.y,
+                    circles: _this.arbitrarygGraphData.circles,
+                    points: _this.arbitrarygGraphData.points,
+                }
+            }
+
+            _this.dropNodes(Array.isArray(obj) ? obj : [obj], _this.mouseDown.x, _this.mouseDown.y);
+            Store.set('addingArbitraryGraph', false);
+            _this.dispatch('addingArbitraryGraph', false);
+            _this.arbitrarygGraphData.circles = [];
+            _this.arbitrarygGraphData.points = [];
+            _this.arbitrarygGraphData.close = false;
+            _this.arbitrarygGraphData.oIndex = -1;
+        }
+    };
+    Topology.prototype.checkNodeOfClickType = function (node) {
+        let isClickTpye = false
+        const arr = node.events
+        for (let i = 0; i < arr.length; i++) {
+            if (arr[i].type === 0 || arr[i].type === 1) {
+                isClickTpye = true
+                break
+            }
+        }
+
+        if (window.location.pathname.includes('workspace') || (isClickTpye === true && !window.location.pathname.includes('workspace'))) {
+            return false
+        }
+
+        return true
+    };
+    return Topology;
+}(Common));
+
+function Circle(x, y) {
+    this.x = x;
+    this.y = y;
+    this.radius = 4;
+    this.color = "#339fff";
+    this.isSelected = false;
+}
+
+export {Topology};
+//# sourceMappingURL=core.js.map