feat: ✨ group demo

examples/x6-example-features/src/pages/embed/group/index.tsx

@@ -0,0 +1,131 @@
+import React from 'react'
+import { Graph } from '@antv/x6'
+import { Group } from './shape'
+import '../../index.less'
+
+export default class Example extends React.Component {
+  private container: HTMLDivElement
+
+  componentDidMount() {
+    const graph = new Graph({
+      container: this.container,
+      width: 1000,
+      height: 600,
+      grid: true,
+    })
+
+    const createGroup = (
+      id: string,
+      x: number,
+      y: number,
+      width: number,
+      height: number,
+      fill: string,
+    ) => {
+      const group = new Group({
+        id,
+        x,
+        y,
+        width,
+        height,
+        attrs: {
+          body: { fill },
+        },
+      })
+      graph.addNode(group)
+      return group
+    }
+
+    const createNode = (
+      id: string,
+      x: number,
+      y: number,
+      width: number,
+      height: number,
+      fill: string,
+    ) => {
+      return graph.addNode({
+        id,
+        x,
+        y,
+        width,
+        height,
+        attrs: {
+          body: {
+            fill: fill || 'blue',
+          },
+          label: {
+            text: id,
+            fill: 'white',
+            refX: 10,
+            refY: 10,
+            textAnchor: 'start',
+          },
+        },
+      })
+    }
+
+    const createEdge = (
+      id: string,
+      source: string,
+      target: string,
+      vertices?: { x: number; y: number }[],
+    ) => {
+      return graph.addEdge({
+        id,
+        source,
+        target,
+        vertices: vertices,
+        label: id,
+      })
+    }
+
+    const a = createGroup('a', 100, 30, 480, 320, 'lightblue')
+    const aa = createGroup('aa', 180, 80, 160, 140, 'green')
+    const aaa = createGroup('aaa', 200, 120, 120, 40, 'gray')
+    const c = createNode('c', 450, 200, 50, 50, 'orange')
+
+    a.addChild(aa)
+    aa.addChild(aaa)
+    a.addChild(c)
+
+    console.log(aa)
+
+    createNode('d', 680, 80, 50, 50, 'black')
+
+    const l1 = createEdge('l1', 'aa', 'c') // auto embed to common ancestor `a`
+    console.log(l1)
+    createEdge('l3', 'c', 'd')
+    aa.addChild(
+      createEdge('l2', 'aa', 'aaa', [
+        { x: 50, y: 110 },
+        { x: 50, y: 180 },
+      ]),
+    )
+
+    graph.on('node:collapse', ({ node }: { node: Group }) => {
+      node.toggleCollapse()
+      const collapsed = node.isCollapsed()
+      const cells = node.getDescendants()
+      cells.forEach((node) => {
+        if (collapsed) {
+          node.hide()
+        } else {
+          node.show()
+        }
+      })
+    })
+  }
+
+  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/embed/group/shape.ts

@@ -0,0 +1,87 @@
+import { Node } from '@antv/x6'
+
+export class Group extends Node {
+  private collapsed: boolean = false
+  private expandSize: { width: number; height: number }
+
+  protected postprocess() {
+    this.toggleCollapse(false)
+  }
+
+  isCollapsed() {
+    return this.collapsed === true
+  }
+
+  toggleCollapse(collapsed: boolean) {
+    const target = collapsed == null ? !this.collapsed : collapsed
+    if (target) {
+      this.attr('buttonSign', { d: 'M 1 5 9 5 M 5 1 5 9' })
+      this.expandSize = this.getSize()
+      this.resize(100, 32)
+    } else {
+      this.attr('buttonSign', { d: 'M 2 5 8 5' })
+      if (this.expandSize) {
+        this.resize(this.expandSize.width, this.expandSize.height)
+      }
+    }
+    this.collapsed = target
+  }
+}
+
+Group.config({
+  markup: [
+    {
+      tagName: 'rect',
+      selector: 'body',
+    },
+    {
+      tagName: 'g',
+      selector: 'buttonGroup',
+      children: [
+        {
+          tagName: 'rect',
+          selector: 'button',
+          attrs: {
+            'pointer-events': 'visiblePainted',
+          },
+        },
+        {
+          tagName: 'path',
+          selector: 'buttonSign',
+          attrs: {
+            fill: 'none',
+            'pointer-events': 'none',
+          },
+        },
+      ],
+    },
+  ],
+  attrs: {
+    body: {
+      refWidth: '100%',
+      refHeight: '100%',
+      strokeWidth: 1,
+      fill: '#ffffff',
+      stroke: '#a0a0a0',
+    },
+    buttonGroup: {
+      refX: 8,
+      refY: 8,
+    },
+    button: {
+      height: 16,
+      width: 20,
+      rx: 2,
+      ry: 2,
+      fill: '#f5f5f5',
+      stroke: '#ccc',
+      cursor: 'pointer',
+      event: 'node:collapse',
+    },
+    buttonSign: {
+      refX: 5,
+      refY: 4,
+      stroke: '#808080',
+    },
+  },
+})

examples/x6-example-features/src/pages/expand/tree/index.tsx

@@ -67,7 +67,7 @@ export default class Example extends React.Component {
       },
     })
 
-    graph.on('node:collapse', ({ e, node }) => {
+    graph.on('node:collapse', ({ node }) => {
       const treeNode = node as TreeNode
       treeNode.toggleCollapse()
       const collapsed = treeNode.isCollapsed()

packages/x6/src/global/version.ts

@@ -3,5 +3,5 @@
 /**
  * Auto generated version file, do not modify it!
  */
-const version = '0.10.52'
+const version = '0.10.53'
 export { version }