@flexem/fc-gui 3.0.0-alpha.101 → 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 +6 -1
- package/bundles/@flexem/fc-gui.umd.js +159 -38
- 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 +69 -3
- package/elements/bar-graph-element.metadata.json +1 -1
- package/elements/ring-graph/ring-graph-element.d.ts +3 -0
- package/elements/ring-graph/ring-graph-element.js +57 -2
- 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];
|
|
@@ -91,6 +135,28 @@ export class BarGraphElement extends ReadableElement {
|
|
|
91
135
|
}
|
|
92
136
|
if (!isNaN(sacleValue)) {
|
|
93
137
|
text.innerHTML = sacleValue;
|
|
138
|
+
if (this.model.minValueType !== VariableValueType.Constant || this.model.maxValueType !== VariableValueType.Constant) {
|
|
139
|
+
// FLEXCLOUD-2619 刻度未对齐问题
|
|
140
|
+
let translateX = 0;
|
|
141
|
+
const sacleLen = sacleValue.toString().length;
|
|
142
|
+
switch (sacleLen) {
|
|
143
|
+
case 1:
|
|
144
|
+
translateX = 13;
|
|
145
|
+
break;
|
|
146
|
+
case 2:
|
|
147
|
+
translateX = 7;
|
|
148
|
+
break;
|
|
149
|
+
case 3:
|
|
150
|
+
translateX = this.model.fractionDigits ? 5 : 0;
|
|
151
|
+
break;
|
|
152
|
+
default:
|
|
153
|
+
if (sacleLen > 3 && this.needAddNumber > 3) {
|
|
154
|
+
translateX = -(sacleLen - 3) * 7;
|
|
155
|
+
}
|
|
156
|
+
break;
|
|
157
|
+
}
|
|
158
|
+
text.transform.baseVal[0].matrix.e = translateX;
|
|
159
|
+
}
|
|
94
160
|
}
|
|
95
161
|
}
|
|
96
162
|
}
|
|
@@ -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}}}}]
|
|
@@ -12,10 +12,13 @@ export declare class RingGraphElement extends ReadableElement {
|
|
|
12
12
|
private _textElement$;
|
|
13
13
|
private valueObj;
|
|
14
14
|
private isNeedUpdateScale;
|
|
15
|
+
private initTransform;
|
|
16
|
+
private needAddNumber;
|
|
15
17
|
get readVariableName(): string;
|
|
16
18
|
get minVariableName(): string;
|
|
17
19
|
get maxVariableName(): string;
|
|
18
20
|
constructor(element: HTMLElement, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore, localization: Localization, signalRAppId: string);
|
|
21
|
+
private initTransformFun;
|
|
19
22
|
private initFrameNode;
|
|
20
23
|
init(variableName: string): void;
|
|
21
24
|
private updateValueObj;
|
|
@@ -12,6 +12,8 @@ export class RingGraphElement extends ReadableElement {
|
|
|
12
12
|
super(element, permissionChecker, variableCommunicator, variableStore, localization, signalRAppId);
|
|
13
13
|
this.valueObj = {};
|
|
14
14
|
this.isNeedUpdateScale = false;
|
|
15
|
+
this.initTransform = false;
|
|
16
|
+
this.needAddNumber = 0;
|
|
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;
|
|
@@ -22,7 +24,9 @@ export class RingGraphElement extends ReadableElement {
|
|
|
22
24
|
this._barElement$ = el$.find('path[data-id="barArc"]');
|
|
23
25
|
this._textElement$ = el$.find('text[data-id="pText"]');
|
|
24
26
|
setTimeout(() => {
|
|
25
|
-
this.
|
|
27
|
+
if (this.model.minValueType !== VariableValueType.Variable) {
|
|
28
|
+
this.initFrameNode();
|
|
29
|
+
}
|
|
26
30
|
this.changeStates();
|
|
27
31
|
});
|
|
28
32
|
}
|
|
@@ -56,10 +60,39 @@ export class RingGraphElement extends ReadableElement {
|
|
|
56
60
|
const variable = new VariableDefinition(this.model.maxVariable.name, this.model.maxVariable.groupName, this.model.maxVariable.dataSourceCode, this.model.maxVariable.variableVersion);
|
|
57
61
|
return VariableUtil.getConvertedVariableName(this.variableStore, variable);
|
|
58
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
|
+
}
|
|
59
91
|
initFrameNode() {
|
|
60
92
|
const arcPath = Snap(this.$element[0]);
|
|
61
93
|
const b = arcPath.getBBox(true);
|
|
62
|
-
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');
|
|
63
96
|
}
|
|
64
97
|
init(variableName) {
|
|
65
98
|
if (variableName) {
|
|
@@ -90,6 +123,12 @@ export class RingGraphElement extends ReadableElement {
|
|
|
90
123
|
}
|
|
91
124
|
}
|
|
92
125
|
updateScale() {
|
|
126
|
+
// 刻度模糊问题
|
|
127
|
+
let isInitTransform = false;
|
|
128
|
+
const matrix = this.$element[0].transform.baseVal[0].matrix;
|
|
129
|
+
if (!this.$element[0].style.transform) {
|
|
130
|
+
this.$element[0].style.transform = `translate3d(${matrix.e}px, ${matrix.f}px, 0)`;
|
|
131
|
+
}
|
|
93
132
|
if (!this.isNeedUpdateScale) {
|
|
94
133
|
return;
|
|
95
134
|
}
|
|
@@ -102,6 +141,13 @@ export class RingGraphElement extends ReadableElement {
|
|
|
102
141
|
min = RingGraphElement.DEFAULT_MIN_VALUE;
|
|
103
142
|
max = RingGraphElement.DEFAULT_MAX_VALUE;
|
|
104
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
|
+
}
|
|
105
151
|
const avgSacle = ((max - min) / this.model.masterDivisionNumber).toFixed(5);
|
|
106
152
|
for (let i = 0; i < textElements.length; i++) {
|
|
107
153
|
const text = textElements[i];
|
|
@@ -115,8 +161,17 @@ export class RingGraphElement extends ReadableElement {
|
|
|
115
161
|
}
|
|
116
162
|
if (!isNaN(sacleValue)) {
|
|
117
163
|
text.innerHTML = sacleValue;
|
|
164
|
+
isInitTransform = true;
|
|
165
|
+
if (this.model.minValueType !== VariableValueType.Constant || this.model.maxValueType !== VariableValueType.Constant) {
|
|
166
|
+
// FLEXCLOUD-2619 刻度显示不全问题
|
|
167
|
+
const order = (i + 1) / textElements.length;
|
|
168
|
+
if (!this.initTransform && order > 0.7 && sacleValue.toString().length > 3) {
|
|
169
|
+
text.transform.baseVal[0].matrix.e -= (sacleValue.toString().length - 3) * 5;
|
|
170
|
+
}
|
|
171
|
+
}
|
|
118
172
|
}
|
|
119
173
|
}
|
|
174
|
+
this.initTransform = this.initTransform || isInitTransform;
|
|
120
175
|
}
|
|
121
176
|
updateVariableValue(value, variableName) {
|
|
122
177
|
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}}}}]
|