dcim-topology2d 1.0.3 → 1.1.1

package/core/src/divLayer.d.ts

@@ -1,11 +1,6 @@
-import { Options } from './options';
-import { Node } from './models/node';
-import { TopologyData } from './models/data';
+import { Node } from './models';
 import { Layer } from './layer';
 export declare class DivLayer extends Layer {
-    parentElem: HTMLElement;
-    options: Options;
-    protected data: TopologyData;
     canvas: HTMLDivElement;
     player: HTMLDivElement;
     curNode: Node;
@@ -40,7 +35,7 @@ export declare class DivLayer extends Layer {
     };
     private subcribe;
     private subcribeNode;
-    constructor(parentElem: HTMLElement, options: Options, TID: String);
+    constructor(TID: String);
     addDiv: (node: Node) => void;
     createPlayer(): void;
     getMediaCurrent(): void;

package/core/src/divLayer.js

@@ -25,16 +25,12 @@ import {Lock} from './models/status';
 import {PenType} from './models/pen';
 import {Layer} from './layer';
 import { setStyleForElementIdDiv, DomElements } from './utils'
+import { commonStore } from './store'
 var DivLayer = /** @class */ (function (_super) {
     __extends(DivLayer, _super);
 
-    function DivLayer(parentElem, options, TID) {
-        if (options === void 0) {
-            options = {};
-        }
+    function DivLayer(TID) {
         var _this = _super.call(this, TID) || this;
-        _this.parentElem = parentElem;
-        _this.options = options;
         _this.canvas = document.createElement('div');
         // _this.player = document.createElement('div');
         // _this.videos = {};
@@ -95,7 +91,6 @@ var DivLayer = /** @class */ (function (_super) {
                 }
             }
         };
-        _this.data = Store.get(_this.generateStoreKey('topology-data'));
         // if (!_this.options.playIcon) {
         //     _this.options.playIcon = 'iconfont icon-play';
         // }
@@ -114,7 +109,7 @@ var DivLayer = /** @class */ (function (_super) {
         _this.canvas.style.outline = 'none';
         _this.canvas.style.background = 'transparent';
         _this.canvas.setAttribute('class', 'canvas-point');
-        parentElem.appendChild(_this.canvas);
+        commonStore[TID].parentElem.appendChild(_this.canvas);
         // parentElem.appendChild(_this.player);
         //_this.createPlayer();
         _this.subcribe = Store.subscribe(_this.generateStoreKey('LT:addDiv'), _this.addDiv);
@@ -164,6 +159,7 @@ var DivLayer = /** @class */ (function (_super) {
 
     DivLayer.prototype.createPlayer = function () {
         var _this = this;
+        let options = commonStore[_this.TID].options;
         this.player.style.position = 'fixed';
         this.player.style.outline = 'none';
         this.player.style.top = '-99999px';
@@ -181,7 +177,7 @@ var DivLayer = /** @class */ (function (_super) {
         this.progressCurrent = document.createElement('div');
         this.loop = document.createElement('i');
         var fullScreen = document.createElement('i');
-        this.playBtn.className = this.options.playIcon;
+        this.playBtn.className = options.playIcon;
         this.playBtn.style.fontSize = '18px';
         this.playBtn.style.lineHeight = '20px';
         this.playBtn.style.cursor = 'pointer';
@@ -204,11 +200,11 @@ var DivLayer = /** @class */ (function (_super) {
         this.loop.style.margin = '0 10px';
         this.loop.style.padding = '2px 5px';
         this.loop.style.borderRadius = '2px';
-        this.loop.className = this.options.loopIcon;
+        this.loop.className = options.loopIcon;
         this.loop.style.fontSize = '18px';
         this.loop.style.lineHeight = '20px';
         this.loop.style.cursor = 'pointer';
-        fullScreen.className = this.options.fullScreenIcon;
+        fullScreen.className = options.fullScreenIcon;
         fullScreen.style.fontSize = '17px';
         fullScreen.style.lineHeight = '20px';
         fullScreen.style.cursor = 'pointer';
@@ -221,10 +217,10 @@ var DivLayer = /** @class */ (function (_super) {
         this.playBtn.onclick = function () {
             if (_this.media.paused) {
                 _this.media.play();
-                _this.playBtn.className = _this.options.pauseIcon;
+                _this.playBtn.className = options.pauseIcon;
             } else {
                 _this.media.pause();
-                _this.playBtn.className = _this.options.playIcon;
+                _this.playBtn.className = options.playIcon;
             }
         };
         this.progress.onclick = function (e) {
@@ -242,6 +238,7 @@ var DivLayer = /** @class */ (function (_super) {
         fullScreen.onclick = function () {
             _this.media.requestFullscreen();
         };
+        options = null;
     };
     DivLayer.prototype.getMediaCurrent = function () {
         if (!this.media) {
@@ -294,7 +291,7 @@ var DivLayer = /** @class */ (function (_super) {
         media.onended = function () {
             Store.set(_this.generateStoreKey('mediaEnd'), node);
             if (_this.media === media) {
-                _this.playBtn.className = _this.options.playIcon;
+                _this.playBtn.className = commonStore[_this.TID].options.playIcon;
             }
             _this.playNext(node.nextPlay);
         };
@@ -316,7 +313,7 @@ var DivLayer = /** @class */ (function (_super) {
         if (!next) {
             return;
         }
-        for (var _i = 0, _a = this.data.pens; _i < _a.length; _i++) {
+        for (var _i = 0, _a = commonStore[this.TID].data.pens; _i < _a.length; _i++) {
             var item = _a[_i];
             if (!(item instanceof Node)) {
                 continue;
@@ -345,7 +342,7 @@ var DivLayer = /** @class */ (function (_super) {
         return node.img;
     };
     DivLayer.prototype.setElemPosition = function (node, elem) {
-      setStyleForElementIdDiv(node, elem, this.data);
+      setStyleForElementIdDiv(node, elem, commonStore[this.TID].data);
     };
     DivLayer.prototype.removeDiv = function (item) {
         if (this.curNode && item.id === this.curNode.id) {
@@ -416,25 +413,30 @@ var DivLayer = /** @class */ (function (_super) {
         return txt;
     };
     DivLayer.prototype.resize = function (size) {
+        let store = commonStore[this.TID];
+        if(!store || !store.options) return;
         if (size) {
             this.canvas.style.width = size.width + 'px';
             this.canvas.style.height = size.height + 'px';
         } else {
-            if (this.options.width && this.options.width !== 'auto') {
-                this.canvas.style.width = this.options.width + 'px';
+            if (store.options.width && store.options.width !== 'auto') {
+                this.canvas.style.width = store.options.width + 'px';
             } else {
-                this.canvas.style.width = this.parentElem.clientWidth + 'px';
+                this.canvas.style.width = store.parentElem.clientWidth + 'px';
             }
-            if (this.options.height && this.options.height !== 'auto') {
-                this.canvas.style.height = this.options.height + 'px';
+            if (store.options.height && store.options.height !== 'auto') {
+                this.canvas.style.height = store.options.height + 'px';
             } else {
-                this.canvas.style.height = this.parentElem.clientHeight - 8 + 'px';
+                this.canvas.style.height = store.parentElem.clientHeight - 8 + 'px';
             }
         }
+        store = null;
     };
     DivLayer.prototype.render = function () {
-        for (var _i = 0, _a = this.data.pens; _i < _a.length; _i++) {
+        if(commonStore[this.TID] || !commonStore[this.TID].data) return;
+        for (var _i = 0, _a = commonStore[this.TID].data.pens; _i < _a.length; _i++) {
             var item = _a[_i];
+            if(!(item instanceof Node)) item = new Node(item);
             if (!item.getTID()) {
                 item.setTID(this.TID);
             }
@@ -457,8 +459,6 @@ var DivLayer = /** @class */ (function (_super) {
         this.canvas.ondragover = null;
         this.canvas.ondrop = null;
         this.canvas.onwheel = null;
-
-        this.data = null;
         //end
     };
 

package/core/src/healps/changeData.d.ts

@@ -5,4 +5,4 @@ export declare function setNodeEvents(item: any[], pen: Pen): void;
 export declare function setControlData(pen: Pen, syncData: Node): void;
 export declare function getControlNode(item: any, data: any): Node;
 export declare function getDetailData(data: Node): void;
-export declare function setStatisticalData(pen: Pen, data: any): Node;
+export declare function setStatisticalData(pen: Pen, staticForType: string, chartData: any): Node;

package/core/src/healps/changeData.js

@@ -96,22 +96,26 @@ export function setConfItemNode(pen, syn_synata) {
             const { echartDataValue } = syn_synata;
             //const seriesData = pen.data.echarts.option.series.length > 1 ? echartDataValue : echartData
             const seriesData = echartDataValue;
-            if(seriesData) pen.data.echarts = setStatisticalData(pen, seriesData)
+            const chartData = seriesData && Object.keys(seriesData).length && seriesData[pen.data.params.id];
+            const staticForType = pen.data.params.staticForType ? pen.data.params.staticForType : '';//统计类型：日，周，月，年
+            if(staticForType && (!chartData || !chartData[`${staticForType}_Data`]) || !chartData) {
+                // 无效配置
+            }else {
+                pen.data.echarts = setStatisticalData(pen, staticForType, chartData);
+            }
         }
     }
     return pen
 }
-export function setStatisticalData(pen, echartData) {
+export function setStatisticalData(pen, staticForType, chartData) {
     const node = Object.assign({}, pen);
     const displayMode = parseInt(node.data.echarts.option.displayMode);
-    const chartData = echartData[node.data.params.id];
-    if ((displayMode === 1 || displayMode === 2) && chartData){ // 折线图，柱状图
+    const chartOptions = staticForType ? chartData[`${staticForType}_Data`] : chartData;
+    if (displayMode === 1 || displayMode === 2){ // 折线图，柱状图
         //const xData = [], seriesData = [];
-        const staticForType = node.data.params.staticForType ? node.data.params.staticForType : '';//统计类型：日，周，月，年
         const seriesNodes = node.data.echarts.option.series;
         // 双轴曲线
         if(seriesNodes.length > 1 || node.data.params.curveNum > 1){
-            const chartOptions = staticForType ? chartData[`${staticForType}_Data`] : chartData;
             const legendData = [];
             if(!chartOptions) return;
             node.data.echarts.option.xAxis[0].data = chartOptions.XData;
@@ -130,17 +134,32 @@ export function setStatisticalData(pen, echartData) {
                 node.data.echarts.option.series = []
             }
         }else {
-            const chartOptions = staticForType ? chartData[`${staticForType}_Data`] : chartData;
             if(chartOptions) {
                 node.data.echarts.option.xAxis[0].data = chartOptions.XData;
                 node.data.echarts.option.series[0].data = chartOptions.seriesData;
             }
         }
     }
-    if (displayMode === 5 && chartData){ // 饼图
+    if(displayMode === 4) { // 电量图
+        node.data.echarts.option.yAxis[0].data = chartOptions.XData;
+        node.data.echarts.option.yAxis[1].data = chartOptions.seriesData;
+        node.data.echarts.option.series[0].data = chartOptions.seriesData;
+        if(!chartOptions.seriesData.length) {
+            node.data.echarts.option.series[1].data = [];
+        }else {
+            let barData = [];
+            for (let sd = 0; sd < chartOptions.seriesData.length; sd++) {
+                barData.push(100);
+            }
+            node.data.echarts.option.series[1].data = barData;
+        }
+    }
+    if (displayMode === 5){ // 饼图
         const colors = node.data.echarts.option.color;
+        const pieData = staticForType ? chartData : chartData.data;
         const seriesData = [];
-        chartData.map((chd, index) => {
+        if(!pieData) return;
+        pieData.map((chd, index) => {
             seriesData.push({
                 itemStyle: { color: colors[index] },
                 name: chd.name,
@@ -150,8 +169,9 @@ export function setStatisticalData(pen, echartData) {
         node.data.echarts.option.series[0].data = seriesData;
     }
     if(displayMode === 6 && chartData){ // 仪表盘
-        node.appearance.title.text = chartData.name;
-        node.data.echarts.option.title.text = chartData.name;
+        // 仪表盘分两种，分别有不同的取值方式，下面两行先注释掉
+        // node.appearance.title.text = chartData.name;
+        // node.data.echarts.option.title.text = chartData.name;
         node.data.echarts.option.series[0].data[0].value = chartData.value;
     }
     return node.data.echarts;

package/core/src/hoverLayer.d.ts

@@ -1,13 +1,6 @@
-import { TopologyData } from './models/data';
-import { Rect } from './models/rect';
-import { Point } from './models/point';
-import { Line } from './models/line';
-import { Node } from './models/node';
-import { Options } from './options';
+import { Rect, Point, Line, Node } from './models';
 import { Layer } from './layer';
 export declare class HoverLayer extends Layer {
-    options: Options;
-    protected data: TopologyData;
     line: Line;
     initLine: Line;
     node: Node;
@@ -19,7 +12,7 @@ export declare class HoverLayer extends Layer {
     dockLineY: number;
     root: Node;
     dragRect: Rect;
-    constructor(options: Options, TID: String);
+    constructor(TID: String);
     lineTo(to: Point, toArrow?: string): void;
     lineFrom(from: Point): void;
     lineMove(pt: Point, initPos: {

package/core/src/hoverLayer.js

@@ -1,8 +1,8 @@
 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]; };
+                ({ __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) {
@@ -11,22 +11,17 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-import { Point } from './models/point';
-import { Node } from './models/node';
-import { PenType } from './models/pen';
+import { Point, Node, PenType, Lock } from './models';
 import { Store } from 'le5le-store';
-import { Lock } from './models/status';
 import { Layer } from './layer';
+import { commonStore } from './store'
 var HoverLayer = /** @class */ (function (_super) {
     __extends(HoverLayer, _super);
-    function HoverLayer(options, TID) {
-        if (options === void 0) { options = {}; }
+    function HoverLayer(TID) {
         var _this = _super.call(this, TID) || this;
-        _this.options = options;
         _this.hoverAnchorIndex = -1;
         _this.dockLineX = 0;
         _this.dockLineY = 0;
-        _this.data = Store.get(_this.generateStoreKey('topology-data'));
         Store.set(_this.generateStoreKey('LT:HoverLayer'), _this);
         return _this;
     }
@@ -70,14 +65,16 @@ var HoverLayer = /** @class */ (function (_super) {
     };
     HoverLayer.prototype.render = function (ctx) {
         var _this = this;
-        if (this.data.locked === Lock.NoEvent) {
+        if(!commonStore || !commonStore[_this.TID]) return;
+        var globalStore = commonStore[_this.TID];
+        if (globalStore.data.locked === Lock.NoEvent) {
             return;
         }
-        ctx.fillStyle = this.options.hoverColor;
+        ctx.fillStyle = globalStore.options.hoverColor;
         ctx.save();
         // anchors
-        if (this.options.alwaysAnchor) {
-            this.data.pens.forEach(function (pen) {
+        if (globalStore.options.alwaysAnchor) {
+            globalStore.data.pens.forEach(function (pen) {
                 if (pen.type === PenType.Line) {
                     return;
                 }
@@ -90,23 +87,23 @@ var HoverLayer = /** @class */ (function (_super) {
                         continue;
                     }
                     ctx.beginPath();
-                    ctx.arc(anchor.x, anchor.y, anchor.radius || _this.options.anchorRadius, 0, Math.PI * 2);
-                    ctx.strokeStyle = anchor.strokeStyle || _this.options.hoverColor;
-                    ctx.fillStyle = anchor.fillStyle || _this.options.anchorFillStyle;
+                    ctx.arc(anchor.x, anchor.y, anchor.radius || globalStore.options.anchorRadius, 0, Math.PI * 2);
+                    ctx.strokeStyle = anchor.strokeStyle || globalStore.options.hoverColor;
+                    ctx.fillStyle = anchor.fillStyle || globalStore.options.anchorFillStyle;
                     ctx.fill();
                     ctx.stroke();
                 }
             });
         }
         ctx.restore();
-        if (this.node && !this.data.locked) {
+        if (this.node && !globalStore.data.locked) {
             if (!this.node.getTID()) {
                 this.node.setTID(this.TID);
             }
             this.root = this.getRoot(this.node) || this.node;
             if (this.root) {
                 ctx.save();
-                ctx.strokeStyle = this.options.dragColor;
+                ctx.strokeStyle = globalStore.options.dragColor;
                 ctx.globalAlpha = 0.2;
                 if (this.root.rotate) {
                     ctx.translate(this.root.rect.center.x, this.root.rect.center.y);
@@ -117,20 +114,20 @@ var HoverLayer = /** @class */ (function (_super) {
                 ctx.strokeRect(this.root.rect.x, this.root.rect.y, this.root.rect.width, this.root.rect.height);
                 ctx.restore();
             }
-            if (!this.options.hideAnchor) {
+            if (!globalStore.options.hideAnchor) {
                 for (var i = 0; i < this.node.rotatedAnchors.length; ++i) {
                     if (this.node.locked ||
-                        this.node.hideAnchor ||
-                        (this.node.rotatedAnchors[i].hidden && this.hoverAnchorIndex !== i)) {
+                            this.node.hideAnchor ||
+                            (this.node.rotatedAnchors[i].hidden && this.hoverAnchorIndex !== i)) {
                         continue;
                     }
                     ctx.beginPath();
-                    ctx.arc(this.node.rotatedAnchors[i].x, this.node.rotatedAnchors[i].y, this.node.rotatedAnchors[i].radius || this.options.anchorRadius, 0, Math.PI * 2);
+                    ctx.arc(this.node.rotatedAnchors[i].x, this.node.rotatedAnchors[i].y, this.node.rotatedAnchors[i].radius || globalStore.options.anchorRadius, 0, Math.PI * 2);
                     ctx.strokeStyle =
-                        this.node.rotatedAnchors[i].strokeStyle || this.options.hoverColor;
+                            this.node.rotatedAnchors[i].strokeStyle || globalStore.options.hoverColor;
                     ctx.fillStyle =
-                        this.node.rotatedAnchors[i].fillStyle ||
-                            this.options.anchorFillStyle;
+                            this.node.rotatedAnchors[i].fillStyle ||
+                            globalStore.options.anchorFillStyle;
                     ctx.fill();
                     ctx.stroke();
                 }
@@ -139,9 +136,9 @@ var HoverLayer = /** @class */ (function (_super) {
         if (this.dockAnchor) {
             ctx.save();
             ctx.beginPath();
-            ctx.arc(this.dockAnchor.x, this.dockAnchor.y, this.dockAnchor.radius || this.options.anchorRadius, 0, Math.PI * 2);
-            ctx.strokeStyle = this.options.dockStrokeStyle;
-            ctx.fillStyle = this.options.dockFillStyle;
+            ctx.arc(this.dockAnchor.x, this.dockAnchor.y, this.dockAnchor.radius || globalStore.options.anchorRadius, 0, Math.PI * 2);
+            ctx.strokeStyle = globalStore.options.dockStrokeStyle;
+            ctx.fillStyle = globalStore.options.dockFillStyle;
             ctx.fill();
             ctx.stroke();
             ctx.restore();
@@ -151,7 +148,7 @@ var HoverLayer = /** @class */ (function (_super) {
             ctx.arc(this.hoverLineCP.x, this.hoverLineCP.y, 5, 0, Math.PI * 2);
             ctx.fill();
         }
-        ctx.strokeStyle = this.options.hoverColor + '80';
+        ctx.strokeStyle = globalStore.options.hoverColor + '80';
         ctx.lineWidth = 1;
         if (this.dockLineX > 0) {
             var size = Store.get(this.generateStoreKey('LT:size'));
@@ -169,8 +166,8 @@ var HoverLayer = /** @class */ (function (_super) {
         }
         // Select nodes by drag.
         if (this.dragRect) {
-            ctx.fillStyle = this.options.dragColor + '30';
-            ctx.strokeStyle = this.options.dragColor;
+            ctx.fillStyle = globalStore.options.dragColor + '30';
+            ctx.strokeStyle = globalStore.options.dragColor;
             ctx.beginPath();
             ctx.strokeRect(this.dragRect.x, this.dragRect.y, this.dragRect.width, this.dragRect.height);
             ctx.fillRect(this.dragRect.x, this.dragRect.y, this.dragRect.width, this.dragRect.height);
@@ -180,7 +177,7 @@ var HoverLayer = /** @class */ (function (_super) {
         if (!node.parentId) {
             return null;
         }
-        for (var _i = 0, _a = this.data.pens; _i < _a.length; _i++) {
+        for (var _i = 0, _a = commonStore[this.TID].data.pens; _i < _a.length; _i++) {
             var item = _a[_i];
             if (item instanceof Node && item.id === node.parentId) {
                 var n = this.getRoot(item);
@@ -196,4 +193,4 @@ var HoverLayer = /** @class */ (function (_super) {
     return HoverLayer;
 }(Layer));
 export { HoverLayer };
-//# sourceMappingURL=hoverLayer.js.map
+//# sourceMappingURL=hoverLayer.js.map

package/core/src/models/index.d.ts

@@ -1,4 +1,3 @@
-export * from './data';
 export * from './pen';
 export * from './node';
 export * from './line';

package/core/src/models/index.js

@@ -1,4 +1,3 @@
-export * from './data';
 export * from './pen';
 export * from './node';
 export * from './line';

package/core/src/offscreen.d.ts

@@ -1,15 +1,12 @@
-import { Options } from './options';
 import { Canvas } from './canvas';
 import { ActiveLayer } from './activeLayer';
 import { HoverLayer } from './hoverLayer';
 import { AnimateLayer } from './animateLayer';
 export declare class Offscreen extends Canvas {
-    parentElem: HTMLElement;
-    options: Options;
     activeLayer: ActiveLayer;
     hoverLayer: HoverLayer;
     animateLayer: AnimateLayer;
-    constructor(parentElem: HTMLElement, options: Options, TID: String);
+    constructor(TID: String);
     getRoutineLayer(auto?:[]): void;
     render(): void;
     destroy(): void;

package/core/src/offscreen.js

@@ -13,13 +13,12 @@ var __extends = (this && this.__extends) || (function () {
 })();
 import { Store } from 'le5le-store';
 import { Canvas } from './canvas';
+import { Node } from './models'
+import { commonStore } from './store'
 var Offscreen = /** @class */ (function (_super) {
     __extends(Offscreen, _super);
-    function Offscreen(parentElem, options, TID) {
-        if (options === void 0) { options = {}; }
-        var _this = _super.call(this, parentElem, options, TID) || this;
-        _this.parentElem = parentElem;
-        _this.options = options;
+    function Offscreen(TID) {
+        var _this = _super.call(this, TID) || this;
         _this.activeLayer = null;
         _this.hoverLayer = null;
         _this.animateLayer = null;
@@ -40,9 +39,12 @@ var Offscreen = /** @class */ (function (_super) {
     Offscreen.prototype.render = function () {
         _super.prototype.render.call(this);
         var ctx = this.canvas.getContext('2d');
-        ctx.strokeStyle = this.options.color;
-        for (var _i = 0, _a = this.data.pens; _i < _a.length; _i++) {
+        if(!commonStore || !commonStore[this.TID]) return;
+        let store = commonStore[this.TID];
+        ctx.strokeStyle = store.options.color;
+        for (var _i = 0, _a = store.data.pens; _i < _a.length; _i++) {
             var item = _a[_i];
+            if(!(item instanceof Node)) item = new Node(item);
             if (!item.getTID()) {
                 item.setTID(this.TID);
             }
@@ -57,9 +59,9 @@ var Offscreen = /** @class */ (function (_super) {
         if(this.animateLayer) {
             this.animateLayer.render(ctx);
         }
+        store = null;
     };
     Offscreen.prototype.destroy = function () {
-        this.options = null;
         this.activeLayer = null;
         this.hoverLayer = null;
         this.animateLayer = null;

package/core/src/options.js

@@ -38,5 +38,6 @@ export var DefalutOptions = {
     autoExpandDistance: 200,
     keydown: KeydownType.Document,
     viewPadding: 0,
+    interval: 50
 };
 //# sourceMappingURL=options.js.map

package/core/src/preview.d.ts

@@ -1,18 +1,6 @@
 // @ts-ignore
-import {Options, Padding} from './options';
-import { Pen } from './models';
-import { Node } from './models';
+import {Padding, Options} from './options';
 import { Point } from './models';
-import { Line } from './models';
-import { TopologyData } from './models';
-import { Lock } from './models';
-import { Offscreen } from './offscreen';
-import { RenderLayer } from './renderLayer';
-import { AnimateLayer } from './animateLayer';
-import { DivLayer } from './divLayer';
-import { Rect } from './models';
-import { Socket } from './socket';
-import { MQTT } from './mqtt';
 import {Common} from './common';
 export declare class Preview extends Common{
     constructor(parent: string | HTMLElement, options?: Options);