chore(release): 🚀 publish

- @antv/x6-react-shape@1.6.5

examples/x6-example-features/src/pages/animation/3.tsx

@@ -0,0 +1,81 @@
+import React from 'react'
+import { Graph, EdgeView, NodeView } from '@antv/x6'
+import { animateAlongEdge, animateAlongNode, clearAnimation } from './animation'
+import '../index.less'
+
+export default class Example extends React.Component {
+  private container: HTMLDivElement
+  private animate = false
+
+  componentDidMount() {
+    const graph = new Graph({
+      container: this.container,
+      width: 800,
+      height: 600,
+      grid: true,
+    })
+
+    const source = graph.addNode({
+      id: 'source',
+      shape: 'rect',
+      x: 80,
+      y: 250,
+      width: 160,
+      height: 60,
+    })
+
+    const target = graph.addNode({
+      id: 'target',
+      shape: 'rect',
+      x: 520,
+      y: 250,
+      width: 160,
+      height: 60,
+    })
+
+    graph.addEdge({
+      id: 'edge',
+      source,
+      target,
+    })
+
+    document.addEventListener('click', () => {
+      if (this.animate) {
+        this.animate = false
+        clearAnimation()
+      } else {
+        this.animate = true
+        this.play(graph)
+      }
+    })
+  }
+
+  play(graph: Graph) {
+    const sourceNodeView = graph.findViewByCell(
+      graph.getCellById('source'),
+    ) as NodeView
+    const targetNodeView = graph.findViewByCell(
+      graph.getCellById('target'),
+    ) as NodeView
+    const edgeView = graph.findViewByCell(graph.getCellById('edge')) as EdgeView
+
+    animateAlongNode(sourceNodeView, 'M 0 30 L 0 0 L 160 0 L 160 30')
+    animateAlongNode(sourceNodeView, 'M 0 30 L 0 60 L 160 60 L 160 30', () => {
+      animateAlongEdge(edgeView, () => {
+        animateAlongNode(targetNodeView, 'M 0 0 L 160 0 L 160 60 L 0 60')
+      })
+    })
+  }
+
+  refContainer = (container: HTMLDivElement) => {
+    this.container = container
+  }
+
+  render() {
+    return (
+      <div className="x6-graph-wrap">
+        <div ref={this.refContainer} className="x6-graph" />
+      </div>
+    )
+  }
+}

examples/x6-example-features/src/pages/animation/animation.ts

@@ -0,0 +1,94 @@
+import { Vector, EdgeView, NodeView, Dom } from '@antv/x6'
+
+const animateToken: SVGElement[] = []
+
+export const removeAnimationElem = (elem: SVGElement) => {
+  const index = animateToken.findIndex((token) => token === elem)
+  if (index) {
+    animateToken.splice(index, 1)
+  }
+  Dom.remove(elem)
+}
+
+export const animateAlongEdge = (
+  edgeView: EdgeView,
+  compelete?: () => void,
+) => {
+  const token = Vector.create('circle', { r: 4, fill: 'red' })
+  const path = edgeView.container.querySelector('path')
+  const animate = Dom.createSvgElement<SVGAnimateMotionElement>('animateMotion')
+  const mpath = Dom.createSvgElement('mpath')
+
+  const attrs = {
+    dur: '1000ms',
+    repeatCount: '1',
+    calcMode: 'linear',
+    fill: 'freeze',
+  }
+
+  const id = Dom.ensureId(path!)
+  animate.appendChild(mpath)
+  token.node.appendChild(animate)
+  token.appendTo(edgeView.container)
+  Dom.attr(mpath, { 'xlink:href': `#${id}` })
+  Dom.attr(animate, attrs)
+
+  animateToken.push(token.node)
+  animate.addEventListener('endEvent', () => {
+    removeAnimationElem(token.node)
+    if (compelete) {
+      compelete()
+    }
+  })
+
+  const ani = animate as any
+
+  setTimeout(() => {
+    ani.beginElement()
+  })
+}
+
+export const animateAlongNode = (
+  nodeView: NodeView,
+  path: string,
+  compelete?: () => void,
+) => {
+  const token = Vector.create('circle', { r: 4, fill: 'red' })
+  const animate = Dom.createSvgElement<SVGAnimateMotionElement>('animateMotion')
+
+  const attrs = {
+    dur: '2000ms',
+    repeatCount: '1',
+    calcMode: 'linear',
+    fill: 'freeze',
+  }
+
+  Dom.attr(animate, {
+    ...attrs,
+    path,
+  })
+
+  token.append(animate)
+  nodeView.container.appendChild(token.node)
+  animateToken.push(token.node)
+
+  animate.addEventListener('endEvent', () => {
+    removeAnimationElem(token.node)
+    if (compelete) {
+      compelete()
+    }
+  })
+
+  const ani = animate as any
+
+  setTimeout(() => {
+    ani.beginElement()
+  })
+}
+
+export const clearAnimation = () => {
+  const animations = [...animateToken]
+  animations.forEach((item) => {
+    removeAnimationElem(item)
+  })
+}

packages/x6-react-shape/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/x6-react-shape",
-  "version": "1.6.4",
+  "version": "1.6.5",
   "description": "X6 shape for rendering react components.",
   "main": "lib/index.js",
   "module": "es/index.js",

packages/x6-react-shape/src/view.ts

@@ -6,10 +6,14 @@ import { Portal } from './portal'
 import { Wrap } from './wrap'
 
 export class ReactShapeView extends NodeView<ReactShape> {
+  protected targetId() {
+    return `${this.graph.view.cid}:${this.cell.id}`
+  }
+
   protected init() {
     super.init()
     this.cell.on('removed', () => {
-      Portal.disconnect(this.cell.id)
+      Portal.disconnect(this.targetId())
     })
   }
 
@@ -42,7 +46,7 @@ export class ReactShapeView extends NodeView<ReactShape> {
       const component = this.graph.hook.getReactComponent(node)
       const elem = React.createElement(Wrap, { graph, node, component })
       if (Portal.isActive()) {
-        Portal.connect(this.cell.id, ReactDOM.createPortal(elem, root))
+        Portal.connect(this.targetId(), ReactDOM.createPortal(elem, root))
       } else {
         ReactDOM.render(elem, root)
       }
@@ -58,7 +62,7 @@ export class ReactShapeView extends NodeView<ReactShape> {
   }
 
   unmount() {
-    Portal.disconnect(this.cell.id)
+    Portal.disconnect(this.targetId())
     this.unmountReactComponent()
     super.unmount()
     return this

packages/x6/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/x6",
-  "version": "1.34.11",
+  "version": "1.35.0",
   "description": "JavaScript diagramming library that uses SVG and HTML for rendering.",
   "main": "lib/index.js",
   "module": "es/index.js",

packages/x6/src/addon/transform/index.ts

@@ -521,6 +521,11 @@ export class Transform extends Widget<Transform.Options> {
       }
     }
   }
+
+  protected onRemove() {
+    this.stopListening()
+    super.onRemove()
+  }
 }
 
 export namespace Transform {

packages/x6/src/shape/standard/html.ts

@@ -77,7 +77,7 @@ export namespace HTML {
     }
 
     protected renderHTMLComponent() {
-      const container = this.selectors.foContent
+      const container = this.selectors && this.selectors.foContent
       if (container) {
         const $wrap = this.$(container).empty()
         const component = this.graph.hook.getHTMLComponent(this.cell)

packages/x6/src/view/edge.ts

@@ -1153,15 +1153,18 @@ export class EdgeView<
 
     for (let i = 0, ii = labels.length; i < ii; i += 1) {
       const label = labels[i]
+      const labelNode = this.labelCache[i]
+
+      if (!labelNode) {
+        continue
+      }
+
       const labelPosition = this.normalizeLabelPosition(
         label.position as Edge.LabelPosition,
       )
       const pos = ObjectExt.merge({}, defaultPosition, labelPosition)
       const matrix = this.getLabelTransformationMatrix(pos)
-      this.labelCache[i].setAttribute(
-        'transform',
-        Dom.matrixToTransformString(matrix),
-      )
+      labelNode.setAttribute('transform', Dom.matrixToTransformString(matrix))
     }
 
     return this

packages/x6/src/view/node.ts

@@ -861,7 +861,9 @@ export class NodeView<
     if (options.frontOnly) {
       if (candidates.length > 0) {
         const zIndexMap = ArrayExt.groupBy(candidates, 'zIndex')
-        const maxZIndex = ArrayExt.max(Object.keys(zIndexMap))
+        const maxZIndex = ArrayExt.max(
+          Object.keys(zIndexMap).map((z) => parseInt(z, 10)),
+        )
         if (maxZIndex) {
           candidates = zIndexMap[maxZIndex]
         }

sites/x6-sites/docs/tutorial/advanced/react.en.md

@@ -185,7 +185,7 @@ export const MyComponent = memo(
     return // ...
   },
   (prev, next) => {
-    return Boolean(next.node?.hasChanged('data'))
+    return !next.node?.hasChanged('data')
   },
 )
 ```

sites/x6-sites/docs/tutorial/advanced/react.zh.md

@@ -183,7 +183,7 @@ export const MyComponent = memo(
     return // ...
   },
   (prev, next) => {
-    return Boolean(next.node?.hasChanged('data'))
+    return !next.node?.hasChanged('data')
   },
 )
 ```

sites/x6-sites/site/pages/index.zh.tsx

@@ -79,7 +79,7 @@ const IndexPage = () => {
       type: 'News',
       title: 'X6 2.0 来了！',
       date: '2022.11.22',
-      link: 'https://www.yuque.com/antv/operation/bgo171',
+      link: 'https://www.yuque.com/antv/blog/kt8nugz3kdg32h7v',
     },
   ]