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

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

@@ -1,24 +0,0 @@
-import { PermissionChecker } from '../../service';
-import { Localization } from '../../localization';
-import { VariableCommunicator, VariableState } from '../../communication';
-import { ConditionalDynamicDisplayElement } from './conditional-dynamic-display-element';
-import { State } from '../../model';
-import { VariableStore } from '../../config';
-export declare abstract class StateControlElement extends ConditionalDynamicDisplayElement {
-    protected readonly localization: Localization;
-    isEnable: boolean;
-    elementStates: VariableState[];
-    state: State;
-    private currentRect;
-    preState: State;
-    constructor(element: HTMLElement, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore, localization: Localization, signalRAppId: string);
-    initState(): void;
-    updateElementStates(newElementStates: VariableState[]): void;
-    addElementState(newElementState: VariableState): void;
-    changeStates(): void;
-    getState(elementState: VariableState): State;
-    changeState(state: State): void;
-    loadStateData(state: State): void;
-    private setState;
-    private clearTip;
-}

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

@@ -1,180 +0,0 @@
-import { forEach } from 'lodash';
-import { VariableStateEnum } from '../../communication';
-import { ConditionalDynamicDisplayElement } from './conditional-dynamic-display-element';
-import { State } from '../../model';
-export class StateControlElement extends ConditionalDynamicDisplayElement {
-    constructor(element, permissionChecker, variableCommunicator, variableStore, localization, signalRAppId) {
-        super(element, permissionChecker, variableCommunicator, variableStore, signalRAppId);
-        this.localization = localization;
-        this.isEnable = true;
-        this.elementStates = [];
-    }
-    initState() {
-        if (!this.elementStates.length) {
-            return;
-        }
-        this.state = State.Loading;
-        this.loadStateData(this.state);
-    }
-    updateElementStates(newElementStates) {
-        forEach(this.elementStates, elementState => {
-            forEach(newElementStates, newElementState => {
-                if (elementState.variableName === newElementState.variableName) {
-                    elementState.state = newElementState.state;
-                }
-            });
-        });
-        this.changeStates();
-    }
-    addElementState(newElementState) {
-        let hasVariable = false;
-        forEach(this.elementStates, elementState => {
-            if (elementState.variableName === newElementState.variableName) {
-                hasVariable = true;
-            }
-        });
-        if (!hasVariable) {
-            this.elementStates.push(newElementState);
-        }
-    }
-    changeStates() {
-        this.state = State.Normal;
-        forEach(this.elementStates, elementState => {
-            const currentState = this.getState(elementState);
-            this.changeState(currentState);
-        });
-        if (this.state === State.Normal) {
-            if (!this.isEnable) {
-                this.state = State.Disable;
-            }
-        }
-        this.loadStateData(this.state);
-    }
-    getState(elementState) {
-        let currentState = State.Loading;
-        switch (elementState.state) {
-            case VariableStateEnum.Offline:
-                currentState = State.Offline;
-                break;
-            case VariableStateEnum.Unbind:
-                currentState = State.Unbind;
-                break;
-            case VariableStateEnum.DataNormal:
-                currentState = State.Normal;
-                break;
-            case VariableStateEnum.Abnormal:
-                currentState = State.Abnormal;
-                break;
-        }
-        return currentState;
-    }
-    changeState(state) {
-        switch (state) {
-            case State.Unbind:
-                this.state = State.Unbind;
-                break;
-            case State.Offline:
-                if (this.state !== State.Unbind) {
-                    this.state = State.Offline;
-                }
-                break;
-            case State.Loading:
-                if (this.state !== State.Unbind && this.state !== State.Offline) {
-                    this.state = State.Loading;
-                }
-                break;
-            case State.Abnormal:
-                if (this.state !== State.Unbind && this.state !== State.Offline && this.state !== State.Loading) {
-                    this.state = State.Abnormal;
-                }
-                break;
-        }
-    }
-    loadStateData(state) {
-        if (state === this.preState) {
-            return;
-        }
-        this.preState = state;
-        if (this.state === State.Normal) {
-            this.clearTip();
-            return;
-        }
-        let url = '';
-        let title = '';
-        let stroke = '';
-        switch (state) {
-            case State.Offline:
-                url = 'assets/img/offline.svg';
-                title = this.localization.offline;
-                stroke = '#999999';
-                break;
-            case State.Unbind:
-                url = 'assets/img/unbind.svg';
-                title = this.localization.unbind;
-                stroke = '#586e7c';
-                break;
-            case State.Abnormal:
-                url = 'assets/img/abnormal.svg';
-                title = this.localization.abnormal;
-                stroke = '#f6a520';
-                break;
-            case State.Disable:
-                url = 'assets/img/disabled.svg';
-                title = this.localization.disable;
-                stroke = '#ff4444';
-                break;
-            default:
-                url = 'assets/img/loading.svg';
-                title = this.localization.loading;
-                stroke = '#226abc';
-                break;
-        }
-        this.setState(url, title, stroke);
-    }
-    setState(url, title, stroke) {
-        this.clearTip();
-        if (!this.currentRect) {
-            this.currentRect = this.$element.find('rect#StateFrame').first();
-        }
-        if (!this.currentRect.length) {
-            return;
-        }
-        const document = this.$element[0].ownerDocument;
-        const imgObj = document.createElementNS('http://www.w3.org/2000/svg', 'image');
-        if (imgObj) {
-            const currentRectElement = this.currentRect[0];
-            let x = Number(currentRectElement.getAttribute('width')) - 20;
-            const currentRectX = currentRectElement.getAttribute('x');
-            if (currentRectX !== null) {
-                x += Number(currentRectX);
-            }
-            currentRectElement.setAttribute('stroke', stroke);
-            currentRectElement.setAttribute('stroke-opacity', '0.5');
-            imgObj.href.baseVal = url;
-            imgObj.setAttributeNS(null, 'id', 'StateImage');
-            imgObj.setAttributeNS(null, 'x', x.toString());
-            imgObj.setAttributeNS(null, 'y', '0');
-            imgObj.setAttributeNS(null, 'height', '20px');
-            imgObj.setAttributeNS(null, 'width', '20px');
-            const titleElement = document.createElementNS('http://www.w3.org/2000/svg', 'title');
-            const text = document.createTextNode(title);
-            titleElement.appendChild(text);
-            imgObj.appendChild(titleElement);
-            this.$element.append(imgObj);
-        }
-    }
-    clearTip() {
-        if (!this.currentRect) {
-            this.currentRect = this.$element.find('rect#StateFrame').first();
-        }
-        if (!this.currentRect.length) {
-            return;
-        }
-        const currentRectElement = this.currentRect[0];
-        const stroke = currentRectElement.getAttribute('stroke');
-        if (stroke) {
-            currentRectElement.removeAttribute('stroke');
-        }
-        this.$element.find('image#StateImage').remove();
-    }
-}

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

@@ -1 +0,0 @@
-[{"__symbolic":"module","version":4,"metadata":{"StateControlElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./conditional-dynamic-display-element","name":"ConditionalDynamicDisplayElement","line":8,"character":50},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":16,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":16,"character":57},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":16,"character":98},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":17,"character":23},{"__symbolic":"reference","module":"../../localization","name":"Localization","line":17,"character":71},{"__symbolic":"reference","name":"string"}]}],"initState":[{"__symbolic":"method"}],"updateElementStates":[{"__symbolic":"method"}],"addElementState":[{"__symbolic":"method"}],"changeStates":[{"__symbolic":"method"}],"getState":[{"__symbolic":"method"}],"changeState":[{"__symbolic":"method"}],"loadStateData":[{"__symbolic":"method"}],"setState":[{"__symbolic":"method"}],"clearTip":[{"__symbolic":"method"}]}}}}]

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

@@ -1,35 +0,0 @@
-import { Injector } from '@angular/core';
-import { BsModalService } from 'ngx-bootstrap/modal';
-import { VariableCommunicator } from '../../communication';
-import { GraphStore, VariableStore } from '../../config';
-import { Localization } from '../../localization';
-import { CharacterDisplay } from '../../model';
-import { OperationRecordService, PermissionChecker } from '../../service';
-import { ReadableElement } from '../base/readable-element';
-import { SecurityChecker } from '../../security';
-export declare class CharacterDisplayElement extends ReadableElement {
-    private readonly modalService;
-    private readonly graphStore;
-    private readonly operationRecordService;
-    private readonly securityChecker;
-    protected readonly model: CharacterDisplay;
-    private readonly accessPermissionService;
-    private displayValue;
-    private graphs;
-    private readonly logger;
-    constructor(element: HTMLElement, injector: Injector, modalService: BsModalService, variableCommunicator: VariableCommunicator, graphStore: GraphStore, permissionChecker: PermissionChecker, operationRecordService: OperationRecordService, securityChecker: SecurityChecker, variableStore: VariableStore, localization: Localization, signalRAppId: string);
-    get readVariableName(): string;
-    get writeVariableName(): string;
-    protected updateVariableValue(value: string): void;
-    changeStates(): void;
-    private updateDisplayValue;
-    private getVariableValueText;
-    private characterDisplayText;
-    private initElement;
-    private initVariableText;
-    private initClickEvent;
-    private checkElementPassword;
-    private doWriteCharacterValue;
-    private recordOperation;
-    private changeGraph;
-}

package/elements/character-display/character-display-element.js

@@ -1,311 +0,0 @@
-import { GraphType } from '../../config';
-import { LOGGER_SERVICE_TOKEN } from '../../logger';
-import { AlertModalComponent } from '../../modal/alert/alert-modal.component';
-import { ConfirmOperationModalComponent } from '../../modal/confirm-operation/confirm-operation-modal.component';
-import { WriteCharacterModalArgs } from '../../modal/write-character/write-character-modal-args';
-import { WriteCharacterModalComponent } from '../../modal/write-character/write-character-modal.component';
-import { State } from '../../model';
-import { AccessPermissionService, GraphUtil } from '../../utils';
-import { ReadableElement } from '../base/readable-element';
-import { VerifyPasswordModalComponent } from '../../modal/verify-password/verify-password-modal.component';
-import { VariableUtil } from '../../utils/variable-util';
-import { TextElementModal } from '../shared/text/text-element';
-export class CharacterDisplayElement extends ReadableElement {
-    constructor(element, injector, modalService, variableCommunicator, graphStore, permissionChecker, operationRecordService, securityChecker, variableStore, localization, signalRAppId) {
-        super(element, permissionChecker, variableCommunicator, variableStore, localization, signalRAppId);
-        this.modalService = modalService;
-        this.graphStore = graphStore;
-        this.operationRecordService = operationRecordService;
-        this.securityChecker = securityChecker;
-        this.displayValue = '';
-        this.graphs = new Map();
-        this.logger = injector.get(LOGGER_SERVICE_TOKEN);
-        this.accessPermissionService = injector.get(AccessPermissionService);
-        this.initElement();
-        this.initClickEvent();
-    }
-    get readVariableName() {
-        if (!this.model) {
-            throw new Error('Model cannot be null');
-        }
-        if (null == this.model.version || this.model.version < 1) {
-            return this.model.readVariableName;
-        }
-        else {
-            const variable = this.model.readVariable;
-            if (!variable) {
-                return undefined;
-            }
-            return VariableUtil.getConvertedVariableName(this.variableStore, variable);
-        }
-    }
-    get writeVariableName() {
-        if (!this.model) {
-            throw new Error('Model cannot be null');
-        }
-        if (null == this.model.version) {
-            if (this.model.isSameVariable) {
-                return this.model.readVariableName;
-            }
-            else {
-                return this.model.writeVariableName;
-            }
-        }
-        else {
-            const variable = this.model.writeVariable;
-            if (!variable) {
-                return undefined;
-            }
-            return VariableUtil.getConvertedVariableName(this.variableStore, variable);
-        }
-    }
-    updateVariableValue(value) {
-        const valueText = this.getVariableValueText(value);
-        // filter control character
-        this.displayValue = valueText.replace(/[\u0000-\u001F]|[\u007F-\u00A0]/g, '');
-        this.updateDisplayValue(this.displayValue);
-    }
-    changeStates() {
-        super.changeStates();
-        if (this.state === State.Normal || this.state === State.Disable) {
-            this.updateDisplayValue(this.displayValue);
-        }
-        else {
-            this.updateDisplayValue('');
-        }
-    }
-    updateDisplayValue(text) {
-        const textElement = this.$element.find('foreignObject').find('i');
-        if (textElement) {
-            textElement.text(text);
-        }
-    }
-    getVariableValueText(value) {
-        return this.characterDisplayText(this.model.isPassword, value);
-    }
-    characterDisplayText(isPassword, value) {
-        let displayText = '';
-        if (null == value || value.toString().trim().length <= 0) {
-            return displayText;
-        }
-        displayText = value.toString();
-        if (isPassword) {
-            displayText = '*'.repeat(displayText.length);
-        }
-        return displayText;
-    }
-    initElement() {
-        const { rootElement } = this;
-        rootElement.selectAll('*').remove();
-        const label = this.model.label;
-        let width = null, height = null;
-        if (this.model.size) {
-            width = this.model.size.width;
-            height = this.model.size.height;
-        }
-        if (!width || !height) {
-            width = 60;
-            height = 38;
-        }
-        rootElement.append('rect').attr('id', 'StateFrame').attr('width', width).attr('height', height).attr('fill', 'transparent');
-        this.initVariableText(width, height);
-        let translateX = '';
-        if (this.model.showVariableText) {
-            translateX = `translate(${width * 7 / 11},0)`;
-            width = width * 4 / 11;
-        }
-        else {
-            translateX = 'translate(0,0)';
-        }
-        if (this.model.useGraph) {
-            rootElement.append('image')
-                .attr('width', width)
-                .attr('height', height)
-                .attr('preserveAspectRatio', 'none')
-                .attr('fill', 'none')
-                .attr('crossorigin', 'anonymous')
-                .attr('transform', translateX);
-        }
-        const font = label.font;
-        if (!font) {
-            throw new Error('font missing.');
-        }
-        const textElement = rootElement.append('foreignObject')
-            .attr('width', width)
-            .attr('height', height)
-            .attr('fill', 'none')
-            .attr('transform', translateX);
-        const bodyElement = textElement.append('xhtml:div')
-            .attr('class', 'svgBody')
-            .html('<div></div>');
-        const divElement = bodyElement.select('div')
-            .style('height', height + 'px')
-            .style('overflow', 'hidden')
-            .style('display', 'flex')
-            .style('align-items', 'center');
-        const iElement = divElement.append('i');
-        iElement.style('word-break', 'break-all')
-            .style('text-align', font.textAlign)
-            .style('alignment-baseline', 'central')
-            .style('transform', `translate(${width / 2},${height / 2})`).text(label.content)
-            .style('color', font.color)
-            .style('font-size', font.fontSize)
-            .style('font-style', 'normal')
-            .style('width', '100%');
-        if (font.fontStyle) {
-            const fontStyle = font.fontStyle.split(' ');
-            const isBold = $.inArray('bold', fontStyle);
-            const italic = $.inArray('Italic', fontStyle);
-            const fontFamily = fontStyle.pop();
-            if (isBold >= 0) {
-                iElement.style('font-weight', 'bold');
-            }
-            if (italic >= 0) {
-                iElement.style('font-style', 'italic');
-            }
-            iElement.style('font-family', fontFamily ? fontFamily + ',msyh' : 'msyh');
-        }
-        if (font.isUnderline) {
-            iElement.style('text-decoration', 'underline');
-        }
-        if (this.model.useGraph) {
-            if (this.graphs.has(0)) {
-                const graph = this.graphs.get(0);
-                // 已经发出过图形请求，不再重复请求。
-                if (graph == null) {
-                    return;
-                }
-                this.changeGraph(graph);
-            }
-            else {
-                // 标记，防止重复请求图形。
-                this.graphs.set(0, null);
-                this.graphStore.getGraph(this.model.graphSetting.id, 0, GraphUtil.getExtendedStyle(this.model.graphSetting, 0))
-                    .subscribe(graphResult => {
-                    this.graphs.set(0, graphResult);
-                    this.changeGraph(graphResult);
-                });
-            }
-        }
-    }
-    initVariableText(width, height) {
-        if (!this.model.showVariableText) {
-            return;
-        }
-        const font = {
-            isUnderline: this.model.variableText.font.isUnderline,
-            isBold: this.model.variableText.font.isBold,
-            isItalic: this.model.variableText.font.isItalic,
-            fontSize: this.model.variableText.font.fontSize,
-            fontFamily: this.model.variableText.font.fontFamily,
-            color: this.model.variableText.font.color,
-            textAlign: this.model.variableText.font.textAlign
-        };
-        const textElement = new TextElementModal(this.model.variableText.content + ':', font, width * 7 / 11, height, true);
-        this.$element.append(textElement.Element);
-    }
-    initClickEvent() {
-        if (!this.writeVariableName || !this.accessPermissionService.canWrite(this.model.accessPermission)) {
-            return;
-        }
-        this.rootElement.style('cursor', 'hand');
-        setTimeout(() => {
-            const elementBox = this.$element[0].getBBox();
-            this.$element.find('rect').attr('width', elementBox.width);
-            this.$element.find('rect').attr('height', elementBox.height);
-        }, 0);
-        this.$element.click(__ => {
-            if (!this.isInitialized) {
-                return;
-            }
-            if (!this.isEnable) {
-                const message = !this.isGrantedPermission ? this.localization.permissiontip : this.localization.conditionIsNotMetTip;
-                const modalRef = this.modalService.show(AlertModalComponent, { initialState: { alermMessage: message }, backdrop: 'static', class: 'gui-modal-dialog-position', animated: false });
-                const onClosedSub = modalRef.content.onClosed.subscribe(() => {
-                    modalRef.hide();
-                    onClosedSub.unsubscribe();
-                });
-                return;
-            }
-            if (this.model.useSecurity) {
-                const modalRef = this.modalService.show(ConfirmOperationModalComponent, {
-                    backdrop: 'static', class: 'gui-modal-dialog-position', animated: false
-                });
-                const onClosedSub = modalRef.content.onClosed.subscribe(result => {
-                    modalRef.hide();
-                    onClosedSub.unsubscribe();
-                    if (result) {
-                        this.checkElementPassword();
-                    }
-                });
-            }
-            else {
-                this.checkElementPassword();
-            }
-        });
-    }
-    checkElementPassword() {
-        if (this.model.enablePassword) {
-            const modalRef = this.modalService.show(VerifyPasswordModalComponent, { initialState: { securityChecker: this.securityChecker }, backdrop: 'static', class: 'gui-modal-dialog-position', animated: false });
-            const onClosedSub = modalRef.content.onClosed.subscribe(result => {
-                modalRef.hide();
-                onClosedSub.unsubscribe();
-                if (result) {
-                    this.doWriteCharacterValue();
-                }
-            });
-        }
-        else {
-            this.doWriteCharacterValue();
-        }
-    }
-    doWriteCharacterValue() {
-        if (null == this.writeVariableName) {
-            return;
-        }
-        const args = new WriteCharacterModalArgs(this.writeVariableName, this.model.isPassword, this.model.charCount, this.displayValue);
-        const modalRef = this.modalService.show(WriteCharacterModalComponent, {
-            initialState: { args: args }, backdrop: 'static', class: 'gui-modal-dialog-position', animated: false
-        });
-        const onClosedSub = modalRef.content.onClosed.subscribe(result => {
-            modalRef.hide();
-            onClosedSub.unsubscribe();
-            if (result) {
-                this.variableCommunicator.write(this.writeVariableName, result.value).subscribe();
-                this.recordOperation(result.value);
-            }
-        });
-    }
-    recordOperation(newValue) {
-        if (this.model.isRecordOperation || this.model.isRecordOperation === undefined) {
-            this.operationRecordService.record({
-                variableOptionModel: {
-                    variableName: this.writeVariableName,
-                    originValue: this.displayValue,
-                    newValue: newValue
-                },
-                operationDescription: this.model.operationDescription
-            });
-        }
-    }
-    changeGraph(graphResult) {
-        if (!graphResult.failed) {
-            const graph = graphResult.graph;
-            switch (graph.graphType) {
-                case GraphType.Image:
-                    this.rootElement.select('image').attr('xlink:href', graph.source);
-                    break;
-                case GraphType.SVG:
-                    this.rootElement.select('image').attr('xlink:href', graph.source);
-                    break;
-                default:
-                    this.logger.error(new Error(`Unknown graph ${graph.graphType}.`));
-                    this.rootElement.select('image').attr('xlink:href', null);
-                    break;
-            }
-        }
-        else {
-            this.rootElement.select('image').attr('xlink:href', null);
-        }
-    }
-}

package/elements/character-display/character-display-element.metadata.json

@@ -1 +0,0 @@
-[{"__symbolic":"module","version":4,"metadata":{"CharacterDisplayElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../base/readable-element","name":"ReadableElement","line":19,"character":45},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":28,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":28,"character":48},{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalService","line":29,"character":39},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":30,"character":30},{"__symbolic":"reference","module":"../../config","name":"GraphStore","line":31,"character":37},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":32,"character":27},{"__symbolic":"reference","module":"../../service","name":"OperationRecordService","line":33,"character":49},{"__symbolic":"reference","module":"../../security","name":"SecurityChecker","line":34,"character":42},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":35,"character":23},{"__symbolic":"reference","module":"../../localization","name":"Localization","line":36,"character":22},{"__symbolic":"reference","name":"string"}]}],"updateVariableValue":[{"__symbolic":"method"}],"changeStates":[{"__symbolic":"method"}],"updateDisplayValue":[{"__symbolic":"method"}],"getVariableValueText":[{"__symbolic":"method"}],"characterDisplayText":[{"__symbolic":"method"}],"initElement":[{"__symbolic":"method"}],"initVariableText":[{"__symbolic":"method"}],"initClickEvent":[{"__symbolic":"method"}],"checkElementPassword":[{"__symbolic":"method"}],"doWriteCharacterValue":[{"__symbolic":"method"}],"recordOperation":[{"__symbolic":"method"}],"changeGraph":[{"__symbolic":"method"}]}}}}]

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

@@ -1,21 +0,0 @@
-import { DatetimeDisplay } from '../../model/datetime-display/datetime-display';
-import { PermissionChecker } from '../../service';
-import { VariableCommunicator } from '../../communication';
-import { ConditionalDisplayElement } from '../base/conditional-display-element';
-import { GraphStore, VariableStore } from '../../config';
-import { LoggerService } from '../../logger';
-import { Injector } from '@angular/core';
-export declare class DatetimeDisplayElement extends ConditionalDisplayElement {
-    protected readonly permissionChecker: PermissionChecker;
-    protected readonly variableCommunicator: VariableCommunicator;
-    protected readonly variableStore: VariableStore;
-    private readonly graphStore;
-    protected readonly model: DatetimeDisplay;
-    protected readonly logger: LoggerService;
-    private readonly $dateTimeText;
-    constructor(element: HTMLElement, injector: Injector, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore, graphStore: GraphStore, signalRAppId: string);
-    private getAndSetCurrentTime;
-    private getDatetimeFormat;
-    private initGraph;
-    private getFormat;
-}