docs: add validate magnet demo

examples/x6-example-features/src/pages/edge/validate-connection.tsx

@@ -0,0 +1,79 @@
+import React from 'react'
+import { Graph, Edge, EdgeView } from '@antv/x6'
+
+export default class Example extends React.Component {
+  private container: HTMLDivElement
+
+  componentDidMount() {
+    const graph = new Graph({
+      container: this.container,
+      width: 800,
+      height: 600,
+      grid: true,
+      connecting: {
+        validateMagnet({ cell, magnet }) {
+          let count = 0
+          const connectionCount = magnet.getAttribute('connection-count')
+          const max = connectionCount ? parseInt(connectionCount, 10) : Number.MAX_SAFE_INTEGER
+          const outgoingEdges = graph.getOutgoingEdges(cell)
+          if (outgoingEdges) {
+            outgoingEdges.forEach((edge: Edge) => {
+              const edgeView = graph.findViewByCell(edge) as EdgeView
+              if (edgeView.sourceMagnet === magnet) {
+                count += 1
+              }
+            })
+          }
+          return count < max
+        },
+      },
+    })
+
+    graph.addNode({
+      shape: 'rect',
+      x: 80,
+      y: 80,
+      width: 160,
+      height: 60,
+      label: 'source',
+      ports: [
+        {
+          id: 'a',
+          attrs: {
+            circle: {
+              magnet: true,
+              connectionCount: 3, // 自定义属性，控制连接桩可连接多少条边
+            },
+          },
+        },
+        {
+          id: 'b',
+          attrs: {
+            circle: {
+              magnet: true,
+              connectionCount: 0, // 自定义属性，控制连接桩可连接多少条边
+            },
+          },
+        },
+      ],
+      attrs: {
+        body: {
+          magnet: true,
+          connectionCount: 2, // 自定义属性，控制节点可连接多少条边
+        },
+      },
+    })
+  }
+
+  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/faq/demo/meta.json

@@ -15,6 +15,14 @@
         "en": "Switch Interacting"
       },
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*YmthRqMeb7AAAAAAAAAAAAAAARQnAQ"
+    },
+    {
+      "filename": "validate-connection.ts",
+      "title": {
+        "zh": "限制连接边的数量",
+        "en": "Limit Connected Edges"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*f_ztRpTun3AAAAAAAAAAAAAAARQnAQ"
     }
   ]
 }

sites/x6-sites/examples/showcase/faq/demo/validate-connection.ts

@@ -0,0 +1,70 @@
+import { Graph, Edge, EdgeView, Shape } from '@antv/x6'
+
+const graph = new Graph({
+  container: document.getElementById('container')!,
+  grid: true,
+  connecting: {
+    validateMagnet({ cell, magnet }) {
+      let count = 0
+      const connectionCount = magnet.getAttribute('connection-count')
+      const max = connectionCount ? parseInt(connectionCount, 10) : Number.MAX_SAFE_INTEGER
+      const outgoingEdges = graph.getOutgoingEdges(cell)
+      if (outgoingEdges) {
+        outgoingEdges.forEach((edge: Edge) => {
+          const edgeView = graph.findViewByCell(edge) as EdgeView
+          if (edgeView.sourceMagnet === magnet) {
+            count += 1
+          }
+        })
+      }
+      return count < max
+    },
+    createEdge() {
+      return new Shape.Edge({
+        attrs: {
+        line: {
+          stroke: 'orange',
+        },
+      },
+      })
+    }
+  }
+})
+
+graph.addNode({
+  shape: 'rect',
+  x: 280,
+  y: 280,
+  width: 160,
+  height: 60,
+  ports: [
+    {
+      id: 'a',
+      attrs: {
+        circle: {
+          magnet: true,
+          connectionCount: 3, // 自定义属性，控制连接桩可连接多少条边
+        }
+      },
+      position: 'top'
+    },
+    {
+      id: 'b',
+      attrs: {
+        circle: {
+          magnet: true,
+          connectionCount: 0, // 自定义属性，控制连接桩可连接多少条边
+        }
+      }
+    },
+  ],
+  attrs: {
+    body: {
+      fill: '#f5f5f5',
+      stroke: '#d9d9d9',
+      strokeWidth: 1,
+      magnet: true,
+      connectionCount: 2, // 自定义属性，控制节点可连接多少条边
+    },
+  },
+})