docs: 📚️ add path-editor demo (#1396)

examples/x6-example-features/src/pages/edge/edge-editor.tsx

@@ -0,0 +1,130 @@
+import React from 'react'
+import { Graph, Node, Edge, EdgeView } from '@antv/x6'
+import '../index.less'
+
+export default class Example extends React.Component {
+  private container: HTMLDivElement
+
+  componentDidMount() {
+    const graph = new Graph({
+      container: this.container,
+      width: 800,
+      height: 600,
+      grid: true,
+    })
+
+    let edge: Edge | null = null
+    let node: Node | null = null
+
+    const init = (pos: { x: number; y: number }) => {
+      node = graph.addNode({
+        shape: 'circle',
+        width: 10,
+        height: 10,
+        ...pos,
+        attrs: {
+          body: {
+            strokeWidth: 1,
+            stroke: '#5F95FF',
+            fill: '#EFF4FF',
+          },
+        },
+      })
+      edge = graph.addEdge({
+        source: node.getBBox().center,
+        target: pos,
+        attrs: {
+          line: {
+            targetMarker: null,
+            stroke: '#A2B1C3',
+            strokeWidth: 2,
+          },
+        },
+      })
+    }
+
+    const addVertices = (pos: { x: number; y: number }) => {
+      if (edge) {
+        edge.appendVertex(pos)
+      }
+    }
+
+    const onMouseMove = (e: MouseEvent) => {
+      if (edge) {
+        const pos = graph.clientToLocal(e.clientX, e.clientY)
+        edge.setTarget(pos)
+      }
+    }
+
+    const print = () => {
+      if (edge) {
+        const view = graph.findViewByCell(edge) as EdgeView
+        console.log(view.path.serialize())
+      }
+    }
+
+    const finish = (closed: boolean) => {
+      if (node && edge) {
+        const vertices = edge.getVertices()
+        if (closed) {
+          if (vertices.length >= 2) {
+            edge.setTarget(node.getBBox().center)
+            graph.removeNode(node)
+            node = null
+            print()
+          } else {
+            graph.removeCells([node, edge])
+            node = null
+            edge = null
+          }
+        } else {
+          if (vertices.length >= 1) {
+            edge.setTarget(vertices[vertices.length - 1])
+            graph.removeNode(node)
+            node = null
+            print()
+          } else {
+            graph.removeCells([node, edge])
+            node = null
+            edge = null
+          }
+        }
+        this.container.removeEventListener('mousemove', onMouseMove)
+      }
+    }
+
+    graph.on('blank:click', ({ e }) => {
+      const pos = graph.clientToLocal(e.clientX, e.clientY)
+      init(pos)
+      this.container.addEventListener('mousemove', onMouseMove)
+    })
+
+    graph.on('edge:click', ({ e }) => {
+      const pos = graph.clientToLocal(e.clientX, e.clientY)
+      if (edge) {
+        const nodes = graph.getNodesFromPoint(pos.x, pos.y)
+        if (nodes.length && nodes[0] === node) {
+          finish(true)
+        } else {
+          addVertices(pos)
+        }
+      }
+    })
+
+    graph.on('edge:contextmenu', () => {
+      finish(false)
+    })
+  }
+
+  refContainer = (container: HTMLDivElement) => {
+    this.container = container
+  }
+
+  render() {
+    return (
+      <div className="x6-graph-wrap">
+        <div ref={this.refContainer} className="x6-graph" />
+      </div>
+    )
+  }
+}

sites/x6-sites/examples/showcase/practices/demo/meta.json

@@ -49,12 +49,12 @@
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*w5SUSIvTxPAAAAAAAAAAAAAAARQnAQ"
     },
     {
-      "filename": "../../../edge/tool/demo/tooltip.tsx",
+      "filename": "../../../edge/tool/demo/path-editor.ts",
       "title": {
-        "zh": "在边上使用 AntD 的 Tooltip 组件",
-        "en": "Use AntD Tooltip with Edge"
+        "zh": "路径编辑器",
+        "en": "Path Editor"
       },
-      "screenshot": "https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*-W2ORbBVQgMAAAAAAAAAAAAAARQnAQ"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*dz6aS5gtapUAAAAAAAAAAAAAARQnAQ"
     }
   ]
 }

sites/x6-sites/examples/showcase/practices/demo/path-editor.ts

@@ -0,0 +1,109 @@
+import { Graph, Node, Edge, EdgeView } from '@antv/x6'
+
+let edge: Edge | null = null
+let node: Node | null = null
+const container = document.getElementById('container')!
+
+const graph = new Graph({
+  container,
+  grid: true,
+})
+
+const init = (pos: { x: number; y: number }) => {
+  node = graph.addNode({
+    shape: 'circle',
+    width: 10,
+    height: 10,
+    ...pos,
+    attrs: {
+      body: {
+        strokeWidth: 1,
+        stroke: '#5F95FF',
+        fill: '#EFF4FF',
+      },
+    },
+  })
+  edge = graph.addEdge({
+    source: node.getBBox().center,
+    target: pos,
+    attrs: {
+      line: {
+        targetMarker: null,
+        stroke: '#A2B1C3',
+        strokeWidth: 2,
+      },
+    },
+  })
+}
+
+const addVertices = (pos: { x: number; y: number }) => {
+  if (edge) {
+    edge.appendVertex(pos)
+  }
+}
+
+const onMouseMove = (e: MouseEvent) => {
+  if (edge) {
+    const pos = graph.clientToLocal(e.clientX, e.clientY)
+    edge.setTarget(pos)
+  }
+}
+
+const print = () => {
+  if (edge) {
+    const view = graph.findViewByCell(edge) as EdgeView
+    console.log(view.path.serialize())
+  }
+}
+
+const finish = (closed: boolean) => {
+  if (node && edge) {
+    const vertices = edge.getVertices()
+    if (closed) {
+      if (vertices.length >= 2) {
+        edge.setTarget(node.getBBox().center)
+        graph.removeNode(node)
+        node = null
+        print()
+      } else {
+        graph.removeCells([node, edge])
+        node = null
+        edge = null
+      }
+    } else {
+      if (vertices.length >= 1) {
+        edge.setTarget(vertices[vertices.length - 1])
+        graph.removeNode(node)
+        node = null
+        print()
+      } else {
+        graph.removeCells([node, edge])
+        node = null
+        edge = null
+      }
+    }
+    container.removeEventListener('mousemove', onMouseMove)
+  }
+}
+
+graph.on('blank:click', ({ e }) => {
+  const pos = graph.clientToLocal(e.clientX, e.clientY)
+  init(pos)
+  container.addEventListener('mousemove', onMouseMove)
+})
+
+graph.on('edge:click', ({ e }) => {
+  const pos = graph.clientToLocal(e.clientX, e.clientY)
+  if (edge) {
+    const nodes = graph.getNodesFromPoint(pos.x, pos.y)
+    if (nodes.length && nodes[0] === node) {
+      finish(true)
+    } else {
+      addVertices(pos)
+    }
+  }
+})
+
+graph.on('edge:contextmenu', () => {
+  finish(false)
+})