test/g6
1
0
Fork 0
mirror of https://gitee.com/antv/g6.git synced 2024-11-29 18:28:19 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

refactor: remove color usage

Browse Source
This commit is contained in:
Aaron 2024-04-23 22:11:34 +08:00
parent 1107f206f4
commit 331f059d28
70 changed files with 398 additions and 396 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/g6/__tests__/dataset/parallel-edges.json
View File

@ -48,7 +48,7 @@
"id": "edge1",
"source": "node1",
"target": "node4",
"style": { "color": "#8576FF", "lineWidth": 2, "startArrow": true }
"style": { "stroke": "#8576FF", "lineWidth": 2, "startArrow": true }
},
{
"id": "edge2",
@ -65,7 +65,7 @@
{ "id": "edge9", "source": "node1", "target": "node6" },
{ "id": "edge10", "source": "node1", "target": "node6" },
{ "id": "edge11", "source": "node1", "target": "node6" },
{ "id": "loop1", "source": "node5", "target": "node5", "style": { "color": "#8576FF", "lineWidth": 2 } },
{ "id": "loop1", "source": "node5", "target": "node5", "style": { "stroke": "#8576FF", "lineWidth": 2 } },
{ "id": "loop2", "source": "node5", "target": "node5" },
{ "id": "loop3", "source": "node5", "target": "node5" },
{ "id": "loop4", "source": "node5", "target": "node5" },

8
packages/g6/__tests__/demos/animation-element-state-switch.ts
View File

@ -27,11 +27,11 @@ export const animationElementStateSwitch: TestCase = async (context) => {
lineWidth: 2,
},
selected: {
color: 'pink',
fill: 'pink',
},
},
animation: {
update: [{ fields: ['lineWidth', 'color'] }],
update: [{ fields: ['lineWidth', 'fill'] }],
},
},
edge: {
@ -41,13 +41,13 @@ export const animationElementStateSwitch: TestCase = async (context) => {
state: {
active: {
lineWidth: 2,
color: 'pink',
stroke: 'pink',
},
},
animation: {
update: [
{
fields: ['lineWidth', 'color'],
fields: ['lineWidth', 'stroke'],
},
],
},

6
packages/g6/__tests__/demos/animation-element-style-position.ts
View File

@ -31,9 +31,9 @@ export const animationElementStylePosition: TestCase = async (context) => {
const play = () => {
graph.addNodeData([
{ id: 'node-4', style: { x: 50, y: 200, color: 'orange' } },
{ id: 'node-5', style: { x: 75, y: 150, color: 'purple' } },
{ id: 'node-6', style: { x: 200, y: 100, color: 'cyan' } },
{ id: 'node-4', style: { x: 50, y: 200, fill: 'orange' } },
{ id: 'node-5', style: { x: 75, y: 150, fill: 'purple' } },
{ id: 'node-6', style: { x: 200, y: 100, fill: 'cyan' } },
]);
graph.removeNodeData(['node-1']);
graph.updateNodeData([{ id: 'node-2', style: { x: 200, y: 200, stroke: 'green' } }]);

2
packages/g6/__tests__/demos/element-change-type.ts
View File

@ -5,7 +5,7 @@ export const elementChangeType: TestCase = async (context) => {
...context,
data: {
nodes: [
{ id: 'node-1', type: 'rect', style: { x: 100, y: 100, color: 'transparent', stroke: '#1783ff' } },
{ id: 'node-1', type: 'rect', style: { x: 100, y: 100, fill: 'transparent', stroke: '#1783ff' } },
{ id: 'node-2', style: { x: 200, y: 100 } },
],
edges: [{ id: 'edge-1', source: 'node-1', target: 'node-2' }],

2
packages/g6/__tests__/demos/element-edge-custom-arrow.ts
View File

@ -41,7 +41,7 @@ export const elementEdgeCustomArrow: TestCase = async (context) => {
edge: {
type: 'line', // 👈🏻 Edge shape type.
style: {
color: '#F6BD16',
stroke: '#F6BD16',
labelText: (d) => d.id!,
labelBackground: true,
endArrow: true,

4
packages/g6/__tests__/demos/element-edge-polyline.ts
View File

@ -144,7 +144,7 @@ export const elementEdgePolyline: TestCase = async (context) => {
type: (d) => d.type || 'rect',
style: {
size: (d) => d.style?.size || [50, 20],
color: '#f8f8f8',
fill: '#f8f8f8',
stroke: '#8b9baf',
lineWidth: 1,
labelPlacement: 'center',
@ -155,7 +155,7 @@ export const elementEdgePolyline: TestCase = async (context) => {
edge: {
type: 'polyline',
style: {
color: '#1890FF',
stroke: '#1890FF',
},
},
});

4
packages/g6/__tests__/demos/element-edge-port.ts
View File

@ -148,14 +148,14 @@ export const elementEdgePort: TestCase = async (context) => {
x: (d) => [50, 200, 300, 450][(d.data!.index as number) % 4],
y: (d) => 50 + Math.floor((d.data!.index as number) / 4) * 100,
size: 50,
color: '#f8f8f8',
fill: '#f8f8f8',
stroke: '#8b9baf',
lineWidth: 1,
},
},
edge: {
style: {
color: '#1890FF',
stroke: '#1890FF',
lineWidth: 2,
labelFontSize: 12,
labelMaxLines: 2,

2
packages/g6/__tests__/demos/element-node-donut.ts
View File

@ -14,7 +14,7 @@ export const elementNodeDonut: TestCase = async (context) => {
lineWidth: 2,
},
],
color: 'purple',
fill: 'purple',
},
},
{

6
packages/g6/__tests__/demos/element-node-html.ts
View File

@ -4,8 +4,8 @@ import { Graph } from '@/src';
export const elementNodeHTML: TestCase = async (context) => {
const data = {
nodes: [
{ id: 'html-1', style: { x: 100, y: 100, color: 'orange' }, data: { content: 'HTML NODE 1' } },
{ id: 'html-2', style: { x: 100, y: 200, color: 'pink' }, data: { content: 'HTML NODE 2' } },
{ id: 'html-1', style: { x: 100, y: 100, fill: 'orange' }, data: { content: 'HTML NODE 1' } },
{ id: 'html-2', style: { x: 100, y: 200, fill: 'pink' }, data: { content: 'HTML NODE 2' } },
],
edges: [{ source: 'html-1', target: 'html-2' }],
};
@ -18,7 +18,7 @@ export const elementNodeHTML: TestCase = async (context) => {
style: {
size: [240, 80],
innerHTML: (d: NodeData) => `
<div style="width: 100%; height: 100%; background: ${d.style!.color}; display: flex; justify-content: center; align-items: center;">
<div style="width: 100%; height: 100%; background: ${d.style!.fill}; display: flex; justify-content: center; align-items: center;">
<span style="color: #fff; font-size: 20px;">
${d.data!.content}
</span>

2
packages/g6/__tests__/demos/element-node-svg-icon.ts
View File

@ -14,7 +14,7 @@ export const elementNodeSVGIcon: TestCase = async (context) => {
node: {
style: {
size: 40,
color: 'transparent',
fill: 'transparent',
iconSrc: (d) => (d?.data?.type === 'user' ? user : comment),
iconWidth: 40,
iconHeight: 40,

4
packages/g6/__tests__/demos/element-state.ts
View File

@ -22,7 +22,7 @@ export const elementState: TestCase = async (context) => {
},
state: {
selected: {
color: 'pink',
fill: 'pink',
},
},
animation: {
@ -36,7 +36,7 @@ export const elementState: TestCase = async (context) => {
state: {
active: {
lineWidth: 2,
color: 'pink',
stroke: 'pink',
},
},
animation: {

6
packages/g6/__tests__/demos/graph-to-data-url.ts
View File

@ -7,11 +7,11 @@ export const graphToDataURL: TestCase = async (context) => {
background: '#f4df4d',
data: {
nodes: [
{ id: 'node-1', style: { x: 50, y: 50, color: 'purple', halo: true, labelText: 'node-1' } },
{ id: 'node-2', style: { x: 100, y: 50, color: 'pink', halo: true, labelText: 'node-2' } },
{ id: 'node-1', style: { x: 50, y: 50, fill: 'purple', halo: true, labelText: 'node-1' } },
{ id: 'node-2', style: { x: 100, y: 50, fill: 'pink', halo: true, labelText: 'node-2' } },
{ id: 'node-3', style: { x: 150, y: 50, iconSrc: icon, iconWidth: 30, iconHeight: 30, labelText: 'node-2' } },
],
edges: [{ id: 'edge-1', source: 'node-1', target: 'node-2', style: { color: 'orange', lineWidth: 2 } }],
edges: [{ id: 'edge-1', source: 'node-1', target: 'node-2', style: { stroke: 'orange', lineWidth: 2 } }],
},
behaviors: ['zoom-canvas', 'drag-canvas', 'drag-element'],
});

2
packages/g6/__tests__/demos/layout-antv-dagre-flow.ts
View File

@ -21,7 +21,7 @@ export const layoutAntVDagreFlow: TestCase = async (context) => {
radius: 20,
endArrow: true,
lineWidth: 2,
color: '#C2C8D5',
stroke: '#C2C8D5',
},
},
layout: {

4
packages/g6/__tests__/demos/layout-force-lattice.ts
View File

@ -19,12 +19,12 @@ export const layoutForceLattice: TestCase = async (context) => {
node: {
style: {
size: 10,
color: '#000',
fill: '#000',
},
},
edge: {
style: {
color: '#000',
stroke: '#000',
},
},
behaviors: [{ type: 'drag-element-force' }, 'zoom-canvas'],

8
packages/g6/__tests__/demos/plugin-history.ts
View File

@ -49,15 +49,15 @@ export const pluginHistory: TestCase = async (context) => {
visible: true,
add: () => {
graph.addData({
nodes: [{ id: 'node-5', style: { x: 200, y: 100, color: 'pink' } }],
edges: [{ source: 'node-1', target: 'node-5', style: { color: 'brown' } }],
nodes: [{ id: 'node-5', style: { x: 200, y: 100, fill: 'pink' } }],
edges: [{ source: 'node-1', target: 'node-5', style: { stroke: 'brown' } }],
});
graph.draw();
},
update: () => {
graph.updateData({
nodes: [{ id: 'node-1', style: { x: 150, y: 100, color: 'red' } }],
edges: [{ id: 'edge-1', style: { color: 'green' } }],
nodes: [{ id: 'node-1', style: { x: 150, y: 100, fill: 'red' } }],
edges: [{ id: 'edge-1', style: { stroke: 'green' } }],
});
graph.draw();
},

2
packages/g6/__tests__/demos/plugin-legend.ts
View File

@ -34,7 +34,7 @@ export const pluginLegend: TestCase = async (context) => {
style: {
labelText: (d) => d.id,
lineWidth: 0,
color: (item: any) => {
fill: (item: any) => {
if (item.data.cluster === 'a') return 'red';
if (item.data.cluster === 'b') return 'blue';
if (item.data.cluster === 'c') return 'green';

4
packages/g6/__tests__/demos/transform-process-parallel-edges.ts
View File

@ -52,13 +52,13 @@ export const transformProcessParallelEdges: TestCase = async (context) => {
id: 'new-edge',
source: 'node1',
target: 'node4',
style: { color: '#FF9800', lineWidth: 2 },
style: { stroke: '#FF9800', lineWidth: 2 },
},
{
id: 'new-loop',
source: 'node5',
target: 'node5',
style: { color: '#FF9800', lineWidth: 2 },
style: { stroke: '#FF9800', lineWidth: 2 },
},
]);
graph.draw();

2
packages/g6/__tests__/demos/viewport-fit.ts
View File

@ -14,7 +14,7 @@ export const viewportFit: TestCase = async (context) => {
node: {
style: {
size: 50,
color: (d) => (d.id === '1' ? '#d4414c' : '#2f363d'),
fill: (d) => (d.id === '1' ? '#d4414c' : '#2f363d'),
},
},
behaviors: ['zoom-canvas', 'drag-canvas'],

8
packages/g6/__tests__/snapshots/behaviors/behavior-create-edge-click/click-edge1-move.svg
View File

@ -18,11 +18,11 @@
<g fill="none" marker-start="false" marker-end="true" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="true" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,100,100)">
<path fill="none" d="M 140.51316701949486,46.83772233983163 L 4.743416490252569,1.5811388300841902" stroke-width="1" pointer-events="none" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 140.51316701949486,46.83772233983163 L 4.743416490252569,1.5811388300841902" stroke-width="3" pointer-events="none" stroke="transparent"/>
<path fill="none" d="M 140.51316701949486,46.83772233983163 L 4.743416490252569,1.5811388300841902" stroke-width="1" stroke="rgba(153,173,209,1)" pointer-events="none"/>
<path fill="none" d="M 140.51316701949486,46.83772233983163 L 4.743416490252569,1.5811388300841902" stroke-width="3" stroke="transparent" pointer-events="none"/>
<g transform="matrix(0.948683,0.316228,-0.316228,0.948683,4.743416,1.581139)">
<path fill="rgba(153,173,209,1)" d="M 0,4 L 8,0 L 8,8 Z" transform="translate(-4,-4)" stroke-width="1" pointer-events="none" stroke="rgba(153,173,209,1)" width="8" height="8" stroke-dasharray="0,0"/>
<path fill="transparent" d="M 0,4 L 8,0 L 8,8 Z" transform="translate(-4,-4)" stroke-width="3" pointer-events="none" stroke="transparent" width="8" height="8" stroke-dasharray="0,0"/>
<path fill="rgba(153,173,209,1)" d="M 0,4 L 8,0 L 8,8 Z" transform="translate(-4,-4)" stroke-width="1" stroke="rgba(153,173,209,1)" pointer-events="none" width="8" height="8" stroke-dasharray="0,0"/>
<path fill="transparent" d="M 0,4 L 8,0 L 8,8 Z" transform="translate(-4,-4)" stroke-width="3" stroke="transparent" pointer-events="none" width="8" height="8" stroke-dasharray="0,0"/>
</g>
</g>
</g>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.5 KiB

After

Width:  |  Height:  |  Size: 3.5 KiB

8
packages/g6/__tests__/snapshots/behaviors/behavior-create-edge-drag/drag-edge1-move.svg
View File

@ -18,11 +18,11 @@
<g fill="none" marker-start="false" marker-end="true" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="true" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,100,100)">
<path fill="none" d="M 140.51316701949486,46.83772233983163 L 4.743416490252569,1.5811388300841902" stroke-width="1" pointer-events="none" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 140.51316701949486,46.83772233983163 L 4.743416490252569,1.5811388300841902" stroke-width="3" pointer-events="none" stroke="transparent"/>
<path fill="none" d="M 140.51316701949486,46.83772233983163 L 4.743416490252569,1.5811388300841902" stroke-width="1" stroke="rgba(153,173,209,1)" pointer-events="none"/>
<path fill="none" d="M 140.51316701949486,46.83772233983163 L 4.743416490252569,1.5811388300841902" stroke-width="3" stroke="transparent" pointer-events="none"/>
<g transform="matrix(0.948683,0.316228,-0.316228,0.948683,4.743416,1.581139)">
<path fill="rgba(153,173,209,1)" d="M 0,4 L 8,0 L 8,8 Z" transform="translate(-4,-4)" stroke-width="1" pointer-events="none" stroke="rgba(153,173,209,1)" width="8" height="8" stroke-dasharray="0,0"/>
<path fill="transparent" d="M 0,4 L 8,0 L 8,8 Z" transform="translate(-4,-4)" stroke-width="3" pointer-events="none" stroke="transparent" width="8" height="8" stroke-dasharray="0,0"/>
<path fill="rgba(153,173,209,1)" d="M 0,4 L 8,0 L 8,8 Z" transform="translate(-4,-4)" stroke-width="1" stroke="rgba(153,173,209,1)" pointer-events="none" width="8" height="8" stroke-dasharray="0,0"/>
<path fill="transparent" d="M 0,4 L 8,0 L 8,8 Z" transform="translate(-4,-4)" stroke-width="3" stroke="transparent" pointer-events="none" width="8" height="8" stroke-dasharray="0,0"/>
</g>
</g>
</g>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.5 KiB

After

Width:  |  Height:  |  Size: 3.5 KiB

62
packages/g6/__tests__/snapshots/layouts/compact-box/left-align.svg
View File

@ -218,7 +218,7 @@
<g fill="none" transform="matrix(1,0,0,1,0,0)">
<g fill="none" transform="matrix(0,1,-1,0,-48,-168)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,12.999999,-0.000002)">
<g transform="matrix(1,0,0,1,0,0)">
@ -230,7 +230,7 @@
</g>
<g fill="none" transform="matrix(0,1,-1,0,-440,8)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,-0.000030)">
<g transform="matrix(1,0,0,1,0,0)">
@ -242,7 +242,7 @@
</g>
<g fill="none" transform="matrix(0,1,-1,0,-636,184)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,12.999994,0.000006)">
<g transform="matrix(1,0,0,1,0,0)">
@ -254,7 +254,7 @@
</g>
<g fill="none" transform="matrix(0,1,-1,0,-580,184)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,12.999996,0.000006)">
<g transform="matrix(1,0,0,1,0,0)">
@ -266,7 +266,7 @@
</g>
<g fill="none" transform="matrix(0,1,-1,0,-524,184)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,12.999998,0.000006)">
<g transform="matrix(1,0,0,1,0,0)">
@ -278,7 +278,7 @@
</g>
<g fill="none" transform="matrix(0,1,-1,0,-468,184)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,-0.000024)">
<g transform="matrix(1,0,0,1,0,0)">
@ -290,7 +290,7 @@
</g>
<g fill="none" transform="matrix(0,1,-1,0,-412,184)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13.000002,-0.000024)">
<g transform="matrix(1,0,0,1,0,0)">
@ -302,7 +302,7 @@
</g>
<g fill="none" transform="matrix(0,1,-1,0,-356,184)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,12.999989,-0.000024)">
<g transform="matrix(1,0,0,1,0,0)">
@ -314,7 +314,7 @@
</g>
<g fill="none" transform="matrix(0,1,-1,0,-300,184)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,12.999990,-0.000024)">
<g transform="matrix(1,0,0,1,0,0)">
@ -326,7 +326,7 @@
</g>
<g fill="none" transform="matrix(0,1,-1,0,-244,184)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,12.999992,-0.000009)">
<g transform="matrix(1,0,0,1,0,0)">
@ -338,7 +338,7 @@
</g>
<g fill="none" transform="matrix(0,1,-1,0,-6,8)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -350,7 +350,7 @@
</g>
<g fill="none" transform="matrix(0,1,-1,0,-188,184)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,12.999994,-0.000009)">
<g transform="matrix(1,0,0,1,0,0)">
@ -362,7 +362,7 @@
</g>
<g fill="none" transform="matrix(0,1,-1,0,-328,360)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,12.999990,-0.000018)">
<g transform="matrix(1,0,0,1,0,0)">
@ -374,7 +374,7 @@
</g>
<g fill="none" transform="matrix(0,1,-1,0,-272,360)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,12.999991,-0.000018)">
<g transform="matrix(1,0,0,1,0,0)">
@ -386,7 +386,7 @@
</g>
<g fill="none" transform="matrix(0,1,-1,0,-216,360)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,12.999993,-0.000003)">
<g transform="matrix(1,0,0,1,0,0)">
@ -398,7 +398,7 @@
</g>
<g fill="none" transform="matrix(0,1,-1,0,-160,360)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,12.999995,-0.000003)">
<g transform="matrix(1,0,0,1,0,0)">
@ -410,7 +410,7 @@
</g>
<g fill="none" transform="matrix(0,1,-1,0,-104,360)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,12.999997,-0.000003)">
<g transform="matrix(1,0,0,1,0,0)">
@ -422,7 +422,7 @@
</g>
<g fill="none" transform="matrix(0,1,-1,0,-48,360)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,12.999999,-0.000003)">
<g transform="matrix(1,0,0,1,0,0)">
@ -434,7 +434,7 @@
</g>
<g fill="none" transform="matrix(0,1,-1,0,36,184)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13.000002,0.000002)">
<g transform="matrix(1,0,0,1,0,0)">
@ -446,7 +446,7 @@
</g>
<g fill="none" transform="matrix(0,1,-1,0,8,360)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -458,7 +458,7 @@
</g>
<g fill="none" transform="matrix(0,1,-1,0,64,360)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -470,7 +470,7 @@
</g>
<g fill="none" transform="matrix(0,1,-1,0,176,184)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,12.999991,0.000006)">
<g transform="matrix(1,0,0,1,0,0)">
@ -482,7 +482,7 @@
</g>
<g fill="none" transform="matrix(0,1,-1,0,120,360)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,12.999974,0.000005)">
<g transform="matrix(1,0,0,1,0,0)">
@ -494,7 +494,7 @@
</g>
<g fill="none" transform="matrix(0,1,-1,0,176,360)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,12.999976,0.000012)">
<g transform="matrix(1,0,0,1,0,0)">
@ -506,7 +506,7 @@
</g>
<g fill="none" transform="matrix(0,1,-1,0,232,360)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,12.999978,0.000012)">
<g transform="matrix(1,0,0,1,0,0)">
@ -518,7 +518,7 @@
</g>
<g fill="none" transform="matrix(0,1,-1,0,344,8)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -530,7 +530,7 @@
</g>
<g fill="none" transform="matrix(0,1,-1,0,232,184)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,12.999993,0.000006)">
<g transform="matrix(1,0,0,1,0,0)">
@ -542,7 +542,7 @@
</g>
<g fill="none" transform="matrix(0,1,-1,0,288,184)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,12.999995,0.000006)">
<g transform="matrix(1,0,0,1,0,0)">
@ -554,7 +554,7 @@
</g>
<g fill="none" transform="matrix(0,1,-1,0,344,184)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,12.999997,0.000006)">
<g transform="matrix(1,0,0,1,0,0)">
@ -566,7 +566,7 @@
</g>
<g fill="none" transform="matrix(0,1,-1,0,400,184)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,12.999999,0.000006)">
<g transform="matrix(1,0,0,1,0,0)">
@ -578,7 +578,7 @@
</g>
<g fill="none" transform="matrix(0,1,-1,0,456,184)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13.000001,0.000006)">
<g transform="matrix(1,0,0,1,0,0)">

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 35 KiB

After

Width:  |  Height:  |  Size: 35 KiB

62
packages/g6/__tests__/snapshots/layouts/compact-box/top-to-bottom.svg
View File

@ -218,7 +218,7 @@
<g fill="none" transform="matrix(1,0,0,1,0,0)">
<g fill="none" transform="matrix(1,0,0,1,-218,-28)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-6,-6)" cx="6" cy="6" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
<circle fill="rgba(255,255,255,1)" transform="translate(-6,-6)" cx="6" cy="6" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,6,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -230,7 +230,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,18,-343)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-6,-6)" cx="6" cy="6" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
<circle fill="rgba(255,255,255,1)" transform="translate(-6,-6)" cx="6" cy="6" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,6,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -242,7 +242,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,252,-469)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-6,-6)" cx="6" cy="6" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
<circle fill="rgba(255,255,255,1)" transform="translate(-6,-6)" cx="6" cy="6" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,6,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -254,7 +254,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,252,-433)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-6,-6)" cx="6" cy="6" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
<circle fill="rgba(255,255,255,1)" transform="translate(-6,-6)" cx="6" cy="6" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,6,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -266,7 +266,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,252,-397)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-6,-6)" cx="6" cy="6" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
<circle fill="rgba(255,255,255,1)" transform="translate(-6,-6)" cx="6" cy="6" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,6,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -278,7 +278,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,252,-361)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-6,-6)" cx="6" cy="6" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
<circle fill="rgba(255,255,255,1)" transform="translate(-6,-6)" cx="6" cy="6" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,6,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -290,7 +290,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,252,-325)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-6,-6)" cx="6" cy="6" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
<circle fill="rgba(255,255,255,1)" transform="translate(-6,-6)" cx="6" cy="6" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,6,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -302,7 +302,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,252,-289)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-6,-6)" cx="6" cy="6" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
<circle fill="rgba(255,255,255,1)" transform="translate(-6,-6)" cx="6" cy="6" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,6,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -314,7 +314,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,252,-253)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-6,-6)" cx="6" cy="6" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
<circle fill="rgba(255,255,255,1)" transform="translate(-6,-6)" cx="6" cy="6" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,6,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -326,7 +326,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,252,-217)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-6,-6)" cx="6" cy="6" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
<circle fill="rgba(255,255,255,1)" transform="translate(-6,-6)" cx="6" cy="6" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,6,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -338,7 +338,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,18,26)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-6,-6)" cx="6" cy="6" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
<circle fill="rgba(255,255,255,1)" transform="translate(-6,-6)" cx="6" cy="6" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,6,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -350,7 +350,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,247,-91)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-6,-6)" cx="6" cy="6" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
<circle fill="rgba(255,255,255,1)" transform="translate(-6,-6)" cx="6" cy="6" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,6,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -362,7 +362,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,483,-181)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-6,-6)" cx="6" cy="6" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
<circle fill="rgba(255,255,255,1)" transform="translate(-6,-6)" cx="6" cy="6" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,6,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -374,7 +374,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,483,-145)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-6,-6)" cx="6" cy="6" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
<circle fill="rgba(255,255,255,1)" transform="translate(-6,-6)" cx="6" cy="6" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,6,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -386,7 +386,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,483,-109)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-6,-6)" cx="6" cy="6" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
<circle fill="rgba(255,255,255,1)" transform="translate(-6,-6)" cx="6" cy="6" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,6,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -398,7 +398,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,483,-73)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-6,-6)" cx="6" cy="6" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
<circle fill="rgba(255,255,255,1)" transform="translate(-6,-6)" cx="6" cy="6" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,6,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -410,7 +410,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,483,-37)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-6,-6)" cx="6" cy="6" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
<circle fill="rgba(255,255,255,1)" transform="translate(-6,-6)" cx="6" cy="6" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,6,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -422,7 +422,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,483,-1)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-6,-6)" cx="6" cy="6" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
<circle fill="rgba(255,255,255,1)" transform="translate(-6,-6)" cx="6" cy="6" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,6,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -434,7 +434,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,247,53)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-6,-6)" cx="6" cy="6" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
<circle fill="rgba(255,255,255,1)" transform="translate(-6,-6)" cx="6" cy="6" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,6,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -446,7 +446,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,474,35)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-6,-6)" cx="6" cy="6" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
<circle fill="rgba(255,255,255,1)" transform="translate(-6,-6)" cx="6" cy="6" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,6,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -458,7 +458,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,474,71)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-6,-6)" cx="6" cy="6" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
<circle fill="rgba(255,255,255,1)" transform="translate(-6,-6)" cx="6" cy="6" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,6,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -470,7 +470,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,247,143)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-6,-6)" cx="6" cy="6" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
<circle fill="rgba(255,255,255,1)" transform="translate(-6,-6)" cx="6" cy="6" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,6,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -482,7 +482,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,473,107)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-6,-6)" cx="6" cy="6" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
<circle fill="rgba(255,255,255,1)" transform="translate(-6,-6)" cx="6" cy="6" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,6,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -494,7 +494,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,473,143)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-6,-6)" cx="6" cy="6" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
<circle fill="rgba(255,255,255,1)" transform="translate(-6,-6)" cx="6" cy="6" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,6,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -506,7 +506,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,473,179)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-6,-6)" cx="6" cy="6" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
<circle fill="rgba(255,255,255,1)" transform="translate(-6,-6)" cx="6" cy="6" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,6,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -518,7 +518,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,18,287)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-6,-6)" cx="6" cy="6" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
<circle fill="rgba(255,255,255,1)" transform="translate(-6,-6)" cx="6" cy="6" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,6,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -530,7 +530,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,248,215)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-6,-6)" cx="6" cy="6" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
<circle fill="rgba(255,255,255,1)" transform="translate(-6,-6)" cx="6" cy="6" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,6,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -542,7 +542,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,248,251)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-6,-6)" cx="6" cy="6" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
<circle fill="rgba(255,255,255,1)" transform="translate(-6,-6)" cx="6" cy="6" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,6,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -554,7 +554,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,248,287)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-6,-6)" cx="6" cy="6" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
<circle fill="rgba(255,255,255,1)" transform="translate(-6,-6)" cx="6" cy="6" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,6,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -566,7 +566,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,248,323)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-6,-6)" cx="6" cy="6" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
<circle fill="rgba(255,255,255,1)" transform="translate(-6,-6)" cx="6" cy="6" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,6,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -578,7 +578,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,248,359)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-6,-6)" cx="6" cy="6" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
<circle fill="rgba(255,255,255,1)" transform="translate(-6,-6)" cx="6" cy="6" stroke-width="1" stroke="rgba(0,0,0,1)" r="6"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,6,0)">
<g transform="matrix(1,0,0,1,0,0)">

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 34 KiB

After

Width:  |  Height:  |  Size: 34 KiB

62
packages/g6/__tests__/snapshots/layouts/mindmap/h-custom-side.svg
View File

@ -218,7 +218,7 @@
<g fill="none" transform="matrix(1,0,0,1,0,0)">
<g fill="none" transform="matrix(1,0,0,1,-108,-28)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -230,7 +230,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,-224,-28)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -242,7 +242,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,-340,-154)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -254,7 +254,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,-340,-118)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -266,7 +266,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,-340,-82)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -278,7 +278,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,-340,-46)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -290,7 +290,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,-340,-10)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -302,7 +302,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,-340,26)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -314,7 +314,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,-340,62)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -326,7 +326,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,-340,98)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -338,7 +338,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,8,-158.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -350,7 +350,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,124,-275.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -362,7 +362,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,240,-365.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -374,7 +374,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,240,-329.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -386,7 +386,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,240,-293.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -398,7 +398,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,240,-257.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -410,7 +410,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,240,-221.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -422,7 +422,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,240,-185.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -434,7 +434,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,124,-131.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -446,7 +446,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,240,-149.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -458,7 +458,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,240,-113.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -470,7 +470,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,124,-41.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -482,7 +482,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,240,-77.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -494,7 +494,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,240,-41.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -506,7 +506,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,240,-5.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -518,7 +518,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,8,102.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -530,7 +530,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,124,30.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -542,7 +542,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,124,66.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -554,7 +554,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,124,102.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -566,7 +566,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,124,138.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -578,7 +578,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,124,174.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 35 KiB

After

Width:  |  Height:  |  Size: 35 KiB

62
packages/g6/__tests__/snapshots/layouts/mindmap/h-left.svg
View File

@ -218,7 +218,7 @@
<g fill="none" transform="matrix(1,0,0,1,0,0)">
<g fill="none" transform="matrix(1,0,0,1,-208,-28)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -230,7 +230,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,-424,-343)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -242,7 +242,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,-640,-469)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -254,7 +254,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,-640,-433)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -266,7 +266,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,-640,-397)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -278,7 +278,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,-640,-361)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -290,7 +290,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,-640,-325)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -302,7 +302,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,-640,-289)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -314,7 +314,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,-640,-253)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -326,7 +326,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,-640,-217)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -338,7 +338,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,-424,26)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -350,7 +350,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,-640,-91)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -362,7 +362,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,-856,-181)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -374,7 +374,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,-856,-145)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -386,7 +386,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,-856,-109)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -398,7 +398,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,-856,-73)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -410,7 +410,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,-856,-37)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -422,7 +422,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,-856,-1)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -434,7 +434,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,-640,53)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -446,7 +446,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,-856,35)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -458,7 +458,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,-856,71)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -470,7 +470,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,-640,143)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -482,7 +482,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,-856,107)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -494,7 +494,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,-856,143)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -506,7 +506,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,-856,179)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -518,7 +518,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,-424,287)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -530,7 +530,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,-640,215)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -542,7 +542,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,-640,251)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -554,7 +554,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,-640,287)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -566,7 +566,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,-640,323)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -578,7 +578,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,-640,359)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)">

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 35 KiB

After

Width:  |  Height:  |  Size: 35 KiB

62
packages/g6/__tests__/snapshots/layouts/mindmap/h-right.svg
View File

@ -218,7 +218,7 @@
<g fill="none" transform="matrix(1,0,0,1,0,0)">
<g fill="none" transform="matrix(1,0,0,1,-208,-28)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -230,7 +230,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,8,-343)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -242,7 +242,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,224,-469)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -254,7 +254,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,224,-433)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -266,7 +266,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,224,-397)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -278,7 +278,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,224,-361)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -290,7 +290,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,224,-325)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -302,7 +302,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,224,-289)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -314,7 +314,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,224,-253)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -326,7 +326,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,224,-217)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -338,7 +338,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,8,26)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -350,7 +350,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,224,-91)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -362,7 +362,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,440,-181)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -374,7 +374,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,440,-145)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -386,7 +386,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,440,-109)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -398,7 +398,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,440,-73)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -410,7 +410,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,440,-37)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -422,7 +422,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,440,-1)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -434,7 +434,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,224,53)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -446,7 +446,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,440,35)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -458,7 +458,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,440,71)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -470,7 +470,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,224,143)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -482,7 +482,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,440,107)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -494,7 +494,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,440,143)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -506,7 +506,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,440,179)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -518,7 +518,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,8,287)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -530,7 +530,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,224,215)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -542,7 +542,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,224,251)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -554,7 +554,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,224,287)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -566,7 +566,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,224,323)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -578,7 +578,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,224,359)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 35 KiB

After

Width:  |  Height:  |  Size: 35 KiB

62
packages/g6/__tests__/snapshots/layouts/mindmap/h.svg
View File

@ -218,7 +218,7 @@
<g fill="none" transform="matrix(1,0,0,1,0,0)">
<g fill="none" transform="matrix(1,0,0,1,-108,-28)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -230,7 +230,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,8,-212.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -242,7 +242,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,124,-338.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -254,7 +254,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,124,-302.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -266,7 +266,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,124,-266.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -278,7 +278,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,124,-230.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -290,7 +290,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,124,-194.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -302,7 +302,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,124,-158.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -314,7 +314,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,124,-122.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -326,7 +326,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,124,-86.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -338,7 +338,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,8,156.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -350,7 +350,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,124,39.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -362,7 +362,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,240,-50.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -374,7 +374,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,240,-14.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -386,7 +386,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,240,21.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -398,7 +398,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,240,57.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -410,7 +410,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,240,93.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -422,7 +422,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,240,129.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -434,7 +434,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,124,183.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -446,7 +446,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,240,165.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -458,7 +458,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,240,201.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -470,7 +470,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,124,273.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -482,7 +482,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,240,237.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -494,7 +494,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,240,273.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -506,7 +506,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,240,309.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -518,7 +518,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,-224,-28)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -530,7 +530,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,-340,-100)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -542,7 +542,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,-340,-64)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -554,7 +554,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,-340,-28)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -566,7 +566,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,-340,8)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)">
@ -578,7 +578,7 @@
</g>
<g fill="none" transform="matrix(1,0,0,1,-340,44)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
<circle fill="rgba(239,244,255,1)" transform="translate(-13,-13)" cx="13" cy="13" stroke-width="1" stroke="rgba(95,149,255,1)" r="13"/>
</g>
<g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)">

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 35 KiB

After

Width:  |  Height:  |  Size: 35 KiB

12
packages/g6/__tests__/snapshots/runtime/element/default.svg
View File

@ -20,11 +20,11 @@
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="6"/>
<g transform="matrix(1,0,0,1,130.366562,110.733124)">
<path fill="none" d="M 14.266873708001015,0 L 0,28.53374741600203" stroke-width="12" stroke="rgba(166,54,3,1)" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
<path fill="none" d="M 14.266873708001015,0 L 0,28.53374741600203" stroke-width="12" stroke="rgba(255,0,0,1)" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
<path fill="none" d="M 14.266873708001015,0 L 0,28.53374741600203" stroke-width="14" stroke="transparent" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
</g>
<g transform="matrix(1,0,0,1,130.366562,110.733124)">
<path fill="none" d="M 14.266873708001015,0 L 0,28.53374741600203" stroke-width="4" stroke="rgba(166,54,3,1)"/>
<path fill="none" d="M 14.266873708001015,0 L 0,28.53374741600203" stroke-width="4" stroke="rgba(255,0,0,1)"/>
<path fill="none" d="M 14.266873708001015,0 L 0,28.53374741600203" stroke-width="6" stroke="transparent"/>
</g>
</g>
@ -32,20 +32,20 @@
<g fill="none" transform="matrix(1,0,0,1,0,0)">
<g fill="none" transform="matrix(1,0,0,1,100,100)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(158,1,66,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="1" stroke="rgba(255,192,203,1)" r="12"/>
<circle fill="rgba(0,0,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="1" stroke="rgba(255,192,203,1)" r="12"/>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,150,100)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(213,62,79,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
<circle fill="rgba(255,0,0,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,125,150)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="none" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="12" stroke="rgba(244,109,67,1)" stroke-opacity="0.25" r="12" stroke-dasharray="0,0" pointer-events="none"/>
<circle fill="none" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="12" stroke="rgba(128,0,128,1)" stroke-opacity="0.25" r="12" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(244,109,67,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="3" stroke="rgba(0,0,0,1)" r="12"/>
<circle fill="rgba(128,0,128,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="3" stroke="rgba(0,0,0,1)" r="12"/>
</g>
</g>
</g>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.4 KiB

After

Width:  |  Height:  |  Size: 3.4 KiB

4
packages/g6/__tests__/snapshots/runtime/graph/graph/after-draw.svg
View File

@ -15,12 +15,12 @@
<g fill="none" transform="matrix(1,0,0,1,0,0)">
<g fill="none" transform="matrix(1,0,0,1,0,0)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
<circle fill="rgba(47,54,61,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,0,0)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
<circle fill="rgba(47,54,61,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
</g>
</g>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

2
packages/g6/__tests__/snapshots/runtime/graph/graph/after-layout.svg
View File

@ -15,7 +15,7 @@
<g fill="none" transform="matrix(1,0,0,1,0,0)">
<g fill="none" transform="matrix(1,0,0,1,235.821030,257.285004)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
<circle fill="rgba(47,54,61,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,264.178955,242.714981)">

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

2
packages/g6/__tests__/snapshots/runtime/graph/graph/after-rotate-90.svg
View File

@ -15,7 +15,7 @@
<g fill="none" transform="matrix(1,0,0,1,0,0)">
<g fill="none" transform="matrix(1,0,0,1,235.821030,257.285004)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
<circle fill="rgba(47,54,61,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,264.178955,242.714981)">

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

2
packages/g6/__tests__/snapshots/runtime/graph/graph/after-translate-node-1.svg
View File

@ -15,7 +15,7 @@
<g fill="none" transform="matrix(1,0,0,1,0,0)">
<g fill="none" transform="matrix(1,0,0,1,235.821030,257.285004)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
<circle fill="rgba(47,54,61,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,364.178955,342.714996)">

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

2
packages/g6/__tests__/snapshots/runtime/graph/graph/after-translate.svg
View File

@ -15,7 +15,7 @@
<g fill="none" transform="matrix(1,0,0,1,0,0)">
<g fill="none" transform="matrix(1,0,0,1,235.821030,257.285004)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
<circle fill="rgba(47,54,61,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,264.178955,242.714981)">

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

2
packages/g6/__tests__/snapshots/runtime/graph/graph/after-zoom-2.svg
View File

@ -15,7 +15,7 @@
<g fill="none" transform="matrix(1,0,0,1,0,0)">
<g fill="none" transform="matrix(1,0,0,1,235.821030,257.285004)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
<circle fill="rgba(47,54,61,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,264.178955,242.714981)">

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

68
packages/g6/__tests__/snapshots/runtime/graph/graph/before-draw.svg
View File

@ -428,172 +428,172 @@
<g fill="none" transform="matrix(1,0,0,1,0,0)">
<g fill="none" transform="matrix(1,0,0,1,330.209595,280.245056)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
<circle fill="rgba(47,54,61,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,339.094788,315.543945)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
<circle fill="rgba(47,54,61,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,370.968445,288.851654)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
<circle fill="rgba(47,54,61,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,362.906281,318.573822)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
<circle fill="rgba(47,54,61,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,390.833374,261.381805)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
<circle fill="rgba(47,54,61,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,394.190338,288.745087)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
<circle fill="rgba(47,54,61,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,431.701477,272.072021)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
<circle fill="rgba(47,54,61,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,364.478424,257.281433)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
<circle fill="rgba(47,54,61,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,318.348206,321.429230)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
<circle fill="rgba(47,54,61,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,302.295441,260.872406)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
<circle fill="rgba(47,54,61,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,266.383606,249.501328)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
<circle fill="rgba(47,54,61,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,254.339722,283.957214)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
<circle fill="rgba(47,54,61,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,304.881592,224.778290)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
<circle fill="rgba(47,54,61,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,344.266449,234.282791)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
<circle fill="rgba(47,54,61,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,290.466095,299.298279)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
<circle fill="rgba(47,54,61,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,355.900360,303.345215)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
<circle fill="rgba(47,54,61,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,247.790298,252.839096)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
<circle fill="rgba(47,54,61,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,216.018387,234.606628)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
<circle fill="rgba(47,54,61,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,215.189865,204.355621)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
<circle fill="rgba(47,54,61,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,174.723480,192.877380)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
<circle fill="rgba(47,54,61,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,235.141846,198.491043)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
<circle fill="rgba(47,54,61,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,229.251373,229.822601)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
<circle fill="rgba(47,54,61,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,181.786972,243.796219)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
<circle fill="rgba(47,54,61,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,124.348000,190.456802)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
<circle fill="rgba(47,54,61,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,220.322205,273.324493)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
<circle fill="rgba(47,54,61,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,156.547409,271.011017)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
<circle fill="rgba(47,54,61,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,171.814499,279.656586)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
<circle fill="rgba(47,54,61,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,108.001213,157.540222)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
<circle fill="rgba(47,54,61,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,138.816025,229.647766)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
<circle fill="rgba(47,54,61,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,91.191887,173.894730)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
<circle fill="rgba(47,54,61,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,147.265244,218.262314)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
<circle fill="rgba(47,54,61,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,156.864365,206.825790)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
<circle fill="rgba(47,54,61,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,137.782242,257.992889)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
<circle fill="rgba(47,54,61,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,125.874176,224.421051)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
<circle fill="rgba(212,65,76,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
</g>
</g>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 40 KiB

After

Width:  |  Height:  |  Size: 40 KiB

2
packages/g6/__tests__/snapshots/runtime/graph/graph/before-layout.svg
View File

@ -15,7 +15,7 @@
<g fill="none" transform="matrix(1,0,0,1,0,0)">
<g fill="none" transform="matrix(1,0,0,1,0,0)">
<g transform="matrix(1,0,0,1,0,0)">
<circle fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
<circle fill="rgba(47,54,61,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
</g>
</g>
<g fill="none" transform="matrix(1,0,0,1,0,0)">

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

20
packages/g6/__tests__/snapshots/transforms/transform-process-parallel-edges/merge-mode.svg
View File

@ -7,19 +7,19 @@
<g fill="none" marker-start="true" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="true" marker-end="false" stroke="transparent" stroke-width="5"/>
<g transform="matrix(1,0,0,1,258.171417,91.998779)">
<path fill="none" d="M 1.5857565532973814,111.00295873081423 L 1.6571778372116341,116.00244860481178 L 0,0" stroke-width="3" stroke-dasharray="2,2" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 1.5857565532973814,111.00295873081423 L 1.6571778372116341,116.00244860481178 L 0,0" stroke-width="5" stroke-dasharray="2,2" stroke="transparent"/>
<path fill="none" d="M 1.5857565532973814,111.00295873081423 L 1.6571778372116341,116.00244860481178 L 0,0" stroke-width="3" stroke="rgba(153,173,209,1)" stroke-dasharray="2,2"/>
<path fill="none" d="M 1.5857565532973814,111.00295873081423 L 1.6571778372116341,116.00244860481178 L 0,0" stroke-width="5" stroke="transparent" stroke-dasharray="2,2"/>
<g transform="matrix(-0.014284,-0.999898,0.999898,-0.014284,1.585757,111.002960)">
<path fill="rgba(153,173,209,1)" d="M 0,4 L 8,0 L 8,8 Z" transform="translate(-4,-4)" stroke-width="1" stroke-dasharray="0,0" stroke="rgba(153,173,209,1)" width="8" height="8"/>
<path fill="transparent" d="M 0,4 L 8,0 L 8,8 Z" transform="translate(-4,-4)" stroke-width="3" stroke-dasharray="0,0" stroke="transparent" width="8" height="8"/>
<path fill="rgba(153,173,209,1)" d="M 0,4 L 8,0 L 8,8 Z" transform="translate(-4,-4)" stroke-width="1" stroke="rgba(153,173,209,1)" stroke-dasharray="0,0" width="8" height="8"/>
<path fill="transparent" d="M 0,4 L 8,0 L 8,8 Z" transform="translate(-4,-4)" stroke-width="3" stroke="transparent" stroke-dasharray="0,0" width="8" height="8"/>
</g>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g transform="matrix(1,0,0,1,192.223343,230.260117)">
<path fill="none" d="M 61.55330422335368,0 L 0,101.47977182769122" stroke-width="3" stroke-dasharray="2,2" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 61.55330422335368,0 L 0,101.47977182769122" stroke-width="5" stroke-dasharray="2,2" stroke="transparent"/>
<path fill="none" d="M 61.55330422335368,0 L 0,101.47977182769122" stroke-width="3" stroke="rgba(153,173,209,1)" stroke-dasharray="2,2"/>
<path fill="none" d="M 61.55330422335368,0 L 0,101.47977182769122" stroke-width="5" stroke="transparent" stroke-dasharray="2,2"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
@ -39,15 +39,15 @@
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g transform="matrix(1,0,0,1,266.352173,230.180862)">
<path fill="none" d="M 0,0 L 60.295672512805595,96.63826964381178" stroke-width="3" stroke-dasharray="2,2" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 0,0 L 60.295672512805595,96.63826964381178" stroke-width="5" stroke-dasharray="2,2" stroke="transparent"/>
<path fill="none" d="M 0,0 L 60.295672512805595,96.63826964381178" stroke-width="3" stroke="rgba(153,173,209,1)" stroke-dasharray="2,2"/>
<path fill="none" d="M 0,0 L 60.295672512805595,96.63826964381178" stroke-width="5" stroke="transparent" stroke-dasharray="2,2"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/>
<g transform="matrix(1,0,0,1,388.505646,158.283615)">
<path fill="none" d="M 1.902152013373268,16.629831585203164 C -7.282250363388869 -5.543277195067731,20.27095676689754 -5.543277195067731,11.086554390135404 16.629831585203164" stroke-width="3" stroke-dasharray="2,2" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 1.902152013373268,16.629831585203164 C -7.282250363388869 -5.543277195067731,20.27095676689754 -5.543277195067731,11.086554390135404 16.629831585203164" stroke-width="5" stroke-dasharray="2,2" stroke="transparent"/>
<path fill="none" d="M 1.902152013373268,16.629831585203164 C -7.282250363388869 -5.543277195067731,20.27095676689754 -5.543277195067731,11.086554390135404 16.629831585203164" stroke-width="3" stroke="rgba(153,173,209,1)" stroke-dasharray="2,2"/>
<path fill="none" d="M 1.902152013373268,16.629831585203164 C -7.282250363388869 -5.543277195067731,20.27095676689754 -5.543277195067731,11.086554390135404 16.629831585203164" stroke-width="5" stroke="transparent" stroke-dasharray="2,2"/>
</g>
</g>
</g>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.5 KiB

After

Width:  |  Height:  |  Size: 8.5 KiB

6
packages/g6/__tests__/unit/animations/element-style-position.spec.ts
View File

@ -6,9 +6,9 @@ describe('animation element style and position', () => {
const graph = await createDemoGraph(animationElementStylePosition, { animation: true });
await expect(graph).toMatchAnimation(__filename, [0, 200, 1000], () => {
graph.addNodeData([
{ id: 'node-4', style: { x: 50, y: 200, color: 'orange' } },
{ id: 'node-5', style: { x: 75, y: 150, color: 'purple' } },
{ id: 'node-6', style: { x: 200, y: 100, color: 'cyan' } },
{ id: 'node-4', style: { x: 50, y: 200, fill: 'orange' } },
{ id: 'node-5', style: { x: 75, y: 150, fill: 'purple' } },
{ id: 'node-6', style: { x: 200, y: 100, fill: 'cyan' } },
]);
graph.removeNodeData(['node-1']);
graph.updateNodeData([{ id: 'node-2', style: { x: 200, y: 200, stroke: 'green' } }]);

6
packages/g6/__tests__/unit/behaviors/behavior-create-edge-click.spec.ts
View File

@ -13,7 +13,7 @@ describe('behavior create edge click', () => {
it('click create edge', async () => {
await expect(graph).toMatchSnapshot(__filename);
await graph.setBehaviors([{ type: 'create-edge', trigger: 'click' }]);
graph.setBehaviors([{ type: 'create-edge', trigger: 'click' }]);
graph.emit(`node:${CommonEvent.CLICK}`, { target: { id: 'node1' }, targetType: 'node' });
graph.emit(CommonEvent.POINTER_MOVE, { canvas: { x: 100, y: 100 } });
await expect(graph).toMatchSnapshot(__filename, 'click-edge1-move');
@ -25,7 +25,7 @@ describe('behavior create edge click', () => {
graph.emit(`node:${CommonEvent.CLICK}`, { target: { id: 'node3' }, targetType: 'node' });
await expect(graph).toMatchSnapshot(__filename, 'click-edge2');
graph.setBehaviors([{ type: 'create-edge', trigger: 'click', style: { color: 'red', lineWidth: 2 } }]);
graph.setBehaviors([{ type: 'create-edge', trigger: 'click', style: { stroke: 'red', lineWidth: 2 } }]);
graph.emit(`node:${CommonEvent.CLICK}`, { target: { id: 'node2' }, targetType: 'node' });
graph.emit(`node:${CommonEvent.CLICK}`, { target: { id: 'node3' }, targetType: 'node' });
@ -39,7 +39,7 @@ describe('behavior create edge click', () => {
{
type: 'create-edge',
trigger: 'click',
style: { color: 'red', lineWidth: 2 },
style: { stroke: 'red', lineWidth: 2 },
onCreate: (edge: EdgeData) => {
const { source, target, ...rest } = edge;
return {

4
packages/g6/__tests__/unit/behaviors/behavior-create-edge-drag.spec.ts
View File

@ -25,7 +25,7 @@ describe('behavior create edge drag', () => {
graph.emit(CommonEvent.POINTER_UP, { target: { id: 'node3' }, targetType: 'node' });
await expect(graph).toMatchSnapshot(__filename, 'drag-edge2');
graph.setBehaviors([{ type: 'create-edge', trigger: 'drag', style: { color: 'red', lineWidth: 2 } }]);
graph.setBehaviors([{ type: 'create-edge', trigger: 'drag', style: { stroke: 'red', lineWidth: 2 } }]);
graph.emit(`node:${CommonEvent.DRAG_START}`, { target: { id: 'node2' }, targetType: 'node' });
graph.emit(CommonEvent.POINTER_UP, { target: { id: 'node3' }, targetType: 'node' });
@ -39,7 +39,7 @@ describe('behavior create edge drag', () => {
{
type: 'create-edge',
trigger: 'drag',
style: { color: 'red', lineWidth: 2 },
style: { stroke: 'red', lineWidth: 2 },
onCreate: (edge: EdgeData) => {
const { source, target, ...rest } = edge;
return {

2
packages/g6/__tests__/unit/behaviors/brush-select.spec.ts
View File

@ -43,7 +43,7 @@ describe('behavior brush select', () => {
graph.emit(`canvas:${CommonEvent.CLICK}`);
await expect(graph).toMatchSnapshot(__filename, 'brush-clear-2');
graph.setBehaviors([{ type: 'brush-select', style: { color: 'green', lineWidth: 2, stroke: 'blue' } }]);
graph.setBehaviors([{ type: 'brush-select', style: { fill: 'green', lineWidth: 2, stroke: 'blue' } }]);
graph.emit(CommonEvent.POINTER_DOWN, { canvas: { x: 100, y: 100 }, targetType: 'canvas' });
graph.emit(CommonEvent.POINTER_MOVE, { canvas: { x: 400, y: 400 } });

2
packages/g6/__tests__/unit/behaviors/lasso-select.spec.ts
View File

@ -46,7 +46,7 @@ describe('behavior lasso select', () => {
graph.emit(`canvas:${CommonEvent.CLICK}`);
await expect(graph).toMatchSnapshot(__filename, 'lasso-clear-2');
graph.setBehaviors([{ type: 'lasso-select', style: { color: 'green', lineWidth: 2, stroke: 'blue' } }]);
graph.setBehaviors([{ type: 'lasso-select', style: { fill: 'green', lineWidth: 2, stroke: 'blue' } }]);
graph.emit(CommonEvent.POINTER_DOWN, { canvas: { x: 100, y: 100 }, targetType: 'canvas' });
graph.emit(CommonEvent.POINTER_MOVE, { canvas: { x: 100, y: 300 } });

8
packages/g6/__tests__/unit/plugins/history/plugin-history.spec.ts
View File

@ -18,8 +18,8 @@ describe('history plugin', () => {
it('addData', async () => {
graph.addData({
nodes: [{ id: 'node-5', style: { x: 200, y: 100, color: 'pink' } }],
edges: [{ source: 'node-1', target: 'node-5', style: { color: 'brown' } }],
nodes: [{ id: 'node-5', style: { x: 200, y: 100, fill: 'pink' } }],
edges: [{ source: 'node-1', target: 'node-5', style: { stroke: 'brown' } }],
});
graph.draw();
await expect(graph).toMatchSnapshot(__filename, 'addData');
@ -32,8 +32,8 @@ describe('history plugin', () => {
it('updateData', async () => {
graph.updateData({
nodes: [{ id: 'node-1', style: { x: 150, y: 100, color: 'red' } }],
edges: [{ id: 'edge-1', style: { color: 'green' } }],
nodes: [{ id: 'node-1', style: { x: 150, y: 100, fill: 'red' } }],
edges: [{ id: 'edge-1', style: { stroke: 'green' } }],
});
graph.draw();
await expect(graph).toMatchSnapshot(__filename, 'updateData');

5
packages/g6/__tests__/unit/plugins/tooltip.spec.ts
View File

@ -1,4 +1,5 @@
import { pluginTooltip } from '@/__tests__/demos';
import type { Tooltip } from '@/src';
import { createDemoGraph } from '@@/utils';
describe('plugin tooltip', () => {
@ -43,9 +44,7 @@ describe('plugin tooltip', () => {
it('show tooltip by id', async () => {
const graph = await createDemoGraph(pluginTooltip);
// @ts-expect-error
const tooltip = graph.context.plugin.extensionMap['tooltip'];
// @ts-expect-error
const tooltip = graph.getPluginInstance<Tooltip>('tooltip');
tooltip.showTooltipById('6', 'node');
await expect(graph).toMatchSnapshot(__filename, 'show-tooltip-by-id');
graph.destroy();

17
packages/g6/__tests__/unit/runtime/element.spec.ts
View File

@ -95,15 +95,6 @@ describe('ElementController', () => {
...LIGHT_THEME.node!.state!.selected,
...LIGHT_THEME.node!.state!.active,
});
const paletteKey = 'color';
expect(elementController.getPaletteStyle('node-1')[paletteKey]).toBe(BUILT_IN_PALETTES.spectral[0]);
expect(elementController.getPaletteStyle('node-2')[paletteKey]).toBe(BUILT_IN_PALETTES.spectral[1]);
expect(elementController.getPaletteStyle('node-3')[paletteKey]).toBe(BUILT_IN_PALETTES.spectral[2]);
// invert
expect(elementController.getPaletteStyle(edge1Id)[paletteKey]).toBe(BUILT_IN_PALETTES.oranges.at(-1));
expect(elementController.getPaletteStyle(edge2Id)[paletteKey]).toBe(BUILT_IN_PALETTES.oranges.at(-2));
expect(elementController.getPaletteStyle('combo-1')[paletteKey]).toBe(BUILT_IN_PALETTES.blues[0]);
expect(elementController.getDefaultStyle('node-1')).toEqual({ fill: 'blue' });
expect(elementController.getDefaultStyle('node-2')).toEqual({ fill: 'red' });
@ -126,7 +117,6 @@ describe('ElementController', () => {
stroke: 'pink',
lineWidth: 1,
// from palette
color: BUILT_IN_PALETTES.spectral[0],
x: 100,
y: 100,
});
@ -135,7 +125,6 @@ describe('ElementController', () => {
...LIGHT_THEME.node?.style,
fill: 'red',
// from palette
color: BUILT_IN_PALETTES.spectral[1],
x: 150,
y: 100,
});
@ -148,14 +137,13 @@ describe('ElementController', () => {
// from state
fill: 'purple',
// from palette
color: BUILT_IN_PALETTES.spectral[2],
x: 125,
y: 150,
});
expect(omit(elementController.getElementComputedStyle('edge', edge1), ['sourceNode', 'targetNode'])).toEqual({
...LIGHT_THEME.edge?.style,
color: BUILT_IN_PALETTES.oranges.at(-1),
stroke: BUILT_IN_PALETTES.oranges.at(-1),
});
expect(omit(elementController.getElementComputedStyle('edge', edge2), ['sourceNode', 'targetNode'])).toEqual({
@ -165,7 +153,6 @@ describe('ElementController', () => {
lineWidth: 4,
stroke: 'red',
states: ['active', 'selected'],
color: BUILT_IN_PALETTES.oranges.at(-2),
});
const comboStyle = elementController.getElementComputedStyle('combo', combo1);
@ -174,7 +161,7 @@ describe('ElementController', () => {
expect(omit(comboStyle, ['childrenNode', 'childrenData'])).toEqual({
...LIGHT_THEME.combo?.style,
color: BUILT_IN_PALETTES.blues[0],
fill: BUILT_IN_PALETTES.blues[0],
});
});

6
packages/g6/__tests__/unit/runtime/element/z-index.spec.ts
View File

@ -8,9 +8,9 @@ describe('element z-index', () => {
graph = createGraph({
data: {
nodes: [
{ id: 'node-1', style: { x: 150, y: 150, color: 'red' } },
{ id: 'node-2', style: { x: 175, y: 175, color: 'green' } },
{ id: 'node-3', style: { x: 200, y: 200, color: 'blue' } },
{ id: 'node-1', style: { x: 150, y: 150, fill: 'red' } },
{ id: 'node-2', style: { x: 175, y: 175, fill: 'green' } },
{ id: 'node-3', style: { x: 200, y: 200, fill: 'blue' } },
],
},
theme: 'light',

12
packages/g6/__tests__/unit/runtime/graph/graph.spec.ts
View File

@ -22,25 +22,25 @@ describe('Graph', () => {
it('setNode/getNode', () => {
const options = graph.getOptions();
graph.setNode(Object.assign({}, options.node, { state: { selected: { color: 'pink' } } }));
graph.setNode(Object.assign({}, options.node, { state: { selected: { fill: 'pink' } } }));
expect(graph.getOptions().node!.state!.selected).toEqual({
color: 'pink',
fill: 'pink',
});
});
it('setEdge/getEdge', () => {
const options = graph.getOptions();
graph.setEdge(Object.assign({}, options.edge, { state: { selected: { color: 'pink' } } }));
graph.setEdge(Object.assign({}, options.edge, { state: { selected: { stroke: 'pink' } } }));
expect(graph.getOptions().edge!.state!.selected).toEqual({
color: 'pink',
stroke: 'pink',
});
});
it('setCombo/getCombo', () => {
const options = graph.getOptions();
graph.setCombo(Object.assign({}, options.combo, { state: { selected: { color: 'pink' } } }));
graph.setCombo(Object.assign({}, options.combo, { state: { selected: { fill: 'pink' } } }));
expect(graph.getOptions().combo!.state!.selected).toEqual({
color: 'pink',
fill: 'pink',
});
});

2
packages/g6/__tests__/unit/runtime/viewport.spec.ts
View File

@ -247,7 +247,7 @@ describe('Viewport Fit with lineWidth', () => {
size: 50,
lineWidth: 5,
stroke: 'pink',
color: (d: any) => (d.id === '1' ? '#d4414c' : '#2f363d'),
fill: (d: any) => (d.id === '1' ? '#d4414c' : '#2f363d'),
},
});
await graph.draw();

4
packages/g6/__tests__/unit/transforms/transform-process-parallel-edges.spec.ts
View File

@ -31,13 +31,13 @@ describe('transform-process-parallel-edges', () => {
id: 'new-edge',
source: 'node1',
target: 'node4',
style: { color: '#FF9800', lineWidth: 2 },
style: { stroke: '#FF9800', lineWidth: 2 },
},
{
id: 'new-loop',
source: 'node5',
target: 'node5',
style: { color: '#FF9800', lineWidth: 2 },
style: { stroke: '#FF9800', lineWidth: 2 },
},
]);
graph.draw();

4
packages/g6/src/behaviors/brush-select.ts
View File

@ -86,7 +86,7 @@ export interface BrushSelectOptions extends BaseBehaviorOptions {
export const DEFAULT_STYLE = {
lineWidth: 1,
color: '#EEF6FF',
fill: '#EEF6FF',
stroke: '#DDEEFE',
fillOpacity: 0.4,
zIndex: 2,
@ -133,7 +133,7 @@ export class BrushSelect<T extends BaseBehaviorOptions = BrushSelectOptions> ext
id: SHOW_RECT_ID,
style: {
...BrushSelect.defaultOptions.style,
fill: style.color || DEFAULT_STYLE.color,
fill: style.fill || DEFAULT_STYLE.fill,
...style,
pointerEvents: 'none',
},

2
packages/g6/src/behaviors/lasso-select.ts
View File

@ -42,7 +42,7 @@ export class LassoSelect extends BrushSelect<LassoSelectOptions> {
id: SHOW_PATH_ID,
style: {
...LassoSelect.defaultOptions.style,
fill: style.color || DEFAULT_STYLE.color,
fill: style.fill || DEFAULT_STYLE.fill,
...style,
pointerEvents: 'none',
},

8
packages/g6/src/elements/edges/base-edge.ts
View File

@ -78,11 +78,6 @@ export type BaseEdgeStyleProps = BaseElementStyleProps &
* <en/> Offset of the end arrow
*/
endArrowOffset?: number;
/**
* <zh/> 主色
* <en/> Subject color
*/
color?: string;
/**
* <zh/> 边的起点 shape
* <en/> The source shape. Represents the start of the edge
@ -151,13 +146,12 @@ export abstract class BaseEdge extends BaseShape<BaseEdgeStyleProps> {
}
protected getKeyStyle(attributes: ParsedBaseEdgeStyleProps): PathStyleProps {
const { sourceNode, targetNode, color, stroke, ...style } = this.getGraphicStyle(attributes);
const { sourceNode, targetNode, ...style } = this.getGraphicStyle(attributes);
const path = isSameNode(sourceNode, targetNode) ? this.getLoopPath(attributes) : this.getKeyPath(attributes);
return {
path,
...omitStyleProps(style, ['halo', 'label', 'startArrow', 'endArrow']),
stroke: color || stroke,
};
}

13
packages/g6/src/elements/nodes/base-node.ts
View File

@ -59,12 +59,6 @@ export type BaseNodeStyleProps<T extends Record<string, unknown> = Record<string
* <en/> The size of node, which is a shortcut to set the width and height of node
*/
size?: Size;
/**
* <zh/> 主色
*
* <en/> Subject color
*/
color?: string;
/**
* @deprecated
* <zh/> 解决类型 style.getPropertyValue 问题，不要使用该属性
@ -200,12 +194,9 @@ export abstract class BaseNode<S extends BaseNodeStyleProps = BaseNodeStyleProps
}
protected getKeyStyle(attributes: Required<S>) {
const { color, fill, ...style } = this.getGraphicStyle(attributes);
const style = this.getGraphicStyle(attributes);
return Object.assign(
{ fill: color || fill },
omitStyleProps(style, ['label', 'halo', 'icon', 'badge', 'port']),
) as any;
return Object.assign(omitStyleProps(style, ['label', 'halo', 'icon', 'badge', 'port'])) as any;
}
protected getLabelStyle(attributes: Required<S>): false | LabelStyleProps {

28
packages/g6/src/exports.ts
View File

@ -25,7 +25,19 @@ export {
Triangle,
} from './elements/nodes';
export { BaseShape } from './elements/shapes';
export { BasePlugin, BubbleSets, CameraSetting, History } from './plugins';
export {
BasePlugin,
BubbleSets,
CameraSetting,
Contextmenu,
GridLine,
History,
Hull,
Legend,
Toolbar,
Tooltip,
Watermark,
} from './plugins';
export { getExtension, getExtensions, register } from './registry';
export { Graph } from './runtime/graph';
export { BaseTransform } from './transforms';
@ -59,7 +71,19 @@ export type {
TriangleStyleProps,
} from './elements/nodes';
export type { BaseShapeStyleProps } from './elements/shapes';
export type { BasePluginOptions, CameraSettingOptions, Hull } from './plugins';
export type {
BasePluginOptions,
BubbleSetsOptions,
CameraSettingOptions,
ContextmenuOptions,
GridLineOptions,
HistoryOptions,
HullOptions,
LegendOptions,
ToolbarOptions,
TooltipOptions,
WatermarkOptions,
} from './plugins';
export type { RuntimeContext } from './runtime/types';
export type {
BehaviorOptions,

8
packages/g6/src/plugins/history/utils.ts
View File

@ -62,8 +62,12 @@ export function parseCommand(changes: DataChange[], animation = false, context?:
if (context) {
// 特殊处理：获取元素原始 color
const itemType = context.graph.getElementType(idOf(item.original));
const { color } = context.element!.getElementComputedStyle(itemType, item.original);
newOriginal = { ...item.original, style: { color, ...item.original.style } } as ElementDatum;
const colorKey = itemType === 'edge' ? 'stroke' : 'fill';
const style = context.element!.getElementComputedStyle(itemType, item.original);
newOriginal = {
...item.original,
style: { [colorKey]: style[colorKey], ...item.original.style },
} as ElementDatum;
}
alignFields(newValue, newOriginal);
cmd.current.update[category] ||= [];

4
packages/g6/src/plugins/legend.ts
View File

@ -198,7 +198,9 @@ export class Legend extends BasePlugin<LegendOptions> {
const { id } = item;
const value = get(item, ['data', getField(item)]);
const marker = element?.getElementType(type, item) || 'circle';
const { color = '#1783ff' } = getElementStyle(type, item);
const style = getElementStyle(type, item);
const color = (type === 'edge' ? style?.stroke : style?.fill) || '#1783ff';
if (id && value && value.replace(/\s+/g, '')) {
this.setFieldMap(value, id, type);
if (!items[value]) {

7
packages/g6/src/runtime/element.ts
View File

@ -123,11 +123,12 @@ export class ElementController {
});
}
public getPaletteStyle(id: ID) {
public getPaletteStyle(elementType: ElementType, id: ID): BaseStyleProps {
const color = this.paletteStyle[id];
if (!color) return {};
return { color };
if (elementType === 'edge') return { stroke: color };
return { fill: color };
}
private defaultStyle: Record<ID, Record<string, unknown>> = {};
@ -302,7 +303,7 @@ export class ElementController {
const id = idOf(datum);
// 优先级(从低到高) Priority (from low to high):
const themeStyle = this.getThemeStyle(elementType);
const paletteStyle = this.getPaletteStyle(id);
const paletteStyle = this.getPaletteStyle(elementType, id);
const dataStyle = datum.style || {};
const defaultStyle = this.getDefaultStyle(id);
const themeStateStyle = this.getThemeStateStyle(elementType, this.getElementState(id));

18
packages/g6/src/themes/base.ts
View File

@ -78,7 +78,7 @@ export function create(tokens: ThemeTokens): Theme {
badgeFontSize: 8,
badgePadding: [1, 4],
badgePalette: nodeBadgePalette,
color: nodeColor,
fill: nodeColor,
halo: false,
haloLineWidth: 12,
haloStrokeOpacity: 0.25,
@ -127,7 +127,7 @@ export function create(tokens: ThemeTokens): Theme {
opacity: 0.25,
},
disabled: {
color: nodeColorDisabled,
fill: nodeColorDisabled,
labelOpacity: 0.25,
donutOpacity: 0.25,
},
@ -136,13 +136,12 @@ export function create(tokens: ThemeTokens): Theme {
enter: 'fade',
exit: 'fade',
visibility: 'fade',
update: [{ fields: ['x', 'y', 'color', 'stroke'] }],
update: [{ fields: ['x', 'y', 'fill', 'stroke'] }],
},
},
edge: {
palette: edgePaletteOptions,
style: {
color: edgeColor,
halo: false,
haloLineWidth: 12,
haloStrokeOpacity: 0.25,
@ -160,6 +159,7 @@ export function create(tokens: ThemeTokens): Theme {
labelTextBaseline: 'middle',
lineWidth: 1,
opacity: 1,
stroke: edgeColor,
},
state: {
selected: {
@ -180,7 +180,7 @@ export function create(tokens: ThemeTokens): Theme {
opacity: 0.25,
},
disabled: {
color: edgeColorDisabled,
stroke: edgeColorDisabled,
labelOpacity: 0.25,
},
},
@ -188,7 +188,7 @@ export function create(tokens: ThemeTokens): Theme {
enter: 'fade',
exit: 'fade',
visibility: 'fade',
update: [{ fields: ['color'] }, { fields: ['path'], shape: 'key' }],
update: [{ fields: ['path', 'stroke'], shape: 'key' }],
},
},
combo: {
@ -196,7 +196,7 @@ export function create(tokens: ThemeTokens): Theme {
collapsedMaskFill: comboColor,
collapsedMaskFontSize: 12,
collapsedSize: 32,
color: comboColor,
fill: comboColor,
halo: false,
haloLineWidth: 12,
haloStroke: comboStroke,
@ -235,7 +235,7 @@ export function create(tokens: ThemeTokens): Theme {
opacity: 0.65,
},
disabled: {
color: comboColorDisabled,
fill: comboColorDisabled,
labelOpacity: 0.25,
opacity: 0.25,
stroke: comboStrokeDisabled,
@ -247,7 +247,7 @@ export function create(tokens: ThemeTokens): Theme {
visibility: 'fade',
expand: 'combo-collapse-expand',
collapse: 'combo-collapse-expand',
update: [{ fields: ['x', 'y'] }, { fields: ['size', 'color', 'stroke'], shape: 'key' }],
update: [{ fields: ['x', 'y'] }, { fields: ['size', 'fill', 'stroke'], shape: 'key' }],
},
},
};

2
packages/site/examples/behavior/createEdge/demo/createCustomEdge.ts
View File

@ -44,7 +44,7 @@ const graph = new Graph({
...rest,
style: {
...style,
color: 'red',
stroke: 'red',
lineWidth: 2,
endArrow: true,
},

2
packages/site/examples/behavior/createEdge/demo/createEdgeByClicking.ts
View File

@ -39,7 +39,7 @@ const graph = new Graph({
type: 'create-edge',
trigger: 'click',
style: {
color: 'red',
stroke: 'red',
lineWidth: 2,
},
},

2
packages/site/examples/behavior/createEdge/demo/createEdgeByDragging.ts
View File

@ -39,7 +39,7 @@ const graph = new Graph({
type: 'create-edge',
trigger: 'drag',
style: {
color: 'red',
fill: 'red',
lineWidth: 2,
},
},

6
packages/site/examples/behavior/hoverElement/demo/activateRelations2.ts
View File

@ -11,19 +11,19 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/xiaomi.json')
style: { size: 30 },
state: {
highlight: {
color: '#D580FF',
fill: '#D580FF',
halo: true,
lineWidth: 0,
},
unhighlight: {
color: '#99ADD1',
fill: '#99ADD1',
},
},
},
edge: {
state: {
highlight: {
color: '#D580FF',
stroke: '#D580FF',
},
},
},

2
packages/site/examples/behavior/select/demo/brush.ts
View File

@ -40,7 +40,7 @@ const graph = new Graph({
mode: 'diff',
trigger: 'shift',
style: {
color: '#00f',
fill: '#00f',
fillOpacity: 0.2,
stroke: '#0ff',
},

2
packages/site/examples/behavior/select/demo/lasso.ts
View File

@ -40,7 +40,7 @@ const graph = new Graph({
mode: 'diff',
trigger: 'shift',
style: {
color: '#00f',
fill: '#00f',
fillOpacity: 0.1,
stroke: '#0ff',
lineWidth: 2,

2
packages/site/examples/element/arrows/demo/custom-arrows.ts
View File

@ -39,7 +39,7 @@ const graph = new Graph({
edge: {
style: {
type: 'line', // 👈🏻 Edge shape type.
color: '#F6BD16',
stroke: '#F6BD16',
labelText: (d) => d.id!,
labelBackground: true,
endArrow: true,

2
packages/site/examples/element/defaultEdges/demo/polylineOrthHasCPs.ts
View File

@ -4,7 +4,7 @@ const data = {
nodes: [
{ id: 'node-1', style: { x: 200, y: 200 } },
{ id: 'node-2', style: { x: 350, y: 120 } },
{ id: 'node-cp', style: { x: 300, y: 190, size: 5, color: 'rgb(244, 109, 67)' } },
{ id: 'node-cp', style: { x: 300, y: 190, size: 5, fill: 'rgb(244, 109, 67)' } },
],
edges: [
{

2
packages/site/examples/element/defaultNodes/demo/donut.ts
View File

@ -21,7 +21,7 @@ const graph = new Graph({
style: {
type: 'donut', // 👈🏻 Node shape type.
size: 80,
color: '#DB9D0D',
fill: '#DB9D0D',
innerRadius: 0.5,
donuts: (v, index) => {
if (index === 0) return [1, 2, 3];

2
packages/site/examples/layout/dagreFlow/demo/antv-dagre-combo.ts
View File

@ -21,7 +21,7 @@ fetch('https://assets.antv.antgroup.com/g6/dagre-combo.json')
labelPlacement: 'center',
labelText: (d) => d.id,
ports: [{ placement: 'top' }, { placement: 'bottom' }],
color: (d) => {
fill: (d) => {
const styles = { A: '#F09056', B: '#D580FF', C: '#01C9C9' };
return styles[d.style.parentId] || '#1883FF';
},

10
packages/site/examples/plugin/legend/demo/legend-click.ts
View File

@ -6,7 +6,7 @@ const data = {
id: '1',
style: {
type: 'circle',
color: '#5B8FF9',
fill: '#5B8FF9',
},
data: { cluster: 'node-type1' },
},
@ -14,7 +14,7 @@ const data = {
id: '2',
style: {
type: 'rect',
color: '#5AD8A6',
fill: '#5AD8A6',
},
data: { cluster: 'node-type2' },
},
@ -22,7 +22,7 @@ const data = {
id: '3',
style: {
type: 'triangle',
color: '#5D7092',
fill: '#5D7092',
},
data: { cluster: 'node-type3' },
},
@ -30,7 +30,7 @@ const data = {
id: '4',
style: {
type: 'diamond',
color: '#6F5EF9',
fill: '#6F5EF9',
},
data: { cluster: 'node-type4' },
},
@ -42,7 +42,7 @@ const data = {
target: '2',
style: {
type: 'quadratic',
color: '#F6BD16',
stroke: '#F6BD16',
},
data: { cluster: 'edge-type1' },
},

8
packages/site/examples/plugin/legend/demo/legend.ts
View File

@ -6,7 +6,7 @@ const data = {
id: '1',
style: {
type: 'circle',
color: '#5B8FF9',
fill: '#5B8FF9',
},
data: { cluster: 'node-type1' },
},
@ -14,7 +14,7 @@ const data = {
id: '2',
style: {
type: 'rect',
color: '#5AD8A6',
fill: '#5AD8A6',
},
data: { cluster: 'node-type2' },
},
@ -22,7 +22,7 @@ const data = {
id: '3',
style: {
type: 'triangle',
color: '#5D7092',
fill: '#5D7092',
},
data: { cluster: 'node-type3' },
},
@ -30,7 +30,7 @@ const data = {
id: '4',
style: {
type: 'diamond',
color: '#6F5EF9',
fill: '#6F5EF9',
},
data: { cluster: 'node-type4' },
},

10
packages/site/examples/plugin/legend/demo/style.ts
View File

@ -6,7 +6,7 @@ const data = {
id: '1',
style: {
type: 'circle',
color: '#5B8FF9',
fill: '#5B8FF9',
},
data: { cluster: 'node-type1' },
},
@ -14,7 +14,7 @@ const data = {
id: '2',
style: {
type: 'rect',
color: '#5AD8A6',
fill: '#5AD8A6',
},
data: { cluster: 'node-type2' },
},
@ -22,7 +22,7 @@ const data = {
id: '3',
style: {
type: 'triangle',
color: '#5D7092',
fill: '#5D7092',
},
data: { cluster: 'node-type3' },
},
@ -30,7 +30,7 @@ const data = {
id: '4',
style: {
type: 'diamond',
color: '#6F5EF9',
fill: '#6F5EF9',
},
data: { cluster: 'node-type4' },
},
@ -42,7 +42,7 @@ const data = {
target: '2',
style: {
type: 'quadratic',
color: '#F6BD16',
stroke: '#F6BD16',
},
data: { cluster: 'edge-type1' },
},