@flexem/fc-gui 3.0.0-alpha.15 → 3.0.0-alpha.151

package/elements/video/video-element.d.ts

@@ -16,6 +16,12 @@ export declare class VideoElement extends ConditionalDisplayElement {
     private videoId;
     private isShow;
     private videoPlayer;
+    private refreshTimer;
+    private isFullscreen;
+    private videoUrl;
+    private visibilityChangeHandler;
+    private timeUpdateWatchdog;
+    private lastTimeUpdate;
     constructor(element: HTMLElement, injector: Injector, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore, videoService: VideoService, guiSize: Size, svgRootClass: string, signalRAppId: string);
     dispose(): void;
     hide(): void;
@@ -24,4 +30,8 @@ export declare class VideoElement extends ConditionalDisplayElement {
     private initVideo;
     private addVideoAddressToolTip;
     private setAndroidVideo;
+    private initVisibilityHandler;
+    private startTimeUpdateWatchdog;
+    private clearTimeUpdateWatchdog;
+    private setIosVideo;
 }

package/elements/video/video-element.js

@@ -11,8 +11,11 @@ export class VideoElement extends ConditionalDisplayElement {
         this.guiSize = guiSize;
         this.svgRootClass = svgRootClass;
         this.videoId = '';
+        this.isFullscreen = false;
+        this.lastTimeUpdate = 0;
         this.isMobileMode = DisplayMode.Mobile === injector.get(GlobalSettings).displayMode;
         this.localization = injector.get(LOCALIZATION);
+        this.initVisibilityHandler();
         this.init();
     }
     dispose() {
@@ -22,6 +25,10 @@ export class VideoElement extends ConditionalDisplayElement {
         $('div.' + this.svgRootClass + ' video').each(function () {
             $(this).remove();
         });
+        if (this.visibilityChangeHandler) {
+            document.removeEventListener('visibilitychange', this.visibilityChangeHandler);
+        }
+        this.clearTimeUpdateWatchdog();
     }
     hide() {
         super.hide();
@@ -50,12 +57,13 @@ export class VideoElement extends ConditionalDisplayElement {
             .attr('width', this.model.size.width)
             .attr('height', this.model.size.height);
         this.videoService.getVideoUrl(this.model.videoTag).then(result => {
-            this.initVideo(result.url, result.isMobileType, this.videoId);
+            this.videoUrl = result.url;
+            this.initVideo(result.url, this.videoId);
         }).catch(() => {
             throw new Error('Failure of the videoService');
         });
     }
-    initVideo(videoUrl, isMobileType, videoId) {
+    initVideo(videoUrl, videoId) {
         const patt = /https:.+.m3u8/;
         if (videoUrl.indexOf('http:') !== -1) {
             videoUrl = videoUrl.replace('http:', 'https:');
@@ -68,6 +76,8 @@ export class VideoElement extends ConditionalDisplayElement {
             this.addVideoAddressToolTip(videoToolTip);
             return;
         }
+        const isAndroid = !!navigator.userAgent.match(/(Android)/i);
+        const isIos = !!navigator.userAgent.match(/(Mac)/i);
         const currentRect = this.$element.find('rect#rect' + videoId).first();
         if (!currentRect.length) {
             return;
@@ -77,17 +87,19 @@ export class VideoElement extends ConditionalDisplayElement {
         const chartHeight = clientRect.height;
         const left = this.model.location.x / this.guiSize.width * $('.' + this.svgRootClass).find('.svg-content').width();
         const top = this.model.location.y / this.guiSize.height * $('.' + this.svgRootClass).find('.svg-content').height();
-        let videoHtml = `<video scareX="${this.model.location.x / this.guiSize.width}"
-    scareY="${this.model.location.y / this.guiSize.height}" id="${videoId}" src="${videoUrl}" style="
-    position: absolute;top:${top}px;left:${left}px;width:${chartWidth}px;height:${chartHeight}px;object-fit:fill;z-index:0"
-    playsInline webkit-playsinline `;
-        const isAndroid = !!navigator.userAgent.match(/(Android)/i);
+        const scareX = this.model.location.x / this.guiSize.width;
+        const scareY = this.model.location.y / this.guiSize.height;
+        if (isIos) {
+            videoUrl = videoUrl + '#t=1';
+        }
+        const preload = isIos ? ' preload=\'metadata\'' : '';
+        let videoHtml = `<video scareX="${scareX}"
+                scareY="${scareY}" id="${videoId}" ${preload} src="${videoUrl}" width="${chartWidth}" height="${chartHeight}"
+                style="position: absolute;top:${top}px;left:${left}px;object-fit:fill;z-index:0;"
+                playsInline webkit-playsinline `;
         if (this.isMobileMode) {
             if (isAndroid) {
-                if (isMobileType) {
-                    videoHtml += ' controls ';
-                }
-                videoHtml += ' autoplay muted></video>';
+                videoHtml += ' muted></video>';
             }
             else {
                 videoHtml += ' controls muted></video>';
@@ -100,10 +112,32 @@ export class VideoElement extends ConditionalDisplayElement {
         if (this.isShow === false) {
             $('#' + this.videoId).hide();
         }
-        this.videoPlayer = new EZUIPlayer(videoId);
-        if (isAndroid && !isMobileType) {
-            this.setAndroidVideo(videoId);
-        }
+        setTimeout(() => {
+            if (isAndroid) {
+                this.setAndroidVideo(videoId);
+            }
+            else if (isIos) {
+                this.setIosVideo(this.videoUrl, videoId);
+            }
+            try {
+                this.videoPlayer = new EZUIPlayer(videoId);
+                if (isAndroid) {
+                    // 确保在 EZUIPlayer 初始化后才调用 play 方法
+                    this.videoPlayer.on('canplay', () => {
+                        this.videoPlayer.play();
+                    });
+                }
+                this.startTimeUpdateWatchdog(videoId);
+            }
+            catch (err) {
+                console.log(err);
+            }
+        }, 1000);
+        const style = document.createElement('style');
+        style.innerHTML = `#${videoId}::-webkit-media-controls-enclosure {
+            display: none;
+        }`;
+        document.head.append();
     }
     addVideoAddressToolTip(videoToolTip) {
         const size = this.model.size;
@@ -126,35 +160,99 @@ export class VideoElement extends ConditionalDisplayElement {
         this.$element.append(textElement.Element);
     }
     setAndroidVideo(videoId) {
-        let isFullscreen = false;
         const videoElement = $('#' + videoId);
         let preHeight = videoElement.height();
         let preWidth = videoElement.width();
         let preTop = videoElement.css('top');
         let preLeft = videoElement.css('left');
+        const { StatusBar } = window;
         videoElement.on('click', () => {
-            if (!isFullscreen) {
+            if (!this.isFullscreen) {
+                if (StatusBar) {
+                    StatusBar.hide();
+                }
                 preHeight = videoElement.height();
                 preWidth = videoElement.width();
                 preTop = videoElement.css('top');
                 preLeft = videoElement.css('left');
-                const width = document.body.clientWidth;
-                const height = width * 9 / 16;
+                const width = document.documentElement.clientWidth;
+                const height = document.documentElement.clientHeight;
+                videoElement.css('object-fit', 'contain');
+                videoElement.css('background', '#000000');
                 videoElement.css('width', width + 'px');
                 videoElement.css('height', height + 'px');
                 videoElement.css('left', '0px');
                 videoElement.css('top', '0px');
                 videoElement.css('z-index', '99');
-                isFullscreen = true;
+                videoElement.css('position', 'fixed');
+                this.isFullscreen = true;
+                try {
+                    screen.orientation.lock(screen.orientation.type);
+                }
+                catch (error) {
+                    console.error(error);
+                }
             }
             else {
+                videoElement.css('object-fit', 'fill');
                 videoElement.css('width', preWidth + 'px');
                 videoElement.css('height', preHeight + 'px');
                 videoElement.css('left', preLeft);
                 videoElement.css('top', preTop);
                 videoElement.css('z-index', '0');
-                isFullscreen = false;
+                videoElement.css('position', 'absolute');
+                this.isFullscreen = false;
+                try {
+                    if (screen.orientation.type.includes('portrait')) {
+                        StatusBar.show();
+                    }
+                }
+                catch (error) {
+                    console.error(error);
+                }
+            }
+        });
+    }
+    initVisibilityHandler() {
+        this.visibilityChangeHandler = () => {
+            if (!document.hidden && this.videoUrl && this.videoId) {
+                this.initVideo(this.videoUrl, this.videoId);
             }
+        };
+        document.addEventListener('visibilitychange', this.visibilityChangeHandler);
+    }
+    startTimeUpdateWatchdog(videoId) {
+        this.clearTimeUpdateWatchdog();
+        this.lastTimeUpdate = Date.now();
+        const videoEl = document.getElementById(videoId);
+        if (videoEl && videoEl.tagName === 'VIDEO') {
+            videoEl.addEventListener('timeupdate', () => {
+                this.lastTimeUpdate = Date.now();
+            });
+        }
+        this.timeUpdateWatchdog = setInterval(() => {
+            if (document.hidden)
+                return;
+            if (Date.now() - this.lastTimeUpdate > 30000) {
+                this.initVideo(this.videoUrl, this.videoId);
+            }
+        }, 30000);
+    }
+    clearTimeUpdateWatchdog() {
+        if (this.timeUpdateWatchdog) {
+            clearInterval(this.timeUpdateWatchdog);
+            this.timeUpdateWatchdog = null;
+        }
+    }
+    setIosVideo(videoUrl, videoId) {
+        const video = $('#' + this.videoId);
+        video.on('webkitendfullscreen', () => {
+            video.remove();
+            clearTimeout(this.refreshTimer);
+            this.refreshTimer = null;
+            this.refreshTimer = setTimeout(() => {
+                this.initVideo(videoUrl, videoId);
+            }, 500);
         });
     }
 }

package/elements/video/video-element.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"VideoElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../base/conditional-display-element","name":"ConditionalDisplayElement","line":15,"character":34},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":23,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":24,"character":18},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":25,"character":27},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":26,"character":30},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":27,"character":23},{"__symbolic":"reference","module":"../../service","name":"VideoService","line":28,"character":39},{"__symbolic":"reference","module":"../../model","name":"Size","line":29,"character":34},{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","name":"string"}]}],"dispose":[{"__symbolic":"method"}],"hide":[{"__symbolic":"method"}],"show":[{"__symbolic":"method"}],"init":[{"__symbolic":"method"}],"initVideo":[{"__symbolic":"method"}],"addVideoAddressToolTip":[{"__symbolic":"method"}],"setAndroidVideo":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"VideoElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../base/conditional-display-element","name":"ConditionalDisplayElement","line":15,"character":34},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":30,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":31,"character":18},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":32,"character":27},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":33,"character":30},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":34,"character":23},{"__symbolic":"reference","module":"../../service","name":"VideoService","line":35,"character":39},{"__symbolic":"reference","module":"../../model","name":"Size","line":36,"character":34},{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","name":"string"}]}],"dispose":[{"__symbolic":"method"}],"hide":[{"__symbolic":"method"}],"show":[{"__symbolic":"method"}],"init":[{"__symbolic":"method"}],"initVideo":[{"__symbolic":"method"}],"addVideoAddressToolTip":[{"__symbolic":"method"}],"setAndroidVideo":[{"__symbolic":"method"}],"initVisibilityHandler":[{"__symbolic":"method"}],"startTimeUpdateWatchdog":[{"__symbolic":"method"}],"clearTimeUpdateWatchdog":[{"__symbolic":"method"}],"setIosVideo":[{"__symbolic":"method"}]}}}}]

package/elements/view-operation/view-operation.element.d.ts

@@ -3,11 +3,12 @@ import { BsModalService } from 'ngx-bootstrap/modal';
 import { Localization } from '../../localization';
 import { GraphStore, VariableStore } from '../../config';
 import { ViewOperationElementModel } from '../../model';
-import { PermissionChecker, OperationRecordService } from '../../service';
+import { PermissionChecker, OperationRecordService, TextLibraryService, LanguageService } from '../../service';
 import { VariableCommunicator } from '../../communication';
 import { ConditionalEnableElement } from '../base/conditional-enable-element';
 import { PopupViewService } from '../../view/popup-view.service';
 import { SecurityChecker } from '../../security';
+import { GuiContext } from '../../gui/gui-context';
 export declare class ViewOperationElement extends ConditionalEnableElement {
     private readonly modalService;
     private readonly graphStore;
@@ -16,13 +17,18 @@ export declare class ViewOperationElement extends ConditionalEnableElement {
     private readonly popupViewService;
     private readonly hostContainerId;
     private readonly el;
+    private readonly textLibraryService?;
+    private readonly languageService?;
+    private readonly guiContext?;
     protected model: ViewOperationElementModel;
     private readonly logger;
     private readonly viewService;
     private graphStateElement?;
+    private textElementModal?;
+    private languageChangeSubscription?;
     private touchedScreenX;
     private touchedScreenY;
-    constructor(element: HTMLElement, injector: Injector, modalService: BsModalService, variableCommunicator: VariableCommunicator, variableStore: VariableStore, graphStore: GraphStore, permissionChecker: PermissionChecker, operationRecordService: OperationRecordService, securityChecker: SecurityChecker, localization: Localization, popupViewService: PopupViewService, hostContainerId: string, el: ElementRef, signalRAppId: string);
+    constructor(element: HTMLElement, injector: Injector, modalService: BsModalService, variableCommunicator: VariableCommunicator, variableStore: VariableStore, graphStore: GraphStore, permissionChecker: PermissionChecker, operationRecordService: OperationRecordService, securityChecker: SecurityChecker, localization: Localization, popupViewService: PopupViewService, hostContainerId: string, el: ElementRef, signalRAppId: string, textLibraryService?: TextLibraryService, languageService?: LanguageService, guiContext?: GuiContext);
     private initElement;
     private switchToState;
     private initGraph;
@@ -33,4 +39,20 @@ export declare class ViewOperationElement extends ConditionalEnableElement {
     private closeView;
     private moveView;
     private recordViewOperation;
+    /**
+     * 订阅语种变化事件
+     */
+    private subscribeLanguageChange;
+    /**
+     * 更新文本内容（支持文本库和语种切换）
+     */
+    private updateTextContent;
+    /**
+     * 获取显示文本
+     */
+    private getDisplayText;
+    /**
+     * 释放资源
+     */
+    dispose(): void;
 }

package/elements/view-operation/view-operation.element.js

@@ -2,6 +2,7 @@ import { LOGGER_SERVICE_TOKEN } from '../../logger';
 import * as d3 from 'd3-selection';
 import { drag } from 'd3-drag';
 import { ViewOperationType } from '../../model';
+import { TextElementModal } from '../shared/text/text-element';
 import { ConditionalEnableElement } from '../base/conditional-enable-element';
 import { GraphStateElement } from '../shared/graph/graph-state-element';
 import { AlertModalComponent } from '../../modal/alert/alert-modal.component';
@@ -9,7 +10,7 @@ import { ConfirmOperationModalComponent } from '../../modal/confirm-operation/co
 import { VerifyPasswordModalComponent } from '../../modal/verify-password/verify-password-modal.component';
 import { ViewService } from '../../view/view.service';
 export class ViewOperationElement extends ConditionalEnableElement {
-    constructor(element, injector, modalService, variableCommunicator, variableStore, graphStore, permissionChecker, operationRecordService, securityChecker, localization, popupViewService, hostContainerId, el, signalRAppId) {
+    constructor(element, injector, modalService, variableCommunicator, variableStore, graphStore, permissionChecker, operationRecordService, securityChecker, localization, popupViewService, hostContainerId, el, signalRAppId, textLibraryService, languageService, guiContext) {
         super(element, permissionChecker, variableCommunicator, variableStore, localization, signalRAppId);
         this.modalService = modalService;
         this.graphStore = graphStore;
@@ -18,20 +19,27 @@ export class ViewOperationElement extends ConditionalEnableElement {
         this.popupViewService = popupViewService;
         this.hostContainerId = hostContainerId;
         this.el = el;
+        this.textLibraryService = textLibraryService;
+        this.languageService = languageService;
+        this.guiContext = guiContext;
         this.touchedScreenX = 0;
         this.touchedScreenY = 0;
         this.logger = injector.get(LOGGER_SERVICE_TOKEN);
         this.viewService = injector.get(ViewService);
         this.initElement();
+        this.subscribeLanguageChange();
     }
     initElement() {
         const width = this.model.size.width;
         const height = this.model.size.height;
+        // 在 initGraph 之前移除模板原有的 SVG <text>（改用 foreignObject 渲染，支持换行居中）
+        // 必须在 initGraph 前执行，否则会误删图形状态内部后续添加的文字节点
+        this.$element.find('text').remove();
         this.initGraph(width, height);
         this.rootElement.append('rect').attr('id', 'StateFrame').attr('width', width).attr('height', height).attr('fill', 'transparent');
-        const $dateTimeText = this.$element.find('text').last();
-        const fontStyle = this.model.label.font.fontStyle;
-        $dateTimeText.css('font', fontStyle + ',msyh');
+        const font = Object.assign(Object.assign({}, this.model.label.font), { fontFamily: this.model.label.font.fontFamily || 'msyh' });
+        this.textElementModal = new TextElementModal(this.getDisplayText(), font, width, height);
+        this.$element.append(this.textElementModal.Element);
         this.switchToState(0);
         this.rootElement.on('mousedown', () => {
             if (!this.isInitialized) {
@@ -170,6 +178,9 @@ export class ViewOperationElement extends ConditionalEnableElement {
         const viewIndex = this.model.viewIndex;
         if (null != viewIndex) {
             this.popupViewService.popView(viewIndex, this.hostContainerId, this.el).subscribe(() => this.recordViewOperation(), error => this.logger.error(`ToggleView(${viewIndex}) failed. ${error}`));
+            $(`#${this.hostContainerId} video`)
+                .addClass('video-hidden')
+                .css('visibility', 'hidden');
         }
         else {
             this.logger.error('[GUI]Toggle View:invalid view index');
@@ -177,6 +188,11 @@ export class ViewOperationElement extends ConditionalEnableElement {
     }
     closeView() {
         this.popupViewService.closeView();
+        if ($(`#${this.hostContainerId} > svg > svg`).length === 0) {
+            $(`#${this.hostContainerId} .video-hidden`)
+                .removeClass('video-hidden')
+                .css('visibility', 'visible');
+        }
         this.recordViewOperation();
     }
     moveView(movementX, movementY) {
@@ -191,4 +207,112 @@ export class ViewOperationElement extends ConditionalEnableElement {
             this.operationRecordService.record({ operationDescription: this.model.operationDescription });
         }
     }
+    /**
+     * 订阅语种变化事件
+     */
+    subscribeLanguageChange() {
+        if (this.guiContext && this.guiContext.languageChanged$) {
+            this.languageChangeSubscription = this.guiContext.languageChanged$.subscribe(() => {
+                this.updateTextContent();
+            });
+        }
+    }
+    /**
+     * 更新文本内容（支持文本库和语种切换）
+     */
+    updateTextContent() {
+        if (this.textElementModal) {
+            this.textElementModal.updateText(this.getDisplayText());
+        }
+    }
+    /**
+     * 获取显示文本
+     */
+    getDisplayText() {
+        var _a, _b, _c, _d, _e, _f;
+        // 检查是否使用文本库
+        if (this.model.textLibrary && this.model.textLibrary.labelType === 'textLibrary') {
+            const textLibraryId = this.model.textLibrary.selectedTextLibraryItem;
+            const textItem = this.model.textLibrary.selectedTextItem;
+            if (textLibraryId && textItem && this.textLibraryService) {
+                // 获取文本库数据
+                const textLibraryData = this.textLibraryService.getTextLibraryById(typeof textLibraryId === 'string' ? parseInt(textLibraryId, 10) : textLibraryId);
+                if (textLibraryData && textLibraryData.data) {
+                    // 查找对应的文本条目
+                    const textEntry = textLibraryData.data.find(entry => entry.key === textItem.toString());
+                    if (textEntry) {
+                        // 获取当前语种ID
+                        const currentLanguageId = (_c = (_b = (_a = this.guiContext) === null || _a === void 0 ? void 0 : _a.getCurrentLanguageId) === null || _b === void 0 ? void 0 : _b.call(_a)) !== null && _c !== void 0 ? _c : null;
+                        // 确定要使用的语种代码（culture）
+                        let targetLanguage;
+                        const defaultLanguage = ((_d = this.languageService) === null || _d === void 0 ? void 0 : _d.getDefaultLanguage()) || 'zh-CN';
+                        if (currentLanguageId === null || currentLanguageId === undefined) {
+                            // 设备未设置当前语种，使用默认语种
+                            targetLanguage = defaultLanguage;
+                        }
+                        else {
+                            // 设备已设置当前语种，获取对应的语种代码
+                            const currentLanguage = (_f = (_e = this.guiContext) === null || _e === void 0 ? void 0 : _e.getLanguageCultureById) === null || _f === void 0 ? void 0 : _f.call(_e, currentLanguageId);
+                            if (currentLanguage) {
+                                targetLanguage = currentLanguage;
+                            }
+                            else {
+                                // 无法获取语种代码，使用默认语种
+                                targetLanguage = defaultLanguage;
+                            }
+                        }
+                        // 返回对应语种的文本
+                        if (textEntry.cultures && textEntry.cultures[targetLanguage]) {
+                            return textEntry.cultures[targetLanguage];
+                        }
+                        // 如果没有对应语种，返回空字符串
+                        return '';
+                    }
+                }
+            }
+            // 文本库配置但未找到数据，返回空字符串
+            return '';
+        }
+        // 处理自定义文本（支持多语种）
+        if (this.model.label) {
+            // 获取目标语种（公共逻辑）
+            const getTargetLanguage = () => {
+                var _a, _b, _c, _d, _e, _f;
+                const currentLanguageId = (_c = (_b = (_a = this.guiContext) === null || _a === void 0 ? void 0 : _a.getCurrentLanguageId) === null || _b === void 0 ? void 0 : _b.call(_a)) !== null && _c !== void 0 ? _c : null;
+                const defaultLanguage = ((_d = this.languageService) === null || _d === void 0 ? void 0 : _d.getDefaultLanguage()) || 'zh-CN';
+                if (currentLanguageId === null || currentLanguageId === undefined) {
+                    return defaultLanguage;
+                }
+                return ((_f = (_e = this.guiContext) === null || _e === void 0 ? void 0 : _e.getLanguageCultureById) === null || _f === void 0 ? void 0 : _f.call(_e, currentLanguageId)) || defaultLanguage;
+            };
+            // 新格式：cultures 在 label 顶层
+            if (this.model.label.cultures && typeof this.model.label.cultures === 'object') {
+                return this.model.label.cultures[getTargetLanguage()] || '';
+            }
+            if (this.model.label.content) {
+                // 中间格式（兼容）：content 为 { cultures: {...} }
+                if (typeof this.model.label.content === 'object' && this.model.label.content.cultures) {
+                    return this.model.label.content.cultures[getTargetLanguage()] || '';
+                }
+                // 旧格式：字符串
+                if (typeof this.model.label.content === 'string') {
+                    return this.model.label.content;
+                }
+            }
+        }
+        return '';
+    }
+    /**
+     * 释放资源
+     */
+    dispose() {
+        // 取消语种变化订阅
+        if (this.languageChangeSubscription) {
+            this.languageChangeSubscription.unsubscribe();
+            this.languageChangeSubscription = undefined;
+        }
+        if (this.$element) {
+            this.$element.remove();
+        }
+    }
 }

package/elements/view-operation/view-operation.element.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"ViewOperationElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../base/conditional-enable-element","name":"ConditionalEnableElement","line":20,"character":42},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":31,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":31,"character":48},{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalService","line":32,"character":39},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":33,"character":30},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":34,"character":23},{"__symbolic":"reference","module":"../../config","name":"GraphStore","line":35,"character":37},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":36,"character":27},{"__symbolic":"reference","module":"../../service","name":"OperationRecordService","line":37,"character":49},{"__symbolic":"reference","module":"../../security","name":"SecurityChecker","line":38,"character":42},{"__symbolic":"reference","module":"../../localization","name":"Localization","line":39,"character":22},{"__symbolic":"reference","module":"../../view/popup-view.service","name":"PopupViewService","line":40,"character":43},{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":42,"character":29},{"__symbolic":"reference","name":"string"}]}],"initElement":[{"__symbolic":"method"}],"switchToState":[{"__symbolic":"method"}],"initGraph":[{"__symbolic":"method"}],"checkElementPassword":[{"__symbolic":"method"}],"executeViewOperation":[{"__symbolic":"method"}],"toggleView":[{"__symbolic":"method"}],"popView":[{"__symbolic":"method"}],"closeView":[{"__symbolic":"method"}],"moveView":[{"__symbolic":"method"}],"recordViewOperation":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"ViewOperationElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../base/conditional-enable-element","name":"ConditionalEnableElement","line":23,"character":42},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":36,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":36,"character":48},{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalService","line":37,"character":39},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":38,"character":30},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":39,"character":23},{"__symbolic":"reference","module":"../../config","name":"GraphStore","line":40,"character":37},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":41,"character":27},{"__symbolic":"reference","module":"../../service","name":"OperationRecordService","line":42,"character":49},{"__symbolic":"reference","module":"../../security","name":"SecurityChecker","line":43,"character":42},{"__symbolic":"reference","module":"../../localization","name":"Localization","line":44,"character":22},{"__symbolic":"reference","module":"../../view/popup-view.service","name":"PopupViewService","line":45,"character":43},{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":47,"character":29},{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","module":"../../service","name":"TextLibraryService","line":49,"character":46},{"__symbolic":"reference","module":"../../service","name":"LanguageService","line":50,"character":43},{"__symbolic":"reference","module":"../../gui/gui-context","name":"GuiContext","line":51,"character":38}]}],"initElement":[{"__symbolic":"method"}],"switchToState":[{"__symbolic":"method"}],"initGraph":[{"__symbolic":"method"}],"checkElementPassword":[{"__symbolic":"method"}],"executeViewOperation":[{"__symbolic":"method"}],"toggleView":[{"__symbolic":"method"}],"popView":[{"__symbolic":"method"}],"closeView":[{"__symbolic":"method"}],"moveView":[{"__symbolic":"method"}],"recordViewOperation":[{"__symbolic":"method"}],"subscribeLanguageChange":[{"__symbolic":"method"}],"updateTextContent":[{"__symbolic":"method"}],"getDisplayText":[{"__symbolic":"method"}],"dispose":[{"__symbolic":"method"}]}}}}]

package/elements/weather/weater-element.js

@@ -45,7 +45,6 @@ export class WeatherElement extends ConditionalDisplayElement {
     }
     handleGettingAddress() {
         this.handleUnusualCommon(this.localization.weatherNotAvailable);
-        setTimeout(() => this.initWeatherInfo(), 1000 * 60);
     }
     handleNoAddress() {
         this.handleUnusualCommon(this.localization.weatherNotAddress);

package/gui/gui-context.d.ts

@@ -1,16 +1,26 @@
 import { ConfigStore } from '../config';
 import { VariableCommunicator } from '../communication';
 import { SecurityChecker } from '../security';
-import { VideoService, WeatherService, PermissionChecker, OperationRecordService } from '../service';
+import { VideoService, WeatherService, PermissionChecker, OperationRecordService, ReleasedVariableService, TextLibraryService, LanguageService, SystemTextLibraryService } from '../service';
+import { Subject } from 'rxjs';
 export interface GuiContext {
     readonly configStore: ConfigStore;
     readonly variableCommunicator: VariableCommunicator;
     readonly permissionChecker: PermissionChecker;
     readonly operationRecordService: OperationRecordService;
+    readonly releasedVariableService: ReleasedVariableService;
     readonly securityChecker: SecurityChecker;
     readonly videoService: VideoService;
     readonly weatherService: WeatherService;
+    readonly textLibraryService?: TextLibraryService;
+    readonly languageService?: LanguageService;
+    readonly systemTextLibraryService?: SystemTextLibraryService;
     readonly configureViewId?: number;
     readonly configureViewCode?: string;
-    dispose(): any;
+    readonly languageChanged$?: Subject<number | null>;
+    getCurrentLanguageId?(): number | null;
+    getDefaultLanguageId?(): number;
+    getLanguageCultureById?(languageId: number | null): string | null;
+    updateCurrentLanguageId?(languageId: number | null): Promise<void>;
+    dispose(): void;
 }

package/gui/gui-host.d.ts

@@ -13,7 +13,7 @@ export declare class GuiHost implements Disposable {
     readonly el: ElementRef;
     private isLoaded;
     private currentView;
-    private currentViewIndex;
+    currentViewIndex: number;
     private containerEl;
     private currentViewSize;
     private currentViewReiszeMode;

package/gui/gui-view.d.ts

@@ -21,7 +21,10 @@ export declare class GuiView implements PopupViewService {
     private mainElement;
     private muskElement;
     private openVariableStatesSubscription;
-    private openVariablesSubscription;
+    private requestVirtualDeviceState;
+    private virtualDeviceStatesChanged;
+    private openVariablesSubscriptions;
+    private openedVariableNamesForValues;
     private openedVariableNames;
     private perViewVariableCommunicator;
     private svgRootClass;