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

package/src/elements/main-element.ts

@@ -0,0 +1,507 @@
+import { Injector } from '@angular/core';
+import { each, forEach, isEqual } from 'lodash';
+import { VariableCommunicator, VariableValue, VariableState } from '../communication';
+import { BsModalService } from 'ngx-bootstrap/modal';
+import { GuiContext } from '../gui/gui-context';
+import { LOCALIZATION } from '../localization';
+import { LoggerService, LOGGER_SERVICE_TOKEN } from '../logger';
+import { Size } from '../model';
+import { ViewBackgroundFillType } from '../model/settings/background/view-background-fill-type';
+import { ViewSettingsModel } from '../model/settings/view-settings.model';
+import { GuiConsts } from '../shared';
+import { PopupViewService } from '../view/popup-view.service';
+import { BarGraphElement } from './bar-graph-element';
+import { BaseElement, 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 { GuiOptions } from '../gui/interfaces/gui-options';
+import { AirQualityElement } from './air-quality/air-quality-element';
+import { AlarmElement } from './alarm/alarm-element';
+
+export class MainElement {
+
+    private readonly elements: Array<BaseElement> = new Array<BaseElement>();
+
+    private root: JQuery;
+    private isLoaded: Boolean;
+    rawWidth: number;
+    rawHeight: number;
+    private readonly logger: LoggerService;
+    oldSize: Size;
+    private hostContainerId: string;
+
+    get rootElement(): HTMLElement {
+        return this.root[0];
+    }
+
+    constructor(private readonly injector: Injector,
+        private readonly bsModalService: BsModalService,
+        private readonly context: GuiContext,
+        private readonly variableCommunicator: VariableCommunicator,
+        private readonly popupViewService: PopupViewService,
+        private readonly signalRAppId) {
+        this.logger = injector.get(LOGGER_SERVICE_TOKEN);
+    }
+
+    load(data: string, overflowVisible = false, guiOptions: 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: Size, svgRootClass: string) {
+        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: Size, oldSize: Size, svgRootClass: string) {
+        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: 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(): Array<string> {
+        const variableNames = new Array<string>();
+        forEach(this.elements, element => {
+            if (element instanceof ReadableElement) {
+
+                const maxVariableName = (element as any)?.maxVariableName;
+                const maxValueType = element.maxValueType;
+                const minVariableName = (element as any)?.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: VariableState[]) {
+        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: VariableValue[]) {
+        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();
+            }
+        });
+    }
+
+    private checkIsLoaded() {
+        if (!this.isLoaded) { throw new Error('The Main Element is not loaded.please call load method first.'); }
+    }
+
+    private initBackground() {
+        const settings = this.root.data('model') as ViewSettingsModel;
+        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;
+            }
+        }
+    }
+
+    private getImageEl(imageId: string) {
+        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/src/elements/meter-element.ts

@@ -0,0 +1,158 @@
+import { Meter } from '../model';
+import { VariableCommunicator } from '../communication';
+import { Localization } from '../localization';
+import { ReadableElement } from './base';
+import { VariableStore } from '../config';
+import { PermissionChecker } from '../service';
+import { isNumber } from 'lodash';
+import { VariableValueType } from '../model/shared/condition/variable-value-type';
+
+export class MeterElement extends ReadableElement {
+
+    private static DEFAULT_MIN_VALUE = 0;
+    private static DEFAULT_MAX_VALUE = 100;
+
+    private readonly $handEl: JQuery;
+    private readonly arcPath$: JQuery;
+    private cx = 0;
+    private cy = 0;
+    private offsetY = 0;
+    private mainElementTransform: string;
+    private valueObj: any = {};
+    private isNeedUpdateScale = false;
+
+    readonly model: Meter;
+
+    constructor(element: HTMLElement, permissionChecker: PermissionChecker,
+        variableCommunicator: VariableCommunicator, variableStore: VariableStore, localization: Localization,
+        signalRAppId: string) {
+        super(element, permissionChecker, variableCommunicator, variableStore, localization, signalRAppId);
+        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$: JQuery;
+        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();
+        });
+    }
+
+    private updateValueObj(value: any, variableName: any) {
+
+        if (this.model.readVariable?.name === variableName) {
+            this.isNeedUpdateScale = false;
+            this.valueObj.value = value;
+        }
+
+        if (this.model.minVariable?.name === variableName) {
+            this.isNeedUpdateScale = true;
+            this.valueObj.min = value;
+        }
+
+        if (this.model.maxVariable?.name === variableName) {
+            this.isNeedUpdateScale = true;
+            this.valueObj.max = value;
+        }
+    }
+
+    updateVariableValue(value: number, variableName: any) {
+        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})`);
+        }
+    }
+
+    private 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');
+    }
+
+    private 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;
+            }
+        }
+    }
+
+    private 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;
+    }
+
+    private 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;
+    }
+}