dcim-topology2d 2.0.2 → 2.0.5

package/core/src/element/select.js

@@ -1,17 +1,15 @@
-import {
-    elementInteractivePoor,
-    selectDataPool,
-    echartsRealDataPool,
-    echartsOptionsPool
-} from "../../../store";
+import {Store} from 'le5le-store';
+import {commonStore} from "../store";
 import { setMapDataOptions } from '../../../chart-diagram';
 import {previewType, selectStaticType} from '../utils';
+import {setElementSwitchTabState} from './tab';
 let nodeId = '';
 let downId = '';
 // 创建下拉头
 export function createSelectElement(node) {
     const selectEle = document.createElement('div');
-    const inputValue = selectDataPool[node.id].data[0] && selectDataPool[node.id].data[0].name;
+    const order = node.formData.selected && node.formData.selected.order || 0;
+    const inputValue = commonStore[node.TID].selectDataPool[node.id].data[order] && commonStore[node.TID].selectDataPool[node.id].data[order].name;
     let attrName = 'topology-select-icon-arrow';
     if(node.selectDropdown) attrName += ' reverse';
     const children = `<i class="${attrName}" 
@@ -31,7 +29,7 @@ export function createSelectDropdown(node) {
     const selectDropdownEle = document.createElement('div');
     let liElements = '';
     if(node.selectDropdown) {
-        liElements = createSelectOptions(selectDataPool[node.id].data, node);
+        liElements = createSelectOptions(commonStore[node.TID].selectDataPool[node.id].data, node);
         selectDropdownEle.style.display = 'block';
         setSelectDropdownPosition(node, selectDropdownEle);
     }
@@ -44,7 +42,7 @@ export function createSelectDropdown(node) {
 }
 // 创建下拉options列表
 export function createSelectOptions(data, node) {
-    const selectNode = selectDataPool[node.id];
+    const selectNode = commonStore[node.TID].selectDataPool[node.id];
     const selectDropdownUl = selectNode.dom.selectDropdownUl;
     if(selectDropdownUl) selectDropdownUl.innerHTML = '';
     let leElement = '';
@@ -66,35 +64,43 @@ export function createSelectOptions(data, node) {
 }
 // 配置下拉头的交互状态：展开时三角图标向上，否则向下
 export function setSelectInteractiveState(selected, node) {
-    const selectNode = selectDataPool[node.id];
+    const selectNode = commonStore[node.TID].selectDataPool[node.id];
     selectNode.dom.selectIconArrow.style.display = selected ? 'none' : 'block';
     //selectNode.dom['selectRemove'].style.display = selected ? 'block' : 'none';
 }
 // 重置下拉状态
 export function resetSelectInteractiveState(node) {
-    if(!Object.keys(selectDataPool).length) return;
-    for (let data of Object.values(selectDataPool)) {
+    const currentStore = commonStore[node.TID];
+    if(!Object.keys(currentStore.selectDataPool).length) return;
+    for (let data of Object.values(currentStore.selectDataPool)) {
         if(node && node.id !== data.node.id) {
             if(data.dom.selectIconArrow) data.dom.selectIconArrow.setAttribute('class', 'topology-select-icon-arrow');
             data.slideState = false;
-        };
+        }
     }
     document.querySelector('.topology-select-dropdown').style.display = 'none';
-    elementInteractivePoor.node = null;
+    currentStore.elementInteractivePoor.node = null;
 }
-// 配置下拉options容器的交互状态，展开和收起
+
+/**
+ * 配置下拉options容器的交互状态，展开和收起
+ * @param node 下拉元件节点数据
+ * @param staticType 下拉功能类型：1: 数据统计；2：数据展示；3：显示隐藏
+ * @param type 功能作用区域类型：Dcim，Topology，Logo
+ */
 export function setSelectDropdownInteractiveState(node, staticType, type) {
-    const selectNode = selectDataPool[node.id];
+    const currentStore = commonStore[node.TID];
+    const selectNode = currentStore.selectDataPool[node.id];
     if(!selectNode.staticType) selectNode.staticType = staticType;
     if(!selectNode) return;
     if(downId !== node.id && type === previewType.Dcim) {
         // 点击的不是同一个下拉则重置交互样式，清空数据
         resetSelectInteractiveState(node);
-        elementInteractivePoor.options = null;
+        currentStore.elementInteractivePoor.options = null;
     }
     downId = node.id;
-    elementInteractivePoor.node = node;
-    selectElementStore(node.id);
+    currentStore.elementInteractivePoor.node = node;
+    selectElementStore(node.id, node.TID);
     setSelectElementPosition(node);
     const { selectIconArrow, selectDropdown } = selectNode.dom;
     selectNode.slideState = !selectNode.slideState || node.selectDropdown; // 下拉展开状态
@@ -109,23 +115,23 @@ export function setSelectDropdownInteractiveState(node, staticType, type) {
     // 图标旋转
     selectIconArrow.setAttribute('class', attrName);
     // 添加列表数据
-    if(!elementInteractivePoor.options) createSelectOptions(selectNode.data, node);
+    if(!currentStore.elementInteractivePoor.options) createSelectOptions(selectNode.data, node);
 }
 // 配置下拉偏移位置
 export function setSelectElementPosition(node, type) {
     // 不同元件切换
-    selectElementStore(node.id);
-    const selectNode = selectDataPool[node.id];
+    selectElementStore(node.id, node.TID);
+    const selectNode = commonStore[node.TID].selectDataPool[node.id];
     if(type === 'down') {
         if(nodeId === node.id) return;
-        elementInteractivePoor.options = null;
+        commonStore[node.TID].elementInteractivePoor.options = null;
         createSelectOptions(selectNode.data, node);
     }
     nodeId = node.id;
     setSelectDropdownPosition(node, selectNode.dom.selectDropdown);
 }
 function setSelectDropdownPosition(node, selectDropdown) {
-    const selectEle = selectDataPool[node.id].dom.selectEle;
+    const selectEle = commonStore[node.TID].selectDataPool[node.id].dom.selectEle;
     let left = selectEle.getBoundingClientRect().left; // 获取下拉元素距离窗体左侧位置
     let top = selectEle.getBoundingClientRect().top + node.rect.height;
     if(window.location.pathname.includes('workspace')) {
@@ -139,57 +145,86 @@ function setSelectDropdownPosition(node, selectDropdown) {
     const themeType = node.formData.theme ? ` theme${node.formData.theme}` : '';
     selectDropdown.setAttribute('class', `topology-select-dropdown${themeType} documentDefine`);
 }
-// 获取下拉选中的数据
-export function getSelectedData(e, data) {
-    const selectNode = selectDataPool[data.id];
-    if(!elementInteractivePoor.options) elementInteractivePoor.options = selectNode.dom.selectDropdownUl.querySelectorAll('.topology-select-dropdown-item');
-    const parentNode = e.target.parentNode;
-    const type = parentNode.getAttribute('type');
-    if(type === 'option') {
+
+/**
+ * 获取下拉选中的数据
+ * @param e 节点选中事件
+ * @param data 下拉元件节点数据
+ * @param editData 编辑显下拉的数据
+ */
+export function getSelectedData(e, data, editData) {
+    const currentStore = commonStore[data.TID];
+    const selectNode = currentStore.selectDataPool[data.id];
+    if(!currentStore.elementInteractivePoor.options && data.selectDropdown) currentStore.elementInteractivePoor.options = selectNode.dom.selectDropdownUl.querySelectorAll('.topology-select-dropdown-item');
+    let order = 0;
+    let staticType = selectNode.staticType;
+    if(!editData) {
+        const parentNode = e.target.parentNode;
+        const type = parentNode.getAttribute('type');
+        if(type !== 'option') return;
+        selectNode.slideState = false;
+        selectNode.dom.selectDropdown.style.display = 'none';
+        // 图标旋转
+        selectNode.dom.selectIconArrow.setAttribute('class', 'topology-select-icon-arrow');
         // 选中节点操作
-        const order = parentNode.getAttribute('data-order');
-        selectNode.optionOrder = order;
-        for(let i = 0, leng = elementInteractivePoor.options.length; i < leng; i++) {
+        order = parentNode.getAttribute('data-order');
+    }else {
+        order = editData.order;
+        staticType = editData.staticType;
+    }
+    if(data.selectDropdown) {
+        for(let i = 0, leng = currentStore.elementInteractivePoor.options.length; i < leng; i++) {
             let name = 'topology-select-dropdown-item';
             if(i == order) {
                 name += ' selected';
             }else {
                 name.replace(' selected', '');
             }
-            elementInteractivePoor.options[i].setAttribute('class', name);
+            currentStore.elementInteractivePoor.options[i].setAttribute('class', name);
         }
-        const node = selectNode.data[order];
-        selectNode.dom.selectEle.querySelector('.topology-select-input').value = node.name;
-        selectNode.slideState = false;
-        selectNode.dom.selectDropdown.style.display = 'none';
-        // 图标旋转
-        selectNode.dom.selectIconArrow.setAttribute('class', 'topology-select-icon-arrow');
-        if(selectNode.staticType === selectStaticType.static) {
-            // 数据统计
-            const optionNode = data.formData.bindBlockId && echartsOptionsPool[data.formData.bindBlockId];
-            if(!optionNode) return;
-            // 切换数据
-            echartsRealDataPool[optionNode.data.id] = echartsRealDataPool[node.id];
-            setMapDataOptions(optionNode.option, optionNode.data);
-            selectNode.node.selected = {
-                order: parseInt(order),
-                id: node.id
-            };
-        }else {
-            // 数据展示
+    }
+    selectNode.optionOrder = order;
+    const node = selectNode.data[order];
+    selectNode.dom.selectEle.querySelector('.topology-select-input').value = node.name;
+    selectNode.node.selected = {
+        order: parseInt(order),
+        id: node.id
+    };
+    if(staticType === selectStaticType.static) {
+        // 数据统计
+        const optionNode = data.formData.bindBlockId && currentStore.echartsOptionsPool[data.formData.bindBlockId];
+        if(!optionNode) return;
+        // 切换数据
+        currentStore.echartsRealDataPool[optionNode.data.id] = currentStore.echartsRealDataPool[node.id];
+        setMapDataOptions(optionNode.option, optionNode.data);
+    }
+    if(staticType === selectStaticType.dataShow) {
+        // 数据展示
+    }
+    if(staticType === selectStaticType.visible) {
+        // 显示隐藏
+        const optionsVisibleData = currentStore.selectTabDataPool[data.id];
+        if(!optionsVisibleData || !optionsVisibleData.size) return;
+        for(const [key, value] of optionsVisibleData){
+            const eque = node.id === value.tag;
+            currentStore.data.pens[value.order].visible = eque;
+            currentStore.data.pens[value.order].visibleSwitch = eque;
+            value.visible = eque;
+            setElementSwitchTabState(value);
         }
+        Store.set(`${data.TID}-LT:render`, true);
     }
 }
 // 配置下拉展示的主题风格
 export function setSelectElementTheme(node) {
     const themeType = node.formData.theme ? ` theme${node.formData.theme}` : '';
-    const { selectEle, selectDropdown } = selectDataPool[node.id].dom;
+    const { selectEle, selectDropdown } = commonStore[node.TID].selectDataPool[node.id].dom;
     selectEle.setAttribute('class', `topology-select${themeType}`);
     selectDropdown.setAttribute('class', `topology-select-dropdown${themeType} documentDefine`);
 }
 // 存储下拉Dom节点
-function selectElementStore(id) {
-    const selectNode = selectDataPool[id];
+function selectElementStore(id, TID) {
+    const selectNode = commonStore[TID].selectDataPool[id];
     if(!selectNode.dom.selectIconArrow) selectNode.dom.selectIconArrow = selectNode.dom.selectEle.querySelector('.topology-select-icon-arrow');
     if(!selectNode.dom.selectDropdown) {
         selectNode.dom.selectDropdown = document.querySelector('.topology-select-dropdown');

package/core/src/element/tab.js

@@ -1,17 +1,14 @@
-import {
-    echartsDataPool,
-    elementInteractivePoor,
-    selectDataPool
-} from '../../../store';
 import {jsonLength} from '../utils';
+import {commonStore} from "../store";
 // 设置tab切换显示隐藏时的 Dom元件状态
 export function setElementSwitchTabState(node) {
-    if(typeof elementInteractivePoor.elementDataLength !== 'number') {
-        elementInteractivePoor.elementDataLength = jsonLength(echartsDataPool) || jsonLength(selectDataPool);
+    if(node.name !== 'echarts' && (!node.children || !node.children.length)) return;
+    if(typeof commonStore[node.TID].elementInteractivePoor.elementDataLength !== 'number') {
+        commonStore[node.TID].elementInteractivePoor.elementDataLength = jsonLength(commonStore[node.TID].echartsDataPool) || jsonLength(commonStore[node.TID].selectDataPool);
     }
-    if(!elementInteractivePoor.elementDataLength) return;
-    const ele = echartsDataPool[node.id] && echartsDataPool[node.id].div ||
-            selectDataPool[node.id] && selectDataPool[node.id].dom.selectEle;
+    if(!commonStore[node.TID].elementInteractivePoor.elementDataLength) return;
+    const ele = commonStore[node.TID].echartsDataPool[node.id] && commonStore[node.TID].echartsDataPool[node.id].div ||
+            commonStore[node.TID].selectDataPool[node.id] && commonStore[node.TID].selectDataPool[node.id].dom.selectEle;
     if(ele) ele.style.display = !node.visible ? 'none': 'block';
     if(node.children && node.children.length) {
         node.children.map((ch) => {

package/core/src/healps/changeData.js

@@ -1,10 +1,20 @@
 //let DETAILDATA = null;
 import {commonStore} from '../store';
-import {echartsRealDataPool} from '../../../store';
 import { getEchartsRealData } from '../utils/conversion';
 export function setConfItemNode(pen, syn_synata) {
+    const entranceGuard = pen.events.find((ev) => {
+        return ev.value === 'entranceGuard';
+    });
+    if(entranceGuard) {
+        // 绑定门禁的元件实时数据
+        const nullUndefinedRegex = /^(?:null|undefined|\s*)$/;
+        const doorData = syn_synata.doorData && syn_synata.doorData[entranceGuard.params];
+        const doorState = doorData && !nullUndefinedRegex.test(doorData.state) && parseInt(doorData.state);
+        pen.text = doorState === 1 ? '开门' : '关门'; // 1-开门，其他值为关门
+    }
     if (!pen.data) return;
     if(commonStore[pen.TID]) commonStore[pen.TID].data.dataResize = 1;
+    let isAlarm = false; // 判断元件绑定的数据中是否有告警发生，用于九所项目服务器自身监控功能
     if(pen.data instanceof Array) {
         let _syn = null;
         let isResetVal = false;
@@ -62,9 +72,11 @@ export function setConfItemNode(pen, syn_synata) {
         switch (state) {
             case 0: // 正常告警
                 color = '#FF0000';
+                isAlarm = true;
                 break;
             case 1: // 离线告警, 通讯开关告警
                 color = '#6d6d6d';
+                isAlarm = true;
                 break;
             case 2: // 未告警
             case 3: // 无告警
@@ -94,18 +106,20 @@ export function setConfItemNode(pen, syn_synata) {
         if (name === 'electricFan') setFanData(pen, _syn)
     }else {
         if (pen.elementRendered) pen.elementRendered = false;
-        if(pen.data.echarts) {
-            const { echartDataValue } = syn_synata;
+        if (pen.data.echarts) {
+            const {echartDataValue} = syn_synata;
             const seriesData = echartDataValue;
             const realData = pen.data.params && seriesData && Object.keys(seriesData).length && seriesData[pen.data.params.id];
             if (Array.isArray(realData)) {
                 getEchartsRealData(pen, realData);
-            }else {
-                echartsRealDataPool[pen.id] = realData;
+            } else {
+                commonStore[pen.TID].echartsRealDataPool[pen.id] = realData;
             }
         }
     }
-    return pen
+    return {
+        monitorAlarm: isAlarm
+    }
 }
 
 export function setNodeEvents(item, pen) {

package/core/src/middles/nodes/formselect.js

@@ -5,43 +5,57 @@ import {
 import {
     setEventListener,
     s8} from '../../utils';
-import {echartsDataPool, selectDataPool, selectRealDataPool} from '../../../../store';
 import {selectDefaultData} from '../../../../static';
+import {commonStore} from "../../store";
 
 export function formSelect(ctx, node) {
     // 绘制一个底图，类似于占位符。
     rectangle(ctx, node);
-    if (!selectDataPool[node.id]) {
+    if (!commonStore[node.TID].selectDataPool[node.id]) {
+        const currentStore = commonStore[node.TID];
         node.elementId = s8();
         node.dash = 4;
-        selectDataPool[node.id] = {
+        currentStore.selectDataPool[node.id] = {
             slideState: node.selectDropdown,
             node: {
                 id: node.id,
                 color: node.font.color,
                 fontSize: node.font.fontSize,
-                selected: null
+                selected: node.formData.selected || null
             },
             dom: {}
         };
         const bindBlockId = node.formData && node.formData.bindBlockId;
-        let selectRealData = bindBlockId && selectRealDataPool[bindBlockId];
+        let selectRealData = bindBlockId && currentStore.selectRealDataPool[bindBlockId];
         if(bindBlockId && selectRealData) {
             // select与echarts互相关联
-            selectDataPool[node.id].data = selectRealData;
-            const echartsData = echartsDataPool[bindBlockId];
+            currentStore.selectDataPool[node.id].data = selectRealData;
+            const echartsData = currentStore.echartsDataPool[bindBlockId];
             if(echartsData){
                 echartsData.bindId = node.id;
             }else {
-                echartsDataPool[bindBlockId] = {
+                currentStore.echartsDataPool[bindBlockId] = {
                     bindId: node.id
                 }
             }
         }else {
-            selectDataPool[node.id].data = JSON.parse(JSON.stringify(selectDefaultData));
+            if(node.formData.ids) {
+                const optionIds = node.formData.ids.split(',');
+                const optionNames = node.formData.names.split(',');
+                const optionsData = [];
+                for (let i = 0; i < optionIds.length; i++) {
+                    optionsData.push({
+                        id: optionIds[i],
+                        name: optionNames[i]
+                    });
+                }
+                currentStore.selectDataPool[node.id].data = optionsData;
+            }else {
+                currentStore.selectDataPool[node.id].data = JSON.parse(JSON.stringify(selectDefaultData));
+            }
         }
         const select = createSelectElement(node);
-        selectDataPool[node.id].dom.selectEle = select;
+        currentStore.selectDataPool[node.id].dom.selectEle = select;
         document.body.appendChild(select);
         let selectDropdownEle = document.querySelector('.topology-select-dropdown');
         if(!selectDropdownEle) {
@@ -50,13 +64,13 @@ export function formSelect(ctx, node) {
             parentEle.appendChild(selectDropdownEle);
             // 鼠标按下
             selectDropdownEle.addEventListener('mousedown', (e) => {
-                setEventListener(e);
+                setEventListener(e, node.TID);
             });
         }
         // 添加当前节点到div层
         node.addToDiv();
     }else {
-        const selectNode = selectDataPool[node.id];
+        const selectNode = commonStore[node.TID].selectDataPool[node.id];
         if(selectNode.node.color === node.font.color && selectNode.node.fontSize === node.font.fontSize) return;
         const selectDom = selectNode.dom;
         if(!selectDom.selectInput) selectDom.selectInput = selectDom.selectEle.querySelector('.topology-select-input');

package/core/src/middles/nodes/iframe.js

@@ -1,28 +1,28 @@
 import {rectangle} from './rectangle';
-import {iframeDataPool} from '../../../../store';
 import {s8} from "../../utils";
 import {createIframeElement} from "../../element";
+import {commonStore} from "../../store";
 
 export function iframePrimeval(ctx, node) {
     //console.log('iframePrimeval############', node)
     // 绘制一个底图，类似于占位符。
     rectangle(ctx, node);
-    if (!iframeDataPool[node.id]) {
+    if (!commonStore[node.TID].iframeDataPool[node.id]) {
         node.elementId = s8();
-        iframeDataPool[node.id] = {
+        commonStore[node.TID].iframeDataPool[node.id] = {
             node: {
                 id: node.id,
                 src: node.iframe
             }
         };
         const iframe = createIframeElement(node);
-        iframeDataPool[node.id].iframe = iframe;
+        commonStore[node.TID].iframeDataPool[node.id].iframe = iframe;
         const parentEle = window.location.pathname.includes('workspace') ? document.getElementById('topology-canvas') : document.body;
         parentEle.appendChild(iframe);
         // 添加当前节点到div层
         node.addToDiv();
     }else {
-        const iframeNode = iframeDataPool[node.id];
+        const iframeNode = commonStore[node.TID].iframeDataPool[node.id];
         if(iframeNode.node.src === node.iframe) return;
         iframeNode.iframe.src = node.iframe;
     }

package/core/src/models/pen.js

@@ -3,7 +3,6 @@ import { s8 } from '../utils/uuid';
 import { Rect } from './rect';
 import { pointInRect } from '../utils/canvas';
 import { EventType, EventAction } from './event';
-import { setConfItemNode } from '../healps/changeData';
 export var PenType;
 (function (PenType) {
     PenType[PenType["Node"] = 0] = "Node";
@@ -108,6 +107,7 @@ var Pen = /** @class */ (function () {
             this.tipId = json.tipId;
             this.title = json.title;
             this.visible = json.visible !== false;
+            this.visibleSwitch = !!json.visibleSwitch; // 元件显示隐藏的开关量
             this.defaultFillStyle = json.defaultFillStyle || '';
             this.defaultFontColor = json.defaultFontColor || '';
             this.defaultStrokeStyle = json.defaultStrokeStyle || '';
@@ -131,7 +131,7 @@ var Pen = /** @class */ (function () {
         }
     }
     Pen.prototype.render = function (ctx) {
-        if (!this.visible && !window.location.pathname.includes('workspace')){
+        if (!this.visible && !this.visibleSwitch){
             return;
         }
         if (this.from && !this.to) {
@@ -248,54 +248,6 @@ var Pen = /** @class */ (function () {
             this[this.eventFns[item.action]] && this[this.eventFns[item.action]](item.value, item.params);
         }
     };
-    Pen.prototype.doSocketMqtt = function (item, msg, client) {
-        if (item.action < EventAction.Function) {
-            this[this.eventFns[item.action]](msg.value || msg || item.value, msg.params || item.params, client);
-        }
-        else if (item.action < EventAction.SetProps) {
-            if (item.action === EventAction.Function && item.value) return this[this.eventFns[item.action]](item.value, msg || item.params, client);
-            let jsonNode = msg;
-            if (typeof msg === 'string') {
-                try {
-                    jsonNode = JSON.parse(msg);
-                }catch (error) { }
-            }
-            console.log('doSocketMqtt-------------', jsonNode)
-            //const { areaData, assetData, data } = jsonNode
-            if (!this.data && this.data.length <= 0 && typeof this.data !== 'object') return
-            // const subscribeObj = {
-            //     areaData, assetData, data,
-            //     asset: ''
-            // }
-            jsonNode.asset = ''
-            Object.assign(this, setConfItemNode(this, jsonNode))
-        }
-        else if (item.action === EventAction.SetProps) {
-            var props = [];
-            var data = msg;
-            if (typeof msg === 'string') {
-                try {
-                    data = JSON.parse(msg);
-                }
-                catch (error) { }
-            }
-            if (Array.isArray(data)) {
-                props = data;
-            }
-            for (var _i = 0, props_1 = props; _i < props_1.length; _i++) {
-                var prop = props_1[_i];
-                if (prop.key) {
-                    if (typeof prop.value === 'object') {
-                        this[prop.key] = Object.assign(this[prop.key], prop.value);
-                    }
-                    else {
-                        this[prop.key] = prop.value;
-                    }
-                }
-            }
-            Store.set(this.generateStoreKey('LT:render'), true);
-        }
-    };
     Pen.prototype.show = function () {
         this.visible = true;
         return this;

package/core/src/options.d.ts

@@ -60,6 +60,7 @@ export interface Options {
     keydown?: KeydownType;
     viewPadding?: Padding;
     on?: (event: string, data: any) => void;
+    storeSubscribe?: boolean
 }
 export declare const DefalutOptions: Options;
 

package/core/src/options.js

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

package/core/src/preview.js

@@ -239,7 +239,12 @@ var Preview = (function (_super) {
             return;
         // 1. 重置画布尺寸为容器尺寸
         var parentElem = this.store.parentElem;
-        var width = parentElem.offsetWidth, height = parentElem.offsetHeight;
+        var width = parentElem.offsetWidth,
+            height = parentElem.offsetHeight;
+        if(this.store.options.storeSubscribe) {
+            width = this.store.options.width;
+            height = this.store.options.height;
+        }
         this.canvasResize({
             width: width,
             height: height,