fix: fix demos (#5754)

* fix: fix unexpected update style * docs(demos): update demos * fix(runtime): fix attributes assign
antvis · May 20, 2024 · 716cb92 · 716cb92
1 parent 49e51bb
commit 716cb92
Show file tree

Hide file tree

Showing 23 changed files with 8 additions and 24 deletions.
diff --git a/packages/g6/src/runtime/element.ts b/packages/g6/src/runtime/element.ts
@@ -385,7 +385,7 @@ export class ElementController {
         elementType,
         stage,
         originalStyle: { ...element.attributes },
-        modifiedStyle: style,
+        modifiedStyle: { ...style },
       },
       {
         after: () => {
@@ -440,7 +440,7 @@ export class ElementController {
         elementType,
         stage: exactStage,
         originalStyle: { ...element.attributes },
-        modifiedStyle: style,
+        modifiedStyle: { ...element.attributes, ...style },
       },
       {
         before: () => {
@@ -490,8 +490,8 @@ export class ElementController {
         element,
         elementType,
         stage,
-        originalStyle: element.attributes,
-        modifiedStyle: element.attributes,
+        originalStyle: { ...element.attributes },
+        modifiedStyle: { ...element.attributes },
       },
       {
         after: () => {

diff --git a/packages/site/examples/animation/basic/demo/update.js b/packages/site/examples/animation/basic/demo/update.js
@@ -16,7 +16,7 @@ const graph = new Graph({
   },
   edge: {
     animation: {
-      update: [{ fields: ['stroke', 'path', 'lineWidth'], shape: 'key' }],
+      update: [{ fields: ['sourceNode', 'targetNode'] }, { fields: ['stroke', 'lineWidth'], shape: 'key' }],
     },
   },
 });

diff --git a/packages/site/examples/animation/viewport/demo/rotate.js b/packages/site/examples/animation/viewport/demo/rotate.js
@@ -5,7 +5,6 @@ fetch('https://assets.antv.antgroup.com/g6/force.json')
   .then((data) => {
     const graph = new Graph({
       container: 'container',
-      animation: true,
       data,
       layout: {
         type: 'force',

diff --git a/packages/site/examples/animation/viewport/demo/translate.js b/packages/site/examples/animation/viewport/demo/translate.js
@@ -5,7 +5,6 @@ fetch('https://assets.antv.antgroup.com/g6/force.json')
   .then((data) => {
     const graph = new Graph({
       container: 'container',
-      animation: true,
       data,
       layout: {
         type: 'force',

diff --git a/packages/site/examples/animation/viewport/demo/zoom.js b/packages/site/examples/animation/viewport/demo/zoom.js
@@ -5,7 +5,6 @@ fetch('https://assets.antv.antgroup.com/g6/force.json')
   .then((data) => {
     const graph = new Graph({
       container: 'container',
-      animation: true,
       data,
       layout: {
         type: 'force',

diff --git a/packages/site/examples/behavior/focus/demo/basic.js b/packages/site/examples/behavior/focus/demo/basic.js
@@ -12,7 +12,6 @@ const data = {
 
 const graph = new Graph({
   container: 'container',
-  animation: true,
   node: {
     style: { labelText: (d) => d.id },
   },

diff --git a/packages/site/examples/element/custom-combo/demo/extra-button.js b/packages/site/examples/element/custom-combo/demo/extra-button.js
@@ -35,7 +35,7 @@ class CircleComboWithExtraButton extends CircleCombo {
     const [, height] = this.getKeySize(attributes);
     const btnR = 8;
     const y = height / 2 + btnR;
-    const d = collapsed ? expand(0, 0, btnR) : collapse(0, 0, btnR);
+    const d = collapsed ? expand(0, y, btnR) : collapse(0, y, btnR);
 
     const hitArea = this.upsert('hit-area', Circle, { cy: y, r: 10, fill: '#fff', cursor: 'pointer' }, this);
     this.upsert('button', Path, { stroke: '#3d81f7', d, cursor: 'pointer' }, hitArea);

diff --git a/packages/site/examples/element/node/demo/donut.js b/packages/site/examples/element/node/demo/donut.js
@@ -5,6 +5,7 @@ fetch('https://assets.antv.antgroup.com/g6/element-nodes.json')
   .then((data) => {
     const graph = new Graph({
       container: 'container',
+      animation: false,
       data,
       node: {
         type: 'donut',

diff --git a/packages/site/examples/layout/dagre/demo/antv-dagre-combo.js b/packages/site/examples/layout/dagre/demo/antv-dagre-combo.js
@@ -6,7 +6,6 @@ fetch('https://assets.antv.antgroup.com/g6/dagre-combo.json')
     const graph = new Graph({
       container: 'container',
       autoFit: 'view',
-      animation: true,
       data,
       node: {
         type: 'rect',

diff --git a/packages/site/examples/layout/dendrogram/demo/vertical.js b/packages/site/examples/layout/dendrogram/demo/vertical.js
@@ -14,6 +14,7 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.j
             labelText: data.id,
             labelWordWrap: true,
             labelWordWrapWidth: 150,
+            labelDx: isLeaf ? 20 : 0,
             labelDy: isLeaf ? 0 : 20,
             labelTextAlign: isLeaf ? 'start' : 'center',
             labelTextBaseline: 'middle',

diff --git a/packages/site/examples/layout/force-directed/demo/3d-force.js b/packages/site/examples/layout/force-directed/demo/3d-force.js
@@ -13,7 +13,6 @@ fetch('https://assets.antv.antgroup.com/g6/d3-force-3d.json')
   .then((data) => {
     const graph = new Graph({
       container: 'container',
-      animation: true,
       renderer,
       data,
       layout: {

diff --git a/packages/site/examples/layout/force-directed/demo/collision.js b/packages/site/examples/layout/force-directed/demo/collision.js
@@ -50,7 +50,6 @@ const width = container.scrollWidth;
 
 const graph = new Graph({
   container,
-  animation: true,
   data: getData(width),
   layout: {
     type: 'd3force',

diff --git a/packages/site/examples/layout/force-directed/demo/d3-force.js b/packages/site/examples/layout/force-directed/demo/d3-force.js
@@ -5,7 +5,6 @@ fetch('https://assets.antv.antgroup.com/g6/cluster.json')
   .then((data) => {
     const graph = new Graph({
       container: 'container',
-      animation: true,
       data,
       node: {
         style: {

diff --git a/packages/site/examples/layout/force-directed/demo/force.js b/packages/site/examples/layout/force-directed/demo/force.js
@@ -19,7 +19,6 @@ fetch('https://assets.antv.antgroup.com/g6/cluster.json')
       layout: {
         type: 'force',
         linkDistance: 50,
-        animation: true,
         clustering: true,
         nodeClusterBy: 'cluster',
         clusterNodeStrength: 70,

diff --git a/packages/site/examples/layout/force-directed/demo/mesh.js b/packages/site/examples/layout/force-directed/demo/mesh.js
@@ -13,7 +13,6 @@ function getData(size = 10) {
 }
 
 const graph = new Graph({
-  animation: true,
   data: getData(),
   layout: {
     type: 'd3force',

diff --git a/packages/site/examples/layout/fruchterman/demo/basic.js b/packages/site/examples/layout/fruchterman/demo/basic.js
@@ -24,7 +24,6 @@ fetch('https://assets.antv.antgroup.com/g6/cluster.json')
           field: 'cluster',
         },
       },
-      animation: true,
       behaviors: ['drag-canvas', 'drag-element'],
     });
 

diff --git a/packages/site/examples/layout/fruchterman/demo/cluster.js b/packages/site/examples/layout/fruchterman/demo/cluster.js
@@ -31,7 +31,6 @@ fetch('https://assets.antv.antgroup.com/g6/cluster.json')
         },
       },
       behaviors: ['drag-canvas', 'drag-element'],
-      animation: true,
     });
 
     graph.render();

diff --git a/packages/site/examples/layout/grid/demo/basic.js b/packages/site/examples/layout/grid/demo/basic.js
@@ -23,7 +23,6 @@ fetch('https://assets.antv.antgroup.com/g6/cluster.json')
         },
       },
       behaviors: ['zoom-canvas', 'drag-canvas', 'drag-element', 'click-select'],
-      animation: true,
     });
 
     graph.render();

diff --git a/packages/site/examples/layout/mds/demo/basic.js b/packages/site/examples/layout/mds/demo/basic.js
@@ -25,7 +25,6 @@ fetch('https://assets.antv.antgroup.com/g6/cluster.json')
         },
       },
       behaviors: ['drag-element', 'drag-canvas', 'zoom-canvas'],
-      animation: true,
     });
 
     graph.render();

diff --git a/packages/site/examples/layout/mechanism/demo/change-data.js b/packages/site/examples/layout/mechanism/demo/change-data.js
@@ -20,7 +20,6 @@ const fetchData = async (type) => {
 fetchData('small').then((data) => {
   const graph = new Graph({
     container: 'container',
-    animation: true,
     behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element'],
     layout: {
       type: 'force',

diff --git a/packages/site/examples/layout/mechanism/demo/switch.js b/packages/site/examples/layout/mechanism/demo/switch.js
@@ -5,7 +5,6 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/relations.json')
   .then((data) => {
     const graph = new Graph({
       container: 'container',
-      animation: true,
       layout: {
         type: 'circular',
       },

diff --git a/packages/site/examples/plugin/bubble-sets/demo/basic.js b/packages/site/examples/plugin/bubble-sets/demo/basic.js
@@ -30,7 +30,6 @@ fetch('https://assets.antv.antgroup.com/g6/collection.json')
       layout: {
         type: 'force',
         preventOverlap: true,
-        animation: true,
         linkDistance: (d) => {
           if (d.source === 'node0' || d.target === 'node0') {
             return 200;

diff --git a/packages/site/examples/plugin/hull/demo/basic.js b/packages/site/examples/plugin/hull/demo/basic.js
@@ -30,7 +30,6 @@ fetch('https://assets.antv.antgroup.com/g6/collection.json')
       layout: {
         type: 'force',
         preventOverlap: true,
-        animation: true,
         linkDistance: (d) => {
           if (d.source === 'node0' || d.target === 'node0') {
             return 200;