dcim-topology2d 1.1.3 → 3.0.2

package/core/src/calling.js

@@ -1,30 +1,33 @@
 import {Store} from 'le5le-store';
+import {DefalutOptions} from './options';
 import {Offscreen} from './offscreen';
 import {RenderLayer} from './renderLayer';
-import {Node} from './models';
+import {Node, Point, TopologyData, Rect} from './models';
 import {s8, getRect, formatPadding} from './utils';
-import { useStore, clearStore } from './store'
 var Calling = (function () {
     function Calling(parent, options) {
         var _this = this;
+        this.data = new TopologyData();
         this.lastTranlated = {x: 0, y: 0};
         this.rendering = false;
         this.id = s8();
-        this.store = useStore(this.id);
+        Store.set(this.generateStoreKey('topology-data'), this.data);
         if (!options) {
             options = {};
         }
-        options.type = this.store.options.isFitview ? 'titLogo' : 'bottLogo';
-        Object.assign(this.store.options, options);
+        var font = Object.assign({}, DefalutOptions.font, options.font);
+        options.font = font;
+        this.options = Object.assign({}, DefalutOptions, options);
         if (typeof parent === 'string') {
-            this.store.parentElem = document.getElementById(parent);
+            this.parentElem = document.getElementById(parent);
         } else {
-            this.store.parentElem = parent;
+            this.parentElem = parent;
         }
-        this.store.parentElem.style.position = 'relative';
-        this.store.parentElem.style.overflow = 'auto';
-        this.offscreen = new Offscreen(this.id);
-        this.canvas = new RenderLayer(this.id);
+        this.parentElem.style.position = 'relative';
+        this.parentElem.style.overflow = 'auto';
+        var id = this.id;
+        this.offscreen = new Offscreen(this.parentElem, this.options, id);
+        this.canvas = new RenderLayer(this.parentElem, this.options, id);
         this.subcribeImage = Store.subscribe(this.generateStoreKey('LT:imageLoaded'), function () {
             if (_this.imageTimer) {
                 clearTimeout(_this.imageTimer);
@@ -65,19 +68,19 @@ var Calling = (function () {
             data = JSON.parse(data);
         }
         this.openCount = 0
-        this.store.data.scale = data.scale || 1;
-        this.store.data.pens = [];
+        this.data.scale = data.scale || 1;
+        this.data.pens = [];
         // for old data.
         if (data.nodes) {
             for (var _i = 0, _a = data.nodes; _i < _a.length; _i++) {
                 var item = _a[_i];
                 item.rect.x = 0;
                 item.rect.y = 0;
-                this.store.data.pens.push(new Node(item));
+                this.data.pens.push(new Node(item));
             }
             for (var _b = 0, _c = data.lines; _b < _c.length; _b++) {
                 var item = _c[_b];
-                this.store.data.pens.push(new Line(item));
+                this.data.pens.push(new Line(item));
             }
         }
         // end.
@@ -85,32 +88,32 @@ var Calling = (function () {
             for (var _d = 0, _e = data.pens; _d < _e.length; _d++) {
                 var item = _e[_d];
                 if (!item.from) {
-                    this.store.data.pens.push(new Node(item));
+                    this.data.pens.push(new Node(item));
                 } else {
-                    this.store.data.pens.push(new Line(item));
+                    this.data.pens.push(new Line(item));
                 }
             }
         }
-        this.store.data.bkImageRect = data.bkImageRect || null;
-        this.store.data.bkImage = data.bkImage || '';
-        this.store.data.mqttOptions = data.mqttOptions || {clientId: s8()};
-        this.store.data.mqttTopics = data.mqttTopics || '';
+        this.data.bkImageRect = data.bkImageRect || null;
+        this.data.bkImage = data.bkImage || '';
+        this.data.mqttOptions = data.mqttOptions || {clientId: s8()};
+        this.data.mqttTopics = data.mqttTopics || '';
         if (typeof data.data === 'object') {
-            this.store.data.data = data.data;
+            this.data.data = data.data;
         } else {
-            this.store.data.data = data.data || '';
+            this.data.data = data.data || '';
         }
-        this.store.parentElem.scrollLeft = 0;
-        this.store.parentElem.scrollTop = 0;
+        this.parentElem.scrollLeft = 0;
+        this.parentElem.scrollTop = 0;
         this.overflow();
         this.render(true);
     };
     Calling.prototype.overflow = function () {
-        this.store.options.isFitview ? this.fitView() : this.bottomView();
+        this.options.isFitview ? this.fitView() : this.bottomView();
     };
     Calling.prototype.getRect = function (pens) {
         if (!pens) {
-            pens = this.store.data.pens;
+            pens = this.data.pens;
         }
         return getRect(pens);
     };
@@ -121,7 +124,7 @@ var Calling = (function () {
         }
         var offsetX = x - this.lastTranlated.x;
         var offsetY = y - this.lastTranlated.y;
-        for (var _i = 0, _a = this.store.data.pens; _i < _a.length; _i++) {
+        for (var _i = 0, _a = this.data.pens; _i < _a.length; _i++) {
             var item = _a[_i];
             item.translate(offsetX, offsetY);
         }
@@ -132,14 +135,13 @@ var Calling = (function () {
     //   > 1, expand
     //   < 1, reduce
     Calling.prototype.scale = function (scale, center, w, h) {
-        if (this.store.data.scale * scale < this.store.options.minScale ||
-                this.store.data.scale * scale > this.store.options.maxScale) {
+        if (this.data.scale * scale < this.options.minScale ||
+                this.data.scale * scale > this.options.maxScale) {
             return;
         }
-        this.store.data.scale *= scale;
+        this.data.scale *= scale;
         !center && (center = this.getRect().center);
-        center.type = this.store.options.type;
-        for (var _i = 0, _a = this.store.data.pens; _i < _a.length; _i++) {
+        for (var _i = 0, _a = this.data.pens; _i < _a.length; _i++) {
             var item = _a[_i];
             item.scale(scale, center, w, h);
         }
@@ -148,7 +150,7 @@ var Calling = (function () {
         var rect = this.getRect();
         var viewCenter = this.getViewCenter(padding);
         var center = rect.center;
-        var parentElem = this.store.parentElem;
+        var parentElem = this.canvas.parentElem;
         var x = (parentElem.offsetWidth - rect.width) / 2;
         var y = parentElem.scrollHeight - rect.height;
         var w = parentElem.offsetWidth / rect.width;
@@ -158,7 +160,7 @@ var Calling = (function () {
             ratio = h;
         }
         this.canvas.canvas.style.transform = `translate(${x}px, ${y}px)`;
-        for (var _i = 0, _a = this.store.data.pens; _i < _a.length; _i++) {
+        for (var _i = 0, _a = this.data.pens; _i < _a.length; _i++) {
             var item = _a[_i];
             if(item.rect.x > 0) {
                 item.rect.ex = item.rect.ex - item.rect.x;
@@ -179,7 +181,7 @@ var Calling = (function () {
         var viewCenter = this.getViewCenter(padding);
         var center = rect.center;
         this.translate(viewCenter.x - center.x, viewCenter.y - center.y);
-        var parentElem = this.store.parentElem;
+        var parentElem = this.canvas.parentElem;
         var x = (parentElem.scrollWidth - parentElem.offsetWidth) / 2;
         var y = (parentElem.scrollHeight - parentElem.offsetHeight) / 2;
         parentElem.scrollTo(x, y);
@@ -189,7 +191,7 @@ var Calling = (function () {
         if (!this.hasView())
             return;
         // 1. 重置画布尺寸为容器尺寸
-        var parentElem = this.store.parentElem;
+        var parentElem = this.canvas.parentElem;
         var width = parentElem.offsetWidth, height = parentElem.offsetHeight;
         this.resize({
             width: width,
@@ -198,7 +200,7 @@ var Calling = (function () {
         // 2. 图形居中
         this.centerView(viewPadding);
         // 3. 获取设置的留白值
-        var padding = formatPadding(viewPadding || this.store.options.viewPadding);
+        var padding = formatPadding(viewPadding || this.options.viewPadding);
         // 4. 获取图形尺寸
         var rect = this.getRect();
         // 6. 计算缩放比
@@ -215,7 +217,7 @@ var Calling = (function () {
         return !(rect.width === 99999 || rect.height === 99999);
     };
     Calling.prototype.getViewCenter = function (viewPadding) {
-        var padding = formatPadding(viewPadding || this.store.options.viewPadding);
+        var padding = formatPadding(viewPadding || this.options.viewPadding);
         var _a = this.canvas, width = _a.width, height = _a.height;
         return {
             x: (width - padding[1] - padding[3]) / 2 + padding[3],
@@ -226,7 +228,6 @@ var Calling = (function () {
         return this.id + "-" + key;
     };
     Calling.prototype.destroy = function () {
-        clearStore(this.store);
         this.subcribeImage.unsubscribe();
         this.canvas.destroy();
         //优化

package/core/src/canvas.d.ts

@@ -1,10 +1,15 @@
+import { TopologyData } from './models/data';
+import { Options } from './options';
 import { Layer } from './layer';
 export declare class Canvas extends Layer {
+    parentElem: HTMLElement;
+    options: Options;
     static dpiRatio: number;
+    protected data: TopologyData;
     canvas: HTMLCanvasElement;
     width: number;
     height: number;
-    constructor(TID: String);
+    constructor(parentElem: HTMLElement, options: Options, TID: String);
     resize(size?: {
         width: number;
         height: number;

package/core/src/canvas.js

@@ -13,50 +13,51 @@ var __extends = (this && this.__extends) || (function () {
 })();
 import { Store } from 'le5le-store';
 import { Layer } from './layer';
-import { commonStore } from './store'
 var Canvas = /** @class */ (function (_super) {
     __extends(Canvas, _super);
-    function Canvas(TID) {
+    function Canvas(parentElem, options, TID) {
+        if (options === void 0) { options = {}; }
         var _this = _super.call(this, TID) || this;
+        _this.parentElem = parentElem;
+        _this.options = options;
         _this.canvas = document.createElement('canvas');
-        _this.width = commonStore[TID].parentElem.clientWidth;
-        _this.height = commonStore[TID].parentElem.clientHeight;
+        _this.width = parentElem.clientWidth;
+        _this.height = parentElem.clientHeight;
+        _this.data = Store.get(_this.generateStoreKey('topology-data'));
         _this.canvas.style.position = 'absolute';
         _this.canvas.style.left = '0';
         _this.canvas.style.top = '0';
         _this.canvas.style.outline = 'none';
         if (!Canvas.dpiRatio) {
-            if (!commonStore[TID].options.extDpiRatio && commonStore[TID].options.extDpiRatio !== 0) {
+            if (!options.extDpiRatio && options.extDpiRatio !== 0) {
                 if (window.devicePixelRatio > 1) {
-                    commonStore[TID].options.extDpiRatio = 0.25;
+                    options.extDpiRatio = 0.25;
                 }
                 else {
-                    commonStore[TID].options.extDpiRatio = 0;
+                    options.extDpiRatio = 0;
                 }
             }
-            Canvas.dpiRatio = window.devicePixelRatio + commonStore[TID].options.extDpiRatio;
+            Canvas.dpiRatio = window.devicePixelRatio + options.extDpiRatio;
         }
         return _this;
     }
     Canvas.prototype.resize = function (size) {
         if (size) {
-            this.width = size.width  | 0;
+            this.width = size.width | 0;
             this.height = size.height | 0;
         }
         else {
-            const TID = this.TID;
-            if(!commonStore[TID] || !commonStore[TID].options) return;
-            if (commonStore[TID].options.width && commonStore[TID].options.width !== 'auto') {
-                this.width = commonStore[TID].options.width;
+            if (this.options.width && this.options.width !== 'auto') {
+                this.width = this.options.width;
             }
             else {
-                this.width = commonStore[TID].parentElem.clientWidth;
+                this.width = this.parentElem.clientWidth;
             }
-            if (commonStore[TID].options.height && commonStore[TID].options.height !== 'auto') {
-                this.height = commonStore[TID].options.height;
+            if (this.options.height && this.options.height !== 'auto') {
+                this.height = this.options.height;
             }
             else {
-                this.height = commonStore[TID].parentElem.clientHeight;
+                this.height = this.parentElem.clientHeight;
             }
         }
         this.canvas.style.width = this.width + 'px';

package/core/src/common.d.ts

@@ -4,9 +4,9 @@ import { DivLayer } from './divLayer';
 import { AnimateLayer } from './animateLayer';
 import { RenderLayer } from './renderLayer';
 import { Offscreen } from './offscreen';
-import {Line, Node, Pen, Point, Rect} from './models';
+import {Line, Node, Pen, Point, Rect, TopologyData} from './models';
 import {Padding, Options} from './options';
-import { visualization2DStore } from './store'
+import { Socket } from './socket';
 declare enum MoveInType {
   None = 0,
   Line = 1,
@@ -21,7 +21,8 @@ declare enum MoveInType {
 }
 export declare class Common {
   //constructor(parent: HTMLElement, options: Options);
-  store: visualization2DStore;
+  options: Options;
+  data: TopologyData;
   moveInType: MoveInType;
   id: String;
   parentElem: HTMLElement;
@@ -32,6 +33,7 @@ export declare class Common {
   input: HTMLTextAreaElement;
   tipMarkdown: HTMLElement;
   tipElem: HTMLElement;
+  socket: Socket;
   private subcribe;
   private subcribeRender;
   private subcribeImage;
@@ -56,8 +58,6 @@ export declare class Common {
     y: number;
     restore?: boolean;
   };
-  renderTimer: number;
-  lastRender: number;
   lastTranlated: {
     x: number;
     y: number;