@flexem/fc-gui 3.0.0-alpha.16 → 3.0.0-alpha.160

package/elements/numerical-display/numerical-display-element.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"NumericalDisplayElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../base/readable-element","name":"ReadableElement","line":22,"character":45},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":39,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":40,"character":18},{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalService","line":41,"character":39},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":42,"character":27},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":43,"character":30},{"__symbolic":"reference","module":"../../config","name":"GraphStore","line":44,"character":37},{"__symbolic":"reference","module":"../../service","name":"OperationRecordService","line":45,"character":49},{"__symbolic":"reference","module":"../../security","name":"SecurityChecker","line":46,"character":42},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":47,"character":23},{"__symbolic":"reference","module":"../../localization","name":"Localization","line":48,"character":22},{"__symbolic":"reference","name":"string"}]}],"dispose":[{"__symbolic":"method"}],"initElement":[{"__symbolic":"method"}],"checkElementPassword":[{"__symbolic":"method"}],"initVariableText":[{"__symbolic":"method"}],"initGraphAndText":[{"__symbolic":"method"}],"doWriteValue":[{"__symbolic":"method"}],"recordOperation":[{"__symbolic":"method"}],"changeStates":[{"__symbolic":"method"}],"updateVariableValue":[{"__symbolic":"method"}],"updateDisplayText":[{"__symbolic":"method"}],"rebuildTextElement":[{"__symbolic":"method"}],"formatNumericalDisplayText":[{"__symbolic":"method"}],"formatFloatDisplayText":[{"__symbolic":"method"}],"isNumeric":[{"__symbolic":"method"}],"formatDisplayTextUnit":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"NumericalDisplayElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../base/readable-element","name":"ReadableElement","line":29,"character":45},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":73,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":74,"character":18},{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalService","line":75,"character":39},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":76,"character":27},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":77,"character":30},{"__symbolic":"reference","module":"../../config","name":"GraphStore","line":78,"character":37},{"__symbolic":"reference","module":"../../service","name":"OperationRecordService","line":79,"character":49},{"__symbolic":"reference","module":"../../service","name":"ReleasedVariableService","line":80,"character":50},{"__symbolic":"reference","module":"../../security","name":"SecurityChecker","line":81,"character":42},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":82,"character":23},{"__symbolic":"reference","module":"../../localization","name":"Localization","line":83,"character":22},{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","module":"../../gui/gui-context","name":"GuiContext","line":85,"character":38}]}],"dispose":[{"__symbolic":"method"}],"reportValueChanged":[{"__symbolic":"method"}],"initElement":[{"__symbolic":"method"}],"checkElementPassword":[{"__symbolic":"method"}],"initVariableText":[{"__symbolic":"method"}],"initGraphAndText":[{"__symbolic":"method"}],"doWriteValue":[{"__symbolic":"method"}],"recordOperation":[{"__symbolic":"method"}],"changeStates":[{"__symbolic":"method"}],"updateVariableValue":[{"__symbolic":"method"}],"updateDisplayText":[{"__symbolic":"method"}],"rebuildTextElement":[{"__symbolic":"method"}],"formatNumericalDisplayText":[{"__symbolic":"method"}],"formatFloatDisplayText":[{"__symbolic":"method"}],"isNumeric":[{"__symbolic":"method"}],"formatDisplayTextUnit":[{"__symbolic":"method"}]}}}}]

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

@@ -1,17 +1,20 @@
-import { Observable } from 'rxjs';
-import { VariableCommunicator, VariableValue } from '../communication';
-import { VariableState } from '../communication/variable/variable-state';
-export declare class PerViewVariableCommunicator implements VariableCommunicator {
-    private _rawVariableCommunicator;
-    private observers;
-    private variableValuesChangedSubscriptions;
-    private variableStatesChangedSubscription;
-    constructor(variableCommunicator: VariableCommunicator);
-    openVariable(variableName: string, appId: string): Observable<VariableValue>;
-    openVariables(variableNames: Array<string>, appId?: string): Observable<Array<VariableValue>>;
-    write(variableName: string, value: any): Observable<VariableValue>;
-    writeWordByBit(variableName: string, index: number, value: number): Observable<VariableValue>;
-    subscribeVariableState(variableName: string): Observable<VariableState>;
-    subscribeVariableStates(variableNames: string[]): Observable<Array<VariableState>>;
-    dispose(): void;
-}
+import { Observable } from 'rxjs';
+import { VariableCommunicator, VariableValue } from '../communication';
+import { VariableState } from '../communication/variable/variable-state';
+export declare class PerViewVariableCommunicator implements VariableCommunicator {
+    private _rawVariableCommunicator;
+    private observers;
+    private variableValuesChangedSubscriptions;
+    private variableStatesChangedSubscription;
+    private alarmSubscription;
+    constructor(variableCommunicator: VariableCommunicator);
+    openVariable(variableName: string, appId: string): Observable<VariableValue>;
+    openVariables(variableNames: Array<string>, appId?: string): Observable<Array<VariableValue>>;
+    write(variableName: string, value: any): Observable<VariableValue>;
+    writeWordByBit(variableName: string, index: number, value: number): Observable<VariableValue>;
+    requestVirtualDeviceState(): Observable<void>;
+    subscribeVariableState(variableName: string): Observable<VariableState>;
+    subscribeVariableStates(variableNames: string[]): Observable<Array<VariableState>>;
+    subscribeUserDeviceAlarms(appId?: string): Observable<any[]>;
+    dispose(): void;
+}

package/elements/per-view-variable-communicator.js

@@ -1,45 +1,59 @@
-import { each, forEach } from 'lodash';
-import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
-export class PerViewVariableCommunicator {
-    constructor(variableCommunicator) {
-        this.observers = new Map();
-        this.variableValuesChangedSubscriptions = new Array();
-        this.variableStatesChangedSubscription = new Array();
-        this._rawVariableCommunicator = variableCommunicator;
-    }
-    openVariable(variableName, appId) {
-        return this.openVariables([variableName], appId).pipe(map(values => values[0]));
-    }
-    openVariables(variableNames, appId = '') {
-        return new Observable(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, value) {
-        return this._rawVariableCommunicator.write(variableName, value);
-    }
-    writeWordByBit(variableName, index, value) {
-        return this._rawVariableCommunicator.writeWordByBit(variableName, index, value);
-    }
-    subscribeVariableState(variableName) {
-        return this.subscribeVariableStates([variableName]).pipe(map(values => values[0]));
-    }
-    subscribeVariableStates(variableNames) {
-        return new Observable(subscriber => {
-            const subscription = this._rawVariableCommunicator.subscribeVariableStates(variableNames).subscribe(values => subscriber.next(values), error => subscriber.error(error), () => subscriber.complete());
-            this.variableStatesChangedSubscription.push(subscription);
-        });
-    }
-    dispose() {
-        forEach(this.variableValuesChangedSubscriptions, s => s.unsubscribe());
-        forEach(this.variableStatesChangedSubscription, s => s.unsubscribe());
-    }
-}
+import { each, forEach } from 'lodash';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+export class PerViewVariableCommunicator {
+    constructor(variableCommunicator) {
+        this.observers = new Map();
+        this.variableValuesChangedSubscriptions = new Array();
+        this.variableStatesChangedSubscription = new Array();
+        this.alarmSubscription = new Array();
+        this._rawVariableCommunicator = variableCommunicator;
+    }
+    openVariable(variableName, appId) {
+        return this.openVariables([variableName], appId).pipe(map(values => values[0]));
+    }
+    openVariables(variableNames, appId = '') {
+        return new Observable(subscriber => {
+            each(variableNames, variableName => {
+                if (!this.observers.has(variableName)) {
+                    this.observers.set(variableName, []);
+                }
+                const obs = this.observers.get(variableName);
+                if (obs) {
+                    obs.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, value) {
+        return this._rawVariableCommunicator.write(variableName, value);
+    }
+    writeWordByBit(variableName, index, value) {
+        return this._rawVariableCommunicator.writeWordByBit(variableName, index, value);
+    }
+    requestVirtualDeviceState() {
+        return this._rawVariableCommunicator.requestVirtualDeviceState();
+    }
+    subscribeVariableState(variableName) {
+        return this.subscribeVariableStates([variableName]).pipe(map(values => values[0]));
+    }
+    subscribeVariableStates(variableNames) {
+        return new Observable(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(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/elements/per-view-variable-communicator.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"PerViewVariableCommunicator":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../communication","name":"VariableCommunicator","line":14,"character":38}]}],"openVariable":[{"__symbolic":"method"}],"openVariables":[{"__symbolic":"method"}],"write":[{"__symbolic":"method"}],"writeWordByBit":[{"__symbolic":"method"}],"subscribeVariableState":[{"__symbolic":"method"}],"subscribeVariableStates":[{"__symbolic":"method"}],"dispose":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"PerViewVariableCommunicator":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../communication","name":"VariableCommunicator","line":15,"character":38}]}],"openVariable":[{"__symbolic":"method"}],"openVariables":[{"__symbolic":"method"}],"write":[{"__symbolic":"method"}],"writeWordByBit":[{"__symbolic":"method"}],"requestVirtualDeviceState":[{"__symbolic":"method"}],"subscribeVariableState":[{"__symbolic":"method"}],"subscribeVariableStates":[{"__symbolic":"method"}],"subscribeUserDeviceAlarms":[{"__symbolic":"method"}],"dispose":[{"__symbolic":"method"}]}}}}]

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

@@ -1,19 +1,19 @@
-import { Localization } from '../../localization';
-import { Pipe, ConditionControlResultValue } from '../../model';
-import { PermissionChecker } from '../../service';
-import { VariableCommunicator } from '../../communication';
-import { ConditionalControlElement } from '../base/conditional-control-element';
-import { VariableStore } from '../../config';
-export declare class PipeElement extends ConditionalControlElement {
-    readonly model: Pipe;
-    private readonly elePipeInnerwall;
-    private readonly elePipeFlowBlock;
-    private pathLength;
-    constructor(element: HTMLElement, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore, localization: Localization, signalRAppId: string);
-    initDefaultData(model: any): void;
-    protected updateElement(result: ConditionControlResultValue): void;
-    private initFrameNode;
-    private startOrStopPipeFlow;
-    private getAnimate;
-    private getAnimateElement;
-}
+import { Localization } from '../../localization';
+import { Pipe, ConditionControlResultValue } from '../../model';
+import { PermissionChecker } from '../../service';
+import { VariableCommunicator } from '../../communication';
+import { ConditionalControlElement } from '../base/conditional-control-element';
+import { VariableStore } from '../../config';
+export declare class PipeElement extends ConditionalControlElement {
+    readonly model: Pipe;
+    private readonly elePipeInnerwall;
+    private readonly elePipeFlowBlock;
+    private pathLength;
+    constructor(element: HTMLElement, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore, localization: Localization, signalRAppId: string);
+    initDefaultData(model: any): void;
+    protected updateElement(result: ConditionControlResultValue): void;
+    private initFrameNode;
+    private startOrStopPipeFlow;
+    private getAnimate;
+    private getAnimateElement;
+}

package/elements/pipe/pipe-element.js

@@ -1,141 +1,141 @@
-import { FlowDirectionType } from '../../model';
-import { ConditionalControlElement } from '../base/conditional-control-element';
-export class PipeElement extends ConditionalControlElement {
-    constructor(element, permissionChecker, variableCommunicator, variableStore, localization, signalRAppId) {
-        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) {
-        // 向前兼容
-        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;
-        }
-    }
-    updateElement(result) {
-        this.updateElementStates(result.states);
-        if (!this.model.isFlow) {
-            return;
-        }
-        this.startOrStopPipeFlow(result.value);
-    }
-    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');
-    }
-    startOrStopPipeFlow(isStart) {
-        if (!this.elePipeFlowBlock) {
-            return;
-        }
-        this.elePipeFlowBlock.children().remove();
-        if (isStart) {
-            this.elePipeFlowBlock.append(this.getAnimate());
-        }
-    }
-    getAnimate() {
-        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);
-        }
-    }
-    getAnimateElement(from, to) {
-        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;
-    }
-}
+import { FlowDirectionType } from '../../model';
+import { ConditionalControlElement } from '../base/conditional-control-element';
+export class PipeElement extends ConditionalControlElement {
+    constructor(element, permissionChecker, variableCommunicator, variableStore, localization, signalRAppId) {
+        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) {
+        // 向前兼容
+        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;
+        }
+    }
+    updateElement(result) {
+        this.updateElementStates(result.states);
+        if (!this.model.isFlow) {
+            return;
+        }
+        this.startOrStopPipeFlow(result.value);
+    }
+    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');
+    }
+    startOrStopPipeFlow(isStart) {
+        if (!this.elePipeFlowBlock) {
+            return;
+        }
+        this.elePipeFlowBlock.children().remove();
+        if (isStart) {
+            this.elePipeFlowBlock.append(this.getAnimate());
+        }
+    }
+    getAnimate() {
+        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);
+        }
+    }
+    getAnimateElement(from, to) {
+        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;
+    }
+}

package/elements/ring-graph/ring-graph-element.d.ts

@@ -1,19 +1,31 @@
-import { RingGraphModel } from '../../model/ring-graph/ring-graph.model';
-import { VariableCommunicator } from '../../communication/variable/variable-communicator';
-import { Localization } from '../../localization/localization.service';
-import { ReadableElement } from '../base/readable-element';
-import { VariableStore } from '../../config';
-import { PermissionChecker } from '../../service';
-export declare class RingGraphElement extends ReadableElement {
-    protected readonly model: RingGraphModel;
-    private _barElement$;
-    private _textElement$;
-    get readVariableName(): string;
-    constructor(element: HTMLElement, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore, localization: Localization, signalRAppId: string);
-    private initFrameNode;
-    protected updateVariableValue(value: number): void;
-    private updateBar;
-    private getBarColor;
-    private drawClockWiseArc;
-    private drawAntiClockWiseArc;
-}
+import { RingGraphModel } from '../../model/ring-graph/ring-graph.model';
+import { VariableCommunicator } from '../../communication/variable/variable-communicator';
+import { Localization } from '../../localization/localization.service';
+import { ReadableElement } from '../base/readable-element';
+import { VariableStore } from '../../config';
+import { PermissionChecker } from '../../service';
+export declare class RingGraphElement extends ReadableElement {
+    private static DEFAULT_MIN_VALUE;
+    private static DEFAULT_MAX_VALUE;
+    protected readonly model: RingGraphModel;
+    private _barElement$;
+    private _textElement$;
+    private valueObj;
+    private isNeedUpdateScale;
+    private initTransform;
+    private needAddNumber;
+    get readVariableName(): string;
+    get minVariableName(): string;
+    get maxVariableName(): string;
+    constructor(element: HTMLElement, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore, localization: Localization, signalRAppId: string);
+    private initTransformFun;
+    private initFrameNode;
+    init(variableName: string): void;
+    private updateValueObj;
+    private updateScale;
+    protected updateVariableValue(value: number, variableName: any): void;
+    private updateBar;
+    private getBarColor;
+    private drawClockWiseArc;
+    private drawAntiClockWiseArc;
+}