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

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

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

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

@@ -0,0 +1 @@
+[{"__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

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

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

@@ -0,0 +1 @@
+[{"__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

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