docs: 📚️ update layout demos (#1553)

antvis · Nov 16, 2021 · 3eab73b · 3eab73b
1 parent 3151152
commit 3eab73b
Show file tree

Hide file tree

Showing 10 changed files with 42 additions and 59 deletions.
diff --git a/packages/x6-vector/package.json b/packages/x6-vector/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "1.2.4",
+  "version": "1.2.5",
   "name": "@antv/x6-vector",
   "description": "Lightweight library for manipulating and animating SVG.",
   "main": "lib/index.js",

diff --git a/sites/x6-sites/examples/animation/smil/demo/meta.json b/sites/x6-sites/examples/animation/smil/demo/meta.json
@@ -6,7 +6,7 @@
         "zh": "沿路径运动",
         "en": "Animate Along Path"
       },
-      "screenshot": "https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*WKlrTLW6zN0AAAAAAAAAAAAAARQnAQ"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*Cpd6QbQPqGcAAAAAAAAAAAAAARQnAQ"
     }
   ]
 }
diff --git a/sites/x6-sites/examples/layout/general/demo/circle.ts b/sites/x6-sites/examples/layout/general/demo/circle.ts
@@ -5,24 +5,27 @@ const data: Model.FromJSONData = {
   nodes: [],
 }
 
-for (let i = 1; i <= 24; i++) {
+for (let i = 1; i <= 16; i++) {
   data.nodes!.push({
     id: `${i}`,
-    shape: 'rect',
-    width: 24,
-    height: 24,
-    label: '💜',
+    shape: 'circle',
+    width: 30,
+    height: 30,
+    label: `${i}`,
     attrs: {
       body: {
         stroke: 'transparent',
+        fill: '#5F95FF',
+      },
+      label: {
+        fill: '#fff',
       },
     },
   })
 }
 
 const graph = new Graph({
   container: document.getElementById('container')!,
-  grid: true,
 })
 
 const circularLayout = new CircularLayout({

diff --git a/sites/x6-sites/examples/layout/general/demo/dagre.ts b/sites/x6-sites/examples/layout/general/demo/dagre.ts
@@ -22,13 +22,13 @@ const edges = [
 for (let i = 1; i <= 12; i++) {
   data.nodes!.push({
     id: `${i}`,
-    shape: 'rect',
-    width: 60,
-    height: 30,
+    shape: 'circle',
+    width: 32,
+    height: 32,
     label: i,
     attrs: {
       body: {
-        fill: '#855af2',
+        fill: '#5F95FF',
         stroke: 'transparent',
       },
       label: {
@@ -44,16 +44,15 @@ edges.forEach((edge: [string, string]) => {
     target: edge[1],
     attrs: {
       line: {
-        stroke: '#fd6d6f',
-        strokeWidth: 1,
+        stroke: '#A2B1C3',
+        strokeWidth: 2,
       },
     },
   })
 })
 
 const graph = new Graph({
   container: document.getElementById('container')!,
-  grid: true,
 })
 
 const dagreLayout = new DagreLayout({

diff --git a/sites/x6-sites/examples/layout/general/demo/ellipse.ts b/sites/x6-sites/examples/layout/general/demo/ellipse.ts
@@ -10,10 +10,9 @@ for (let i = 1; i <= 20; i++) {
     height: 26,
     attrs: {
       body: {
-        d:
-          'M0,-9.898961565145173L2.222455340918111,-3.0589473502942863L9.41447190108659,-3.058947350294287L3.596008280084239,1.1684139180159865L5.818463621002351,8.008428132866873L4.440892098500626e-16,3.7810668645565997L-5.8184636210023495,8.008428132866873L-3.5960082800842383,1.1684139180159867L-9.41447190108659,-3.058947350294285L-2.2224553409181116,-3.058947350294286Z',
-        fill: '#ffffff',
-        stroke: '#8921e0',
+        d: 'M0,-9.898961565145173L2.222455340918111,-3.0589473502942863L9.41447190108659,-3.058947350294287L3.596008280084239,1.1684139180159865L5.818463621002351,8.008428132866873L4.440892098500626e-16,3.7810668645565997L-5.8184636210023495,8.008428132866873L-3.5960082800842383,1.1684139180159867L-9.41447190108659,-3.058947350294285L-2.2224553409181116,-3.058947350294286Z',
+        fill: '#EFF4FF',
+        stroke: '#5F95FF',
       },
     },
   })
@@ -31,7 +30,11 @@ function layout(nodes: Node.Metadata[]) {
 
   nodes.forEach((node: Node.Metadata, index: number) => {
     const angle = stepAngle * index
-    const p = start.clone().rotate(-angle, center).scale(ratio, 1, center).round()
+    const p = start
+      .clone()
+      .rotate(-angle, center)
+      .scale(ratio, 1, center)
+      .round()
     node.x = p.x
     node.y = p.y
   })
@@ -41,7 +44,6 @@ function layout(nodes: Node.Metadata[]) {
 
 const graph = new Graph({
   container: document.getElementById('container')!,
-  grid: true,
 })
 
-graph.fromJSON(layout(nodes))
+graph.fromJSON(layout(nodes))
diff --git a/sites/x6-sites/examples/layout/general/demo/force.ts b/sites/x6-sites/examples/layout/general/demo/force.ts
@@ -3,7 +3,6 @@ import { ForceLayout } from '@antv/layout'
 
 const graph = new Graph({
   container: document.getElementById('container')!,
-  grid: true,
 })
 
 const originData = {
@@ -61,7 +60,7 @@ const getModelFromOriginData = (data: typeof originData) => {
       y: item.y,
       attrs: {
         body: {
-          fill: '#855af2',
+          fill: '#5F95FF',
           stroke: 'transparent',
         },
       },
@@ -73,8 +72,8 @@ const getModelFromOriginData = (data: typeof originData) => {
       target: item.target,
       attrs: {
         line: {
-          stroke: '#ccc',
-          strokeWidth: 1,
+          stroke: '#A2B1C3',
+          strokeWidth: 2,
           targetMarker: null,
         },
       },

diff --git a/sites/x6-sites/examples/layout/general/demo/grid.ts b/sites/x6-sites/examples/layout/general/demo/grid.ts
@@ -6,26 +6,7 @@ const data: Model.FromJSONData = {
   edges: [],
 }
 const keyPoints = [
-  20,
-  12,
-  12,
-  4,
-  18,
-  12,
-  12,
-  6,
-  16,
-  17,
-  17,
-  10,
-  10,
-  3,
-  3,
-  2,
-  2,
-  9,
-  9,
-  10,
+  20, 12, 12, 4, 18, 12, 12, 6, 16, 17, 17, 10, 10, 3, 3, 2, 2, 9, 9, 10,
 ]
 
 for (let i = 1; i <= 21; i++) {
@@ -36,7 +17,7 @@ for (let i = 1; i <= 21; i++) {
     height: 32,
     attrs: {
       body: {
-        fill: keyPoints.includes(i) ? '#fd6d6f' : '#855af2',
+        fill: '#5F95FF',
         stroke: 'transparent',
       },
       label: {
@@ -53,7 +34,8 @@ for (let i = 0; i < keyPoints.length; i += 2) {
     target: `${keyPoints[i + 1]}`,
     attrs: {
       line: {
-        stroke: '#fd6d6f',
+        stroke: '#A2B1C3',
+        strokeWidth: 2,
         targetMarker: null,
       },
     },
@@ -62,7 +44,6 @@ for (let i = 0; i < keyPoints.length; i += 2) {
 
 const graph = new Graph({
   container: document.getElementById('container')!,
-  grid: true,
 })
 
 const gridLayout = new GridLayout({

diff --git a/sites/x6-sites/examples/layout/general/demo/meta.json b/sites/x6-sites/examples/layout/general/demo/meta.json
@@ -6,39 +6,39 @@
         "zh": "网格布局",
         "en": "Grid"
       },
-      "screenshot": "https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*z0iOR7n6Wn0AAAAAAAAAAAAAARQnAQ"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*14yLQY9-FQ0AAAAAAAAAAAAAARQnAQ"
     },
     {
       "filename": "circle.ts",
       "title": {
         "zh": "环形布局",
         "en": "Circular"
       },
-      "screenshot": "https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*25RuSq-VelIAAAAAAAAAAAAAARQnAQ"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*8IF1SYl7wrwAAAAAAAAAAAAAARQnAQ"
     },
     {
       "filename": "dagre.ts",
       "title": {
         "zh": "Dagre",
         "en": "Dagre"
       },
-      "screenshot": "https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*m03UQYWtLjwAAAAAAAAAAAAAARQnAQ"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*D-QDTo_YzQgAAAAAAAAAAAAAARQnAQ"
     },
     {
       "filename": "ellipse.ts",
       "title": {
         "zh": "椭圆布局",
         "en": "Ellipse"
       },
-      "screenshot": "https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*oP93S7a2H-sAAAAAAAAAAAAAARQnAQ"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*Er8NQ7Qsap8AAAAAAAAAAAAAARQnAQ"
     },
     {
       "filename": "force.ts",
       "title": {
         "zh": "力导向布局",
         "en": "Force"
       },
-      "screenshot": "https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*1yboRpsGdBYAAAAAAAAAAAAAARQnAQ"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*0HvAR6qMEf8AAAAAAAAAAAAAARQnAQ"
     }
   ]
 }
diff --git a/sites/x6-sites/examples/layout/tree/demo/meta.json b/sites/x6-sites/examples/layout/tree/demo/meta.json
@@ -6,7 +6,7 @@
         "zh": "脑图树",
         "en": "Mindmap"
       },
-      "screenshot": "https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*iPDwRpBeLvQAAAAAAAAAAAAAARQnAQ"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*qSgRR7R6O6MAAAAAAAAAAAAAARQnAQ"
     }
   ]
 }
diff --git a/sites/x6-sites/examples/layout/tree/demo/mindmap.ts b/sites/x6-sites/examples/layout/tree/demo/mindmap.ts
@@ -3,7 +3,6 @@ import Hierarchy from '@antv/hierarchy'
 
 const graph = new Graph({
   container: document.getElementById('container')!,
-  grid: true,
   connecting: {
     connector: 'smooth',
   },
@@ -21,7 +20,7 @@ fetch('../data/algorithm-category.json')
         return 16
       },
       getHGap() {
-        return 100
+        return 80
       },
       getVGap() {
         return 1
@@ -43,7 +42,7 @@ fetch('../data/algorithm-category.json')
           height: 16,
           attrs: {
             body: {
-              fill: '#855af2',
+              fill: '#5F95FF',
               stroke: 'transparent',
             },
           },
@@ -56,7 +55,7 @@ fetch('../data/algorithm-category.json')
             target: `${item.id}`,
             attrs: {
               line: {
-                stroke: '#ccc',
+                stroke: '#A2B1C3',
                 strokeWidth: 1,
                 targetMarker: null,
               },