WIP: feat: 迁移并优化v1动画能力

examples/src/App.tsx

@@ -42,7 +42,11 @@ import { StencilExample } from './pages/stencil'
 import { TransformExample } from './pages/transform'
 import { UndoExample } from './pages/undo'
 import { TransitionExample } from './pages/animation/transition'
+import { AnimateExample } from './pages/animation/animate'
+import { SendTokenExample } from './pages/animation/sendToken'
 import { HistoryExample } from './pages/history'
+import { AnimateTransformExample } from './pages/animation/animateTransform'
+import { AnimateAlongPathExample } from './pages/animation/animateAlongPath'
 
 function App() {
   return (
@@ -96,6 +100,16 @@ function App() {
       <Route path="/transform" element={<TransformExample />} />
       <Route path="/undo" element={<UndoExample />} />
       <Route path="/animation/transition" element={<TransitionExample />} />
+      <Route path="/animation/animate" element={<AnimateExample />} />
+      <Route
+        path="/animation/animateTransform"
+        element={<AnimateTransformExample />}
+      />
+      <Route
+        path="/animation/animateAlongPath"
+        element={<AnimateAlongPathExample />}
+      />
+      <Route path="/animation/sendToken" Component={SendTokenExample} />
       <Route path="/history" element={<HistoryExample />} />
     </Routes>
   )

examples/src/pages/animation/animate.tsx

@@ -0,0 +1,79 @@
+import React from 'react'
+import { Graph } from '../../../../src'
+import '../index.less'
+
+export class AnimateExample extends React.Component {
+  private container!: HTMLDivElement
+
+  componentDidMount() {
+    const graph = new Graph({
+      container: this.container,
+      grid: true,
+    })
+
+    const rect1 = graph.addNode({
+      x: 80,
+      y: 40,
+      width: 100,
+      height: 40,
+    })
+
+    const rect2 = graph.addNode({
+      x: 460,
+      y: 40,
+      width: 100,
+      height: 40,
+      attrs: {
+        rect: {
+          fill: null,
+          class: 'rect-bg',
+        },
+      },
+    })
+    const view2 = graph.findView(rect2)
+
+    view2?.on('view:render', () => {
+      view2.animate('rect', {
+        attributeType: 'CSS',
+        attributeName: 'fill',
+        from: 'red',
+        to: 'green',
+        dur: '1s',
+        repeatCount: 'indefinite',
+      })
+    })
+
+    const edge = graph.addEdge({
+      source: rect1,
+      target: rect2,
+      attrs: {
+        line: {
+          strokeDasharray: 5,
+        },
+      },
+    })
+    const edgeView = graph.findViewByCell(edge)
+
+    edgeView?.on('view:render', () => {
+      edgeView.animate('path:nth-child(2)', {
+        attributeName: 'stroke-dashoffset',
+        from: 20,
+        to: 0,
+        dur: '1s',
+        repeatCount: 'indefinite',
+      })
+    })
+  }
+
+  refContainer = (container: HTMLDivElement) => {
+    this.container = container
+  }
+
+  render() {
+    return (
+      <div className="x6-graph-wrap" style={{ height: 500 }}>
+        <div ref={this.refContainer} className="x6-graph" />
+      </div>
+    )
+  }
+}

examples/src/pages/animation/animateAlongPath.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import { Graph } from '../../../../src'
+import '../index.less'
+
+export class AnimateAlongPathExample extends React.Component {
+  private container!: HTMLDivElement
+
+  componentDidMount() {
+    const graph = new Graph({
+      container: this.container,
+      grid: true,
+    })
+
+    const node = graph.addNode({
+      shape: 'path',
+      x: 420,
+      y: 40,
+      width: 100,
+      height: 100,
+      // https://www.svgrepo.com/svg/13653/like
+      path: 'M24.85,10.126c2.018-4.783,6.628-8.125,11.99-8.125c7.223,0,12.425,6.179,13.079,13.543c0,0,0.353,1.828-0.424,5.119c-1.058,4.482-3.545,8.464-6.898,11.503L24.85,48L7.402,32.165c-3.353-3.038-5.84-7.021-6.898-11.503c-0.777-3.291-0.424-5.119-0.424-5.119C0.734,8.179,5.936,2,13.159,2C18.522,2,22.832,5.343,24.85,10.126z',
+      attrs: {
+        body: {
+          fill: '#fff',
+          stroke: '#8f8f8f',
+          strokeWidth: 2,
+        },
+        text: {
+          refX: 0,
+          refY: 0,
+        },
+      },
+      label: 'path',
+    })
+
+    const view = graph.findViewByCell(node)
+
+    view?.on('view:render', () => {
+      view.animateAlongPath('text', {
+        dur: '3s',
+        repeatCount: 'indefinite',
+      })
+    })
+  }
+
+  refContainer = (container: HTMLDivElement) => {
+    this.container = container
+  }
+
+  render() {
+    return (
+      <div className="x6-graph-wrap" style={{ height: 500 }}>
+        <div ref={this.refContainer} className="x6-graph" />
+      </div>
+    )
+  }
+}

examples/src/pages/animation/animateTransform.tsx

@@ -0,0 +1,106 @@
+import React from 'react'
+import { Graph } from '../../../../src'
+import '../index.less'
+
+Graph.registerNode(
+  'custom-node',
+  {
+    width: 200,
+    height: 60,
+    attrs: {
+      body: {
+        stroke: '#5F95FF',
+        strokeWidth: 1,
+        fill: 'rgba(95,149,255,0.05)',
+        refWidth: 1,
+        refHeight: 1,
+      },
+      image: {
+        'xlink:href':
+          'https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png',
+        width: 16,
+        height: 16,
+        x: 12,
+        y: 12,
+      },
+      title: {
+        text: 'Node',
+        refX: 40,
+        refY: 14,
+        fill: 'rgba(0,0,0,0.85)',
+        fontSize: 12,
+        'text-anchor': 'start',
+      },
+      text: {
+        text: 'this is content text',
+        refX: 40,
+        refY: 38,
+        fontSize: 12,
+        fill: 'rgba(0,0,0,0.6)',
+        'text-anchor': 'start',
+      },
+    },
+    markup: [
+      {
+        tagName: 'rect',
+        selector: 'body',
+      },
+      {
+        tagName: 'image',
+        selector: 'image',
+      },
+      {
+        tagName: 'text',
+        selector: 'title',
+      },
+      {
+        tagName: 'text',
+        selector: 'text',
+      },
+    ],
+  },
+  true,
+)
+
+export class AnimateTransformExample extends React.Component {
+  private container!: HTMLDivElement
+
+  componentDidMount() {
+    const graph = new Graph({
+      container: this.container,
+      grid: true,
+    })
+
+    const rect1 = graph.addNode({
+      shape: 'custom-node',
+      x: 40,
+      y: 40,
+    })
+
+    const view1 = graph.findView(rect1)
+
+    view1?.on('view:render', () => {
+      view1.animateTransform('image', {
+        attributeType: 'XML',
+        attributeName: 'transform',
+        type: 'rotate',
+        from: '0 20 20',
+        to: '360 20 20',
+        dur: '3s',
+        repeatCount: 'indefinite',
+      })
+    })
+  }
+
+  refContainer = (container: HTMLDivElement) => {
+    this.container = container
+  }
+
+  render() {
+    return (
+      <div className="x6-graph-wrap" style={{ height: 500 }}>
+        <div ref={this.refContainer} className="x6-graph" />
+      </div>
+    )
+  }
+}

examples/src/pages/animation/sendToken.tsx

@@ -0,0 +1,56 @@
+import React from 'react'
+import { Graph, EdgeView, Vector } from '../../../../src'
+import '../index.less'
+
+export class SendTokenExample extends React.Component {
+  private container!: HTMLDivElement
+
+  componentDidMount() {
+    const graph = new Graph({
+      container: this.container,
+      grid: true,
+    })
+
+    const rect1 = graph.addNode({
+      x: 40,
+      y: 40,
+      width: 100,
+      height: 40,
+    })
+
+    const rect2 = graph.addNode({
+      x: 280,
+      y: 40,
+      width: 100,
+      height: 40,
+    })
+
+    const edge = graph.addEdge({
+      source: rect1,
+      target: rect2,
+    })
+
+    const view = graph.findViewByCell(edge) as EdgeView
+    const token = Vector.create('circle', { r: 6, fill: 'green' })
+
+    view.on('view:render', () => {
+      view.sendToken(token.node, {
+        duration: 2000,
+        reversed: false,
+        repeatCount: 'indefinite',
+      })
+    })
+  }
+
+  refContainer = (container: HTMLDivElement) => {
+    this.container = container
+  }
+
+  render() {
+    return (
+      <div className="x6-graph-wrap" style={{ height: 500 }}>
+        <div ref={this.refContainer} className="x6-graph" />
+      </div>
+    )
+  }
+}

examples/src/pages/index.tsx

@@ -179,6 +179,22 @@ const dataSource = [
     example: 'animation/transition',
     description: '动画',
   },
+  {
+    example: 'animation/animate',
+    description: '动画',
+  },
+  {
+    example: 'animation/animateTransform',
+    description: '动画',
+  },
+  {
+    example: 'animation/animateAlongPath',
+    description: '动画',
+  },
+  {
+    example: 'animation/sendToken',
+    description: '动画',
+  },
   {
     example: 'history',
     description: '时光回溯',