dcim-topology2d 1.0.1

package/core/src/offscreen.d.ts

@@ -0,0 +1,16 @@
+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);
+    getRoutineLayer(auto?:[]): void;
+    render(): void;
+    destroy(): void;
+}

package/core/src/offscreen.js

@@ -0,0 +1,70 @@
+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 { Canvas } from './canvas';
+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;
+        _this.activeLayer = null;
+        _this.hoverLayer = null;
+        _this.animateLayer = null;
+        Store.set(_this.generateStoreKey('LT:offscreen'), _this.canvas);
+        return _this;
+    }
+    Offscreen.prototype.getRoutineLayer = function(auto) {
+      if(!auto || auto.includes('ActiveLayer')) {
+        this.activeLayer = Store.get(this.generateStoreKey('LT:ActiveLayer'));
+      }
+      if(!auto || auto.includes('HoverLayer')) {
+        this.hoverLayer = Store.get(this.generateStoreKey('LT:HoverLayer'));
+      }
+      if(!auto || auto.includes('AnimateLayer')) {
+        this.animateLayer = Store.get(this.generateStoreKey('LT:AnimateLayer'));
+      }
+    };
+    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++) {
+            var item = _a[_i];
+            if (!item.getTID()) {
+                item.setTID(this.TID);
+            }
+            item.render(ctx);
+        }
+        if(this.activeLayer) {
+            this.activeLayer.render(ctx);
+        }
+        if(this.hoverLayer) {
+          this.hoverLayer.render(ctx);
+        }
+        if(this.animateLayer) {
+            this.animateLayer.render(ctx);
+        }
+    };
+    Offscreen.prototype.destroy = function () {
+        this.options = null;
+        this.activeLayer = null;
+        this.hoverLayer = null;
+        this.animateLayer = null;
+    };
+    return Offscreen;
+}(Canvas));
+export { Offscreen };
+//# sourceMappingURL=offscreen.js.map

package/core/src/offscreen.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"offscreen.js","sourceRoot":"","sources":["../../../packages/core/src/offscreen.ts"],"names":[],"mappings":";;;;;;;;;;;;;AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAKlC;IAA+B,6BAAM;IAInC,mBAAmB,UAAuB,EAAS,OAAqB,EAAE,GAAW;QAAlC,wBAAA,EAAA,YAAqB;QAAxE,YACE,kBAAM,UAAU,EAAE,OAAO,EAAE,GAAG,CAAC,SAKhC;QANkB,gBAAU,GAAV,UAAU,CAAa;QAAS,aAAO,GAAP,OAAO,CAAc;QAEtE,KAAI,CAAC,WAAW,GAAG,KAAK,CAAC,GAAG,CAAC,KAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAAC,CAAC;QACtE,KAAI,CAAC,UAAU,GAAG,KAAK,CAAC,GAAG,CAAC,KAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC,CAAC;QACpE,KAAI,CAAC,YAAY,GAAG,KAAK,CAAC,GAAG,CAAC,KAAI,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,CAAC,CAAC;QACxE,KAAK,CAAC,GAAG,CAAC,KAAI,CAAC,gBAAgB,CAAC,cAAc,CAAC,EAAE,KAAI,CAAC,MAAM,CAAC,CAAC;;IAChE,CAAC;IAED,0BAAM,GAAN;QACE,iBAAM,MAAM,WAAE,CAAC;QAEf,IAAM,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;QACzC,GAAG,CAAC,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;QAErC,KAAmB,UAAc,EAAd,KAAA,IAAI,CAAC,IAAI,CAAC,IAAI,EAAd,cAAc,EAAd,IAAc,EAAE;YAA9B,IAAM,IAAI,SAAA;YACb,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,EAAE;gBAClB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;aACvB;YACD,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;SAClB;QAED,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;QAC7B,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;QAC9B,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;IAC9B,CAAC;IAGH,gBAAC;AAAD,CAAC,AA/BD,CAA+B,MAAM,GA+BpC"}

package/core/src/options.d.ts

@@ -0,0 +1,66 @@
+export declare enum KeyType {
+    None = -1,
+    CtrlOrAlt = 0,
+    Ctrl = 1,
+    Shift = 2,
+    Alt = 3
+}
+export declare enum KeydownType {
+    None = -1,
+    Document = 0,
+    Canvas = 1
+}
+export interface Options {
+    cacheLen?: number;
+    extDpiRatio?: number;
+    width?: string | number;
+    height?: string | number;
+    color?: string;
+    activeColor?: string;
+    hoverColor?: string;
+    anchorRadius?: number;
+    anchorFillStyle?: string;
+    dockStrokeStyle?: string;
+    dockFillStyle?: string;
+    dragColor?: string;
+    animateColor?: string;
+    font?: {
+        color?: string;
+        fontFamily?: string;
+        fontSize?: number;
+        lineHeight?: number;
+        textAlign?: string;
+        textBaseline?: string;
+    };
+    rotateCursor?: string;
+    hoverCursor?: string;
+    hideInput?: boolean;
+    hideRotateCP?: boolean;
+    hideSizeCP?: boolean;
+    hideAnchor?: boolean;
+    onlySizeX?: boolean;
+    onlySizeY?: boolean;
+    anchorSize?: number;
+    alwaysAnchor?: boolean;
+    disableEmptyLine?: boolean;
+    disableRepeatLine?: boolean;
+    disableScale?: boolean;
+    disableMoveOutParent?: boolean;
+    disableDockLine?: boolean;
+    playIcon?: string;
+    pauseIcon?: string;
+    fullScreenIcon?: string;
+    loopIcon?: string;
+    translateKey?: KeyType;
+    scaleKey?: KeyType;
+    minScale?: number;
+    maxScale?: number;
+    autoExpandDistance?: number;
+    keydown?: KeydownType;
+    viewPadding?: Padding;
+    on?: (event: string, data: any) => void;
+}
+export declare const DefalutOptions: Options;
+
+export class Padding {
+}

package/core/src/options.js

@@ -0,0 +1,42 @@
+export var KeyType;
+(function (KeyType) {
+    KeyType[KeyType["None"] = -1] = "None";
+    KeyType[KeyType["CtrlOrAlt"] = 0] = "CtrlOrAlt";
+    KeyType[KeyType["Ctrl"] = 1] = "Ctrl";
+    KeyType[KeyType["Shift"] = 2] = "Shift";
+    KeyType[KeyType["Alt"] = 3] = "Alt";
+})(KeyType || (KeyType = {}));
+export var KeydownType;
+(function (KeydownType) {
+    KeydownType[KeydownType["None"] = -1] = "None";
+    KeydownType[KeydownType["Document"] = 0] = "Document";
+    KeydownType[KeydownType["Canvas"] = 1] = "Canvas";
+})(KeydownType || (KeydownType = {}));
+export var DefalutOptions = {
+    cacheLen: 30,
+    font: {
+        color: '#fff',
+        fontFamily: '"Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial',
+        fontSize: 12,
+        lineHeight: 1.5,
+        textAlign: 'center',
+        textBaseline: 'middle',
+    },
+    color: '#222',
+    hoverColor: '#fa541c',
+    anchorRadius: 4,
+    anchorFillStyle: '#fff',
+    dockStrokeStyle: '#fa541c',
+    dockFillStyle: '#fa541c',
+    dragColor: '#1890ff',
+    activeColor: '#1890ff',
+    rotateCursor: '/assets/img/rotate.cur',
+    hoverCursor: 'pointer',
+    minScale: 0.1,
+    maxScale: 5,
+    anchorSize: 5,
+    autoExpandDistance: 200,
+    keydown: KeydownType.Document,
+    viewPadding: 0,
+};
+//# sourceMappingURL=options.js.map

package/core/src/options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"options.js","sourceRoot":"","sources":["../../../packages/core/src/options.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,OAMX;AAND,WAAY,OAAO;IACjB,sCAAS,CAAA;IACT,+CAAS,CAAA;IACT,qCAAI,CAAA;IACJ,uCAAK,CAAA;IACL,mCAAG,CAAA;AACL,CAAC,EANW,OAAO,KAAP,OAAO,QAMlB;AAED,MAAM,CAAN,IAAY,WAIX;AAJD,WAAY,WAAW;IACrB,8CAAS,CAAA;IACT,qDAAQ,CAAA;IACR,iDAAM,CAAA;AACR,CAAC,EAJW,WAAW,KAAX,WAAW,QAItB;AAoDD,MAAM,CAAC,IAAM,cAAc,GAAY;IACrC,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;QACb,UAAU,EAAE,2EAA2E;QACvF,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,GAAG;QACf,SAAS,EAAE,QAAQ;QACnB,YAAY,EAAE,QAAQ;KACvB;IACD,KAAK,EAAE,MAAM;IACb,UAAU,EAAE,SAAS;IACrB,YAAY,EAAE,CAAC;IACf,eAAe,EAAE,MAAM;IACvB,eAAe,EAAE,SAAS;IAC1B,aAAa,EAAE,SAAS;IACxB,SAAS,EAAE,SAAS;IACpB,WAAW,EAAE,SAAS;IACtB,YAAY,EAAE,wBAAwB;IACtC,WAAW,EAAE,SAAS;IACtB,QAAQ,EAAE,IAAI;IACd,QAAQ,EAAE,CAAC;IACX,UAAU,EAAE,CAAC;IACb,kBAAkB,EAAE,GAAG;IACvB,OAAO,EAAE,WAAW,CAAC,QAAQ;CAC9B,CAAC"}

package/core/src/poll.js

@@ -0,0 +1,39 @@
+import { EventType } from 'dcim-topology/core/src/models';
+
+// 轮询
+var POLL = /** @class */ (function () {
+    function POLL(data, message, val) {
+        this.data = data;
+        this.client = message;
+        this.val = val;
+        this.init();
+    };
+    POLL.prototype.init = function () {
+        let topics = ''
+        this.getPen(this.data.pens, topics, JSON.stringify(this.client))
+    };
+    POLL.prototype.getPen = function (pens, topics, message) {
+        const _this = this;
+        pens.forEach((pen)=>{
+            if(pen.children != undefined){
+            _this.getPen(pen.children, topics, message)
+            }else{
+                var item = pen;
+                for (var _b = 0, _c = item.events; _b < _c.length; _b++) {
+                    var event_1 = _c[_b];
+                    // if (event_1.type === EventType.Poll) {
+                    if ((event_1.type ===3 && this.val === 'Mqtt') || (event_1.type ===4 && this.val === 'Poll')
+                    || (event_1.type ===5 && this.val === 'Poll1') || (event_1.type ===6 && this.val === 'Poll2')) {
+                        event_1.name = topics;
+                        if(message){
+                            item.doSocketMqtt(event_1, message.toString());
+                        }
+                    }
+                }
+            }
+        })
+    };
+    return POLL;
+}());
+export { POLL };
+//# sourceMappingURL=mqtt.js.map

package/core/src/preview.d.ts

@@ -0,0 +1,29 @@
+// @ts-ignore
+import {Options, Padding} from './options';
+import { Pen } from './models';
+import { Node } from './models';
+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);
+    private scheduledAnimationFrame;
+    private onMouseMove;
+    private onmousedown;
+    private onmouseup;
+    open(data?: any): void;
+    scale(scale: number, center?: Point): void;
+    scaleTo(scale: number): void;
+    fitView(viewPadding?: Padding): void;
+    destroy(): void;
+}
+export {};

package/core/src/preview.js

@@ -0,0 +1,247 @@
+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 {KeyType} from './options';
+import {Point} from './models';
+import { Common } from './common'
+import {downDataType, formatPadding, mousMoveFun, mousDownFun, omouseEventPrototDoWindowFn} from './utils';
+
+var Preview = (function (_super) {
+    __extends(Preview, _super);
+    function Preview(parent, options) {
+        var _this = _super.call(this, parent, options) || this;
+        _this.offscreen.getRoutineLayer(['AnimateLayer']);
+        _this.scheduledAnimationFrame = false;
+        _this.onMouseMove = function (e) {
+            // https://caniuse.com/#feat=mdn-api_mouseevent_buttons
+            if (_this.mouseDown && !_this.mouseDown.restore && e.buttons !== 1) {
+                // 防止异常情况导致mouseup事件没有触发
+                _this.onmouseup(e);
+                return;
+            }
+            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) {
+                    // dcim 中的鼠标悬浮处理
+                    const {
+                        hoverNode,
+                        moveType,
+                        eventNode
+                    } = mousMoveFun(_this.options.type, pos, _this.data.pens);
+                    _this.moveIn.type = _this.moveInType.None;
+                    _this.scheduledAnimationFrame = false;
+                    _this.hideTip();
+                    _this.divLayer.canvas.style.cursor = 'default';
+                    if (hoverNode) {
+                        if(eventNode) _this.divLayer.canvas.style.cursor = 'pointer';
+                        if(hoverNode.visible) _this.showTip(hoverNode, pos);
+                        _this.moveIn.type = moveType;
+                    }
+                    _this.moveIn.eventNode = eventNode;
+                    _this.moveIn.hoverNode = hoverNode;
+                    return;
+                }
+                _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 = 'pointer';
+            }
+            if (_this.inputObj) {
+                _this.setNodeText();
+            }
+            const {eventType, value} = mousDownFun(_this.options.type, _this.moveIn.eventNode);
+            if (_this.moveIn.type == _this.moveInType.Nodes) {
+                _this.divLayer.canvas.style.cursor = 'pointer';
+                switch (eventType) {
+                    case downDataType.Window:
+                        omouseEventPrototDoWindowFn(_this.moveIn.eventNode, _this.moveIn.hoverNode);
+                        break;
+                    case downDataType.Target:
+                        _this.dispatch('node', _this.moveIn.hoverNode);
+                        break;
+                    case downDataType.Showhide:
+                        _this.hidePenByTag(_this.data.pens, value);
+                        const obj = value ? JSON.parse(value) : {}
+                        const visibleRange = obj.visibleRange
+                        if (visibleRange == '1') {
+                            _this.openCount++
+                        }
+                        break;
+                    case downDataType.Tabswitch:
+                        _this.switchStaticsCheckType(_this.moveIn.hoverNode, _this.moveIn.eventNode);
+                        break;
+                }
+            }
+        };
+        _this.onmouseup = function (e) {
+            if (!_this.mouseDown)
+                return;
+            _this.mouseDown = null;
+            _this.lastTranlated.x = 0;
+            _this.lastTranlated.y = 0;
+            _this.divLayer.canvas.style.cursor = _this.moveIn.eventNode ? 'pointer' : 'default';
+        };
+        _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.render();
+            _this.divLayer.canvas.focus();
+            return false;
+        };
+        return _this;
+    };
+    Preview.prototype.fitViewPreview = function (restore){
+        this.fitView(null, restore);
+        this.render();
+    };
+    // open - redraw by the data
+    Preview.prototype.open = function (topoJSon) {
+        this.conversionData(topoJSon);
+        this.parentElem.scrollLeft = 0;
+        this.parentElem.scrollTop = 0;
+        this.divLayer.clear();
+        this.fitView();
+        this.render(true);
+        this.animate(true);
+    };
+    Preview.prototype.scale = function (scale, center, w, h) {
+        if (this.data.scale * scale < this.options.minScale ||
+                this.data.scale * scale > this.options.maxScale) {
+            return;
+        }
+        const scaleX = w ? w : scale;
+        const scaleY = h ? h : scale;
+        this.data.scale *= scale;
+        if(this.isFullScreen) {
+            this.ratioCord.ratio *= scale;
+            this.ratioCord.scaleX *= scaleX;
+            this.ratioCord.scaleY *= scaleY;
+        }else {
+            this.ratioCord.ratio = 1;
+            this.ratioCord.scaleX = 1;
+            this.ratioCord.scaleY = 1;
+        }
+        !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);
+        }
+    };
+    Preview.prototype.scaleTo = function (scale) {
+        this.scale(scale / this.data.scale);
+        this.data.scale = scale;
+    };
+    // scale for origin canvas:
+    Preview.prototype.fitView = function (viewPadding, restore) {
+        if (!this.hasView())
+            return;
+        // 1. 重置画布尺寸为容器尺寸
+        var parentElem = this.canvas.parentElem;
+        var width = parentElem.offsetWidth, height = parentElem.offsetHeight;
+        this.canvasResize({
+            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;
+        }
+        if(typeof restore === 'boolean' && restore) {
+            ratio = 1 / this.ratioCord.ratio;
+            w = 1 / this.ratioCord.scaleX;
+            h = 1 / this.ratioCord.scaleY;
+        }
+        this.scale(ratio, undefined, w, h);
+        this.canvas.scale(ratio, undefined, w, h);
+        // 7. X抽滚动条隐藏
+        this.parentElem.style.overflow = 'hidden auto';
+    };
+    Preview.prototype.destroy = function () {
+        this.destroyStatic();
+        this.onMouseMove = null;
+        this.onmousedown = null;
+        this.onmouseup = null;
+    };
+    return Preview;
+}(Common));
+
+export {Preview};
+//# sourceMappingURL=core.js.map

package/core/src/renderLayer.d.ts

@@ -0,0 +1,36 @@
+import { Options } from './options';
+import { Canvas } from './canvas';
+import {Point} from './models';
+export declare class RenderLayer extends Canvas {
+    parentElem: HTMLElement;
+    options: Options;
+    offscreen: any;
+    bkImg: HTMLImageElement;
+    bkImgRect: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    bgRect: {
+        center: {
+            x: number;
+            y: number;
+        },
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    constructor(parentElem: HTMLElement, options: Options, TID: String);
+    loadBkImg(cb?: any): void;
+    clearBkImg(): void;
+    render: () => void;
+    scale(scale: number, center?: Point, w?: number, h?: number): void;
+    coverRect(canvasWidth: number, canvasHeight: number, imgWidth: number, imgHeight: number): {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+}