From 3eab73b70c3764838fce9e7e8a9165f423e6bac7 Mon Sep 17 00:00:00 2001 From: vector Date: Tue, 16 Nov 2021 08:30:34 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=F0=9F=93=9A=EF=B8=8F=20update=20layout?= =?UTF-8?q?=20demos=20(#1553)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/x6-vector/package.json | 2 +- .../examples/animation/smil/demo/meta.json | 2 +- .../examples/layout/general/demo/circle.ts | 15 ++++++----- .../examples/layout/general/demo/dagre.ts | 13 +++++---- .../examples/layout/general/demo/ellipse.ts | 16 ++++++----- .../examples/layout/general/demo/force.ts | 7 +++-- .../examples/layout/general/demo/grid.ts | 27 +++---------------- .../examples/layout/general/demo/meta.json | 10 +++---- .../examples/layout/tree/demo/meta.json | 2 +- .../examples/layout/tree/demo/mindmap.ts | 7 +++-- 10 files changed, 42 insertions(+), 59 deletions(-) diff --git a/packages/x6-vector/package.json b/packages/x6-vector/package.json index 15464ec3648..4c8f0938b78 100644 --- 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 index 4ea02f6e63d..6215e1e8053 100644 --- 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 index 4e40b93d011..78c4f8b38ac 100644 --- a/sites/x6-sites/examples/layout/general/demo/circle.ts +++ b/sites/x6-sites/examples/layout/general/demo/circle.ts @@ -5,16 +5,20 @@ 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', }, }, }) @@ -22,7 +26,6 @@ for (let i = 1; i <= 24; i++) { 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 index 4e2ec3f9732..2e070ddcbfa 100644 --- 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,8 +44,8 @@ edges.forEach((edge: [string, string]) => { target: edge[1], attrs: { line: { - stroke: '#fd6d6f', - strokeWidth: 1, + stroke: '#A2B1C3', + strokeWidth: 2, }, }, }) @@ -53,7 +53,6 @@ edges.forEach((edge: [string, string]) => { 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 index e79e4b1495d..be60da5d211 100644 --- 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)) \ No newline at end of file +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 index c0764b539d4..60eea2a0fb0 100644 --- 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 index 4f7fc18a561..10365f35a9d 100644 --- 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 index 300ba70b303..1bb9b313ddd 100644 --- a/sites/x6-sites/examples/layout/general/demo/meta.json +++ b/sites/x6-sites/examples/layout/general/demo/meta.json @@ -6,7 +6,7 @@ "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", @@ -14,7 +14,7 @@ "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", @@ -22,7 +22,7 @@ "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", @@ -30,7 +30,7 @@ "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", @@ -38,7 +38,7 @@ "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 index 42c0ca99d98..8b24dbd3847 100644 --- 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 index 1aa43653716..554c6c265c0 100644 --- 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, },