Merge pull request #555 from VisActor/fix/animation-of-wordcloud

Fix/animation of wordcloud
VisActor · Sep 26, 2024 · 894f506 · 894f506
2 parents 423678c + be2e4f8
commit 894f506
Show file tree

Hide file tree

Showing 9 changed files with 119 additions and 75 deletions.
diff --git a/common/changes/@visactor/vgrammar-core/develop_2024-09-24-06-51.json b/common/changes/@visactor/vgrammar-core/develop_2024-09-24-06-51.json
@@ -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"
+}
diff --git a/docs/site/assets/examples/en/animate/arrange-animate.md b/docs/site/assets/examples/en/animate/arrange-animate.md
@@ -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');
@@ -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;

diff --git a/docs/site/assets/examples/en/animate/timeline.md b/docs/site/assets/examples/en/animate/timeline.md
@@ -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]);
@@ -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]);

diff --git a/docs/site/assets/examples/zh/animate/arrange-animate.md b/docs/site/assets/examples/zh/animate/arrange-animate.md
@@ -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');
@@ -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;

diff --git a/docs/site/assets/examples/zh/animate/loop-animate.md b/docs/site/assets/examples/zh/animate/loop-animate.md
@@ -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;

diff --git a/docs/site/assets/examples/zh/animate/timeline.md b/docs/site/assets/examples/zh/animate/timeline.md
@@ -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]);
@@ -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]);

diff --git a/docs/site/vite.config.js b/docs/site/vite.config.js
@@ -27,7 +27,7 @@ export default {
             `../../packages/${pkgName.replace('@visactor/vgrammar', 'vgrammar')}/src/index.ts`
           )
         };
-      }, {})
+      }, {}),
     }
   },
   plugins: [react()]

diff --git a/packages/vgrammar-core/src/view/View.ts b/packages/vgrammar-core/src/view/View.ts
@@ -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();
@@ -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);
-Original file 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 @@