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

package/src/elements/static-elements/hyperlink-element.ts

@@ -0,0 +1,62 @@
+
+import { PermissionChecker } from '../../service';
+import { VariableCommunicator } from '../../communication';
+import { ConditionalDynamicDisplayElement } from '../base/conditional-dynamic-display-element';
+import { GraphStore, VariableStore } from '../../config';
+import { GraphStateElement } from '../shared/graph/graph-state-element';
+import { LoggerService, LOGGER_SERVICE_TOKEN } from '../../logger';
+import { Injector } from '@angular/core';
+import { HyperlinkModel } from '../../model/hyperlink/hyperlink.model';
+import { Font } from '../../model';
+import { TextElementModal } from '../shared/text/text-element';
+
+export class HyperlinkElement extends ConditionalDynamicDisplayElement {
+
+    protected readonly model: HyperlinkModel;
+    protected readonly logger: LoggerService;
+
+    constructor(element: HTMLElement, injector: Injector, permissionChecker: PermissionChecker,
+        variableCommunicator: VariableCommunicator, variableStore: VariableStore, private readonly graphStore: GraphStore,
+        signalRAppId: string) {
+        super(element, permissionChecker, variableCommunicator, variableStore, signalRAppId);
+        this.logger = injector.get(LOGGER_SERVICE_TOKEN);
+        if (this.model.size) {
+            this.initGraphAndText();
+        }
+        if (this.model && this.model.linkAddress) {
+            this.rootElement.style('cursor', 'hand');
+            this.rootElement.on('mousedown', () => {
+                let linkAddress = this.model.linkAddress;
+                const reg = /^http(s)?:\/\/.+$/;
+                if (!reg.test(linkAddress)) {
+                    linkAddress = 'http://' + linkAddress;
+                }
+                window.open(linkAddress, '_system');
+            });
+        }
+    }
+
+    private initGraphAndText() {
+        this.rootElement.selectAll('*').remove();
+        const size = this.model.size;
+        const width = size.width;
+        const height = size.height;
+        this.rootElement.append('rect').attr('id', 'StateFrame').attr('width', width).attr('height', height).attr('fill', 'transparent');
+        if (this.model.useGraph === true) {
+            const graphStateElement = new GraphStateElement(this.model.graphSetting, width, height, this.graphStore, this.logger);
+            graphStateElement.switchToState(0);
+            this.$element.prepend(graphStateElement.Element);
+        }
+        const font: Font = {
+            isUnderline: this.model.isUnderline,
+            isBold: this.isBold(this.model.font),
+            isItalic: this.isItalic(this.model.font),
+            fontSize: this.model.fontSize,
+            fontFamily: this.fontFamily(this.model.font),
+            color: this.model.stroke,
+            textAlign: this.model.textAlign
+        };
+        const textElement = new TextElementModal(this.model.text, font, width, height);
+        this.$element.append(textElement.Element);
+    }
+}

package/src/elements/static-elements/image-element.ts

@@ -0,0 +1,56 @@
+import { ImageStore, GraphStore, VariableStore } from '../../config';
+import { Image } from '../../model';
+import { PermissionChecker } from '../../service';
+import { VariableCommunicator } from '../../communication';
+import { ConditionalDynamicDisplayElement } from '../base/conditional-dynamic-display-element';
+import { ImageFillType } from '../../model/image/image-fill-type';
+import { GraphStateElement } from '../shared/graph/graph-state-element';
+import { LoggerService, LOGGER_SERVICE_TOKEN } from '../../logger';
+import { Injector } from '@angular/core';
+
+export class ImageElement extends ConditionalDynamicDisplayElement {
+
+    readonly model: Image;
+    protected readonly logger: LoggerService;
+
+    constructor(element: HTMLElement,
+        injector: Injector,
+        imageStore: ImageStore,
+        permissionChecker: PermissionChecker,
+        variableCommunicator: VariableCommunicator,
+        variableStore: VariableStore,
+        private readonly graphStore: GraphStore,
+        signalRAppId: string) {
+        super(element, permissionChecker, variableCommunicator, variableStore, signalRAppId);
+        this.logger = injector.get(LOGGER_SERVICE_TOKEN);
+        if (!this.model.version || this.model.version < 4 || this.model.fillType !== ImageFillType.Graph) {
+            let imageSourceUrl = '';
+            if (this.model.imageId) {
+                imageSourceUrl = imageStore.getImageUrl(this.model.imageId);
+            }
+            const imageEl = this.rootElement.select('image');
+            // gojs-v1.7.11不输出image元素导致图片不显示，这里专门处理一下。
+            if (imageEl.empty()) {
+                const size = this.model.size;
+                if (size) {
+                    this.rootElement.append('image')
+                        .attr('width', size.width)
+                        .attr('height', size.height)
+                        .attr('xlink:href', imageSourceUrl)
+                        .attr('preserveAspectRatio', 'none')
+                        .attr('crossorigin', 'anonymous');
+                }
+            } else {
+                imageEl.attr('xlink:href', imageSourceUrl).attr('crossorigin', 'anonymous');
+            }
+        } else {
+            this.initGraph(this.model.size.width, this.model.size.height);
+        }
+    }
+
+    private initGraph(width: number, height: number) {
+        const graphStateElement = new GraphStateElement(this.model.graphSetting, width, height, this.graphStore, this.logger);
+        graphStateElement.switchToState(0);
+        this.$element.prepend(graphStateElement.Element);
+    }
+}

package/src/elements/static-elements/text-element.ts

@@ -0,0 +1,70 @@
+import { TextModel } from '../../model';
+import { VariableCommunicator } from '../../communication';
+import { ConditionalDynamicDisplayElement } from '../base/conditional-dynamic-display-element';
+import { GraphStore, VariableStore } from '../../config';
+import { GraphStateElement } from '../shared/graph/graph-state-element';
+import { LoggerService, LOGGER_SERVICE_TOKEN } from '../../logger';
+import { Injector } from '@angular/core';
+import { TextElementModal } from '../shared/text/text-element';
+import { PermissionChecker } from '../../service';
+
+export class TextElement extends ConditionalDynamicDisplayElement {
+
+    protected readonly model: TextModel;
+    protected readonly logger: LoggerService;
+
+    constructor(element: HTMLElement, injector: Injector, permissionChecker: PermissionChecker,
+        variableCommunicator: VariableCommunicator, variableStore: VariableStore, private readonly graphStore: GraphStore,
+        signalRAppId: string) {
+        super(element, permissionChecker, variableCommunicator, variableStore, signalRAppId);
+        this.logger = injector.get(LOGGER_SERVICE_TOKEN);
+
+        if (this.model.text && this.model.size) {
+            const width = this.model.size.width;
+            const height = this.model.size.height;
+            this.rootElement.selectAll('*').remove();
+            this.rootElement.append('rect').attr('width', width).attr('height', height).attr('fill', 'transparent');
+            if (this.model.useGraph === true) {
+                const graphStateElement = new GraphStateElement(this.model.graphSetting, width, height, this.graphStore, this.logger);
+                graphStateElement.switchToState(0);
+                this.$element.prepend(graphStateElement.Element);
+            }
+            const font = {
+                isUnderline: this.model.isUnderline,
+                isBold: this.isBold(this.model.font),
+                isItalic: this.isItalic(this.model.font),
+                fontSize: this.model.fontSize,
+                fontFamily: this.fontFamily(this.model.font),
+                color: this.model.stroke,
+                textAlign: this.model.textAlign
+            };
+            const textElement = new TextElementModal(this.model.text, font, width, height);
+            this.$element.append(textElement.Element);
+        } else {
+            this.handleTextValue();
+            if (this.model.size && this.model.useGraph) {
+                this.initGraph(this.model.size.width, this.model.size.height);
+            }
+        }
+
+    }
+
+    dispose() {
+        if (this.$element) {
+            this.$element.remove();
+        }
+    }
+
+    private handleTextValue() {
+        const allText = this.$element.find('text');
+        for (let i = 0; i < allText.length; i++) {
+            allText[i].style.whiteSpace = 'pre';
+        }
+    }
+
+    private initGraph(width: number, height: number) {
+        const graphStateElement = new GraphStateElement(this.model.graphSetting, width, height, this.graphStore, this.logger);
+        graphStateElement.switchToState(0);
+        this.$element.prepend(graphStateElement.Element);
+    }
+}

package/src/elements/switch-indicator-light/bit-indicator-light-operator.ts

@@ -0,0 +1,82 @@
+import { EventEmitter } from '@angular/core';
+import { each } from 'lodash';
+import { BitCondition, BitConditonLogic, BitIndicatorLightSettings, SwitchIndicatorState } from '../../model';
+import { VariableCommunicator, VariableStateEnum, VariableValue, VariableState } from '../../communication';
+import { IndicatorLightOperator } from './indicator-light-operator';
+import { CurrentStateIdValue } from './current-stateId-value';
+import { Binary } from '../../model/shared/binary';
+import { VariableUtil } from '../../utils/variable-util';
+import { VariableDefinition } from '../../communication/variable/variable-definition';
+import { VariableStore } from '../../config';
+
+export class BitIndicatorLightOperator implements IndicatorLightOperator {
+
+    private binary: Binary;
+    currentStateId?: number;
+    currentStateIdChanged: EventEmitter<CurrentStateIdValue> = new EventEmitter<CurrentStateIdValue>();
+
+    private offStateId?: number;
+    private onStateId?: number;
+
+    get variableName(): string {
+        const variableName = new VariableDefinition(this.settings.variableName, this.settings.variableGroupName,
+            this.settings.dataSourceCode, this.settings.variableVersion);
+        return VariableUtil.getConvertedVariableName(this.variableStore, variableName);
+    }
+
+    constructor(private readonly settings: BitIndicatorLightSettings,
+        states: SwitchIndicatorState[],
+        private readonly variableCommunicator: VariableCommunicator,
+        private readonly variableStore: VariableStore) {
+        if (!this.settings) { throw new Error('settings cannot be null'); }
+        each(states, state => {
+            const condition = state.condition as BitCondition;
+            if (!condition) { throw new Error('Invalid bit condition.'); }
+            switch (+condition.logic) {
+                case BitConditonLogic.Off:
+                    if (this.offStateId) { throw new Error('Dumplicate off state.'); }
+                    this.offStateId = state.id;
+                    break;
+                case BitConditonLogic.On:
+                    if (this.onStateId) { throw new Error('Dumplicate on state.'); }
+                    this.onStateId = state.id;
+                    break;
+                default:
+                    throw new Error(`Unknown BitConditonLogic:${condition.logic}`);
+            }
+        });
+
+    }
+
+    requestData(appId: string) {
+        if (this.variableName) {
+            this.variableCommunicator.subscribeVariableState(this.variableName).subscribe(variableStete => {
+                if (variableStete.state === VariableStateEnum.Normal) {
+                    this.requestCurrentSateIdValue(this.variableCommunicator, appId);
+                } else {
+                    this.currentStateIdChanged.emit(new CurrentStateIdValue(new VariableState(this.variableName, variableStete.state)));
+                }
+            });
+        }
+    }
+
+    private requestCurrentSateIdValue(variableCommunicator: VariableCommunicator, appId = '') {
+        variableCommunicator.openVariable(this.variableName, appId).subscribe(value => {
+            if (value.state === VariableStateEnum.DataNormal) {
+                if (this.settings.isBitwiseIndex) {
+                    const maxBitIndex = 31;
+                    this.binary = new Binary(value.value, maxBitIndex + 1);
+                    const newValue = new VariableValue(value.variableName, value.state, Number(this.binary.convertToBinary().substr(maxBitIndex - this.settings.bitIndex, 1)));
+                    this.currentStateId = !newValue.value ? this.offStateId : this.onStateId;
+                    this.currentStateIdChanged.emit(new CurrentStateIdValue(new VariableState(this.variableName, value.state), this.currentStateId));
+                } else {
+                    this.currentStateId = !value.value ? this.offStateId : this.onStateId;
+                    this.currentStateIdChanged.emit(new CurrentStateIdValue(new VariableState(this.variableName, value.state), this.currentStateId));
+                }
+            } else {
+                delete this.currentStateId;
+                this.currentStateIdChanged.emit(new CurrentStateIdValue(new VariableState(this.variableName, value.state)));
+            }
+        });
+    }
+}

package/src/elements/switch-indicator-light/bit-switch-operator.ts

@@ -0,0 +1,113 @@
+import { BitSwitchOperation, BitSwitchSettings } from '../../model';
+import { VariableCommunicator, VariableValue, VariableStateEnum } from '../../communication';
+import { SwitchOperator } from './switch-operator';
+import { VariableOptionModel } from '../../service';
+import { Binary } from '../../model/shared/binary';
+import { VariableUtil } from '../../utils/variable-util';
+import { VariableDefinition } from '../../communication/variable/variable-definition';
+import { VariableStore } from '../../config';
+
+export class BitSwitchOperator implements SwitchOperator {
+
+    private currentValue: VariableValue;
+    private canExecuteInternal: boolean;
+    private binary: Binary;
+
+    get variableName(): string {
+        const variable = new VariableDefinition(this.settings.variableName, this.settings.variableGroupName,
+            this.settings.dataSourceCode, this.settings.variableVersion);
+        return VariableUtil.getConvertedVariableName(this.variableStore, variable);
+    }
+
+    constructor(private readonly settings: BitSwitchSettings, private readonly variableCommunicator: VariableCommunicator,
+        private readonly variableStore: VariableStore,
+        private readonly signalRAppId: string) {
+        if (!this.settings) { throw new Error('settings cannot be null'); }
+        if (this.settings.isWriteOnly) {
+            this.canExecuteInternal = true;
+        } else {
+            variableCommunicator.openVariable(this.variableName, this.signalRAppId).subscribe(value => {
+                this.currentValue = value;
+                this.canExecuteInternal = this.currentValue && this.currentValue.state === VariableStateEnum.DataNormal;
+            });
+        }
+    }
+
+    canExecute(): boolean {
+        return this.canExecuteInternal;
+    }
+
+    execute(): Promise<VariableOptionModel> {
+        if (!this.canExecute()) { throw new Error('Can not execute.'); }
+        const settings = this.settings;
+        let newValue;
+        let maxBitIndex;
+        if (settings.isBitwiseIndex) {
+            maxBitIndex = 31;
+            this.binary = new Binary(this.currentValue.value, maxBitIndex + 1);
+        }
+        switch (+settings.operation) {
+            case BitSwitchOperation.On:
+                newValue = 1;
+                if (settings.isBitwiseIndex) {
+                    this.variableCommunicator.writeWordByBit(this.variableName, settings.bitIndex, newValue).subscribe();
+                } else {
+                    this.variableCommunicator.write(this.variableName, newValue).subscribe();
+                }
+                break;
+            case BitSwitchOperation.Off:
+                newValue = 0;
+                if (settings.isBitwiseIndex) {
+                    this.variableCommunicator.writeWordByBit(this.variableName, settings.bitIndex, newValue).subscribe();
+                } else {
+                    this.variableCommunicator.write(this.variableName, newValue).subscribe();
+                }
+                break;
+            case BitSwitchOperation.Inverse:
+                if (!this.settings.isWriteOnly) {
+                    newValue = this.currentValue.value === 0 ? 1 : 0;
+                    if (settings.isBitwiseIndex) {
+                        let wordByBitValue = Number(this.binary.convertToBinary().substr(maxBitIndex - this.settings.bitIndex, 1));
+                        wordByBitValue = wordByBitValue === 0 ? 1 : 0;
+                        this.variableCommunicator.writeWordByBit(this.variableName, settings.bitIndex, wordByBitValue).subscribe();
+                    } else {
+                        this.variableCommunicator.write(this.variableName, newValue).subscribe();
+                    }
+                }
+                break;
+            case BitSwitchOperation.Restoration:
+                break;
+            default:
+                throw new Error(`Unknown BitSwitchOperation:${settings.operation}`);
+        }
+
+        let originValue;
+        if (this.currentValue && this.currentValue.value !== undefined) {
+            originValue = this.currentValue.value;
+        }
+        return Promise.resolve({
+            variableName: this.variableName,
+            originValue: originValue,
+            newValue: newValue
+        });
+    }
+
+    writeValue(value): Promise<VariableOptionModel> {
+        if (this.settings.isBitwiseIndex) {
+            this.variableCommunicator.writeWordByBit(this.variableName, this.settings.bitIndex, value).subscribe();
+        } else {
+            this.variableCommunicator.write(this.variableName, value).subscribe();
+        }
+
+        let originValue;
+        if (this.currentValue && this.currentValue.value !== undefined) {
+            originValue = this.currentValue.value;
+        }
+
+        return Promise.resolve({
+            variableName: this.variableName,
+            originValue: originValue,
+            newValue: value
+        });
+    }
+}

package/src/elements/switch-indicator-light/current-stateId-value.ts

@@ -0,0 +1,8 @@
+import { VariableState } from '../../communication';
+
+export class CurrentStateIdValue {
+    constructor(public readonly state: VariableState, public readonly value?: any) {
+        this.state = state;
+        this.value = value;
+    }
+}

package/src/elements/switch-indicator-light/indicator-light-operator.ts

@@ -0,0 +1,9 @@
+import { EventEmitter } from '@angular/core';
+import { CurrentStateIdValue } from './current-stateId-value';
+
+export interface IndicatorLightOperator {
+    readonly variableName: string;
+    currentStateId?: number;
+    currentStateIdChanged: EventEmitter<CurrentStateIdValue>;
+    requestData: (appId: string) => void;
+}