This is an automated email from the ASF dual-hosted git repository.
wangzx pushed a commit to branch fix/graphic
in repository https://gitbox.apache.org/repos/asf/echarts.git
commit ffc7429184ba2dba9348afdd5bf4c5b7af95bf2a
Author: plainheart <y...@all-my-life.cn>
AuthorDate: Wed May 11 10:18:57 2022 +0800
fix(graphic):
1) fix some options may be unexpectedly reset when calling setOption.
2) fix group children can't be updated when calling setOption with no
`type` option.
---
src/component/graphic/GraphicModel.ts | 4 +-
src/component/graphic/GraphicView.ts | 49 ++++++++-------
test/graphic-cases.html | 105 +++++++++++++++++++++++++++++++-
test/runTest/actions/__meta__.json | 1 +
test/runTest/actions/graphic-cases.json | 1 +
5 files changed, 133 insertions(+), 27 deletions(-)
diff --git a/src/component/graphic/GraphicModel.ts
b/src/component/graphic/GraphicModel.ts
index a6ab11ff5..e51a50987 100644
--- a/src/component/graphic/GraphicModel.ts
+++ b/src/component/graphic/GraphicModel.ts
@@ -435,7 +435,9 @@ export class GraphicComponentModel extends
ComponentModel<GraphicComponentOption
result.push(option);
const children = option.children;
- if (option.type === 'group' && children) {
+ // here we don't judge if option.type is `group`
+ // when new option doesn't provide `type`, it will cause that the
children can't be updated.
+ if (children && children.length) {
this._flatten(children, result, option);
}
// Deleting for JSON output, and for not affecting group creation.
diff --git a/src/component/graphic/GraphicView.ts
b/src/component/graphic/GraphicView.ts
index 4477dd2f7..8a573e77d 100644
--- a/src/component/graphic/GraphicView.ts
+++ b/src/component/graphic/GraphicView.ts
@@ -440,40 +440,43 @@ function updateCommonAttrs(
defaultZlevel: number
) {
if (!el.isGroup) {
- const elDisplayable = el as Displayable;
- elDisplayable.cursor = zrUtil.retrieve2(
- (elOption as GraphicComponentDisplayableOption).cursor,
- Displayable.prototype.cursor
- );
- // We should not support configure z and zlevel in the element level.
- // But seems we didn't limit it previously. So here still use it to
avoid breaking.
- elDisplayable.z = zrUtil.retrieve2(
- (elOption as GraphicComponentDisplayableOption).z,
- defaultZ || 0
- );
- elDisplayable.zlevel = zrUtil.retrieve2(
- (elOption as GraphicComponentDisplayableOption).zlevel,
- defaultZlevel || 0
- );
- // z2 must not be null/undefined, otherwise sort error may occur.
- const optZ2 = (elOption as GraphicComponentDisplayableOption).z2;
- optZ2 != null && (elDisplayable.z2 = optZ2 || 0);
+ zrUtil.each([
+ ['cursor', Displayable.prototype.cursor],
+ // We should not support configure z and zlevel in the element
level.
+ // But seems we didn't limit it previously. So here still use it
to avoid breaking.
+ ['zlevel', defaultZlevel || 0],
+ ['z', defaultZ || 0],
+ // z2 must not be null/undefined, otherwise sort error may occur.
+ ['z2', 0]
+ ], item => {
+ const prop = item[0] as any;
+ if (zrUtil.hasOwn(elOption, prop)) {
+ (el as any)[prop] = zrUtil.retrieve2(
+ (elOption as any)[prop],
+ item[1]
+ );
+ }
+ else if ((el as any)[prop] == null) {
+ (el as any)[prop] = item[1];
+ }
+ });
}
zrUtil.each(zrUtil.keys(elOption), key => {
- const val = (elOption as any)[key];
// Assign event handlers.
// PENDING: should enumerate all event names or use pattern matching?
- if (key.indexOf('on') === 0 && zrUtil.isFunction(val)) {
- (el as any)[key] = val;
+ if (key.indexOf('on') === 0) {
+ const val = (elOption as any)[key];
+ (el as any)[key] = zrUtil.isFunction(val) ? val : null;
}
});
- el.draggable = elOption.draggable;
+ if (zrUtil.hasOwn(elOption, 'draggable')) {
+ el.draggable = elOption.draggable;
+ }
// Other attributes
elOption.name != null && (el.name = elOption.name);
elOption.id != null && ((el as any).id = elOption.id);
-
}
// Remove unnecessary props to avoid potential problems.
function getCleanedElOption(
diff --git a/test/graphic-cases.html b/test/graphic-cases.html
index a9eddf3c7..80de00fda 100644
--- a/test/graphic-cases.html
+++ b/test/graphic-cases.html
@@ -41,7 +41,7 @@ under the License.
<div id="main1"></div>
<div id="main2"></div>
<div id="main3"></div>
-
+ <div id="main4"></div>
<script>
@@ -218,10 +218,10 @@ under the License.
});
});
- </script>
+ </script>
<script>
- require(['echarts'], function (echarts) {
+ require(['echarts'], function (echarts) {
var option = {
graphic:{
elements: [{
@@ -273,8 +273,107 @@ under the License.
],
option: option
});
+ var logBox = document.createElement('p');
+ logBox.style.cssText = 'position:absolute;bottom:5px;left:5px';
+ chart.getDom().appendChild(logBox);
+ var observer = new MutationObserver(function (mutations) {
+ mutations.forEach(function (mutationRecord) {
+ const cursor = mutationRecord.target.style.cursor;
+ console.log('cursor', cursor);
+ logBox.innerText = 'cursor: ' + cursor;
+ });
+ });
+ observer.observe(chart.getDom().firstChild, {
+ attributes: true,
+ attributeFilter: ['style']
+ });
});
</script>
+
+ <script>
+ require(['echarts'], function (echarts) {
+ var option = {
+ graphic:{
+ elements: [{
+ type: 'group',
+ x: 200,
+ y: 200,
+ draggable: true,
+ children: [{
+ type: 'rect',
+ left: 'center',
+ top: 'middle',
+ shape: {
+ width: 240,
+ height: 90
+ },
+ style: {
+ fill: 'gray'
+ },
+ cursor: 'move',
+ z: 100,
+ onclick: function (e) {
+ console.log(e.type);
+ }
+ }]
+ }]
+ }
+ };
+ var chart = testHelper.create(echarts, 'main4', {
+ title: [
+ '1. Click the **Update(empty)** button, the graphic
element should be **still draggable** and output log when it is clicked',
+ '2. Click the **Update** button, the graphic element
should **NOT** be **draggable** and no response when it is clicked',
+ '3. See also the example on
https://echarts.apache.org/examples/editor.html?c=line-draggable',
+ ],
+ buttons: [{
+ text: 'Update(empty)',
+ onclick() {
+ chart.setOption({
+ graphic: {
+ // no option
+ }
+ });
+ }
+ }, {
+ text: 'Update',
+ onclick() {
+ chart.setOption({
+ graphic: {
+ elements: [{
+ // draggable: undefined,
+ // draggable: null,
+ draggable: false,
+ children: [{
+ cursor: undefined,
+ onclick: 'asdfghj',
+ // onclick: null
+ style: {
+ fill: 'red'
+ },
+ }]
+ }]
+ }
+ });
+ }
+ }],
+ option: option
+ });
+ var logBox = document.createElement('p');
+ logBox.style.cssText = 'position:absolute;bottom:5px;left:5px';
+ chart.getDom().appendChild(logBox);
+ var observer = new MutationObserver(function (mutations) {
+ mutations.forEach(function (mutationRecord) {
+ const cursor = mutationRecord.target.style.cursor;
+ console.log('cursor', cursor);
+ logBox.innerText = 'cursor: ' + cursor;
+ });
+ });
+ observer.observe(chart.getDom().firstChild, {
+ attributes: true,
+ attributeFilter: ['style']
+ });
+ });
+ </script>
</body>
</html>
diff --git a/test/runTest/actions/__meta__.json
b/test/runTest/actions/__meta__.json
index 380a5f1da..af7cc3f97 100644
--- a/test/runTest/actions/__meta__.json
+++ b/test/runTest/actions/__meta__.json
@@ -100,6 +100,7 @@
"graph-simple": 2,
"graphic-animation": 1,
"graphic-animation-wave": 1,
+ "graphic-cases": 2,
"graphic-draggable": 1,
"graphic-transition": 3,
"heatmap": 1,
diff --git a/test/runTest/actions/graphic-cases.json
b/test/runTest/actions/graphic-cases.json
new file mode 100644
index 000000000..7eb23cfe1
--- /dev/null
+++ b/test/runTest/actions/graphic-cases.json
@@ -0,0 +1 @@
+[{"name":"Action
1","ops":[{"type":"mousedown","time":420,"x":166,"y":394},{"type":"mousemove","time":574,"x":171,"y":395},{"type":"mousemove","time":774,"x":236,"y":345},{"type":"mousemove","time":979,"x":252,"y":314},{"type":"mouseup","time":1112,"x":252,"y":314},{"time":1113,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":1141,"x":250,"y":312},{"type":"mousemove","time":1341,"x":72,"y":231},{"type":"mousemove","time":1541,"x":48,"y":182},{"type":"mousedown","time":171
[...]
\ No newline at end of file
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org
