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

package/elements/main-element.js

@@ -1,307 +0,0 @@
-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';
-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.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;
-            }
-        });
-        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);
-            }
-            else if (element instanceof HistoricalCurveElement) {
-                element.initElementStatus();
-            }
-        });
-        this.logger.debug('[GUI] Main element enabled.');
-    }
-    getVariableNames() {
-        const variableNames = new Array();
-        forEach(this.elements, element => {
-            if (element instanceof ReadableElement) {
-                const variableName = element.readVariableName;
-                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.reportValueChanged(value);
-                    }
-                }
-            });
-        });
-    }
-    dispose() {
-        each(this.elements, e => {
-            if (e instanceof HistoricalCurveElement || e instanceof VideoElement
-                || e instanceof WeatherElement || e instanceof NumericalDisplayElement || e instanceof TextElement) {
-                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

@@ -1 +0,0 @@
-[{"__symbolic":"module","version":4,"metadata":{"MainElement":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":53,"character":43},{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalService","line":54,"character":41},{"__symbolic":"reference","module":"../gui/gui-context","name":"GuiContext","line":55,"character":34},{"__symbolic":"reference","module":"../communication","name":"VariableCommunicator","line":56,"character":47},{"__symbolic":"reference","module":"../view/popup-view.service","name":"PopupViewService","line":57,"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

@@ -1,20 +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';
-export declare class MeterElement extends ReadableElement {
-    private readonly $handEl;
-    private readonly arcPath$;
-    private cx;
-    private cy;
-    private offsetY;
-    private mainElementTransform;
-    readonly model: Meter;
-    constructor(element: HTMLElement, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore, localization: Localization, signalRAppId: string);
-    updateVariableValue(value: number): void;
-    private initFrameNode;
-    private getAngle;
-    private directionPoint;
-}

package/elements/meter-element.js

@@ -1,70 +0,0 @@
-import { ReadableElement } from './base';
-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;
-        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();
-        });
-    }
-    updateVariableValue(value) {
-        const angle = this.getAngle(value);
-        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');
-    }
-    getAngle(value) {
-        const min = this.model.min;
-        const max = this.model.max;
-        value = Math.min(Math.max(value, 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;
-    }
-}

package/elements/meter-element.metadata.json

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

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

@@ -1,41 +0,0 @@
-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 } 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 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;
-    get writeVariableName(): string;
-    constructor(element: HTMLElement, injector: Injector, modalService: BsModalService, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, graphStore: GraphStore, operationRecordService: OperationRecordService, 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;
-}