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

package/src/elements/numerical-display/numerical-display-element.ts

@@ -0,0 +1,438 @@
+import { Injector } from '@angular/core';
+import { LoggerService, LOGGER_SERVICE_TOKEN } from '../../logger';
+import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
+
+import { GraphStore, VariableStore } from '../../config';
+import { Localization } from '../../localization';
+import { WriteValueModalArgs } from '../../modal/write-value/write-value-modal-args';
+import { Font, NumericalDisplay, State, DisplayDataType } from '../../model';
+import { PermissionChecker, OperationRecordService, ReleasedVariableService } from '../../service';
+import { AccessPermissionService, DataTypeService, FractionDigitService, NumericalOperationService } from '../../utils';
+import { VariableCommunicator } from '../../communication';
+import { ReadableElement } from '../base/readable-element';
+import { GraphStateElement } from '../shared/graph/graph-state-element';
+import { TextElementModal } from '../shared/text/text-element';
+import { AlertModalComponent } from '../../modal/alert/alert-modal.component';
+import { WriteValueModalComponent } from '../../modal/write-value/write-value-modal.component';
+import { ConfirmOperationModalComponent } from '../../modal/confirm-operation/confirm-operation-modal.component';
+import { VerifyPasswordModalComponent } from '../../modal/verify-password/verify-password-modal.component';
+import { SecurityChecker } from '../../security';
+import { isNil } from 'lodash';
+import { FCloudDataType } from '../../model/shared/data-type/fcloud-data-Type';
+
+enum variableRwTypeEnum {
+    read = 4,
+    witer = 2,
+    readWiter = 6
+}
+
+export class NumericalDisplayElement extends ReadableElement {
+
+    private readonly dataTypeService: DataTypeService;
+    private readonly fractionDigitService: FractionDigitService;
+    private readonly accessPermissionService: AccessPermissionService;
+    private readonly numericalOperationService: NumericalOperationService;
+
+    readonly model: NumericalDisplay;
+    private displayText = '';
+    private readonly logger: LoggerService;
+    private displayForeignObject: JQuery;
+    private enableDataParsed = false;
+    private writeValueMmodalRef: BsModalRef;
+    private recordValue: string;
+    private showValue: string;
+    private numericalOperation: boolean;
+    private restorationTimer: NodeJS.Timer;
+
+    get writeVariableName(): string {
+        return this.readVariableName;
+    }
+
+    constructor(element: HTMLElement,
+        injector: Injector,
+        private readonly modalService: BsModalService,
+        permissionChecker: PermissionChecker,
+        variableCommunicator: VariableCommunicator,
+        private readonly graphStore: GraphStore,
+        private readonly operationRecordService: OperationRecordService,
+        private readonly releasedVariableService: ReleasedVariableService,
+        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.dataTypeService = injector.get(DataTypeService);
+        this.fractionDigitService = injector.get(FractionDigitService);
+        this.accessPermissionService = injector.get(AccessPermissionService);
+        this.numericalOperationService = injector.get(NumericalOperationService);
+        if (!isNil(this.model.displayDataType)) {
+            if (this.model.displayDataType === DisplayDataType.Binary) {
+                this.model.dataType = FCloudDataType.Binary;
+            }
+            if (this.model.displayDataType === DisplayDataType.Hex) {
+                this.model.dataType = FCloudDataType.Hex;
+            }
+        }
+        // version小于6时是老版本，默认支持数据解析
+        if (this.model.version < 6 || this.model.enableDataParsed) {
+            this.enableDataParsed = true;
+        }
+        this.initElement();
+    }
+
+    dispose() {
+        if (this.displayForeignObject) {
+            this.displayForeignObject.remove();
+        }
+        if (this.$element) {
+            this.$element.remove();
+        }
+    }
+
+    initElement(): any {
+        const { rootElement } = this;
+        rootElement.selectAll('*').remove();
+        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);
+        this.initGraphAndText(width, height);
+        if (!this.accessPermissionService.canWrite(this.model.accessPermission) || null == this.model.dataType) { return; }
+        this.rootElement.style('cursor', 'hand');
+        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.doWriteValue();
+                }
+            });
+        } else {
+            this.doWriteValue();
+        }
+    }
+
+    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 initGraphAndText(width: number, height: number) {
+        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 === true) {
+            const graphStateElement = new GraphStateElement(this.model.graphSetting, width, height, this.graphStore, this.logger);
+            graphStateElement.Element.setAttribute('transform', translateX);
+            this.$element.append(graphStateElement.Element);
+            graphStateElement.switchToState(0);
+        }
+        let isUnderline = false;
+        let isBold = false;
+        let isItalic = false;
+        let fontFamily = 'Microsoft YaHei';
+        if (this.model.font) {
+            const fontStyle = this.model.font.split(' ');
+            isUnderline = this.model.isUnderline;
+            isBold = $.inArray('bold', fontStyle) >= 0;
+            isItalic = $.inArray('Italic', fontStyle) >= 0;
+            fontFamily = this.model.font.split(' ').pop();
+        }
+        const font: Font = {
+            isUnderline: isUnderline,
+            isBold: isBold,
+            isItalic: isItalic,
+            fontSize: this.model.fontSize,
+            fontFamily: fontFamily,
+            color: this.model.stroke,
+            textAlign: this.model.textAlign
+        };
+        const textElement = new TextElementModal('', font, width, height);
+        textElement.Element.setAttribute('transform', translateX);
+        this.$element.append(textElement.Element);
+    }
+
+    private doWriteValue() {
+        if (null == this.writeVariableName) { return; }
+
+        const args =
+            new WriteValueModalArgs(this.writeVariableName, this.model.dataType, this.model.fBoxDataType, this.model.integerDigits, this.model.fractionDigits,
+                this.numericalOperationService.getNumericalOperations(this.model), this.model.version, this.enableDataParsed, this.releasedVariableService);
+        this.writeValueMmodalRef = this.modalService.show(WriteValueModalComponent,
+            {
+                initialState: { args: args }, backdrop: 'static', class: 'gui-modal-dialog-position', animated: false
+            });
+
+        this.writeValueMmodalRef.content.onClosed = (result) => {
+            if (result) {
+                if (this.restorationTimer) {
+                    clearTimeout(this.restorationTimer);
+                    this.restorationTimer = undefined;
+                }
+                this.recordValue = result.value;
+                const writeValue = this.dataTypeService.formatToDecimal(this.model.version, result.value, this.model.dataType);
+                this.showValue = result.showValue;
+                if (this.displayText !== this.showValue || result.variableRwType === variableRwTypeEnum.witer) {
+                    if (this.numericalOperation || result.enableNumericalOperation || result.isNumericalOperation || result.variableRwType === variableRwTypeEnum.witer) {
+                        this.recordOperation(result.value);
+                        this.writeValueMmodalRef.hide();
+                    } else {
+                        this.restorationTimer = setTimeout(() => {
+                            const isEquation = this.model.fractionDigits ?
+                                parseFloat(this.displayText) === parseFloat(this.showValue) :
+                                parseInt(this.displayText, 16) === parseInt(this.showValue, 16);
+                            if (!isEquation) {
+                                this.writeValueMmodalRef.content.isSubmitting = false;
+                                this.writeValueMmodalRef.content.showValidationErrorInfo(this.localization.writeValueTimeout);
+                            }
+                        }, 10000);
+                    }
+                    this.variableCommunicator.write(this.writeVariableName, writeValue).subscribe();
+                } else {
+                    this.writeValueMmodalRef.hide();
+                }
+            }
+        };
+    }
+
+    private recordOperation(newValue: string) {
+        if (this.model.isRecordOperation || this.model.isRecordOperation === undefined) {
+            this.operationRecordService.record({
+                variableOptionModel: {
+                    variableName: this.writeVariableName,
+                    originValue: this.formatDisplayTextUnit(this.displayText),
+                    newValue: this.formatDisplayTextUnit(this.formatNumericalDisplayText(this.model.dataType, this.model.fractionDigits, newValue))
+                },
+                operationDescription: this.model.operationDescription
+            });
+        }
+    }
+
+    changeStates() {
+        super.changeStates();
+        if (this.state === State.Normal || this.state === State.Disable) {
+            this.updateDisplayText(this.formatDisplayTextUnit(this.displayText));
+        } else {
+            if (this.preState !== this.state) {
+                this.updateDisplayText('');
+            }
+        }
+    }
+
+    protected updateVariableValue(value: number) {
+        const displayText = this.formatNumericalDisplayText(this.model.dataType, this.model.fractionDigits, value);
+        const isEquation = this.model.fractionDigits ?
+            parseFloat(displayText) === parseFloat(this.showValue) :
+            parseInt(displayText, 16) === parseInt(this.showValue, 16);
+        if (this.writeValueMmodalRef?.content && isEquation) {
+            if (this.restorationTimer) {
+                clearTimeout(this.restorationTimer);
+                this.restorationTimer = undefined;
+                this.recordOperation(this.recordValue);
+            }
+            this.writeValueMmodalRef.hide();
+            this.writeValueMmodalRef.content.hideValidationErrorInfo();
+        }
+        this.displayText = displayText;
+        this.updateDisplayText(this.formatDisplayTextUnit(this.displayText));
+    }
+
+    private updateDisplayText(text: string) {
+        if (!this.displayForeignObject) {
+            if (this.model.showVariableText) {
+                this.displayForeignObject = this.$element.find('foreignObject').eq(1);
+            } else {
+                this.displayForeignObject = this.$element.find('foreignObject').eq(0);
+            }
+        }
+
+        if (isNil(text)) {
+            this.displayForeignObject.remove();
+        } else {
+            const textList = this.displayForeignObject.find('.text-list');
+            const textArray = text.toString().split('\n');
+            if (textList.length === textArray.length) {
+                for (let index = 0; index < textList.length; index++) {
+                    textList[index].innerText = textArray[index];
+                }
+            } else {
+                this.displayForeignObject.remove();
+                const width = this.displayForeignObject.attr('width');
+                const height = this.displayForeignObject.attr('height');
+                const transform = this.displayForeignObject.attr('transform');
+                this.displayForeignObject = $(this.rebuildTextElement(width, height, transform, text));
+            }
+        }
+    }
+
+    private rebuildTextElement(width: string, height: string, transform: string, text: string) {
+        let isUnderline = false;
+        let isBold = false;
+        let isItalic = false;
+        let fontFamily = 'Microsoft YaHei';
+        if (this.model.font) {
+            const fontStyle = this.model.font.split(' ');
+            isUnderline = this.model.isUnderline;
+            isBold = $.inArray('bold', fontStyle) >= 0;
+            isItalic = $.inArray('Italic', fontStyle) >= 0;
+            fontFamily = this.model.font.split(' ').pop();
+        }
+        const font: Font = {
+            isUnderline: isUnderline,
+            isBold: isBold,
+            isItalic: isItalic,
+            fontSize: this.model.fontSize,
+            fontFamily: fontFamily,
+            color: this.model.stroke,
+            textAlign: this.model.textAlign
+        };
+        const textElement = new TextElementModal(text, font, Number(width), Number(height));
+        textElement.Element.setAttribute('transform', transform);
+        this.$element.append(textElement.Element);
+        return textElement.Element;
+    }
+
+    private formatNumericalDisplayText(dataType: number, fractionDigits: number, value: any) {
+        if (null == value || value.toString().trim().length <= 0) { return ''; }
+        value = +value;
+        // 16进制数
+        if (this.dataTypeService.isHexType(this.model.version, dataType)) {
+            // eslint-disable-next-line no-bitwise
+            return (value >>> 0).toString(16).toUpperCase();
+
+        }
+        // 2进制
+        if (this.dataTypeService.isBinaryType(this.model.version, dataType)) {
+
+            // eslint-disable-next-line no-bitwise
+            const formatValue = (value >>> 0).toString(2);
+            if (formatValue.length < 17) {
+                return formatValue;
+            }
+            const constOne = '1111111111111111';
+            if (formatValue.indexOf(constOne) === 0) {
+                return formatValue.replace(constOne, '');
+            }
+            const constZero = '0000000000000000';
+            if (formatValue.indexOf(constZero) === 0) {
+                return formatValue.replace(constZero, '');
+            }
+
+            return formatValue;
+        }
+        if (!this.isNumeric(value) || null == fractionDigits || fractionDigits < 0) {
+            return value;
+        }
+        // 数据解析
+        if (!this.enableDataParsed) { return value; }
+
+        const supportFractionDigits = this.dataTypeService.isSupportFractionDigit(this.model.version, dataType);
+        if (!supportFractionDigits) { return value; }
+        // 数值运算
+        if (this.dataTypeService.isSupportNumericalOperation(this.model.version, dataType)) {
+            if (this.model.enableNumericalOperation && this.isNumeric(value)) {
+                return this.numericalOperationService.getNumericalOperationedValue(this.model, value, fractionDigits);
+            }
+        }
+        // 浮点数
+        if (this.dataTypeService.isFloat(this.model.version, dataType)) {
+            return this.formatFloatDisplayText(fractionDigits, value);
+        }
+        // 有符号数及无符号数
+        if (fractionDigits === 0) {
+            return value;
+        }
+        let displayText = Number(value).toFixed(0).toString();
+        const isNegative = +displayText < 0;
+        if (isNegative) { displayText = displayText.slice(1, displayText.length); }
+        if (displayText.length > fractionDigits) {
+            const dotPosition = displayText.length - fractionDigits;
+            displayText = displayText.substr(0, dotPosition) + '.' + displayText.substr(dotPosition);
+        } else {
+            const fillZeroCount = fractionDigits - displayText.length;
+            for (let i = 0; i < fillZeroCount; i++) {
+                displayText = `0${displayText}`;
+            }
+            displayText = `0.${displayText}`;
+        }
+        return isNegative ? `-${displayText}` : displayText;
+    }
+
+    private formatFloatDisplayText(fractionDigits: number, text: any) {
+        let value = Number(text);
+        if (!isNil(fractionDigits)) {
+            value = +value.toFixed(fractionDigits + 2);
+        } else {
+            return value.toFixed(0);
+        }
+
+        return this.fractionDigitService.roundingToFixedFractionDigits(value, fractionDigits);
+    }
+
+    private isNumeric(num: any) {
+        return !isNaN(num);
+    }
+
+    private formatDisplayTextUnit(displayText: string) {
+        if (this.model.showUnit !== false && this.model.unit) {
+            return `${displayText || 0} ${this.model.unit}`;
+        }
+        return displayText;
+    }
+}

package/src/elements/per-view-variable-communicator.ts

@@ -0,0 +1,77 @@
+import { each, forEach } from 'lodash';
+import { Observable, Subscriber, Subscription } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { VariableCommunicator, VariableValue } from '../communication';
+import { VariableState } from '../communication/variable/variable-state';
+
+export class PerViewVariableCommunicator implements VariableCommunicator {
+
+    private _rawVariableCommunicator: VariableCommunicator;
+
+    private observers = new Map<string, Subscriber<VariableValue[]>[]>();
+    private variableValuesChangedSubscriptions: Array<Subscription> = new Array<Subscription>();
+    private variableStatesChangedSubscription: Array<Subscription> = new Array<Subscription>();
+    private alarmSubscription: Array<Subscription> = new Array<Subscription>();
+
+    constructor(variableCommunicator: VariableCommunicator) {
+        this._rawVariableCommunicator = variableCommunicator;
+    }
+
+    openVariable(variableName: string,  appId: string): Observable<VariableValue> {
+        return this.openVariables([variableName], appId).pipe(map(values => values[0]));
+    }
+
+    openVariables(variableNames: Array<string>, appId = ''): Observable<Array<VariableValue>> {
+        return new Observable<VariableValue[]>(subscriber => {
+            each(variableNames, variableName => {
+                if (!this.observers.has(variableName)) {
+                    this.observers.set(variableName, []);
+                }
+                this.observers.get(variableName).push(subscriber);
+            });
+            const subscription = this._rawVariableCommunicator.openVariables(variableNames, appId).subscribe(
+                values => subscriber.next(values),
+                error => subscriber.error(error),
+                () => subscriber.complete());
+            this.variableValuesChangedSubscriptions.push(subscription);
+        });
+    }
+
+    write(variableName: string, value: any): Observable<VariableValue> {
+        return this._rawVariableCommunicator.write(variableName, value);
+    }
+
+    writeWordByBit(variableName: string, index: number, value: number): Observable<VariableValue> {
+        return this._rawVariableCommunicator.writeWordByBit(variableName, index, value);
+    }
+
+    subscribeVariableState(variableName: string): Observable<VariableState> {
+        return this.subscribeVariableStates([variableName]).pipe(map(values => values[0]));
+    }
+
+    subscribeVariableStates(variableNames: string[]): Observable<Array<VariableState>> {
+        return new Observable<VariableState[]>(subscriber => {
+            const subscription = this._rawVariableCommunicator.subscribeVariableStates(variableNames).subscribe(
+                values => subscriber.next(values),
+                error => subscriber.error(error),
+                () => subscriber.complete());
+            this.variableStatesChangedSubscription.push(subscription);
+        });
+    }
+
+    subscribeUserDeviceAlarms(appId = '') {
+        return new Observable<VariableState[]>(subscriber => {
+            const subscription = this._rawVariableCommunicator.subscribeUserDeviceAlarms(appId).subscribe(
+                values => subscriber.next(values),
+                error => subscriber.error(error),
+                () => subscriber.complete());
+            this.alarmSubscription.push(subscription);
+        });
+    }
+
+    dispose() {
+        forEach(this.variableValuesChangedSubscriptions, s => s.unsubscribe());
+        forEach(this.variableStatesChangedSubscription, s => s.unsubscribe());
+        forEach(this.alarmSubscription, s => s.unsubscribe());
+    }
+}

package/src/elements/pipe/pipe-element.ts

@@ -0,0 +1,166 @@
+import { Localization } from '../../localization';
+import { FlowDirectionType, Pipe, ConditionControlResultValue } from '../../model';
+import { PermissionChecker } from '../../service';
+import { VariableCommunicator } from '../../communication';
+import { ConditionalControlElement } from '../base/conditional-control-element';
+import { VariableStore } from '../../config';
+
+export class PipeElement extends ConditionalControlElement {
+
+    readonly model: Pipe;
+
+    private readonly elePipeInnerwall: JQuery;
+    private readonly elePipeFlowBlock: JQuery;
+    private pathLength: number;
+
+    constructor(element: HTMLElement, permissionChecker: PermissionChecker,
+        variableCommunicator: VariableCommunicator, variableStore: VariableStore,
+        localization: Localization, signalRAppId: string) {
+        super(element, permissionChecker, variableCommunicator, variableStore, localization, signalRAppId);
+        this.initDefaultData(this.model);
+
+        const children = this.$element.children();
+        if (!children || !children.length) { return; }
+
+        // Pipe use PipeWall
+        if (this.model.isPipeWall) {
+            const elePipeOuterwall = children.eq(0);
+            if (elePipeOuterwall) {
+                elePipeOuterwall.attr('stroke', this.model.pipeWallColor);
+                elePipeOuterwall.attr('stroke-width', this.model.pipeDiameter);
+            }
+        }
+
+        this.elePipeInnerwall = children.eq(this.model.isPipeWall ? 1 : 0);
+        this.elePipeInnerwall.attr('stroke', this.model.backGroundColor);
+        if (this.model.pipeDiameter - 2 * this.model.pipeWallSize <= 0) {
+            this.elePipeInnerwall.attr('stroke-width', 1);
+        } else {
+            this.elePipeInnerwall.attr('stroke-width', this.model.pipeDiameter - 2 * this.model.pipeWallSize);
+        }
+        this.elePipeInnerwall.attr('stroke-opacity', 1);
+
+        // Pipe use FlowBlock
+        if (this.model.isFlowBlock) {
+            const strBlock = this.model.blockLength + ',' + this.model.blockMargin;
+            this.elePipeFlowBlock = children.eq(this.model.isPipeWall ? 2 : 1);
+            this.elePipeFlowBlock.attr('d', children.first().attr('d'));
+            this.elePipeFlowBlock.attr('stroke', this.model.blockColor);
+            this.elePipeFlowBlock.attr('stroke-width', this.model.blockWidth);
+            this.elePipeFlowBlock.attr('stroke-dasharray', strBlock);
+            this.elePipeFlowBlock.attr('stroke-opacity', 1);
+            this.elePipeFlowBlock.css('display', 'block');
+        }
+
+        this.pathLength = this.model.blockLength + this.model.blockMargin;
+
+        // is not use vaiable to control, then flow in default
+        if (this.model.isFlowBlock && !this.model.isFlow) { this.elePipeFlowBlock.append(this.getAnimate()); }
+
+        setTimeout(() => {
+            this.initFrameNode();
+        }, 0);
+    }
+
+    initDefaultData(model: any): void {
+        // 向前兼容
+        if (model.isPipeWall === undefined) {
+            model.isPipeWall = true;
+        }
+
+        if (model.isFlowBlock === undefined) {
+            model.isFlowBlock = true;
+        }
+
+        if (model.pipeWallColor === undefined) {
+            this.model.pipeWallColor = '#333';
+        }
+
+        if (model.pipeDiameter === undefined) {
+            model.pipeDiameter = 14;
+        }
+
+        if (model.backGroundColor === undefined) {
+            model.backGroundColor = '#ffffff';
+        }
+
+        if (model.pipeWallSize === undefined) {
+            model.pipeWallSize = 1;
+        }
+
+        if (model.blockLength === undefined) {
+            model.blockLength = 12;
+        }
+
+        if (model.blockMargin === undefined) {
+            model.blockMargin = 6;
+        }
+
+        if (model.blockColor === undefined) {
+            model.blockColor = '#0081ff';
+        }
+
+        if (model.blockWidth === undefined) {
+            model.blockWidth = 6;
+        }
+    }
+
+    protected updateElement(result: ConditionControlResultValue): void {
+        this.updateElementStates(result.states);
+        if (!this.model.isFlow) { return; }
+        this.startOrStopPipeFlow(result.value);
+    }
+
+    private initFrameNode() {
+        const arcPath = Snap(this.$element.find('path:last')[0]);
+        const b = arcPath.getBBox(true);
+        let height = this.model.pipeDiameter;
+        let width = b.width + 1;
+        height = height < b.height ? b.height : height;
+        height = height < 20 ? 20 : height;
+        let x = height / 2;
+        if (b.height > 0) {
+            x = 6;
+            height += 15;
+            width += 2;
+        } else {
+            x -= 1;
+            if (height === 20) {
+                x -= 3;
+            }
+        }
+
+        this.rootElement.append('rect').attr('id', 'StateFrame')
+            .attr('width', width).attr('height', height).attr('x', x).attr('fill', 'none');
+    }
+
+    private startOrStopPipeFlow(isStart: boolean) {
+        if (!this.elePipeFlowBlock) { return; }
+        this.elePipeFlowBlock.children().remove();
+        if (isStart) { this.elePipeFlowBlock.append(this.getAnimate()); }
+    }
+
+    private getAnimate(): SVGElement {
+        switch (this.model.flowDirection) {
+            case FlowDirectionType.Positive:
+                return this.getAnimateElement(this.pathLength, 0);
+            case FlowDirectionType.Negative:
+                return this.getAnimateElement(0, this.pathLength);
+            default:
+                throw new Error('Unknown flowDirection:' + this.model.flowDirection);
+        }
+    }
+
+    private getAnimateElement(from: number, to: number): SVGElement {
+        const document = this.$element[0].ownerDocument;
+        const animate = document.createElementNS('http://www.w3.org/2000/svg', 'animate');
+        animate.setAttribute('attributeType', 'XML');
+        animate.setAttribute('attributeName', 'stroke-dashoffset');
+        animate.setAttribute('from', from.toString());
+        animate.setAttribute('to', to.toString());
+        animate.setAttribute('by', '3');
+        animate.setAttribute('dur', '1s');
+        animate.setAttribute('repeatCount', 'indefinite');
+        return animate;
+    }
+}