Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix/animation of wordcloud #555

Merged
merged 6 commits into from
Sep 26, 2024
Merged

Fix/animation of wordcloud #555

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
58e9e60
fix: fix animation state of wordcloud
xile611 Sep 24, 2024
11fa2ef
docs: update changlog of rush
xile611 Sep 24, 2024
88a39a8
fix: fix animation of word-cloud mark
xile611 Sep 24, 2024
0b821e7
fix: fix animation of wordcloud when remake vchart
xile611 Sep 24, 2024
452f9b4
docs: update demos of animation
xile611 Sep 24, 2024
be2e4f8
chore: reset vite.config.js
xile611 Sep 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions common/changes/@visactor/vgrammar-core/develop_2024-09-24-06-51.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"changes": [
{
"comment": "fix: fix animation state of wordcloud\n\n",
"type": "none",
"packageName": "@visactor/vgrammar-core"
}
],
"packageName": "@visactor/vgrammar-core",
"email": "dingling112@gmail.com"
}
10 changes: 7 additions & 3 deletions docs/site/assets/examples/en/animate/arrange-animate.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -365,9 +365,8 @@ const vGrammarView = new View({
container: document.getElementById(CONTAINER_ID),
hover: true
});
vGrammarView.parseSpec(spec);

vGrammarView.run().then(() => {
const handleAfterRun = () => {
const title = vGrammarView.getMarkById('title');
const leftAxis = vGrammarView.getMarkById('leftAxis');
const bottomAxis = vGrammarView.getMarkById('bottomAxis');
Expand Down Expand Up @@ -404,7 +403,12 @@ vGrammarView.run().then(() => {
options: { overall: viewBox.getValue().y2, orient: 'negative' }
})
.after(animation2);
});
};
vGrammarView.parseSpec(spec);

vGrammarView.run();

handleAfterRun();

// 只为了方便控制太调试用，不要拷贝
window.vGrammarView = vGrammarView;
Expand Down
4 changes: 2 additions & 2 deletions docs/site/assets/examples/en/animate/timeline.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -335,7 +335,7 @@ const spec = {
return 0;
},
to: (datum, element, params) => {
const xScale = params.view.getScaleById('xscale').output();
const xScale = params.xscale;
const bandWidth = xScale.bandwidth();
const range = xScale.range();
return -Math.abs(range[1] - range[0]);
Expand Down Expand Up @@ -377,7 +377,7 @@ const spec = {
channel: {
dx: {
from: (datum, element, params) => {
const xScale = params.view.getScaleById('xscale').output();
const xScale = params.xscale;
const bandWidth = xScale.bandwidth();
const range = xScale.range();
return Math.abs(range[1] - range[0]);
Expand Down
10 changes: 7 additions & 3 deletions docs/site/assets/examples/zh/animate/arrange-animate.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -365,9 +365,8 @@ const vGrammarView = new View({
container: document.getElementById(CONTAINER_ID),
hover: true
});
vGrammarView.parseSpec(spec);

vGrammarView.run().then(() => {
const handleAfterRun = () => {
const title = vGrammarView.getMarkById('title');
const leftAxis = vGrammarView.getMarkById('leftAxis');
const bottomAxis = vGrammarView.getMarkById('bottomAxis');
Expand Down Expand Up @@ -404,7 +403,12 @@ vGrammarView.run().then(() => {
options: { overall: viewBox.getValue().y2, orient: 'negative' }
})
.after(animation2);
});
};
vGrammarView.parseSpec(spec);

vGrammarView.run();

handleAfterRun();

// 只为了方便控制太调试用，不要拷贝
window.vGrammarView = vGrammarView;
Expand Down
6 changes: 3 additions & 3 deletions docs/site/assets/examples/zh/animate/loop-animate.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -249,9 +249,9 @@ const vGrammarView = new View({
});
vGrammarView.parseSpec(spec);

vGrammarView.run().then(() => {
vGrammarView.getMarkById('bar').animate.runAnimationByState('loop');
});
vGrammarView.run();

vGrammarView.getMarkById('bar').animate.runAnimationByState('loop');

// 只为了方便控制太调试用，不要拷贝
window.vGrammarView = vGrammarView;
Expand Down
4 changes: 2 additions & 2 deletions docs/site/assets/examples/zh/animate/timeline.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -335,7 +335,7 @@ const spec = {
return 0;
},
to: (datum, element, params) => {
const xScale = params.view.getScaleById('xscale').output();
const xScale = params.xscale;
const bandWidth = xScale.bandwidth();
const range = xScale.range();
return -Math.abs(range[1] - range[0]);
Expand Down Expand Up @@ -377,7 +377,7 @@ const spec = {
channel: {
dx: {
from: (datum, element, params) => {
const xScale = params.view.getScaleById('xscale').output();
const xScale = params.xscale;
const bandWidth = xScale.bandwidth();
const range = xScale.range();
return Math.abs(range[1] - range[0]);
Expand Down
2 changes: 1 addition & 1 deletion docs/site/vite.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export default {
`../../packages/${pkgName.replace('@visactor/vgrammar', 'vgrammar')}/src/index.ts`
)
};
}, {})
}, {}),
}
},
plugins: [react()]
Expand Down
2 changes: 2 additions & 0 deletions packages/vgrammar-core/src/view/View.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -806,6 +806,7 @@ export default class View extends EventEmitter implements IView {
if (!this._progressiveMarks && this.animate) {
this.animate.animate();
} else {
// 清理没有动画的离场元素
this.traverseMarkTree(
mark => {
mark.cleanExitElements();
Expand All @@ -816,6 +817,7 @@ export default class View extends EventEmitter implements IView {
}
// 绘图 =>
this.renderer.render(immediately);
//
this.handleRenderEnd();
}
this.emit(HOOK_EVENT.AFTER_DO_RENDER);
Expand Down
Loading
Loading