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

package/elements/bar-graph-element.js

@@ -1,114 +1,244 @@
-import { BarGraphDirection } from '../model';
-import { ReadableElement } from './base/readable-element';
-import { calculatePercent } from './shared/math-utils';
-import { VariableUtil } from '../utils/variable-util';
-export class BarGraphElement extends ReadableElement {
-    constructor(element, permissionChecker, variableCommunicator, variableStore, localization, signalRAppId) {
-        super(element, permissionChecker, variableCommunicator, variableStore, localization, signalRAppId);
-        this.defaultBarColor = '#6fd149';
-        this.defaultUpperLimitColor = '#ff4448';
-        this.defaultLowerLimitColor = '#0f60e8';
-        this.barText = '';
-        this.$barRect = this.$element.find('rect');
-        this.$barText = this.$element.find('text[id="text"]').last();
-        if (this.model.version && this.model.version >= 1) {
-            const backgroundColor = this.model.backgroundColor ? this.model.backgroundColor : 'transparent';
-            this.barElement = this.$element.children(`path[fill='${backgroundColor}']`);
-            this.defaultTransform = this.barElement.attr('transform');
-            this.$barRect.attr('transform', this.defaultTransform);
-        }
-        setTimeout(() => {
-            this.initFrameNode();
-        }, 0);
-    }
-    get readVariableName() {
-        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);
-        }
-    }
-    initFrameNode() {
-        const arcPath = Snap(this.$element[0]);
-        const b = arcPath.getBBox(true);
-        this.rootElement.append('rect').attr('id', 'StateFrame').attr('width', b.width).attr('height', b.height).attr('fill', 'transparent');
-    }
-    updateVariableValue(value) {
-        const variableValue = Number(value).valueOf();
-        const maxValue = Number(this.model.max).valueOf();
-        const minValue = Number(this.model.min).valueOf();
-        const useAlarmLimit = this.model.useAlarmLimit;
-        const useAlarmUpperLimit = null != this.model.upperLimit;
-        const useAlarmLowerLimit = null != this.model.lowerLimit;
-        let barColor = this.model.barColor;
-        const upperLimitColor = this.model.upperLimitColor;
-        const lowerLimitColor = this.model.lowerLimitColor;
-        const percentageFont = this.model.percentageFont;
-        let box;
-        if (this.model.version && this.model.version >= 1) {
-            box = this.barElement[0].getBBox();
-        }
-        else {
-            box = this.$barRect.parent()[0].getBBox();
-        }
-        const percent = calculatePercent(minValue, maxValue, variableValue);
-        let translateY = 0;
-        if (this.model.direction === BarGraphDirection.DownToUp || this.model.direction === BarGraphDirection.LeftToRight) {
-            translateY = box.height * (1 - percent);
-        }
-        if (!barColor) {
-            barColor = this.defaultBarColor;
-        }
-        if (useAlarmLimit) {
-            if (useAlarmUpperLimit && variableValue > +this.model.upperLimit) {
-                if (upperLimitColor) {
-                    barColor = upperLimitColor;
-                }
-                else {
-                    barColor = this.defaultUpperLimitColor;
-                }
-            }
-            else if (useAlarmLowerLimit && variableValue < +this.model.lowerLimit) {
-                if (lowerLimitColor) {
-                    barColor = lowerLimitColor;
-                }
-                else {
-                    barColor = this.defaultLowerLimitColor;
-                }
-            }
-        }
-        this.$barRect.attr('height', box.height * percent);
-        this.$barRect.attr('width', box.width);
-        this.$barRect.attr('fill', barColor);
-        if (this.model.version && this.model.version >= 1) {
-            this.$barRect.attr('transform', this.defaultTransform + ` translate(0,${translateY})`);
-        }
-        else {
-            this.$barRect.attr('transform', `translate(0,${translateY})`);
-        }
-        this.barText = (percent * 100).toFixed(0) + '%';
-        this.$barText.text(this.barText);
-        if (percentageFont) {
-            this.$barText.attr('font-family', 'Microsoft YaHei');
-            this.$barText.attr('font-size', percentageFont.fontSize + '');
-            this.$barText.attr('fill', percentageFont.color);
-            if (percentageFont.isBold) {
-                this.$barText.attr('font-weight', 'bold');
-            }
-            if (percentageFont.isItalic) {
-                this.$barText.attr('font-style', 'italic');
-            }
-            if (percentageFont.isUnderline) {
-                this.$barText.attr('text-decoration', 'underline');
-            }
-        }
-    }
-}
+import { BarGraphDirection } from '../model';
+import { ReadableElement } from './base/readable-element';
+import { calculatePercent } from './shared/math-utils';
+import { VariableUtil } from '../utils/variable-util';
+import { VariableValueType } from '../model/shared/condition/variable-value-type';
+export class BarGraphElement extends ReadableElement {
+    constructor(element, permissionChecker, variableCommunicator, variableStore, localization, signalRAppId) {
+        super(element, permissionChecker, variableCommunicator, variableStore, localization, signalRAppId);
+        this.defaultBarColor = '#6fd149';
+        this.defaultUpperLimitColor = '#ff4448';
+        this.defaultLowerLimitColor = '#0f60e8';
+        this.barText = '';
+        this.valueObj = {};
+        this.isNeedUpdateScale = false;
+        this.needAddNumber = 0;
+        if ((this.model.minValueType === VariableValueType.Constant && this.model.maxValueType === VariableValueType.Variable)
+            || this.model.maxValueType === VariableValueType.Constant && this.model.minValueType === VariableValueType.Variable) {
+            this.isNeedUpdateScale = true;
+            this.updateScale();
+            this.isNeedUpdateScale = false;
+        }
+        this.$barRect = this.$element.find('rect');
+        this.$barText = this.$element.find('text[id="text"]').last();
+        if (this.model.version && this.model.version >= 1) {
+            const backgroundColor = this.model.backgroundColor ? this.model.backgroundColor : 'transparent';
+            this.barElement = this.$element.children(`path[fill='${backgroundColor}']`);
+            this.defaultTransform = this.barElement.attr('transform');
+            this.$barRect.attr('transform', this.defaultTransform);
+        }
+        setTimeout(() => {
+            this.initFrameNode();
+        });
+    }
+    get readVariableName() {
+        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);
+        }
+    }
+    initTransform() {
+        if (this.needAddNumber <= 3)
+            return;
+        this.$element[0].childNodes.forEach((node, index) => {
+            // const matrixE = node.transform.baseVal[0].matrix.e;
+            // node.transform.baseVal[0].matrix.e = matrixE + (this.needAddNumber - 3) * 7;
+            if (!node.transform.baseVal[0])
+                return;
+            if (node.nodeName === 'g') {
+                const nodeValue = node.attributes['clip-path'].value.replace('url(#', '').replace(')', '');
+                const rootNode = node.parentNode.parentNode.parentElement;
+                const clipPath = $(rootNode).find(`clipPath[id="${nodeValue}"]`);
+                const demoPath = clipPath.find('path');
+                const dValues = demoPath.attr('d').split(',');
+                const retValues = [];
+                dValues.forEach((line) => {
+                    const values = [];
+                    line.split(' ').forEach((item) => {
+                        const nItem = Number(item);
+                        if (nItem === -1) {
+                            item = nItem - (this.needAddNumber - 3) * 7;
+                        }
+                        values.push(item);
+                    });
+                    retValues.push(values.join(' '));
+                });
+                demoPath.attr('d', retValues.join(','));
+            }
+            else if (index === this.$element[0].childNodes.length - 1) {
+                this.defaultTransform = node.attributes['transform'].value;
+            }
+        });
+    }
+    initFrameNode() {
+        const arcPath = Snap(this.$element[0]);
+        const b = arcPath.getBBox(true);
+        this.rootElement.append('rect').attr('id', 'StateFrame').attr('width', b.width).attr('height', b.height).attr('fill', 'transparent');
+    }
+    updateValueObj(value, variableName) {
+        var _a, _b, _c;
+        if (((_a = this.model.readVariable) === null || _a === void 0 ? void 0 : _a.name) === variableName) {
+            this.isNeedUpdateScale = false;
+            this.valueObj.value = value;
+        }
+        if (((_b = this.model.minVariable) === null || _b === void 0 ? void 0 : _b.name) === variableName) {
+            this.isNeedUpdateScale = true;
+            this.valueObj.min = value;
+        }
+        if (((_c = this.model.maxVariable) === null || _c === void 0 ? void 0 : _c.name) === variableName) {
+            this.isNeedUpdateScale = true;
+            this.valueObj.max = value;
+        }
+    }
+    updateScale() {
+        if (!this.isNeedUpdateScale) {
+            return;
+        }
+        const textElements = this.$element.find('g:first > text');
+        let min = this.model.minValueType ? this.valueObj.min : this.model.min;
+        let max = this.model.maxValueType ? this.valueObj.max : this.model.max;
+        min = Number(min);
+        max = Number(max);
+        if (isNaN(min) || isNaN(max)) {
+            min = BarGraphElement.DEFAULT_MIN_VALUE;
+            max = BarGraphElement.DEFAULT_MAX_VALUE;
+        }
+        if (this.model.maxValueType === VariableValueType.Variable || this.model.minValueType === VariableValueType.Variable) {
+            this.needAddNumber = max.toString().length > min.toString().length ? max.toString().length : min.toString().length;
+            this.initTransform();
+        }
+        const avgSacle = ((max - min) / this.model.masterDivisionNumber).toFixed(5);
+        for (let i = 0; i < textElements.length; i++) {
+            const text = textElements[i];
+            if (!text.innerHTML) {
+                continue;
+            }
+            let sacleValue = ((Number(avgSacle) * i) + min).toFixed(0);
+            // 整数位和小数位格式化；
+            if (this.model.fractionDigits > 0) {
+                sacleValue = (sacleValue / Math.pow(10, this.model.fractionDigits)).toFixed(this.model.fractionDigits);
+            }
+            if (!isNaN(sacleValue)) {
+                text.innerHTML = sacleValue;
+                if (this.model.minValueType !== VariableValueType.Constant || this.model.maxValueType !== VariableValueType.Constant) {
+                    // FLEXCLOUD-2619 刻度未对齐问题
+                    let translateX = 0;
+                    const sacleLen = sacleValue.toString().length;
+                    switch (sacleLen) {
+                        case 1:
+                            translateX = 13;
+                            break;
+                        case 2:
+                            translateX = 7;
+                            break;
+                        case 3:
+                            translateX = this.model.fractionDigits ? 5 : 0;
+                            break;
+                        default:
+                            if (sacleLen > 3 && this.needAddNumber > 3) {
+                                translateX = -(sacleLen - 3) * 7;
+                            }
+                            break;
+                    }
+                    if (this.model.minValueType !== VariableValueType.Constant && this.model.maxValueType === VariableValueType.Constant) {
+                        const maxLen = this.model.max && this.model.max.toString().length;
+                        translateX += maxLen > 2 ? (maxLen - 3) * 7 : 0;
+                    }
+                    text.transform.baseVal[0].matrix.e = translateX;
+                }
+            }
+        }
+    }
+    updateVariableValue(value, variableName) {
+        this.updateValueObj(value, variableName);
+        this.updateScale();
+        const variableValue = Number(this.valueObj.value);
+        let maxValue = this.model.maxValueType ? this.valueObj.max : this.model.max;
+        let minValue = this.model.minValueType ? this.valueObj.min : this.model.min;
+        minValue = Number(minValue);
+        maxValue = Number(maxValue);
+        if (isNaN(minValue) || isNaN(maxValue)) {
+            minValue = BarGraphElement.DEFAULT_MIN_VALUE;
+            maxValue = BarGraphElement.DEFAULT_MAX_VALUE;
+        }
+        if (isNaN(variableValue)) {
+            return;
+        }
+        const useAlarmLimit = this.model.useAlarmLimit;
+        const useAlarmUpperLimit = null != this.model.upperLimit;
+        const useAlarmLowerLimit = null != this.model.lowerLimit;
+        let barColor = this.model.barColor;
+        const upperLimitColor = this.model.upperLimitColor;
+        const lowerLimitColor = this.model.lowerLimitColor;
+        const percentageFont = this.model.percentageFont;
+        let box;
+        if (this.model.version && this.model.version >= 1) {
+            box = this.barElement[0].getBBox();
+        }
+        else {
+            box = this.$barRect.parent()[0].getBBox();
+        }
+        const percent = calculatePercent(minValue, maxValue, variableValue);
+        let translateY = 0;
+        if (this.model.direction === BarGraphDirection.DownToUp || this.model.direction === BarGraphDirection.LeftToRight) {
+            translateY = box.height * (1 - percent);
+        }
+        if (!barColor) {
+            barColor = this.defaultBarColor;
+        }
+        if (useAlarmLimit) {
+            if (useAlarmUpperLimit && variableValue > +this.model.upperLimit) {
+                if (upperLimitColor) {
+                    barColor = upperLimitColor;
+                }
+                else {
+                    barColor = this.defaultUpperLimitColor;
+                }
+            }
+            else if (useAlarmLowerLimit && variableValue < +this.model.lowerLimit) {
+                if (lowerLimitColor) {
+                    barColor = lowerLimitColor;
+                }
+                else {
+                    barColor = this.defaultLowerLimitColor;
+                }
+            }
+        }
+        this.$barRect.attr('height', box.height * percent);
+        this.$barRect.attr('width', box.width);
+        this.$barRect.attr('fill', barColor);
+        if (this.model.version && this.model.version >= 1) {
+            this.$barRect.attr('transform', this.defaultTransform + ` translate(0,${translateY})`);
+        }
+        else {
+            this.$barRect.attr('transform', `translate(0,${translateY})`);
+        }
+        this.barText = (percent * 100).toFixed(0) + '%';
+        this.$barText.text(this.barText);
+        if (percentageFont) {
+            this.$barText.attr('font-family', 'Microsoft YaHei');
+            this.$barText.attr('font-size', percentageFont.fontSize + '');
+            this.$barText.attr('fill', percentageFont.color);
+            if (percentageFont.isBold) {
+                this.$barText.attr('font-weight', 'bold');
+            }
+            if (percentageFont.isItalic) {
+                this.$barText.attr('font-style', 'italic');
+            }
+            if (percentageFont.isUnderline) {
+                this.$barText.attr('text-decoration', 'underline');
+            }
+        }
+    }
+}
+BarGraphElement.DEFAULT_MIN_VALUE = 0;
+BarGraphElement.DEFAULT_MAX_VALUE = 100;

package/elements/bar-graph-element.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"BarGraphElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./base/readable-element","name":"ReadableElement","line":9,"character":37},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":33,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"../service","name":"PermissionChecker","line":33,"character":57},{"__symbolic":"reference","module":"../communication","name":"VariableCommunicator","line":34,"character":30},{"__symbolic":"reference","module":"../config","name":"VariableStore","line":35,"character":23},{"__symbolic":"reference","module":"../localization","name":"Localization","line":36,"character":22},{"__symbolic":"reference","name":"string"}]}],"initFrameNode":[{"__symbolic":"method"}],"updateVariableValue":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"BarGraphElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./base/readable-element","name":"ReadableElement","line":10,"character":37},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":39,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"../service","name":"PermissionChecker","line":39,"character":57},{"__symbolic":"reference","module":"../communication","name":"VariableCommunicator","line":40,"character":30},{"__symbolic":"reference","module":"../config","name":"VariableStore","line":41,"character":23},{"__symbolic":"reference","module":"../localization","name":"Localization","line":42,"character":22},{"__symbolic":"reference","name":"string"}]}],"initTransform":[{"__symbolic":"method"}],"initFrameNode":[{"__symbolic":"method"}],"updateValueObj":[{"__symbolic":"method"}],"updateScale":[{"__symbolic":"method"}],"updateVariableValue":[{"__symbolic":"method"}]},"statics":{"DEFAULT_MIN_VALUE":0,"DEFAULT_MAX_VALUE":100}}}}]

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

@@ -1,11 +1,11 @@
-/// <reference types="jquery" />
-/// <reference types="jqueryui" />
-import * as d3 from 'd3-selection';
-import { BaseElementModel } from '../../model';
-export declare abstract class BaseElement {
-    protected readonly signalRAppId: string;
-    protected readonly $element: JQuery;
-    protected readonly rootElement: d3.Selection<any, {}, null, undefined>;
-    protected model: BaseElementModel;
-    constructor(element: HTMLElement, signalRAppId?: string);
-}
+/// <reference types="jquery" />
+/// <reference types="jqueryui" />
+import * as d3 from 'd3-selection';
+import { BaseElementModel } from '../../model';
+export declare abstract class BaseElement {
+    protected readonly signalRAppId: string;
+    protected readonly $element: JQuery;
+    protected readonly rootElement: d3.Selection<any, {}, null, undefined>;
+    protected model: BaseElementModel;
+    constructor(element: HTMLElement, signalRAppId?: string);
+}

package/elements/base/base-element.js

@@ -1,9 +1,9 @@
-import * as d3 from 'd3-selection';
-export class BaseElement {
-    constructor(element, signalRAppId = '') {
-        this.signalRAppId = signalRAppId;
-        this.$element = $(element);
-        this.rootElement = d3.select(element);
-        this.model = JSON.parse(this.rootElement.attr('data-model'));
-    }
-}
+import * as d3 from 'd3-selection';
+export class BaseElement {
+    constructor(element, signalRAppId = '') {
+        this.signalRAppId = signalRAppId;
+        this.$element = $(element);
+        this.rootElement = d3.select(element);
+        this.model = JSON.parse(this.rootElement.attr('data-model'));
+    }
+}

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

@@ -1,16 +1,16 @@
-import { ConditionControlResultValue } from '../../model';
-import { ConditionalControlModel } from '../../model/base/conditional-control-model';
-import { PermissionChecker } from '../../service';
-import { VariableCommunicator } from '../../communication';
-import { StateControlElement } from './state-control-element';
-import { Localization } from '../../localization';
-import { VariableStore } from '../../config';
-export declare abstract class ConditionalControlElement extends StateControlElement {
-    protected readonly variableCommunicator: VariableCommunicator;
-    protected readonly variableStore: VariableStore;
-    protected abstract readonly model: ConditionalControlModel;
-    constructor(element: HTMLElement, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore, localization: Localization, signalRAppId: string);
-    protected abstract updateElement(value: ConditionControlResultValue): void;
-    private initConditionalControl;
-    private recoverData;
-}
+import { ConditionControlResultValue } from '../../model';
+import { ConditionalControlModel } from '../../model/base/conditional-control-model';
+import { PermissionChecker } from '../../service';
+import { VariableCommunicator } from '../../communication';
+import { StateControlElement } from './state-control-element';
+import { Localization } from '../../localization';
+import { VariableStore } from '../../config';
+export declare abstract class ConditionalControlElement extends StateControlElement {
+    protected readonly variableCommunicator: VariableCommunicator;
+    protected readonly variableStore: VariableStore;
+    protected abstract readonly model: ConditionalControlModel;
+    constructor(element: HTMLElement, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore, localization: Localization, signalRAppId: string);
+    protected abstract updateElement(value: ConditionControlResultValue): void;
+    private initConditionalControl;
+    private recoverData;
+}

package/elements/base/conditional-control-element.js

@@ -1,87 +1,87 @@
-import { BitConditonLogic, ConditionItemsResultObserver } from '../../model';
-import { forEach } from 'lodash';
-import { ConditionType } from '../../model/shared/condition/condition-type';
-import { RelationType } from '../../model/shared/condition/relation-type';
-import { VariableState } from '../../communication';
-import { StateControlElement } from './state-control-element';
-import { VariableUtil } from '../../utils/variable-util';
-import { VariableDefinition } from '../../communication/variable/variable-definition';
-export class ConditionalControlElement extends StateControlElement {
-    constructor(element, permissionChecker, variableCommunicator, variableStore, localization, signalRAppId) {
-        super(element, permissionChecker, variableCommunicator, variableStore, localization, signalRAppId);
-        this.variableCommunicator = variableCommunicator;
-        this.variableStore = variableStore;
-        this.recoverData();
-        setTimeout(() => {
-            this.initConditionalControl();
-        });
-    }
-    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);
-    }
-    recoverData() {
-        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();
-                const bitCondition = {
-                    variableName: this.model.variableName,
-                    bitConditionLogic: BitConditonLogic.On
-                };
-                const condition = {
-                    index: 0,
-                    conditionType: ConditionType.Bit,
-                    condition: bitCondition,
-                    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();
-                const bitCondition = {
-                    variableName: this.model.readVariable.name,
-                    variableGroupName: this.model.readVariable.groupName,
-                    bitConditionLogic: BitConditonLogic.On
-                };
-                const condition = {
-                    index: 0,
-                    conditionType: ConditionType.Bit,
-                    condition: bitCondition,
-                    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();
-                }
-            });
-        }
-    }
-}
+import { BitConditonLogic, ConditionItemsResultObserver } from '../../model';
+import { forEach } from 'lodash';
+import { ConditionType } from '../../model/shared/condition/condition-type';
+import { RelationType } from '../../model/shared/condition/relation-type';
+import { VariableState } from '../../communication';
+import { StateControlElement } from './state-control-element';
+import { VariableUtil } from '../../utils/variable-util';
+import { VariableDefinition } from '../../communication/variable/variable-definition';
+export class ConditionalControlElement extends StateControlElement {
+    constructor(element, permissionChecker, variableCommunicator, variableStore, localization, signalRAppId) {
+        super(element, permissionChecker, variableCommunicator, variableStore, localization, signalRAppId);
+        this.variableCommunicator = variableCommunicator;
+        this.variableStore = variableStore;
+        this.recoverData();
+        setTimeout(() => {
+            this.initConditionalControl();
+        });
+    }
+    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);
+    }
+    recoverData() {
+        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();
+                const bitCondition = {
+                    variableName: this.model.variableName,
+                    bitConditionLogic: BitConditonLogic.On
+                };
+                const condition = {
+                    index: 0,
+                    conditionType: ConditionType.Bit,
+                    condition: bitCondition,
+                    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();
+                const bitCondition = {
+                    variableName: this.model.readVariable.name,
+                    variableGroupName: this.model.readVariable.groupName,
+                    bitConditionLogic: BitConditonLogic.On
+                };
+                const condition = {
+                    index: 0,
+                    conditionType: ConditionType.Bit,
+                    condition: bitCondition,
+                    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();
+                }
+            });
+        }
+    }
+}