@flexem/fc-gui 3.0.0-alpha.16 → 3.0.0-alpha.160

package/gui/gui-view.js

@@ -1,204 +1,265 @@
-import { LOGGER_SERVICE_TOKEN } from '../logger';
-import * as d3 from 'd3-selection';
-import { each, forEach } from 'lodash';
-import { map } from 'rxjs/operators';
-import { VariableStateEnum } from '../communication';
-import { MainElement } from '../elements/main-element';
-import { PerViewVariableCommunicator } from '../elements/per-view-variable-communicator';
-import { ViewPopupBackdropType, ViewPopupLocationType } from '../model';
-import { ViewResizeMode, DisplayMode, GlobalSettings } from '../settings';
-import { ConfigIsEmptyError } from '../shared';
-import { Guid } from '../utils/guid';
-export class GuiView {
-    constructor(injector, bsModalService, context, parentView) {
-        this.injector = injector;
-        this.bsModalService = bsModalService;
-        this.context = context;
-        this.parentView = parentView;
-        this.viewId = Guid.newGuid().toString('n');
-        this.logger = injector.get(LOGGER_SERVICE_TOKEN);
-        this.childViews = new Array();
-        if (parentView) {
-            parentView.childViews.push(this);
-        }
-        this.isMobileMode = DisplayMode.Mobile === injector.get(GlobalSettings).displayMode;
-        this.signalRAppId = Guid.newGuid().toString('n');
-    }
-    get element() {
-        return this.mainElement.rootElement;
-    }
-    get rawWidth() {
-        return this.mainElement.rawWidth;
-    }
-    get rawHeight() {
-        return this.mainElement.rawHeight;
-    }
-    resize(size, resizeMode, svgRootClass) {
-        if (!size) {
-            return;
-        }
-        if (!size.isReal()) {
-            throw new Error('invalid size.');
-        }
-        switch (resizeMode) {
-            case ViewResizeMode.HorizontalUniform:
-                this.mainElement.horizontalStretch(size);
-                break;
-            default:
-                this.mainElement.uniformStretch(size, svgRootClass);
-                break;
-        }
-    }
-    load(config, guiOptions) {
-        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.signalRAppId);
-        this.mainElement.load(config.config, !!this.parentView, guiOptions);
-        setTimeout(() => {
-            this.loadElementState();
-        }, 0);
-        this.logger.debug('[GUI] View loaded.');
-    }
-    loadElementState() {
-        if (!this.mainElement) {
-            return;
-        }
-        this.mainElement.initElementState();
-        if (this.openVariableStatesSubscription) {
-            this.openVariableStatesSubscription.unsubscribe();
-        }
-        if (this.openVariableStatesSubscription) {
-            this.openVariableStatesSubscription.unsubscribe();
-        }
-        this.openedVariableNames = this.mainElement.getVariableNames();
-        if (this.openedVariableNames.length === 0) {
-            return;
-        }
-        this.openVariableStatesSubscription =
-            this.perViewVariableCommunicator.subscribeVariableStates(this.openedVariableNames).subscribe((states) => {
-                this.mainElement.reportVariableStates(states);
-                const normalVariableNames = [];
-                each(states, v => {
-                    if (v.state === VariableStateEnum.Normal && normalVariableNames.indexOf(v.variableName) === -1) {
-                        normalVariableNames.push(v.variableName);
-                    }
-                });
-                if (normalVariableNames.length > 0) {
-                    this.normalOpenedVariableNames(normalVariableNames);
-                }
-            });
-    }
-    popView(viewIndex, hostContainerId, el) {
-        return this.context.configStore.viewStore.getViewConfig(viewIndex).pipe(map(view => {
-            if (!view.config || !view.config.length) {
-                throw new ConfigIsEmptyError();
-            }
-            const popView = new GuiView(this.injector, this.bsModalService, this.context, this);
-            const guiOptions = {
-                svgRootClass: this.svgRootClass,
-                hostContainerId: hostContainerId,
-                el: el
-            };
-            popView.load(view, guiOptions);
-            const settings = $(popView.element).data('model');
-            if (!settings.popup) {
-                return;
-            }
-            let x, y;
-            if (settings.popup.locationType === ViewPopupLocationType.Custom && settings.popup.location) {
-                x = settings.popup.location.x;
-                y = settings.popup.location.y;
-            }
-            else {
-                x = (this.rawWidth - popView.rawWidth) / 2;
-                y = (this.rawHeight - popView.rawHeight) / 2;
-            }
-            switch (settings.popup.backdropType) {
-                case ViewPopupBackdropType.Shadow:
-                    if (!this.isMobileMode) {
-                        popView.showShadow();
-                    }
-                    break;
-                case ViewPopupBackdropType.Musk:
-                    this.showMusk();
-                    break;
-            }
-            popView.element.setAttribute('x', String(x));
-            popView.element.setAttribute('y', String(y));
-            this.element.appendChild(popView.element);
-        }));
-    }
-    closeView() {
-        if (!this.parentView) {
-            return;
-        }
-        this.parentView.hideMusk();
-        this.dispose();
-        this.element.parentElement.removeChild(this.element);
-    }
-    moveView(movementX, movementY) {
-        const newX = Number(this.element.getAttribute('x')) + movementX;
-        const newY = Number(this.element.getAttribute('y')) + movementY;
-        this.element.setAttributeNS(null, 'x', String(newX));
-        this.element.setAttributeNS(null, 'y', String(newY));
-    }
-    showMusk() {
-        if (!this.muskElement) {
-            this.muskElement = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
-            this.muskElement.setAttribute('width', String(this.rawWidth));
-            this.muskElement.setAttribute('height', String(this.rawHeight));
-            this.muskElement.setAttribute('fill', '#081625');
-            this.muskElement.setAttribute('fill-opacity', '0.4');
-        }
-        this.element.appendChild(this.muskElement);
-    }
-    showShadow() {
-        const filterId = `dropshadow-${this.viewId}`;
-        const filter = d3.select(this.element).append('defs').append('filter').attr('id', filterId)
-            .attr('x', 0).attr('y', 0).attr('color-interpolation-filters', 'sRGB')
-            .attr('filterUnits', 'userSpaceOnUse');
-        const feComponentTransfer = filter.append('feDropShadow');
-        feComponentTransfer.attr('stdDeviation', '6').attr('flood-color', 'rgba(69,65,78,.3)');
-        filter.append('feOffset').attr('dx', 0).attr('dy', 0).attr('result', 'shadow');
-        filter.append('feComposite').attr('in', 'SourceGraphic').attr('in2', 'shadow').attr('operator', 'over');
-        const container = this.element.children[0];
-        if (!container) {
-            return;
-        }
-        container.setAttribute('filter', `url(#${filterId})`);
-        container.setAttribute('x', '6');
-        container.setAttribute('y', '6');
-        $(this.element).children('g').attr('transform', 'matrix(1, 0, 0, 1, 6, 6)');
-    }
-    hideMusk() {
-        if (this.muskElement) {
-            this.element.removeChild(this.muskElement);
-            this.muskElement = null;
-        }
-    }
-    dispose() {
-        if (this.openVariableStatesSubscription) {
-            this.openVariableStatesSubscription.unsubscribe();
-        }
-        if (this.openVariablesSubscription) {
-            this.openVariablesSubscription.unsubscribe();
-        }
-        if (this.perViewVariableCommunicator) {
-            this.perViewVariableCommunicator.dispose();
-        }
-        if (this.childViews && this.childViews.length) {
-            forEach(this.childViews, v => v.dispose());
-        }
-        if (this.mainElement) {
-            this.mainElement.dispose();
-        }
-        this.logger.debug('[GUI] View disposed.');
-    }
-    normalOpenedVariableNames(normalVariableNames) {
-        if (normalVariableNames.length > 0) {
-            this.openVariablesSubscription = this.perViewVariableCommunicator.openVariables(normalVariableNames, this.signalRAppId)
-                .subscribe(variableValues => this.mainElement.reportVariableValues(variableValues));
-        }
-    }
-}
+import { LOGGER_SERVICE_TOKEN } from '../logger';
+import * as d3 from 'd3-selection';
+import { each, forEach } from 'lodash';
+import { map } from 'rxjs/operators';
+import { VariableStateEnum, VariableState } from '../communication';
+import { MainElement } from '../elements/main-element';
+import { PerViewVariableCommunicator } from '../elements/per-view-variable-communicator';
+import { ViewPopupBackdropType, ViewPopupLocationType } from '../model';
+import { ViewResizeMode, DisplayMode, GlobalSettings } from '../settings';
+import { ConfigIsEmptyError } from '../shared';
+import { Guid } from '../utils/guid';
+import { GuiFeatureConfig } from '../config';
+export class GuiView {
+    constructor(injector, bsModalService, context, parentView) {
+        this.injector = injector;
+        this.bsModalService = bsModalService;
+        this.context = context;
+        this.parentView = parentView;
+        this.viewId = Guid.newGuid().toString('n');
+        this.openVariablesSubscriptions = [];
+        this.openedVariableNamesForValues = new Set();
+        this.logger = injector.get(LOGGER_SERVICE_TOKEN);
+        this.childViews = new Array();
+        if (parentView) {
+            parentView.childViews.push(this);
+        }
+        this.isMobileMode = DisplayMode.Mobile === injector.get(GlobalSettings).displayMode;
+        this.signalRAppId = Guid.newGuid().toString('n');
+    }
+    get element() {
+        return this.mainElement.rootElement;
+    }
+    get rawWidth() {
+        return this.mainElement.rawWidth;
+    }
+    get rawHeight() {
+        return this.mainElement.rawHeight;
+    }
+    resize(size, resizeMode, svgRootClass) {
+        if (!size) {
+            return;
+        }
+        if (!size.isReal()) {
+            throw new Error('invalid size.');
+        }
+        switch (resizeMode) {
+            case ViewResizeMode.HorizontalUniform:
+                this.mainElement.horizontalStretch(size);
+                break;
+            default:
+                this.mainElement.uniformStretch(size, svgRootClass);
+                break;
+        }
+    }
+    load(config, guiOptions) {
+        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.signalRAppId);
+        this.mainElement.load(config.config, !!this.parentView, guiOptions);
+        setTimeout(() => {
+            this.loadElementState();
+        }, 0);
+        this.logger.debug('[GUI] View loaded.');
+    }
+    loadElementState() {
+        var _a, _b;
+        if (!this.mainElement) {
+            return;
+        }
+        this.mainElement.initElementState();
+        if (this.openVariableStatesSubscription) {
+            this.openVariableStatesSubscription.unsubscribe();
+        }
+        if (this.openVariableStatesSubscription) {
+            this.openVariableStatesSubscription.unsubscribe();
+        }
+        this.openVariablesSubscriptions.forEach(s => s.unsubscribe());
+        this.openVariablesSubscriptions = [];
+        this.openedVariableNamesForValues.clear();
+        this.openedVariableNames = this.mainElement.getVariableNames();
+        // 分离系统变量和普通变量
+        const systemVariables = [];
+        const normalVariablesForState = [];
+        this.openedVariableNames.forEach(variableName => {
+            if (variableName === '当前语种ID') {
+                // 系统变量直接订阅，不需要等待状态
+                systemVariables.push(variableName);
+            }
+            else {
+                normalVariablesForState.push(variableName);
+            }
+        });
+        // 立即订阅系统变量
+        if (systemVariables.length > 0) {
+            this.normalOpenedVariableNames(systemVariables);
+        }
+        if (normalVariablesForState.indexOf('设备状态') !== -1) {
+            if (this.requestVirtualDeviceState) {
+                this.requestVirtualDeviceState.unsubscribe();
+            }
+            if (this.requestVirtualDeviceState) {
+                this.requestVirtualDeviceState.unsubscribe();
+            }
+            this.normalOpenedVariableNames(['设备状态']);
+            this.requestVirtualDeviceState =
+                this.perViewVariableCommunicator.requestVirtualDeviceState().subscribe({
+                    complete: () => { }
+                });
+            normalVariablesForState.splice(normalVariablesForState.indexOf('设备状态'), 1);
+        }
+        const validVariableNames = (_b = (_a = this.context.configStore.variableStore).getAllVariableNames) === null || _b === void 0 ? void 0 : _b.call(_a);
+        if (validVariableNames) {
+            const invalidVariables = normalVariablesForState.filter(name => !validVariableNames.includes(name));
+            if (invalidVariables.length > 0) {
+                const unbindStates = invalidVariables.map(name => new VariableState(name, VariableStateEnum.InvalidMonitor));
+                this.mainElement.reportVariableStates(unbindStates);
+                invalidVariables.forEach(name => {
+                    const idx = normalVariablesForState.indexOf(name);
+                    if (idx !== -1) {
+                        normalVariablesForState.splice(idx, 1);
+                    }
+                });
+            }
+        }
+        if (normalVariablesForState.length === 0) {
+            return;
+        }
+        this.openVariableStatesSubscription =
+            this.perViewVariableCommunicator.subscribeVariableStates(normalVariablesForState).subscribe((states) => {
+                this.mainElement.reportVariableStates(states);
+                const normalVariableNames = [];
+                each(states, v => {
+                    if ((v.state === VariableStateEnum.Normal || (GuiFeatureConfig.isOfflineDisplayEnabled && v.state === VariableStateEnum.Offline))
+                        && normalVariableNames.indexOf(v.variableName) === -1) {
+                        normalVariableNames.push(v.variableName);
+                    }
+                });
+                if (normalVariableNames.length > 0) {
+                    this.normalOpenedVariableNames(normalVariableNames);
+                }
+            });
+    }
+    popView(viewIndex, hostContainerId, el) {
+        return this.context.configStore.viewStore.getViewConfig(viewIndex).pipe(map(view => {
+            if (!view.config || !view.config.length) {
+                throw new ConfigIsEmptyError();
+            }
+            const popView = new GuiView(this.injector, this.bsModalService, this.context, this);
+            const guiOptions = {
+                svgRootClass: this.svgRootClass,
+                hostContainerId: hostContainerId,
+                el: el
+            };
+            popView.load(view, guiOptions);
+            const settings = $(popView.element).data('model');
+            if (!settings.popup) {
+                return;
+            }
+            let x, y;
+            if (settings.popup.locationType === ViewPopupLocationType.Custom && settings.popup.location) {
+                x = settings.popup.location.x;
+                y = settings.popup.location.y;
+            }
+            else {
+                x = (this.rawWidth - popView.rawWidth) / 2;
+                y = (this.rawHeight - popView.rawHeight) / 2;
+            }
+            switch (settings.popup.backdropType) {
+                case ViewPopupBackdropType.Shadow:
+                    if (!this.isMobileMode) {
+                        popView.showShadow();
+                    }
+                    break;
+                case ViewPopupBackdropType.Musk:
+                    this.showMusk();
+                    break;
+            }
+            popView.element.setAttribute('x', String(x));
+            popView.element.setAttribute('y', String(y));
+            this.element.appendChild(popView.element);
+        }));
+    }
+    closeView() {
+        if (!this.parentView) {
+            return;
+        }
+        this.parentView.hideMusk();
+        this.dispose();
+        this.element.parentElement.removeChild(this.element);
+    }
+    moveView(movementX, movementY) {
+        const newX = Number(this.element.getAttribute('x')) + movementX;
+        const newY = Number(this.element.getAttribute('y')) + movementY;
+        this.element.setAttributeNS(null, 'x', String(newX));
+        this.element.setAttributeNS(null, 'y', String(newY));
+    }
+    showMusk() {
+        if (!this.muskElement) {
+            this.muskElement = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+            this.muskElement.setAttribute('width', String(this.rawWidth));
+            this.muskElement.setAttribute('height', String(this.rawHeight));
+            this.muskElement.setAttribute('fill', '#081625');
+            this.muskElement.setAttribute('fill-opacity', '0.4');
+        }
+        this.element.appendChild(this.muskElement);
+    }
+    showShadow() {
+        const filterId = `dropshadow-${this.viewId}`;
+        const filter = d3.select(this.element).append('defs').append('filter').attr('id', filterId)
+            .attr('x', 0).attr('y', 0).attr('color-interpolation-filters', 'sRGB')
+            .attr('filterUnits', 'userSpaceOnUse');
+        const feComponentTransfer = filter.append('feDropShadow');
+        feComponentTransfer.attr('stdDeviation', '6').attr('flood-color', 'rgba(69,65,78,.3)');
+        filter.append('feOffset').attr('dx', 0).attr('dy', 0).attr('result', 'shadow');
+        filter.append('feComposite').attr('in', 'SourceGraphic').attr('in2', 'shadow').attr('operator', 'over');
+        const container = this.element.children[0];
+        if (!container) {
+            return;
+        }
+        container.setAttribute('filter', `url(#${filterId})`);
+        container.setAttribute('x', '6');
+        container.setAttribute('y', '6');
+        $(this.element).children('g').attr('transform', 'matrix(1, 0, 0, 1, 6, 6)');
+    }
+    hideMusk() {
+        if (this.muskElement) {
+            this.element.removeChild(this.muskElement);
+            this.muskElement = null;
+        }
+    }
+    dispose() {
+        if (this.openVariableStatesSubscription) {
+            this.openVariableStatesSubscription.unsubscribe();
+        }
+        if (this.requestVirtualDeviceState) {
+            this.requestVirtualDeviceState.unsubscribe();
+        }
+        if (this.virtualDeviceStatesChanged) {
+            this.virtualDeviceStatesChanged.unsubscribe();
+        }
+        if (this.openVariablesSubscriptions) {
+            this.openVariablesSubscriptions.forEach(s => s.unsubscribe());
+        }
+        if (this.perViewVariableCommunicator) {
+            this.perViewVariableCommunicator.dispose();
+        }
+        if (this.childViews && this.childViews.length) {
+            forEach(this.childViews, v => v.dispose());
+        }
+        if (this.mainElement) {
+            this.mainElement.dispose();
+        }
+        this.logger.debug('[GUI] View disposed.');
+    }
+    normalOpenedVariableNames(normalVariableNames) {
+        const newVariables = normalVariableNames.filter(v => !this.openedVariableNamesForValues.has(v));
+        if (newVariables.length > 0) {
+            newVariables.forEach(v => this.openedVariableNamesForValues.add(v));
+            const sub = this.perViewVariableCommunicator.openVariables(newVariables, this.signalRAppId)
+                .subscribe(variableValues => this.mainElement.reportVariableValues(variableValues));
+            this.openVariablesSubscriptions.push(sub);
+        }
+    }
+}

package/gui/gui-view.metadata.json

@@ -1 +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"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"GuiView":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":51,"character":43},{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalService","line":52,"character":41},{"__symbolic":"reference","module":"./gui-context","name":"GuiContext","line":53,"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,42 +1,45 @@
-import { ElementRef, EventEmitter, Injector, OnChanges, OnDestroy, SimpleChange } from '@angular/core';
-import { BsModalService } from 'ngx-bootstrap/modal';
-import { Localization } from '../localization';
-import { Size } from '../model';
-import { GuiContext } from './gui-context';
-export declare class GuiComponent implements OnChanges, OnDestroy {
-    private readonly el;
-    private readonly localization;
-    private readonly injector;
-    private readonly bsModalService;
-    context: GuiContext;
-    size: Size;
-    resizeMode: string;
-    displayMode: string;
-    loadFailed: EventEmitter<Error>;
-    loaded: EventEmitter<any>;
-    startTouch: any;
-    isTouch: boolean;
-    pageX: number;
-    pageY: number;
-    initX: number;
-    initY: number;
-    initWidth: number;
-    initHeight: number;
-    lastScale: number;
-    isMobileMode: boolean;
-    private $svg;
-    private host;
-    private get viewResizeMode();
-    private readonly globalSettings;
-    constructor(el: ElementRef, localization: Localization, injector: Injector, bsModalService: BsModalService);
-    ngOnChanges(changes: {
-        [propKey: string]: SimpleChange;
-    }): void;
-    doubleFingerZooming(): void;
-    getDistance(p1: any, p2: any): number;
-    ngOnDestroy(): void;
-    private onProviderChanged;
-    private onSizeChanged;
-    private onResizeModeChanged;
-    private onDisplayModeChanged;
-}
+import { ElementRef, EventEmitter, Injector, OnChanges, OnDestroy, SimpleChange } from '@angular/core';
+import { BsModalService } from 'ngx-bootstrap/modal';
+import { Localization } from '../localization';
+import { Size } from '../model';
+import { GuiContext } from './gui-context';
+export declare class GuiComponent implements OnChanges, OnDestroy {
+    private readonly el;
+    private readonly localization;
+    private readonly injector;
+    private readonly bsModalService;
+    context: GuiContext;
+    size: Size;
+    resizeMode: string;
+    displayMode: string;
+    loadFailed: EventEmitter<Error>;
+    loaded: EventEmitter<any>;
+    startTouch: any;
+    isTouch: boolean;
+    pageX: number;
+    pageY: number;
+    initX: number;
+    initY: number;
+    initWidth: number;
+    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;
+    }): void;
+    doubleFingerZooming(): void;
+    getDistance(p1: any, p2: any): number;
+    ngOnDestroy(): void;
+    private onProviderChanged;
+    private onSizeChanged;
+    private onResizeModeChanged;
+    private onDisplayModeChanged;
+    refreshCurrentPage(): boolean;
+}

package/gui/gui.component.html

@@ -1,3 +1,3 @@
-<div>
-  <div class='svgView' style="position: relative;display: flex;justify-content: center;align-items: center;"></div>
-</div>
+<div>
+  <div class='svgView' style="position: relative;display: flex;justify-content: center;align-items: center;"></div>
+</div>