feat: performance test

examples/x6-example-features/src/layouts/index.tsx

@@ -29,7 +29,7 @@ const BasicLayout: React.FC = props => {
   const pathname = (props as any).location.pathname as string
   if (
     charts.some(item => item.link === pathname) ||
-    pathname.startsWith('/joint')
+    pathname.startsWith('/v1')
   ) {
     return props.children as React.ReactElement
   }

examples/x6-example-features/src/pages/joint/animation/2.tsx → examples/x6-example-features/src/pages/v1/animation/2.tsx

@@ -24,7 +24,6 @@ class BallView extends NodeView {
     })
 
     this.cell.on('transition:end', ({ cell, path }) => {
-      console.log('end')
       if (path == 'position' && this.speed > 5) {
         this.speed /= cell.prop<number>('bounciness') || 2
         this.fly({ angle: 180 - this.angle, speed: this.speed })

examples/x6-example-features/src/pages/joint/basic.tsx → examples/x6-example-features/src/pages/v1/basic.tsx

@@ -121,8 +121,6 @@ export default class Example extends React.Component {
       },
     })
 
-    console.log(decoratedRect)
-
     graph.addNode(decoratedRect)
 
     graph.addNode({

examples/x6-example-features/src/pages/joint/bus/index.tsx → examples/x6-example-features/src/pages/v1/bus/index.tsx

@@ -99,8 +99,6 @@ export default class Example extends React.Component {
     ).addPort({ group: 'in' })
     var component7 = Component.create(100, 380, 150, 40, 'Sub-group 1')
 
-    console.log(component1)
-
     var fader1 = Fader.create(350, 110)
     var fader2 = Fader.create(350, 360)
     var aux1 = Aux.create(420, 220, 'Post-fade Aux')

examples/x6-example-features/src/pages/joint/edges/custom-edge.tsx → examples/x6-example-features/src/pages/v1/edges/custom-edge.tsx

@@ -17,7 +17,6 @@ export default class Example extends React.Component {
     })
 
     graph.on('edge:customevent', ({ name, e, edge }) => {
-      console.log(name)
       if (name === 'click:circle') {
         e.stopPropagation()
         var t = edge.attr<number>('c1/atConnectionRatio') > 0.2 ? 0.2 : 0.9

examples/x6-example-features/src/pages/v1/performance/shapes.tsx

@@ -0,0 +1,168 @@
+import React from 'react'
+import { Button } from 'antd'
+import { joint } from '@antv/x6'
+import '../../index.less'
+import '../index.less'
+
+// Overall goals
+// -------------
+// 1. reduce number of DOM elements
+// 2. avoid asking the browser for element bounding boxes as much as possible
+
+// Number of elements 0 - ?
+var COUNT = 500
+// Async rendering true/false
+// true: does not block the UI
+var ASYNC = false
+
+const Node = joint.NodeRegistry.register('performance_node', {
+  size: {
+    width: 100,
+    height: 50,
+  },
+  zIndex: 2,
+  attrs: {
+    body: {
+      // Using of special 'ref-like` attributes it's not generally the most
+      // performer. In this particular case it's different though.
+      // If the `ref` attribute is not defined all the metrics (width, height, x, y)
+      // are taken from the model. There is no need to ask the browser for
+      // an element bounding box.
+      // All calculation are done just in Javascript === very fast.
+      refWidth: '100%',
+      refHeight: '100%',
+      stroke: 'red',
+      strokeWidth: 2,
+      fill: 'lightgray',
+      rx: 5,
+      ry: 5,
+    },
+    label: {
+      fill: 'black',
+      // Please see the `ref-width` & `ref-height` comment.
+      refX: '50%',
+      refY: '50%',
+      // Do not use special attribute `x-alignment` when not necessary.
+      // It calls getBBox() on the SVGText element internally. Measuring text
+      // in the browser is usually the slowest.
+      // `text-anchor` attribute does the same job here (works for the text elements only).
+      textAnchor: 'middle',
+      // Do not use special attribute `y-alignment` for text vertical positioning. See above.
+      textVerticalAnchor: 'middle',
+    },
+  },
+  // if markup does not change during the application life time, define it on the prototype (i.e. not in the defaults above)
+  markup: [
+    {
+      tagName: 'rect',
+      selector: 'body',
+    },
+    {
+      tagName: 'text',
+      selector: 'label',
+    },
+  ],
+})
+
+const Edge = joint.EdgeRegistry.register('performance_edge', {
+  zIndex: 1,
+  attrs: {
+    line: {
+      connection: true,
+      // SVG Markers are pretty fast. Let's take advantage of this.
+      targetMarker: {
+        type: 'path',
+        fill: 'green',
+        stroke: 'none',
+        d: 'M 10 -10 0 0 10 10 z',
+      },
+    },
+  },
+  markup: [
+    {
+      tagName: 'path',
+      selector: 'line',
+      attrs: {
+        // Here comes SVG attributes, for which values won't change during the application life time.
+        // These are specs SVG attributes. Do not add special attributes (e.g. targetMarker, fill: { /* gradient */ })).
+        // These attributes are set during render, and never touched again during updates.
+        stroke: 'green',
+        'stroke-width': 2,
+      },
+    },
+  ],
+})
+
+export default class Example extends React.Component {
+  private container: HTMLDivElement
+
+  componentDidMount() {
+    const graph = new joint.Graph({
+      container: this.container,
+      width: (COUNT / 2) * 110,
+      height: 500,
+      gridSize: 1,
+      async: ASYNC,
+    })
+
+    var node = new Node()
+    var edge = new Edge()
+
+    var cells: joint.Cell[] = []
+
+    Array.from({ length: COUNT / 2 }).forEach((_, n) => {
+      const a = node
+        .clone()
+        .pos(n * 110, 100)
+        .attr('label/text', n + 1)
+      const b = node
+        .clone()
+        .pos(n * 100, 300)
+        .attr('label/text', n + 1 + COUNT / 2)
+      const ab = edge
+        .clone()
+        .setSource(a)
+        .setTarget(b)
+      cells.push(a, b, ab)
+    })
+
+    const startTime = new Date().getTime()
+
+    function showResult() {
+      const duration = (new Date().getTime() - startTime) / 1000
+      const elem = document.getElementById('result') as HTMLElement
+      elem.textContent =
+        COUNT +
+        ' elements and ' +
+        COUNT / 2 +
+        ' links rendered in ' +
+        duration +
+        's'
+    }
+
+    // Prefer resetCells() over `addCells()` to add elements in bulk.
+    // SVG as oppose to HTML does not know `z-index` attribute.
+    // The "z" coordinate is determined by the order of the sibling elements. The JointJS
+    // paper makes sure the DOM elements are sorted based on the "z" stored on each element model.
+    graph.model.resetCells(cells)
+
+    if (ASYNC) {
+      graph.on('render:done', showResult)
+    } else {
+      showResult()
+    }
+  }
+
+  refContainer = (container: HTMLDivElement) => {
+    this.container = container
+  }
+
+  render() {
+    return (
+      <div className="x6-graph-wrap">
+        <div id="result">#</div>
+        <div ref={this.refContainer} className="x6-graph" />
+      </div>
+    )
+  }
+}