feat: add intended tree case (#5896)

* fix: fix graph api type * refactor: exports g6 built-in iconfont * fix: fix animate x/y/z not effect * feat: add intended tree case
antvis · Jun 20, 2024 · 966655b · 966655b
1 parent 0f6260b
commit 966655b
Show file tree

Hide file tree

Showing 22 changed files with 1,156 additions and 48 deletions.
diff --git a/packages/g6/__tests__/demos/case-indented-tree.ts b/packages/g6/__tests__/demos/case-indented-tree.ts
diff --git a/packages/g6/__tests__/demos/index.ts b/packages/g6/__tests__/demos/index.ts
@@ -17,6 +17,7 @@ export { behaviorHoverActivate } from './behavior-hover-activate';
 export { behaviorLassoSelect } from './behavior-lasso-select';
 export { behaviorScrollCanvas } from './behavior-scroll-canvas';
 export { behaviorZoomCanvas } from './behavior-zoom-canvas';
+export { caseIndentedTree } from './case-indented-tree';
 export { elementCombo } from './combo';
 export { commonGraph } from './common-graph';
 export { controllerViewport } from './controller-viewport';

diff --git a/packages/g6/__tests__/demos/plugin-toolbar-iconfont.ts b/packages/g6/__tests__/demos/plugin-toolbar-iconfont.ts
@@ -1,10 +1,10 @@
-import { Graph } from '@/src';
+import { Graph, iconfont } from '@/src';
 import data from '@@/dataset/cluster.json';
 
 export const pluginToolbarIconfont: TestCase = async (context) => {
   // Use iconfont for toolbar items.
   const iconFont = document.createElement('script');
-  iconFont.src = '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js';
+  iconFont.src = iconfont.js;
   document.head.appendChild(iconFont);
 
   const graph = new Graph({

diff --git a/packages/g6/__tests__/index.html b/packages/g6/__tests__/index.html
@@ -4,8 +4,13 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>G6: Preview</title>
+    <script type="module">
+      import { iconfont } from '@/src';
+      const style = document.createElement('style');
+      style.innerHTML = `@import url('${iconfont.css}');`;
+      document.head.appendChild(style);
+    </script>
     <style>
-      @import url('//at.alicdn.com/t/a/font_470089_tmp5emp4d9.css');
       body {
         margin: 0;
         font-size: 14px;

diff --git a/packages/g6/src/elements/shapes/base-shape.ts b/packages/g6/src/elements/shapes/base-shape.ts
@@ -141,6 +141,16 @@ export abstract class BaseShape<StyleProps extends BaseShapeStyleProps> extends
     if (keyframes.length === 0) return null;
     const animationMap: IAnimation[] = [];
 
+    // 如果 keyframes 中存在 x/y/z ，替换为 transform
+    // if x/y/z exists in keyframes, replace them with transform
+    if (keyframes[0].x !== undefined || keyframes[0].y !== undefined || keyframes[0].z !== undefined) {
+      const { x: _x = 0, y: _y = 0, z: _z = 0 } = this.attributes as Record<string, any>;
+      keyframes.forEach((keyframe) => {
+        const { x = _x, y = _y, z = _z } = keyframe;
+        Object.assign(keyframe, { transform: replaceTranslateInTransform(+x, +y, +z) });
+      });
+    }
+
     const result = super.animate(keyframes, options);
     if (result) animationMap.push(result);
 

diff --git a/packages/g6/src/index.ts b/packages/g6/src/index.ts
@@ -1,5 +1,9 @@
 import './preset';
 
-export const version = '5.0.1';
-
 export * from './exports';
+
+export const version = '5.0.1';
+export const iconfont = {
+  css: '//at.alicdn.com/t/a/font_470089_8hnbbf8n4u8.css',
+  js: '//at.alicdn.com/t/a/font_470089_8hnbbf8n4u8.js',
+};
diff --git a/packages/g6/src/runtime/graph.ts b/packages/g6/src/runtime/graph.ts
@@ -1282,7 +1282,7 @@ export class Graph extends EventEmitter {
    * @returns <zh/> 元素渲染样式 | <en/> element rendering style
    * @apiCategory element
    */
-  public getElementRenderStyle(id: ID) {
+  public getElementRenderStyle(id: ID): Record<string, any> {
     return omit(this.context.element!.getElement(id)!.attributes, ['context']);
   }
 

diff --git a/packages/site/examples/element/edge/demo/cubic.js b/packages/site/examples/element/edge/demo/cubic.js
@@ -1,7 +1,7 @@
-import { Graph } from '@antv/g6';
+import { Graph, iconfont } from '@antv/g6';
 
 const style = document.createElement('style');
-style.innerHTML = "@import url('//at.alicdn.com/t/a/font_470089_tmp5emp4d9.css');";
+style.innerHTML = `@import url('${iconfont.css}');`;
 document.head.appendChild(style);
 
 fetch('https://assets.antv.antgroup.com/g6/element-edges.json')

diff --git a/packages/site/examples/element/edge/demo/line.js b/packages/site/examples/element/edge/demo/line.js
@@ -1,7 +1,7 @@
-import { Graph } from '@antv/g6';
+import { Graph, iconfont } from '@antv/g6';
 
 const style = document.createElement('style');
-style.innerHTML = "@import url('//at.alicdn.com/t/a/font_470089_tmp5emp4d9.css');";
+style.innerHTML = `@import url('${iconfont.css}');`;
 document.head.appendChild(style);
 
 fetch('https://assets.antv.antgroup.com/g6/element-edges.json')

diff --git a/packages/site/examples/element/edge/demo/quadratic.js b/packages/site/examples/element/edge/demo/quadratic.js
@@ -1,7 +1,7 @@
-import { Graph } from '@antv/g6';
+import { Graph, iconfont } from '@antv/g6';
 
 const style = document.createElement('style');
-style.innerHTML = "@import url('//at.alicdn.com/t/a/font_470089_tmp5emp4d9.css');";
+style.innerHTML = `@import url('${iconfont.css}');`;
 document.head.appendChild(style);
 
 fetch('https://assets.antv.antgroup.com/g6/element-edges.json')

diff --git a/packages/site/examples/element/node/demo/circle.js b/packages/site/examples/element/node/demo/circle.js
@@ -1,7 +1,7 @@
-import { Graph } from '@antv/g6';
+import { Graph, iconfont } from '@antv/g6';
 
 const style = document.createElement('style');
-style.innerHTML = "@import url('//at.alicdn.com/t/a/font_470089_tmp5emp4d9.css');";
+style.innerHTML = `@import url('${iconfont.css}');`;
 document.head.appendChild(style);
 
 fetch('https://assets.antv.antgroup.com/g6/element-nodes.json')

diff --git a/packages/site/examples/element/node/demo/diamond.js b/packages/site/examples/element/node/demo/diamond.js
@@ -1,7 +1,7 @@
-import { Graph } from '@antv/g6';
+import { Graph, iconfont } from '@antv/g6';
 
 const style = document.createElement('style');
-style.innerHTML = "@import url('//at.alicdn.com/t/a/font_470089_tmp5emp4d9.css');";
+style.innerHTML = `@import url('${iconfont.css}');`;
 document.head.appendChild(style);
 
 fetch('https://assets.antv.antgroup.com/g6/element-nodes.json')
@@ -17,8 +17,8 @@ fetch('https://assets.antv.antgroup.com/g6/element-nodes.json')
           labelText: (d) => d.id,
           iconWidth: 20,
           iconHeight: 20,
-                iconFontFamily: 'iconfont',
-        iconText: '\ue602',
+          iconFontFamily: 'iconfont',
+          iconText: '\ue602',
         },
       },
       layout: {

diff --git a/packages/site/examples/element/node/demo/donut.js b/packages/site/examples/element/node/demo/donut.js
@@ -1,7 +1,7 @@
-import { Graph } from '@antv/g6';
+import { Graph, iconfont } from '@antv/g6';
 
 const style = document.createElement('style');
-style.innerHTML = "@import url('//at.alicdn.com/t/a/font_470089_tmp5emp4d9.css');";
+style.innerHTML = `@import url('${iconfont.css}');`;
 document.head.appendChild(style);
 
 fetch('https://assets.antv.antgroup.com/g6/element-nodes.json')
@@ -40,8 +40,8 @@ fetch('https://assets.antv.antgroup.com/g6/element-nodes.json')
           },
           labelText: (d) => d.id,
 
-                iconFontFamily: 'iconfont',
-        iconText: '\ue602',
+          iconFontFamily: 'iconfont',
+          iconText: '\ue602',
         },
       },
       layout: {

diff --git a/packages/site/examples/element/node/demo/ellipse.js b/packages/site/examples/element/node/demo/ellipse.js
@@ -1,7 +1,7 @@
-import { Graph } from '@antv/g6';
+import { Graph, iconfont } from '@antv/g6';
 
 const style = document.createElement('style');
-style.innerHTML = "@import url('//at.alicdn.com/t/a/font_470089_tmp5emp4d9.css');";
+style.innerHTML = `@import url('${iconfont.css}');`;
 document.head.appendChild(style);
 
 fetch('https://assets.antv.antgroup.com/g6/element-nodes.json')
@@ -16,8 +16,8 @@ fetch('https://assets.antv.antgroup.com/g6/element-nodes.json')
           size: [45, 35],
           labelText: (d) => d.id,
 
-                iconFontFamily: 'iconfont',
-        iconText: '\ue602',
+          iconFontFamily: 'iconfont',
+          iconText: '\ue602',
         },
       },
       layout: {

diff --git a/packages/site/examples/element/node/demo/hexagon.js b/packages/site/examples/element/node/demo/hexagon.js
@@ -1,7 +1,7 @@
-import { Graph } from '@antv/g6';
+import { Graph, iconfont } from '@antv/g6';
 
 const style = document.createElement('style');
-style.innerHTML = "@import url('//at.alicdn.com/t/a/font_470089_tmp5emp4d9.css');";
+style.innerHTML = `@import url('${iconfont.css}');`;
 document.head.appendChild(style);
 
 fetch('https://assets.antv.antgroup.com/g6/element-nodes.json')
@@ -15,8 +15,8 @@ fetch('https://assets.antv.antgroup.com/g6/element-nodes.json')
         style: {
           size: 40,
           labelText: (d) => d.id,
-                iconFontFamily: 'iconfont',
-        iconText: '\ue602',
+          iconFontFamily: 'iconfont',
+          iconText: '\ue602',
         },
       },
       layout: {

diff --git a/packages/site/examples/element/node/demo/image.js b/packages/site/examples/element/node/demo/image.js
@@ -1,7 +1,7 @@
-import { Graph } from '@antv/g6';
+import { Graph, iconfont } from '@antv/g6';
 
 const style = document.createElement('style');
-style.innerHTML = "@import url('//at.alicdn.com/t/a/font_470089_tmp5emp4d9.css');";
+style.innerHTML = `@import url('${iconfont.css}');`;
 document.head.appendChild(style);
 
 fetch('https://assets.antv.antgroup.com/g6/element-nodes.json')

diff --git a/packages/site/examples/element/node/demo/rect.js b/packages/site/examples/element/node/demo/rect.js
@@ -1,7 +1,7 @@
-import { Graph } from '@antv/g6';
+import { Graph, iconfont } from '@antv/g6';
 
 const style = document.createElement('style');
-style.innerHTML = "@import url('//at.alicdn.com/t/a/font_470089_tmp5emp4d9.css');";
+style.innerHTML = `@import url('${iconfont.css}');`;
 document.head.appendChild(style);
 
 fetch('https://assets.antv.antgroup.com/g6/element-nodes.json')
@@ -16,8 +16,8 @@ fetch('https://assets.antv.antgroup.com/g6/element-nodes.json')
           size: 40,
           labelText: (d) => d.id,
 
-                iconFontFamily: 'iconfont',
-        iconText: '\ue602',
+          iconFontFamily: 'iconfont',
+          iconText: '\ue602',
         },
       },
       layout: {

diff --git a/packages/site/examples/element/node/demo/rounded-rect.js b/packages/site/examples/element/node/demo/rounded-rect.js
@@ -1,7 +1,7 @@
-import { Graph } from '@antv/g6';
+import { Graph, iconfont } from '@antv/g6';
 
 const style = document.createElement('style');
-style.innerHTML = "@import url('//at.alicdn.com/t/a/font_470089_tmp5emp4d9.css');";
+style.innerHTML = `@import url('${iconfont.css}');`;
 document.head.appendChild(style);
 
 fetch('https://assets.antv.antgroup.com/g6/element-nodes.json')
@@ -18,8 +18,8 @@ fetch('https://assets.antv.antgroup.com/g6/element-nodes.json')
           labelText: (d) => d.id,
           iconWidth: 20,
           iconHeight: 20,
-                iconFontFamily: 'iconfont',
-        iconText: '\ue602',
+          iconFontFamily: 'iconfont',
+          iconText: '\ue602',
         },
       },
       layout: {

diff --git a/packages/site/examples/element/node/demo/star.js b/packages/site/examples/element/node/demo/star.js
@@ -1,7 +1,7 @@
-import { Graph } from '@antv/g6';
+import { Graph, iconfont } from '@antv/g6';
 
 const style = document.createElement('style');
-style.innerHTML = "@import url('//at.alicdn.com/t/a/font_470089_tmp5emp4d9.css');";
+style.innerHTML = `@import url('${iconfont.css}');`;
 document.head.appendChild(style);
 
 fetch('https://assets.antv.antgroup.com/g6/element-nodes.json')
@@ -15,8 +15,8 @@ fetch('https://assets.antv.antgroup.com/g6/element-nodes.json')
         style: {
           size: 40,
           labelText: (d) => d.id,
-                iconFontFamily: 'iconfont',
-        iconText: '\ue602',
+          iconFontFamily: 'iconfont',
+          iconText: '\ue602',
         },
       },
       layout: {

diff --git a/packages/site/examples/element/node/demo/triangle.js b/packages/site/examples/element/node/demo/triangle.js
@@ -1,7 +1,7 @@
-import { Graph } from '@antv/g6';
+import { Graph, iconfont } from '@antv/g6';
 
 const style = document.createElement('style');
-style.innerHTML = "@import url('//at.alicdn.com/t/a/font_470089_tmp5emp4d9.css');";
+style.innerHTML = `@import url('${iconfont.css}');`;
 document.head.appendChild(style);
 
 fetch('https://assets.antv.antgroup.com/g6/element-nodes.json')
@@ -16,8 +16,8 @@ fetch('https://assets.antv.antgroup.com/g6/element-nodes.json')
           size: 40,
           direction: (d) => (d.id === 'ports' ? 'left' : undefined),
           labelText: (d) => d.id,
-                iconFontFamily: 'iconfont',
-        iconText: '\ue602',
+          iconFontFamily: 'iconfont',
+          iconText: '\ue602',
           ports: (d) =>
             d.id === 'ports' ? [{ placement: 'left' }, { placement: 'top' }, { placement: 'bottom' }] : [],
         },