test/g6
1
0
Fork 0
mirror of https://gitee.com/antv/g6.git synced 2024-12-02 03:38:20 +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", "id": "edge1",
"source": "node1", "source": "node1",
"target": "node4", "target": "node4",
"style": { "color": "#8576FF", "lineWidth": 2, "startArrow": true } "style": { "stroke": "#8576FF", "lineWidth": 2, "startArrow": true }
}, },
{ {
"id": "edge2", "id": "edge2",
@ -65,7 +65,7 @@
{ "id": "edge9", "source": "node1", "target": "node6" }, { "id": "edge9", "source": "node1", "target": "node6" },
{ "id": "edge10", "source": "node1", "target": "node6" }, { "id": "edge10", "source": "node1", "target": "node6" },
{ "id": "edge11", "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": "loop2", "source": "node5", "target": "node5" },
{ "id": "loop3", "source": "node5", "target": "node5" }, { "id": "loop3", "source": "node5", "target": "node5" },
{ "id": "loop4", "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, lineWidth: 2,
}, },
selected: { selected: {
color: 'pink', fill: 'pink',
}, },
}, },
animation: { animation: {
update: [{ fields: ['lineWidth', 'color'] }], update: [{ fields: ['lineWidth', 'fill'] }],
}, },
}, },
edge: { edge: {
@ -41,13 +41,13 @@ export const animationElementStateSwitch: TestCase = async (context) => {
state: { state: {
active: { active: {
lineWidth: 2, lineWidth: 2,
color: 'pink', stroke: 'pink',
}, },
}, },
animation: { animation: {
update: [ 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 = () => { const play = () => {
graph.addNodeData([ graph.addNodeData([
{ id: 'node-4', style: { x: 50, y: 200, color: 'orange' } }, { id: 'node-4', style: { x: 50, y: 200, fill: 'orange' } },
{ id: 'node-5', style: { x: 75, y: 150, color: 'purple' } }, { id: 'node-5', style: { x: 75, y: 150, fill: 'purple' } },
{ id: 'node-6', style: { x: 200, y: 100, color: 'cyan' } }, { id: 'node-6', style: { x: 200, y: 100, fill: 'cyan' } },
]); ]);
graph.removeNodeData(['node-1']); graph.removeNodeData(['node-1']);
graph.updateNodeData([{ id: 'node-2', style: { x: 200, y: 200, stroke: 'green' } }]); 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, ...context,
data: { data: {
nodes: [ 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 } }, { id: 'node-2', style: { x: 200, y: 100 } },
], ],
edges: [{ id: 'edge-1', source: 'node-1', target: 'node-2' }], 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: { edge: {
type: 'line', // 👈🏻 Edge shape type. type: 'line', // 👈🏻 Edge shape type.
style: { style: {
color: '#F6BD16', stroke: '#F6BD16',
labelText: (d) => d.id!, labelText: (d) => d.id!,
labelBackground: true, labelBackground: true,
endArrow: 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', type: (d) => d.type || 'rect',
style: { style: {
size: (d) => d.style?.size || [50, 20], size: (d) => d.style?.size || [50, 20],
color: '#f8f8f8', fill: '#f8f8f8',
stroke: '#8b9baf', stroke: '#8b9baf',
lineWidth: 1, lineWidth: 1,
labelPlacement: 'center', labelPlacement: 'center',
@ -155,7 +155,7 @@ export const elementEdgePolyline: TestCase = async (context) => {
edge: { edge: {
type: 'polyline', type: 'polyline',
style: { 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], x: (d) => [50, 200, 300, 450][(d.data!.index as number) % 4],
y: (d) => 50 + Math.floor((d.data!.index as number) / 4) * 100, y: (d) => 50 + Math.floor((d.data!.index as number) / 4) * 100,
size: 50, size: 50,
color: '#f8f8f8', fill: '#f8f8f8',
stroke: '#8b9baf', stroke: '#8b9baf',
lineWidth: 1, lineWidth: 1,
}, },
}, },
edge: { edge: {
style: { style: {
color: '#1890FF', stroke: '#1890FF',
lineWidth: 2, lineWidth: 2,
labelFontSize: 12, labelFontSize: 12,
labelMaxLines: 2, 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, 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) => { export const elementNodeHTML: TestCase = async (context) => {
const data = { const data = {
nodes: [ nodes: [
{ id: 'html-1', style: { x: 100, y: 100, color: 'orange' }, data: { content: 'HTML NODE 1' } }, { id: 'html-1', style: { x: 100, y: 100, fill: 'orange' }, data: { content: 'HTML NODE 1' } },
{ id: 'html-2', style: { x: 100, y: 200, color: 'pink' }, data: { content: 'HTML NODE 2' } }, { id: 'html-2', style: { x: 100, y: 200, fill: 'pink' }, data: { content: 'HTML NODE 2' } },
], ],
edges: [{ source: 'html-1', target: 'html-2' }], edges: [{ source: 'html-1', target: 'html-2' }],
}; };
@ -18,7 +18,7 @@ export const elementNodeHTML: TestCase = async (context) => {
style: { style: {
size: [240, 80], size: [240, 80],
innerHTML: (d: NodeData) => ` 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;"> <span style="color: #fff; font-size: 20px;">
${d.data!.content} ${d.data!.content}
</span> </span>

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

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

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

@ -22,7 +22,7 @@ export const elementState: TestCase = async (context) => {
}, },
state: { state: {
selected: { selected: {
color: 'pink', fill: 'pink',
}, },
}, },
animation: { animation: {
@ -36,7 +36,7 @@ export const elementState: TestCase = async (context) => {
state: { state: {
active: { active: {
lineWidth: 2, lineWidth: 2,
color: 'pink', stroke: 'pink',
}, },
}, },
animation: { 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', background: '#f4df4d',
data: { data: {
nodes: [ nodes: [
{ id: 'node-1', style: { x: 50, y: 50, color: 'purple', halo: true, labelText: 'node-1' } }, { id: 'node-1', style: { x: 50, y: 50, fill: 'purple', halo: true, labelText: 'node-1' } },
{ id: 'node-2', style: { x: 100, y: 50, color: 'pink', halo: true, labelText: 'node-2' } }, { 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' } }, { 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'], 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, radius: 20,
endArrow: true, endArrow: true,
lineWidth: 2, lineWidth: 2,
color: '#C2C8D5', stroke: '#C2C8D5',
}, },
}, },
layout: { layout: {

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

@ -19,12 +19,12 @@ export const layoutForceLattice: TestCase = async (context) => {
node: { node: {
style: { style: {
size: 10, size: 10,
color: '#000', fill: '#000',
}, },
}, },
edge: { edge: {
style: { style: {
color: '#000', stroke: '#000',
}, },
}, },
behaviors: [{ type: 'drag-element-force' }, 'zoom-canvas'], 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, visible: true,
add: () => { add: () => {
graph.addData({ graph.addData({
nodes: [{ id: 'node-5', style: { x: 200, y: 100, color: 'pink' } }], nodes: [{ id: 'node-5', style: { x: 200, y: 100, fill: 'pink' } }],
edges: [{ source: 'node-1', target: 'node-5', style: { color: 'brown' } }], edges: [{ source: 'node-1', target: 'node-5', style: { stroke: 'brown' } }],
}); });
graph.draw(); graph.draw();
}, },
update: () => { update: () => {
graph.updateData({ graph.updateData({
nodes: [{ id: 'node-1', style: { x: 150, y: 100, color: 'red' } }], nodes: [{ id: 'node-1', style: { x: 150, y: 100, fill: 'red' } }],
edges: [{ id: 'edge-1', style: { color: 'green' } }], edges: [{ id: 'edge-1', style: { stroke: 'green' } }],
}); });
graph.draw(); graph.draw();
}, },

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

@ -34,7 +34,7 @@ export const pluginLegend: TestCase = async (context) => {
style: { style: {
labelText: (d) => d.id, labelText: (d) => d.id,
lineWidth: 0, lineWidth: 0,
color: (item: any) => { fill: (item: any) => {
if (item.data.cluster === 'a') return 'red'; if (item.data.cluster === 'a') return 'red';
if (item.data.cluster === 'b') return 'blue'; if (item.data.cluster === 'b') return 'blue';
if (item.data.cluster === 'c') return 'green'; 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', id: 'new-edge',
source: 'node1', source: 'node1',
target: 'node4', target: 'node4',
style: { color: '#FF9800', lineWidth: 2 }, style: { stroke: '#FF9800', lineWidth: 2 },
}, },
{ {
id: 'new-loop', id: 'new-loop',
source: 'node5', source: 'node5',
target: 'node5', target: 'node5',
style: { color: '#FF9800', lineWidth: 2 }, style: { stroke: '#FF9800', lineWidth: 2 },
}, },
]); ]);
graph.draw(); graph.draw();

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

@ -14,7 +14,7 @@ export const viewportFit: TestCase = async (context) => {
node: { node: {
style: { style: {
size: 50, size: 50,
color: (d) => (d.id === '1' ? '#d4414c' : '#2f363d'), fill: (d) => (d.id === '1' ? '#d4414c' : '#2f363d'),
}, },
}, },
behaviors: ['zoom-canvas', 'drag-canvas'], 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" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="true" stroke="transparent" stroke-width="3"/> <g fill="none" marker-start="false" marker-end="true" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,100,100)"> <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="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" pointer-events="none" stroke="transparent"/> <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)"> <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="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" pointer-events="none" stroke="transparent" 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> </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" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="true" stroke="transparent" stroke-width="3"/> <g fill="none" marker-start="false" marker-end="true" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,100,100)"> <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="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" pointer-events="none" stroke="transparent"/> <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)"> <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="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" pointer-events="none" stroke="transparent" 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> </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(1,0,0,1,0,0)">
<g fill="none" transform="matrix(0,1,-1,0,-48,-168)"> <g fill="none" transform="matrix(0,1,-1,0,-48,-168)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,12.999999,-0.000002)"> <g fill="none" transform="matrix(1,0,0,1,12.999999,-0.000002)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -230,7 +230,7 @@
</g> </g>
<g fill="none" transform="matrix(0,1,-1,0,-440,8)"> <g fill="none" transform="matrix(0,1,-1,0,-440,8)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,-0.000030)"> <g fill="none" transform="matrix(1,0,0,1,13,-0.000030)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -242,7 +242,7 @@
</g> </g>
<g fill="none" transform="matrix(0,1,-1,0,-636,184)"> <g fill="none" transform="matrix(0,1,-1,0,-636,184)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,12.999994,0.000006)"> <g fill="none" transform="matrix(1,0,0,1,12.999994,0.000006)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -254,7 +254,7 @@
</g> </g>
<g fill="none" transform="matrix(0,1,-1,0,-580,184)"> <g fill="none" transform="matrix(0,1,-1,0,-580,184)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,12.999996,0.000006)"> <g fill="none" transform="matrix(1,0,0,1,12.999996,0.000006)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -266,7 +266,7 @@
</g> </g>
<g fill="none" transform="matrix(0,1,-1,0,-524,184)"> <g fill="none" transform="matrix(0,1,-1,0,-524,184)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,12.999998,0.000006)"> <g fill="none" transform="matrix(1,0,0,1,12.999998,0.000006)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -278,7 +278,7 @@
</g> </g>
<g fill="none" transform="matrix(0,1,-1,0,-468,184)"> <g fill="none" transform="matrix(0,1,-1,0,-468,184)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,-0.000024)"> <g fill="none" transform="matrix(1,0,0,1,13,-0.000024)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -290,7 +290,7 @@
</g> </g>
<g fill="none" transform="matrix(0,1,-1,0,-412,184)"> <g fill="none" transform="matrix(0,1,-1,0,-412,184)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13.000002,-0.000024)"> <g fill="none" transform="matrix(1,0,0,1,13.000002,-0.000024)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -302,7 +302,7 @@
</g> </g>
<g fill="none" transform="matrix(0,1,-1,0,-356,184)"> <g fill="none" transform="matrix(0,1,-1,0,-356,184)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,12.999989,-0.000024)"> <g fill="none" transform="matrix(1,0,0,1,12.999989,-0.000024)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -314,7 +314,7 @@
</g> </g>
<g fill="none" transform="matrix(0,1,-1,0,-300,184)"> <g fill="none" transform="matrix(0,1,-1,0,-300,184)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,12.999990,-0.000024)"> <g fill="none" transform="matrix(1,0,0,1,12.999990,-0.000024)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -326,7 +326,7 @@
</g> </g>
<g fill="none" transform="matrix(0,1,-1,0,-244,184)"> <g fill="none" transform="matrix(0,1,-1,0,-244,184)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,12.999992,-0.000009)"> <g fill="none" transform="matrix(1,0,0,1,12.999992,-0.000009)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -338,7 +338,7 @@
</g> </g>
<g fill="none" transform="matrix(0,1,-1,0,-6,8)"> <g fill="none" transform="matrix(0,1,-1,0,-6,8)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -350,7 +350,7 @@
</g> </g>
<g fill="none" transform="matrix(0,1,-1,0,-188,184)"> <g fill="none" transform="matrix(0,1,-1,0,-188,184)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,12.999994,-0.000009)"> <g fill="none" transform="matrix(1,0,0,1,12.999994,-0.000009)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -362,7 +362,7 @@
</g> </g>
<g fill="none" transform="matrix(0,1,-1,0,-328,360)"> <g fill="none" transform="matrix(0,1,-1,0,-328,360)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,12.999990,-0.000018)"> <g fill="none" transform="matrix(1,0,0,1,12.999990,-0.000018)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -374,7 +374,7 @@
</g> </g>
<g fill="none" transform="matrix(0,1,-1,0,-272,360)"> <g fill="none" transform="matrix(0,1,-1,0,-272,360)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,12.999991,-0.000018)"> <g fill="none" transform="matrix(1,0,0,1,12.999991,-0.000018)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -386,7 +386,7 @@
</g> </g>
<g fill="none" transform="matrix(0,1,-1,0,-216,360)"> <g fill="none" transform="matrix(0,1,-1,0,-216,360)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,12.999993,-0.000003)"> <g fill="none" transform="matrix(1,0,0,1,12.999993,-0.000003)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -398,7 +398,7 @@
</g> </g>
<g fill="none" transform="matrix(0,1,-1,0,-160,360)"> <g fill="none" transform="matrix(0,1,-1,0,-160,360)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,12.999995,-0.000003)"> <g fill="none" transform="matrix(1,0,0,1,12.999995,-0.000003)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -410,7 +410,7 @@
</g> </g>
<g fill="none" transform="matrix(0,1,-1,0,-104,360)"> <g fill="none" transform="matrix(0,1,-1,0,-104,360)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,12.999997,-0.000003)"> <g fill="none" transform="matrix(1,0,0,1,12.999997,-0.000003)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -422,7 +422,7 @@
</g> </g>
<g fill="none" transform="matrix(0,1,-1,0,-48,360)"> <g fill="none" transform="matrix(0,1,-1,0,-48,360)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,12.999999,-0.000003)"> <g fill="none" transform="matrix(1,0,0,1,12.999999,-0.000003)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -434,7 +434,7 @@
</g> </g>
<g fill="none" transform="matrix(0,1,-1,0,36,184)"> <g fill="none" transform="matrix(0,1,-1,0,36,184)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13.000002,0.000002)"> <g fill="none" transform="matrix(1,0,0,1,13.000002,0.000002)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -446,7 +446,7 @@
</g> </g>
<g fill="none" transform="matrix(0,1,-1,0,8,360)"> <g fill="none" transform="matrix(0,1,-1,0,8,360)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -458,7 +458,7 @@
</g> </g>
<g fill="none" transform="matrix(0,1,-1,0,64,360)"> <g fill="none" transform="matrix(0,1,-1,0,64,360)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -470,7 +470,7 @@
</g> </g>
<g fill="none" transform="matrix(0,1,-1,0,176,184)"> <g fill="none" transform="matrix(0,1,-1,0,176,184)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,12.999991,0.000006)"> <g fill="none" transform="matrix(1,0,0,1,12.999991,0.000006)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -482,7 +482,7 @@
</g> </g>
<g fill="none" transform="matrix(0,1,-1,0,120,360)"> <g fill="none" transform="matrix(0,1,-1,0,120,360)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,12.999974,0.000005)"> <g fill="none" transform="matrix(1,0,0,1,12.999974,0.000005)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -494,7 +494,7 @@
</g> </g>
<g fill="none" transform="matrix(0,1,-1,0,176,360)"> <g fill="none" transform="matrix(0,1,-1,0,176,360)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,12.999976,0.000012)"> <g fill="none" transform="matrix(1,0,0,1,12.999976,0.000012)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -506,7 +506,7 @@
</g> </g>
<g fill="none" transform="matrix(0,1,-1,0,232,360)"> <g fill="none" transform="matrix(0,1,-1,0,232,360)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,12.999978,0.000012)"> <g fill="none" transform="matrix(1,0,0,1,12.999978,0.000012)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -518,7 +518,7 @@
</g> </g>
<g fill="none" transform="matrix(0,1,-1,0,344,8)"> <g fill="none" transform="matrix(0,1,-1,0,344,8)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -530,7 +530,7 @@
</g> </g>
<g fill="none" transform="matrix(0,1,-1,0,232,184)"> <g fill="none" transform="matrix(0,1,-1,0,232,184)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,12.999993,0.000006)"> <g fill="none" transform="matrix(1,0,0,1,12.999993,0.000006)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -542,7 +542,7 @@
</g> </g>
<g fill="none" transform="matrix(0,1,-1,0,288,184)"> <g fill="none" transform="matrix(0,1,-1,0,288,184)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,12.999995,0.000006)"> <g fill="none" transform="matrix(1,0,0,1,12.999995,0.000006)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -554,7 +554,7 @@
</g> </g>
<g fill="none" transform="matrix(0,1,-1,0,344,184)"> <g fill="none" transform="matrix(0,1,-1,0,344,184)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,12.999997,0.000006)"> <g fill="none" transform="matrix(1,0,0,1,12.999997,0.000006)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -566,7 +566,7 @@
</g> </g>
<g fill="none" transform="matrix(0,1,-1,0,400,184)"> <g fill="none" transform="matrix(0,1,-1,0,400,184)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,12.999999,0.000006)"> <g fill="none" transform="matrix(1,0,0,1,12.999999,0.000006)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -578,7 +578,7 @@
</g> </g>
<g fill="none" transform="matrix(0,1,-1,0,456,184)"> <g fill="none" transform="matrix(0,1,-1,0,456,184)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13.000001,0.000006)"> <g fill="none" transform="matrix(1,0,0,1,13.000001,0.000006)">
<g transform="matrix(1,0,0,1,0,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/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,0,0)">
<g fill="none" transform="matrix(1,0,0,1,-218,-28)"> <g fill="none" transform="matrix(1,0,0,1,-218,-28)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,6,0)"> <g fill="none" transform="matrix(1,0,0,1,6,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -230,7 +230,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,18,-343)"> <g fill="none" transform="matrix(1,0,0,1,18,-343)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,6,0)"> <g fill="none" transform="matrix(1,0,0,1,6,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -242,7 +242,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,252,-469)"> <g fill="none" transform="matrix(1,0,0,1,252,-469)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,6,0)"> <g fill="none" transform="matrix(1,0,0,1,6,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -254,7 +254,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,252,-433)"> <g fill="none" transform="matrix(1,0,0,1,252,-433)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,6,0)"> <g fill="none" transform="matrix(1,0,0,1,6,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -266,7 +266,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,252,-397)"> <g fill="none" transform="matrix(1,0,0,1,252,-397)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,6,0)"> <g fill="none" transform="matrix(1,0,0,1,6,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -278,7 +278,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,252,-361)"> <g fill="none" transform="matrix(1,0,0,1,252,-361)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,6,0)"> <g fill="none" transform="matrix(1,0,0,1,6,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -290,7 +290,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,252,-325)"> <g fill="none" transform="matrix(1,0,0,1,252,-325)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,6,0)"> <g fill="none" transform="matrix(1,0,0,1,6,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -302,7 +302,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,252,-289)"> <g fill="none" transform="matrix(1,0,0,1,252,-289)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,6,0)"> <g fill="none" transform="matrix(1,0,0,1,6,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -314,7 +314,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,252,-253)"> <g fill="none" transform="matrix(1,0,0,1,252,-253)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,6,0)"> <g fill="none" transform="matrix(1,0,0,1,6,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -326,7 +326,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,252,-217)"> <g fill="none" transform="matrix(1,0,0,1,252,-217)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,6,0)"> <g fill="none" transform="matrix(1,0,0,1,6,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -338,7 +338,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,18,26)"> <g fill="none" transform="matrix(1,0,0,1,18,26)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,6,0)"> <g fill="none" transform="matrix(1,0,0,1,6,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -350,7 +350,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,247,-91)"> <g fill="none" transform="matrix(1,0,0,1,247,-91)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,6,0)"> <g fill="none" transform="matrix(1,0,0,1,6,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -362,7 +362,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,483,-181)"> <g fill="none" transform="matrix(1,0,0,1,483,-181)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,6,0)"> <g fill="none" transform="matrix(1,0,0,1,6,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -374,7 +374,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,483,-145)"> <g fill="none" transform="matrix(1,0,0,1,483,-145)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,6,0)"> <g fill="none" transform="matrix(1,0,0,1,6,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -386,7 +386,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,483,-109)"> <g fill="none" transform="matrix(1,0,0,1,483,-109)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,6,0)"> <g fill="none" transform="matrix(1,0,0,1,6,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -398,7 +398,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,483,-73)"> <g fill="none" transform="matrix(1,0,0,1,483,-73)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,6,0)"> <g fill="none" transform="matrix(1,0,0,1,6,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -410,7 +410,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,483,-37)"> <g fill="none" transform="matrix(1,0,0,1,483,-37)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,6,0)"> <g fill="none" transform="matrix(1,0,0,1,6,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -422,7 +422,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,483,-1)"> <g fill="none" transform="matrix(1,0,0,1,483,-1)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,6,0)"> <g fill="none" transform="matrix(1,0,0,1,6,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -434,7 +434,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,247,53)"> <g fill="none" transform="matrix(1,0,0,1,247,53)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,6,0)"> <g fill="none" transform="matrix(1,0,0,1,6,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -446,7 +446,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,474,35)"> <g fill="none" transform="matrix(1,0,0,1,474,35)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,6,0)"> <g fill="none" transform="matrix(1,0,0,1,6,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -458,7 +458,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,474,71)"> <g fill="none" transform="matrix(1,0,0,1,474,71)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,6,0)"> <g fill="none" transform="matrix(1,0,0,1,6,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -470,7 +470,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,247,143)"> <g fill="none" transform="matrix(1,0,0,1,247,143)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,6,0)"> <g fill="none" transform="matrix(1,0,0,1,6,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -482,7 +482,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,473,107)"> <g fill="none" transform="matrix(1,0,0,1,473,107)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,6,0)"> <g fill="none" transform="matrix(1,0,0,1,6,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -494,7 +494,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,473,143)"> <g fill="none" transform="matrix(1,0,0,1,473,143)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,6,0)"> <g fill="none" transform="matrix(1,0,0,1,6,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -506,7 +506,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,473,179)"> <g fill="none" transform="matrix(1,0,0,1,473,179)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,6,0)"> <g fill="none" transform="matrix(1,0,0,1,6,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -518,7 +518,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,18,287)"> <g fill="none" transform="matrix(1,0,0,1,18,287)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,6,0)"> <g fill="none" transform="matrix(1,0,0,1,6,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -530,7 +530,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,248,215)"> <g fill="none" transform="matrix(1,0,0,1,248,215)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,6,0)"> <g fill="none" transform="matrix(1,0,0,1,6,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -542,7 +542,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,248,251)"> <g fill="none" transform="matrix(1,0,0,1,248,251)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,6,0)"> <g fill="none" transform="matrix(1,0,0,1,6,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -554,7 +554,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,248,287)"> <g fill="none" transform="matrix(1,0,0,1,248,287)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,6,0)"> <g fill="none" transform="matrix(1,0,0,1,6,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -566,7 +566,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,248,323)"> <g fill="none" transform="matrix(1,0,0,1,248,323)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,6,0)"> <g fill="none" transform="matrix(1,0,0,1,6,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -578,7 +578,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,248,359)"> <g fill="none" transform="matrix(1,0,0,1,248,359)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,6,0)"> <g fill="none" transform="matrix(1,0,0,1,6,0)">
<g transform="matrix(1,0,0,1,0,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,0,0)">
<g fill="none" transform="matrix(1,0,0,1,-108,-28)"> <g fill="none" transform="matrix(1,0,0,1,-108,-28)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,-13,0)"> <g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -230,7 +230,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,-224,-28)"> <g fill="none" transform="matrix(1,0,0,1,-224,-28)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,-13,0)"> <g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -242,7 +242,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,-340,-154)"> <g fill="none" transform="matrix(1,0,0,1,-340,-154)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,-13,0)"> <g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -254,7 +254,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,-340,-118)"> <g fill="none" transform="matrix(1,0,0,1,-340,-118)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,-13,0)"> <g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -266,7 +266,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,-340,-82)"> <g fill="none" transform="matrix(1,0,0,1,-340,-82)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,-13,0)"> <g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -278,7 +278,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,-340,-46)"> <g fill="none" transform="matrix(1,0,0,1,-340,-46)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,-13,0)"> <g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -290,7 +290,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,-340,-10)"> <g fill="none" transform="matrix(1,0,0,1,-340,-10)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,-13,0)"> <g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -302,7 +302,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,-340,26)"> <g fill="none" transform="matrix(1,0,0,1,-340,26)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,-13,0)"> <g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -314,7 +314,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,-340,62)"> <g fill="none" transform="matrix(1,0,0,1,-340,62)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,-13,0)"> <g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -326,7 +326,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,-340,98)"> <g fill="none" transform="matrix(1,0,0,1,-340,98)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,-13,0)"> <g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -338,7 +338,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,8,-158.500000)"> <g fill="none" transform="matrix(1,0,0,1,8,-158.500000)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -350,7 +350,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,124,-275.500000)"> <g fill="none" transform="matrix(1,0,0,1,124,-275.500000)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -362,7 +362,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,240,-365.500000)"> <g fill="none" transform="matrix(1,0,0,1,240,-365.500000)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -374,7 +374,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,240,-329.500000)"> <g fill="none" transform="matrix(1,0,0,1,240,-329.500000)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -386,7 +386,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,240,-293.500000)"> <g fill="none" transform="matrix(1,0,0,1,240,-293.500000)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -398,7 +398,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,240,-257.500000)"> <g fill="none" transform="matrix(1,0,0,1,240,-257.500000)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -410,7 +410,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,240,-221.500000)"> <g fill="none" transform="matrix(1,0,0,1,240,-221.500000)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -422,7 +422,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,240,-185.500000)"> <g fill="none" transform="matrix(1,0,0,1,240,-185.500000)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -434,7 +434,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,124,-131.500000)"> <g fill="none" transform="matrix(1,0,0,1,124,-131.500000)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -446,7 +446,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,240,-149.500000)"> <g fill="none" transform="matrix(1,0,0,1,240,-149.500000)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -458,7 +458,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,240,-113.500000)"> <g fill="none" transform="matrix(1,0,0,1,240,-113.500000)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -470,7 +470,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,124,-41.500000)"> <g fill="none" transform="matrix(1,0,0,1,124,-41.500000)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -482,7 +482,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,240,-77.500000)"> <g fill="none" transform="matrix(1,0,0,1,240,-77.500000)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -494,7 +494,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,240,-41.500000)"> <g fill="none" transform="matrix(1,0,0,1,240,-41.500000)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -506,7 +506,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,240,-5.500000)"> <g fill="none" transform="matrix(1,0,0,1,240,-5.500000)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -518,7 +518,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,8,102.500000)"> <g fill="none" transform="matrix(1,0,0,1,8,102.500000)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -530,7 +530,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,124,30.500000)"> <g fill="none" transform="matrix(1,0,0,1,124,30.500000)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -542,7 +542,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,124,66.500000)"> <g fill="none" transform="matrix(1,0,0,1,124,66.500000)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -554,7 +554,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,124,102.500000)"> <g fill="none" transform="matrix(1,0,0,1,124,102.500000)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -566,7 +566,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,124,138.500000)"> <g fill="none" transform="matrix(1,0,0,1,124,138.500000)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -578,7 +578,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,124,174.500000)"> <g fill="none" transform="matrix(1,0,0,1,124,174.500000)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,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,0,0)">
<g fill="none" transform="matrix(1,0,0,1,-208,-28)"> <g fill="none" transform="matrix(1,0,0,1,-208,-28)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,-13,0)"> <g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -230,7 +230,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,-424,-343)"> <g fill="none" transform="matrix(1,0,0,1,-424,-343)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,-13,0)"> <g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -242,7 +242,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,-640,-469)"> <g fill="none" transform="matrix(1,0,0,1,-640,-469)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,-13,0)"> <g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -254,7 +254,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,-640,-433)"> <g fill="none" transform="matrix(1,0,0,1,-640,-433)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,-13,0)"> <g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -266,7 +266,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,-640,-397)"> <g fill="none" transform="matrix(1,0,0,1,-640,-397)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,-13,0)"> <g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -278,7 +278,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,-640,-361)"> <g fill="none" transform="matrix(1,0,0,1,-640,-361)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,-13,0)"> <g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -290,7 +290,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,-640,-325)"> <g fill="none" transform="matrix(1,0,0,1,-640,-325)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,-13,0)"> <g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -302,7 +302,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,-640,-289)"> <g fill="none" transform="matrix(1,0,0,1,-640,-289)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,-13,0)"> <g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -314,7 +314,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,-640,-253)"> <g fill="none" transform="matrix(1,0,0,1,-640,-253)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,-13,0)"> <g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -326,7 +326,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,-640,-217)"> <g fill="none" transform="matrix(1,0,0,1,-640,-217)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,-13,0)"> <g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -338,7 +338,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,-424,26)"> <g fill="none" transform="matrix(1,0,0,1,-424,26)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,-13,0)"> <g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -350,7 +350,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,-640,-91)"> <g fill="none" transform="matrix(1,0,0,1,-640,-91)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,-13,0)"> <g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -362,7 +362,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,-856,-181)"> <g fill="none" transform="matrix(1,0,0,1,-856,-181)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,-13,0)"> <g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -374,7 +374,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,-856,-145)"> <g fill="none" transform="matrix(1,0,0,1,-856,-145)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,-13,0)"> <g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -386,7 +386,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,-856,-109)"> <g fill="none" transform="matrix(1,0,0,1,-856,-109)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,-13,0)"> <g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -398,7 +398,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,-856,-73)"> <g fill="none" transform="matrix(1,0,0,1,-856,-73)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,-13,0)"> <g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -410,7 +410,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,-856,-37)"> <g fill="none" transform="matrix(1,0,0,1,-856,-37)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,-13,0)"> <g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -422,7 +422,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,-856,-1)"> <g fill="none" transform="matrix(1,0,0,1,-856,-1)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,-13,0)"> <g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -434,7 +434,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,-640,53)"> <g fill="none" transform="matrix(1,0,0,1,-640,53)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,-13,0)"> <g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -446,7 +446,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,-856,35)"> <g fill="none" transform="matrix(1,0,0,1,-856,35)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,-13,0)"> <g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -458,7 +458,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,-856,71)"> <g fill="none" transform="matrix(1,0,0,1,-856,71)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,-13,0)"> <g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -470,7 +470,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,-640,143)"> <g fill="none" transform="matrix(1,0,0,1,-640,143)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,-13,0)"> <g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -482,7 +482,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,-856,107)"> <g fill="none" transform="matrix(1,0,0,1,-856,107)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,-13,0)"> <g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -494,7 +494,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,-856,143)"> <g fill="none" transform="matrix(1,0,0,1,-856,143)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,-13,0)"> <g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -506,7 +506,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,-856,179)"> <g fill="none" transform="matrix(1,0,0,1,-856,179)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,-13,0)"> <g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -518,7 +518,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,-424,287)"> <g fill="none" transform="matrix(1,0,0,1,-424,287)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,-13,0)"> <g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -530,7 +530,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,-640,215)"> <g fill="none" transform="matrix(1,0,0,1,-640,215)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,-13,0)"> <g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -542,7 +542,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,-640,251)"> <g fill="none" transform="matrix(1,0,0,1,-640,251)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,-13,0)"> <g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -554,7 +554,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,-640,287)"> <g fill="none" transform="matrix(1,0,0,1,-640,287)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,-13,0)"> <g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -566,7 +566,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,-640,323)"> <g fill="none" transform="matrix(1,0,0,1,-640,323)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,-13,0)"> <g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -578,7 +578,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,-640,359)"> <g fill="none" transform="matrix(1,0,0,1,-640,359)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,-13,0)"> <g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,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,0,0)">
<g fill="none" transform="matrix(1,0,0,1,-208,-28)"> <g fill="none" transform="matrix(1,0,0,1,-208,-28)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -230,7 +230,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,8,-343)"> <g fill="none" transform="matrix(1,0,0,1,8,-343)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -242,7 +242,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,224,-469)"> <g fill="none" transform="matrix(1,0,0,1,224,-469)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -254,7 +254,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,224,-433)"> <g fill="none" transform="matrix(1,0,0,1,224,-433)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -266,7 +266,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,224,-397)"> <g fill="none" transform="matrix(1,0,0,1,224,-397)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -278,7 +278,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,224,-361)"> <g fill="none" transform="matrix(1,0,0,1,224,-361)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -290,7 +290,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,224,-325)"> <g fill="none" transform="matrix(1,0,0,1,224,-325)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -302,7 +302,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,224,-289)"> <g fill="none" transform="matrix(1,0,0,1,224,-289)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -314,7 +314,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,224,-253)"> <g fill="none" transform="matrix(1,0,0,1,224,-253)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -326,7 +326,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,224,-217)"> <g fill="none" transform="matrix(1,0,0,1,224,-217)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -338,7 +338,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,8,26)"> <g fill="none" transform="matrix(1,0,0,1,8,26)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -350,7 +350,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,224,-91)"> <g fill="none" transform="matrix(1,0,0,1,224,-91)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -362,7 +362,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,440,-181)"> <g fill="none" transform="matrix(1,0,0,1,440,-181)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -374,7 +374,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,440,-145)"> <g fill="none" transform="matrix(1,0,0,1,440,-145)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -386,7 +386,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,440,-109)"> <g fill="none" transform="matrix(1,0,0,1,440,-109)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -398,7 +398,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,440,-73)"> <g fill="none" transform="matrix(1,0,0,1,440,-73)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -410,7 +410,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,440,-37)"> <g fill="none" transform="matrix(1,0,0,1,440,-37)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -422,7 +422,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,440,-1)"> <g fill="none" transform="matrix(1,0,0,1,440,-1)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -434,7 +434,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,224,53)"> <g fill="none" transform="matrix(1,0,0,1,224,53)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -446,7 +446,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,440,35)"> <g fill="none" transform="matrix(1,0,0,1,440,35)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -458,7 +458,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,440,71)"> <g fill="none" transform="matrix(1,0,0,1,440,71)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -470,7 +470,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,224,143)"> <g fill="none" transform="matrix(1,0,0,1,224,143)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -482,7 +482,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,440,107)"> <g fill="none" transform="matrix(1,0,0,1,440,107)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -494,7 +494,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,440,143)"> <g fill="none" transform="matrix(1,0,0,1,440,143)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -506,7 +506,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,440,179)"> <g fill="none" transform="matrix(1,0,0,1,440,179)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -518,7 +518,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,8,287)"> <g fill="none" transform="matrix(1,0,0,1,8,287)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -530,7 +530,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,224,215)"> <g fill="none" transform="matrix(1,0,0,1,224,215)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -542,7 +542,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,224,251)"> <g fill="none" transform="matrix(1,0,0,1,224,251)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -554,7 +554,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,224,287)"> <g fill="none" transform="matrix(1,0,0,1,224,287)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -566,7 +566,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,224,323)"> <g fill="none" transform="matrix(1,0,0,1,224,323)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -578,7 +578,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,224,359)"> <g fill="none" transform="matrix(1,0,0,1,224,359)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,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,0,0)">
<g fill="none" transform="matrix(1,0,0,1,-108,-28)"> <g fill="none" transform="matrix(1,0,0,1,-108,-28)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,-13,0)"> <g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -230,7 +230,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,8,-212.500000)"> <g fill="none" transform="matrix(1,0,0,1,8,-212.500000)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -242,7 +242,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,124,-338.500000)"> <g fill="none" transform="matrix(1,0,0,1,124,-338.500000)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -254,7 +254,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,124,-302.500000)"> <g fill="none" transform="matrix(1,0,0,1,124,-302.500000)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -266,7 +266,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,124,-266.500000)"> <g fill="none" transform="matrix(1,0,0,1,124,-266.500000)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -278,7 +278,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,124,-230.500000)"> <g fill="none" transform="matrix(1,0,0,1,124,-230.500000)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -290,7 +290,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,124,-194.500000)"> <g fill="none" transform="matrix(1,0,0,1,124,-194.500000)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -302,7 +302,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,124,-158.500000)"> <g fill="none" transform="matrix(1,0,0,1,124,-158.500000)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -314,7 +314,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,124,-122.500000)"> <g fill="none" transform="matrix(1,0,0,1,124,-122.500000)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -326,7 +326,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,124,-86.500000)"> <g fill="none" transform="matrix(1,0,0,1,124,-86.500000)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -338,7 +338,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,8,156.500000)"> <g fill="none" transform="matrix(1,0,0,1,8,156.500000)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -350,7 +350,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,124,39.500000)"> <g fill="none" transform="matrix(1,0,0,1,124,39.500000)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -362,7 +362,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,240,-50.500000)"> <g fill="none" transform="matrix(1,0,0,1,240,-50.500000)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -374,7 +374,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,240,-14.500000)"> <g fill="none" transform="matrix(1,0,0,1,240,-14.500000)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -386,7 +386,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,240,21.500000)"> <g fill="none" transform="matrix(1,0,0,1,240,21.500000)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -398,7 +398,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,240,57.500000)"> <g fill="none" transform="matrix(1,0,0,1,240,57.500000)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -410,7 +410,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,240,93.500000)"> <g fill="none" transform="matrix(1,0,0,1,240,93.500000)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -422,7 +422,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,240,129.500000)"> <g fill="none" transform="matrix(1,0,0,1,240,129.500000)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -434,7 +434,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,124,183.500000)"> <g fill="none" transform="matrix(1,0,0,1,124,183.500000)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -446,7 +446,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,240,165.500000)"> <g fill="none" transform="matrix(1,0,0,1,240,165.500000)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -458,7 +458,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,240,201.500000)"> <g fill="none" transform="matrix(1,0,0,1,240,201.500000)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -470,7 +470,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,124,273.500000)"> <g fill="none" transform="matrix(1,0,0,1,124,273.500000)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -482,7 +482,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,240,237.500000)"> <g fill="none" transform="matrix(1,0,0,1,240,237.500000)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -494,7 +494,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,240,273.500000)"> <g fill="none" transform="matrix(1,0,0,1,240,273.500000)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -506,7 +506,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,240,309.500000)"> <g fill="none" transform="matrix(1,0,0,1,240,309.500000)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,13,0)"> <g fill="none" transform="matrix(1,0,0,1,13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -518,7 +518,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,-224,-28)"> <g fill="none" transform="matrix(1,0,0,1,-224,-28)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,-13,0)"> <g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -530,7 +530,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,-340,-100)"> <g fill="none" transform="matrix(1,0,0,1,-340,-100)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,-13,0)"> <g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -542,7 +542,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,-340,-64)"> <g fill="none" transform="matrix(1,0,0,1,-340,-64)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,-13,0)"> <g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -554,7 +554,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,-340,-28)"> <g fill="none" transform="matrix(1,0,0,1,-340,-28)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,-13,0)"> <g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -566,7 +566,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,-340,8)"> <g fill="none" transform="matrix(1,0,0,1,-340,8)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,-13,0)"> <g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,0)"> <g transform="matrix(1,0,0,1,0,0)">
@ -578,7 +578,7 @@
</g> </g>
<g fill="none" transform="matrix(1,0,0,1,-340,44)"> <g fill="none" transform="matrix(1,0,0,1,-340,44)">
<g 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(-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>
<g fill="none" transform="matrix(1,0,0,1,-13,0)"> <g fill="none" transform="matrix(1,0,0,1,-13,0)">
<g transform="matrix(1,0,0,1,0,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" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="6"/> <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)"> <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"/> <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>
<g transform="matrix(1,0,0,1,130.366562,110.733124)"> <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"/> <path fill="none" d="M 14.266873708001015,0 L 0,28.53374741600203" stroke-width="6" stroke="transparent"/>
</g> </g>
</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,0,0)">
<g fill="none" transform="matrix(1,0,0,1,100,100)"> <g fill="none" transform="matrix(1,0,0,1,100,100)">
<g transform="matrix(1,0,0,1,0,0)"> <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> </g>
<g fill="none" transform="matrix(1,0,0,1,150,100)"> <g fill="none" transform="matrix(1,0,0,1,150,100)">
<g transform="matrix(1,0,0,1,0,0)"> <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> </g>
<g fill="none" transform="matrix(1,0,0,1,125,150)"> <g fill="none" transform="matrix(1,0,0,1,125,150)">
<g transform="matrix(1,0,0,1,0,0)"> <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>
<g transform="matrix(1,0,0,1,0,0)"> <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> </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 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)"> <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> </g>
<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)"> <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> </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,0,0)">
<g fill="none" transform="matrix(1,0,0,1,235.821030,257.285004)"> <g fill="none" transform="matrix(1,0,0,1,235.821030,257.285004)">
<g 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> </g>
<g fill="none" transform="matrix(1,0,0,1,264.178955,242.714981)"> <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,0,0)">
<g fill="none" transform="matrix(1,0,0,1,235.821030,257.285004)"> <g fill="none" transform="matrix(1,0,0,1,235.821030,257.285004)">
<g 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> </g>
<g fill="none" transform="matrix(1,0,0,1,264.178955,242.714981)"> <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,0,0)">
<g fill="none" transform="matrix(1,0,0,1,235.821030,257.285004)"> <g fill="none" transform="matrix(1,0,0,1,235.821030,257.285004)">
<g 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> </g>
<g fill="none" transform="matrix(1,0,0,1,364.178955,342.714996)"> <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,0,0)">
<g fill="none" transform="matrix(1,0,0,1,235.821030,257.285004)"> <g fill="none" transform="matrix(1,0,0,1,235.821030,257.285004)">
<g 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> </g>
<g fill="none" transform="matrix(1,0,0,1,264.178955,242.714981)"> <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,0,0)">
<g fill="none" transform="matrix(1,0,0,1,235.821030,257.285004)"> <g fill="none" transform="matrix(1,0,0,1,235.821030,257.285004)">
<g 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> </g>
<g fill="none" transform="matrix(1,0,0,1,264.178955,242.714981)"> <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,0,0)">
<g fill="none" transform="matrix(1,0,0,1,330.209595,280.245056)"> <g fill="none" transform="matrix(1,0,0,1,330.209595,280.245056)">
<g 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> </g>
<g fill="none" transform="matrix(1,0,0,1,339.094788,315.543945)"> <g fill="none" transform="matrix(1,0,0,1,339.094788,315.543945)">
<g 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> </g>
<g fill="none" transform="matrix(1,0,0,1,370.968445,288.851654)"> <g fill="none" transform="matrix(1,0,0,1,370.968445,288.851654)">
<g 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> </g>
<g fill="none" transform="matrix(1,0,0,1,362.906281,318.573822)"> <g fill="none" transform="matrix(1,0,0,1,362.906281,318.573822)">
<g 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> </g>
<g fill="none" transform="matrix(1,0,0,1,390.833374,261.381805)"> <g fill="none" transform="matrix(1,0,0,1,390.833374,261.381805)">
<g 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> </g>
<g fill="none" transform="matrix(1,0,0,1,394.190338,288.745087)"> <g fill="none" transform="matrix(1,0,0,1,394.190338,288.745087)">
<g 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> </g>
<g fill="none" transform="matrix(1,0,0,1,431.701477,272.072021)"> <g fill="none" transform="matrix(1,0,0,1,431.701477,272.072021)">
<g 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> </g>
<g fill="none" transform="matrix(1,0,0,1,364.478424,257.281433)"> <g fill="none" transform="matrix(1,0,0,1,364.478424,257.281433)">
<g 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> </g>
<g fill="none" transform="matrix(1,0,0,1,318.348206,321.429230)"> <g fill="none" transform="matrix(1,0,0,1,318.348206,321.429230)">
<g 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> </g>
<g fill="none" transform="matrix(1,0,0,1,302.295441,260.872406)"> <g fill="none" transform="matrix(1,0,0,1,302.295441,260.872406)">
<g 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> </g>
<g fill="none" transform="matrix(1,0,0,1,266.383606,249.501328)"> <g fill="none" transform="matrix(1,0,0,1,266.383606,249.501328)">
<g 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> </g>
<g fill="none" transform="matrix(1,0,0,1,254.339722,283.957214)"> <g fill="none" transform="matrix(1,0,0,1,254.339722,283.957214)">
<g 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> </g>
<g fill="none" transform="matrix(1,0,0,1,304.881592,224.778290)"> <g fill="none" transform="matrix(1,0,0,1,304.881592,224.778290)">
<g 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> </g>
<g fill="none" transform="matrix(1,0,0,1,344.266449,234.282791)"> <g fill="none" transform="matrix(1,0,0,1,344.266449,234.282791)">
<g 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> </g>
<g fill="none" transform="matrix(1,0,0,1,290.466095,299.298279)"> <g fill="none" transform="matrix(1,0,0,1,290.466095,299.298279)">
<g 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> </g>
<g fill="none" transform="matrix(1,0,0,1,355.900360,303.345215)"> <g fill="none" transform="matrix(1,0,0,1,355.900360,303.345215)">
<g 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> </g>
<g fill="none" transform="matrix(1,0,0,1,247.790298,252.839096)"> <g fill="none" transform="matrix(1,0,0,1,247.790298,252.839096)">
<g 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> </g>
<g fill="none" transform="matrix(1,0,0,1,216.018387,234.606628)"> <g fill="none" transform="matrix(1,0,0,1,216.018387,234.606628)">
<g 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> </g>
<g fill="none" transform="matrix(1,0,0,1,215.189865,204.355621)"> <g fill="none" transform="matrix(1,0,0,1,215.189865,204.355621)">
<g 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> </g>
<g fill="none" transform="matrix(1,0,0,1,174.723480,192.877380)"> <g fill="none" transform="matrix(1,0,0,1,174.723480,192.877380)">
<g 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> </g>
<g fill="none" transform="matrix(1,0,0,1,235.141846,198.491043)"> <g fill="none" transform="matrix(1,0,0,1,235.141846,198.491043)">
<g 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> </g>
<g fill="none" transform="matrix(1,0,0,1,229.251373,229.822601)"> <g fill="none" transform="matrix(1,0,0,1,229.251373,229.822601)">
<g 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> </g>
<g fill="none" transform="matrix(1,0,0,1,181.786972,243.796219)"> <g fill="none" transform="matrix(1,0,0,1,181.786972,243.796219)">
<g 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> </g>
<g fill="none" transform="matrix(1,0,0,1,124.348000,190.456802)"> <g fill="none" transform="matrix(1,0,0,1,124.348000,190.456802)">
<g 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> </g>
<g fill="none" transform="matrix(1,0,0,1,220.322205,273.324493)"> <g fill="none" transform="matrix(1,0,0,1,220.322205,273.324493)">
<g 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> </g>
<g fill="none" transform="matrix(1,0,0,1,156.547409,271.011017)"> <g fill="none" transform="matrix(1,0,0,1,156.547409,271.011017)">
<g 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> </g>
<g fill="none" transform="matrix(1,0,0,1,171.814499,279.656586)"> <g fill="none" transform="matrix(1,0,0,1,171.814499,279.656586)">
<g 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> </g>
<g fill="none" transform="matrix(1,0,0,1,108.001213,157.540222)"> <g fill="none" transform="matrix(1,0,0,1,108.001213,157.540222)">
<g 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> </g>
<g fill="none" transform="matrix(1,0,0,1,138.816025,229.647766)"> <g fill="none" transform="matrix(1,0,0,1,138.816025,229.647766)">
<g 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> </g>
<g fill="none" transform="matrix(1,0,0,1,91.191887,173.894730)"> <g fill="none" transform="matrix(1,0,0,1,91.191887,173.894730)">
<g 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> </g>
<g fill="none" transform="matrix(1,0,0,1,147.265244,218.262314)"> <g fill="none" transform="matrix(1,0,0,1,147.265244,218.262314)">
<g 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> </g>
<g fill="none" transform="matrix(1,0,0,1,156.864365,206.825790)"> <g fill="none" transform="matrix(1,0,0,1,156.864365,206.825790)">
<g 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> </g>
<g fill="none" transform="matrix(1,0,0,1,137.782242,257.992889)"> <g fill="none" transform="matrix(1,0,0,1,137.782242,257.992889)">
<g 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> </g>
<g fill="none" transform="matrix(1,0,0,1,125.874176,224.421051)"> <g fill="none" transform="matrix(1,0,0,1,125.874176,224.421051)">
<g 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(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> </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 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)"> <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> </g>
<g fill="none" transform="matrix(1,0,0,1,0,0)"> <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" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="true" marker-end="false" stroke="transparent" stroke-width="5"/> <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)"> <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="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-dasharray="2,2" stroke="transparent"/> <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)"> <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="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-dasharray="0,0" stroke="transparent" 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>
</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" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/> <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)"> <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="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-dasharray="2,2" stroke="transparent"/> <path fill="none" d="M 61.55330422335368,0 L 0,101.47977182769122" stroke-width="5" stroke="transparent" stroke-dasharray="2,2"/>
</g> </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" 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" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/> <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)"> <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="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-dasharray="2,2" stroke="transparent"/> <path fill="none" d="M 0,0 L 60.295672512805595,96.63826964381178" stroke-width="5" stroke="transparent" stroke-dasharray="2,2"/>
</g> </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" transform="matrix(1,0,0,1,0,0)">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="5"/> <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)"> <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="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-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="5" stroke="transparent" stroke-dasharray="2,2"/>
</g> </g>
</g> </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 }); const graph = await createDemoGraph(animationElementStylePosition, { animation: true });
await expect(graph).toMatchAnimation(__filename, [0, 200, 1000], () => { await expect(graph).toMatchAnimation(__filename, [0, 200, 1000], () => {
graph.addNodeData([ graph.addNodeData([
{ id: 'node-4', style: { x: 50, y: 200, color: 'orange' } }, { id: 'node-4', style: { x: 50, y: 200, fill: 'orange' } },
{ id: 'node-5', style: { x: 75, y: 150, color: 'purple' } }, { id: 'node-5', style: { x: 75, y: 150, fill: 'purple' } },
{ id: 'node-6', style: { x: 200, y: 100, color: 'cyan' } }, { id: 'node-6', style: { x: 200, y: 100, fill: 'cyan' } },
]); ]);
graph.removeNodeData(['node-1']); graph.removeNodeData(['node-1']);
graph.updateNodeData([{ id: 'node-2', style: { x: 200, y: 200, stroke: 'green' } }]); 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 () => { it('click create edge', async () => {
await expect(graph).toMatchSnapshot(__filename); 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(`node:${CommonEvent.CLICK}`, { target: { id: 'node1' }, targetType: 'node' });
graph.emit(CommonEvent.POINTER_MOVE, { canvas: { x: 100, y: 100 } }); graph.emit(CommonEvent.POINTER_MOVE, { canvas: { x: 100, y: 100 } });
await expect(graph).toMatchSnapshot(__filename, 'click-edge1-move'); 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' }); graph.emit(`node:${CommonEvent.CLICK}`, { target: { id: 'node3' }, targetType: 'node' });
await expect(graph).toMatchSnapshot(__filename, 'click-edge2'); 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: 'node2' }, targetType: 'node' });
graph.emit(`node:${CommonEvent.CLICK}`, { target: { id: 'node3' }, targetType: 'node' }); graph.emit(`node:${CommonEvent.CLICK}`, { target: { id: 'node3' }, targetType: 'node' });
@ -39,7 +39,7 @@ describe('behavior create edge click', () => {
{ {
type: 'create-edge', type: 'create-edge',
trigger: 'click', trigger: 'click',
style: { color: 'red', lineWidth: 2 }, style: { stroke: 'red', lineWidth: 2 },
onCreate: (edge: EdgeData) => { onCreate: (edge: EdgeData) => {
const { source, target, ...rest } = edge; const { source, target, ...rest } = edge;
return { 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' }); graph.emit(CommonEvent.POINTER_UP, { target: { id: 'node3' }, targetType: 'node' });
await expect(graph).toMatchSnapshot(__filename, 'drag-edge2'); 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(`node:${CommonEvent.DRAG_START}`, { target: { id: 'node2' }, targetType: 'node' });
graph.emit(CommonEvent.POINTER_UP, { target: { id: 'node3' }, targetType: 'node' }); graph.emit(CommonEvent.POINTER_UP, { target: { id: 'node3' }, targetType: 'node' });
@ -39,7 +39,7 @@ describe('behavior create edge drag', () => {
{ {
type: 'create-edge', type: 'create-edge',
trigger: 'drag', trigger: 'drag',
style: { color: 'red', lineWidth: 2 }, style: { stroke: 'red', lineWidth: 2 },
onCreate: (edge: EdgeData) => { onCreate: (edge: EdgeData) => {
const { source, target, ...rest } = edge; const { source, target, ...rest } = edge;
return { 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}`); graph.emit(`canvas:${CommonEvent.CLICK}`);
await expect(graph).toMatchSnapshot(__filename, 'brush-clear-2'); 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_DOWN, { canvas: { x: 100, y: 100 }, targetType: 'canvas' });
graph.emit(CommonEvent.POINTER_MOVE, { canvas: { x: 400, y: 400 } }); 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}`); graph.emit(`canvas:${CommonEvent.CLICK}`);
await expect(graph).toMatchSnapshot(__filename, 'lasso-clear-2'); 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_DOWN, { canvas: { x: 100, y: 100 }, targetType: 'canvas' });
graph.emit(CommonEvent.POINTER_MOVE, { canvas: { x: 100, y: 300 } }); 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 () => { it('addData', async () => {
graph.addData({ graph.addData({
nodes: [{ id: 'node-5', style: { x: 200, y: 100, color: 'pink' } }], nodes: [{ id: 'node-5', style: { x: 200, y: 100, fill: 'pink' } }],
edges: [{ source: 'node-1', target: 'node-5', style: { color: 'brown' } }], edges: [{ source: 'node-1', target: 'node-5', style: { stroke: 'brown' } }],
}); });
graph.draw(); graph.draw();
await expect(graph).toMatchSnapshot(__filename, 'addData'); await expect(graph).toMatchSnapshot(__filename, 'addData');
@ -32,8 +32,8 @@ describe('history plugin', () => {
it('updateData', async () => { it('updateData', async () => {
graph.updateData({ graph.updateData({
nodes: [{ id: 'node-1', style: { x: 150, y: 100, color: 'red' } }], nodes: [{ id: 'node-1', style: { x: 150, y: 100, fill: 'red' } }],
edges: [{ id: 'edge-1', style: { color: 'green' } }], edges: [{ id: 'edge-1', style: { stroke: 'green' } }],
}); });
graph.draw(); graph.draw();
await expect(graph).toMatchSnapshot(__filename, 'updateData'); 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 { pluginTooltip } from '@/__tests__/demos';
import type { Tooltip } from '@/src';
import { createDemoGraph } from '@@/utils'; import { createDemoGraph } from '@@/utils';
describe('plugin tooltip', () => { describe('plugin tooltip', () => {
@ -43,9 +44,7 @@ describe('plugin tooltip', () => {
it('show tooltip by id', async () => { it('show tooltip by id', async () => {
const graph = await createDemoGraph(pluginTooltip); const graph = await createDemoGraph(pluginTooltip);
// @ts-expect-error const tooltip = graph.getPluginInstance<Tooltip>('tooltip');
const tooltip = graph.context.plugin.extensionMap['tooltip'];
// @ts-expect-error
tooltip.showTooltipById('6', 'node'); tooltip.showTooltipById('6', 'node');
await expect(graph).toMatchSnapshot(__filename, 'show-tooltip-by-id'); await expect(graph).toMatchSnapshot(__filename, 'show-tooltip-by-id');
graph.destroy(); 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!.selected,
...LIGHT_THEME.node!.state!.active, ...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-1')).toEqual({ fill: 'blue' });
expect(elementController.getDefaultStyle('node-2')).toEqual({ fill: 'red' }); expect(elementController.getDefaultStyle('node-2')).toEqual({ fill: 'red' });
@ -126,7 +117,6 @@ describe('ElementController', () => {
stroke: 'pink', stroke: 'pink',
lineWidth: 1, lineWidth: 1,
// from palette // from palette
color: BUILT_IN_PALETTES.spectral[0],
x: 100, x: 100,
y: 100, y: 100,
}); });
@ -135,7 +125,6 @@ describe('ElementController', () => {
...LIGHT_THEME.node?.style, ...LIGHT_THEME.node?.style,
fill: 'red', fill: 'red',
// from palette // from palette
color: BUILT_IN_PALETTES.spectral[1],
x: 150, x: 150,
y: 100, y: 100,
}); });
@ -148,14 +137,13 @@ describe('ElementController', () => {
// from state // from state
fill: 'purple', fill: 'purple',
// from palette // from palette
color: BUILT_IN_PALETTES.spectral[2],
x: 125, x: 125,
y: 150, y: 150,
}); });
expect(omit(elementController.getElementComputedStyle('edge', edge1), ['sourceNode', 'targetNode'])).toEqual({ expect(omit(elementController.getElementComputedStyle('edge', edge1), ['sourceNode', 'targetNode'])).toEqual({
...LIGHT_THEME.edge?.style, ...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({ expect(omit(elementController.getElementComputedStyle('edge', edge2), ['sourceNode', 'targetNode'])).toEqual({
@ -165,7 +153,6 @@ describe('ElementController', () => {
lineWidth: 4, lineWidth: 4,
stroke: 'red', stroke: 'red',
states: ['active', 'selected'], states: ['active', 'selected'],
color: BUILT_IN_PALETTES.oranges.at(-2),
}); });
const comboStyle = elementController.getElementComputedStyle('combo', combo1); const comboStyle = elementController.getElementComputedStyle('combo', combo1);
@ -174,7 +161,7 @@ describe('ElementController', () => {
expect(omit(comboStyle, ['childrenNode', 'childrenData'])).toEqual({ expect(omit(comboStyle, ['childrenNode', 'childrenData'])).toEqual({
...LIGHT_THEME.combo?.style, ...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({ graph = createGraph({
data: { data: {
nodes: [ nodes: [
{ id: 'node-1', style: { x: 150, y: 150, color: 'red' } }, { id: 'node-1', style: { x: 150, y: 150, fill: 'red' } },
{ id: 'node-2', style: { x: 175, y: 175, color: 'green' } }, { id: 'node-2', style: { x: 175, y: 175, fill: 'green' } },
{ id: 'node-3', style: { x: 200, y: 200, color: 'blue' } }, { id: 'node-3', style: { x: 200, y: 200, fill: 'blue' } },
], ],
}, },
theme: 'light', theme: 'light',

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

@ -22,25 +22,25 @@ describe('Graph', () => {
it('setNode/getNode', () => { it('setNode/getNode', () => {
const options = graph.getOptions(); 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({ expect(graph.getOptions().node!.state!.selected).toEqual({
color: 'pink', fill: 'pink',
}); });
}); });
it('setEdge/getEdge', () => { it('setEdge/getEdge', () => {
const options = graph.getOptions(); 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({ expect(graph.getOptions().edge!.state!.selected).toEqual({
color: 'pink', stroke: 'pink',
}); });
}); });
it('setCombo/getCombo', () => { it('setCombo/getCombo', () => {
const options = graph.getOptions(); 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({ 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, size: 50,
lineWidth: 5, lineWidth: 5,
stroke: 'pink', stroke: 'pink',
color: (d: any) => (d.id === '1' ? '#d4414c' : '#2f363d'), fill: (d: any) => (d.id === '1' ? '#d4414c' : '#2f363d'),
}, },
}); });
await graph.draw(); 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', id: 'new-edge',
source: 'node1', source: 'node1',
target: 'node4', target: 'node4',
style: { color: '#FF9800', lineWidth: 2 }, style: { stroke: '#FF9800', lineWidth: 2 },
}, },
{ {
id: 'new-loop', id: 'new-loop',
source: 'node5', source: 'node5',
target: 'node5', target: 'node5',
style: { color: '#FF9800', lineWidth: 2 }, style: { stroke: '#FF9800', lineWidth: 2 },
}, },
]); ]);
graph.draw(); 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 = { export const DEFAULT_STYLE = {
lineWidth: 1, lineWidth: 1,
color: '#EEF6FF', fill: '#EEF6FF',
stroke: '#DDEEFE', stroke: '#DDEEFE',
fillOpacity: 0.4, fillOpacity: 0.4,
zIndex: 2, zIndex: 2,
@ -133,7 +133,7 @@ export class BrushSelect<T extends BaseBehaviorOptions = BrushSelectOptions> ext
id: SHOW_RECT_ID, id: SHOW_RECT_ID,
style: { style: {
...BrushSelect.defaultOptions.style, ...BrushSelect.defaultOptions.style,
fill: style.color || DEFAULT_STYLE.color, fill: style.fill || DEFAULT_STYLE.fill,
...style, ...style,
pointerEvents: 'none', 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, id: SHOW_PATH_ID,
style: { style: {
...LassoSelect.defaultOptions.style, ...LassoSelect.defaultOptions.style,
fill: style.color || DEFAULT_STYLE.color, fill: style.fill || DEFAULT_STYLE.fill,
...style, ...style,
pointerEvents: 'none', 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 * <en/> Offset of the end arrow
*/ */
endArrowOffset?: number; endArrowOffset?: number;
/**
* <zh/> 主色
* <en/> Subject color
*/
color?: string;
/** /**
* <zh/> 边的起点 shape * <zh/> 边的起点 shape
* <en/> The source shape. Represents the start of the edge * <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 { 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); const path = isSameNode(sourceNode, targetNode) ? this.getLoopPath(attributes) : this.getKeyPath(attributes);
return { return {
path, path,
...omitStyleProps(style, ['halo', 'label', 'startArrow', 'endArrow']), ...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 * <en/> The size of node, which is a shortcut to set the width and height of node
*/ */
size?: Size; size?: Size;
/**
* <zh/> 主色
*
* <en/> Subject color
*/
color?: string;
/** /**
* @deprecated * @deprecated
* <zh/> 解决类型 style.getPropertyValue 问题，不要使用该属性 * <zh/> 解决类型 style.getPropertyValue 问题，不要使用该属性
@ -200,12 +194,9 @@ export abstract class BaseNode<S extends BaseNodeStyleProps = BaseNodeStyleProps
} }
protected getKeyStyle(attributes: Required<S>) { protected getKeyStyle(attributes: Required<S>) {
const { color, fill, ...style } = this.getGraphicStyle(attributes); const style = this.getGraphicStyle(attributes);
return Object.assign( return Object.assign(omitStyleProps(style, ['label', 'halo', 'icon', 'badge', 'port'])) as any;
{ fill: color || fill },
omitStyleProps(style, ['label', 'halo', 'icon', 'badge', 'port']),
) as any;
} }
protected getLabelStyle(attributes: Required<S>): false | LabelStyleProps { protected getLabelStyle(attributes: Required<S>): false | LabelStyleProps {

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

@ -25,7 +25,19 @@ export {
Triangle, Triangle,
} from './elements/nodes'; } from './elements/nodes';
export { BaseShape } from './elements/shapes'; 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 { getExtension, getExtensions, register } from './registry';
export { Graph } from './runtime/graph'; export { Graph } from './runtime/graph';
export { BaseTransform } from './transforms'; export { BaseTransform } from './transforms';
@ -59,7 +71,19 @@ export type {
TriangleStyleProps, TriangleStyleProps,
} from './elements/nodes'; } from './elements/nodes';
export type { BaseShapeStyleProps } from './elements/shapes'; 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 { RuntimeContext } from './runtime/types';
export type { export type {
BehaviorOptions, 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) { if (context) {
// 特殊处理：获取元素原始 color // 特殊处理：获取元素原始 color
const itemType = context.graph.getElementType(idOf(item.original)); const itemType = context.graph.getElementType(idOf(item.original));
const { color } = context.element!.getElementComputedStyle(itemType, item.original); const colorKey = itemType === 'edge' ? 'stroke' : 'fill';
newOriginal = { ...item.original, style: { color, ...item.original.style } } as ElementDatum; const style = context.element!.getElementComputedStyle(itemType, item.original);
newOriginal = {
...item.original,
style: { [colorKey]: style[colorKey], ...item.original.style },
} as ElementDatum;
} }
alignFields(newValue, newOriginal); alignFields(newValue, newOriginal);
cmd.current.update[category] ||= []; 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 { id } = item;
const value = get(item, ['data', getField(item)]); const value = get(item, ['data', getField(item)]);
const marker = element?.getElementType(type, item) || 'circle'; 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, '')) { if (id && value && value.replace(/\s+/g, '')) {
this.setFieldMap(value, id, type); this.setFieldMap(value, id, type);
if (!items[value]) { 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]; const color = this.paletteStyle[id];
if (!color) return {}; if (!color) return {};
return { color }; if (elementType === 'edge') return { stroke: color };
return { fill: color };
} }
private defaultStyle: Record<ID, Record<string, unknown>> = {}; private defaultStyle: Record<ID, Record<string, unknown>> = {};
@ -302,7 +303,7 @@ export class ElementController {
const id = idOf(datum); const id = idOf(datum);
// 优先级(从低到高) Priority (from low to high): // 优先级(从低到高) Priority (from low to high):
const themeStyle = this.getThemeStyle(elementType); const themeStyle = this.getThemeStyle(elementType);
const paletteStyle = this.getPaletteStyle(id); const paletteStyle = this.getPaletteStyle(elementType, id);
const dataStyle = datum.style || {}; const dataStyle = datum.style || {};
const defaultStyle = this.getDefaultStyle(id); const defaultStyle = this.getDefaultStyle(id);
const themeStateStyle = this.getThemeStateStyle(elementType, this.getElementState(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, badgeFontSize: 8,
badgePadding: [1, 4], badgePadding: [1, 4],
badgePalette: nodeBadgePalette, badgePalette: nodeBadgePalette,
color: nodeColor, fill: nodeColor,
halo: false, halo: false,
haloLineWidth: 12, haloLineWidth: 12,
haloStrokeOpacity: 0.25, haloStrokeOpacity: 0.25,
@ -127,7 +127,7 @@ export function create(tokens: ThemeTokens): Theme {
opacity: 0.25, opacity: 0.25,
}, },
disabled: { disabled: {
color: nodeColorDisabled, fill: nodeColorDisabled,
labelOpacity: 0.25, labelOpacity: 0.25,
donutOpacity: 0.25, donutOpacity: 0.25,
}, },
@ -136,13 +136,12 @@ export function create(tokens: ThemeTokens): Theme {
enter: 'fade', enter: 'fade',
exit: 'fade', exit: 'fade',
visibility: 'fade', visibility: 'fade',
update: [{ fields: ['x', 'y', 'color', 'stroke'] }], update: [{ fields: ['x', 'y', 'fill', 'stroke'] }],
}, },
}, },
edge: { edge: {
palette: edgePaletteOptions, palette: edgePaletteOptions,
style: { style: {
color: edgeColor,
halo: false, halo: false,
haloLineWidth: 12, haloLineWidth: 12,
haloStrokeOpacity: 0.25, haloStrokeOpacity: 0.25,
@ -160,6 +159,7 @@ export function create(tokens: ThemeTokens): Theme {
labelTextBaseline: 'middle', labelTextBaseline: 'middle',
lineWidth: 1, lineWidth: 1,
opacity: 1, opacity: 1,
stroke: edgeColor,
}, },
state: { state: {
selected: { selected: {
@ -180,7 +180,7 @@ export function create(tokens: ThemeTokens): Theme {
opacity: 0.25, opacity: 0.25,
}, },
disabled: { disabled: {
color: edgeColorDisabled, stroke: edgeColorDisabled,
labelOpacity: 0.25, labelOpacity: 0.25,
}, },
}, },
@ -188,7 +188,7 @@ export function create(tokens: ThemeTokens): Theme {
enter: 'fade', enter: 'fade',
exit: 'fade', exit: 'fade',
visibility: 'fade', visibility: 'fade',
update: [{ fields: ['color'] }, { fields: ['path'], shape: 'key' }], update: [{ fields: ['path', 'stroke'], shape: 'key' }],
}, },
}, },
combo: { combo: {
@ -196,7 +196,7 @@ export function create(tokens: ThemeTokens): Theme {
collapsedMaskFill: comboColor, collapsedMaskFill: comboColor,
collapsedMaskFontSize: 12, collapsedMaskFontSize: 12,
collapsedSize: 32, collapsedSize: 32,
color: comboColor, fill: comboColor,
halo: false, halo: false,
haloLineWidth: 12, haloLineWidth: 12,
haloStroke: comboStroke, haloStroke: comboStroke,
@ -235,7 +235,7 @@ export function create(tokens: ThemeTokens): Theme {
opacity: 0.65, opacity: 0.65,
}, },
disabled: { disabled: {
color: comboColorDisabled, fill: comboColorDisabled,
labelOpacity: 0.25, labelOpacity: 0.25,
opacity: 0.25, opacity: 0.25,
stroke: comboStrokeDisabled, stroke: comboStrokeDisabled,
@ -247,7 +247,7 @@ export function create(tokens: ThemeTokens): Theme {
visibility: 'fade', visibility: 'fade',
expand: 'combo-collapse-expand', expand: 'combo-collapse-expand',
collapse: '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, ...rest,
style: { style: {
...style, ...style,
color: 'red', stroke: 'red',
lineWidth: 2, lineWidth: 2,
endArrow: true, endArrow: true,
}, },

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

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

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

@ -39,7 +39,7 @@ const graph = new Graph({
type: 'create-edge', type: 'create-edge',
trigger: 'drag', trigger: 'drag',
style: { style: {
color: 'red', fill: 'red',
lineWidth: 2, 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 }, style: { size: 30 },
state: { state: {
highlight: { highlight: {
color: '#D580FF', fill: '#D580FF',
halo: true, halo: true,
lineWidth: 0, lineWidth: 0,
}, },
unhighlight: { unhighlight: {
color: '#99ADD1', fill: '#99ADD1',
}, },
}, },
}, },
edge: { edge: {
state: { state: {
highlight: { 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', mode: 'diff',
trigger: 'shift', trigger: 'shift',
style: { style: {
color: '#00f', fill: '#00f',
fillOpacity: 0.2, fillOpacity: 0.2,
stroke: '#0ff', stroke: '#0ff',
}, },

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

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

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

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

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

@ -4,7 +4,7 @@ const data = {
nodes: [ nodes: [
{ id: 'node-1', style: { x: 200, y: 200 } }, { id: 'node-1', style: { x: 200, y: 200 } },
{ id: 'node-2', style: { x: 350, y: 120 } }, { 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: [ edges: [
{ {

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

@ -21,7 +21,7 @@ const graph = new Graph({
style: { style: {
type: 'donut', // 👈🏻 Node shape type. type: 'donut', // 👈🏻 Node shape type.
size: 80, size: 80,
color: '#DB9D0D', fill: '#DB9D0D',
innerRadius: 0.5, innerRadius: 0.5,
donuts: (v, index) => { donuts: (v, index) => {
if (index === 0) return [1, 2, 3]; 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', labelPlacement: 'center',
labelText: (d) => d.id, labelText: (d) => d.id,
ports: [{ placement: 'top' }, { placement: 'bottom' }], ports: [{ placement: 'top' }, { placement: 'bottom' }],
color: (d) => { fill: (d) => {
const styles = { A: '#F09056', B: '#D580FF', C: '#01C9C9' }; const styles = { A: '#F09056', B: '#D580FF', C: '#01C9C9' };
return styles[d.style.parentId] || '#1883FF'; 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', id: '1',
style: { style: {
type: 'circle', type: 'circle',
color: '#5B8FF9', fill: '#5B8FF9',
}, },
data: { cluster: 'node-type1' }, data: { cluster: 'node-type1' },
}, },
@ -14,7 +14,7 @@ const data = {
id: '2', id: '2',
style: { style: {
type: 'rect', type: 'rect',
color: '#5AD8A6', fill: '#5AD8A6',
}, },
data: { cluster: 'node-type2' }, data: { cluster: 'node-type2' },
}, },
@ -22,7 +22,7 @@ const data = {
id: '3', id: '3',
style: { style: {
type: 'triangle', type: 'triangle',
color: '#5D7092', fill: '#5D7092',
}, },
data: { cluster: 'node-type3' }, data: { cluster: 'node-type3' },
}, },
@ -30,7 +30,7 @@ const data = {
id: '4', id: '4',
style: { style: {
type: 'diamond', type: 'diamond',
color: '#6F5EF9', fill: '#6F5EF9',
}, },
data: { cluster: 'node-type4' }, data: { cluster: 'node-type4' },
}, },
@ -42,7 +42,7 @@ const data = {
target: '2', target: '2',
style: { style: {
type: 'quadratic', type: 'quadratic',
color: '#F6BD16', stroke: '#F6BD16',
}, },
data: { cluster: 'edge-type1' }, data: { cluster: 'edge-type1' },
}, },

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

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

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

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