@flexem/fc-gui 3.0.0-alpha.102 → 3.0.0-alpha.104
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 +7 -2
- package/bundles/@flexem/fc-gui.umd.js +122 -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 +47 -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;
|
|
@@ -57,6 +58,34 @@ export class RingGraphElement extends ReadableElement {
|
|
|
57
58
|
const variable = new VariableDefinition(this.model.maxVariable.name, this.model.maxVariable.groupName, this.model.maxVariable.dataSourceCode, this.model.maxVariable.variableVersion);
|
|
58
59
|
return VariableUtil.getConvertedVariableName(this.variableStore, variable);
|
|
59
60
|
}
|
|
61
|
+
initTransformFun(len) {
|
|
62
|
+
this.$element[0].childNodes.forEach((node) => {
|
|
63
|
+
if (!node.transform.baseVal[0])
|
|
64
|
+
return;
|
|
65
|
+
// const matrixE = node.transform.baseVal[0].matrix.e;
|
|
66
|
+
// node.transform.baseVal[0].matrix.e = matrixE + len * 5;
|
|
67
|
+
if (node.nodeName === 'g') {
|
|
68
|
+
const nodeValue = node.attributes['clip-path'].value.replace('url(#', '').replace(')', '');
|
|
69
|
+
const rootNode = node.parentNode.parentNode.parentElement;
|
|
70
|
+
const clipPath = $(rootNode).find(`clipPath[id="${nodeValue}"]`);
|
|
71
|
+
const demoPath = clipPath.find('path');
|
|
72
|
+
const dValues = demoPath.attr('d').split(',');
|
|
73
|
+
const retValues = [];
|
|
74
|
+
dValues.forEach((line, index) => {
|
|
75
|
+
const values = [];
|
|
76
|
+
line.split(' ').forEach((item) => {
|
|
77
|
+
const nItem = Number(item);
|
|
78
|
+
if (!isNaN(nItem) && (index === 1 || index === 2 || nItem === -1)) {
|
|
79
|
+
item = nItem > 0 ? (index === 1 || index === 2 ? nItem + (len + 2) * 8 : nItem + len * 8) : nItem - len * 8;
|
|
80
|
+
}
|
|
81
|
+
values.push(item);
|
|
82
|
+
});
|
|
83
|
+
retValues.push(values.join(' '));
|
|
84
|
+
});
|
|
85
|
+
demoPath.attr('d', retValues.join(','));
|
|
86
|
+
}
|
|
87
|
+
});
|
|
88
|
+
}
|
|
60
89
|
initFrameNode() {
|
|
61
90
|
const arcPath = Snap(this.$element[0]);
|
|
62
91
|
const b = arcPath.getBBox(true);
|
|
@@ -92,7 +121,6 @@ export class RingGraphElement extends ReadableElement {
|
|
|
92
121
|
}
|
|
93
122
|
updateScale() {
|
|
94
123
|
// 刻度模糊问题
|
|
95
|
-
let isInitTransform = false;
|
|
96
124
|
const matrix = this.$element[0].transform.baseVal[0].matrix;
|
|
97
125
|
if (!this.$element[0].style.transform) {
|
|
98
126
|
this.$element[0].style.transform = `translate3d(${matrix.e}px, ${matrix.f}px, 0)`;
|
|
@@ -109,6 +137,15 @@ export class RingGraphElement extends ReadableElement {
|
|
|
109
137
|
min = RingGraphElement.DEFAULT_MIN_VALUE;
|
|
110
138
|
max = RingGraphElement.DEFAULT_MAX_VALUE;
|
|
111
139
|
}
|
|
140
|
+
if (this.model.minValueType === VariableValueType.Variable || this.model.maxValueType === VariableValueType.Variable) {
|
|
141
|
+
const len = max.toString().length > min.toString().length ? max.toString().length : min.toString().length;
|
|
142
|
+
if (Math.abs(len - this.needAddNumber) > 2) {
|
|
143
|
+
const width = this.$element.find('rect').attr('width');
|
|
144
|
+
this.$element.find('rect').attr('width', Number(width) + (len - this.needAddNumber) * 8);
|
|
145
|
+
this.initTransformFun(Math.abs(len - this.needAddNumber));
|
|
146
|
+
this.needAddNumber = len;
|
|
147
|
+
}
|
|
148
|
+
}
|
|
112
149
|
const avgSacle = ((max - min) / this.model.masterDivisionNumber).toFixed(5);
|
|
113
150
|
for (let i = 0; i < textElements.length; i++) {
|
|
114
151
|
const text = textElements[i];
|
|
@@ -121,18 +158,23 @@ export class RingGraphElement extends ReadableElement {
|
|
|
121
158
|
sacleValue = (sacleValue / Math.pow(10, this.model.fractionDigits)).toFixed(this.model.fractionDigits);
|
|
122
159
|
}
|
|
123
160
|
if (!isNaN(sacleValue)) {
|
|
161
|
+
const oriValue = text.innerHTML;
|
|
124
162
|
text.innerHTML = sacleValue;
|
|
125
163
|
if (this.model.minValueType !== VariableValueType.Constant || this.model.maxValueType !== VariableValueType.Constant) {
|
|
126
164
|
// FLEXCLOUD-2619 刻度显示不全问题
|
|
127
165
|
const order = (i + 1) / textElements.length;
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
166
|
+
const len = oriValue.toString().length - sacleValue.toString().length;
|
|
167
|
+
if (order <= 0.7 && len > 1 && !this.initTransform) {
|
|
168
|
+
text.transform.baseVal[0].matrix.e += (len - 1) * 5;
|
|
169
|
+
}
|
|
170
|
+
if (order > 0.7 && Math.abs(len) > 0) {
|
|
171
|
+
text.transform.baseVal[0].matrix.e += len > 1 ? (len - 1) * 5 : len < -1 ? (len + 1) * 5 : len * 5;
|
|
172
|
+
text.transform.baseVal[0].matrix.e += len === -2 ? -3 : 0;
|
|
131
173
|
}
|
|
132
174
|
}
|
|
133
175
|
}
|
|
134
176
|
}
|
|
135
|
-
this.initTransform =
|
|
177
|
+
this.initTransform = true;
|
|
136
178
|
}
|
|
137
179
|
updateVariableValue(value, variableName) {
|
|
138
180
|
this.updateValueObj(value, variableName);
|
|
@@ -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}}}}]
|