@flexem/fc-gui 3.0.0-alpha.91 → 3.0.0-alpha.93

package/elements/main-element.js

@@ -0,0 +1,328 @@
+import { each, forEach, isEqual } from 'lodash';
+import { LOCALIZATION } from '../localization';
+import { LOGGER_SERVICE_TOKEN } from '../logger';
+import { Size } from '../model';
+import { ViewBackgroundFillType } from '../model/settings/background/view-background-fill-type';
+import { GuiConsts } from '../shared';
+import { BarGraphElement } from './bar-graph-element';
+import { ReadableElement } from './base';
+import { CharacterDisplayElement } from './character-display/character-display-element';
+import { DatetimeDisplayElement } from './datetime-display/datetime-display-element';
+import { HistoricalCurveElement } from './historical-curve/historical-curve.element';
+import { MeterElement } from './meter-element';
+import { NumericalDisplayElement } from './numerical-display/numerical-display-element';
+import { PipeElement } from './pipe/pipe-element';
+import { RingGraphElement } from './ring-graph/ring-graph-element';
+import { GraphStateElement } from './shared/graph/graph-state-element';
+import { ImageElement } from './static-elements/image-element';
+import { TextElement } from './static-elements/text-element';
+import { SwitchIndicatorLightElement } from './switch-indicator-light/switch-indicator-light-element';
+import { EllipseElement } from './vector-graphics/ellipse-element';
+import { RectangleElement } from './vector-graphics/rectangle-element';
+import { SectorElement } from './vector-graphics/sector-element';
+import { ViewOperationElement } from './view-operation/view-operation.element';
+import { StraightLineElement } from './vector-graphics/straight-line-element';
+import { PolyLineElement } from './vector-graphics/poly-line-element';
+import { PolygonElement } from './vector-graphics/polygon-element';
+import { HyperlinkElement } from './static-elements/hyperlink-element';
+import { VideoElement } from './video/video-element';
+import { WeatherElement } from './weather/weater-element';
+import { AirQualityElement } from './air-quality/air-quality-element';
+import { AlarmElement } from './alarm/alarm-element';
+export class MainElement {
+    constructor(injector, bsModalService, context, variableCommunicator, popupViewService, signalRAppId) {
+        this.injector = injector;
+        this.bsModalService = bsModalService;
+        this.context = context;
+        this.variableCommunicator = variableCommunicator;
+        this.popupViewService = popupViewService;
+        this.signalRAppId = signalRAppId;
+        this.elements = new Array();
+        this.logger = injector.get(LOGGER_SERVICE_TOKEN);
+    }
+    get rootElement() {
+        return this.root[0];
+    }
+    load(data, overflowVisible = false, guiOptions) {
+        this.hostContainerId = guiOptions.hostContainerId;
+        if (this.isLoaded) {
+            throw new Error('The Main Element already loaded.');
+        }
+        this.root = $(data);
+        this.root.attr('style', `margin: 0 auto;display: block;${overflowVisible ? 'overflow: visible;' : ''}`);
+        // eslint-disable-next-line radix
+        this.rawWidth = Number.parseInt(this.root.attr('width'));
+        // eslint-disable-next-line radix
+        this.rawHeight = Number.parseInt(this.root.attr('height'));
+        // TODO 实现一个elementParser解析components.
+        const components = this.root.find('[data-model]');
+        each(components, element => {
+            const category = $(element).data('model').category;
+            switch (category) {
+                case GuiConsts.components.numericalDisplayKey:
+                    const numericalDisplayElement = new NumericalDisplayElement(element, this.injector, this.bsModalService, this.context.permissionChecker, this.variableCommunicator, this.context.configStore.graphStore, this.context.operationRecordService, this.context.releasedVariableService, this.context.securityChecker, this.context.configStore.variableStore, this.injector.get(LOCALIZATION), this.signalRAppId);
+                    this.elements.push(numericalDisplayElement);
+                    break;
+                case GuiConsts.components.imageKey:
+                    this.elements.push(new ImageElement(element, this.injector, this.context.configStore.imageStore, this.context.permissionChecker, this.variableCommunicator, this.context.configStore.variableStore, this.context.configStore.graphStore, this.signalRAppId));
+                    break;
+                case GuiConsts.components.meterKey:
+                    this.elements.push(new MeterElement(element, this.context.permissionChecker, this.variableCommunicator, this.context.configStore.variableStore, this.injector.get(LOCALIZATION), this.signalRAppId));
+                    break;
+                case GuiConsts.components.pipeKey:
+                    this.elements.push(new PipeElement(element, this.context.permissionChecker, this.variableCommunicator, this.context.configStore.variableStore, this.injector.get(LOCALIZATION), this.signalRAppId));
+                    break;
+                case GuiConsts.components.switchIndicatorLightKey:
+                    this.elements.push(new SwitchIndicatorLightElement(element, this.injector, this.bsModalService, this.variableCommunicator, this.context.configStore.graphStore, this.context.permissionChecker, this.context.operationRecordService, this.context.securityChecker, this.context.configStore.variableStore, this.injector.get(LOCALIZATION), this.signalRAppId));
+                    break;
+                case GuiConsts.components.barGraphKey:
+                    this.elements.push(new BarGraphElement(element, this.context.permissionChecker, this.variableCommunicator, this.context.configStore.variableStore, this.injector.get(LOCALIZATION), this.signalRAppId));
+                    break;
+                case GuiConsts.components.toggleViewKey:
+                case GuiConsts.components.viewOperationElement:
+                    this.elements.push(new ViewOperationElement(element, this.injector, this.bsModalService, this.variableCommunicator, this.context.configStore.variableStore, this.context.configStore.graphStore, this.context.permissionChecker, this.context.operationRecordService, this.context.securityChecker, this.injector.get(LOCALIZATION), this.popupViewService, guiOptions.hostContainerId, guiOptions.el, this.signalRAppId));
+                    break;
+                case GuiConsts.components.characterKey:
+                    this.elements.push(new CharacterDisplayElement(element, this.injector, this.bsModalService, this.variableCommunicator, this.context.configStore.graphStore, this.context.permissionChecker, this.context.operationRecordService, this.context.securityChecker, this.context.configStore.variableStore, this.injector.get(LOCALIZATION), this.signalRAppId));
+                    break;
+                case GuiConsts.components.textKey:
+                    this.elements.push(new TextElement(element, this.injector, this.context.permissionChecker, this.variableCommunicator, this.context.configStore.variableStore, this.context.configStore.graphStore, this.signalRAppId));
+                    break;
+                case GuiConsts.components.hyperlinkKey:
+                    this.elements.push(new HyperlinkElement(element, this.injector, this.context.permissionChecker, this.variableCommunicator, this.context.configStore.variableStore, this.context.configStore.graphStore, this.signalRAppId));
+                    break;
+                case GuiConsts.components.straightLineKey:
+                    this.elements.push(new StraightLineElement(element, this.context.permissionChecker, this.variableCommunicator, this.context.configStore.variableStore, this.signalRAppId));
+                    break;
+                case GuiConsts.components.polyLineKey:
+                    this.elements.push(new PolyLineElement(element, this.context.permissionChecker, this.variableCommunicator, this.context.configStore.variableStore, this.signalRAppId));
+                    break;
+                case GuiConsts.components.ellipseKey:
+                    this.elements.push(new EllipseElement(element, this.context.permissionChecker, this.variableCommunicator, this.context.configStore.variableStore, this.signalRAppId));
+                    break;
+                case GuiConsts.components.rectangleKey:
+                    this.elements.push(new RectangleElement(element, this.context.permissionChecker, this.variableCommunicator, this.context.configStore.variableStore, this.signalRAppId));
+                    break;
+                case GuiConsts.components.sectorkey:
+                    this.elements.push(new SectorElement(element, this.context.permissionChecker, this.variableCommunicator, this.context.configStore.variableStore, this.signalRAppId));
+                    break;
+                case GuiConsts.components.datetimeDisplayKey:
+                    this.elements.push(new DatetimeDisplayElement(element, this.injector, this.context.permissionChecker, this.variableCommunicator, this.context.configStore.variableStore, this.context.configStore.graphStore, this.signalRAppId));
+                    break;
+                case GuiConsts.components.historicalCurveKey:
+                    this.elements.push(new HistoricalCurveElement(element, this.injector, this.context.permissionChecker, this.variableCommunicator, this.context.configStore.variableStore, this.context.configStore.historyDataStore, this.signalRAppId));
+                    break;
+                case GuiConsts.components.ringGraphKey:
+                    this.elements.push(new RingGraphElement(element, this.context.permissionChecker, this.variableCommunicator, this.context.configStore.variableStore, this.injector.get(LOCALIZATION), this.signalRAppId));
+                    break;
+                case GuiConsts.components.polygonKey:
+                    this.elements.push(new PolygonElement(element, this.context.permissionChecker, this.variableCommunicator, this.context.configStore.variableStore, this.signalRAppId));
+                    break;
+                case GuiConsts.components.videokey:
+                    this.elements.push(new VideoElement(element, this.injector, this.context.permissionChecker, this.variableCommunicator, this.context.configStore.variableStore, this.context.videoService, new Size(this.rawWidth, this.rawHeight), guiOptions.svgRootClass, this.signalRAppId));
+                    break;
+                case GuiConsts.components.tableKey:
+                    this.elements.push(new PolygonElement(element, this.context.permissionChecker, this.variableCommunicator, this.context.configStore.variableStore, this.signalRAppId));
+                    break;
+                case GuiConsts.components.weatherKey:
+                    this.elements.push(new WeatherElement(element, this.injector, this.context.permissionChecker, this.variableCommunicator, this.context.configStore.variableStore, this.context.weatherService, this.signalRAppId));
+                    break;
+                case GuiConsts.components.airQualityKey:
+                    this.elements.push(new AirQualityElement(element, this.injector, this.context.permissionChecker, this.variableCommunicator, this.context.configStore.variableStore, this.context.weatherService, this.signalRAppId));
+                    break;
+                case GuiConsts.components.alarmKey:
+                    this.elements.push(new AlarmElement(element, this.injector, this.context.permissionChecker, this.variableCommunicator, this.context.configStore.variableStore, this.context.configStore.alarmsStore, this.signalRAppId));
+                    break;
+            }
+        });
+        this.initBackground();
+        this.isLoaded = true;
+        this.logger.debug('[GUI] Main element loaded.');
+    }
+    /**
+     * 保证在显示区域内显示画面所有内容，等比缩放画面大小以铺满整个显示区域
+     * @param size 显示区域大小
+     */
+    uniformStretch(size, svgRootClass) {
+        if (!size.isReal()) {
+            throw new Error('size is not real.');
+        }
+        this.checkIsLoaded();
+        const restrictScale = this.rawHeight / this.rawWidth;
+        const newScale = size.height / size.width;
+        if (newScale > restrictScale) {
+            size.height = size.width * restrictScale;
+        }
+        else {
+            size.width = size.height / restrictScale;
+        }
+        const oldSize = this.oldSize ? this.oldSize : size;
+        setTimeout(() => {
+            this.changeVideoStyle(size, oldSize, svgRootClass);
+        }, 200);
+        this.root.attr('width', size.width);
+        this.root.attr('height', size.height);
+        if (!this.root.attr('viewBox')) {
+            const sx = size.width / this.rawWidth;
+            this.root.find('g:first').attr('transform', `scale(${sx})`);
+        }
+        this.oldSize = size;
+    }
+    changeVideoStyle(size, oldSize, svgRootClass) {
+        const self = this;
+        $('div.' + svgRootClass + ' video').each(function () {
+            const videoWidth = size.width / oldSize.width * $(this).width();
+            if (videoWidth > $('body').width() || videoWidth.toFixed(0) === $('body').width().toFixed(0)) {
+                return;
+            }
+            $(this).css('width', videoWidth + 'px');
+            $(this).css('height', size.height / oldSize.height * $(this).height() + 'px');
+            let videoLeft = size.width * Number($(this).attr('scareX'));
+            let videoTop = size.height * Number($(this).attr('scareY'));
+            if (self.hostContainerId) {
+                const hostContainerObject = $('#' + self.hostContainerId);
+                if (hostContainerObject.length) {
+                    const hostContainerWidth = hostContainerObject[0].clientWidth;
+                    const hostContainerHight = hostContainerObject[0].clientHeight;
+                    videoLeft = videoLeft + (hostContainerWidth - size.width) / 2;
+                    videoTop = videoTop + (hostContainerHight - size.height) / 2;
+                }
+            }
+            $(this).css('left', videoLeft + 'px');
+            $(this).css('top', videoTop + 'px');
+        });
+    }
+    /**
+     * 保证在显示区域内横向铺满
+     * @param size 显示区域大小
+     */
+    horizontalStretch(size) {
+        if (!size.isReal()) {
+            throw new Error('size is not real.');
+        }
+        this.checkIsLoaded();
+        size.height = (size.width / this.rawWidth) * this.rawHeight;
+        this.root.attr('width', size.width);
+        this.root.attr('height', size.height);
+        if (!this.root.attr('viewBox')) {
+            const sx = size.width / this.rawWidth;
+            this.root.find('g:first').attr('transform', `scale(${sx})`);
+        }
+    }
+    initElementState() {
+        forEach(this.elements, element => {
+            if (element instanceof ReadableElement) {
+                element.init(element.readVariableName || element.maxVariableName || element.minVariableName);
+            }
+            else if (element instanceof HistoricalCurveElement) {
+                element.initElementStatus();
+            }
+        });
+        this.logger.debug('[GUI] Main element enabled.');
+    }
+    getVariableNames() {
+        const variableNames = new Array();
+        forEach(this.elements, element => {
+            var _a, _b;
+            if (element instanceof ReadableElement) {
+                const maxVariableName = (_a = element) === null || _a === void 0 ? void 0 : _a.maxVariableName;
+                const maxValueType = element.maxValueType;
+                const minVariableName = (_b = element) === null || _b === void 0 ? void 0 : _b.minVariableName;
+                const minValueType = element.minValueType;
+                const variableName = element.readVariableName;
+                // 最大最小值选择变量类型时，其中一个未绑定变量不进行开点操作 - FLEXCLOUD-1817
+                if (maxValueType && maxVariableName && !variableNames.find(v => isEqual(maxVariableName, v))) {
+                    variableNames.push(maxVariableName);
+                }
+                if (minValueType && minVariableName && !variableNames.find(v => isEqual(minVariableName, v))) {
+                    variableNames.push(minVariableName);
+                }
+                if (variableName && !variableNames.find(v => isEqual(variableName, v))) {
+                    variableNames.push(element.readVariableName);
+                }
+            }
+        });
+        return variableNames;
+    }
+    reportVariableStates(states) {
+        this.checkIsLoaded();
+        each(states, state => {
+            each(this.elements, element => {
+                if (element instanceof ReadableElement) {
+                    const variableName = element.readVariableName;
+                    if (variableName && variableName === state.variableName) {
+                        element.reportStateChanged(state);
+                    }
+                }
+            });
+        });
+    }
+    reportVariableValues(values) {
+        this.checkIsLoaded();
+        each(values, value => {
+            each(this.elements, e => {
+                if (e instanceof ReadableElement) {
+                    if (e.readVariableName === value.variableName || e.minVariableName === value.variableName || e.maxVariableName === value.variableName) {
+                        e.reportValueChanged(value);
+                    }
+                }
+            });
+        });
+    }
+    dispose() {
+        each(this.elements, e => {
+            if (e instanceof HistoricalCurveElement || e instanceof VideoElement
+                || e instanceof WeatherElement || e instanceof NumericalDisplayElement || e instanceof TextElement
+                || e instanceof AirQualityElement) {
+                e.dispose();
+            }
+        });
+    }
+    checkIsLoaded() {
+        if (!this.isLoaded) {
+            throw new Error('The Main Element is not loaded.please call load method first.');
+        }
+    }
+    initBackground() {
+        const settings = this.root.data('model');
+        if (settings) {
+            const background = settings.background;
+            switch (background.fillType) {
+                case ViewBackgroundFillType.SolidColor:
+                    if (background.solidColor) {
+                        const backgroundElement = $(document.createElementNS('http://www.w3.org/2000/svg', 'rect')).attr({
+                            width: String(this.rawWidth), height: String(this.rawHeight), fill: background.solidColor
+                        });
+                        this.root.prepend(backgroundElement);
+                    }
+                    break;
+                case ViewBackgroundFillType.Image:
+                    if (background.imageId) {
+                        this.root.prepend(this.getImageEl(background.imageId));
+                    }
+                    break;
+                case ViewBackgroundFillType.Graph:
+                    if (background.graphSetting && background.graphSetting.id > 0) {
+                        const stateElement = new GraphStateElement(background.graphSetting, this.rawWidth, this.rawHeight, this.context.configStore.graphStore, this.logger);
+                        stateElement.switchToState(0);
+                        this.root.prepend(stateElement.Element);
+                        const backgroundElement = $(document.createElementNS('http://www.w3.org/2000/svg', 'rect')).attr({
+                            width: String(this.rawWidth), height: String(this.rawHeight), fill: '#fff'
+                        });
+                        this.root.prepend(backgroundElement);
+                    }
+                    break;
+            }
+        }
+    }
+    getImageEl(imageId) {
+        const imageElement = document.createElementNS('http://www.w3.org/2000/svg', 'image');
+        imageElement.setAttribute('width', this.rawWidth + '');
+        imageElement.setAttribute('height', this.rawHeight + '');
+        imageElement.setAttribute('fill', 'none');
+        imageElement.setAttribute('preserveAspectRatio', 'none');
+        imageElement.setAttribute('crossorigin', 'anonymous');
+        imageElement.setAttributeNS('http://www.w3.org/1999/xlink', 'href', this.context.configStore.imageStore.getImageUrl(imageId));
+        return imageElement;
+    }
+}

package/elements/main-element.metadata.json

@@ -0,0 +1 @@
+[{"__symbolic":"module","version":4,"metadata":{"MainElement":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":55,"character":43},{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalService","line":56,"character":41},{"__symbolic":"reference","module":"../gui/gui-context","name":"GuiContext","line":57,"character":34},{"__symbolic":"reference","module":"../communication","name":"VariableCommunicator","line":58,"character":47},{"__symbolic":"reference","module":"../view/popup-view.service","name":"PopupViewService","line":59,"character":43},null]}],"load":[{"__symbolic":"method"}],"uniformStretch":[{"__symbolic":"method"}],"changeVideoStyle":[{"__symbolic":"method"}],"horizontalStretch":[{"__symbolic":"method"}],"initElementState":[{"__symbolic":"method"}],"getVariableNames":[{"__symbolic":"method"}],"reportVariableStates":[{"__symbolic":"method"}],"reportVariableValues":[{"__symbolic":"method"}],"dispose":[{"__symbolic":"method"}],"checkIsLoaded":[{"__symbolic":"method"}],"initBackground":[{"__symbolic":"method"}],"getImageEl":[{"__symbolic":"method"}]}}}}]

package/elements/meter-element.d.ts

@@ -0,0 +1,26 @@
+import { Meter } from '../model';
+import { VariableCommunicator } from '../communication';
+import { Localization } from '../localization';
+import { ReadableElement } from './base';
+import { VariableStore } from '../config';
+import { PermissionChecker } from '../service';
+export declare class MeterElement extends ReadableElement {
+    private static DEFAULT_MIN_VALUE;
+    private static DEFAULT_MAX_VALUE;
+    private readonly $handEl;
+    private readonly arcPath$;
+    private cx;
+    private cy;
+    private offsetY;
+    private mainElementTransform;
+    private valueObj;
+    private isNeedUpdateScale;
+    readonly model: Meter;
+    constructor(element: HTMLElement, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore, localization: Localization, signalRAppId: string);
+    private updateValueObj;
+    updateVariableValue(value: number, variableName: any): void;
+    private initFrameNode;
+    private updateScale;
+    private getAngle;
+    private directionPoint;
+}

package/elements/meter-element.js

@@ -0,0 +1,139 @@
+import { ReadableElement } from './base';
+import { isNumber } from 'lodash';
+import { VariableValueType } from '../model/shared/condition/variable-value-type';
+export class MeterElement extends ReadableElement {
+    constructor(element, permissionChecker, variableCommunicator, variableStore, localization, signalRAppId) {
+        super(element, permissionChecker, variableCommunicator, variableStore, localization, signalRAppId);
+        this.cx = 0;
+        this.cy = 0;
+        this.offsetY = 0;
+        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;
+        }
+        let mainEl$;
+        if (this.model.version && this.model.version > 3) {
+            mainEl$ = this.$element.find('[data-id="main"]');
+            this.$handEl = this.$element.find('[data-id="hand"]');
+            this.arcPath$ = this.$element.find('[data-id="arc"]');
+        }
+        else {
+            mainEl$ = this.$element.children().eq(0);
+            this.$handEl = this.$element.find('path[fill=\'red\']'); // 用g:first > path:eq(0)取handle可能因为多次封装取不到所以通过属性取handle
+            this.arcPath$ = this.$element.find('g:first > g:first > path:eq(0)');
+        }
+        if (this.$handEl.length !== 1) {
+            throw new Error('missing meter hand.');
+        }
+        this.mainElementTransform = mainEl$.attr('transform');
+        const snapEl = Snap(this.$handEl[0]);
+        const bBox = snapEl.getBBox(true);
+        const radius = (bBox.x + bBox.width) / 2;
+        this.cx = radius;
+        this.cy = radius - bBox.x;
+        this.offsetY = radius - (bBox.height / 2);
+        setTimeout(() => {
+            this.initFrameNode();
+            this.changeStates();
+        });
+    }
+    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;
+        }
+    }
+    updateVariableValue(value, variableName) {
+        this.updateValueObj(value, variableName);
+        this.updateScale();
+        const angle = this.getAngle();
+        if (isNumber(angle)) {
+            this.$handEl.attr('transform', this.mainElementTransform + ` translate(0,${this.offsetY}) rotate(${angle}, ${this.cx}, ${this.cy})`);
+        }
+    }
+    initFrameNode() {
+        const b = Snap(this.$element[0]).getBBox();
+        this.rootElement.append('rect').attr('id', 'StateFrame').attr('width', b.width).attr('height', b.height).attr('fill', 'transparent');
+    }
+    updateScale() {
+        if (!this.isNeedUpdateScale) {
+            return;
+        }
+        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 = MeterElement.DEFAULT_MIN_VALUE;
+            max = MeterElement.DEFAULT_MAX_VALUE;
+        }
+        const avgSacle = ((max - min) / this.model.masterDivisionNumber).toFixed(5);
+        const textElements = this.$element.find('g:first > text');
+        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;
+            }
+        }
+    }
+    getAngle() {
+        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 = MeterElement.DEFAULT_MIN_VALUE;
+            max = MeterElement.DEFAULT_MAX_VALUE;
+        }
+        if (!this.valueObj.value && isNaN(Number(this.valueObj.value))) {
+            return undefined;
+        }
+        const value = Math.min(Math.max(this.valueObj.value || 0, min), max);
+        const len = (value - min) / (max - min);
+        const arcPath = Snap(this.arcPath$[0]);
+        const b = arcPath.getBBox(true);
+        const point = arcPath.getPointAtLength(len * arcPath.getTotalLength());
+        const angle = this.directionPoint({ x: b.width / 2, y: b.height / 2 }, point);
+        return angle;
+    }
+    directionPoint(point1, point2) {
+        const a = point2.x - point1.x;
+        const b = point2.y - point1.y;
+        if (0 === a) {
+            return 0 < b ? 90 : 0 > b ? 270 : 0;
+        }
+        if (0 === b) {
+            return 0 < a ? 0 : 180;
+        }
+        if (isNaN(a) || isNaN(b)) {
+            return 0;
+        }
+        let c = 180 * Math.atan(Math.abs(b / a)) / Math.PI;
+        // eslint-disable-next-line no-unused-expressions
+        0 > a ? c = 0 > b ? c + 180 : 180 - c : 0 > b && (c = 360 - c);
+        return c;
+    }
+}
+MeterElement.DEFAULT_MIN_VALUE = 0;
+MeterElement.DEFAULT_MAX_VALUE = 100;

package/elements/meter-element.metadata.json

@@ -0,0 +1 @@
+[{"__symbolic":"module","version":4,"metadata":{"MeterElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./base","name":"ReadableElement","line":9,"character":34},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":25,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"../service","name":"PermissionChecker","line":25,"character":57},{"__symbolic":"reference","module":"../communication","name":"VariableCommunicator","line":26,"character":30},{"__symbolic":"reference","module":"../config","name":"VariableStore","line":26,"character":67},{"__symbolic":"reference","module":"../localization","name":"Localization","line":26,"character":96},{"__symbolic":"reference","name":"string"}]}],"updateValueObj":[{"__symbolic":"method"}],"updateVariableValue":[{"__symbolic":"method"}],"initFrameNode":[{"__symbolic":"method"}],"updateScale":[{"__symbolic":"method"}],"getAngle":[{"__symbolic":"method"}],"directionPoint":[{"__symbolic":"method"}]},"statics":{"DEFAULT_MIN_VALUE":0,"DEFAULT_MAX_VALUE":100}}}}]

package/elements/numerical-display/numerical-display-element.d.ts

@@ -0,0 +1,47 @@
+import { Injector } from '@angular/core';
+import { BsModalService } from 'ngx-bootstrap/modal';
+import { GraphStore, VariableStore } from '../../config';
+import { Localization } from '../../localization';
+import { NumericalDisplay } from '../../model';
+import { PermissionChecker, OperationRecordService, ReleasedVariableService } from '../../service';
+import { VariableCommunicator } from '../../communication';
+import { ReadableElement } from '../base/readable-element';
+import { SecurityChecker } from '../../security';
+export declare class NumericalDisplayElement extends ReadableElement {
+    private readonly modalService;
+    private readonly graphStore;
+    private readonly operationRecordService;
+    private readonly releasedVariableService;
+    private readonly securityChecker;
+    private readonly dataTypeService;
+    private readonly fractionDigitService;
+    private readonly accessPermissionService;
+    private readonly numericalOperationService;
+    readonly model: NumericalDisplay;
+    private displayText;
+    private readonly logger;
+    private displayForeignObject;
+    private enableDataParsed;
+    private writeValueMmodalRef;
+    private recordValue;
+    private showValue;
+    private numericalOperation;
+    private restorationTimer;
+    get writeVariableName(): string;
+    constructor(element: HTMLElement, injector: Injector, modalService: BsModalService, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, graphStore: GraphStore, operationRecordService: OperationRecordService, releasedVariableService: ReleasedVariableService, securityChecker: SecurityChecker, variableStore: VariableStore, localization: Localization, signalRAppId: string);
+    dispose(): void;
+    initElement(): any;
+    private checkElementPassword;
+    private initVariableText;
+    private initGraphAndText;
+    private doWriteValue;
+    private recordOperation;
+    changeStates(): void;
+    protected updateVariableValue(value: number): void;
+    private updateDisplayText;
+    private rebuildTextElement;
+    private formatNumericalDisplayText;
+    private formatFloatDisplayText;
+    private isNumeric;
+    private formatDisplayTextUnit;
+}