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

package/src/elements/main-element.ts

@@ -1,507 +0,0 @@
-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

@@ -1,158 +0,0 @@
-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;
-    }
-}