@flexem/fc-gui 3.0.0-alpha.102 → 3.0.0-alpha.103
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +1 -1
- package/bundles/@flexem/fc-gui.umd.js +119 -32
- package/bundles/@flexem/fc-gui.umd.js.map +1 -1
- package/bundles/@flexem/fc-gui.umd.min.js +3 -3
- package/bundles/@flexem/fc-gui.umd.min.js.map +1 -1
- package/elements/bar-graph-element.d.ts +4 -1
- package/elements/bar-graph-element.js +52 -4
- package/elements/bar-graph-element.metadata.json +1 -1
- package/elements/ring-graph/ring-graph-element.d.ts +2 -0
- package/elements/ring-graph/ring-graph-element.js +44 -5
- package/elements/ring-graph/ring-graph-element.metadata.json +1 -1
- package/package.json +1 -1
|
@@ -11,15 +11,18 @@ export declare class BarGraphElement extends ReadableElement {
|
|
|
11
11
|
private readonly $barRect;
|
|
12
12
|
private readonly barElement;
|
|
13
13
|
private readonly $barText;
|
|
14
|
-
private
|
|
14
|
+
private defaultTransform;
|
|
15
15
|
private defaultBarColor;
|
|
16
16
|
private defaultUpperLimitColor;
|
|
17
17
|
private defaultLowerLimitColor;
|
|
18
18
|
private barText;
|
|
19
19
|
private valueObj;
|
|
20
20
|
private isNeedUpdateScale;
|
|
21
|
+
private needAddNumber;
|
|
22
|
+
private needInitTransform;
|
|
21
23
|
get readVariableName(): string;
|
|
22
24
|
constructor(element: HTMLElement, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore, localization: Localization, signalRAppId: string);
|
|
25
|
+
private initTransform;
|
|
23
26
|
private initFrameNode;
|
|
24
27
|
private updateValueObj;
|
|
25
28
|
private updateScale;
|
|
@@ -12,6 +12,8 @@ export class BarGraphElement extends ReadableElement {
|
|
|
12
12
|
this.barText = '';
|
|
13
13
|
this.valueObj = {};
|
|
14
14
|
this.isNeedUpdateScale = false;
|
|
15
|
+
this.needAddNumber = 0;
|
|
16
|
+
this.needInitTransform = true;
|
|
15
17
|
if ((this.model.minValueType === VariableValueType.Constant && this.model.maxValueType === VariableValueType.Variable)
|
|
16
18
|
|| this.model.maxValueType === VariableValueType.Constant && this.model.minValueType === VariableValueType.Variable) {
|
|
17
19
|
this.isNeedUpdateScale = true;
|
|
@@ -27,8 +29,10 @@ export class BarGraphElement extends ReadableElement {
|
|
|
27
29
|
this.$barRect.attr('transform', this.defaultTransform);
|
|
28
30
|
}
|
|
29
31
|
setTimeout(() => {
|
|
30
|
-
this.
|
|
31
|
-
|
|
32
|
+
if (this.model.maxValueType !== VariableValueType.Variable || this.model.minValueType !== VariableValueType.Variable) {
|
|
33
|
+
this.initFrameNode();
|
|
34
|
+
}
|
|
35
|
+
});
|
|
32
36
|
}
|
|
33
37
|
get readVariableName() {
|
|
34
38
|
if (!this.model) {
|
|
@@ -45,10 +49,42 @@ export class BarGraphElement extends ReadableElement {
|
|
|
45
49
|
return VariableUtil.getConvertedVariableName(this.variableStore, variable);
|
|
46
50
|
}
|
|
47
51
|
}
|
|
52
|
+
initTransform() {
|
|
53
|
+
if (this.needAddNumber <= 3)
|
|
54
|
+
return;
|
|
55
|
+
this.$element[0].childNodes.forEach((node, index) => {
|
|
56
|
+
const matrixE = node.transform.baseVal[0].matrix.e;
|
|
57
|
+
node.transform.baseVal[0].matrix.e = matrixE + (this.needAddNumber - 3) * 7;
|
|
58
|
+
if (node.nodeName === 'g') {
|
|
59
|
+
const nodeValue = node.attributes['clip-path'].value.replace('url(#', '').replace(')', '');
|
|
60
|
+
const rootNode = node.parentNode.parentNode.parentElement;
|
|
61
|
+
const clipPath = $(rootNode).find(`clipPath[id="${nodeValue}"]`);
|
|
62
|
+
const demoPath = clipPath.find('path');
|
|
63
|
+
const dValues = demoPath.attr('d').split(',');
|
|
64
|
+
const retValues = [];
|
|
65
|
+
dValues.forEach((line) => {
|
|
66
|
+
const values = [];
|
|
67
|
+
line.split(' ').forEach((item) => {
|
|
68
|
+
const nItem = Number(item);
|
|
69
|
+
if (!isNaN(nItem) && item < 100) {
|
|
70
|
+
item = nItem > 0 ? nItem + (this.needAddNumber - 3) * 7 : nItem - (this.needAddNumber - 3) * 7;
|
|
71
|
+
}
|
|
72
|
+
values.push(item);
|
|
73
|
+
});
|
|
74
|
+
retValues.push(values.join(' '));
|
|
75
|
+
});
|
|
76
|
+
demoPath.attr('d', retValues.join(','));
|
|
77
|
+
}
|
|
78
|
+
else if (index === this.$element[0].childNodes.length - 1) {
|
|
79
|
+
this.defaultTransform = node.attributes['transform'].value;
|
|
80
|
+
}
|
|
81
|
+
});
|
|
82
|
+
}
|
|
48
83
|
initFrameNode() {
|
|
49
84
|
const arcPath = Snap(this.$element[0]);
|
|
50
85
|
const b = arcPath.getBBox(true);
|
|
51
|
-
this.
|
|
86
|
+
const width = this.needAddNumber <= 3 ? b.width : b.width + (this.needAddNumber - 3) * 7;
|
|
87
|
+
this.rootElement.append('rect').attr('id', 'StateFrame').attr('width', width).attr('height', b.height).attr('fill', 'transparent');
|
|
52
88
|
}
|
|
53
89
|
updateValueObj(value, variableName) {
|
|
54
90
|
var _a, _b, _c;
|
|
@@ -78,6 +114,14 @@ export class BarGraphElement extends ReadableElement {
|
|
|
78
114
|
min = BarGraphElement.DEFAULT_MIN_VALUE;
|
|
79
115
|
max = BarGraphElement.DEFAULT_MAX_VALUE;
|
|
80
116
|
}
|
|
117
|
+
if (this.model.maxValueType === VariableValueType.Variable && this.model.minValueType === VariableValueType.Variable) {
|
|
118
|
+
this.needAddNumber = max.toString().length > min.toString().length ? max.toString().length : min.toString().length;
|
|
119
|
+
if (this.needInitTransform) {
|
|
120
|
+
this.initTransform();
|
|
121
|
+
this.initFrameNode();
|
|
122
|
+
this.needInitTransform = false;
|
|
123
|
+
}
|
|
124
|
+
}
|
|
81
125
|
const avgSacle = ((max - min) / this.model.masterDivisionNumber).toFixed(5);
|
|
82
126
|
for (let i = 0; i < textElements.length; i++) {
|
|
83
127
|
const text = textElements[i];
|
|
@@ -94,7 +138,8 @@ export class BarGraphElement extends ReadableElement {
|
|
|
94
138
|
if (this.model.minValueType !== VariableValueType.Constant || this.model.maxValueType !== VariableValueType.Constant) {
|
|
95
139
|
// FLEXCLOUD-2619 刻度未对齐问题
|
|
96
140
|
let translateX = 0;
|
|
97
|
-
|
|
141
|
+
const sacleLen = sacleValue.toString().length;
|
|
142
|
+
switch (sacleLen) {
|
|
98
143
|
case 1:
|
|
99
144
|
translateX = 13;
|
|
100
145
|
break;
|
|
@@ -105,6 +150,9 @@ export class BarGraphElement extends ReadableElement {
|
|
|
105
150
|
translateX = this.model.fractionDigits ? 5 : 0;
|
|
106
151
|
break;
|
|
107
152
|
default:
|
|
153
|
+
if (sacleLen > 3 && this.needAddNumber > 3) {
|
|
154
|
+
translateX = -(sacleLen - 3) * 7;
|
|
155
|
+
}
|
|
108
156
|
break;
|
|
109
157
|
}
|
|
110
158
|
text.transform.baseVal[0].matrix.e = translateX;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
[{"__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":
|
|
1
|
+
[{"__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":40,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"../service","name":"PermissionChecker","line":40,"character":57},{"__symbolic":"reference","module":"../communication","name":"VariableCommunicator","line":41,"character":30},{"__symbolic":"reference","module":"../config","name":"VariableStore","line":42,"character":23},{"__symbolic":"reference","module":"../localization","name":"Localization","line":43,"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}}}}]
|
|
@@ -13,10 +13,12 @@ export declare class RingGraphElement extends ReadableElement {
|
|
|
13
13
|
private valueObj;
|
|
14
14
|
private isNeedUpdateScale;
|
|
15
15
|
private initTransform;
|
|
16
|
+
private needAddNumber;
|
|
16
17
|
get readVariableName(): string;
|
|
17
18
|
get minVariableName(): string;
|
|
18
19
|
get maxVariableName(): string;
|
|
19
20
|
constructor(element: HTMLElement, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore, localization: Localization, signalRAppId: string);
|
|
21
|
+
private initTransformFun;
|
|
20
22
|
private initFrameNode;
|
|
21
23
|
init(variableName: string): void;
|
|
22
24
|
private updateValueObj;
|
|
@@ -13,6 +13,7 @@ export class RingGraphElement extends ReadableElement {
|
|
|
13
13
|
this.valueObj = {};
|
|
14
14
|
this.isNeedUpdateScale = false;
|
|
15
15
|
this.initTransform = false;
|
|
16
|
+
this.needAddNumber = 0;
|
|
16
17
|
if ((this.model.minValueType === VariableValueType.Constant && this.model.maxValueType === VariableValueType.Variable)
|
|
17
18
|
|| this.model.maxValueType === VariableValueType.Constant && this.model.minValueType === VariableValueType.Variable) {
|
|
18
19
|
this.isNeedUpdateScale = true;
|
|
@@ -23,7 +24,9 @@ export class RingGraphElement extends ReadableElement {
|
|
|
23
24
|
this._barElement$ = el$.find('path[data-id="barArc"]');
|
|
24
25
|
this._textElement$ = el$.find('text[data-id="pText"]');
|
|
25
26
|
setTimeout(() => {
|
|
26
|
-
this.
|
|
27
|
+
if (this.model.minValueType !== VariableValueType.Variable) {
|
|
28
|
+
this.initFrameNode();
|
|
29
|
+
}
|
|
27
30
|
this.changeStates();
|
|
28
31
|
});
|
|
29
32
|
}
|
|
@@ -57,10 +60,39 @@ export class RingGraphElement extends ReadableElement {
|
|
|
57
60
|
const variable = new VariableDefinition(this.model.maxVariable.name, this.model.maxVariable.groupName, this.model.maxVariable.dataSourceCode, this.model.maxVariable.variableVersion);
|
|
58
61
|
return VariableUtil.getConvertedVariableName(this.variableStore, variable);
|
|
59
62
|
}
|
|
63
|
+
initTransformFun() {
|
|
64
|
+
if (this.needAddNumber <= 3)
|
|
65
|
+
return;
|
|
66
|
+
this.$element[0].childNodes.forEach((node) => {
|
|
67
|
+
const matrixE = node.transform.baseVal[0].matrix.e;
|
|
68
|
+
node.transform.baseVal[0].matrix.e = matrixE + (this.needAddNumber - 3) * 5;
|
|
69
|
+
if (node.nodeName === 'g') {
|
|
70
|
+
const nodeValue = node.attributes['clip-path'].value.replace('url(#', '').replace(')', '');
|
|
71
|
+
const rootNode = node.parentNode.parentNode.parentElement;
|
|
72
|
+
const clipPath = $(rootNode).find(`clipPath[id="${nodeValue}"]`);
|
|
73
|
+
const demoPath = clipPath.find('path');
|
|
74
|
+
const dValues = demoPath.attr('d').split(',');
|
|
75
|
+
const retValues = [];
|
|
76
|
+
dValues.forEach((line, index) => {
|
|
77
|
+
const values = [];
|
|
78
|
+
line.split(' ').forEach((item) => {
|
|
79
|
+
const nItem = Number(item);
|
|
80
|
+
if (!isNaN(nItem) && (index === 1 || nItem === -1)) {
|
|
81
|
+
item = nItem > 0 ? nItem + (this.needAddNumber - 3) * 8 : nItem - (this.needAddNumber - 3) * 8;
|
|
82
|
+
}
|
|
83
|
+
values.push(item);
|
|
84
|
+
});
|
|
85
|
+
retValues.push(values.join(' '));
|
|
86
|
+
});
|
|
87
|
+
demoPath.attr('d', retValues.join(','));
|
|
88
|
+
}
|
|
89
|
+
});
|
|
90
|
+
}
|
|
60
91
|
initFrameNode() {
|
|
61
92
|
const arcPath = Snap(this.$element[0]);
|
|
62
93
|
const b = arcPath.getBBox(true);
|
|
63
|
-
this.
|
|
94
|
+
const width = this.needAddNumber <= 3 ? b.width : b.width + (this.needAddNumber - 3) * 8;
|
|
95
|
+
this.rootElement.append('rect').attr('id', 'StateFrame').attr('width', width).attr('height', b.height).attr('fill', 'transparent');
|
|
64
96
|
}
|
|
65
97
|
init(variableName) {
|
|
66
98
|
if (variableName) {
|
|
@@ -109,6 +141,13 @@ export class RingGraphElement extends ReadableElement {
|
|
|
109
141
|
min = RingGraphElement.DEFAULT_MIN_VALUE;
|
|
110
142
|
max = RingGraphElement.DEFAULT_MAX_VALUE;
|
|
111
143
|
}
|
|
144
|
+
if (this.model.minValueType === VariableValueType.Variable) {
|
|
145
|
+
this.needAddNumber = max.toString().length > min.toString().length ? max.toString().length : min.toString().length;
|
|
146
|
+
if (!this.initTransform) {
|
|
147
|
+
this.initTransformFun();
|
|
148
|
+
this.initFrameNode();
|
|
149
|
+
}
|
|
150
|
+
}
|
|
112
151
|
const avgSacle = ((max - min) / this.model.masterDivisionNumber).toFixed(5);
|
|
113
152
|
for (let i = 0; i < textElements.length; i++) {
|
|
114
153
|
const text = textElements[i];
|
|
@@ -122,12 +161,12 @@ export class RingGraphElement extends ReadableElement {
|
|
|
122
161
|
}
|
|
123
162
|
if (!isNaN(sacleValue)) {
|
|
124
163
|
text.innerHTML = sacleValue;
|
|
164
|
+
isInitTransform = true;
|
|
125
165
|
if (this.model.minValueType !== VariableValueType.Constant || this.model.maxValueType !== VariableValueType.Constant) {
|
|
126
166
|
// FLEXCLOUD-2619 刻度显示不全问题
|
|
127
167
|
const order = (i + 1) / textElements.length;
|
|
128
|
-
if (!this.initTransform && order > 0.
|
|
129
|
-
text.transform.baseVal[0].matrix.e -= 5;
|
|
130
|
-
isInitTransform = true;
|
|
168
|
+
if (!this.initTransform && order > 0.7 && sacleValue.toString().length > 3) {
|
|
169
|
+
text.transform.baseVal[0].matrix.e -= (sacleValue.toString().length - 3) * 5;
|
|
131
170
|
}
|
|
132
171
|
}
|
|
133
172
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
[{"__symbolic":"module","version":4,"metadata":{"RingGraphElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../base/readable-element","name":"ReadableElement","line":16,"character":38},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":
|
|
1
|
+
[{"__symbolic":"module","version":4,"metadata":{"RingGraphElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../base/readable-element","name":"ReadableElement","line":16,"character":38},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":62,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":62,"character":57},{"__symbolic":"reference","module":"../../communication/variable/variable-communicator","name":"VariableCommunicator","line":63,"character":30},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":64,"character":23},{"__symbolic":"reference","module":"../../localization/localization.service","name":"Localization","line":65,"character":22},{"__symbolic":"reference","name":"string"}]}],"initTransformFun":[{"__symbolic":"method"}],"initFrameNode":[{"__symbolic":"method"}],"init":[{"__symbolic":"method"}],"updateValueObj":[{"__symbolic":"method"}],"updateScale":[{"__symbolic":"method"}],"updateVariableValue":[{"__symbolic":"method"}],"updateBar":[{"__symbolic":"method"}],"getBarColor":[{"__symbolic":"method"}],"drawClockWiseArc":[{"__symbolic":"method"}],"drawAntiClockWiseArc":[{"__symbolic":"method"}]},"statics":{"DEFAULT_MIN_VALUE":0,"DEFAULT_MAX_VALUE":100}}}}]
|