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

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

@@ -0,0 +1,101 @@
+import { BitConditonLogic, ConditionItemsResultObserver, ConditionControlResultValue } from '../../model';
+import { forEach } from 'lodash';
+import { ConditionalControlModel } from '../../model/base/conditional-control-model';
+import { BitConditionModel } from '../../model/shared/condition/bit-condition-model';
+import { ConditionItemModel } from '../../model/shared/condition/condition-item-model';
+import { ConditionType } from '../../model/shared/condition/condition-type';
+import { RelationType } from '../../model/shared/condition/relation-type';
+import { PermissionChecker } from '../../service';
+import { VariableCommunicator, VariableState } from '../../communication';
+import { StateControlElement } from './state-control-element';
+import { Localization } from '../../localization';
+import { VariableUtil } from '../../utils/variable-util';
+import { VariableDefinition } from '../../communication/variable/variable-definition';
+import { VariableStore } from '../../config';
+
+export abstract class ConditionalControlElement extends StateControlElement {
+
+    protected abstract readonly model: ConditionalControlModel;
+
+    constructor(element: HTMLElement,
+        permissionChecker: PermissionChecker,
+        protected readonly variableCommunicator: VariableCommunicator, protected readonly variableStore: VariableStore, localization: Localization,
+        signalRAppId: string) {
+        super(element, permissionChecker, variableCommunicator, variableStore, localization, signalRAppId);
+        this.recoverData();
+        setTimeout(() => {
+            this.initConditionalControl();
+        });
+    }
+
+    protected abstract updateElement(value: ConditionControlResultValue): void;
+
+    private initConditionalControl() {
+        if (this.model.isControl === false) { return; }
+        if (null == this.model.controlItems || !this.model.controlItems.length) { return; }
+
+        const controlConditionResult = new ConditionItemsResultObserver(this.model.controlItems, this.variableCommunicator, this.variableStore);
+        controlConditionResult.conditionResultChanged.subscribe(result => {
+            this.updateElement(result);
+        });
+        controlConditionResult.requestData(this.signalRAppId);
+    }
+
+    private recoverData(): void {
+        if (!this.model) { throw new Error('Model cannot be null'); }
+        if (null == this.model.version || this.model.version < 1) {
+            if (this.model.variableName) {
+                this.model.controlItems = new Array<ConditionItemModel>();
+                const bitCondition = {
+                    variableName: this.model.variableName,
+                    bitConditionLogic: BitConditonLogic.On
+                };
+
+                const condition = {
+                    index: 0,
+                    conditionType: ConditionType.Bit,
+                    condition: bitCondition as BitConditionModel,
+                    relationType: RelationType.None
+                };
+                this.model.controlItems.push(condition);
+                const variable = new VariableDefinition(condition.condition.variableName,
+                    condition.condition.variableGroupName, condition.condition.dataSourceCode, condition.condition.variableVersion);
+                this.addElementState(new VariableState(VariableUtil.getConvertedVariableName(this.variableStore, variable), undefined));
+                this.initState();
+            }
+        } else if (this.model.version < 2) {
+            if (this.model.readVariable
+                && this.model.readVariable.name
+                && this.model.readVariable.groupName) {
+                this.model.controlItems = new Array<ConditionItemModel>();
+                const bitCondition = {
+                    variableName: this.model.readVariable.name,
+                    variableGroupName: this.model.readVariable.groupName,
+                    bitConditionLogic: BitConditonLogic.On
+                };
+
+                const condition = {
+                    index: 0,
+                    conditionType: ConditionType.Bit,
+                    condition: bitCondition as BitConditionModel,
+                    relationType: RelationType.None
+                };
+                this.model.controlItems.push(condition);
+                const variable = new VariableDefinition(condition.condition.variableName, condition.condition.variableGroupName
+                    , condition.condition.dataSourceCode, condition.condition.variableVersion);
+                this.addElementState(new VariableState(VariableUtil.getConvertedVariableName(this.variableStore, variable)
+                    , undefined));
+                this.initState();
+            }
+        } else {
+            forEach(this.model.controlItems, controlItem => {
+                if (controlItem.condition.variableName) {
+                    const variable = new VariableDefinition(controlItem.condition.variableName,
+                        controlItem.condition.variableGroupName, controlItem.condition.dataSourceCode, controlItem.condition.variableVersion);
+                    this.addElementState(new VariableState(VariableUtil.getConvertedVariableName(this.variableStore, variable), undefined));
+                    this.initState();
+                }
+            });
+        }
+    }
+}

package/src/elements/base/conditional-display-element.ts

@@ -0,0 +1,90 @@
+import { ConditionItemsResultObserver, ConditionalDisplayModel } from '../../model';
+import { VariableCommunicator } from '../../communication';
+import { BaseElement } from './base-element';
+import { VariableStore } from '../../config';
+import { PermissionChecker } from '../../service/permission-checker';
+
+export abstract class ConditionalDisplayElement extends BaseElement {
+
+    protected abstract readonly model: ConditionalDisplayModel;
+
+    constructor(element: HTMLElement,
+        protected readonly permissionChecker: PermissionChecker,
+        protected readonly variableCommunicator: VariableCommunicator,
+        protected readonly variableStore: VariableStore,
+        signalRAppId: string) {
+        super(element, signalRAppId);
+        this.initDisplay();
+    }
+
+    private initDisplay() {
+        if (false !== this.model.isAwaysDisplay) { return; }
+        // If this element is conditional display, hide this element by default
+        this.hide();
+        if (this.model.version == null || this.model.version < 3) {
+            this.updateVisibilityByCondition();
+        } else {
+            const isDisplayControl = this.model.isDisplayControl || this.model.conditionItems.length > 0;
+            if (this.model.isDisplayPermission && !isDisplayControl) {
+                this.updateVisibilityByPermission();
+            }
+
+            if (!this.model.isDisplayPermission && isDisplayControl) {
+                this.updateVisibilityByCondition();
+            }
+
+            if (this.model.isDisplayPermission && isDisplayControl) {
+                this.checkDisplayConditionAndPermission();
+            }
+        }
+    }
+
+    private checkDisplayConditionAndPermission() {
+        if (null == this.model.conditionItems || !this.model.conditionItems.length) { return; }
+        const conditionResult = new ConditionItemsResultObserver(this.model.conditionItems, this.variableCommunicator, this.variableStore);
+        conditionResult.conditionResultChanged.subscribe(result => {
+            if (result.value) {
+                this.updateVisibilityByPermission();
+            } else {
+                this.hide();
+            }
+        });
+        conditionResult.requestData(this.signalRAppId);
+    }
+
+    private updateVisibilityByCondition() {
+        if (null == this.model.conditionItems || !this.model.conditionItems.length) { return; }
+        const conditionResult = new ConditionItemsResultObserver(this.model.conditionItems, this.variableCommunicator, this.variableStore);
+        conditionResult.conditionResultChanged.subscribe(result => {
+            if (result.value) {
+                this.show();
+            } else {
+                this.hide();
+            }
+        });
+        conditionResult.requestData(this.signalRAppId);
+    }
+
+    private updateVisibilityByPermission() {
+        if (!this.model.displayPermissionCodes || !this.model.displayPermissionCodes.length) { return; }
+        if (this.permissionChecker.isGranted(this.model.displayPermissionCodes)) {
+            this.show();
+        } else {
+            this.hide();
+        }
+    }
+
+    /**
+     * Hide this element
+     */
+    hide() {
+        this.rootElement.style('display', 'none');
+    }
+
+    /**
+     * Show this element
+     */
+    show() {
+        this.rootElement.style('display', 'block');
+    }
+}

package/src/elements/base/conditional-dynamic-display-element.ts

@@ -0,0 +1,159 @@
+import { ConditionalDynamicDisplayModel } from '../../model/base/conditional-dynamic-display-model';
+import { DynamicBehaviorType } from '../../model/shared/dynamic-display/dynamic-behavior-type';
+import { DynamicDisplay } from '../../model/shared/dynamic-display/dynamic-display';
+import { VariableCommunicator } from '../../communication';
+import { ConditionalDisplayElement } from './conditional-display-element';
+import { Size, Point } from '../../model';
+import { GuiConsts } from '../../shared';
+import { VariableStore } from '../../config';
+import { PermissionChecker } from '../../service/permission-checker';
+
+export abstract class ConditionalDynamicDisplayElement extends ConditionalDisplayElement {
+
+    protected abstract readonly model: ConditionalDynamicDisplayModel;
+
+    protected hor: number;
+    protected ver: number;
+    protected ang: number;
+    protected x: number;
+    protected y: number;
+    protected rotatedHor: number;
+    protected rotatedVer: number;
+    protected transform: string;
+
+    constructor(element: HTMLElement, permissionChecker: PermissionChecker,
+        protected readonly variableCommunicator: VariableCommunicator,
+        protected readonly variableStore: VariableStore,
+        signalRAppId: string) {
+        super(element, permissionChecker, variableCommunicator, variableStore, signalRAppId);
+        this.initDynamicBehavior();
+    }
+
+    protected initDynamicBehavior() {
+        this.ang = 0;
+        if (this.model.version >= 1 && this.model.dynamicSetting != null) {
+            const location = this.getActualLocation();
+            const strokeWidth = this.model.strokeWidth ? this.model.strokeWidth : 0;
+            this.hor = location.x - Number(strokeWidth) / 2;
+            this.ver = location.y - Number(strokeWidth) / 2;
+            const behavior = new DynamicDisplay(this.model.dynamicSetting, this.variableCommunicator, this.variableStore, location, this.signalRAppId);
+            behavior.doBehavior.subscribe(result => {
+                if (this.model.angle) {
+                    this.ang = Number(this.model.angle);
+                }
+                if (result.behaviorType === DynamicBehaviorType.HorizontalTranslation) {
+                    this.hor = Number(result.translation) - Number(strokeWidth) / 2;
+                } else if (result.behaviorType === DynamicBehaviorType.VerticalTranslation) {
+                    this.ver = Number(result.translation) - Number(strokeWidth) / 2;
+                } else if (result.behaviorType === DynamicBehaviorType.Rotation) {
+                    if (this.model.angle) {
+                        this.ang += Number(result.angel);
+                    } else {
+                        this.ang = Number(result.angel);
+                    }
+                }
+                const cosVal = Math.cos(this.ang * Math.PI / 180), sinVal = Math.sin(this.ang * Math.PI / 180);
+                if (this.model.version >= 2) {
+                    const size = this.getActualSize();
+                    if (size === undefined) {
+                        this.x = this.hor;
+                        this.y = this.ver;
+                    } else {
+                        switch (this.model.fixedPositionType) {
+                            case 0:
+                                this.x = this.hor;
+                                this.y = this.ver;
+                                break;
+                            case 1:
+                                this.x = this.hor + size.width / 2;
+                                this.y = this.ver;
+                                break;
+                            case 2:
+                                this.x = this.hor + size.width;
+                                this.y = this.ver;
+                                break;
+
+                            case 3:
+                                this.x = this.hor;
+                                this.y = this.ver + size.height / 2;
+                                break;
+                            case 4:
+                                this.x = this.hor + size.width / 2;
+                                this.y = this.ver + size.height / 2;
+                                break;
+                            case 5:
+                                this.x = this.hor + size.width;
+                                this.y = this.ver + size.height / 2;
+                                break;
+
+                            case 6:
+                                this.x = this.hor;
+                                this.y = this.ver + size.height;
+                                break;
+                            case 7:
+                                this.x = this.hor + size.width / 2;
+                                this.y = this.ver + size.height;
+                                break;
+                            case 8:
+                                this.x = this.hor + size.width;
+                                this.y = this.ver + size.height;
+                                break;
+                        }
+                    }
+                    let isOldData = true;
+                    if ((this.model.category === GuiConsts.components.meterKey || this.model.category === GuiConsts.components.switchIndicatorLightKey
+                        || this.model.category === GuiConsts.components.imageKey) && this.model.version > 4) {
+                        isOldData = false;
+                    } else if (this.model.category === GuiConsts.components.toggleViewKey && this.model.version > 5) {
+                        isOldData = false;
+                    } else if (!(this.model.category === GuiConsts.components.meterKey || this.model.category === GuiConsts.components.switchIndicatorLightKey
+                        || this.model.category === GuiConsts.components.imageKey || this.model.category === GuiConsts.components.toggleViewKey) && this.model.version > 3) {
+                        isOldData = false;
+                    } else {
+                        isOldData = true;
+                    }
+
+                    if (isOldData) {
+                        this.rotatedHor = (this.hor - this.x) * cosVal - (this.ver - this.y) * sinVal + this.x;
+                        this.rotatedVer = (this.hor - this.x) * sinVal + (this.ver - this.y) * cosVal + this.y;
+                    } else {
+                        this.rotatedHor = (this.hor - this.x) * cosVal - (this.ver - this.y) * sinVal + this.hor;
+                        this.rotatedVer = (this.hor - this.x) * sinVal + (this.ver - this.y) * cosVal + this.ver;
+                    }
+                    this.transform = 'matrix(' + cosVal.toFixed(6) + ',' + sinVal.toFixed(6) + ','
+                        + (-1 * sinVal).toFixed(6) + ',' + cosVal.toFixed(6) + ',' + this.rotatedHor + ',' + this.rotatedVer + ')';
+                    this.rootElement.style('-webkit-transform', this.transform);
+                } else {
+                    this.transform = 'matrix(' + cosVal.toFixed(6) + ',' + sinVal.toFixed(6) + ','
+                        + (-1 * sinVal).toFixed(6) + ',' + cosVal.toFixed(6) + ',' + this.hor + ',' + this.ver + ')';
+                    this.rootElement.style('-webkit-transform', this.transform);
+                }
+            });
+        }
+    }
+
+    protected getActualSize(): Size {
+        return this.model.size;
+    }
+
+    protected getActualLocation(): Point {
+        return this.model.location;
+    }
+
+    isBold(fontStyle: string): boolean {
+        return fontStyle && fontStyle.indexOf('bold') !== -1;
+    }
+
+    isItalic(fontStyle: string): boolean {
+        return fontStyle && fontStyle.indexOf('Italic') !== -1;
+    }
+
+    fontFamily(fontStyle: string): string {
+        if (!fontStyle) { return null; }
+        const isBold = this.isBold(fontStyle) ? 1 : 0;
+        const isItalic = this.isItalic(fontStyle) ? 1 : 0;
+        const fontSettings = fontStyle.split(' ');
+        const fontFamilyIndex = isBold + isItalic + 1;
+        return fontSettings.length > fontFamilyIndex ? fontSettings[fontFamilyIndex] : null;
+    }
+}

package/src/elements/base/conditional-enable-element.ts

@@ -0,0 +1,113 @@
+import { ConditionItemsResultObserver, ConditionalEnableModel } from '../../model';
+import { PermissionChecker } from '../../service';
+import { Localization } from '../../localization';
+import { VariableCommunicator } from '../../communication';
+import { StateControlElement } from './state-control-element';
+import { VariableStore } from '../../config';
+
+export abstract class ConditionalEnableElement extends StateControlElement {
+
+    protected abstract readonly model: ConditionalEnableModel;
+
+    isGrantedPermission = false;
+    isInitialized = false; // 逻辑控制专用
+
+    constructor(element: HTMLElement,
+        protected readonly permissionChecker: PermissionChecker,
+        protected readonly variableCommunicator: VariableCommunicator,
+        protected readonly variableStore: VariableStore,
+        protected readonly localization: Localization,
+        signalRAppId: string) {
+        super(element, permissionChecker, variableCommunicator, variableStore, localization, signalRAppId);
+        setTimeout(() => {
+            this.initialize();
+        });
+    }
+
+    private initialize() {
+        if (false !== this.model.isAwaysEnable) {
+            this.isInitialized = true;
+            return;
+        }
+        if (this.model.version == null || this.model.version < 3) {
+            this.updateEnableStateByCondition();
+        } else {
+            if (this.model.isEnablePermission || this.model.isEnablePermission === undefined) {
+                if (this.model.enablePermissionCodes) {
+                    this.isGrantedPermission = this.permissionChecker.isGranted(this.model.enablePermissionCodes);
+                } else {
+                    this.isGrantedPermission = true;
+                }
+            } else {
+                this.isGrantedPermission = true;
+            }
+            if (this.model.isEnablePermission && !this.model.isEnableControl) {
+                this.updateEnableStateByPermission();
+            }
+
+            if (!this.model.isEnablePermission && this.model.isEnableControl) {
+                this.updateEnableStateByCondition();
+            }
+
+            if (this.model.isEnablePermission && this.model.isEnableControl) {
+                this.updateEnableStateByConditionAndPermission();
+            }
+
+            if (!this.model.isEnablePermission && !this.model.isEnableControl) {
+                this.updateEnableStateByConditionAndPermission();
+            }
+        }
+        if (!this.isGrantedPermission) {
+            this.isInitialized = true;
+            this.isEnable = false;
+            this.changeStates();
+        }
+    }
+
+    private updateEnableStateByConditionAndPermission() {
+        if (null == this.model.enableItems || !this.model.enableItems.length) {
+            this.isInitialized = true;
+            return;
+        }
+        const enableConditionResult = new ConditionItemsResultObserver(this.model.enableItems, this.variableCommunicator, this.variableStore);
+        enableConditionResult.conditionResultChanged.subscribe(result => {
+            if (result.value) {
+                this.updateEnableStateByPermission();
+            } else {
+                this.setEnableByConditionOrPermission(false);
+            }
+            this.isInitialized = true;
+            this.changeStates();
+        });
+        enableConditionResult.requestData(this.signalRAppId);
+    }
+
+    private updateEnableStateByCondition() {
+        if (null == this.model.enableItems || !this.model.enableItems.length) {
+            this.isInitialized = true;
+            return;
+        }
+        const enableConditionResult = new ConditionItemsResultObserver(this.model.enableItems, this.variableCommunicator, this.variableStore);
+        enableConditionResult.conditionResultChanged.subscribe(result => {
+            this.setEnableByConditionOrPermission(result.value);
+            this.isInitialized = true;
+            this.changeStates();
+        });
+        enableConditionResult.requestData(this.signalRAppId);
+    }
+
+    private updateEnableStateByPermission() {
+        let isEnable = false;
+        if (this.model.enablePermissionCodes) {
+            isEnable = this.permissionChecker.isGranted(this.model.enablePermissionCodes);
+        } else {
+            isEnable = true;
+        }
+        this.setEnableByConditionOrPermission(isEnable);
+        this.isInitialized = true;
+    }
+
+    private setEnableByConditionOrPermission(isEnable: boolean) {
+        this.isEnable = isEnable;
+    }
+}

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

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