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

package/src/elements/base/readable-element.ts

@@ -1,94 +0,0 @@
-import { ReadableModel, State } from '../../model';
-import { VariableCommunicator, VariableValue, VariableState } from '../../communication';
-import { ConditionalEnableElement } from './conditional-enable-element';
-import { PermissionChecker } from '../../service';
-import { Localization } from '../../localization';
-import { forEach } from 'lodash';
-import { VariableUtil } from '../../utils/variable-util';
-import { VariableStore } from '../../config';
-
-export abstract class ReadableElement extends ConditionalEnableElement {
-
-    protected abstract model: ReadableModel;
-
-    constructor(element: HTMLElement, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator,
-        variableStore: VariableStore, localization: Localization, signalRAppId: string) {
-        super(element, permissionChecker, variableCommunicator, variableStore, localization, signalRAppId);
-    }
-
-    init(variableName: string) {
-        if (variableName) {
-            let hasVariable = false;
-            forEach(this.elementStates, elementState => {
-                if (elementState.variableName === variableName) {
-                    hasVariable = true;
-                }
-            });
-            if (!hasVariable) {
-                this.elementStates.push(new VariableState(variableName, undefined));
-            }
-        }
-        this.initState();
-    }
-
-    public get readVariableName(): string {
-        if (!this.model) { throw new Error('Model cannot be null'); }
-        if (null == this.model.version || this.model.version < 2) {
-            return this.model.variableName;
-        } else {
-            const variable = this.model.readVariable;
-            if (!variable) { return undefined; }
-            return VariableUtil.getConvertedVariableName(this.variableStore, variable);
-        }
-    }
-
-    public get minVariableName(): string {
-        if (!this.model.minValueType) { return undefined; }
-        return this.getVariableName(this.model.minVariable);
-    }
-
-    public get minValueType(): any {
-        return this.model.minValueType;
-    }
-
-    public get maxVariableName(): string {
-        if (!this.model.maxValueType) { return undefined; }
-        return this.getVariableName(this.model.maxVariable);
-    }
-
-    public get maxValueType(): any {
-        return this.model.maxValueType;
-    }
-
-    private getVariableName(variable: any): string {
-        if (!this.model) { throw new Error('Model cannot be null'); }
-        if (!variable) { return undefined; }
-        return VariableUtil.getConvertedVariableName(this.variableStore, variable);
-
-    }
-
-    protected abstract updateVariableValue(value: any, variableName: any): void;
-
-    reportStateChanged(variableState: VariableState): void {
-        forEach(this.elementStates, elementState => {
-            if (elementState.variableName === variableState.variableName) {
-                elementState.state = variableState.state;
-                this.changeStates();
-            }
-        });
-    }
-
-    reportValueChanged(value: VariableValue): void {
-        forEach(this.elementStates, elementState => {
-            if (elementState.variableName === value.variableName) {
-                elementState.state = value.state;
-                this.changeStates();
-            }
-        });
-        if (this.state === State.Normal || this.state === State.Disable
-            || value.variableName === this.minVariableName
-            || value.variableName === this.maxVariableName) {
-            this.updateVariableValue(value.value, value.variableName);
-        }
-    }
-}

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

@@ -1,200 +0,0 @@
-import { PermissionChecker } from '../../service';
-import { Localization } from '../../localization';
-import { forEach } from 'lodash';
-import { VariableCommunicator, VariableStateEnum, VariableState } from '../../communication';
-import { ConditionalDynamicDisplayElement } from './conditional-dynamic-display-element';
-import { State } from '../../model';
-import { VariableStore } from '../../config';
-
-export abstract class StateControlElement extends ConditionalDynamicDisplayElement {
-
-    isEnable = true;
-    elementStates: VariableState[] = [];
-    state: State;
-    private currentRect: JQuery;
-    preState: State;
-
-    constructor(element: HTMLElement, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator,
-        variableStore: VariableStore, protected readonly localization: Localization, signalRAppId: string) {
-        super(element, permissionChecker, variableCommunicator, variableStore, signalRAppId);
-    }
-
-    initState() {
-        if (!this.elementStates.length) {
-            return;
-        }
-        this.state = State.Loading;
-        this.loadStateData(this.state);
-    }
-
-    updateElementStates(newElementStates: VariableState[]) {
-        forEach(this.elementStates, elementState => {
-            forEach(newElementStates, newElementState => {
-                if (elementState.variableName === newElementState.variableName) {
-                    elementState.state = newElementState.state;
-                }
-            });
-        });
-        this.changeStates();
-    }
-
-    addElementState(newElementState: VariableState) {
-        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: VariableState): State {
-        let currentState: State = 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: 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: 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);
-    }
-
-    private setState(url: string, title: string, stroke: string) {
-        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);
-        }
-    }
-
-    private 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/src/elements/character-display/character-display-element.ts

@@ -1,314 +0,0 @@
-import { Injector } from '@angular/core';
-import { BsModalService } from 'ngx-bootstrap/modal';
-import { VariableCommunicator } from '../../communication';
-import { GraphResult, GraphStore, GraphType, VariableStore } from '../../config';
-import { Localization } from '../../localization';
-import { LoggerService, 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 { CharacterDisplay, State, Font } from '../../model';
-import { OperationRecordService, PermissionChecker } from '../../service';
-import { AccessPermissionService, GraphUtil } from '../../utils';
-import { ReadableElement } from '../base/readable-element';
-import { VerifyPasswordModalComponent } from '../../modal/verify-password/verify-password-modal.component';
-import { SecurityChecker } from '../../security';
-import { VariableUtil } from '../../utils/variable-util';
-import { TextElementModal } from '../shared/text/text-element';
-
-export class CharacterDisplayElement extends ReadableElement {
-
-    protected readonly model: CharacterDisplay;
-    private readonly accessPermissionService: AccessPermissionService;
-
-    private displayValue = '';
-    private graphs = new Map<number, GraphResult>();
-    private readonly logger: LoggerService;
-
-    constructor(element: HTMLElement, injector: Injector,
-        private readonly modalService: BsModalService,
-        variableCommunicator: VariableCommunicator,
-        private readonly graphStore: GraphStore,
-        permissionChecker: PermissionChecker,
-        private readonly operationRecordService: OperationRecordService,
-        private readonly securityChecker: SecurityChecker,
-        variableStore: VariableStore,
-        localization: Localization,
-        signalRAppId: string) {
-        super(element, permissionChecker, variableCommunicator, variableStore, localization, signalRAppId);
-        this.logger = injector.get(LOGGER_SERVICE_TOKEN);
-        this.accessPermissionService = injector.get(AccessPermissionService);
-        this.initElement();
-        this.initClickEvent();
-    }
-
-    public get readVariableName(): string {
-        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);
-        }
-    }
-
-    public get writeVariableName(): string {
-        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);
-        }
-    }
-
-    protected updateVariableValue(value: string) {
-        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('');
-        }
-    }
-
-    private updateDisplayValue(text: string) {
-        const textElement = this.$element.find('foreignObject').find('i');
-        if (textElement) { textElement.text(text); }
-    }
-
-    private getVariableValueText(value: string) {
-        return this.characterDisplayText(this.model.isPassword, value);
-    }
-
-    private characterDisplayText(isPassword: boolean, value: string) {
-        let displayText = '';
-        if (null == value || value.toString().trim().length <= 0) { return displayText; }
-        displayText = value.toString();
-        if (isPassword) {
-            displayText = '*'.repeat(displayText.length);
-        }
-        return displayText;
-    }
-
-    private initElement(): any {
-        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);
-                    });
-            }
-        }
-    }
-    private initVariableText(width: number, height: number) {
-        if (!this.model.showVariableText) { return; }
-        const font: 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);
-    }
-
-    private initClickEvent() {
-        if (!this.writeVariableName || !this.accessPermissionService.canWrite(this.model.accessPermission)) { return; }
-        this.rootElement.style('cursor', 'hand');
-        setTimeout(() => {
-            const elementBox = (<any>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 as AlertModalComponent).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 as ConfirmOperationModalComponent).onClosed.subscribe(result => {
-                    modalRef.hide();
-                    onClosedSub.unsubscribe();
-                    if (result) {
-                        this.checkElementPassword();
-                    }
-                });
-            } else {
-                this.checkElementPassword();
-            }
-        });
-    }
-
-    private 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 as VerifyPasswordModalComponent).onClosed.subscribe(result => {
-                modalRef.hide();
-                onClosedSub.unsubscribe();
-                if (result) {
-                    this.doWriteCharacterValue();
-                }
-            });
-        } else {
-            this.doWriteCharacterValue();
-        }
-    }
-
-    private 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 as WriteCharacterModalComponent).onClosed.subscribe(result => {
-            modalRef.hide();
-            onClosedSub.unsubscribe();
-            if (result) {
-                this.variableCommunicator.write(this.writeVariableName, result.value).subscribe();
-
-                this.recordOperation(result.value);
-            }
-        });
-    }
-
-    private recordOperation(newValue: string) {
-        if (this.model.isRecordOperation || this.model.isRecordOperation === undefined) {
-            this.operationRecordService.record({
-                variableOptionModel: {
-                    variableName: this.writeVariableName,
-                    originValue: this.displayValue,
-                    newValue: newValue
-                },
-                operationDescription: this.model.operationDescription
-            });
-        }
-    }
-
-    private changeGraph(graphResult: 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);
-        }
-    }
-}