dcim-topology2d 2.0.7 → 2.1.0

package/core/src/element/common.js

@@ -35,20 +35,20 @@ export function createDiv(node) {
     return div;
 }
 
-// export function loadJS(url, callback, render) {
-//     var loaderScript = document.createElement('script');
-//     loaderScript.type = 'text/javascript';
-//     loaderScript.src = url;
-//     loaderScript.addEventListener('load', function () {
-//         if (callback) {
-//             callback();
-//         }
-//         // how to do
-//         if (render) {
-//             Store.set('LT:render', true);
-//         }
-//     });
-//     document.body.appendChild(loaderScript);
-// }
+export function loadJS(url) {
+    var loaderScript = document.createElement('script');
+    loaderScript.type = 'text/javascript';
+    loaderScript.src = url;
+    document.body.appendChild(loaderScript);
+    window.datePickerRegister = true;
+    return new Promise((resolve, reject) => {
+        loaderScript.onload = function () {
+            resolve(true);
+        };
+        loaderScript.onerror = (e) => {
+            reject(e);
+        };
+    });
+}
 
 //# sourceMappingURL=dom.js.map

package/core/src/element/datePicker.d.ts

@@ -0,0 +1,3 @@
+import { Node } from '../models';
+export declare function createDatePickerElement(node: Node): HTMLElement;
+export declare function setDataPickerElementStyle(node: Node): void;

package/core/src/element/datePicker.js

@@ -0,0 +1,47 @@
+import {commonStore} from "../store";
+// 创建datePicker依赖DOM
+export function createDatePickerElement(node) {
+        const pickerBarEle = document.createElement('div');
+    pickerBarEle.setAttribute('id', node.id);
+    pickerBarEle.setAttribute('class', 'topology-datePicker');
+    pickerBarEle.innerHTML = `<svg class="icon-date" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14.000000" height="14.000000" fill="none" customFrame="#000000">
+\t<path id="icon-日历" d="M13.4167 1.16667L10.5 1.16667L10.5 0L9.33333 0L9.33333 1.16667L4.66667 1.16667L4.66667 0L3.5 0L3.5 1.16667L0.583333 1.16667C0.2625 1.16667 0 1.42917 0 1.75L0 13.4167C0 13.7375 0.2625 14 0.583333 14L13.4167 14C13.7375 14 14 13.7375 14 13.4167L14 1.75C14 1.42917 13.7375 1.16667 13.4167 1.16667ZM12.8333 12.8333L1.16667 12.8333L1.16667 4.66667L12.8333 4.66667L12.8333 12.8333ZM4.66667 7L2.33333 7L2.33333 5.83333L4.66667 5.83333L4.66667 7ZM8.16667 7L5.83333 7L5.83333 5.83333L8.16667 5.83333L8.16667 7ZM11.6667 7L9.33333 7L9.33333 5.83333L11.6667 5.83333L11.6667 7ZM4.66667 9.33333L2.33333 9.33333L2.33333 8.16667L4.66667 8.16667L4.66667 9.33333ZM8.16667 9.33333L5.83333 9.33333L5.83333 8.16667L8.16667 8.16667L8.16667 9.33333ZM11.6667 9.33333L9.33333 9.33333L9.33333 8.16667L11.6667 8.16667L11.6667 9.33333ZM4.66667 11.6667L2.33333 11.6667L2.33333 10.5L4.66667 10.5L4.66667 11.6667ZM8.16667 11.6667L5.83333 11.6667L5.83333 10.5L8.16667 10.5L8.16667 11.6667Z" fill="rgb(64,244,255)" fill-rule="nonzero" />
+</svg>
+                              <svg class="icon-arrow" viewBox="0 0 10 6" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="10.000000" height="6.000000" fill="none" customFrame="#000000">
+	<path id="箭头" d="M5 0C5.14734 0 5.28865 0.0632141 5.39284 0.175736L9.83728 4.97574C10.0542 5.21005 10.0542 5.58995 9.83728 5.82426C9.62032 6.05858 9.26857 6.05858 9.05161 5.82426L5 1.44853L0.948393 5.82426C0.731435 6.05858 0.379676 6.05858 0.162718 5.82426C-0.0542395 5.58995 -0.0542395 5.21005 0.162718 4.97574L4.60716 0.175736C4.71135 0.0632141 4.85266 0 5 0Z" fill="rgb(23,206,230)" fill-rule="evenodd" transform="matrix(1,0,0,-1,0,6)" />
+</svg>
+                              <input id='picker${node.id}' class="dataPickerInput" type="text" name='dataPicker${node.id}' placeholder="请选择" readonly />`;
+
+    return pickerBarEle;
+}
+
+// datePicker样式配置
+export function setDataPickerElementStyle(node) {
+    const {pickerDataPool, data} = commonStore[node.TID];
+    const pickerDom = pickerDataPool[node.id].dom;
+    
+    pickerDom.container.style.border = `${node.lineWidth}px solid ${node.strokeStyle}`;
+    pickerDom.container.style.borderRadius = `${node.borderRadius * 100}px`;
+    pickerDom.container.style.padding = `${node.paddingTop}px ${node.paddingRight}px ${node.paddingBottom}px ${node.paddingLeft}px`;
+    
+    if (!pickerDom.iconDate) pickerDom.iconDate = pickerDom.container.querySelector('.icon-date');
+    if (!pickerDom.iconArrow) pickerDom.iconArrow = pickerDom.container.querySelector('.icon-arrow');
+    if (!pickerDom.input) pickerDom.input = pickerDom.container.querySelector('.dataPickerInput');
+    
+    const round = `${node.font.fontSize + data.scale * 2}px`;
+    const parts = node.strokeStyle.match(/([\d.]+)/g);
+    const fillColor = parts ? `rgba(${parts[0]},${parts[1]},${parts[2]},1)` : node.strokeStyle;
+    
+    pickerDom.iconDate.style.width = round;
+    pickerDom.iconDate.style.height = round;
+    pickerDom.iconDate.style.left = `${node.font.fontSize}px`;
+    pickerDom.iconDate.querySelector('path').style.fill = fillColor;
+    
+    pickerDom.iconArrow.style.width = `${node.font.fontSize - data.scale * 2}px`;
+    pickerDom.iconArrow.style.height = `${node.font.fontSize - data.scale * 6}px`;
+    pickerDom.iconArrow.style.right = `${node.font.fontSize - data.scale * 2}px`;
+    pickerDom.iconArrow.querySelector('path').style.fill = fillColor;
+    
+    pickerDom.input.style.fontSize = `${node.font.fontSize}px`;
+    pickerDom.input.style.color = node.font.color;
+};

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

@@ -1,4 +1,5 @@
 export * from './common';
 export * from './iframe';
 export * from './select';
-export * from './tab';
+export * from './tab';
+export * from './datePicker';

package/core/src/element/index.js

@@ -1,4 +1,6 @@
 export * from './common';
 export * from './iframe';
 export * from './select';
-export * from './tab';
+export * from './tab';
+export * from './time';
+export * from './datePicker';

package/core/src/element/select.js

@@ -206,14 +206,26 @@ export function getSelectedData(e, data, editData) {
     }
     if(staticType === selectStaticType.visible) {
         // 显示隐藏
+        const optionNode = data.formData.bindBlockId && currentStore.echartsOptionsPool[data.formData.bindBlockId];
+        if(optionNode) {
+            // 有绑定图表则切换图表数据
+            const selecteRealData = currentStore.selectRealDataPool[optionNode.data.id];
+
+            selectNode.node.selected.id = selecteRealData && selecteRealData[order] && selecteRealData[order].id;
+
+            currentStore.echartsRealDataPool[optionNode.data.id] = currentStore.echartsRealDataPool[node.id];
+
+            setMapDataOptions(optionNode.option, optionNode.data);
+        }
         const optionsVisibleData = currentStore.selectTabDataPool[data.id];
         if(!optionsVisibleData || !optionsVisibleData.size) return;
         for(const [key, value] of optionsVisibleData){
-            const eque = node.id === value.tag;
+            const optionId = node.optionId || node.id;
+            const eque = optionId === value.tag;
             currentStore.data.pens[value.order].visible = eque;
             currentStore.data.pens[value.order].visibleSwitch = eque;
             value.visible = eque;
-            setElementSwitchTabState(value);
+            setElementSwitchTabState(currentStore.data.pens[value.order]);
         }
         Store.set(`${data.TID}-LT:render`, true);
     }

package/core/src/element/tab.js

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

package/core/src/element/time.d.ts

@@ -0,0 +1,3 @@
+import { Node } from '../models';
+
+export declare function createTimeElement(node: Node): HTMLTimeElement;

package/core/src/element/time.js

@@ -0,0 +1,44 @@
+// 创建时间组件
+export function createTimeElement(node) {
+  const timeBox = document.createElement('div');
+  // timeBox.scrolling = 'no';
+  timeBox.width = node.rect.width;
+  timeBox.height = node.rect.height;
+  let children = 
+  `<div class="timeWrapper" style="display: flex;flex-direction: initial; justify-content: center; font-size: ${node.font.fontSize}px;width:100%;height:100%; line-height:${timeBox.height}px; color:${node.font.color}; font-family:${node.font.fontFamily}">`+
+    `<div class="timeList" style="position: relative;display: flex; flex-direction: column;flex:4;height: 100%;overflow: hidden;text-align: center;">
+        <div class="timeBox" style="position: relative;width: 100%;height: 100%;overflow: hidden;">
+          <div class="timeTextUp h" style="position: relative;clip-path: polygon(0 0,100% 0,100% 49%,0 49%); background-color: rgba(255,255,255,0.1);border-radius: 20px;height: 100%;">${node.h}</div>
+          <div class="timeTextDown h" style="position: absolute;clip-path: polygon(0 51%,100% 51%,100% 100%,0 100%);left: 0;top: 0;width: 100%;height: 100%; background-color: rgba(255,255,255,0.1);border-radius: 20px;">${node.h}</div>
+        </div>
+      </div>`+ 
+    `<div class="split" style="flex:1; position: relative;line-height:${timeBox.height}px">:</div>`+
+    `<div class="timeList" style="position: relative;display: flex; flex-direction: column;flex:4;height: 100%;overflow: hidden;text-align: center;">
+        <div class="timeBox" style="position: relative;width: 100%;height: 100%;overflow: hidden;">
+          <div class="timeTextUp m" style="position: relative;clip-path: polygon(0 0,100% 0,100% 49%,0 49%); background-color: rgba(255,255,255,0.1);border-radius: 20px; height: 100%;">${node.m}</div>
+          <div class="timeTextDown m" style="position: absolute;clip-path: polygon(0 51%,100% 51%,100% 100%,0 100%);left: 0;top: 0;width: 100%;height: 100%; background-color: rgba(255,255,255,0.1);border-radius: 20px;">${node.m}</div>
+        </div>
+      </div>`+ 
+    `<div class="split" style="flex:1; position: relative;line-height:${timeBox.height}px">:</div>`+
+    `<div class="timeList" style="position: relative;display: flex; flex-direction: column;flex:4;height: 100%;overflow: hidden;text-align: center;">
+        <div class="timeBox" style="position: relative;width: 100%;height: 100%;overflow: hidden;">
+          <div class="timeTextUp s" style="position: relative;clip-path: polygon(0 0,100% 0,100% 49%,0 49%); background-color: rgba(255,255,255,0.1);border-radius: 20px; height: 100%;">${node.s}</div>
+          <div class="timeTextDown s" style="position: absolute;clip-path: polygon(0 51%,100% 51%,100% 100%,0 100%);left: 0;top: 0;width: 100%;height: 100%; background-color: rgba(255,255,255,0.1);border-radius: 20px;">${node.s}</div>
+        </div>
+      </div>`+ 
+  `</div>`
+  timeBox.setAttribute('id', node.id);
+  timeBox.setAttribute('class', 'topology2dConfTime');
+  timeBox.innerHTML = children;
+  return timeBox;
+}
+export function updateTimeStyle(node, time) {
+  time.querySelector('.timeWrapper').style.lineHeight = node.rect.height+'px';
+  time.querySelector('.timeWrapper').style.fontSize = node.font.fontSize+'px';
+  time.querySelector('.timeWrapper').style.fontFamily = node.font.fontFamily;
+  time.querySelector('.timeWrapper').style.color = node.font.color;
+  time.querySelectorAll('.split').forEach(element => {
+    element.style.lineHeight = node.rect.height+'px';
+  });
+
+}

package/core/src/middles/default.js

@@ -5,7 +5,7 @@ import {
   twowayArrow, twowayArrowIconRect, twowayArrowTextRect,
   rectangle, rectangleIconRect, rectangleTextRect,
   diamond, diamondIconRect, diamondTextRect,
-  text, file, formtable, tablePagination, iframePrimeval,formSelect,
+  text, file, formtable, tablePagination, iframePrimeval,formSelect, fromDatePicker,
   line as nodeLine, lineAnchors, lineIconRect, lineTextRect,
   circle, circleIconRect, circleTextRect, circleAnchors,
   triangle, triangleIconRect, triangleTextRect, triangleAnchors,
@@ -17,7 +17,7 @@ import {
   imageIconRect, imageTextRect,
   cube, cubeAnchors, cubeIconRect, cubeTextRect,
   people, peopleIconRect, peopleTextRect,
-  arbitraryGraph, arbitraryGraphAnchors,
+  arbitraryGraph, arbitraryGraphAnchors,time
 } from './nodes';
 import {
   line,
@@ -62,6 +62,8 @@ export var drawArrowFns = {};
 function init() {
     console.log('Init middles.');
     // ********Default nodes.*******
+    // datePicker
+    drawNodeFns.datePicker = fromDatePicker;
     // select
     drawNodeFns.select = formSelect;
     // iframe
@@ -199,6 +201,10 @@ function init() {
     drawArrowFns.lineUp = lineUp;
     drawArrowFns.lineDown = lineDown;
     // ********end********
+    // 当前时间
+    drawNodeFns.time = time;
+    iconRectFns.time = rectangleIconRect;
+    textRectFns.time = rectangleTextRect;
 }
 init();
 // registerNode: Register a custom node.

package/core/src/middles/nodes/formDatePicker.d.ts

@@ -0,0 +1,2 @@
+import { Node } from '../../models';
+export declare function fromDatePicker(ctx: CanvasRenderingContext2D, node: Node): void;

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

@@ -0,0 +1,66 @@
+import {Store} from 'le5le-store';
+import {rectangle} from './rectangle';
+import { createDatePickerElement, loadJS, setDataPickerElementStyle } from '../../element';
+import { s8 } from '../../utils';
+import {commonStore} from "../../store";
+
+export async function fromDatePicker(ctx, node) {
+    // 绘制一个底图，类似于占位符。 
+    rectangle(ctx, node);
+
+    if (!window.datePickerRegister) {
+        //未注册datePicker插件
+        const datePickerRegisterData = await loadJS(`${window.location.origin}/libary/laydate/laydate.js`).catch((e) => {
+            console.error('datePicker插件加载失败>>>', e);
+        });
+        if(!datePickerRegisterData) return;
+    }
+
+    const currentStore = commonStore[node.TID];
+
+    if (!currentStore.pickerDataPool[node.id]) {
+        // 未创建该元件
+        node.elementId = s8();
+        const datePicker = createDatePickerElement(node);
+        currentStore.pickerDataPool[node.id] = {
+            dom: {
+                container: datePicker
+            }
+        }
+        document.body.appendChild(datePicker);
+        // 添加当前节点到div层
+        node.addToDiv();
+        setDataPickerElementStyle(node);
+        if(window.location.pathname.includes('workspace') && currentStore.options.type === 'topology') return;
+        const pickerOptions = Object.keys(node.pickerOptions).reduce((a,k) => (node.pickerOptions[k] && (a[k]=node.pickerOptions[k]), a), {}); // 过滤空数据
+        if((pickerOptions.min || pickerOptions.max) && (pickerOptions.type !== 'year' || pickerOptions.type !== 'month')){
+            // 字符转换
+            if(pickerOptions.min && isValidInteger(pickerOptions.min)) pickerOptions.min = Number(pickerOptions.min);
+            if(pickerOptions.max && isValidInteger(pickerOptions.max)) pickerOptions.max = Number(pickerOptions.max);
+        }
+        pickerOptions.elem = `#picker${node.id}`;
+        pickerOptions.done = function (val, date) {
+            node.formData.selected = val
+            date.value = val;
+            Store.set(`${node.TID}-EVENT:change`, {node, date});
+        }
+        setTimeout(() => {
+
+            laydate.render(pickerOptions);
+
+        }, 100)
+    }else {
+        if(node.formData.resetStyle) {
+            setDataPickerElementStyle(node);
+            node.formData.resetStyle = false;
+        }
+        // if(!node.formData.render) return;
+        // node.formData.render = false;
+        // const pickerOptions = Object.keys(node.pickerOptions).reduce((a,k) => (node.pickerOptions[k] && (a[k]=node.pickerOptions[k]), a), {}); // 过滤空数据
+        // Object.assign(node.formData.datePicker.config, pickerOptions);
+        //resetDatePicker(node);
+    }
+}
+function isValidInteger(str) {
+    return /^-?\d+$/.test(str) && str !== '-' && !str.startsWith('+');
+}

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

@@ -38,7 +38,14 @@ export function formSelect(ctx, node) {
         let selectRealData = bindBlockId && currentStore.selectRealDataPool[bindBlockId];
         if(bindBlockId && selectRealData) {
             // select与echarts互相关联
+            if(node.formData.ids) {
+                const optionIds = node.formData.ids.split(',');
+                for (let i = 0; i < optionIds.length; i++) {
+                    if(selectRealData[i]) selectRealData[i].optionId = optionIds[i];
+                }
+            }
             currentStore.selectDataPool[node.id].data = selectRealData;
+            currentStore.selectDataPool[node.id].node.selected.id = selectRealData[0].id;
             const echartsData = currentStore.echartsDataPool[bindBlockId];
             echartsData ? echartsData.bindId = node.id : currentStore.echartsDataPool[bindBlockId] = {
                 bindId: node.id

package/core/src/middles/nodes/index.d.ts

@@ -45,4 +45,6 @@ export * from './text';
 export * from './triangle';
 export * from './triangle.anchor';
 export * from './triangle.rect';
-export * from './formoverflow';
+export * from './formoverflow';
+export * from './time';
+export * from './formDatePicker';

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

@@ -46,4 +46,7 @@ export * from './triangle';
 export * from './triangle.anchor';
 export * from './triangle.rect';
 export * from './formoverflow';
+export * from './time';
+export * from './formDatePicker';
+
 //# sourceMappingURL=index.js.map

package/core/src/middles/nodes/time.d.ts

@@ -0,0 +1,2 @@
+import { Node } from '../../models';
+export declare function time(ctx: CanvasRenderingContext2D, node: Node): void;

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

@@ -0,0 +1,98 @@
+export function time(ctx, node) {
+    var wr = node.borderRadius;
+    var hr = node.borderRadius;
+    if (node.borderRadius < 1) {
+        wr = node.rect.width * node.borderRadius;
+        hr = node.rect.height * node.borderRadius;
+    }
+    var r = wr < hr ? wr : hr;
+    if (node.rect.width < 2 * r) {
+        r = node.rect.width / 2;
+    }
+    if (node.rect.height < 2 * r) {
+        r = node.rect.height / 2;
+    }
+
+    // 背景
+    let x = node.rect.x;
+    let y = node.rect.y;
+    let width = node.rect.width * 0.29;
+    let height = node.rect.height;
+    let gap = node.rect.width * 0.065;
+    let {h, m, s} = node.time;
+
+    //绘制时
+    drawText(ctx, r, x, y, width, height, h, node, gap)
+
+    //绘制分
+    drawText(ctx, r, x+width+gap, y, width, height, m, node, gap)
+
+    //绘制秒
+    drawText(ctx, r, x+(width*2 + gap*2), y, width, height, s, node)
+
+    //恢复填充色
+    ctx.fillStyle = "#ffffff";
+
+
+}
+
+function drawText(ctx, r, x, y, width, height, hText, node, gap) {
+
+    //文字
+    let textfillStyle = node.font.color || "#ffffff";
+    let textBackground = node.font.background || '#ffffff1a';
+    ctx.font = '' + node.font.fontSize +"px " + node.font.fontFamily;
+    ctx.textBaseline = 'middle';
+    ctx.textAlign = 'center';
+
+    const centerX = width / 2;
+    const centerY = height / 2;
+    //绘制上半部分
+    ctx.save();
+    ctx.beginPath();
+    ctx.fillStyle = textBackground;
+    ctx.beginPath();
+    ctx.moveTo(x + r, y);
+    ctx.lineTo(x + width -r, y);
+    ctx.quadraticCurveTo(x + width, y, x+width, y+r);
+    ctx.lineTo(x+width, y + height/2 - 1);
+    ctx.lineTo(x, y + height/2 - 1);
+    ctx.lineTo(x, y+r);
+    ctx.quadraticCurveTo(x, y, x+r, y);
+    ctx.fill();
+    ctx.clip();
+
+    ctx.fillStyle = textfillStyle;
+    ctx.fillText(hText, x+centerX, y+centerY);
+    ctx.restore();
+    //绘制下半部分
+    ctx.save();
+    ctx.beginPath();
+    ctx.fillStyle = textBackground;
+    ctx.moveTo(x, y+height/2+1);
+    ctx.lineTo(x+width, y+height/2+1);
+    ctx.lineTo(x+width, y+height-r);
+    ctx.quadraticCurveTo(x+width, y+height, x+width-r, y+height);
+    ctx.lineTo(x+r, y+height);
+    ctx.quadraticCurveTo(x, y+height, x, y+height-r);
+    ctx.lineTo(x, y+height/2+2);
+    ctx.fill();
+    ctx.clip();
+    
+    ctx.fillStyle = textfillStyle;
+    ctx.fillText(hText, x+centerX, y+centerY);
+    ctx.restore();
+
+    //绘制冒号
+    if(!gap) return
+
+    ctx.fillStyle = textfillStyle;
+    ctx.textBaseline = 'middle';
+    ctx.textAlign = 'center';
+    let metricss = ctx.measureText(":");
+    const fontHeights = metricss.actualBoundingBoxAscent + metricss.actualBoundingBoxDescent;
+    const centerYY = y + (height / 2) + (metricss.actualBoundingBoxAscent - fontHeights / 2);
+    ctx.fillText(":", x+width+(gap/2), centerYY);
+    ctx.restore();
+
+}

package/core/src/models/node.js

@@ -57,6 +57,7 @@ var Node = /** @class */ (function (_super) {
         };
         _this.floorImageIndex = json.floorImageIndex || false;
         _this.formData = json.formData || null;
+        _this.pickerOptions = json.pickerOptions || null;
         _this.formStyle = json.formStyle || null;
         _this.formEvents = json.formEvents || [];
         _this.paginationData = json.paginationData || null;
@@ -144,6 +145,7 @@ var Node = /** @class */ (function (_super) {
         _this.video = json.video;
         _this.play = json.play;
         _this.nextPlay = json.nextPlay;
+        _this.time = json.time;
         if (json.elementLoaded !== undefined) {
             _this.elementId = null;
             _this.elementLoaded = false;
@@ -172,6 +174,16 @@ var Node = /** @class */ (function (_super) {
             _this.children = null;
         }
 
+        if(json.name === 'time') {
+            _this.animateFn = function() {
+                    let date = new Date();
+                    var hour = date.getHours() < 10 ?  "0" + date.getHours() : date.getHours();
+                    var minute = date.getMinutes() < 10 ?  "0" + date.getMinutes() : date.getMinutes();
+                    var second = date.getSeconds() < 10 ?  "0" + date.getSeconds() : date.getSeconds();
+                    _this.time = {h: hour, m:minute, s:second}
+            }
+        }
+
         return _this;
     }
     Node.cloneState = function (json) {
@@ -657,10 +669,21 @@ var Node = /** @class */ (function (_super) {
                 if (item.linear) {
                     // 线条左右流动动画
                     if([animateType.LeftFlow, animateType.RightFlow].includes(this.animateType) && item.state.lineDashOffset){
-                        const lineDashOffset = item.state.lineDashOffset;
-                        if (lineDashOffset > 100) item.state.lineDashOffset = 1;
-                        if (lineDashOffset < -100) item.state.lineDashOffset = -1;
-                        lineDashOffset > 0 ? item.state.lineDashOffset++ : item.state.lineDashOffset--;
+                        let o = item.state.lineDashOffset;
+                        switch (this.animateType) {
+                            case animateType.LeftFlow:
+                                o = Math.abs(o)
+                                if (o > 100) o = 1;
+                                o++ 
+                                
+                                break;
+                            case animateType.RightFlow:
+                                o = Math.abs(o)*-1
+                                if (o < -100) o = -1;
+                                o--
+                                break;
+                        }
+                        item.state.lineDashOffset = o
                         this.lineDashOffset = item.state.lineDashOffset;
                     }else if(([animateType.Show, animateType.Rotate].includes(this.animateType) || this.name === 'electricFan') && item.state.rotate !== item.initState.rotate) {
                         // 旋转动画，判断逻辑先这么写，日后将所有动画统一在编辑器中配置，再做优化

package/core/src/preview.d.ts

@@ -4,6 +4,7 @@ import { Point } from './models';
 import {Common} from './common';
 export declare class Preview extends Common{
     constructor(parent: string | HTMLElement, options?: Options);
+    private eventChangeSubcribe;
     private scheduledAnimationFrame;
     private onMouseMove;
     private onmousedown;

package/core/src/preview.js

@@ -35,6 +35,14 @@ var Preview = (function (_super) {
         var _this = _super.call(this, parent, options) || this;
         _this.offscreen.getRoutineLayer(['AnimateLayer']);
         _this.scheduledAnimationFrame = false;
+        _this.innerHeight = window.innerHeight || document.documentElement.clientHeight; // 初始化网页高度
+        _this.devicePixelInnerHeight = _this.innerHeight; // 初始化网页缩放高度
+        _this.devicePixelRatio = window.devicePixelRatio; // 初始化窗口分辨率
+        // 选中值发生变化时触发，目前用于日期切换
+        _this.eventChangeSubcribe = Store.subscribe(this.generateStoreKey('EVENT:change'), function (data) {
+            const {node, date} = data;
+            _this.dispatch('change', node, date); // eventOut外部事件
+        });
         _this.onMouseMove = function (e) {
             _this.store.data.dataResize = 0;
             // https://caniuse.com/#feat=mdn-api_mouseevent_buttons
@@ -105,7 +113,7 @@ var Preview = (function (_super) {
                         if (visibleRange == '1') {
                             _this.openCount++
                         }
-                        this.render();
+                        _this.render();
                         break;
                     case downDataType.Tabswitch:
                         _this.switchStaticsCheckType(_this.moveIn.hoverNode, _this.moveIn.eventNode);
@@ -181,14 +189,29 @@ var Preview = (function (_super) {
             return false;
         };
         window.onresize = function () {
-            const isFullScreen = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullscreenElement;
-            if(!isFullScreen && _this.isFullScreen){
-                _this.moveIn.hoverNode.text = '全屏';
+            let isFullScreen = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullscreenElement;
+            if((!isFullScreen && _this.isFullScreen) || window.keyControlFullScreen){
+                // F11或ESC退出全屏
+                if(!window.keyControlFullScreen) _this.moveIn.hoverNode.text = '全屏';
                 _this.fitViewPreview(_this.isFullScreen);
                 _this.isFullScreen = false;
+                window.keyControlFullScreen = false;
             }else {
-                // pageZoomOnly 表示topology页面只全局缩放，不对局部缩放进行调整，不执行render重绘。通常用于无任何操作事件的topology驾驶舱
-                if(_this.store.options.type === 'topology' || _this.store.options.type === 'pageZoomOnly') return;
+                const documentElementHeight = window.innerHeight || document.documentElement.clientHeight; // 每次窗口有变化就重新获取一次网页高度
+                if(window.devicePixelRatio !== _this.devicePixelRatio) {
+                    _this.devicePixelInnerHeight = documentElementHeight;
+                    _this.devicePixelRatio = window.devicePixelRatio;
+                }
+                if(_this.devicePixelInnerHeight < documentElementHeight && !isFullScreen) {
+                    // 按F11 全屏
+                    setTimeout(() => {
+                        _this.fitViewPreview(false);
+                        _this.isFullScreen = true;
+                    }, 200);
+                    window.keyControlFullScreen = true;
+                }
+                // topology编辑器或全屏下跳出程序
+                if(_this.store.options.type === 'topology' || window.keyControlFullScreen) return;
                 const screenWidth = window.screen.width < 1920 ? 1920 : window.screen.width;
                 const zoom = window.innerWidth < screenWidth ? document.documentElement.clientWidth / screenWidth : 1;
                 _this.isResize = true;
@@ -303,6 +326,7 @@ var Preview = (function (_super) {
     };
     Preview.prototype.destroy = function () {
         this.destroyStatic();
+        if(this.eventChangeSubcribe) this.eventChangeSubcribe.unsubscribe();
         this.onMouseMove = null;
         this.onmousedown = null;
         this.onmouseup = null;

package/core/src/renderLayer.js

@@ -93,7 +93,7 @@ var RenderLayer = /** @class */ (function (_super) {
         this.bkImg.src = bkImage;
         this.bkImg.onload = function () {
             if(pixi && !_this.bkImgRect) {
-                _this.bkImgRectResize({width: _this.canvas.width, height: _this.canvas.height});
+                _this.bkImgRectResize({width: _this.width, height: _this.height});
                 _this.scale(_this.ratio, undefined, _this.scaleX, _this.scaleY);
             }else {
                 //_this.bkImgRect = _this.coverRect(_this.canvas.width, _this.canvas.height, _this.bkImg.width, _this.bkImg.height);
@@ -137,10 +137,10 @@ var RenderLayer = /** @class */ (function (_super) {
     RenderLayer.prototype.bkImgRectResize = function (size) {
         const bkImageRect = commonStore[this.TID].data.bkImageRect;
         if(!size) return;
+        const { width, height } = size;
         if(bkImageRect) {
             let x = bkImageRect.x ? Number(bkImageRect.x) : 0;
             let y = bkImageRect.y ? Number(bkImageRect.y) : 0;
-            const { width, height } = size;
             let bkWidth = bkImageRect.width ? Number(bkImageRect.width) : width;
             let bkHeight = bkImageRect.height ? Number(bkImageRect.height) : height;
             this.bkImgRect = {
@@ -157,6 +157,17 @@ var RenderLayer = /** @class */ (function (_super) {
                 x,
                 y
             };
+        }else {
+            this.bkImgRect = {
+                center: {
+                    x: width / 2,
+                    y: height / 2
+                },
+                x: 0,
+                y: 0,
+                width,
+                height
+            };
         }
     };