docs & sites (#168)

* chore: auto removed "use strict" * chore: init * feat: export render method * feat: default node type and default edge type * docs: getting started * chore: copy readme from workspace root dir * refactor: use shape with shape name * chore: v0.10.0 * refactor: grid name => grid type * feat: export some snapline api * feat: update api * feat: update api * fix: toggleMultipleSelection * fix: auto focus the container on mousedown * fix: update cells in clipboard on pasted * fix: center on init * fix: dispose graph * feat: get/set scroller position * docs: widget docs * feat: get/set scroll method * fix: update example * fix: re-export namespace * refactor: useCellBBox * docs: update repository url * fix: repository url * chore: auto removed "use strict" * chore: init * feat: export render method * feat: default node type and default edge type * docs: getting started * chore: copy readme from workspace root dir * refactor: use shape with shape name * chore: v0.10.0 * refactor: grid name => grid type * feat: export some snapline api * feat: update api * feat: update api * fix: toggleMultipleSelection * fix: auto focus the container on mousedown * fix: update cells in clipboard on pasted * fix: center on init * fix: dispose graph * feat: get/set scroller position * docs: widget docs * feat: get/set scroll method * fix: update example * fix: re-export namespace * refactor: useCellBBox * docs: update repository url * fix: repository url
antvis · Jun 19, 2020 · 94d5c72 · 94d5c72
1 parent 3420662
commit 94d5c72
Show file tree

Hide file tree

Showing 144 changed files with 10,157 additions and 1,565 deletions.
diff --git a/README.md b/README.md
@@ -30,42 +30,39 @@ $ yarn add @antv/x6
 ```
 
 ```ts
-import { x6 } from '@antv/x6'
+import { Graph } from '@antv/x6'
 
-const container = document.getElementById('container')
-const graph = x6.render(container, {
+const graph = new Graph({
+  container: document.getElementById('container'),
+}) 
+
+graph.fromJSON({
   nodes: [
     {
-      id: 'node-0',
+      id: 'node1',
       x: 60,
       y: 60,
       width: 80,
-      height: 30,
+      height: 40,
       label: 'Hello',
     },
     {
-      id: 'node-1',
+      id: 'node2',
       x: 240,
       y: 240,
       width: 80,
-      height: 30,
+      height: 40,
       label: 'World',
     },
   ],
   edges: [
     {
-      id: 'edge-0',
-      source: 'node-0',
-      target: 'node-1',
-      label: 'Edge Label',
+      source: 'node1',
+      target: 'node2',
     },
   ],
 })
 
-const graphData = graph.toJSON()
-const graphDataString = JSON.stringify(graphData)
-graph.render(JSON.parse(graphDataString))
-
 ```
 
 ## Development

diff --git a/examples/x6-example-components/package.json b/examples/x6-example-components/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "@antv/x6-example-components",
-  "version": "0.9.0",
+  "version": "0.10.10",
   "scripts": {
     "start": "umi dev",
     "build": "umi build",
@@ -10,7 +10,7 @@
     "precommit": "lint-staged"
   },
   "dependencies": {
-    "@antv/x6-components": "^0.9.0",
+    "@antv/x6-components": "^0.10.0",
     "antd": "^3.19.5",
     "react": "^16.8.6",
     "react-dom": "^16.8.6"

diff --git a/examples/x6-example-features/package.json b/examples/x6-example-features/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "@antv/x6-example-features",
-  "version": "0.9.0",
+  "version": "0.10.10",
   "scripts": {
     "start": "umi dev",
     "build": "umi build",
@@ -10,9 +10,9 @@
     "precommit": "lint-staged"
   },
   "dependencies": {
-    "@antv/x6": "^0.9.0",
-    "@antv/x6-components": "^0.9.0",
-    "@antv/x6-react-shape": "^0.9.0",
+    "@antv/x6": "^0.10.10",
+    "@antv/x6-components": "^0.10.0",
+    "@antv/x6-react-shape": "^0.10.0",
     "antd": "^3.19.5",
     "classnames": "^2.2.6",
     "react": "^16.12.0",

diff --git a/examples/x6-example-features/src/pages/animation/1.tsx b/examples/x6-example-features/src/pages/animation/1.tsx
@@ -14,7 +14,7 @@ export default class Example extends React.Component {
     })
 
     const ball = graph.addNode({
-      type: 'circle',
+      shape: 'circle',
       x: -25,
       y: 50,
       width: 50,
@@ -75,7 +75,7 @@ export default class Example extends React.Component {
     )
 
     const ufo = graph.addNode({
-      type: 'ellipse',
+      shape: 'ellipse',
       x: 400,
       y: 50,
       width: 35,

diff --git a/examples/x6-example-features/src/pages/animation/2.tsx b/examples/x6-example-features/src/pages/animation/2.tsx
@@ -40,7 +40,9 @@ class BallView extends NodeView {
           current.x > this.graph.options.width - node.getSize().width
         ) {
           this.angle -= 180
-          node.pos(node.previous('position')!.x, current.y, { silent: true })
+          node.position(node.previous('position')!.x, current.y, {
+            silent: true,
+          })
           cell.stopTransition('position')
         }
       }
@@ -105,7 +107,7 @@ class BallView extends NodeView {
       delete this.timerId
     }
     this.edge = this.graph.addEdge({
-      type: 'edge',
+      shape: 'edge',
       source: this.cell.getBBox().getCenter(),
       target: { x, y },
       zIndex: -1,
@@ -204,11 +206,11 @@ export default class Example extends React.Component {
       container: this.container,
       width: 650,
       height: 400,
-      gridSize: 1,
+      grid: 1,
     })
 
     graph.addNode({
-      type: 'ball',
+      shape: 'ball',
       x: 250,
       y: 370,
       width: 30,
@@ -223,7 +225,7 @@ export default class Example extends React.Component {
     })
 
     graph.addNode({
-      type: 'ball',
+      shape: 'ball',
       x: 400,
       y: 350,
       width: 50,

diff --git a/examples/x6-example-features/src/pages/edge/custom-connector.tsx b/examples/x6-example-features/src/pages/edge/custom-connector.tsx
@@ -42,11 +42,11 @@ export default class Example extends React.Component {
       container: this.container,
       width: 1000,
       height: 600,
-      gridSize: 10,
+      grid: 10,
     })
 
     const source = graph.addNode({
-      type: 'rect',
+      shape: 'rect',
       x: 50,
       y: 50,
       width: 140,
@@ -65,7 +65,7 @@ export default class Example extends React.Component {
     graph.addEdge({
       source,
       target,
-      type: 'edge',
+      shape: 'edge',
       connector: {
         name: 'wobble',
         args: {

diff --git a/examples/x6-example-features/src/pages/edge/custom-edge.tsx b/examples/x6-example-features/src/pages/edge/custom-edge.tsx
@@ -179,7 +179,7 @@ export default class Example extends React.Component {
     })
 
     graph.addEdge({
-      type: 'shadow-edge',
+      shape: 'shadow-edge',
       source: { x: 100, y: 200 },
       target: { x: 500, y: 200 },
       vertices: [{ x: 300, y: 300 }],
@@ -258,7 +258,7 @@ export default class Example extends React.Component {
     })
 
     graph.addEdge({
-      type: 'arrow',
+      shape: 'arrow',
       source: { x: 100, y: 300 },
       target: { x: 300, y: 350 },
     })

diff --git a/examples/x6-example-features/src/pages/edge/custom-marker.tsx b/examples/x6-example-features/src/pages/edge/custom-marker.tsx
@@ -27,7 +27,6 @@ export default class Example extends React.Component {
     })
 
     graph.addEdge({
-      type: 'edge',
       source: { x: 20, y: 20 },
       target: { x: 350, y: 20 },
       attrs: {
@@ -54,7 +53,6 @@ export default class Example extends React.Component {
     })
 
     graph.addEdge({
-      type: 'edge',
       source: { x: 20, y: 80 },
       target: { x: 350, y: 80 },
       attrs: {
@@ -71,7 +69,6 @@ export default class Example extends React.Component {
     })
 
     graph.addEdge({
-      type: 'edge',
       source: { x: 20, y: 400 },
       target: { x: 280, y: 400 },
       attrs: {
@@ -92,7 +89,6 @@ export default class Example extends React.Component {
     })
 
     graph.addEdge({
-      type: 'edge',
       source: { x: 20, y: 430 },
       target: { x: 280, y: 430 },
       attrs: {
@@ -112,7 +108,6 @@ export default class Example extends React.Component {
     })
 
     graph.addEdge({
-      type: 'edge',
       source: { x: 20, y: 460 },
       target: { x: 280, y: 460 },
       attrs: {
@@ -132,7 +127,6 @@ export default class Example extends React.Component {
     })
 
     graph.addEdge({
-      type: 'edge',
       source: { x: 20, y: 490 },
       target: { x: 280, y: 490 },
       attrs: {
@@ -151,7 +145,6 @@ export default class Example extends React.Component {
     })
 
     graph.addEdge({
-      type: 'edge',
       source: { x: 20, y: 520 },
       target: { x: 280, y: 520 },
       attrs: {
@@ -172,7 +165,6 @@ export default class Example extends React.Component {
     })
 
     graph.addEdge({
-      type: 'edge',
       source: { x: 20, y: 550 },
       target: { x: 280, y: 550 },
       attrs: {
@@ -195,7 +187,6 @@ export default class Example extends React.Component {
     })
 
     graph.addEdge({
-      type: 'edge',
       source: { x: 10, y: 140 },
       target: { x: 350, y: 140 },
       attrs: {
@@ -225,7 +216,6 @@ export default class Example extends React.Component {
     })
 
     graph.addEdge({
-      type: 'edge',
       source: { x: 400, y: 20 },
       target: { x: 740, y: 20 },
       vertices: [
@@ -262,7 +252,6 @@ export default class Example extends React.Component {
     })
 
     graph.addEdge({
-      type: 'edge',
       source: { x: 440, y: 100 },
       target: { x: 740, y: 100 },
       vertices: [
@@ -294,7 +283,7 @@ export default class Example extends React.Component {
     })
 
     graph.addEdge({
-      type: 'double-edge',
+      shape: 'double-edge',
       source: { x: 10, y: 200 },
       target: { x: 350, y: 200 },
       attrs: {
@@ -314,7 +303,6 @@ export default class Example extends React.Component {
     })
 
     graph.addEdge({
-      type: 'edge',
       source: { x: 400, y: 200 },
       target: { x: 740, y: 200 },
       connector: { name: 'smooth' },
@@ -405,7 +393,7 @@ export default class Example extends React.Component {
     })
 
     graph.addEdge({
-      type: 'shadow-edge',
+      shape: 'shadow-edge',
       source: { x: 10, y: 280 },
       target: { x: 440, y: 280 },
       vertices: [
@@ -457,7 +445,7 @@ export default class Example extends React.Component {
     // -----------
 
     const node1 = graph.addNode({
-      type: 'path',
+      shape: 'path',
       x: 500,
       y: 450,
       width: 100,
@@ -471,7 +459,6 @@ export default class Example extends React.Component {
     })
 
     graph.addEdge({
-      type: 'edge',
       source: { x: 300, y: 400 },
       target: node1,
       attrs: {

diff --git a/examples/x6-example-features/src/pages/edge/custom-router.tsx b/examples/x6-example-features/src/pages/edge/custom-router.tsx
@@ -30,11 +30,10 @@ export default class Example extends React.Component {
       container: this.container,
       width: 1000,
       height: 600,
-      gridSize: 10,
+      grid: 10,
     })
 
     const source = graph.addNode({
-      type: 'rect',
       x: 50,
       y: 50,
       width: 120,
@@ -49,7 +48,6 @@ export default class Example extends React.Component {
     graph.addEdge({
       source,
       target,
-      type: 'edge',
       router: {
         name: 'random',
         args: {

diff --git a/examples/x6-example-features/src/pages/edge/index.tsx b/examples/x6-example-features/src/pages/edge/index.tsx
@@ -93,7 +93,7 @@ export default class Example extends React.Component {
     // -----------------------------------
 
     const r1 = graph.addNode({
-      type: 'basic.rect',
+      shape: 'basic.rect',
       size: { width: 70, height: 30 },
       position: { x: 335, y: 50 },
       attrs: {
@@ -123,7 +123,7 @@ export default class Example extends React.Component {
     r4.translate(300)
 
     graph.addEdge({
-      type: 'customEdge',
+      shape: 'customEdge',
       view: 'customEdgeView',
       customLinkInteractions: true,
       source: r3,

diff --git a/examples/x6-example-features/src/pages/edge/jump-over.tsx b/examples/x6-example-features/src/pages/edge/jump-over.tsx
@@ -14,7 +14,6 @@ export default class Example extends React.Component {
     })
 
     const rect = graph.createNode({
-      type: 'rect',
       x: 100,
       y: 50,
       width: 70,
@@ -35,7 +34,6 @@ export default class Example extends React.Component {
       const edge = graph.createEdge({
         source,
         target,
-        type: 'edge',
       })
 
       if (i % 2 === 0) {
@@ -49,14 +47,13 @@ export default class Example extends React.Component {
       graph.addEdge(edge)
     }
 
-    const crossRectA = rect.clone().pos(16, 100)
+    const crossRectA = rect.clone().position(16, 100)
     graph.addNode(crossRectA)
 
-    const crossRectB = rect.clone().pos(16, 200)
+    const crossRectB = rect.clone().position(16, 200)
     graph.addNode(crossRectB)
 
     graph.addEdge({
-      type: 'edge',
       source: crossRectA,
       target: crossRectB,
       connector: { name: 'jumpover' },