marker presets (#143)

* chore: auto pretty

* feat: path actions: moveTo/lineTo/curveTo/close

* feat: define marker and marker presets

* build(deps-dev): bump stylelint-order from 3.1.1 to 4.0.0

Bumps [stylelint-order](https://github.com/hudochenkov/stylelint-order) from 3.1.1 to 4.0.0.
- [Release notes](https://github.com/hudochenkov/stylelint-order/releases)
- [Changelog](https://github.com/hudochenkov/stylelint-order/blob/master/CHANGELOG.md)
- [Commits](hudochenkov/stylelint-order@3.1.1...4.0.0)

Signed-off-by: dependabot-preview[bot] <support@dependabot.com>

* build(deps-dev): bump @types/react-helmet from 5.0.15 to 6.0.0

Bumps [@types/react-helmet](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/react-helmet) from 5.0.15 to 6.0.0.
- [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases)
- [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/react-helmet)

Signed-off-by: dependabot-preview[bot] <support@dependabot.com>

* build(deps-dev): bump @types/react-dom from 16.9.7 to 16.9.8

Bumps [@types/react-dom](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/react-dom) from 16.9.7 to 16.9.8.
- [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases)
- [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/react-dom)

Signed-off-by: dependabot-preview[bot] <support@dependabot.com>

* chore: remove unused deps

* feat: examples of marker presets

* build(deps-dev): bump sinon from 7.5.0 to 9.0.2

Bumps [sinon](https://github.com/sinonjs/sinon) from 7.5.0 to 9.0.2.
- [Release notes](https://github.com/sinonjs/sinon/releases)
- [Changelog](https://github.com/sinonjs/sinon/blob/master/CHANGELOG.md)
- [Commits](sinonjs/sinon@v7.5.0...v9.0.2)

Signed-off-by: dependabot-preview[bot] <support@dependabot.com>

* build(deps-dev): bump @types/webpack from 4.41.12 to 4.41.13

Bumps [@types/webpack](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/webpack) from 4.41.12 to 4.41.13.
- [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases)
- [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/webpack)

Signed-off-by: dependabot-preview[bot] <support@dependabot.com>

* build(deps-dev): bump lerna from 3.20.2 to 3.21.0

Bumps [lerna](https://github.com/lerna/lerna/tree/HEAD/core/lerna) from 3.20.2 to 3.21.0.
- [Release notes](https://github.com/lerna/lerna/releases)
- [Changelog](https://github.com/lerna/lerna/blob/master/core/lerna/CHANGELOG.md)
- [Commits](https://github.com/lerna/lerna/commits/v3.21.0/core/lerna)

Signed-off-by: dependabot-preview[bot] <support@dependabot.com>

* build(deps-dev): bump @types/node from 13.13.5 to 14.0.1

Bumps [@types/node](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node) from 13.13.5 to 14.0.1.
- [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases)
- [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/node)

Signed-off-by: dependabot-preview[bot] <support@dependabot.com>

* build(deps-dev): bump eslint-plugin-react from 7.19.0 to 7.20.0

Bumps [eslint-plugin-react](https://github.com/yannickcr/eslint-plugin-react) from 7.19.0 to 7.20.0.
- [Release notes](https://github.com/yannickcr/eslint-plugin-react/releases)
- [Changelog](https://github.com/yannickcr/eslint-plugin-react/blob/master/CHANGELOG.md)
- [Commits](jsx-eslint/eslint-plugin-react@v7.19.0...v7.20.0)

Signed-off-by: dependabot-preview[bot] <support@dependabot.com>

* build(deps-dev): bump lint-staged from 10.2.2 to 10.2.4

Bumps [lint-staged](https://github.com/okonet/lint-staged) from 10.2.2 to 10.2.4.
- [Release notes](https://github.com/okonet/lint-staged/releases)
- [Commits](lint-staged/lint-staged@v10.2.2...v10.2.4)

Signed-off-by: dependabot-preview[bot] <support@dependabot.com>

* build(deps-dev): bump stylelint from 13.3.3 to 13.4.1

Bumps [stylelint](https://github.com/stylelint/stylelint) from 13.3.3 to 13.4.1.
- [Release notes](https://github.com/stylelint/stylelint/releases)
- [Changelog](https://github.com/stylelint/stylelint/blob/master/CHANGELOG.md)
- [Commits](stylelint/stylelint@13.3.3...13.4.1)

Signed-off-by: dependabot-preview[bot] <support@dependabot.com>

* build(deps-dev): bump tslib from 1.11.2 to 2.0.0

Bumps [tslib](https://github.com/Microsoft/tslib) from 1.11.2 to 2.0.0.
- [Release notes](https://github.com/Microsoft/tslib/releases)
- [Commits](microsoft/tslib@1.11.2...2.0.0)

Signed-off-by: dependabot-preview[bot] <support@dependabot.com>

* build(deps-dev): bump tslint-react from 3.6.0 to 5.0.0

Bumps [tslint-react](https://github.com/palantir/tslint-react) from 3.6.0 to 5.0.0.
- [Release notes](https://github.com/palantir/tslint-react/releases)
- [Commits](palantir/tslint-react@3.6.0...5.0.0)

Signed-off-by: dependabot-preview[bot] <support@dependabot.com>

* feat: collect graph options

* chore: auto pretty

* feat: path actions: moveTo/lineTo/curveTo/close

* feat: define marker and marker presets

* chore: remove unused deps

* feat: examples of marker presets

* feat: collect graph options

Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>

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

@@ -15,17 +15,22 @@ export default class Example extends React.Component {
       async: true,
       frozen: true,
       sorting: 'approx',
-      restrictTranslate: true,
-      defaultConnectionPoint: {
-        name: 'boundary',
-        args: { selector: 'body' },
+      translating: {
+        restrict: true,
       },
-      defaultAnchor: {
-        name: 'orth',
-      },
-      defaultLinkAnchor: {
-        name: 'orth',
+      connecting: {
+        connectionPoint: {
+          name: 'boundary',
+          args: { selector: 'body' },
+        },
+        anchor: {
+          name: 'orth',
+        },
+        edgeAnchor: {
+          name: 'orth',
+        },
       },
+
       interactive: {
         linkMove: false,
         labelMove: false,

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

@@ -10,7 +10,7 @@ export default class Example extends React.Component {
       container: this.container,
       width: 800,
       height: 600,
-      gridSize: 10,
+      grid: 10,
     })
 
     graph.on('edge:customevent', ({ name, e, edge }) => {

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

@@ -1,5 +1,6 @@
 import React from 'react'
-import { Graph, Path } from '@antv/x6'
+import { Graph } from '@antv/x6'
+import { Marker } from '@antv/x6/es/connection'
 import '../index.less'
 
 export default class Example extends React.Component {
@@ -11,15 +12,17 @@ export default class Example extends React.Component {
       width: 800,
       height: 600,
       interactive: { linkMove: false },
-      defaultConnectionPoint: {
-        name: 'boundary',
-        args: {
-          extrapolate: true,
-          sticky: true,
+      connecting: {
+        connectionPoint: {
+          name: 'boundary',
+          args: {
+            extrapolate: true,
+            sticky: true,
+          },
+        },
+        validateConnection: function () {
+          return false
         },
-      },
-      validateConnection: function () {
-        return false
       },
     })
 
@@ -33,12 +36,18 @@ export default class Example extends React.Component {
           sourceMarker: {
             fill: '#31d0c6',
             stroke: 'none',
-            d: 'M 5 -10 L -15 0 L 5 10 Z',
+            name: 'classic',
+            args: {
+              size: 20,
+            },
           },
           targetMarker: {
             fill: '#fe854f',
             stroke: 'none',
-            d: 'M 5 -10 L -15 0 L 5 10 Z',
+            name: 'block',
+            args: {
+              size: 20,
+            },
           },
         },
       },
@@ -51,35 +60,139 @@ export default class Example extends React.Component {
       attrs: {
         line: {
           stroke: '#fe854f',
-          strokeWidth: 4,
-          sourceMarker: {
-            // if no fill or stroke specified, marker inherits the line color
-            d: 'M 0 -5 L -10 0 L 0 5 Z',
-          },
+          strokeWidth: 1,
+          sourceMarker: 'block',
           targetMarker: {
-            // the marker can be an arbitrary SVGElement
             type: 'circle',
             r: 5,
           },
         },
       },
     })
 
-    // Utility function for normalizing marker's path data.
-    // Translates the center of an arbitrary path at <0 + offset,0>.
-    function normalizeMarker(d: string, offset: number = 0) {
-      var path = Path.parse(Path.normalize(d))
-      var bbox = path.bbox()
-      if (bbox) {
-        var ty = -bbox.height / 2 - bbox.y
-        var tx = -bbox.width / 2 - bbox.x
-        if (typeof offset === 'number') {
-          tx -= offset
-        }
-        path.translate(tx, ty)
-      }
-      return path.serialize()
-    }
+    graph.addEdge({
+      type: 'edge',
+      source: { x: 20, y: 400 },
+      target: { x: 280, y: 400 },
+      attrs: {
+        line: {
+          stroke: '#fe854f',
+          strokeWidth: 1,
+          sourceMarker: 'block',
+          targetMarker: {
+            name: 'block',
+            args: {
+              width: 12,
+              height: 6,
+              open: true,
+            },
+          },
+        },
+      },
+    })
+
+    graph.addEdge({
+      type: 'edge',
+      source: { x: 20, y: 430 },
+      target: { x: 280, y: 430 },
+      attrs: {
+        line: {
+          stroke: '#fe854f',
+          strokeWidth: 1,
+          sourceMarker: 'diamond',
+          targetMarker: {
+            name: 'diamond',
+            args: {
+              width: 12,
+              height: 6,
+            },
+          },
+        },
+      },
+    })
+
+    graph.addEdge({
+      type: 'edge',
+      source: { x: 20, y: 460 },
+      target: { x: 280, y: 460 },
+      attrs: {
+        line: {
+          stroke: '#fe854f',
+          strokeWidth: 1,
+          sourceMarker: 'ellipse',
+          targetMarker: {
+            name: 'ellipse',
+            args: {
+              rx: 6,
+              ry: 4,
+            },
+          },
+        },
+      },
+    })
+
+    graph.addEdge({
+      type: 'edge',
+      source: { x: 20, y: 490 },
+      target: { x: 280, y: 490 },
+      attrs: {
+        line: {
+          stroke: '#fe854f',
+          strokeWidth: 1,
+          sourceMarker: 'circle',
+          targetMarker: {
+            name: 'circlePlus',
+            args: {
+              r: 10,
+            },
+          },
+        },
+      },
+    })
+
+    graph.addEdge({
+      type: 'edge',
+      source: { x: 20, y: 520 },
+      target: { x: 280, y: 520 },
+      attrs: {
+        line: {
+          stroke: '#fe854f',
+          strokeWidth: 1,
+          sourceMarker: 'cross',
+          targetMarker: {
+            name: 'cross',
+            args: {
+              width: 12,
+              height: 8,
+              offset: -10,
+            },
+          },
+        },
+      },
+    })
+
+    graph.addEdge({
+      type: 'edge',
+      source: { x: 20, y: 550 },
+      target: { x: 280, y: 550 },
+      attrs: {
+        line: {
+          stroke: '#fe854f',
+          strokeWidth: 1,
+          sourceMarker: 'async',
+          targetMarker: {
+            name: 'async',
+            args: {
+              width: 12,
+              height: 8,
+              offset: -10,
+              open: true,
+              filp: true,
+            },
+          },
+        },
+      },
+    })
 
     graph.addEdge({
       type: 'edge',
@@ -93,17 +206,19 @@ export default class Example extends React.Component {
           sourceMarker: {
             stroke: '#31d0c6',
             fill: '#31d0c6',
-            d: normalizeMarker(
+            d: Marker.normalize(
               'M5.5,15.499,15.8,21.447,15.8,15.846,25.5,21.447,25.5,9.552,15.8,15.152,15.8,9.552z',
             ),
           },
           targetMarker: {
             stroke: '#31d0c6',
             fill: '#31d0c6',
-            d: normalizeMarker(
-              'M4.834,4.834L4.833,4.833c-5.889,5.892-5.89,15.443,0.001,21.334s15.44,5.888,21.33-0.002c5.891-5.891,5.893-15.44,0.002-21.33C20.275-1.056,10.725-1.056,4.834,4.834zM25.459,5.542c0.833,0.836,1.523,1.757,2.104,2.726l-4.08,4.08c-0.418-1.062-1.053-2.06-1.912-2.918c-0.859-0.859-1.857-1.494-2.92-1.913l4.08-4.08C23.7,4.018,24.622,4.709,25.459,5.542zM10.139,20.862c-2.958-2.968-2.959-7.758-0.001-10.725c2.966-2.957,7.756-2.957,10.725,0c2.954,2.965,2.955,7.757-0.001,10.724C17.896,23.819,13.104,23.817,10.139,20.862zM5.542,25.459c-0.833-0.837-1.524-1.759-2.105-2.728l4.081-4.081c0.418,1.063,1.055,2.06,1.914,2.919c0.858,0.859,1.855,1.494,2.917,1.913l-4.081,4.081C7.299,26.982,6.379,26.292,5.542,25.459zM8.268,3.435l4.082,4.082C11.288,7.935,10.29,8.571,9.43,9.43c-0.858,0.859-1.494,1.855-1.912,2.918L3.436,8.267c0.58-0.969,1.271-1.89,2.105-2.727C6.377,4.707,7.299,4.016,8.268,3.435zM22.732,27.563l-4.082-4.082c1.062-0.418,2.061-1.053,2.919-1.912c0.859-0.859,1.495-1.857,1.913-2.92l4.082,4.082c-0.58,0.969-1.271,1.891-2.105,2.728C24.623,26.292,23.701,26.983,22.732,27.563z',
-              10,
-            ),
+            name: 'path',
+            args: {
+              d:
+                'M4.834,4.834L4.833,4.833c-5.889,5.892-5.89,15.443,0.001,21.334s15.44,5.888,21.33-0.002c5.891-5.891,5.893-15.44,0.002-21.33C20.275-1.056,10.725-1.056,4.834,4.834zM25.459,5.542c0.833,0.836,1.523,1.757,2.104,2.726l-4.08,4.08c-0.418-1.062-1.053-2.06-1.912-2.918c-0.859-0.859-1.857-1.494-2.92-1.913l4.08-4.08C23.7,4.018,24.622,4.709,25.459,5.542zM10.139,20.862c-2.958-2.968-2.959-7.758-0.001-10.725c2.966-2.957,7.756-2.957,10.725,0c2.954,2.965,2.955,7.757-0.001,10.724C17.896,23.819,13.104,23.817,10.139,20.862zM5.542,25.459c-0.833-0.837-1.524-1.759-2.105-2.728l4.081-4.081c0.418,1.063,1.055,2.06,1.914,2.919c0.858,0.859,1.855,1.494,2.917,1.913l-4.081,4.081C7.299,26.982,6.379,26.292,5.542,25.459zM8.268,3.435l4.082,4.082C11.288,7.935,10.29,8.571,9.43,9.43c-0.858,0.859-1.494,1.855-1.912,2.918L3.436,8.267c0.58-0.969,1.271-1.89,2.105-2.727C6.377,4.707,7.299,4.016,8.268,3.435zM22.732,27.563l-4.082-4.082c1.062-0.418,2.061-1.053,2.919-1.912c0.859-0.859,1.495-1.857,1.913-2.92l4.082,4.082c-0.58,0.969-1.271,1.891-2.105,2.728C24.623,26.292,23.701,26.983,22.732,27.563z',
+              offsetX: 10,
+            },
           },
         },
       },
@@ -125,14 +240,14 @@ export default class Example extends React.Component {
           sourceMarker: {
             fill: '#4b4a67',
             stroke: '#4b4a67',
-            d: normalizeMarker(
+            d: Marker.normalize(
               'M5.5,15.499,15.8,21.447,15.8,15.846,25.5,21.447,25.5,9.552,15.8,15.152,15.8,9.552z',
             ),
           },
           targetMarker: {
             fill: '#4b4a67',
             stroke: '#4b4a67',
-            d: normalizeMarker(
+            d: Marker.normalize(
               'M5.5,15.499,15.8,21.447,15.8,15.846,25.5,21.447,25.5,9.552,15.8,15.152,15.8,9.552z',
             ),
           },
@@ -163,14 +278,14 @@ export default class Example extends React.Component {
           sourceMarker: {
             stroke: '#7c68fc',
             fill: '#7c68fc',
-            d: normalizeMarker(
+            d: Marker.normalize(
               'M24.316,5.318,9.833,13.682,9.833,5.5,5.5,5.5,5.5,25.5,9.833,25.5,9.833,17.318,24.316,25.682z',
             ),
           },
           targetMarker: {
             stroke: '#feb663',
             fill: '#feb663',
-            d: normalizeMarker(
+            d: Marker.normalize(
               'M14.615,4.928c0.487-0.986,1.284-0.986,1.771,0l2.249,4.554c0.486,0.986,1.775,1.923,2.864,2.081l5.024,0.73c1.089,0.158,1.335,0.916,0.547,1.684l-3.636,3.544c-0.788,0.769-1.28,2.283-1.095,3.368l0.859,5.004c0.186,1.085-0.459,1.553-1.433,1.041l-4.495-2.363c-0.974-0.512-2.567-0.512-3.541,0l-4.495,2.363c-0.974,0.512-1.618,0.044-1.432-1.041l0.858-5.004c0.186-1.085-0.307-2.6-1.094-3.368L3.93,13.977c-0.788-0.768-0.542-1.525,0.547-1.684l5.026-0.73c1.088-0.158,2.377-1.095,2.864-2.081L14.615,4.928z',
             ),
           },

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

@@ -76,9 +76,7 @@ export default class Example extends React.Component {
       container: this.container,
       width: 800,
       height: 1400,
-      grid: {
-        size: 10,
-      },
+      grid: 10,
       interactive: function (cellView: CellView) {
         if (cellView.cell.getProp('customLinkInteractions')) {
           return { vertexAdd: false }

examples/x6-example-features/src/pages/hull/index.tsx

@@ -15,12 +15,14 @@ export default class Example extends React.Component {
       container: this.container,
       width: 800,
       height: 600,
-      gridSize: 1,
-      restrictTranslate: {
-        x: 50,
-        y: 50,
-        width: 700,
-        height: 500,
+      grid: 1,
+      translating: {
+        restrict: {
+          x: 50,
+          y: 50,
+          width: 700,
+          height: 500,
+        },
       },
     })
 

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

@@ -41,7 +41,7 @@
   bottom: 0;
 }
 
-.@{prefix}-graph-draw-pane {
+.@{prefix}-graph-svg-stage {
   user-select: none;
 }