dcim-topology2d 2.2.5 → 3.0.2

package/core/src/activeLayer.js

@@ -12,16 +12,22 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 import { Store } from 'le5le-store';
-import { PenType, Node, Line, Rect, Point, Lock } from './models';
+import { PenType } from './models/pen';
+import { Node } from './models/node';
+import { Line } from './models/line';
+import { Rect } from './models/rect';
+import { Point } from './models/point';
+import { Lock } from './models/status';
 import { drawLineFns } from './middles';
 import { getBezierPoint } from './middles/lines/curve';
 import { Layer } from './layer';
 import { flatNodes } from './utils';
-import { commonStore } from './store'
 var ActiveLayer = /** @class */ (function (_super) {
     __extends(ActiveLayer, _super);
-    function ActiveLayer(TID) {
+    function ActiveLayer(options, TID) {
+        if (options === void 0) { options = {}; }
         var _this = _super.call(this, TID) || this;
+        _this.options = options;
         _this.rotateCPs = [];
         _this.sizeCPs = [];
         _this.pens = [];
@@ -36,11 +42,11 @@ var ActiveLayer = /** @class */ (function (_super) {
         // nodes移动时，停靠点的参考位置
         _this.dockWatchers = [];
         _this.rotating = false;
+        _this.data = Store.get(_this.generateStoreKey('topology-data'));
         Store.set(_this.generateStoreKey('LT:ActiveLayer'), _this);
         return _this;
     }
     ActiveLayer.prototype.calcControlPoints = function () {
-        var globalStore = commonStore[this.TID];
         if (this.pens.length === 1 && this.pens[0] instanceof Node) {
             this.rect = this.pens[0].rect;
             this.sizeCPs = this.pens[0].rect.toPoints();
@@ -68,7 +74,7 @@ var ActiveLayer = /** @class */ (function (_super) {
                     }
                 }
             }
-            if (globalStore.options.hideRotateCP || this.pens[0].hideRotateCP) {
+            if (this.options.hideRotateCP || this.pens[0].hideRotateCP) {
                 this.rotateCPs = [new Point(-1000, -1000), new Point(-1000, -1000)];
             }
             return;
@@ -96,10 +102,9 @@ var ActiveLayer = /** @class */ (function (_super) {
         this.rect = new Rect(x1, y1, x2 - x1, y2 - y1);
         this.sizeCPs = [new Point(x1, y1), new Point(x2, y1), new Point(x2, y2), new Point(x1, y2)];
         this.rotateCPs = [new Point(x1 + (x2 - x1) / 2, y1 - 35), new Point(x1 + (x2 - x1) / 2, y1)];
-        if (globalStore.options.hideRotateCP) {
+        if (this.options.hideRotateCP) {
             this.rotateCPs = [new Point(-1000, -1000), new Point(-1000, -1000)];
         }
-        globalStore = null;
     };
     ActiveLayer.prototype.locked = function () {
         for (var _i = 0, _a = this.pens; _i < _a.length; _i++) {
@@ -110,19 +115,6 @@ var ActiveLayer = /** @class */ (function (_super) {
         }
         return true;
     };
-    ActiveLayer.prototype.getCenterPoints = function (points) {
-        if(!points) points = this.initialSizeCPs;
-        const xs = points.map(p => p.x);
-        const ys = points.map(p => p.y);
-        const minX = Math.min(...xs);
-        const maxX = Math.max(...xs);
-        const minY = Math.min(...ys);
-        const maxY = Math.max(...ys);
-        return {
-            x: (minX + maxX) / 2,
-            y: (minY + maxY) / 2
-        };
-    };
     ActiveLayer.prototype.getPoints = function () {
         var points = [];
         for (var _i = 0, _a = this.pens; _i < _a.length; _i++) {
@@ -200,10 +192,10 @@ var ActiveLayer = /** @class */ (function (_super) {
         }
         var offsetX = p2.x - p1.x;
         var offsetY = p2.y - p1.y;
-        if (commonStore[this.TID].options.onlySizeX) {
+        if (this.options.onlySizeX) {
             offsetY = 0;
         }
-        if (commonStore[this.TID].options.onlySizeY) {
+        if (this.options.onlySizeY) {
             offsetX = 0;
         }
         var lines = [];
@@ -232,16 +224,16 @@ var ActiveLayer = /** @class */ (function (_super) {
                 default:
                     if (!item.onlySizeX) {
 
-                        var sizeX = (this.nodeRects[i].width + offsetX) / item.rect.width;
+                        var sizeX = (this.nodeRects[i].width + offsetX)/item.rect.width;
 
                         var nodeRectsCircles = this.nodeRects[i].circles;
 
-                        item.rect.width = this.nodeRects[i].width + offsetX;
+                        item.rect.width =  this.nodeRects[i].width + offsetX;
 
                     }
                     if (!item.onlySizeY) {
 
-                        var sizeY = (this.nodeRects[i].height + offsetY) / item.rect.height;
+                        var sizeY = (this.nodeRects[i].height + offsetY)/item.rect.height;
 
                         item.rect.height = this.nodeRects[i].height + offsetY;
 
@@ -291,7 +283,6 @@ var ActiveLayer = /** @class */ (function (_super) {
         if (this.nodeRects.length !== this.pens.length) {
             return;
         }
-        var globalStore = commonStore[this.TID];
         var i = 0;
         for (var _i = 0, _a = this.pens; _i < _a.length; _i++) {
             var item = _a[_i];
@@ -310,7 +301,7 @@ var ActiveLayer = /** @class */ (function (_super) {
                 item.calcChildrenRect();
                 if (item.parentId && !item.locked) {
                     var parent_1 = void 0;
-                    for (var _c = 0, _d = globalStore.data.pens; _c < _d.length; _c++) {
+                    for (var _c = 0, _d = this.data.pens; _c < _d.length; _c++) {
                         var n = _d[_c];
                         if (n.id === item.parentId) {
                             parent_1 = n;
@@ -319,12 +310,18 @@ var ActiveLayer = /** @class */ (function (_super) {
                         }
                     }
                 }
+                if(item.name == 'arbitraryGraph') {
+                    for(let i = 0, circles = item.rect.circles; i<circles.length; i++) {
+                        circles[i].x = circles[i].x + offsetX;
+                        circles[i].y = circles[i].y + offsetY;
+                    }
+                }
             }
             if (item instanceof Line && item.from) {
                 var offsetX_1 = this.nodeRects[i].x + x - item.from.x;
                 var offsetY_1 = this.nodeRects[i].y + y - item.from.y;
                 if (item.parentId) {
-                    var items = find(item.parentId, globalStore.data.pens);
+                    var items = find(item.parentId, this.data.pens);
                     items.forEach(function (l) {
                         l.translate(offsetX_1, offsetY_1);
                     });
@@ -341,7 +338,7 @@ var ActiveLayer = /** @class */ (function (_super) {
     ActiveLayer.prototype.getLinesOfNode = function (node) {
         var result = [];
         var nodesLines = flatNodes([node]);
-        for (var _i = 0, _a = commonStore[this.TID].data.pens; _i < _a.length; _i++) {
+        for (var _i = 0, _a = this.data.pens; _i < _a.length; _i++) {
             var pen = _a[_i];
             if (!(pen instanceof Line)) {
                 continue;
@@ -368,10 +365,9 @@ var ActiveLayer = /** @class */ (function (_super) {
         if (!pens) {
             pens = this.pens;
         }
-        var globalStore = commonStore[this.TID];
         var nodesLines = flatNodes(pens);
         var lines = [];
-        nodesLines.lines.push.apply(nodesLines.lines, globalStore.data.pens.filter(function (pen) { return pen.type; }));
+        nodesLines.lines.push.apply(nodesLines.lines, this.data.pens.filter(function (pen) { return pen.type; }));
         for (var _i = 0, _a = nodesLines.lines; _i < _a.length; _i++) {
             var line = _a[_i];
             for (var _b = 0, _c = nodesLines.nodes; _b < _c.length; _b++) {
@@ -387,7 +383,7 @@ var ActiveLayer = /** @class */ (function (_super) {
                     line.to.y = item.rotatedAnchors[line.to.anchorIndex].y;
                     ++cnt;
                 }
-                if (cnt && !globalStore.data.manualCps) {
+                if (cnt && !this.data.manualCps) {
                     line.calcControlPoints();
                 }
                 line.textRect = null;
@@ -396,7 +392,6 @@ var ActiveLayer = /** @class */ (function (_super) {
             }
         }
         Store.set(this.generateStoreKey('LT:updateLines'), lines);
-        globalStore = null;
     };
     ActiveLayer.prototype.offsetRotate = function (angle) {
         this.rotating = true;
@@ -497,9 +492,7 @@ var ActiveLayer = /** @class */ (function (_super) {
     };
     ActiveLayer.prototype.render = function (ctx) {
         var _this = this;
-        if (!commonStore || !commonStore[_this.TID]) return;
-        var globalStore = commonStore[_this.TID];
-        if (globalStore.data.locked > Lock.Readonly) {
+        if (this.data.locked > Lock.Readonly) {
             return;
         }
 
@@ -515,7 +508,7 @@ var ActiveLayer = /** @class */ (function (_super) {
             this.calcControlPoints();
         }
         ctx.save();
-        ctx.strokeStyle = globalStore.options.activeColor;
+        ctx.strokeStyle = this.options.activeColor;
         ctx.fillStyle = '#fff';
         ctx.lineWidth = 1;
         var TID = this.TID;
@@ -525,17 +518,17 @@ var ActiveLayer = /** @class */ (function (_super) {
                 var tmp = new Node(item, true);
                 tmp.setTID(TID);
                 tmp.data = null;
-                tmp.fillStyle = item.focusFillStyle ? item.focusFillStyle : null; //获取聚焦背景色
+                tmp.fillStyle = null;
                 tmp.bkType = 0;
                 tmp.icon = '';
                 tmp.image = '';
-                tmp.text = item.text;
-                if (window.location.pathname.includes('workspace')) {
+                tmp.text = '';
+                if(window.location.pathname.includes('workspace')){
                     if (tmp.strokeStyle !== 'transparent') {
                         tmp.strokeStyle = '#ffffff';
                         tmp.lineWidth += 2;
                         tmp.render(ctx);
-                        tmp.strokeStyle = globalStore.options.activeColor;
+                        tmp.strokeStyle = this.options.activeColor;
                         tmp.lineWidth -= 2;
                     }
                 }
@@ -550,11 +543,11 @@ var ActiveLayer = /** @class */ (function (_super) {
                     bk.strokeStyle = '#ffffff';
                     bk.render(ctx);
                 }
-                tmp.strokeStyle = globalStore.options.activeColor;
-                tmp.fromArrowColor = globalStore.options.activeColor;
-                tmp.toArrowColor = globalStore.options.activeColor;
+                tmp.strokeStyle = this.options.activeColor;
+                tmp.fromArrowColor = this.options.activeColor;
+                tmp.toArrowColor = this.options.activeColor;
                 tmp.render(ctx);
-                if (!globalStore.data.locked && !item.locked) {
+                if (!this.data.locked && !item.locked) {
                     drawLineFns[item.name].drawControlPointsFn(ctx, item);
                 }
             }
@@ -580,7 +573,7 @@ var ActiveLayer = /** @class */ (function (_super) {
         ctx.closePath();
         ctx.stroke();
         ctx.restore();
-        if (globalStore.data.locked || this.locked()) {
+        if (this.data.locked || this.locked()) {
             ctx.restore();
             return;
         }
@@ -596,7 +589,7 @@ var ActiveLayer = /** @class */ (function (_super) {
         ctx.fill();
         ctx.stroke();
         // Draw size control points.绘制拖拽框四角的点
-        if (!globalStore.options.hideSizeCP && (this.pens.length > 1 || !this.pens[0].hideSizeCP)) {
+        if (!this.options.hideSizeCP && (this.pens.length > 1 || !this.pens[0].hideSizeCP)) {
             ctx.lineWidth = 1;
             for (var _b = 0, _c = this.sizeCPs; _b < _c.length; _b++) {
                 var item = _c[_b];
@@ -613,7 +606,6 @@ var ActiveLayer = /** @class */ (function (_super) {
             }
         }
         ctx.restore();
-        globalStore = null;
     };
     ActiveLayer.prototype.getDockWatchers = function () {
         if (this.pens.length === 1) {
@@ -627,61 +619,61 @@ var ActiveLayer = /** @class */ (function (_super) {
         this.dockWatchers = this.rect.toPoints();
         this.dockWatchers.unshift(this.rect.center);
     };
-    ActiveLayer.prototype.handleArbitrayGraphSize = function (type, item, offsetX, offsetY, l, sizeX, sizeY, nodeRectsCircles) {
-        if (item.name !== 'arbitraryGraph') return
+    ActiveLayer.prototype.handleArbitrayGraphSize = function (type,item, offsetX, offsetY, l, sizeX, sizeY, nodeRectsCircles) {
+        if(item.name !== 'arbitraryGraph') return
 
-        switch (type) {
+       switch (type) {
 
             case 0:
 
-                for (let c = 0, length = item.rect.circles.length; c < length; c++) {
+                for(let c=0, length = item.rect.circles.length; c<length; c++ ) {
 
-                    item.rect.circles[c].x = item.rect.circles[c].x * sizeX + item.rect.ex * (1 - sizeX);
+                    item.rect.circles[c].x=item.rect.circles[c].x*sizeX+item.rect.ex*(1-sizeX);
 
-                    item.rect.circles[c].y = item.rect.circles[c].y * sizeY + item.rect.ey * (1 - sizeY);
+                    item.rect.circles[c].y=item.rect.circles[c].y*sizeY+item.rect.ey*(1-sizeY);
 
                 }
 
-                break;
+            break;
 
             case 1:
 
-                for (let c = 0, length = item.rect.circles.length; c < length; c++) {
+                for(let c=0, length = item.rect.circles.length; c<length; c++ ) {
 
-                    item.rect.circles[c].x = item.rect.circles[c].x * sizeX + item.rect.x * (1 - sizeX);
+                    item.rect.circles[c].x=item.rect.circles[c].x*sizeX+item.rect.x*(1-sizeX);
 
-                    item.rect.circles[c].y = item.rect.circles[c].y * sizeY + item.rect.ey * (1 - sizeY);
+                    item.rect.circles[c].y=item.rect.circles[c].y*sizeY+item.rect.ey*(1-sizeY);
 
                 }
 
-                break;
+            break;
 
             case 2:
 
-                for (let c = 0, length = item.rect.circles.length; c < length; c++) {
-
-                    item.rect.circles[c].x = item.rect.circles[c].x * sizeX + item.rect.x * (1 - sizeX);
+                    for(let c=0, length = item.rect.circles.length; c<length; c++ ) {
 
-                    item.rect.circles[c].y = item.rect.circles[c].y * sizeY + item.rect.y * (1 - sizeY);
+                            item.rect.circles[c].x=item.rect.circles[c].x*sizeX+item.rect.x*(1-sizeX);
+                        
+                            item.rect.circles[c].y=item.rect.circles[c].y*sizeY+item.rect.y*(1-sizeY);
 
-                }
+                    }
 
-                break;
+            break;
 
             case 3:
 
-                for (let c = 0, length = item.rect.circles.length; c < length; c++) {
+                for(let c=0, length = item.rect.circles.length; c<length; c++ ) {
 
-                    item.rect.circles[c].x = item.rect.circles[c].x * sizeX + item.rect.ex * (1 - sizeX);
+                    item.rect.circles[c].x=item.rect.circles[c].x*sizeX+item.rect.ex*(1-sizeX);
 
-                    item.rect.circles[c].y = item.rect.circles[c].y * sizeY + item.rect.y * (1 - sizeY);
+                    item.rect.circles[c].y=item.rect.circles[c].y*sizeY+item.rect.y*(1-sizeY);
 
                 }
 
-                break
+            break
         }
     };
     return ActiveLayer;
 }(Layer));
 export { ActiveLayer };
-//# sourceMappingURL=activeLayer.js.map
+//# sourceMappingURL=activeLayer.js.map

package/core/src/animateLayer.d.ts

@@ -1,13 +1,17 @@
-import { Pen, Line } from './models';
+import { Pen } from './models/pen';
+import { Line } from './models/line';
+import { TopologyData } from './models/data';
+import { Options } from './options';
 import { Layer } from './layer';
 export declare class AnimateLayer extends Layer {
-    // @ts-ignore
+    options: Options;
+    protected data: TopologyData;
     pens: Map<any, any>;
     private timer;
     private lastNow;
     private subscribeUpdate;
     private subscribePlay;
-    constructor(TID: String);
+    constructor(options: Options, TID: String);
     getAnimateLine(item: Pen): Line;
     findLine(pen: Pen): Pen;
     readyPlay(tag?: string, auto?: boolean, pens?: Pen[]): void;

package/core/src/animateLayer.js

@@ -12,19 +12,23 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 import { Store } from 'le5le-store';
-import { PenType, Node, Line } from './models';
+import { PenType } from './models/pen';
+import { Node } from './models/node';
+import { Line } from './models/line';
 import { Layer } from './layer';
 import { s8 } from './utils';
-import { commonStore } from './store'
 var AnimateLayer = /** @class */ (function (_super) {
     __extends(AnimateLayer, _super);
-    function AnimateLayer(TID) {
+    function AnimateLayer(options, TID) {
+        if (options === void 0) { options = {}; }
         var _this = _super.call(this, TID) || this;
+        _this.options = options;
         _this.pens = new Map();
         _this.lastNow = 0;
+        _this.data = Store.get(_this.generateStoreKey('topology-data'));
         Store.set(_this.generateStoreKey('LT:AnimateLayer'), _this);
-        if (!commonStore[TID].options.animateColor) {
-            commonStore[TID].options.animateColor = '#ff6600';
+        if (!_this.options.animateColor) {
+            _this.options.animateColor = '#ff6600';
         }
         _this.subscribeUpdate = Store.subscribe(_this.generateStoreKey('LT:updateLines'), function (lines) {
             _this.updateLines(lines);
@@ -51,7 +55,7 @@ var AnimateLayer = /** @class */ (function (_super) {
         l.animateStart = item.animateStart;
         l.lineCap = 'round';
         l.fillStyle = '#fff';
-        l.strokeStyle = l.animateColor || commonStore[this.TID].options.animateColor;
+        l.strokeStyle = l.animateColor || this.options.animateColor;
         l.length = l.getLen();
         if (!l.fromArrowColor) {
             l.fromArrowColor = l.strokeStyle || '#222';
@@ -62,7 +66,7 @@ var AnimateLayer = /** @class */ (function (_super) {
         return l;
     };
     AnimateLayer.prototype.findLine = function (pen) {
-        for (var _i = 0, _a = commonStore[this.TID].data.pens; _i < _a.length; _i++) {
+        for (var _i = 0, _a = this.data.pens; _i < _a.length; _i++) {
             var item = _a[_i];
             if (item.id === pen.data) {
                 return item;
@@ -71,13 +75,11 @@ var AnimateLayer = /** @class */ (function (_super) {
     };
     AnimateLayer.prototype.readyPlay = function (tag, auto, pens) {
         var _this = this;
-        if(!commonStore || !commonStore[_this.TID]) return;
         var readyPens = new Map();
         if (!pens) {
-            pens = commonStore[_this.TID].data.pens;
+            pens = this.data.pens;
         }
         pens.forEach(function (pen) {
-            if(!(pen instanceof Node)) pen = new Node(pen);
             pen.setTID(_this.TID);
             if (!pen.visible || readyPens.get(pen.id)) {
                 return;

package/core/src/calling.d.ts

@@ -2,9 +2,12 @@
 import {Options, Padding} from './options';
 import { Offscreen } from './offscreen';
 import { RenderLayer } from './renderLayer';
-import { Pen, Point, Rect } from './models';
+import { Pen, Node, Point, TopologyData, Rect } from './models';
 export declare class Calling {
     id: String;
+    data: TopologyData;
+    options: Options;
+    parentElem: HTMLElement;
     canvas: RenderLayer;
     offscreen: Offscreen;
     private subcribeImage;