@flexem/fc-gui 3.0.0-alpha.1 → 3.0.0-alpha.100

package/elements/video/video-element.js

@@ -5,12 +5,13 @@ import { TextElementModal } from '../shared/text/text-element';
 import { LOCALIZATION } from '../../localization';
 import { isNil } from 'lodash';
 export class VideoElement extends ConditionalDisplayElement {
-    constructor(element, injector, permissionChecker, variableCommunicator, variableStore, videoService, guiSize, svgRootClass) {
-        super(element, permissionChecker, variableCommunicator, variableStore);
+    constructor(element, injector, permissionChecker, variableCommunicator, variableStore, videoService, guiSize, svgRootClass, signalRAppId) {
+        super(element, permissionChecker, variableCommunicator, variableStore, signalRAppId);
         this.videoService = videoService;
         this.guiSize = guiSize;
         this.svgRootClass = svgRootClass;
         this.videoId = '';
+        this.isFullscreen = false;
         this.isMobileMode = DisplayMode.Mobile === injector.get(GlobalSettings).displayMode;
         this.localization = injector.get(LOCALIZATION);
         this.init();
@@ -50,12 +51,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 +70,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,16 +81,18 @@ 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>';
             }
             else {
@@ -100,10 +106,25 @@ 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);
+            }
+            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 +147,68 @@ 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);
+                }
             }
         });
     }
+    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

@@ -0,0 +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":27,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":28,"character":18},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":29,"character":27},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":30,"character":30},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":31,"character":23},{"__symbolic":"reference","module":"../../service","name":"VideoService","line":32,"character":39},{"__symbolic":"reference","module":"../../model","name":"Size","line":33,"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"}],"setIosVideo":[{"__symbolic":"method"}]}}}}]

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

@@ -1,5 +1,5 @@
 import { Injector, ElementRef } from '@angular/core';
-import { BsModalService } from 'ngx-bootstrap';
+import { BsModalService } from 'ngx-bootstrap/modal';
 import { Localization } from '../../localization';
 import { GraphStore, VariableStore } from '../../config';
 import { ViewOperationElementModel } from '../../model';
@@ -22,7 +22,7 @@ export declare class ViewOperationElement extends ConditionalEnableElement {
     private graphStateElement?;
     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);
+    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);
     private initElement;
     private switchToState;
     private initGraph;

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

@@ -9,8 +9,8 @@ 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) {
-        super(element, permissionChecker, variableCommunicator, variableStore, localization);
+    constructor(element, injector, modalService, variableCommunicator, variableStore, graphStore, permissionChecker, operationRecordService, securityChecker, localization, popupViewService, hostContainerId, el, signalRAppId) {
+        super(element, permissionChecker, variableCommunicator, variableStore, localization, signalRAppId);
         this.modalService = modalService;
         this.graphStore = graphStore;
         this.operationRecordService = operationRecordService;
@@ -170,6 +170,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 +180,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) {

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

@@ -0,0 +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"}]}}}}]

package/elements/weather/weater-element.d.ts

@@ -13,7 +13,7 @@ export declare class WeatherElement extends ConditionalDisplayElement {
     private readonly localization;
     protected readonly logger: LoggerService;
     timer: any;
-    constructor(element: HTMLElement, injector: Injector, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore, weatherService: WeatherService);
+    constructor(element: HTMLElement, injector: Injector, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore, weatherService: WeatherService, signalRAppId: string);
     dispose(): void;
     private initWeatherInfo;
     private clear;

package/elements/weather/weater-element.js

@@ -3,8 +3,8 @@ import { LOGGER_SERVICE_TOKEN } from '../../logger';
 import * as d3 from 'd3-selection';
 import { LOCALIZATION } from '../../localization';
 export class WeatherElement extends ConditionalDisplayElement {
-    constructor(element, injector, permissionChecker, variableCommunicator, variableStore, weatherService) {
-        super(element, permissionChecker, variableCommunicator, variableStore);
+    constructor(element, injector, permissionChecker, variableCommunicator, variableStore, weatherService, signalRAppId) {
+        super(element, permissionChecker, variableCommunicator, variableStore, signalRAppId);
         this.weatherService = weatherService;
         this.localization = injector.get(LOCALIZATION);
         this.logger = injector.get(LOGGER_SERVICE_TOKEN);
@@ -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/elements/weather/weater-element.metadata.json

@@ -0,0 +1 @@
+[{"__symbolic":"module","version":4,"metadata":{"WeatherElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../base/conditional-display-element","name":"ConditionalDisplayElement","line":12,"character":36},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":20,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":21,"character":18},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":22,"character":27},{"__symbolic":"reference","module":"../../communication/variable","name":"VariableCommunicator","line":23,"character":30},{"__symbolic":"reference","module":"../../config/variable","name":"VariableStore","line":24,"character":23},{"__symbolic":"reference","module":"../../service","name":"WeatherService","line":25,"character":41},{"__symbolic":"reference","name":"string"}]}],"dispose":[{"__symbolic":"method"}],"initWeatherInfo":[{"__symbolic":"method"}],"clear":[{"__symbolic":"method"}],"handleNotSupported":[{"__symbolic":"method"}],"handleGettingAddress":[{"__symbolic":"method"}],"handleNoAddress":[{"__symbolic":"method"}],"handleUnusualCommon":[{"__symbolic":"method"}],"handleNormal":[{"__symbolic":"method"}],"getRainPath":[{"__symbolic":"method"}],"getLocPath":[{"__symbolic":"method"}],"getWindPath":[{"__symbolic":"method"}],"getUnusualIconPath":[{"__symbolic":"method"}],"buildBackgroudRect":[{"__symbolic":"method"}],"buildTemperatureGroup":[{"__symbolic":"method"}],"buildWeather":[{"__symbolic":"method"}],"buildLocGroup":[{"__symbolic":"method"}],"buildWindGroup":[{"__symbolic":"method"}],"buildWeatherText":[{"__symbolic":"method"}],"buildUnusualTipIcon":[{"__symbolic":"method"}],"buildUnusualTipText":[{"__symbolic":"method"}],"appendWeatherSvg":[{"__symbolic":"method"}]}}}}]

package/gui/gui-context.d.ts

@@ -1,12 +1,13 @@
 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 } from '../service';
 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;

package/gui/gui-context.metadata.json

@@ -0,0 +1 @@
+[{"__symbolic":"module","version":4,"metadata":{"GuiContext":{"__symbolic":"interface"}}}]

package/gui/gui-host.d.ts

@@ -3,7 +3,7 @@ import { Size } from '../model';
 import { Disposable } from '../shared';
 import { ViewResizeMode } from '../settings';
 import { GuiContext } from './gui-context';
-import { BsModalService } from 'ngx-bootstrap';
+import { BsModalService } from 'ngx-bootstrap/modal';
 import { GuiOptions } from './interfaces/gui-options';
 export declare class GuiHost implements Disposable {
     private readonly injector;
@@ -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-host.js

@@ -55,7 +55,7 @@ export class GuiHost {
             throw new Error('The GuiHost already loaded.');
         }
         this.isLoaded = true;
-        this.containerEl = $(`<div class="svg-content" id= "${this.guiOptions.hostContainerId}" style="display: inline-block;position: relative;"></div>`);
+        this.containerEl = $(`<div class="svg-content" id= "${this.guiOptions.hostContainerId}" style="display:flex;position:relative;"></div>`);
         const result = new Promise((resolve, reject) => {
             if (configureViewId && configureViewId !== 0) {
                 this.loadViewConfigByConfigureViewId(resolve, reject, configureViewId);

package/gui/gui-host.metadata.json

@@ -0,0 +1 @@
+[{"__symbolic":"module","version":4,"metadata":{"GuiHost":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":23,"character":43},{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalService","line":23,"character":86},{"__symbolic":"reference","module":"./gui-context","name":"GuiContext","line":23,"character":120},{"__symbolic":"reference","module":"./interfaces/gui-options","name":"GuiOptions","line":24,"character":37},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":24,"character":62}]}],"load":[{"__symbolic":"method"}],"loadByConfigureViewCode":[{"__symbolic":"method"}],"loadMainViewConfig":[{"__symbolic":"method"}],"loadViewConfigByConfigureViewId":[{"__symbolic":"method"}],"loadViewConfigByConfigureViewCode":[{"__symbolic":"method"}],"handleViewConfigCallback":[{"__symbolic":"method"}],"resizeView":[{"__symbolic":"method"}],"updateViewSize":[{"__symbolic":"method"}],"updateViewResizeMode":[{"__symbolic":"method"}],"dispose":[{"__symbolic":"method"}]}}}}]

package/gui/gui-view.d.ts

@@ -1,6 +1,6 @@
 import { Injector, ElementRef } from '@angular/core';
 import { Observable } from 'rxjs';
-import { BsModalService } from 'ngx-bootstrap';
+import { BsModalService } from 'ngx-bootstrap/modal';
 import { ViewModel } from '../config';
 import { Size } from '../model';
 import { ViewResizeMode } from '../settings';
@@ -26,6 +26,7 @@ export declare class GuiView implements PopupViewService {
     private perViewVariableCommunicator;
     private svgRootClass;
     private isMobileMode;
+    private signalRAppId;
     constructor(injector: Injector, bsModalService: BsModalService, context: GuiContext, parentView?: GuiView);
     resize(size: Size, resizeMode: ViewResizeMode, svgRootClass: string): void;
     load(config: ViewModel, guiOptions: GuiOptions): void;

package/gui/gui-view.js

@@ -22,6 +22,7 @@ export class GuiView {
             parentView.childViews.push(this);
         }
         this.isMobileMode = DisplayMode.Mobile === injector.get(GlobalSettings).displayMode;
+        this.signalRAppId = Guid.newGuid().toString('n');
     }
     get element() {
         return this.mainElement.rootElement;
@@ -52,7 +53,7 @@ export class GuiView {
         const { context } = this;
         this.svgRootClass = guiOptions.svgRootClass;
         this.perViewVariableCommunicator = new PerViewVariableCommunicator(context.variableCommunicator);
-        this.mainElement = new MainElement(this.injector, this.bsModalService, context, this.perViewVariableCommunicator, this);
+        this.mainElement = new MainElement(this.injector, this.bsModalService, context, this.perViewVariableCommunicator, this, this.signalRAppId);
         this.mainElement.load(config.config, !!this.parentView, guiOptions);
         setTimeout(() => {
             this.loadElementState();
@@ -196,7 +197,7 @@ export class GuiView {
     }
     normalOpenedVariableNames(normalVariableNames) {
         if (normalVariableNames.length > 0) {
-            this.openVariablesSubscription = this.perViewVariableCommunicator.openVariables(normalVariableNames)
+            this.openVariablesSubscription = this.perViewVariableCommunicator.openVariables(normalVariableNames, this.signalRAppId)
                 .subscribe(variableValues => this.mainElement.reportVariableValues(variableValues));
         }
     }

package/gui/gui-view.metadata.json

@@ -0,0 +1 @@
+[{"__symbolic":"module","version":4,"metadata":{"GuiView":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":47,"character":43},{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalService","line":48,"character":41},{"__symbolic":"reference","module":"./gui-context","name":"GuiContext","line":49,"character":34},{"__symbolic":"reference","name":"GuiView"}]}],"resize":[{"__symbolic":"method"}],"load":[{"__symbolic":"method"}],"loadElementState":[{"__symbolic":"method"}],"popView":[{"__symbolic":"method"}],"closeView":[{"__symbolic":"method"}],"moveView":[{"__symbolic":"method"}],"showMusk":[{"__symbolic":"method"}],"showShadow":[{"__symbolic":"method"}],"hideMusk":[{"__symbolic":"method"}],"dispose":[{"__symbolic":"method"}],"normalOpenedVariableNames":[{"__symbolic":"method"}]}}}}]

package/gui/gui.component.d.ts

@@ -1,9 +1,8 @@
 import { ElementRef, EventEmitter, Injector, OnChanges, OnDestroy, SimpleChange } from '@angular/core';
-import { BsModalService } from 'ngx-bootstrap';
+import { BsModalService } from 'ngx-bootstrap/modal';
 import { Localization } from '../localization';
 import { Size } from '../model';
 import { GuiContext } from './gui-context';
-import * as i0 from "@angular/core";
 export declare class GuiComponent implements OnChanges, OnDestroy {
     private readonly el;
     private readonly localization;
@@ -25,10 +24,12 @@ export declare class GuiComponent implements OnChanges, OnDestroy {
     initHeight: number;
     lastScale: number;
     isMobileMode: boolean;
+    hostContainerId: string;
     private $svg;
     private host;
     private get viewResizeMode();
     private readonly globalSettings;
+    private readonly viewService;
     constructor(el: ElementRef, localization: Localization, injector: Injector, bsModalService: BsModalService);
     ngOnChanges(changes: {
         [propKey: string]: SimpleChange;
@@ -40,6 +41,5 @@ export declare class GuiComponent implements OnChanges, OnDestroy {
     private onSizeChanged;
     private onResizeModeChanged;
     private onDisplayModeChanged;
-    static ɵfac: i0.ɵɵFactoryDef<GuiComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDefWithMeta<GuiComponent, "fc-gui", never, { "context": "context"; "size": "size"; "resizeMode": "resizeMode"; "displayMode": "displayMode"; }, { "loadFailed": "loadFailed"; "loaded": "loaded"; }, never, never>;
+    refreshCurrentPage(): boolean;
 }

package/gui/gui.component.js

@@ -1,14 +1,25 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+var __param = (this && this.__param) || function (paramIndex, decorator) {
+    return function (target, key) { decorator(target, key, paramIndex); }
+};
 import { Component, ElementRef, EventEmitter, Inject, Injector, Input, Output } from '@angular/core';
 import { isNaN as lodashIsNaN, isEqual } from 'lodash';
-import { BsModalService } from 'ngx-bootstrap';
+import { BsModalService } from 'ngx-bootstrap/modal';
 import { LOCALIZATION } from '../localization';
 import { Size } from '../model';
 import { DisplayMode, GlobalSettings, ViewResizeMode } from '../settings';
 import { GuiHost } from './gui-host';
 import { Guid } from '../utils/guid';
-import * as i0 from "@angular/core";
-import * as i1 from "ngx-bootstrap";
-export class GuiComponent {
+import { ViewService } from '../view/view.service';
+let GuiComponent = class GuiComponent {
     constructor(el, localization, injector, bsModalService) {
         this.el = el;
         this.localization = localization;
@@ -19,6 +30,7 @@ export class GuiComponent {
         this.lastScale = 1;
         this.isMobileMode = false;
         this.globalSettings = this.injector.get(GlobalSettings);
+        this.viewService = injector.get(ViewService);
     }
     get viewResizeMode() {
         switch (this.resizeMode) {
@@ -121,11 +133,11 @@ export class GuiComponent {
             this.$svg = $(this.el.nativeElement).find('div.svgView').first();
             this.$svg.empty();
             const svgRootClass = 'S' + Guid.newGuid().toString('n');
-            const hostContainerId = 'H' + Guid.newGuid().toString('n');
+            this.hostContainerId = 'H' + Guid.newGuid().toString('n');
             this.$svg.addClass(svgRootClass);
             const guiOptions = {
                 svgRootClass: svgRootClass,
-                hostContainerId: hostContainerId,
+                hostContainerId: this.hostContainerId,
                 el: this.el
             };
             const host = new GuiHost(this.injector, this.bsModalService, newValue, guiOptions, this.el);
@@ -180,32 +192,49 @@ export class GuiComponent {
         this.isMobileMode = this.displayMode === 'Mobile';
         this.globalSettings.displayMode = this.isMobileMode ? DisplayMode.Mobile : DisplayMode.Web;
     }
-}
-GuiComponent.ɵfac = function GuiComponent_Factory(t) { return new (t || GuiComponent)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(LOCALIZATION), i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i1.BsModalService)); };
-GuiComponent.ɵcmp = i0.ɵɵdefineComponent({ type: GuiComponent, selectors: [["fc-gui"]], inputs: { context: "context", size: "size", resizeMode: "resizeMode", displayMode: "displayMode" }, outputs: { loadFailed: "loadFailed", loaded: "loaded" }, features: [i0.ɵɵNgOnChangesFeature], decls: 2, vars: 0, consts: [[1, "svgView", 2, "position", "relative", "display", "flex", "justify-content", "center", "align-items", "center"]], template: function GuiComponent_Template(rf, ctx) { if (rf & 1) {
-        i0.ɵɵelementStart(0, "div");
-        i0.ɵɵelement(1, "div", 0);
-        i0.ɵɵelementEnd();
-    } }, encapsulation: 2 });
-/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(GuiComponent, [{
-        type: Component,
-        args: [{
-                selector: 'fc-gui',
-                template: "<div> <div class='svgView' style=\"position: relative;display: flex;justify-content: center;align-items: center;\"></div> </div> "
-            }]
-    }], function () { return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
-                type: Inject,
-                args: [LOCALIZATION]
-            }] }, { type: i0.Injector }, { type: i1.BsModalService }]; }, { context: [{
-            type: Input
-        }], size: [{
-            type: Input
-        }], resizeMode: [{
-            type: Input
-        }], displayMode: [{
-            type: Input
-        }], loadFailed: [{
-            type: Output
-        }], loaded: [{
-            type: Output
-        }] }); })();
+    refreshCurrentPage() {
+        if (this.host.currentViewIndex === undefined) {
+            return false;
+        }
+        const toggleView = this.viewService.toggleViews.get(this.el);
+        if (!toggleView) {
+            return false;
+        }
+        toggleView(this.host.currentViewIndex, this.hostContainerId, this.el).subscribe();
+        return true;
+    }
+};
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], GuiComponent.prototype, "context", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Size)
+], GuiComponent.prototype, "size", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], GuiComponent.prototype, "resizeMode", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], GuiComponent.prototype, "displayMode", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", EventEmitter)
+], GuiComponent.prototype, "loadFailed", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", EventEmitter)
+], GuiComponent.prototype, "loaded", void 0);
+GuiComponent = __decorate([
+    Component({
+        selector: 'fc-gui',
+        template: "<div> <div class='svgView' style=\"position: relative;display: flex;justify-content: center;align-items: center;\"></div> </div> "
+    }),
+    __param(1, Inject(LOCALIZATION)),
+    __metadata("design:paramtypes", [ElementRef, Object, Injector,
+        BsModalService])
+], GuiComponent);
+export { GuiComponent };

package/gui/gui.component.metadata.json

@@ -0,0 +1 @@
+[{"__symbolic":"module","version":4,"metadata":{"GuiComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":12,"character":1},"arguments":[{"selector":"fc-gui","template":"<div> <div class='svgView' style=\"position: relative;display: flex;justify-content: center;align-items: center;\"></div> </div> "}]}],"members":{"context":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":5}}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":5}}]}],"resizeMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":5}}]}],"displayMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":5}}]}],"loadFailed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":22,"character":5}}]}],"loaded":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":23,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":50,"character":9},"arguments":[{"__symbolic":"reference","module":"../localization","name":"LOCALIZATION","line":50,"character":16}]}],null,null],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":49,"character":37},{"__symbolic":"reference","module":"../localization","name":"Localization","line":50,"character":61},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":51,"character":35},{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalService","line":52,"character":41}]}],"ngOnChanges":[{"__symbolic":"method"}],"doubleFingerZooming":[{"__symbolic":"method"}],"getDistance":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onProviderChanged":[{"__symbolic":"method"}],"onSizeChanged":[{"__symbolic":"method"}],"onResizeModeChanged":[{"__symbolic":"method"}],"onDisplayModeChanged":[{"__symbolic":"method"}],"refreshCurrentPage":[{"__symbolic":"method"}]}}}}]

package/gui/interfaces/gui-options.metadata.json

@@ -0,0 +1 @@
+[{"__symbolic":"module","version":4,"metadata":{"GuiOptions":{"__symbolic":"interface"}}}]

package/gui.module.d.ts

@@ -1,16 +1,2 @@
-import * as i0 from "@angular/core";
-import * as i1 from "./gui/gui.component";
-import * as i2 from "./modal/write-value/write-value-modal.component";
-import * as i3 from "./modal/confirm-operation/confirm-operation-modal.component";
-import * as i4 from "./modal/write-character/write-character-modal.component";
-import * as i5 from "./modal/alert/alert-modal.component";
-import * as i6 from "./utils/auto-focus.directive";
-import * as i7 from "./utils/bs-modal-drag.directive";
-import * as i8 from "./modal/verify-password/verify-password-modal.component";
-import * as i9 from "@angular/common";
-import * as i10 from "@angular/forms";
-import * as i11 from "ngx-bootstrap";
 export declare class GuiModule {
-    static ɵmod: i0.ɵɵNgModuleDefWithMeta<GuiModule, [typeof i1.GuiComponent, typeof i2.WriteValueModalComponent, typeof i3.ConfirmOperationModalComponent, typeof i4.WriteCharacterModalComponent, typeof i5.AlertModalComponent, typeof i6.AutoFocusDirective, typeof i7.BsModalDragDirective, typeof i8.VerifyPasswordModalComponent], [typeof i9.CommonModule, typeof i10.FormsModule, typeof i11.ModalModule, typeof i11.TabsModule, typeof i11.TooltipModule], [typeof i1.GuiComponent]>;
-    static ɵinj: i0.ɵɵInjectorDef<GuiModule>;
 }