feat: port examples

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

@@ -13,7 +13,7 @@ export default class Example extends React.Component {
         // color: '#f5f5f5',
         image:
           'https://cdn2.iconfinder.com/data/icons/social-media-2285/512/1_Slack_colored_svg-32.png',
-        pattern: 'watermark',
+        repeat: 'watermark',
         opacity: 0.1,
       },
     })

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

@@ -1,7 +1,7 @@
 import React from 'react'
 import { joint } from '@antv/x6'
 import { ShadowEdge } from '@antv/x6/es/research/shape/standard'
-import { Easing } from '@antv/x6/es/research/animation/easing'
+import { Timing } from '@antv/x6/es/research/animation/easing'
 import '../../index.less'
 import '../index.less'
 
@@ -24,7 +24,7 @@ export default class Example extends React.Component {
         var options = {
           delay: 100,
           duration: 1000,
-          timingFunction: Easing.easeInOutBack,
+          timing: Timing.easeInOutBack,
         }
         edge.transition('attrs/c1/atConnectionRatio', t, options)
         edge.transition('attrs/c2/atConnectionRatio', t, options)

examples/x6-example-features/src/pages/joint/graph/index.less

@@ -1,8 +1,8 @@
 :global {
   .x6-example-wrap {
-    width: '100%';
-    height: '100%';
-    background-color: '#ffffff';
+    width: 100%;
+    height: 100%;
+    background-color: #ffffff;
 
     .left-side {
       position: fixed;

examples/x6-example-features/src/pages/joint/index.less

@@ -6,9 +6,22 @@
   }
 
   .@{prefix}-graph-wrap {
-    width: '100%';
-    height: '100%';
-    background-color: '#ffffff';
+    width: 100%;
+    height: 100%;
+    background-color: #ffffff;
+    overflow: auto;
+    padding: 32px 0;
+
+    > h1 {
+      display: block;
+      width: 800px;
+      margin: 0 auto 32px auto;
+    }
+  }
+
+  .@{prefix}-graph-tools {
+    width: 800px;
+    margin: 0 auto 32px auto;
   }
 
   .@{prefix}-graph {

examples/x6-example-features/src/pages/joint/ports/compensation.tsx

@@ -0,0 +1,113 @@
+import React from 'react'
+import { joint } from '@antv/x6'
+import '../../index.less'
+import '../index.less'
+
+export default class Example extends React.Component {
+  private container: HTMLDivElement
+
+  componentDidMount() {
+    const graph = new joint.Graph({
+      container: this.container,
+      width: 800,
+      height: 400,
+      gridSize: 1,
+      validateMagnet() {
+        return false
+      },
+    })
+
+    const ellipse = graph.addNode({
+      type: 'ellipse',
+      x: 50,
+      y: 50,
+      width: 500,
+      height: 300,
+      attrs: {
+        label: {
+          text: 'compensateRotation: true',
+          fill: '#6a6c8a',
+        },
+        body: {
+          stroke: '#31d0c6',
+          strokeWidth: 2,
+        },
+      },
+      ports: {
+        groups: {
+          a: {
+            position: {
+              name: 'ellipseSpread',
+              args: { start: 0, dr: 0, compensateRotation: true },
+            },
+            label: {
+              position: 'radial',
+            },
+            attrs: {
+              rect: {
+                stroke: '#31d0c6',
+                fill: '#ffffff',
+                strokeWidth: 2,
+                width: 20,
+                height: 20,
+                x: -10,
+                y: -10,
+              },
+              dot: {
+                fill: '#fe854f',
+                r: 2,
+              },
+              text: {
+                fill: '#6a6c8a',
+              },
+            },
+            markup: [
+              {
+                tagName: 'rect',
+                selector: 'rect',
+              },
+              {
+                tagName: 'circle',
+                selector: 'dot',
+              },
+            ],
+          },
+        },
+      },
+    })
+
+    Array.from({ length: 36 }).forEach(function(_, index) {
+      ellipse.addPort({
+        group: 'a',
+        id: `${index}`,
+        attrs: { text: { text: index } },
+      })
+    })
+
+    graph.on('node:click', function({ node }) {
+      if (!node.hasPorts()) {
+        return
+      }
+      const path = 'ports/groups/a/position/args/compensateRotation'
+      var current = node.prop<boolean>(path)
+      node.prop('attrs/label/text', 'compensateRotation: ' + !current)
+      node.prop(path, !current)
+    })
+  }
+
+  refContainer = (container: HTMLDivElement) => {
+    this.container = container
+  }
+
+  render() {
+    return (
+      <div className="x6-graph-wrap">
+        <h1>Port rotation compensation</h1>
+        <div className="x6-graph-tools">
+          <p>Click on Element to toggle port rotation compensation</p>
+        </div>
+        <div ref={this.refContainer} className="x6-graph" />
+      </div>
+    )
+  }
+}

examples/x6-example-features/src/pages/joint/ports/defaults.tsx

@@ -0,0 +1,132 @@
+import React from 'react'
+import { Button } from 'antd'
+import { joint } from '@antv/x6'
+import '../../index.less'
+import '../index.less'
+
+export default class Example extends React.Component {
+  private container: HTMLDivElement
+  private graph: joint.Graph
+  private rect: joint.Node
+
+  componentDidMount() {
+    const graph = new joint.Graph({
+      container: this.container,
+      width: 800,
+      height: 400,
+      gridSize: 1,
+    })
+
+    const rect = graph.addNode({
+      type: 'basic.rect',
+      x: 130,
+      y: 30,
+      width: 100,
+      height: 150,
+      attrs: {
+        rect: { stroke: '#31d0c6', strokeWidth: 2 },
+      },
+    })
+
+    rect.addPort({
+      attrs: {
+        circle: {
+          magnet: true,
+          stroke: '#31d0c6',
+          strokeWidth: 2,
+          fill: '#ffffff',
+        },
+      },
+    })
+
+    rect.addPort({
+      attrs: {
+        circle: {
+          magnet: true,
+          stroke: '#31d0c6',
+          strokeWidth: 2,
+          fill: '#ffffff',
+        },
+      },
+    })
+
+    rect.addPort({
+      attrs: {
+        circle: {
+          magnet: true,
+          stroke: '#31d0c6',
+          strokeWidth: 2,
+          fill: '#ffffff',
+        },
+      },
+    })
+
+    const circle = graph.addNode({
+      type: 'basic.circle',
+      x: 20,
+      y: 150,
+      width: 50,
+      height: 50,
+      attrs: {
+        circle: { cx: 8, cy: 8, r: 8 },
+        text: { text: 'test' },
+      },
+    })
+
+    const ports = rect.getPorts()
+    graph.addEdge({
+      source: circle,
+      target: { cell: rect, port: ports[0].id },
+    })
+    graph.addEdge({
+      source: circle,
+      target: { cell: rect, port: ports[1].id },
+    })
+    graph.addEdge({
+      source: circle,
+      target: { cell: rect, port: ports[2].id },
+    })
+
+    this.graph = graph
+    this.rect = rect
+  }
+
+  onAddPort = () => {
+    this.rect.addPort({
+      attrs: {
+        circle: {
+          magnet: true,
+          stroke: '#31d0c6',
+          strokeWidth: 2,
+          fill: '#ffffff',
+        },
+      },
+    })
+  }
+
+  onRemovePort = () => {
+    const ports = this.rect.getPorts()
+    if (ports.length) {
+      this.rect.removePortAt(ports.length - 1)
+    }
+  }
+
+  refContainer = (container: HTMLDivElement) => {
+    this.container = container
+  }
+
+  render() {
+    return (
+      <div className="x6-graph-wrap">
+        <h1>Default Settings</h1>
+        <div className="x6-graph-tools">
+          <Button.Group>
+            <Button onClick={this.onAddPort}>Add Port</Button>
+            <Button onClick={this.onRemovePort}>Remove Port</Button>
+          </Button.Group>
+        </div>
+        <div ref={this.refContainer} className="x6-graph" />
+      </div>
+    )
+  }
+}