@flexem/fc-gui 3.0.0-alpha.6 → 3.0.0-alpha.60

package/communication/variable/variable-communicator.d.ts

@@ -2,8 +2,8 @@ import { Observable } from 'rxjs';
 import { VariableValue } from './variable-value';
 import { VariableState } from './variable-state';
 export interface VariableCommunicator {
-    openVariable(variableName: string): Observable<VariableValue>;
-    openVariables(variableNames: Array<string>): Observable<Array<VariableValue>>;
+    openVariable(variableName: string, appId: string): Observable<VariableValue>;
+    openVariables(variableNames: Array<string>, appId: string): Observable<Array<VariableValue>>;
     write(variableName: string, value: any): Observable<VariableValue>;
     writeWordByBit(variableName: string, index: number, value: number): Observable<VariableValue>;
     subscribeVariableState(variableName: string): Observable<VariableState>;

package/elements/air-quality/air-quality-element.d.ts

@@ -0,0 +1,31 @@
+import { Injector } from '@angular/core';
+import { AirQualityModel } from '../../model/air-quality/air-quality.model';
+import { ConditionalDisplayElement } from '../base/conditional-display-element';
+import { PermissionChecker } from '../../service';
+import { VariableCommunicator } from '../../communication/variable';
+import { VariableStore } from '../../config/variable';
+import { WeatherService } from '../../service';
+export declare class AirQualityElement extends ConditionalDisplayElement {
+    private readonly weatherService;
+    model: AirQualityModel;
+    timer: any;
+    private readonly localization;
+    constructor(element: HTMLElement, injector: Injector, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore, weatherService: WeatherService, signalRAppId: string);
+    dispose(): void;
+    initAirQualityInfo(): void;
+    private handleData;
+    private handleNotSupported;
+    private handleGettingAddress;
+    private handleNoAddress;
+    private handleUnusualCommon;
+    private buildBackgroudRect;
+    private buildRectBackgroundForAqi;
+    private buildUnusualTipIcon;
+    getUnusualIconPath(): string;
+    private buildUnusualTipText;
+    private buildAirQualityText;
+    private buildLocGroup;
+    getLocPath(): string;
+    private appendAirQualitySvg;
+    clear(): void;
+}

package/elements/air-quality/air-quality-element.js

@@ -0,0 +1,195 @@
+import { ConditionalDisplayElement } from '../base/conditional-display-element';
+import * as d3 from 'd3-selection';
+import { LOCALIZATION } from '../../localization';
+export class AirQualityElement extends ConditionalDisplayElement {
+    constructor(element, injector, permissionChecker, variableCommunicator, variableStore, weatherService, signalRAppId) {
+        super(element, permissionChecker, variableCommunicator, variableStore, signalRAppId);
+        this.weatherService = weatherService;
+        this.localization = injector.get(LOCALIZATION);
+        this.initAirQualityInfo();
+        this.timer = setInterval(() => this.initAirQualityInfo(), 1000 * 60 * 60);
+    }
+    dispose() {
+        clearInterval(this.timer);
+    }
+    initAirQualityInfo() {
+        this.clear();
+        this.weatherService.getAirQualityInfo().then(airQuality => {
+            const airQualityDto = airQuality;
+            if (!airQualityDto.supported) {
+                this.handleNotSupported();
+                return;
+            }
+            if (airQualityDto.gettingAddress) {
+                this.handleGettingAddress();
+                return;
+            }
+            if (!airQualityDto.hasAddress) {
+                this.handleNoAddress();
+                return;
+            }
+            this.handleData(airQualityDto.airQuality);
+        }).catch(() => {
+            this.handleNotSupported();
+        });
+    }
+    handleData(airQuality) {
+        const fontColor = this.model.stroke ? this.model.stroke : '#FFFFFF';
+        const backgroundColor = this.model.fill && this.model.fill || '#86A7C5';
+        const airQualitySvg = d3.create('svg');
+        this.buildBackgroudRect(airQualitySvg, backgroundColor);
+        this.buildLocGroup(airQualitySvg, airQuality.city, fontColor);
+        this.buildAirQualityText(airQualitySvg, 130, 55, airQuality.aqi, fontColor, 53);
+        this.buildAirQualityText(airQualitySvg, 220, 28, '空气质量', fontColor);
+        this.buildRectBackgroundForAqi(airQualitySvg, airQuality.level);
+        this.buildAirQualityText(airQualitySvg, 220, 49, airQuality.category, fontColor);
+        this.buildAirQualityText(airQualitySvg, 30, 75, 'PM2.5', fontColor, 12, 0.8);
+        this.buildAirQualityText(airQualitySvg, 30, 95, airQuality.pm25, fontColor, 15);
+        this.buildAirQualityText(airQualitySvg, 80, 75, 'PM10', fontColor, 12, 0.8);
+        this.buildAirQualityText(airQualitySvg, 80, 95, airQuality.pm10, fontColor, 15);
+        this.buildAirQualityText(airQualitySvg, 130, 75, 'NO2', fontColor, 12, 0.8);
+        this.buildAirQualityText(airQualitySvg, 130, 95, airQuality.no2, fontColor, 15);
+        this.buildAirQualityText(airQualitySvg, 175, 75, 'SO2', fontColor, 12, 0.8);
+        this.buildAirQualityText(airQualitySvg, 175, 95, airQuality.so2, fontColor, 15);
+        this.buildAirQualityText(airQualitySvg, 215, 75, 'CO', fontColor, 12, 0.8);
+        this.buildAirQualityText(airQualitySvg, 215, 95, airQuality.co, fontColor, 15);
+        this.buildAirQualityText(airQualitySvg, 250, 75, 'O3', fontColor, 12, 0.8);
+        this.buildAirQualityText(airQualitySvg, 250, 95, airQuality.o3, fontColor, 15);
+        this.appendAirQualitySvg(airQualitySvg);
+    }
+    handleNotSupported() {
+        this.handleUnusualCommon(this.localization.airQualityNotSupport);
+    }
+    handleGettingAddress() {
+        this.handleUnusualCommon(this.localization.airQualityNotAvailable);
+        setTimeout(() => this.initAirQualityInfo(), 1000 * 60);
+    }
+    handleNoAddress() {
+        this.handleUnusualCommon(this.localization.airQualityNotAddress);
+    }
+    handleUnusualCommon(text) {
+        const airQualitySvg = d3.create('svg');
+        this.buildBackgroudRect(airQualitySvg, '#081625', '0.5');
+        this.buildUnusualTipIcon(airQualitySvg, text.length);
+        this.buildUnusualTipText(airQualitySvg, text);
+        this.appendAirQualitySvg(airQualitySvg);
+    }
+    buildBackgroudRect(airQualitySvg, backgroundColor, opacity = '1') {
+        airQualitySvg.append('rect')
+            .attr('x', '0')
+            .attr('y', '0')
+            .attr('rx', '2')
+            .attr('width', '280')
+            .attr('height', '105')
+            .attr('fill', backgroundColor)
+            .attr('fill-opacity', opacity);
+    }
+    buildRectBackgroundForAqi(airQualitySvg, level, opacity = '1') {
+        let backgroundColor;
+        if (level >= 0 && level <= 50) {
+            backgroundColor = '#50DF56';
+        }
+        else if (level >= 51 && level <= 100) {
+            backgroundColor = '#FBCD1C';
+        }
+        else if (level >= 101 && level <= 150) {
+            backgroundColor = '#FF9900';
+        }
+        else if (level >= 151 && level <= 200) {
+            backgroundColor = '#FF3232';
+        }
+        else if (level >= 201 && level <= 300) {
+            backgroundColor = '#F403B5';
+        }
+        else if (level > 300) {
+            backgroundColor = '#A10E0E';
+        }
+        airQualitySvg.append('rect')
+            .attr('x', '195')
+            .attr('y', '35')
+            .attr('rx', '5')
+            .attr('width', '50')
+            .attr('height', '20')
+            .attr('fill', backgroundColor)
+            .attr('fill-opacity', opacity);
+    }
+    buildUnusualTipIcon(airQualitySvg, length) {
+        airQualitySvg.append('svg')
+            .attr('x', length > 9 ? (268 - 7 * length - 8 - 42) / 2 : '44')
+            .attr('y', '23')
+            .attr('width', '42')
+            .attr('height', '34')
+            .attr('viewBox', '0 0 200 160')
+            .html(this.getUnusualIconPath);
+    }
+    getUnusualIconPath() {
+        return `<g>
+            <ellipse class="st2" cx="74.6" cy="72.3" rx="36.4" ry="36.3" fill="#EFCA30"/>
+            <path class="st2" fill="#EFCA30" d="M74.5,24.5C74.6,24.5,74.6,24.5,74.5,24.5c3.7,0,5.7-2,5.7-5.5V5.5C80.2,2,78,0,74.6,0C71,0,69,2.1,69,5.5V19
+            C69,22.3,71,24.4,74.5,24.5L74.5,24.5z"/>
+            <path class="st2" fill="#EFCA30" d="M37.2,28.5l-6.9-6.7c-1.3-1.3-2.7-1.9-4.1-1.9s-2.8,0.6-4.1,1.9c-1.3,1.3-1.9,2.6-1.9,4s0.6,2.7,1.9,4
+            l6.4,6.1c0.5,0.5,1.2,1.1,1.9,1.4c1.2,0.5,2,0.7,2.8,0.7c0.6,0,1.3-0.2,2-0.4c1.4-0.5,2.7-1.5,3.3-2.8c0.3-0.7,0.5-1.5,0.5-2.2
+            C39.1,31.2,38.5,29.8,37.2,28.5L37.2,28.5z"/>
+            <path class="st2" fill="#EFCA30" d="M112.5,36.9c1.6,0.7,2.7,1.2,3.7,1.2s2-0.4,3.6-1.2c0.2-0.1,0.4-0.2,0.5-0.4l6.9-6.7c1.3-1.3,1.9-2.6,1.9-4
+            s-0.6-2.7-1.9-4c-1.3-1.3-2.7-1.9-4.1-1.9s-2.8,0.6-4.1,1.9l-6.9,6.7c-1.3,1.3-1.9,2.6-1.9,4c0,1.4,0.6,2.7,1.9,4
+            C112.1,36.6,112.3,36.8,112.5,36.9L112.5,36.9z"/>
+            <path class="st2" fill="#EFCA30" d="M25.1,73.2C25.1,73.1,25.1,73.1,25.1,73.2c0-3.6-2-5.6-5.6-5.6H5.6C2,67.6,0,69.7,0,73.1
+            c0,3.4,2.2,5.5,5.6,5.5h13.8C22.7,78.6,24.9,76.6,25.1,73.2L25.1,73.2z"/>
+            <path class="st2" fill="#EFCA30" d="M33.2,107.6c-1.4,0-2.8,0.6-4.1,1.9l-6.9,6.7c-1.3,1.3-1.9,2.6-1.9,4s0.6,2.7,1.9,4c0.2,0.2,0.3,0.3,0.5,0.4
+            c1.6,0.7,2.7,1.2,3.7,1.2c0.5,0,1.5-0.1,3.6-1.2c0.2-0.1,0.4-0.2,0.5-0.4l6.9-6.7c2.6-2.5,2.6-5.6,0-8.1
+            C36,108.3,34.6,107.6,33.2,107.6L33.2,107.6z"/>
+            </g>
+            <path class="st3" fill="#FFFFFF" d="M68.8,160h99.3c17.9-2,31.9-17.1,31.9-35.5c0-18.3-13.8-33.3-31.5-35.4c-8-17-25.2-28.9-45.3-28.9
+            c-22.4,0-41.4,14.7-47.7,35c-1.1-0.1-2.2-0.2-3.4-0.2c-18,0-32.6,14.6-32.6,32.6C39.5,144.5,52.3,158.3,68.8,160z"/>`;
+    }
+    buildUnusualTipText(airQualitySvg, text) {
+        const length = text.length;
+        airQualitySvg.append('text')
+            .attr('x', length > 9 ? (268 - 7 * length - 8 - 42) / 2 + 42 + 8 : '94')
+            .attr('y', '46')
+            .attr('font-size', 14)
+            .attr('font-anchor', 'middle')
+            .attr('fill', '#FFFFFF')
+            .attr('dominant-baseline', 'central')
+            .text(text);
+    }
+    buildAirQualityText(airQualitySvg, x, y, text, fontColor, size = 12, opacity = 1) {
+        airQualitySvg.append('text')
+            .attr('x', x)
+            .attr('y', y)
+            .attr('font-size', size)
+            .attr('text-anchor', 'middle')
+            .attr('fill', fontColor)
+            .attr('opacity', opacity)
+            .text(text);
+    }
+    buildLocGroup(airQualitySvg, location, fontColor) {
+        airQualitySvg.append('svg')
+            .attr('x', '14')
+            .attr('y', '10')
+            .attr('width', '11')
+            .attr('height', '15')
+            .attr('viewBox', '0 0 156 200')
+            .append('path')
+            .attr('fill', fontColor)
+            .attr('d', this.getLocPath);
+        airQualitySvg.append('text')
+            .attr('x', '30')
+            .attr('y', '22')
+            .attr('font-size', '12')
+            .attr('fill', fontColor)
+            .text(location);
+    }
+    getLocPath() {
+        return `M78,0C35,0,0,33.3,0,74.3c0,50.8,55.5,105.4,72.6,120.9l5.3,4.8l5.3-4.7c0.7-0.6,72.5-64.6,72.8-121v0
+C156,33.3,121,0,78,0z M78,178.6c-17.8-17.1-62.1-63.9-62.1-104.4C15.8,42,43.7,15.7,78,15.7c34.3,0,62.2,26.3,62.2,58.5
+C140,111.8,99.2,158.4,78,178.6z M78,40.4c-17.8,0-32.4,14.4-32.4,32.2s14.5,32.2,32.4,32.2s32.4-14.4,32.4-32.2S95.8,
+40.4,78,40.4z M78,89.1c-9.1,0-16.5-7.4-16.5-16.5S68.9,56.2,78,56.2s16.5,7.4,16.5,16.5S87.1,89.1,78,89.1z`;
+    }
+    appendAirQualitySvg(airQualitySvg) {
+        this.rootElement.append(() => airQualitySvg.node());
+    }
+    clear() {
+        this.rootElement.selectAll('*').remove();
+    }
+}

package/elements/air-quality/air-quality-element.metadata.json

@@ -0,0 +1 @@
+[{"__symbolic":"module","version":4,"metadata":{"AirQualityElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../base/conditional-display-element","name":"ConditionalDisplayElement","line":11,"character":39},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":18,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":19,"character":18},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":20,"character":27},{"__symbolic":"reference","module":"../../communication/variable","name":"VariableCommunicator","line":21,"character":30},{"__symbolic":"reference","module":"../../config/variable","name":"VariableStore","line":22,"character":23},{"__symbolic":"reference","module":"../../service","name":"WeatherService","line":23,"character":41},{"__symbolic":"reference","name":"string"}]}],"dispose":[{"__symbolic":"method"}],"initAirQualityInfo":[{"__symbolic":"method"}],"handleData":[{"__symbolic":"method"}],"handleNotSupported":[{"__symbolic":"method"}],"handleGettingAddress":[{"__symbolic":"method"}],"handleNoAddress":[{"__symbolic":"method"}],"handleUnusualCommon":[{"__symbolic":"method"}],"buildBackgroudRect":[{"__symbolic":"method"}],"buildRectBackgroundForAqi":[{"__symbolic":"method"}],"buildUnusualTipIcon":[{"__symbolic":"method"}],"getUnusualIconPath":[{"__symbolic":"method"}],"buildUnusualTipText":[{"__symbolic":"method"}],"buildAirQualityText":[{"__symbolic":"method"}],"buildLocGroup":[{"__symbolic":"method"}],"getLocPath":[{"__symbolic":"method"}],"appendAirQualitySvg":[{"__symbolic":"method"}],"clear":[{"__symbolic":"method"}]}}}}]

package/elements/bar-graph-element.d.ts

@@ -5,6 +5,8 @@ import { ReadableElement } from './base/readable-element';
 import { VariableStore } from '../config';
 import { PermissionChecker } from '../service';
 export declare class BarGraphElement extends ReadableElement {
+    private static DEFAULT_MIN_VALUE;
+    private static DEFAULT_MAX_VALUE;
     readonly model: BarGraph;
     private readonly $barRect;
     private readonly barElement;
@@ -14,8 +16,12 @@ export declare class BarGraphElement extends ReadableElement {
     private defaultUpperLimitColor;
     private defaultLowerLimitColor;
     private barText;
+    private valueObj;
+    private isNeedUpdateScale;
     get readVariableName(): string;
-    constructor(element: HTMLElement, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore, localization: Localization);
+    constructor(element: HTMLElement, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore, localization: Localization, signalRAppId: string);
     private initFrameNode;
-    updateVariableValue(value: number): void;
+    private updateValueObj;
+    private updateScale;
+    updateVariableValue(value: number, variableName: any): void;
 }

package/elements/bar-graph-element.js

@@ -2,13 +2,22 @@ import { BarGraphDirection } from '../model';
 import { ReadableElement } from './base/readable-element';
 import { calculatePercent } from './shared/math-utils';
 import { VariableUtil } from '../utils/variable-util';
+import { VariableValueType } from '../model/shared/condition/variable-value-type';
 export class BarGraphElement extends ReadableElement {
-    constructor(element, permissionChecker, variableCommunicator, variableStore, localization) {
-        super(element, permissionChecker, variableCommunicator, variableStore, localization);
+    constructor(element, permissionChecker, variableCommunicator, variableStore, localization, signalRAppId) {
+        super(element, permissionChecker, variableCommunicator, variableStore, localization, signalRAppId);
         this.defaultBarColor = '#6fd149';
         this.defaultUpperLimitColor = '#ff4448';
         this.defaultLowerLimitColor = '#0f60e8';
         this.barText = '';
+        this.valueObj = {};
+        this.isNeedUpdateScale = false;
+        if ((this.model.minValueType === VariableValueType.Constant && this.model.maxValueType === VariableValueType.Variable)
+            || this.model.maxValueType === VariableValueType.Constant && this.model.minValueType === VariableValueType.Variable) {
+            this.isNeedUpdateScale = true;
+            this.updateScale();
+            this.isNeedUpdateScale = false;
+        }
         this.$barRect = this.$element.find('rect');
         this.$barText = this.$element.find('text[id="text"]').last();
         if (this.model.version && this.model.version >= 1) {
@@ -41,10 +50,65 @@ export class BarGraphElement extends ReadableElement {
         const b = arcPath.getBBox(true);
         this.rootElement.append('rect').attr('id', 'StateFrame').attr('width', b.width).attr('height', b.height).attr('fill', 'transparent');
     }
-    updateVariableValue(value) {
-        const variableValue = Number(value).valueOf();
-        const maxValue = Number(this.model.max).valueOf();
-        const minValue = Number(this.model.min).valueOf();
+    updateValueObj(value, variableName) {
+        var _a, _b, _c;
+        if (((_a = this.model.readVariable) === null || _a === void 0 ? void 0 : _a.name) === variableName) {
+            this.isNeedUpdateScale = false;
+            this.valueObj.value = value;
+        }
+        if (((_b = this.model.minVariable) === null || _b === void 0 ? void 0 : _b.name) === variableName) {
+            this.isNeedUpdateScale = true;
+            this.valueObj.min = value;
+        }
+        if (((_c = this.model.maxVariable) === null || _c === void 0 ? void 0 : _c.name) === variableName) {
+            this.isNeedUpdateScale = true;
+            this.valueObj.max = value;
+        }
+    }
+    updateScale() {
+        if (!this.isNeedUpdateScale) {
+            return;
+        }
+        const textElements = this.$element.find('g:first > text');
+        let min = this.model.minValueType ? this.valueObj.min : this.model.min;
+        let max = this.model.maxValueType ? this.valueObj.max : this.model.max;
+        min = Number(min);
+        max = Number(max);
+        if (isNaN(min) || isNaN(max)) {
+            min = BarGraphElement.DEFAULT_MIN_VALUE;
+            max = BarGraphElement.DEFAULT_MAX_VALUE;
+        }
+        const avgSacle = ((max - min) / this.model.masterDivisionNumber).toFixed(5);
+        for (let i = 0; i < textElements.length; i++) {
+            const text = textElements[i];
+            if (!text.innerHTML) {
+                continue;
+            }
+            let sacleValue = ((Number(avgSacle) * i) + min).toFixed(0);
+            // 整数位和小数位格式化；
+            if (this.model.fractionDigits > 0) {
+                sacleValue = (sacleValue / Math.pow(10, this.model.fractionDigits)).toFixed(this.model.fractionDigits);
+            }
+            if (!isNaN(sacleValue)) {
+                text.innerHTML = sacleValue;
+            }
+        }
+    }
+    updateVariableValue(value, variableName) {
+        this.updateValueObj(value, variableName);
+        this.updateScale();
+        const variableValue = Number(this.valueObj.value);
+        let maxValue = this.model.maxValueType ? this.valueObj.max : this.model.max;
+        let minValue = this.model.minValueType ? this.valueObj.min : this.model.min;
+        minValue = Number(minValue);
+        maxValue = Number(maxValue);
+        if (isNaN(minValue) || isNaN(maxValue)) {
+            minValue = BarGraphElement.DEFAULT_MIN_VALUE;
+            maxValue = BarGraphElement.DEFAULT_MAX_VALUE;
+        }
+        if (isNaN(variableValue)) {
+            return;
+        }
         const useAlarmLimit = this.model.useAlarmLimit;
         const useAlarmUpperLimit = null != this.model.upperLimit;
         const useAlarmLowerLimit = null != this.model.lowerLimit;
@@ -112,3 +176,5 @@ export class BarGraphElement extends ReadableElement {
         }
     }
 }
+BarGraphElement.DEFAULT_MIN_VALUE = 0;
+BarGraphElement.DEFAULT_MAX_VALUE = 100;

package/elements/bar-graph-element.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"BarGraphElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./base/readable-element","name":"ReadableElement","line":9,"character":37},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":33,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"../service","name":"PermissionChecker","line":33,"character":57},{"__symbolic":"reference","module":"../communication","name":"VariableCommunicator","line":34,"character":30},{"__symbolic":"reference","module":"../config","name":"VariableStore","line":35,"character":23},{"__symbolic":"reference","module":"../localization","name":"Localization","line":36,"character":22}]}],"initFrameNode":[{"__symbolic":"method"}],"updateVariableValue":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"BarGraphElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./base/readable-element","name":"ReadableElement","line":10,"character":37},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":38,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"../service","name":"PermissionChecker","line":38,"character":57},{"__symbolic":"reference","module":"../communication","name":"VariableCommunicator","line":39,"character":30},{"__symbolic":"reference","module":"../config","name":"VariableStore","line":40,"character":23},{"__symbolic":"reference","module":"../localization","name":"Localization","line":41,"character":22},{"__symbolic":"reference","name":"string"}]}],"initFrameNode":[{"__symbolic":"method"}],"updateValueObj":[{"__symbolic":"method"}],"updateScale":[{"__symbolic":"method"}],"updateVariableValue":[{"__symbolic":"method"}]},"statics":{"DEFAULT_MIN_VALUE":0,"DEFAULT_MAX_VALUE":100}}}}]

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

@@ -3,8 +3,9 @@
 import * as d3 from 'd3-selection';
 import { BaseElementModel } from '../../model';
 export declare abstract class BaseElement {
+    protected readonly signalRAppId: string;
     protected readonly $element: JQuery;
     protected readonly rootElement: d3.Selection<any, {}, null, undefined>;
     protected model: BaseElementModel;
-    constructor(element: HTMLElement);
+    constructor(element: HTMLElement, signalRAppId?: string);
 }

package/elements/base/base-element.js

@@ -1,6 +1,7 @@
 import * as d3 from 'd3-selection';
 export class BaseElement {
-    constructor(element) {
+    constructor(element, signalRAppId = '') {
+        this.signalRAppId = signalRAppId;
         this.$element = $(element);
         this.rootElement = d3.select(element);
         this.model = JSON.parse(this.rootElement.attr('data-model'));

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

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"BaseElement":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":9,"character":25,"context":{"typeName":"HTMLElement"}}]}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"BaseElement":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":9,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","name":"string"}]}]}}}}]

package/elements/base/conditional-control-element.d.ts

@@ -9,7 +9,7 @@ export declare abstract class ConditionalControlElement extends StateControlElem
     protected readonly variableCommunicator: VariableCommunicator;
     protected readonly variableStore: VariableStore;
     protected abstract readonly model: ConditionalControlModel;
-    constructor(element: HTMLElement, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore, localization: Localization);
+    constructor(element: HTMLElement, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore, localization: Localization, signalRAppId: string);
     protected abstract updateElement(value: ConditionControlResultValue): void;
     private initConditionalControl;
     private recoverData;

package/elements/base/conditional-control-element.js

@@ -7,8 +7,8 @@ import { StateControlElement } from './state-control-element';
 import { VariableUtil } from '../../utils/variable-util';
 import { VariableDefinition } from '../../communication/variable/variable-definition';
 export class ConditionalControlElement extends StateControlElement {
-    constructor(element, permissionChecker, variableCommunicator, variableStore, localization) {
-        super(element, permissionChecker, variableCommunicator, variableStore, localization);
+    constructor(element, permissionChecker, variableCommunicator, variableStore, localization, signalRAppId) {
+        super(element, permissionChecker, variableCommunicator, variableStore, localization, signalRAppId);
         this.variableCommunicator = variableCommunicator;
         this.variableStore = variableStore;
         this.recoverData();
@@ -27,7 +27,7 @@ export class ConditionalControlElement extends StateControlElement {
         controlConditionResult.conditionResultChanged.subscribe(result => {
             this.updateElement(result);
         });
-        controlConditionResult.requestData();
+        controlConditionResult.requestData(this.signalRAppId);
     }
     recoverData() {
         if (!this.model) {

package/elements/base/conditional-control-element.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"ConditionalControlElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./state-control-element","name":"StateControlElement","line":15,"character":56},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":19,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":20,"character":27},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":21,"character":49},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":21,"character":105},{"__symbolic":"reference","module":"../../localization","name":"Localization","line":21,"character":134}]}],"updateElement":[{"__symbolic":"method"}],"initConditionalControl":[{"__symbolic":"method"}],"recoverData":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"ConditionalControlElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./state-control-element","name":"StateControlElement","line":15,"character":56},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":19,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":20,"character":27},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":21,"character":49},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":21,"character":105},{"__symbolic":"reference","module":"../../localization","name":"Localization","line":21,"character":134},{"__symbolic":"reference","name":"string"}]}],"updateElement":[{"__symbolic":"method"}],"initConditionalControl":[{"__symbolic":"method"}],"recoverData":[{"__symbolic":"method"}]}}}}]

package/elements/base/conditional-display-element.d.ts

@@ -8,7 +8,7 @@ export declare abstract class ConditionalDisplayElement extends BaseElement {
     protected readonly variableCommunicator: VariableCommunicator;
     protected readonly variableStore: VariableStore;
     protected abstract readonly model: ConditionalDisplayModel;
-    constructor(element: HTMLElement, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore);
+    constructor(element: HTMLElement, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore, signalRAppId: string);
     private initDisplay;
     private checkDisplayConditionAndPermission;
     private updateVisibilityByCondition;

package/elements/base/conditional-display-element.js

@@ -1,8 +1,8 @@
 import { ConditionItemsResultObserver } from '../../model';
 import { BaseElement } from './base-element';
 export class ConditionalDisplayElement extends BaseElement {
-    constructor(element, permissionChecker, variableCommunicator, variableStore) {
-        super(element);
+    constructor(element, permissionChecker, variableCommunicator, variableStore, signalRAppId) {
+        super(element, signalRAppId);
         this.permissionChecker = permissionChecker;
         this.variableCommunicator = variableCommunicator;
         this.variableStore = variableStore;
@@ -43,7 +43,7 @@ export class ConditionalDisplayElement extends BaseElement {
                 this.hide();
             }
         });
-        conditionResult.requestData();
+        conditionResult.requestData(this.signalRAppId);
     }
     updateVisibilityByCondition() {
         if (null == this.model.conditionItems || !this.model.conditionItems.length) {
@@ -58,7 +58,7 @@ export class ConditionalDisplayElement extends BaseElement {
                 this.hide();
             }
         });
-        conditionResult.requestData();
+        conditionResult.requestData(this.signalRAppId);
     }
     updateVisibilityByPermission() {
         if (!this.model.displayPermissionCodes || !this.model.displayPermissionCodes.length) {

package/elements/base/conditional-display-element.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"ConditionalDisplayElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./base-element","name":"BaseElement","line":6,"character":56},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":10,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"../../service/permission-checker","name":"PermissionChecker","line":11,"character":46},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":12,"character":49},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":13,"character":42}]}],"initDisplay":[{"__symbolic":"method"}],"checkDisplayConditionAndPermission":[{"__symbolic":"method"}],"updateVisibilityByCondition":[{"__symbolic":"method"}],"updateVisibilityByPermission":[{"__symbolic":"method"}],"hide":[{"__symbolic":"method"}],"show":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"ConditionalDisplayElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./base-element","name":"BaseElement","line":6,"character":56},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":10,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"../../service/permission-checker","name":"PermissionChecker","line":11,"character":46},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":12,"character":49},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":13,"character":42},{"__symbolic":"reference","name":"string"}]}],"initDisplay":[{"__symbolic":"method"}],"checkDisplayConditionAndPermission":[{"__symbolic":"method"}],"updateVisibilityByCondition":[{"__symbolic":"method"}],"updateVisibilityByPermission":[{"__symbolic":"method"}],"hide":[{"__symbolic":"method"}],"show":[{"__symbolic":"method"}]}}}}]

package/elements/base/conditional-dynamic-display-element.d.ts

@@ -16,7 +16,7 @@ export declare abstract class ConditionalDynamicDisplayElement extends Condition
     protected rotatedHor: number;
     protected rotatedVer: number;
     protected transform: string;
-    constructor(element: HTMLElement, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore);
+    constructor(element: HTMLElement, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore, signalRAppId: string);
     protected initDynamicBehavior(): void;
     protected getActualSize(): Size;
     protected getActualLocation(): Point;

package/elements/base/conditional-dynamic-display-element.js

@@ -3,8 +3,8 @@ import { DynamicDisplay } from '../../model/shared/dynamic-display/dynamic-displ
 import { ConditionalDisplayElement } from './conditional-display-element';
 import { GuiConsts } from '../../shared';
 export class ConditionalDynamicDisplayElement extends ConditionalDisplayElement {
-    constructor(element, permissionChecker, variableCommunicator, variableStore) {
-        super(element, permissionChecker, variableCommunicator, variableStore);
+    constructor(element, permissionChecker, variableCommunicator, variableStore, signalRAppId) {
+        super(element, permissionChecker, variableCommunicator, variableStore, signalRAppId);
         this.variableCommunicator = variableCommunicator;
         this.variableStore = variableStore;
         this.initDynamicBehavior();
@@ -16,7 +16,7 @@ export class ConditionalDynamicDisplayElement extends ConditionalDisplayElement
             const strokeWidth = this.model.strokeWidth ? this.model.strokeWidth : 0;
             this.hor = location.x - Number(strokeWidth) / 2;
             this.ver = location.y - Number(strokeWidth) / 2;
-            const behavior = new DynamicDisplay(this.model.dynamicSetting, this.variableCommunicator, this.variableStore, location);
+            const behavior = new DynamicDisplay(this.model.dynamicSetting, this.variableCommunicator, this.variableStore, location, this.signalRAppId);
             behavior.doBehavior.subscribe(result => {
                 if (this.model.angle) {
                     this.ang = Number(this.model.angle);

package/elements/base/conditional-dynamic-display-element.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"ConditionalDynamicDisplayElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./conditional-display-element","name":"ConditionalDisplayElement","line":10,"character":63},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":23,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"../../service/permission-checker","name":"PermissionChecker","line":23,"character":57},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":24,"character":49},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":25,"character":42}]}],"initDynamicBehavior":[{"__symbolic":"method"}],"getActualSize":[{"__symbolic":"method"}],"getActualLocation":[{"__symbolic":"method"}],"isBold":[{"__symbolic":"method"}],"isItalic":[{"__symbolic":"method"}],"fontFamily":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"ConditionalDynamicDisplayElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./conditional-display-element","name":"ConditionalDisplayElement","line":10,"character":63},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":23,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"../../service/permission-checker","name":"PermissionChecker","line":23,"character":57},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":24,"character":49},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":25,"character":42},{"__symbolic":"reference","name":"string"}]}],"initDynamicBehavior":[{"__symbolic":"method"}],"getActualSize":[{"__symbolic":"method"}],"getActualLocation":[{"__symbolic":"method"}],"isBold":[{"__symbolic":"method"}],"isItalic":[{"__symbolic":"method"}],"fontFamily":[{"__symbolic":"method"}]}}}}]

package/elements/base/conditional-enable-element.d.ts

@@ -12,7 +12,7 @@ export declare abstract class ConditionalEnableElement extends StateControlEleme
     protected abstract readonly model: ConditionalEnableModel;
     isGrantedPermission: boolean;
     isInitialized: boolean;
-    constructor(element: HTMLElement, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore, localization: Localization);
+    constructor(element: HTMLElement, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore, localization: Localization, signalRAppId: string);
     private initialize;
     private updateEnableStateByConditionAndPermission;
     private updateEnableStateByCondition;

package/elements/base/conditional-enable-element.js

@@ -1,8 +1,8 @@
 import { ConditionItemsResultObserver } from '../../model';
 import { StateControlElement } from './state-control-element';
 export class ConditionalEnableElement extends StateControlElement {
-    constructor(element, permissionChecker, variableCommunicator, variableStore, localization) {
-        super(element, permissionChecker, variableCommunicator, variableStore, localization);
+    constructor(element, permissionChecker, variableCommunicator, variableStore, localization, signalRAppId) {
+        super(element, permissionChecker, variableCommunicator, variableStore, localization, signalRAppId);
         this.permissionChecker = permissionChecker;
         this.variableCommunicator = variableCommunicator;
         this.variableStore = variableStore;
@@ -68,7 +68,7 @@ export class ConditionalEnableElement extends StateControlElement {
             this.isInitialized = true;
             this.changeStates();
         });
-        enableConditionResult.requestData();
+        enableConditionResult.requestData(this.signalRAppId);
     }
     updateEnableStateByCondition() {
         if (null == this.model.enableItems || !this.model.enableItems.length) {
@@ -81,7 +81,7 @@ export class ConditionalEnableElement extends StateControlElement {
             this.isInitialized = true;
             this.changeStates();
         });
-        enableConditionResult.requestData();
+        enableConditionResult.requestData(this.signalRAppId);
     }
     updateEnableStateByPermission() {
         let isEnable = false;

package/elements/base/conditional-enable-element.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"ConditionalEnableElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./state-control-element","name":"StateControlElement","line":7,"character":55},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":14,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":15,"character":46},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":16,"character":49},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":17,"character":42},{"__symbolic":"reference","module":"../../localization","name":"Localization","line":18,"character":41}]}],"initialize":[{"__symbolic":"method"}],"updateEnableStateByConditionAndPermission":[{"__symbolic":"method"}],"updateEnableStateByCondition":[{"__symbolic":"method"}],"updateEnableStateByPermission":[{"__symbolic":"method"}],"setEnableByConditionOrPermission":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"ConditionalEnableElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./state-control-element","name":"StateControlElement","line":7,"character":55},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":14,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":15,"character":46},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":16,"character":49},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":17,"character":42},{"__symbolic":"reference","module":"../../localization","name":"Localization","line":18,"character":41},{"__symbolic":"reference","name":"string"}]}],"initialize":[{"__symbolic":"method"}],"updateEnableStateByConditionAndPermission":[{"__symbolic":"method"}],"updateEnableStateByCondition":[{"__symbolic":"method"}],"updateEnableStateByPermission":[{"__symbolic":"method"}],"setEnableByConditionOrPermission":[{"__symbolic":"method"}]}}}}]

package/elements/base/readable-element.d.ts

@@ -6,10 +6,15 @@ import { Localization } from '../../localization';
 import { VariableStore } from '../../config';
 export declare abstract class ReadableElement extends ConditionalEnableElement {
     protected abstract model: ReadableModel;
-    constructor(element: HTMLElement, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore, localization: Localization);
+    constructor(element: HTMLElement, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore, localization: Localization, signalRAppId: string);
     init(variableName: string): void;
     get readVariableName(): string;
-    protected abstract updateVariableValue(value: any): void;
+    get minVariableName(): string;
+    get minValueType(): any;
+    get maxVariableName(): string;
+    get maxValueType(): any;
+    private getVariableName;
+    protected abstract updateVariableValue(value: any, variableName: any): void;
     reportStateChanged(variableState: VariableState): void;
     reportValueChanged(value: VariableValue): void;
 }