dcim-topology2d 2.2.0 → 3.0.2

package/core/src/divLayer.d.ts

@@ -1,7 +1,37 @@
-import { Node } from './models';
+import { Options } from './options';
+import { Node } from './models/node';
+import { TopologyData } from './models/data';
 import { Layer } from './layer';
 export declare class DivLayer extends Layer {
+    parentElem: HTMLElement;
+    options: Options;
+    protected data: TopologyData;
     canvas: HTMLDivElement;
+    player: HTMLDivElement;
+    curNode: Node;
+    playBtn: HTMLElement;
+    currentTime: HTMLElement;
+    progressCurrent: HTMLElement;
+    progress: HTMLElement;
+    loop: HTMLElement;
+    media: HTMLMediaElement;
+    videos: {
+        [key: string]: {
+            player: HTMLElement;
+            current: HTMLElement;
+            media: HTMLMediaElement;
+        };
+    };
+    audios: {
+        [key: string]: {
+            player: HTMLElement;
+            current: HTMLElement;
+            media: HTMLMediaElement;
+        };
+    };
+    iframes: {
+        [key: string]: HTMLIFrameElement;
+    };
     elements: {
         [key: string]: HTMLElement;
     };
@@ -10,8 +40,12 @@ export declare class DivLayer extends Layer {
     };
     private subcribe;
     private subcribeNode;
-    constructor(TID: String);
+    constructor(parentElem: HTMLElement, options: Options, TID: String);
     addDiv: (node: Node) => void;
+    createPlayer(): void;
+    getMediaCurrent(): void;
+    addMedia(node: Node, type: string): HTMLDivElement;
+    playNext(next: string): void;
     addIframe(node: Node): HTMLIFrameElement;
     addGif(node: Node): HTMLImageElement;
     setElemPosition(node: Node, elem: HTMLElement): void;

package/core/src/divLayer.js

@@ -20,23 +20,53 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 import {Store} from 'le5le-store';
-import {Node, PenType, images, defaultImages} from './models';
+import {Node, images} from './models/node';
+import {Lock} from './models/status';
+import {PenType} from './models/pen';
 import {Layer} from './layer';
-import { setStyleForElementIdDiv } from './element';
-import { commonStore } from './store';
+import { setStyleForElementIdDiv, DomElements } from './utils'
 var DivLayer = /** @class */ (function (_super) {
     __extends(DivLayer, _super);
-    function DivLayer(TID) {
+
+    function DivLayer(parentElem, options, TID) {
+        if (options === void 0) {
+            options = {};
+        }
         var _this = _super.call(this, TID) || this;
+        _this.parentElem = parentElem;
+        _this.options = options;
         _this.canvas = document.createElement('div');
+        // _this.player = document.createElement('div');
+        // _this.videos = {};
+        // _this.audios = {};
+        _this.iframes = {};
         _this.elements = {};
         _this.gifs = {};
         _this.addDiv = function (node) {
+            // if (node.audio) {
+            //     if (_this.audios[node.id] && _this.audios[node.id].media.src !== node.audio) {
+            //         _this.audios[node.id].media.src = node.audio;
+            //     }
+            //     _this.setElemPosition(node, (_this.audios[node.id] && _this.audios[node.id].player) || _this.addMedia(node, 'audio'));
+            // }
+            // if (node.video) {
+            //     if (_this.videos[node.id] && _this.videos[node.id].media.src !== node.video) {
+            //         _this.videos[node.id].media.src = node.video;
+            //     }
+            //     _this.setElemPosition(node, (_this.videos[node.id] && _this.videos[node.id].player) || _this.addMedia(node, 'video'));
+            // }
+            if (node.iframe) {
+                if (_this.iframes[node.id] && _this.iframes[node.id].src !== node.iframe) {
+                    _this.iframes[node.id].src = node.iframe;
+                }
+                _this.setElemPosition(node, _this.iframes[node.id] || _this.addIframe(node));
+            }
             if (node.elementId) {
+                Object.assign(_this.elements, DomElements);
                 if (!_this.elements[node.id]) {
                     _this.elements[node.id] = document.getElementById(node.id);
                     if (_this.elements[node.id]) {
-                        _this.addElement(node);
+                        _this.canvas.appendChild(_this.elements[node.id]);
                     }
                 }
                 _this.setElemPosition(node, _this.elements[node.id]);
@@ -65,22 +95,249 @@ var DivLayer = /** @class */ (function (_super) {
                 }
             }
         };
+        _this.data = Store.get(_this.generateStoreKey('topology-data'));
+        // if (!_this.options.playIcon) {
+        //     _this.options.playIcon = 'iconfont icon-play';
+        // }
+        // if (!_this.options.pauseIcon) {
+        //     _this.options.pauseIcon = 'iconfont icon-pause';
+        // }
+        // if (!_this.options.fullScreenIcon) {
+        //     _this.options.fullScreenIcon = 'iconfont icon-full-screen';
+        // }
+        // if (!_this.options.loopIcon) {
+        //     _this.options.loopIcon = 'iconfont icon-loop';
+        // }
         _this.canvas.style.position = 'absolute';
         _this.canvas.style.left = '0';
         _this.canvas.style.top = '0';
         _this.canvas.style.outline = 'none';
         _this.canvas.style.background = 'transparent';
         _this.canvas.setAttribute('class', 'canvas-point');
-        commonStore[TID].parentElem.appendChild(_this.canvas);
+        parentElem.appendChild(_this.canvas);
+        // parentElem.appendChild(_this.player);
+        //_this.createPlayer();
         _this.subcribe = Store.subscribe(_this.generateStoreKey('LT:addDiv'), _this.addDiv);
+        // _this.subcribeNode = Store.subscribe(_this.generateStoreKey('LT:activeNode'), function (node) {
+        //     if (!node || (!node.video && !node.audio)) {
+        //         _this.player.style.top = '-99999px';
+        //         return;
+        //     }
+        //     if (node.audio && _this.audios[node.id]) {
+        //         _this.media = _this.audios[node.id].media;
+        //     }
+        //     else if (node.video && _this.videos[node.id]) {
+        //         _this.media = _this.videos[node.id].media;
+        //     }
+        //     else {
+        //         return;
+        //     }
+        //     _this.curNode = node;
+        //     _this.player.style.top = _this.parentElem.offsetTop + _this.parentElem.clientHeight + 'px';
+        //     _this.player.style.left = _this.parentElem.getBoundingClientRect().left + 'px';
+        //     _this.player.style.width = _this.parentElem.clientWidth + 'px';
+        //     _this.getMediaCurrent();
+        //     if (_this.media.paused) {
+        //         _this.playBtn.className = _this.options.playIcon;
+        //     }
+        //     else {
+        //         _this.playBtn.className = _this.options.pauseIcon;
+        //     }
+        // });
+        // document.addEventListener('fullscreenchange', function (e) {
+        //     if (!_this.media) {
+        //         return;
+        //     }
+        //     if (document.fullscreen) {
+        //         _this.media.controls = true;
+        //         _this.media.style.userSelect = 'initial';
+        //         _this.media.style.pointerEvents = 'initial';
+        //     }
+        //     else {
+        //         _this.media.style.userSelect = 'none';
+        //         _this.media.style.pointerEvents = 'none';
+        //         _this.media.controls = false;
+        //     }
+        // });
         return _this;
     }
-    DivLayer.prototype.addElement = function (node){
-        if(['iframe', 'echarts', 'formOverflow'].includes(node.name)) {
-            this.canvas.parentNode.appendChild(this.elements[node.id]);
-        }else {
-            this.canvas.appendChild(this.elements[node.id]);
+
+    DivLayer.prototype.createPlayer = function () {
+        var _this = this;
+        this.player.style.position = 'fixed';
+        this.player.style.outline = 'none';
+        this.player.style.top = '-99999px';
+        this.player.style.height = '40px';
+        this.player.style.padding = '10px 15px';
+        this.player.style.background = 'rgba(200,200,200,.1)';
+        this.player.style.display = 'flex';
+        this.player.style.alignItems = 'center';
+        this.player.style.userSelect = 'initial';
+        this.player.style.pointerEvents = 'initial';
+        this.player.style.zIndex = '1';
+        this.playBtn = document.createElement('i');
+        this.currentTime = document.createElement('span');
+        this.progress = document.createElement('div');
+        this.progressCurrent = document.createElement('div');
+        this.loop = document.createElement('i');
+        var fullScreen = document.createElement('i');
+        this.playBtn.className = this.options.playIcon;
+        this.playBtn.style.fontSize = '18px';
+        this.playBtn.style.lineHeight = '20px';
+        this.playBtn.style.cursor = 'pointer';
+        this.currentTime.style.padding = '0 10px';
+        this.currentTime.innerText = '0 / 0';
+        this.progress.style.position = 'relative';
+        this.progress.style.flexGrow = '1';
+        this.progress.style.top = '0';
+        this.progress.style.height = '4px';
+        this.progress.style.background = '#ccc';
+        this.progress.style.borderRadius = '2px';
+        this.progress.style.overflow = 'hidden';
+        this.progress.style.cursor = 'pointer';
+        this.progressCurrent.style.position = 'absolute';
+        this.progressCurrent.style.left = '0';
+        this.progressCurrent.style.top = '0';
+        this.progressCurrent.style.bottom = '0';
+        this.progressCurrent.style.width = '0';
+        this.progressCurrent.style.background = '#52c41a';
+        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.style.fontSize = '18px';
+        this.loop.style.lineHeight = '20px';
+        this.loop.style.cursor = 'pointer';
+        fullScreen.className = this.options.fullScreenIcon;
+        fullScreen.style.fontSize = '17px';
+        fullScreen.style.lineHeight = '20px';
+        fullScreen.style.cursor = 'pointer';
+        this.player.appendChild(this.playBtn);
+        this.player.appendChild(this.currentTime);
+        this.player.appendChild(this.progress);
+        this.progress.appendChild(this.progressCurrent);
+        this.player.appendChild(this.loop);
+        this.player.appendChild(fullScreen);
+        this.playBtn.onclick = function () {
+            if (_this.media.paused) {
+                _this.media.play();
+                _this.playBtn.className = _this.options.pauseIcon;
+            } else {
+                _this.media.pause();
+                _this.playBtn.className = _this.options.playIcon;
+            }
+        };
+        this.progress.onclick = function (e) {
+            _this.media.currentTime = (e.offsetX / _this.progress.clientWidth) * _this.media.duration;
+        };
+        this.loop.onclick = function () {
+            _this.media.loop = !_this.media.loop;
+            _this.curNode.playLoop = _this.media.loop;
+            if (_this.media.loop) {
+                _this.loop.style.background = '#ddd';
+            } else {
+                _this.loop.style.background = 'none';
+            }
+        };
+        fullScreen.onclick = function () {
+            _this.media.requestFullscreen();
+        };
+    };
+    DivLayer.prototype.getMediaCurrent = function () {
+        if (!this.media) {
+            return;
         }
+        this.currentTime.innerText =
+                this.formatSeconds(this.media.currentTime) + ' / ' + this.formatSeconds(this.media.duration);
+        this.progressCurrent.style.width =
+                (this.media.currentTime / this.media.duration) * this.progress.clientWidth + 'px';
+    };
+    DivLayer.prototype.addMedia = function (node, type) {
+        var _this = this;
+        var player = document.createElement('div');
+        var current = document.createElement('div');
+        var media = document.createElement(type);
+        current.style.position = 'absolute';
+        current.style.outline = 'none';
+        current.style.left = '0';
+        current.style.bottom = '0';
+        current.style.height = '2px';
+        current.style.background = '#52c41a';
+        media.style.position = 'absolute';
+        media.style.outline = 'none';
+        media.style.left = '0';
+        media.style.right = '0';
+        media.style.top = '0';
+        media.style.bottom = '0';
+        if (type === 'video') {
+            media.style.width = node.rect.width + 'px';
+            media.style.height = node.rect.height + 'px';
+        }
+        player.style.background = 'transparent';
+        if (node.play === 1) {
+            media.autoplay = true;
+        }
+        media.loop = node.playLoop;
+        media.ontimeupdate = function () {
+            current.style.width = (media.currentTime / media.duration) * node.rect.width + 'px';
+            _this.getMediaCurrent();
+            if (_this.media === media) {
+                if (node.playLoop) {
+                    media.loop = true;
+                    _this.loop.style.background = '#ddd';
+                } else {
+                    media.loop = false;
+                    _this.loop.style.background = 'none';
+                }
+            }
+        };
+        media.onended = function () {
+            Store.set(_this.generateStoreKey('mediaEnd'), node);
+            if (_this.media === media) {
+                _this.playBtn.className = _this.options.playIcon;
+            }
+            _this.playNext(node.nextPlay);
+        };
+        media.onloadedmetadata = function () {
+            _this.getMediaCurrent();
+        };
+        media.src = node[type];
+        player.appendChild(media);
+        player.appendChild(current);
+        this[type + 's'][node.id] = {
+            player: player,
+            current: current,
+            media: media
+        };
+        this.canvas.appendChild(player);
+        return player;
+    };
+    DivLayer.prototype.playNext = function (next) {
+        if (!next) {
+            return;
+        }
+        for (var _i = 0, _a = this.data.pens; _i < _a.length; _i++) {
+            var item = _a[_i];
+            if (!(item instanceof Node)) {
+                continue;
+            }
+            if (item.tags.indexOf(next) > -1) {
+                if (item.audio && this.audios[item.id] && this.audios[item.id].media && this.audios[item.id].media.paused) {
+                    this.audios[item.id].media.play();
+                } else if (item.video && this.videos[item.id].media && this.videos[item.id].media.paused) {
+                    this.videos[item.id].media.play();
+                }
+            }
+        }
+    };
+    DivLayer.prototype.addIframe = function (node) {
+        var iframe = document.createElement('iframe');
+        iframe.scrolling = 'no';
+        iframe.frameBorder = '0';
+        iframe.src = node.iframe;
+        this.iframes[node.id] = iframe;
+        this.canvas.appendChild(iframe);
+        return iframe;
     };
     DivLayer.prototype.addGif = function (node) {
         this.gifs[node.id] = node.img;
@@ -88,18 +345,30 @@ var DivLayer = /** @class */ (function (_super) {
         return node.img;
     };
     DivLayer.prototype.setElemPosition = function (node, elem) {
-        setStyleForElementIdDiv(node, elem, commonStore[this.TID].data);
+      setStyleForElementIdDiv(node, elem, this.data);
     };
     DivLayer.prototype.removeDiv = function (item) {
         if (this.curNode && item.id === this.curNode.id) {
             this.curNode = null;
+            // this.media = null;
+            // this.player.style.top = '-99999px';
+        }
+        // if (item.audio) {
+        //     this.canvas.removeChild(this.audios[item.id].player);
+        //     this.audios[item.id] = null;
+        // }
+        // if (item.video) {
+        //     this.canvas.removeChild(this.videos[item.id].player);
+        //     this.videos[item.id] = null;
+        // }
+        if (item.iframe) {
+            this.canvas.removeChild(this.iframes[item.id]);
+            this.iframes[item.id] = null;
         }
         if (item.elementId) {
-            const elementNode = this.elements[item.id];
-            if(elementNode) {
-                elementNode.parentNode.removeChild(elementNode);
-                this.elements[item.id] = null;
-            }
+            const elementNode = this.elements[item.id] || DomElements[item.id];
+            this.canvas.removeChild(elementNode);
+            this.elements[item.id] = null;
         }
         if (item.gif) {
             this.canvas.removeChild(this.gifs[item.id]);
@@ -117,15 +386,19 @@ var DivLayer = /** @class */ (function (_super) {
     };
     DivLayer.prototype.clear = function () {
         this.canvas.innerHTML = '';
+        //this.audios = {};
+        //this.videos = {};
+        this.iframes = {};
         this.elements = {};
         this.gifs = {};
+        for (var key in DomElements) {
+          delete DomElements[key];
+        }
         // tslint:disable-next-line:forin
-        for (let key in images) {
+        for (var key in images) {
             delete images[key];
         }
-        for (let key in defaultImages) {
-            delete defaultImages[key];
-        }
+        //this.player.style.top = '-99999px';
     };
     DivLayer.prototype.formatSeconds = function (seconds) {
         var h = Math.floor(seconds / 3600);
@@ -143,30 +416,25 @@ 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 (store.options.width && store.options.width !== 'auto') {
-                this.canvas.style.width = store.options.width + 'px';
+            if (this.options.width && this.options.width !== 'auto') {
+                this.canvas.style.width = this.options.width + 'px';
             } else {
-                this.canvas.style.width = store.parentElem.clientWidth + 'px';
+                this.canvas.style.width = this.parentElem.clientWidth + 'px';
             }
-            if (store.options.height && store.options.height !== 'auto') {
-                this.canvas.style.height = store.options.height + 'px';
+            if (this.options.height && this.options.height !== 'auto') {
+                this.canvas.style.height = this.options.height + 'px';
             } else {
-                this.canvas.style.height = store.parentElem.clientHeight - 8 + 'px';
+                this.canvas.style.height = this.parentElem.clientHeight - 8 + 'px';
             }
         }
-        store = null;
     };
     DivLayer.prototype.render = function () {
-        if(commonStore[this.TID] || !commonStore[this.TID].data) return;
-        for (var _i = 0, _a = commonStore[this.TID].data.pens; _i < _a.length; _i++) {
+        for (var _i = 0, _a = this.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);
             }
@@ -177,6 +445,8 @@ var DivLayer = /** @class */ (function (_super) {
     DivLayer.prototype.destroy = function () {
         this.clear();
         this.subcribe.unsubscribe();
+        //this.subcribeNode.unsubscribe();
+
         //优化
         this.canvas.onmousemove = null;
         this.canvas.onmousedown = null
@@ -187,6 +457,8 @@ 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

@@ -4,4 +4,5 @@ export declare function setConfItemNode(item: any[], syncData: Node): Node;
 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 getDetailData(data: Node): void;
+export declare function setStatisticalData(pen: Pen, data: any): Node;