You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by sh...@apache.org on 2021/11/19 07:59:17 UTC
[echarts] branch graphic-animation updated: feat(transition): fix transition in layout params
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch graphic-animation
in repository https://gitbox.apache.org/repos/asf/echarts.git
The following commit(s) were added to refs/heads/graphic-animation by this push:
new 37c4b1b feat(transition): fix transition in layout params
37c4b1b is described below
commit 37c4b1bb6fb24d47f01187e46232619a4b3c56b4
Author: pissang <bm...@gmail.com>
AuthorDate: Fri Nov 19 15:58:06 2021 +0800
feat(transition): fix transition in layout params
---
src/component/graphic/GraphicView.ts | 35 +++++++++++++++++++++++++++++++++--
src/util/layout.ts | 26 ++++++++++++++++++--------
test/graphic-transition.html | 24 ++++++++++++++++++++++--
3 files changed, 73 insertions(+), 12 deletions(-)
diff --git a/src/component/graphic/GraphicView.ts b/src/component/graphic/GraphicView.ts
index 9158cc0..50dbbf0 100644
--- a/src/component/graphic/GraphicView.ts
+++ b/src/component/graphic/GraphicView.ts
@@ -39,6 +39,7 @@ import {
GraphicComponentElementOption
} from './GraphicModel';
import { applyLeaveTransition, applyUpdateTransition } from '../../animation/customGraphicTransition';
+import { updateProps } from '../../animation/basicTrasition';
const nonShapeGraphicElements = {
// Reserved but not supported in graphic component.
@@ -57,6 +58,7 @@ export const inner = modelUtil.makeInner<{
heightOption: number;
width: number;
height: number;
+ isNew: boolean;
id: string;
}, Element>();
// ------------------------
@@ -162,6 +164,9 @@ export class GraphicComponentView extends ComponentView {
if (isInit) {
el = createEl(id, targetElParent, elOption.type, elMap);
}
+ else {
+ el && (inner(el).isNew = false);
+ }
if (el) {
applyUpdateTransition(
el,
@@ -231,6 +236,8 @@ export class GraphicComponentView extends ComponentView {
const apiWidth = api.getWidth();
const apiHeight = api.getHeight();
+ const xy = ['x', 'y'] as const;
+
// Top-down to calculate percentage width/height of group
for (let i = 0; i < elOptions.length; i++) {
const elOption = elOptions[i];
@@ -277,14 +284,37 @@ export class GraphicComponentView extends ComponentView {
height: parentElInner.height
};
+
+
// PENDING
// Currently, when `bounding: 'all'`, the union bounding rect of the group
// does not include the rect of [0, 0, group.width, group.height], which
// is probably weird for users. Should we make a break change for it?
- layoutUtil.positionElement(
+ const layoutPos = {} as Record<'x' | 'y', number>;
+ const layouted = layoutUtil.positionElement(
el, elOption, containerInfo, null,
- { hv: elOption.hv, boundingMode: elOption.bounding }
+ { hv: elOption.hv, boundingMode: elOption.bounding },
+ layoutPos
);
+
+ if (!inner(el).isNew && layouted) {
+ const transition = elOption.transition;
+ const animatePos = {} as Record<'x' | 'y', number>;
+ for (let k = 0; k < xy.length; k++) {
+ const key = xy[k];
+ const val = layoutPos[key];
+ if (transition && (transition === 'all' || zrUtil.indexOf(transition, key) >= 0)) {
+ animatePos[key] = val;
+ }
+ else {
+ el[key] = val;
+ }
+ }
+ updateProps(el, animatePos, graphicModel, 0);
+ }
+ else {
+ el.attr(layoutPos);
+ }
}
}
@@ -330,6 +360,7 @@ function createEl(
targetElParent.add(el);
elMap.set(id, el);
inner(el).id = id;
+ inner(el).isNew = true;
return el;
}
diff --git a/src/util/layout.ts b/src/util/layout.ts
index 7e4cddc..1c30e72 100644
--- a/src/util/layout.ts
+++ b/src/util/layout.ts
@@ -308,6 +308,8 @@ export function getLayoutRect(
*
* If be called repeatly with the same input el, the same result will be gotten.
*
+ * Return true if the layout happend.
+ *
* @param el Should have `getBoundingRect` method.
* @param positionInfo
* @param positionInfo.left
@@ -339,14 +341,19 @@ export function positionElement(
opt?: {
hv: [1 | 0 | boolean, 1 | 0 | boolean],
boundingMode: 'all' | 'raw'
- }
-) {
+ },
+ out?: { x?: number, y?: number }
+): boolean {
const h = !opt || !opt.hv || opt.hv[0];
const v = !opt || !opt.hv || opt.hv[1];
const boundingMode = opt && opt.boundingMode || 'all';
+ out = out || el;
+
+ out.x = el.x;
+ out.y = el.y;
if (!h && !v) {
- return;
+ return false;
}
let rect;
@@ -383,14 +390,17 @@ export function positionElement(
const dy = v ? layoutRect.y - rect.y : 0;
if (boundingMode === 'raw') {
- el.x = dx;
- el.y = dy;
+ out.x = dx;
+ out.y = dy;
}
else {
- el.x += dx;
- el.y += dy;
+ out.x += dx;
+ out.y += dy;
+ }
+ if (out === el) {
+ el.markRedraw();
}
- el.markRedraw();
+ return true;
}
/**
diff --git a/test/graphic-transition.html b/test/graphic-transition.html
index 9d80be3..cb45354 100644
--- a/test/graphic-transition.html
+++ b/test/graphic-transition.html
@@ -49,8 +49,8 @@ under the License.
graphic: {
elements: [{
type: 'circle',
- x: 100,
- y: 50,
+ left: 'left',
+ y: 100,
transition: ['x', 'y'],
shape: {
cx: 0,
@@ -76,6 +76,8 @@ under the License.
chart.setOption({
graphic: {
elements: [{
+ left: null,
+ top: null,
x: 200
}]
}
@@ -90,6 +92,8 @@ under the License.
chart.setOption({
graphic: {
elements: [{
+ left: null,
+ top: null,
y: 200
}]
}
@@ -103,6 +107,8 @@ under the License.
chart.setOption({
graphic: {
elements: [{
+ left: null,
+ top: null,
x: 100,
y: 50
}]
@@ -123,6 +129,20 @@ under the License.
}
})
}
+ },
+
+ {
+ text: 'Move to top right',
+ onclick() {
+ chart.setOption({
+ graphic: {
+ elements: [{
+ left: 'right',
+ top: 'top'
+ }]
+ }
+ })
+ }
}
]
});
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org