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

feat(behaviors): add brush-select, add lasso-select (#5623)

Browse Source 
* feat(behaviors): add brush-select

* feat(behaviors): add lasso-select/brush-select

---------

Co-authored-by: wb-xcf804241 <wb-xcf804241@alibaba-inc.com>
This commit is contained in:
Frank William 2024-04-12 14:03:07 +08:00 committed by GitHub
parent 09a62abc38
commit a0d6cfe7a5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
80 changed files with 6693 additions and 275 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
package.json
View File

@ -23,22 +23,22 @@
]
},
"devDependencies": {
"@babel/core": "^7.24.0",
"@babel/plugin-transform-typescript": "^7.23.6",
"@babel/core": "^7.24.4",
"@babel/plugin-transform-typescript": "^7.24.4",
"@commitlint/cli": "^18.6.1",
"@commitlint/config-conventional": "^18.6.2",
"@commitlint/config-conventional": "^18.6.3",
"@rollup/plugin-commonjs": "^25.0.7",
"@rollup/plugin-node-resolve": "^15.2.3",
"@rollup/plugin-terser": "^0.4.4",
"@rollup/plugin-typescript": "^11.1.6",
"@swc/core": "^1.4.11",
"@swc/core": "^1.4.13",
"@swc/jest": "^0.2.36",
"@types/jest": "^29.5.12",
"@types/jsdom": "^21.1.6",
"@types/node": "^20.11.24",
"@types/node": "^20.12.7",
"@typescript-eslint/eslint-plugin": "^6.21.0",
"@typescript-eslint/parser": "^6.21.0",
"chalk": "^4.1.0",
"chalk": "^4.1.2",
"eslint": "^8.57.0",
"eslint-plugin-jsdoc": "^46.10.1",
"husky": "^8.0.3",
@ -53,15 +53,15 @@
"open": "^10.1.0",
"prettier": "^3.2.5",
"prettier-plugin-organize-imports": "^3.2.4",
"prettier-plugin-packagejson": "^2.4.12",
"prettier-plugin-packagejson": "^2.5.0",
"rimraf": "^5.0.5",
"rollup": "^4.12.0",
"rollup": "^4.14.1",
"rollup-plugin-polyfill-node": "^0.13.0",
"rollup-plugin-visualizer": "^5.12.0",
"stats.js": "^0.17.0",
"turbo": "^1.12.4",
"typescript": "^5.3.3",
"vite": "^5.1.5",
"turbo": "^1.13.2",
"typescript": "^5.4.5",
"vite": "^5.2.8",
"xml-formatter": "^3.6.2"
}
}

3
packages/g6/.gitignore vendored
View File

@ -1,2 +1 @@
__tests__/**/*-actual.*
__tests__/**/*-diff.*
__tests__/**/*-actual.*

54
packages/g6/__tests__/demos/behavior-brush-select.ts Normal file
View File

@ -0,0 +1,54 @@
import { Graph } from '@/src';
export const behaviorBrushSelect: TestCase = async (context) => {
const graph = new Graph({
...context,
data: {
nodes: [
{ id: 'node1', style: { x: 150, y: 250, lineWidth: 0, parentId: 'combo1' } },
{ id: 'node2', style: { x: 250, y: 200, lineWidth: 0, parentId: 'combo1' } },
{ id: 'node3', style: { x: 350, y: 250, lineWidth: 0, parentId: 'combo1' } },
{ id: 'node4', style: { x: 250, y: 300, lineWidth: 0, parentId: 'combo1' } },
],
edges: [
{
id: 'edge1',
source: 'node1',
target: 'node2',
},
{
id: 'edge2',
source: 'node2',
target: 'node3',
},
{
id: 'edge3',
source: 'node3',
target: 'node4',
},
{
id: 'edge4',
source: 'node1',
target: 'node4',
},
],
combos: [{ id: 'combo1' }],
},
node: {
style: {
labelText: (d) => d.id,
},
},
animation: false,
behaviors: [
{
type: 'brush-select',
trigger: 'drag',
},
],
});
await graph.render();
return graph;
};

54
packages/g6/__tests__/demos/behavior-lasso-select.ts Normal file
View File

@ -0,0 +1,54 @@
import { Graph } from '@/src';
export const behaviorLassoSelect: TestCase = async (context) => {
const graph = new Graph({
...context,
data: {
nodes: [
{ id: 'node1', style: { x: 150, y: 250, lineWidth: 0, parentId: 'combo1' } },
{ id: 'node2', style: { x: 250, y: 200, lineWidth: 0, parentId: 'combo1' } },
{ id: 'node3', style: { x: 350, y: 250, lineWidth: 0, parentId: 'combo1' } },
{ id: 'node4', style: { x: 250, y: 300, lineWidth: 0, parentId: 'combo1' } },
],
edges: [
{
id: 'edge1',
source: 'node1',
target: 'node2',
},
{
id: 'edge2',
source: 'node2',
target: 'node3',
},
{
id: 'edge3',
source: 'node3',
target: 'node4',
},
{
id: 'edge4',
source: 'node1',
target: 'node4',
},
],
combos: [{ id: 'combo1' }],
},
node: {
style: {
labelText: (d) => d.id,
},
},
animation: false,
behaviors: [
{
type: 'lasso-select',
trigger: 'drag',
},
],
});
await graph.render();
return graph;
};

2
packages/g6/__tests__/demos/index.ts
View File

@ -5,11 +5,13 @@ export * from './animation-element-position';
export * from './animation-element-state';
export * from './animation-element-state-switch';
export * from './animation-element-style-position';
export * from './behavior-brush-select';
export * from './behavior-create-edge';
export * from './behavior-drag-canvas';
export * from './behavior-drag-element';
export * from './behavior-focus-element';
export * from './behavior-hover-element';
export * from './behavior-lasso-select';
export * from './behavior-zoom-canvas';
export * from './combo';
export * from './combo-expand-collapse';

94
packages/g6/__tests__/snapshots/behaviors/brush-select/brush-clear-1.svg Normal file
View File

@ -0,0 +1,94 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
<g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="g-svg-7" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="combo1" fill="none" transform="matrix(1,0,0,1,250.979996,261.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(253,253,253,1)" transform="translate(-153.09563155100147,-153.09563155100147)" cx="153.09563155100147" cy="153.09563155100147" stroke-dasharray="0,0" stroke-width="1" stroke="rgba(153,173,209,1)" r="153.09563155100147"/>
</g>
</g>
</g>
<g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,205.366562)">
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge2" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge2" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,205.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge3" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge3" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,255.366562)">
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge4" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge4" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,255.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
</g>
<g id="g-svg-5" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="node1" fill="none" transform="matrix(1,0,0,1,150,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node1
</text>
</g>
</g>
</g>
<g id="node2" fill="none" transform="matrix(1,0,0,1,250,200)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node2
</text>
</g>
</g>
</g>
<g id="node3" fill="none" transform="matrix(1,0,0,1,350,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node3
</text>
</g>
</g>
</g>
<g id="node4" fill="none" transform="matrix(1,0,0,1,250,300)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node4
</text>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB

94
packages/g6/__tests__/snapshots/behaviors/brush-select/brush-clear-2.svg Normal file
View File

@ -0,0 +1,94 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
<g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="g-svg-7" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="combo1" fill="none" transform="matrix(1,0,0,1,250.979996,261.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(253,253,253,1)" transform="translate(-153.09563155100147,-153.09563155100147)" cx="153.09563155100147" cy="153.09563155100147" stroke-dasharray="0,0" stroke-width="1" stroke="rgba(153,173,209,1)" r="153.09563155100147"/>
</g>
</g>
</g>
<g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,205.366562)">
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge2" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge2" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,205.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge3" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge3" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,255.366562)">
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge4" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge4" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,255.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
</g>
<g id="g-svg-5" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="node1" fill="none" transform="matrix(1,0,0,1,150,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node1
</text>
</g>
</g>
</g>
<g id="node2" fill="none" transform="matrix(1,0,0,1,250,200)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node2
</text>
</g>
</g>
</g>
<g id="node3" fill="none" transform="matrix(1,0,0,1,350,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node3
</text>
</g>
</g>
</g>
<g id="node4" fill="none" transform="matrix(1,0,0,1,250,300)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node4
</text>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB

94
packages/g6/__tests__/snapshots/behaviors/brush-select/brush-clear-3.svg Normal file
View File

@ -0,0 +1,94 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
<g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="g-svg-7" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="combo1" fill="none" transform="matrix(1,0,0,1,250.979996,261.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(253,253,253,1)" transform="translate(-153.09563155100147,-153.09563155100147)" cx="153.09563155100147" cy="153.09563155100147" stroke-dasharray="0,0" stroke-width="1" stroke="rgba(153,173,209,1)" r="153.09563155100147"/>
</g>
</g>
</g>
<g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,205.366562)">
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge2" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge2" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,205.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge3" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge3" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,255.366562)">
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge4" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge4" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,255.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
</g>
<g id="g-svg-5" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="node1" fill="none" transform="matrix(1,0,0,1,150,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node1
</text>
</g>
</g>
</g>
<g id="node2" fill="none" transform="matrix(1,0,0,1,250,200)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node2
</text>
</g>
</g>
</g>
<g id="node3" fill="none" transform="matrix(1,0,0,1,350,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node3
</text>
</g>
</g>
</g>
<g id="node4" fill="none" transform="matrix(1,0,0,1,250,300)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node4
</text>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB

94
packages/g6/__tests__/snapshots/behaviors/brush-select/brush-clear-4.svg Normal file
View File

@ -0,0 +1,94 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
<g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="g-svg-7" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="combo1" fill="none" transform="matrix(1,0,0,1,250.979996,261.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(253,253,253,1)" transform="translate(-153.09563155100147,-153.09563155100147)" cx="153.09563155100147" cy="153.09563155100147" stroke-dasharray="0,0" stroke-width="1" stroke="rgba(153,173,209,1)" r="153.09563155100147"/>
</g>
</g>
</g>
<g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,205.366562)">
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge2" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge2" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,205.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge3" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge3" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,255.366562)">
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge4" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge4" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,255.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
</g>
<g id="g-svg-5" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="node1" fill="none" transform="matrix(1,0,0,1,150,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node1
</text>
</g>
</g>
</g>
<g id="node2" fill="none" transform="matrix(1,0,0,1,250,200)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node2
</text>
</g>
</g>
</g>
<g id="node3" fill="none" transform="matrix(1,0,0,1,350,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node3
</text>
</g>
</g>
</g>
<g id="node4" fill="none" transform="matrix(1,0,0,1,250,300)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node4
</text>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB

94
packages/g6/__tests__/snapshots/behaviors/brush-select/brush-clear-5.svg Normal file
View File

@ -0,0 +1,94 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
<g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="g-svg-7" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="combo1" fill="none" transform="matrix(1,0,0,1,250.979996,261.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(253,253,253,1)" transform="translate(-153.09563155100147,-153.09563155100147)" cx="153.09563155100147" cy="153.09563155100147" stroke-dasharray="0,0" stroke-width="1" stroke="rgba(153,173,209,1)" r="153.09563155100147"/>
</g>
</g>
</g>
<g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,205.366562)">
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge2" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge2" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,205.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge3" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge3" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,255.366562)">
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge4" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge4" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,255.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
</g>
<g id="g-svg-5" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="node1" fill="none" transform="matrix(1,0,0,1,150,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node1
</text>
</g>
</g>
</g>
<g id="node2" fill="none" transform="matrix(1,0,0,1,250,200)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node2
</text>
</g>
</g>
</g>
<g id="node3" fill="none" transform="matrix(1,0,0,1,350,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node3
</text>
</g>
</g>
</g>
<g id="node4" fill="none" transform="matrix(1,0,0,1,250,300)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node4
</text>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB

94
packages/g6/__tests__/snapshots/behaviors/brush-select/brush-clear-mode-diff.svg Normal file
View File

@ -0,0 +1,94 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
<g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="g-svg-7" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="combo1" fill="none" transform="matrix(1,0,0,1,250.979996,261.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(253,253,253,1)" transform="translate(-153.09563155100147,-153.09563155100147)" cx="153.09563155100147" cy="153.09563155100147" stroke-dasharray="0,0" stroke-width="1" stroke="rgba(153,173,209,1)" r="153.09563155100147"/>
</g>
</g>
</g>
<g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,205.366562)">
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge2" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge2" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,205.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge3" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge3" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,255.366562)">
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge4" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge4" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,255.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
</g>
<g id="g-svg-5" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="node1" fill="none" transform="matrix(1,0,0,1,150,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node1
</text>
</g>
</g>
</g>
<g id="node2" fill="none" transform="matrix(1,0,0,1,250,200)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node2
</text>
</g>
</g>
</g>
<g id="node3" fill="none" transform="matrix(1,0,0,1,350,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node3
</text>
</g>
</g>
</g>
<g id="node4" fill="none" transform="matrix(1,0,0,1,250,300)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node4
</text>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB

94
packages/g6/__tests__/snapshots/behaviors/brush-select/brush-clear-mode-intersect.svg Normal file
View File

@ -0,0 +1,94 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
<g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="g-svg-7" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="combo1" fill="none" transform="matrix(1,0,0,1,250.979996,261.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(253,253,253,1)" transform="translate(-153.09563155100147,-153.09563155100147)" cx="153.09563155100147" cy="153.09563155100147" stroke-dasharray="0,0" stroke-width="1" stroke="rgba(153,173,209,1)" r="153.09563155100147"/>
</g>
</g>
</g>
<g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,205.366562)">
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge2" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge2" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,205.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge3" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge3" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,255.366562)">
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge4" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge4" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,255.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
</g>
<g id="g-svg-5" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="node1" fill="none" transform="matrix(1,0,0,1,150,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node1
</text>
</g>
</g>
</g>
<g id="node2" fill="none" transform="matrix(1,0,0,1,250,200)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node2
</text>
</g>
</g>
</g>
<g id="node3" fill="none" transform="matrix(1,0,0,1,350,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node3
</text>
</g>
</g>
</g>
<g id="node4" fill="none" transform="matrix(1,0,0,1,250,300)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node4
</text>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB

94
packages/g6/__tests__/snapshots/behaviors/brush-select/brush-clear-mode-union.svg Normal file
View File

@ -0,0 +1,94 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
<g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="g-svg-7" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="combo1" fill="none" transform="matrix(1,0,0,1,250.979996,261.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(253,253,253,1)" transform="translate(-153.09563155100147,-153.09563155100147)" cx="153.09563155100147" cy="153.09563155100147" stroke-dasharray="0,0" stroke-width="1" stroke="rgba(153,173,209,1)" r="153.09563155100147"/>
</g>
</g>
</g>
<g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,205.366562)">
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge2" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge2" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,205.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge3" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge3" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,255.366562)">
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge4" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge4" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,255.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
</g>
<g id="g-svg-5" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="node1" fill="none" transform="matrix(1,0,0,1,150,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node1
</text>
</g>
</g>
</g>
<g id="node2" fill="none" transform="matrix(1,0,0,1,250,200)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node2
</text>
</g>
</g>
</g>
<g id="node3" fill="none" transform="matrix(1,0,0,1,350,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node3
</text>
</g>
</g>
</g>
<g id="node4" fill="none" transform="matrix(1,0,0,1,250,300)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node4
</text>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB

94
packages/g6/__tests__/snapshots/behaviors/brush-select/brush-select-clear.svg Normal file
View File

@ -0,0 +1,94 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
<g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="g-svg-7" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="combo1" fill="none" transform="matrix(1,0,0,1,250.979996,261.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(253,253,253,1)" transform="translate(-153.09563155100147,-153.09563155100147)" cx="153.09563155100147" cy="153.09563155100147" stroke-dasharray="0,0" stroke-width="1" stroke="rgba(153,173,209,1)" r="153.09563155100147"/>
</g>
</g>
</g>
<g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,205.366562)">
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g id="edge2" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge2" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,205.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g id="edge3" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge3" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,255.366562)">
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g id="edge4" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge4" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,255.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="3" stroke="transparent"/>
</g>
</g>
</g>
<g id="g-svg-5" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="node1" fill="none" transform="matrix(1,0,0,1,150,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node1
</text>
</g>
</g>
</g>
<g id="node2" fill="none" transform="matrix(1,0,0,1,250,200)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node2
</text>
</g>
</g>
</g>
<g id="node3" fill="none" transform="matrix(1,0,0,1,350,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node3
</text>
</g>
</g>
</g>
<g id="node4" fill="none" transform="matrix(1,0,0,1,250,300)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node4
</text>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB

125
packages/g6/__tests__/snapshots/behaviors/brush-select/brush-selected-1.svg Normal file
View File

@ -0,0 +1,125 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
<g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="g-svg-7" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="combo1" fill="none" transform="matrix(1,0,0,1,251.059998,263.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="halo" fill="none" transform="translate(-156.67582487416496,-156.67582487416496)" cx="156.67582487416496" cy="156.67582487416496" stroke-dasharray="0,0" stroke-width="12" stroke="rgba(153,173,209,1)" r="156.67582487416496" stroke-opacity="0.25" pointer-events="none"/>
</g>
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(253,253,253,1)" transform="translate(-156.67582487416496,-156.67582487416496)" cx="156.67582487416496" cy="156.67582487416496" stroke-dasharray="0,0" stroke-width="4" stroke="rgba(153,173,209,1)" r="156.67582487416496"/>
</g>
</g>
</g>
<g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,205.366562)">
<path id="halo" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
<path id="halo" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="14" stroke="transparent" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
</g>
<g transform="matrix(1,0,0,1,160.733124,205.366562)">
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="2" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="2" stroke="transparent"/>
</g>
</g>
<g id="edge2" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge2" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,205.366562)">
<path id="halo" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
<path id="halo" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="14" stroke="transparent" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
</g>
<g transform="matrix(1,0,0,1,260.733124,205.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="2" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="2" stroke="transparent"/>
</g>
</g>
<g id="edge3" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge3" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,255.366562)">
<path id="halo" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
<path id="halo" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="14" stroke="transparent" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
</g>
<g transform="matrix(1,0,0,1,260.733124,255.366562)">
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="2" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="2" stroke="transparent"/>
</g>
</g>
<g id="edge4" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge4" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,255.366562)">
<path id="halo" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
<path id="halo" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="14" stroke="transparent" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
</g>
<g transform="matrix(1,0,0,1,160.733124,255.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="2" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="2" stroke="transparent"/>
</g>
</g>
</g>
<g id="g-svg-5" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="node1" fill="none" transform="matrix(1,0,0,1,150,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="halo" fill="none" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="12" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="3" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="13.5px" font-size="14" text-anchor="middle" font-weight="700">
node1
</text>
</g>
</g>
</g>
<g id="node2" fill="none" transform="matrix(1,0,0,1,250,200)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="halo" fill="none" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="12" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="3" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="13.5px" font-size="14" text-anchor="middle" font-weight="700">
node2
</text>
</g>
</g>
</g>
<g id="node3" fill="none" transform="matrix(1,0,0,1,350,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="halo" fill="none" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="12" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="3" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="13.5px" font-size="14" text-anchor="middle" font-weight="700">
node3
</text>
</g>
</g>
</g>
<g id="node4" fill="none" transform="matrix(1,0,0,1,250,300)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="halo" fill="none" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="12" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="3" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="13.5px" font-size="14" text-anchor="middle" font-weight="700">
node4
</text>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 9.3 KiB

107
packages/g6/__tests__/snapshots/behaviors/brush-select/brush-selected-2.svg Normal file
View File

@ -0,0 +1,107 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
<g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="g-svg-7" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="combo1" fill="none" transform="matrix(1,0,0,1,249.535004,261.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="halo" fill="none" transform="translate(-154.30879827475812,-154.30879827475812)" cx="154.30879827475812" cy="154.30879827475812" stroke-dasharray="0,0" stroke-width="12" stroke="rgba(153,173,209,1)" r="154.30879827475812" stroke-opacity="0.25" pointer-events="none"/>
</g>
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(253,253,253,1)" transform="translate(-154.30879827475812,-154.30879827475812)" cx="154.30879827475812" cy="154.30879827475812" stroke-dasharray="0,0" stroke-width="4" stroke="rgba(153,173,209,1)" r="154.30879827475812"/>
</g>
</g>
</g>
<g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,205.366562)">
<path id="halo" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
<path id="halo" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="14" stroke="transparent" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
</g>
<g transform="matrix(1,0,0,1,160.733124,205.366562)">
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="2" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="2" stroke="transparent"/>
</g>
</g>
<g id="edge2" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge2" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,205.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge3" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge3" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,255.366562)">
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge4" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge4" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,255.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
</g>
<g id="g-svg-5" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="node1" fill="none" transform="matrix(1,0,0,1,150,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="halo" fill="none" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="12" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="3" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="13.5px" font-size="14" text-anchor="middle" font-weight="700">
node1
</text>
</g>
</g>
</g>
<g id="node2" fill="none" transform="matrix(1,0,0,1,250,200)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="halo" fill="none" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="12" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="3" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="13.5px" font-size="14" text-anchor="middle" font-weight="700">
node2
</text>
</g>
</g>
</g>
<g id="node3" fill="none" transform="matrix(1,0,0,1,350,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node3
</text>
</g>
</g>
</g>
<g id="node4" fill="none" transform="matrix(1,0,0,1,250,300)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node4
</text>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 7.3 KiB

125
packages/g6/__tests__/snapshots/behaviors/brush-select/brush-selected-3.svg Normal file
View File

@ -0,0 +1,125 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
<g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="g-svg-7" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="combo1" fill="none" transform="matrix(1,0,0,1,251.059998,263.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="halo" fill="none" transform="translate(-156.67582487416496,-156.67582487416496)" cx="156.67582487416496" cy="156.67582487416496" stroke-dasharray="0,0" stroke-width="12" stroke="rgba(153,173,209,1)" r="156.67582487416496" stroke-opacity="0.25" pointer-events="none"/>
</g>
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(253,253,253,1)" transform="translate(-156.67582487416496,-156.67582487416496)" cx="156.67582487416496" cy="156.67582487416496" stroke-dasharray="0,0" stroke-width="4" stroke="rgba(153,173,209,1)" r="156.67582487416496"/>
</g>
</g>
</g>
<g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,205.366562)">
<path id="halo" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
<path id="halo" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="14" stroke="transparent" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
</g>
<g transform="matrix(1,0,0,1,160.733124,205.366562)">
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="2" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="2" stroke="transparent"/>
</g>
</g>
<g id="edge2" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge2" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,205.366562)">
<path id="halo" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
<path id="halo" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="14" stroke="transparent" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
</g>
<g transform="matrix(1,0,0,1,260.733124,205.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="2" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="2" stroke="transparent"/>
</g>
</g>
<g id="edge3" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge3" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,255.366562)">
<path id="halo" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
<path id="halo" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="14" stroke="transparent" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
</g>
<g transform="matrix(1,0,0,1,260.733124,255.366562)">
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="2" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="2" stroke="transparent"/>
</g>
</g>
<g id="edge4" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge4" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,255.366562)">
<path id="halo" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
<path id="halo" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="14" stroke="transparent" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
</g>
<g transform="matrix(1,0,0,1,160.733124,255.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="2" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="2" stroke="transparent"/>
</g>
</g>
</g>
<g id="g-svg-5" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="node1" fill="none" transform="matrix(1,0,0,1,150,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="halo" fill="none" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="12" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="3" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="13.5px" font-size="14" text-anchor="middle" font-weight="700">
node1
</text>
</g>
</g>
</g>
<g id="node2" fill="none" transform="matrix(1,0,0,1,250,200)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="halo" fill="none" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="12" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="3" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="13.5px" font-size="14" text-anchor="middle" font-weight="700">
node2
</text>
</g>
</g>
</g>
<g id="node3" fill="none" transform="matrix(1,0,0,1,350,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="halo" fill="none" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="12" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="3" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="13.5px" font-size="14" text-anchor="middle" font-weight="700">
node3
</text>
</g>
</g>
</g>
<g id="node4" fill="none" transform="matrix(1,0,0,1,250,300)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="halo" fill="none" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="12" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="3" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="13.5px" font-size="14" text-anchor="middle" font-weight="700">
node4
</text>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 9.3 KiB

125
packages/g6/__tests__/snapshots/behaviors/brush-select/brush-selected-4.svg Normal file
View File

@ -0,0 +1,125 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
<g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="g-svg-7" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="combo1" fill="none" transform="matrix(1,0,0,1,251.059998,263.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="halo" fill="none" transform="translate(-156.67582487416496,-156.67582487416496)" cx="156.67582487416496" cy="156.67582487416496" stroke-dasharray="0,0" stroke-width="12" stroke="rgba(153,173,209,1)" r="156.67582487416496" stroke-opacity="0.25" pointer-events="none"/>
</g>
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(253,253,253,1)" transform="translate(-156.67582487416496,-156.67582487416496)" cx="156.67582487416496" cy="156.67582487416496" stroke-dasharray="0,0" stroke-width="4" stroke="rgba(153,173,209,1)" r="156.67582487416496"/>
</g>
</g>
</g>
<g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,205.366562)">
<path id="halo" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
<path id="halo" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="14" stroke="transparent" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
</g>
<g transform="matrix(1,0,0,1,160.733124,205.366562)">
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="2" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="2" stroke="transparent"/>
</g>
</g>
<g id="edge2" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge2" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,205.366562)">
<path id="halo" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
<path id="halo" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="14" stroke="transparent" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
</g>
<g transform="matrix(1,0,0,1,260.733124,205.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="2" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="2" stroke="transparent"/>
</g>
</g>
<g id="edge3" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge3" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,255.366562)">
<path id="halo" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
<path id="halo" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="14" stroke="transparent" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
</g>
<g transform="matrix(1,0,0,1,260.733124,255.366562)">
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="2" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="2" stroke="transparent"/>
</g>
</g>
<g id="edge4" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge4" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,255.366562)">
<path id="halo" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
<path id="halo" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="14" stroke="transparent" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
</g>
<g transform="matrix(1,0,0,1,160.733124,255.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="2" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="2" stroke="transparent"/>
</g>
</g>
</g>
<g id="g-svg-5" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="node1" fill="none" transform="matrix(1,0,0,1,150,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="halo" fill="none" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="12" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="3" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="13.5px" font-size="14" text-anchor="middle" font-weight="700">
node1
</text>
</g>
</g>
</g>
<g id="node2" fill="none" transform="matrix(1,0,0,1,250,200)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="halo" fill="none" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="12" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="3" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="13.5px" font-size="14" text-anchor="middle" font-weight="700">
node2
</text>
</g>
</g>
</g>
<g id="node3" fill="none" transform="matrix(1,0,0,1,350,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="halo" fill="none" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="12" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="3" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="13.5px" font-size="14" text-anchor="middle" font-weight="700">
node3
</text>
</g>
</g>
</g>
<g id="node4" fill="none" transform="matrix(1,0,0,1,250,300)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="halo" fill="none" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="12" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="3" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="13.5px" font-size="14" text-anchor="middle" font-weight="700">
node4
</text>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 9.3 KiB

125
packages/g6/__tests__/snapshots/behaviors/brush-select/brush-selected-5.svg Normal file
View File

@ -0,0 +1,125 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
<g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="g-svg-7" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="combo1" fill="none" transform="matrix(1,0,0,1,250.979996,261.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="halo" fill="none" transform="translate(-153.09563155100147,-153.09563155100147)" cx="153.09563155100147" cy="153.09563155100147" stroke-dasharray="0,0" stroke-width="12" stroke="rgba(153,173,209,1)" r="153.09563155100147" stroke-opacity="0.25" pointer-events="none"/>
</g>
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(253,253,253,1)" transform="translate(-153.09563155100147,-153.09563155100147)" cx="153.09563155100147" cy="153.09563155100147" stroke-dasharray="0,0" stroke-width="1" stroke="rgba(153,173,209,1)" r="153.09563155100147"/>
</g>
</g>
</g>
<g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,205.366562)">
<path id="halo" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
<path id="halo" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="14" stroke="transparent" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
</g>
<g transform="matrix(1,0,0,1,160.733124,205.366562)">
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge2" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge2" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,205.366562)">
<path id="halo" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
<path id="halo" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="14" stroke="transparent" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
</g>
<g transform="matrix(1,0,0,1,260.733124,205.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge3" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge3" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,255.366562)">
<path id="halo" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
<path id="halo" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="14" stroke="transparent" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
</g>
<g transform="matrix(1,0,0,1,260.733124,255.366562)">
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge4" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge4" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,255.366562)">
<path id="halo" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
<path id="halo" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="14" stroke="transparent" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
</g>
<g transform="matrix(1,0,0,1,160.733124,255.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
</g>
<g id="g-svg-5" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="node1" fill="none" transform="matrix(1,0,0,1,150,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="halo" fill="none" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="12" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node1
</text>
</g>
</g>
</g>
<g id="node2" fill="none" transform="matrix(1,0,0,1,250,200)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="halo" fill="none" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="12" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node2
</text>
</g>
</g>
</g>
<g id="node3" fill="none" transform="matrix(1,0,0,1,350,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="halo" fill="none" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="12" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node3
</text>
</g>
</g>
</g>
<g id="node4" fill="none" transform="matrix(1,0,0,1,250,300)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="halo" fill="none" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="12" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node4
</text>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 9.3 KiB

125
packages/g6/__tests__/snapshots/behaviors/brush-select/brush-selected-mode-diff.svg Normal file
View File

@ -0,0 +1,125 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
<g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="g-svg-7" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="combo1" fill="none" transform="matrix(1,0,0,1,250.979996,261.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="halo" fill="none" transform="translate(-153.09563155100147,-153.09563155100147)" cx="153.09563155100147" cy="153.09563155100147" stroke-dasharray="0,0" stroke-width="12" stroke="rgba(153,173,209,1)" r="153.09563155100147" stroke-opacity="0.25" pointer-events="none"/>
</g>
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(253,253,253,1)" transform="translate(-153.09563155100147,-153.09563155100147)" cx="153.09563155100147" cy="153.09563155100147" stroke-dasharray="0,0" stroke-width="1" stroke="rgba(153,173,209,1)" r="153.09563155100147"/>
</g>
</g>
</g>
<g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,205.366562)">
<path id="halo" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
<path id="halo" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="14" stroke="transparent" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
</g>
<g transform="matrix(1,0,0,1,160.733124,205.366562)">
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge2" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge2" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,205.366562)">
<path id="halo" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
<path id="halo" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="14" stroke="transparent" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
</g>
<g transform="matrix(1,0,0,1,260.733124,205.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge3" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge3" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,255.366562)">
<path id="halo" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
<path id="halo" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="14" stroke="transparent" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
</g>
<g transform="matrix(1,0,0,1,260.733124,255.366562)">
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge4" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge4" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,255.366562)">
<path id="halo" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
<path id="halo" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="14" stroke="transparent" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
</g>
<g transform="matrix(1,0,0,1,160.733124,255.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
</g>
<g id="g-svg-5" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="node1" fill="none" transform="matrix(1,0,0,1,150,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="halo" fill="none" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="12" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node1
</text>
</g>
</g>
</g>
<g id="node2" fill="none" transform="matrix(1,0,0,1,250,200)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="halo" fill="none" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="12" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node2
</text>
</g>
</g>
</g>
<g id="node3" fill="none" transform="matrix(1,0,0,1,350,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="halo" fill="none" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="12" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node3
</text>
</g>
</g>
</g>
<g id="node4" fill="none" transform="matrix(1,0,0,1,250,300)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="halo" fill="none" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="12" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node4
</text>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 9.3 KiB

94
packages/g6/__tests__/snapshots/behaviors/brush-select/brush-selected-mode-intersect.svg Normal file
View File

@ -0,0 +1,94 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
<g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="g-svg-7" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="combo1" fill="none" transform="matrix(1,0,0,1,250.979996,261.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(253,253,253,1)" transform="translate(-153.09563155100147,-153.09563155100147)" cx="153.09563155100147" cy="153.09563155100147" stroke-dasharray="0,0" stroke-width="1" stroke="rgba(153,173,209,1)" r="153.09563155100147"/>
</g>
</g>
</g>
<g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,205.366562)">
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge2" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge2" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,205.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge3" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge3" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,255.366562)">
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge4" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge4" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,255.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
</g>
<g id="g-svg-5" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="node1" fill="none" transform="matrix(1,0,0,1,150,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node1
</text>
</g>
</g>
</g>
<g id="node2" fill="none" transform="matrix(1,0,0,1,250,200)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node2
</text>
</g>
</g>
</g>
<g id="node3" fill="none" transform="matrix(1,0,0,1,350,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node3
</text>
</g>
</g>
</g>
<g id="node4" fill="none" transform="matrix(1,0,0,1,250,300)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node4
</text>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB

125
packages/g6/__tests__/snapshots/behaviors/brush-select/brush-selected-mode-union.svg Normal file
View File

@ -0,0 +1,125 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
<g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="g-svg-7" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="combo1" fill="none" transform="matrix(1,0,0,1,250.979996,261.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="halo" fill="none" transform="translate(-153.09563155100147,-153.09563155100147)" cx="153.09563155100147" cy="153.09563155100147" stroke-dasharray="0,0" stroke-width="12" stroke="rgba(153,173,209,1)" r="153.09563155100147" stroke-opacity="0.25" pointer-events="none"/>
</g>
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(253,253,253,1)" transform="translate(-153.09563155100147,-153.09563155100147)" cx="153.09563155100147" cy="153.09563155100147" stroke-dasharray="0,0" stroke-width="1" stroke="rgba(153,173,209,1)" r="153.09563155100147"/>
</g>
</g>
</g>
<g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,205.366562)">
<path id="halo" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
<path id="halo" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="14" stroke="transparent" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
</g>
<g transform="matrix(1,0,0,1,160.733124,205.366562)">
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge2" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge2" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,205.366562)">
<path id="halo" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
<path id="halo" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="14" stroke="transparent" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
</g>
<g transform="matrix(1,0,0,1,260.733124,205.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge3" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge3" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,255.366562)">
<path id="halo" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
<path id="halo" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="14" stroke="transparent" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
</g>
<g transform="matrix(1,0,0,1,260.733124,255.366562)">
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge4" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge4" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,255.366562)">
<path id="halo" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
<path id="halo" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="14" stroke="transparent" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
</g>
<g transform="matrix(1,0,0,1,160.733124,255.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
</g>
<g id="g-svg-5" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="node1" fill="none" transform="matrix(1,0,0,1,150,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="halo" fill="none" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="12" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node1
</text>
</g>
</g>
</g>
<g id="node2" fill="none" transform="matrix(1,0,0,1,250,200)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="halo" fill="none" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="12" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node2
</text>
</g>
</g>
</g>
<g id="node3" fill="none" transform="matrix(1,0,0,1,350,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="halo" fill="none" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="12" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node3
</text>
</g>
</g>
</g>
<g id="node4" fill="none" transform="matrix(1,0,0,1,250,300)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="halo" fill="none" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="12" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node4
</text>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 9.3 KiB

97
packages/g6/__tests__/snapshots/behaviors/brush-select/brush-selecting-1.svg Normal file
View File

@ -0,0 +1,97 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
<g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="g-svg-7" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="combo1" fill="none" transform="matrix(1,0,0,1,250.979996,261.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(253,253,253,1)" transform="translate(-153.09563155100147,-153.09563155100147)" cx="153.09563155100147" cy="153.09563155100147" stroke-dasharray="0,0" stroke-width="1" stroke="rgba(153,173,209,1)" r="153.09563155100147"/>
</g>
</g>
</g>
<g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,205.366562)">
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g id="edge2" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge2" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,205.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g id="edge3" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge3" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,255.366562)">
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g id="edge4" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge4" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,255.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="3" stroke="transparent"/>
</g>
</g>
</g>
<g id="g-svg-5" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="node1" fill="none" transform="matrix(1,0,0,1,150,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node1
</text>
</g>
</g>
</g>
<g id="node2" fill="none" transform="matrix(1,0,0,1,250,200)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node2
</text>
</g>
</g>
</g>
<g id="node3" fill="none" transform="matrix(1,0,0,1,350,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node3
</text>
</g>
</g>
</g>
<g id="node4" fill="none" transform="matrix(1,0,0,1,250,300)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node4
</text>
</g>
</g>
</g>
</g>
<g transform="matrix(1,0,0,1,100,100)">
<path id="g6-brush-select-rect-id" fill="rgba(238,246,255,1)" stroke-width="1" stroke="rgba(221,238,254,1)" fill-opacity="0.4" pointer-events="none" d="M 0,0 l 300,0 l 0,300 l-300 0 z" width="300" height="300"/>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.3 KiB

97
packages/g6/__tests__/snapshots/behaviors/brush-select/brush-selecting-2.svg Normal file
View File

@ -0,0 +1,97 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
<g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="g-svg-7" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="combo1" fill="none" transform="matrix(1,0,0,1,250.979996,261.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(253,253,253,1)" transform="translate(-153.09563155100147,-153.09563155100147)" cx="153.09563155100147" cy="153.09563155100147" stroke-dasharray="0,0" stroke-width="1" stroke="rgba(153,173,209,1)" r="153.09563155100147"/>
</g>
</g>
</g>
<g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,205.366562)">
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge2" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge2" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,205.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge3" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge3" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,255.366562)">
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge4" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge4" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,255.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
</g>
<g id="g-svg-5" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="node1" fill="none" transform="matrix(1,0,0,1,150,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node1
</text>
</g>
</g>
</g>
<g id="node2" fill="none" transform="matrix(1,0,0,1,250,200)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node2
</text>
</g>
</g>
</g>
<g id="node3" fill="none" transform="matrix(1,0,0,1,350,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node3
</text>
</g>
</g>
</g>
<g id="node4" fill="none" transform="matrix(1,0,0,1,250,300)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node4
</text>
</g>
</g>
</g>
</g>
<g transform="matrix(1,0,0,1,100,100)">
<path id="g6-brush-select-rect-id" fill="rgba(238,246,255,1)" stroke-width="1" stroke="rgba(221,238,254,1)" fill-opacity="0.4" pointer-events="none" d="M 0,0 l 200,0 l 0,200 l-200 0 z" width="200" height="200"/>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.3 KiB

97
packages/g6/__tests__/snapshots/behaviors/brush-select/brush-selecting-3.svg Normal file
View File

@ -0,0 +1,97 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
<g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="g-svg-7" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="combo1" fill="none" transform="matrix(1,0,0,1,250.979996,261.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(253,253,253,1)" transform="translate(-153.09563155100147,-153.09563155100147)" cx="153.09563155100147" cy="153.09563155100147" stroke-dasharray="0,0" stroke-width="1" stroke="rgba(153,173,209,1)" r="153.09563155100147"/>
</g>
</g>
</g>
<g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,205.366562)">
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge2" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge2" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,205.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge3" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge3" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,255.366562)">
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge4" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge4" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,255.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
</g>
<g id="g-svg-5" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="node1" fill="none" transform="matrix(1,0,0,1,150,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node1
</text>
</g>
</g>
</g>
<g id="node2" fill="none" transform="matrix(1,0,0,1,250,200)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node2
</text>
</g>
</g>
</g>
<g id="node3" fill="none" transform="matrix(1,0,0,1,350,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node3
</text>
</g>
</g>
</g>
<g id="node4" fill="none" transform="matrix(1,0,0,1,250,300)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node4
</text>
</g>
</g>
</g>
</g>
<g transform="matrix(1,0,0,1,100,100)">
<path id="g6-brush-select-rect-id" fill="rgba(0,128,0,1)" stroke-width="2" stroke="rgba(0,0,255,1)" fill-opacity="0.4" pointer-events="none" d="M 0,0 l 300,0 l 0,300 l-300 0 z" width="300" height="300"/>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.3 KiB

97
packages/g6/__tests__/snapshots/behaviors/brush-select/brush-selecting-4.svg Normal file
View File

@ -0,0 +1,97 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
<g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="g-svg-7" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="combo1" fill="none" transform="matrix(1,0,0,1,250.979996,261.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(253,253,253,1)" transform="translate(-153.09563155100147,-153.09563155100147)" cx="153.09563155100147" cy="153.09563155100147" stroke-dasharray="0,0" stroke-width="1" stroke="rgba(153,173,209,1)" r="153.09563155100147"/>
</g>
</g>
</g>
<g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,205.366562)">
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge2" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge2" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,205.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge3" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge3" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,255.366562)">
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge4" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge4" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,255.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
</g>
<g id="g-svg-5" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="node1" fill="none" transform="matrix(1,0,0,1,150,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node1
</text>
</g>
</g>
</g>
<g id="node2" fill="none" transform="matrix(1,0,0,1,250,200)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node2
</text>
</g>
</g>
</g>
<g id="node3" fill="none" transform="matrix(1,0,0,1,350,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node3
</text>
</g>
</g>
</g>
<g id="node4" fill="none" transform="matrix(1,0,0,1,250,300)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node4
</text>
</g>
</g>
</g>
</g>
<g transform="matrix(1,0,0,1,100,100)">
<path id="g6-brush-select-rect-id" fill="rgba(0,128,0,1)" stroke-width="2" stroke="rgba(0,0,255,1)" fill-opacity="0.4" pointer-events="none" d="M 0,0 l 300,0 l 0,300 l-300 0 z" width="300" height="300"/>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.3 KiB

128
packages/g6/__tests__/snapshots/behaviors/brush-select/brush-selecting-5.svg Normal file
View File

@ -0,0 +1,128 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
<g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="g-svg-7" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="combo1" fill="none" transform="matrix(1,0,0,1,250.979996,261.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="halo" fill="none" transform="translate(-153.09563155100147,-153.09563155100147)" cx="153.09563155100147" cy="153.09563155100147" stroke-dasharray="0,0" stroke-width="12" stroke="rgba(153,173,209,1)" r="153.09563155100147" stroke-opacity="0.25" pointer-events="none"/>
</g>
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(253,253,253,1)" transform="translate(-153.09563155100147,-153.09563155100147)" cx="153.09563155100147" cy="153.09563155100147" stroke-dasharray="0,0" stroke-width="1" stroke="rgba(153,173,209,1)" r="153.09563155100147"/>
</g>
</g>
</g>
<g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,205.366562)">
<path id="halo" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
<path id="halo" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="14" stroke="transparent" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
</g>
<g transform="matrix(1,0,0,1,160.733124,205.366562)">
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge2" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge2" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,205.366562)">
<path id="halo" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
<path id="halo" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="14" stroke="transparent" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
</g>
<g transform="matrix(1,0,0,1,260.733124,205.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge3" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge3" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,255.366562)">
<path id="halo" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
<path id="halo" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="14" stroke="transparent" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
</g>
<g transform="matrix(1,0,0,1,260.733124,255.366562)">
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge4" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge4" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,255.366562)">
<path id="halo" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
<path id="halo" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="14" stroke="transparent" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
</g>
<g transform="matrix(1,0,0,1,160.733124,255.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
</g>
<g id="g-svg-5" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="node1" fill="none" transform="matrix(1,0,0,1,150,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="halo" fill="none" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="12" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node1
</text>
</g>
</g>
</g>
<g id="node2" fill="none" transform="matrix(1,0,0,1,250,200)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="halo" fill="none" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="12" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node2
</text>
</g>
</g>
</g>
<g id="node3" fill="none" transform="matrix(1,0,0,1,350,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="halo" fill="none" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="12" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node3
</text>
</g>
</g>
</g>
<g id="node4" fill="none" transform="matrix(1,0,0,1,250,300)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="halo" fill="none" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="12" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node4
</text>
</g>
</g>
</g>
</g>
<g transform="matrix(1,0,0,1,100,100)">
<path id="g6-brush-select-rect-id" fill="rgba(0,128,0,1)" stroke-width="2" stroke="rgba(0,0,255,1)" fill-opacity="0.4" pointer-events="none" d="M 0,0 l 300,0 l 0,300 l-300 0 z" width="300" height="300"/>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 9.6 KiB

97
packages/g6/__tests__/snapshots/behaviors/brush-select/brush-selecting-mode-diff.svg Normal file
View File

@ -0,0 +1,97 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
<g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="g-svg-7" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="combo1" fill="none" transform="matrix(1,0,0,1,250.979996,261.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(253,253,253,1)" transform="translate(-153.09563155100147,-153.09563155100147)" cx="153.09563155100147" cy="153.09563155100147" stroke-dasharray="0,0" stroke-width="1" stroke="rgba(153,173,209,1)" r="153.09563155100147"/>
</g>
</g>
</g>
<g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,205.366562)">
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge2" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge2" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,205.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge3" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge3" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,255.366562)">
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge4" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge4" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,255.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
</g>
<g id="g-svg-5" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="node1" fill="none" transform="matrix(1,0,0,1,150,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node1
</text>
</g>
</g>
</g>
<g id="node2" fill="none" transform="matrix(1,0,0,1,250,200)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node2
</text>
</g>
</g>
</g>
<g id="node3" fill="none" transform="matrix(1,0,0,1,350,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node3
</text>
</g>
</g>
</g>
<g id="node4" fill="none" transform="matrix(1,0,0,1,250,300)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node4
</text>
</g>
</g>
</g>
</g>
<g transform="matrix(1,0,0,1,100,100)">
<path id="g6-brush-select-rect-id" fill="rgba(0,128,0,1)" stroke-width="2" stroke="rgba(0,0,255,1)" fill-opacity="0.4" pointer-events="none" d="M 0,0 l 300,0 l 0,300 l-300 0 z" width="300" height="300"/>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.3 KiB

97
packages/g6/__tests__/snapshots/behaviors/brush-select/brush-selecting-mode-intersect.svg Normal file
View File

@ -0,0 +1,97 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
<g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="g-svg-7" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="combo1" fill="none" transform="matrix(1,0,0,1,250.979996,261.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(253,253,253,1)" transform="translate(-153.09563155100147,-153.09563155100147)" cx="153.09563155100147" cy="153.09563155100147" stroke-dasharray="0,0" stroke-width="1" stroke="rgba(153,173,209,1)" r="153.09563155100147"/>
</g>
</g>
</g>
<g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,205.366562)">
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge2" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge2" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,205.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge3" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge3" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,255.366562)">
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge4" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge4" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,255.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
</g>
<g id="g-svg-5" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="node1" fill="none" transform="matrix(1,0,0,1,150,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node1
</text>
</g>
</g>
</g>
<g id="node2" fill="none" transform="matrix(1,0,0,1,250,200)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node2
</text>
</g>
</g>
</g>
<g id="node3" fill="none" transform="matrix(1,0,0,1,350,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node3
</text>
</g>
</g>
</g>
<g id="node4" fill="none" transform="matrix(1,0,0,1,250,300)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node4
</text>
</g>
</g>
</g>
</g>
<g transform="matrix(1,0,0,1,100,100)">
<path id="g6-brush-select-rect-id" fill="rgba(0,128,0,1)" stroke-width="2" stroke="rgba(0,0,255,1)" fill-opacity="0.4" pointer-events="none" d="M 0,0 l 300,0 l 0,300 l-300 0 z" width="300" height="300"/>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.3 KiB

97
packages/g6/__tests__/snapshots/behaviors/brush-select/brush-selecting-mode-union.svg Normal file
View File

@ -0,0 +1,97 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
<g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="g-svg-7" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="combo1" fill="none" transform="matrix(1,0,0,1,250.979996,261.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(253,253,253,1)" transform="translate(-153.09563155100147,-153.09563155100147)" cx="153.09563155100147" cy="153.09563155100147" stroke-dasharray="0,0" stroke-width="1" stroke="rgba(153,173,209,1)" r="153.09563155100147"/>
</g>
</g>
</g>
<g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,205.366562)">
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge2" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge2" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,205.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge3" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge3" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,255.366562)">
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge4" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge4" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,255.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
</g>
<g id="g-svg-5" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="node1" fill="none" transform="matrix(1,0,0,1,150,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node1
</text>
</g>
</g>
</g>
<g id="node2" fill="none" transform="matrix(1,0,0,1,250,200)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node2
</text>
</g>
</g>
</g>
<g id="node3" fill="none" transform="matrix(1,0,0,1,350,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node3
</text>
</g>
</g>
</g>
<g id="node4" fill="none" transform="matrix(1,0,0,1,250,300)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node4
</text>
</g>
</g>
</g>
</g>
<g transform="matrix(1,0,0,1,100,100)">
<path id="g6-brush-select-rect-id" fill="rgba(0,128,0,1)" stroke-width="2" stroke="rgba(0,0,255,1)" fill-opacity="0.4" pointer-events="none" d="M 0,0 l 300,0 l 0,300 l-300 0 z" width="300" height="300"/>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.3 KiB

94
packages/g6/__tests__/snapshots/behaviors/brush-select/default.svg Normal file
View File

@ -0,0 +1,94 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
<g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="g-svg-7" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="combo1" fill="none" transform="matrix(1,0,0,1,250.979996,261.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(253,253,253,1)" transform="translate(-153.09563155100147,-153.09563155100147)" cx="153.09563155100147" cy="153.09563155100147" stroke-dasharray="0,0" stroke-width="1" stroke="rgba(153,173,209,1)" r="153.09563155100147"/>
</g>
</g>
</g>
<g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,205.366562)">
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g id="edge2" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge2" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,205.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g id="edge3" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge3" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,255.366562)">
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g id="edge4" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge4" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,255.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="3" stroke="transparent"/>
</g>
</g>
</g>
<g id="g-svg-5" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="node1" fill="none" transform="matrix(1,0,0,1,150,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node1
</text>
</g>
</g>
</g>
<g id="node2" fill="none" transform="matrix(1,0,0,1,250,200)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node2
</text>
</g>
</g>
</g>
<g id="node3" fill="none" transform="matrix(1,0,0,1,350,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node3
</text>
</g>
</g>
</g>
<g id="node4" fill="none" transform="matrix(1,0,0,1,250,300)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node4
</text>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB

94
packages/g6/__tests__/snapshots/behaviors/lasso-select/default.svg Normal file
View File

@ -0,0 +1,94 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
<g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="g-svg-7" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="combo1" fill="none" transform="matrix(1,0,0,1,250.979996,261.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(253,253,253,1)" transform="translate(-153.09563155100147,-153.09563155100147)" cx="153.09563155100147" cy="153.09563155100147" stroke-dasharray="0,0" stroke-width="1" stroke="rgba(153,173,209,1)" r="153.09563155100147"/>
</g>
</g>
</g>
<g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,205.366562)">
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g id="edge2" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge2" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,205.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g id="edge3" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge3" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,255.366562)">
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g id="edge4" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge4" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,255.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="3" stroke="transparent"/>
</g>
</g>
</g>
<g id="g-svg-5" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="node1" fill="none" transform="matrix(1,0,0,1,150,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node1
</text>
</g>
</g>
</g>
<g id="node2" fill="none" transform="matrix(1,0,0,1,250,200)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node2
</text>
</g>
</g>
</g>
<g id="node3" fill="none" transform="matrix(1,0,0,1,350,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node3
</text>
</g>
</g>
</g>
<g id="node4" fill="none" transform="matrix(1,0,0,1,250,300)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node4
</text>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB

94
packages/g6/__tests__/snapshots/behaviors/lasso-select/lasso-clear-1.svg Normal file
View File

@ -0,0 +1,94 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
<g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="g-svg-7" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="combo1" fill="none" transform="matrix(1,0,0,1,250.979996,261.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(253,253,253,1)" transform="translate(-153.09563155100147,-153.09563155100147)" cx="153.09563155100147" cy="153.09563155100147" stroke-dasharray="0,0" stroke-width="1" stroke="rgba(153,173,209,1)" r="153.09563155100147"/>
</g>
</g>
</g>
<g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,205.366562)">
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge2" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge2" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,205.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge3" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge3" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,255.366562)">
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge4" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge4" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,255.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
</g>
<g id="g-svg-5" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="node1" fill="none" transform="matrix(1,0,0,1,150,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node1
</text>
</g>
</g>
</g>
<g id="node2" fill="none" transform="matrix(1,0,0,1,250,200)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node2
</text>
</g>
</g>
</g>
<g id="node3" fill="none" transform="matrix(1,0,0,1,350,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node3
</text>
</g>
</g>
</g>
<g id="node4" fill="none" transform="matrix(1,0,0,1,250,300)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node4
</text>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB

94
packages/g6/__tests__/snapshots/behaviors/lasso-select/lasso-clear-2.svg Normal file
View File

@ -0,0 +1,94 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
<g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="g-svg-7" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="combo1" fill="none" transform="matrix(1,0,0,1,250.979996,261.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(253,253,253,1)" transform="translate(-153.09563155100147,-153.09563155100147)" cx="153.09563155100147" cy="153.09563155100147" stroke-dasharray="0,0" stroke-width="1" stroke="rgba(153,173,209,1)" r="153.09563155100147"/>
</g>
</g>
</g>
<g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,205.366562)">
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge2" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge2" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,205.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge3" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge3" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,255.366562)">
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge4" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge4" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,255.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
</g>
<g id="g-svg-5" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="node1" fill="none" transform="matrix(1,0,0,1,150,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node1
</text>
</g>
</g>
</g>
<g id="node2" fill="none" transform="matrix(1,0,0,1,250,200)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node2
</text>
</g>
</g>
</g>
<g id="node3" fill="none" transform="matrix(1,0,0,1,350,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node3
</text>
</g>
</g>
</g>
<g id="node4" fill="none" transform="matrix(1,0,0,1,250,300)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node4
</text>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB

94
packages/g6/__tests__/snapshots/behaviors/lasso-select/lasso-clear-3.svg Normal file
View File

@ -0,0 +1,94 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
<g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="g-svg-7" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="combo1" fill="none" transform="matrix(1,0,0,1,250.979996,261.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(253,253,253,1)" transform="translate(-153.09563155100147,-153.09563155100147)" cx="153.09563155100147" cy="153.09563155100147" stroke-dasharray="0,0" stroke-width="1" stroke="rgba(153,173,209,1)" r="153.09563155100147"/>
</g>
</g>
</g>
<g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,205.366562)">
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge2" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge2" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,205.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge3" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge3" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,255.366562)">
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge4" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge4" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,255.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
</g>
<g id="g-svg-5" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="node1" fill="none" transform="matrix(1,0,0,1,150,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node1
</text>
</g>
</g>
</g>
<g id="node2" fill="none" transform="matrix(1,0,0,1,250,200)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node2
</text>
</g>
</g>
</g>
<g id="node3" fill="none" transform="matrix(1,0,0,1,350,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node3
</text>
</g>
</g>
</g>
<g id="node4" fill="none" transform="matrix(1,0,0,1,250,300)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node4
</text>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB

94
packages/g6/__tests__/snapshots/behaviors/lasso-select/lasso-clear-4.svg Normal file
View File

@ -0,0 +1,94 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
<g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="g-svg-7" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="combo1" fill="none" transform="matrix(1,0,0,1,250.979996,261.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(253,253,253,1)" transform="translate(-153.09563155100147,-153.09563155100147)" cx="153.09563155100147" cy="153.09563155100147" stroke-dasharray="0,0" stroke-width="1" stroke="rgba(153,173,209,1)" r="153.09563155100147"/>
</g>
</g>
</g>
<g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,205.366562)">
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge2" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge2" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,205.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge3" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge3" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,255.366562)">
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge4" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge4" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,255.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
</g>
<g id="g-svg-5" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="node1" fill="none" transform="matrix(1,0,0,1,150,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node1
</text>
</g>
</g>
</g>
<g id="node2" fill="none" transform="matrix(1,0,0,1,250,200)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node2
</text>
</g>
</g>
</g>
<g id="node3" fill="none" transform="matrix(1,0,0,1,350,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node3
</text>
</g>
</g>
</g>
<g id="node4" fill="none" transform="matrix(1,0,0,1,250,300)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node4
</text>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB

94
packages/g6/__tests__/snapshots/behaviors/lasso-select/lasso-clear-5.svg Normal file
View File

@ -0,0 +1,94 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
<g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="g-svg-7" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="combo1" fill="none" transform="matrix(1,0,0,1,250.979996,261.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(253,253,253,1)" transform="translate(-153.09563155100147,-153.09563155100147)" cx="153.09563155100147" cy="153.09563155100147" stroke-dasharray="0,0" stroke-width="1" stroke="rgba(153,173,209,1)" r="153.09563155100147"/>
</g>
</g>
</g>
<g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,205.366562)">
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge2" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge2" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,205.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge3" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge3" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,255.366562)">
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge4" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge4" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,255.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
</g>
<g id="g-svg-5" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="node1" fill="none" transform="matrix(1,0,0,1,150,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node1
</text>
</g>
</g>
</g>
<g id="node2" fill="none" transform="matrix(1,0,0,1,250,200)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node2
</text>
</g>
</g>
</g>
<g id="node3" fill="none" transform="matrix(1,0,0,1,350,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node3
</text>
</g>
</g>
</g>
<g id="node4" fill="none" transform="matrix(1,0,0,1,250,300)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node4
</text>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB

94
packages/g6/__tests__/snapshots/behaviors/lasso-select/lasso-clear-mode-diff.svg Normal file
View File

@ -0,0 +1,94 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
<g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="g-svg-7" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="combo1" fill="none" transform="matrix(1,0,0,1,250.979996,261.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(253,253,253,1)" transform="translate(-153.09563155100147,-153.09563155100147)" cx="153.09563155100147" cy="153.09563155100147" stroke-dasharray="0,0" stroke-width="1" stroke="rgba(153,173,209,1)" r="153.09563155100147"/>
</g>
</g>
</g>
<g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,205.366562)">
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge2" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge2" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,205.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge3" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge3" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,255.366562)">
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge4" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge4" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,255.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
</g>
<g id="g-svg-5" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="node1" fill="none" transform="matrix(1,0,0,1,150,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node1
</text>
</g>
</g>
</g>
<g id="node2" fill="none" transform="matrix(1,0,0,1,250,200)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node2
</text>
</g>
</g>
</g>
<g id="node3" fill="none" transform="matrix(1,0,0,1,350,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node3
</text>
</g>
</g>
</g>
<g id="node4" fill="none" transform="matrix(1,0,0,1,250,300)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node4
</text>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB

94
packages/g6/__tests__/snapshots/behaviors/lasso-select/lasso-clear-mode-intersect.svg Normal file
View File

@ -0,0 +1,94 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
<g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="g-svg-7" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="combo1" fill="none" transform="matrix(1,0,0,1,250.979996,261.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(253,253,253,1)" transform="translate(-153.09563155100147,-153.09563155100147)" cx="153.09563155100147" cy="153.09563155100147" stroke-dasharray="0,0" stroke-width="1" stroke="rgba(153,173,209,1)" r="153.09563155100147"/>
</g>
</g>
</g>
<g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,205.366562)">
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge2" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge2" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,205.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge3" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge3" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,255.366562)">
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge4" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge4" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,255.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
</g>
<g id="g-svg-5" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="node1" fill="none" transform="matrix(1,0,0,1,150,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node1
</text>
</g>
</g>
</g>
<g id="node2" fill="none" transform="matrix(1,0,0,1,250,200)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node2
</text>
</g>
</g>
</g>
<g id="node3" fill="none" transform="matrix(1,0,0,1,350,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node3
</text>
</g>
</g>
</g>
<g id="node4" fill="none" transform="matrix(1,0,0,1,250,300)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node4
</text>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB

94
packages/g6/__tests__/snapshots/behaviors/lasso-select/lasso-clear-mode-union.svg Normal file
View File

@ -0,0 +1,94 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
<g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="g-svg-7" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="combo1" fill="none" transform="matrix(1,0,0,1,250.979996,261.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(253,253,253,1)" transform="translate(-153.09563155100147,-153.09563155100147)" cx="153.09563155100147" cy="153.09563155100147" stroke-dasharray="0,0" stroke-width="1" stroke="rgba(153,173,209,1)" r="153.09563155100147"/>
</g>
</g>
</g>
<g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,205.366562)">
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge2" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge2" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,205.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge3" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge3" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,255.366562)">
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge4" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge4" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,255.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
</g>
<g id="g-svg-5" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="node1" fill="none" transform="matrix(1,0,0,1,150,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node1
</text>
</g>
</g>
</g>
<g id="node2" fill="none" transform="matrix(1,0,0,1,250,200)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node2
</text>
</g>
</g>
</g>
<g id="node3" fill="none" transform="matrix(1,0,0,1,350,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node3
</text>
</g>
</g>
</g>
<g id="node4" fill="none" transform="matrix(1,0,0,1,250,300)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node4
</text>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB

94
packages/g6/__tests__/snapshots/behaviors/lasso-select/lasso-select-clear.svg Normal file
View File

@ -0,0 +1,94 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
<g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="g-svg-7" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="combo1" fill="none" transform="matrix(1,0,0,1,250.979996,261.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(253,253,253,1)" transform="translate(-153.09563155100147,-153.09563155100147)" cx="153.09563155100147" cy="153.09563155100147" stroke-dasharray="0,0" stroke-width="1" stroke="rgba(153,173,209,1)" r="153.09563155100147"/>
</g>
</g>
</g>
<g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,205.366562)">
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g id="edge2" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge2" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,205.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g id="edge3" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge3" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,255.366562)">
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g id="edge4" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge4" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,255.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="3" stroke="transparent"/>
</g>
</g>
</g>
<g id="g-svg-5" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="node1" fill="none" transform="matrix(1,0,0,1,150,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node1
</text>
</g>
</g>
</g>
<g id="node2" fill="none" transform="matrix(1,0,0,1,250,200)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node2
</text>
</g>
</g>
</g>
<g id="node3" fill="none" transform="matrix(1,0,0,1,350,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node3
</text>
</g>
</g>
</g>
<g id="node4" fill="none" transform="matrix(1,0,0,1,250,300)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node4
</text>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB

125
packages/g6/__tests__/snapshots/behaviors/lasso-select/lasso-selected-1.svg Normal file
View File

@ -0,0 +1,125 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
<g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="g-svg-7" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="combo1" fill="none" transform="matrix(1,0,0,1,251.059998,263.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="halo" fill="none" transform="translate(-156.67582487416496,-156.67582487416496)" cx="156.67582487416496" cy="156.67582487416496" stroke-dasharray="0,0" stroke-width="12" stroke="rgba(153,173,209,1)" r="156.67582487416496" stroke-opacity="0.25" pointer-events="none"/>
</g>
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(253,253,253,1)" transform="translate(-156.67582487416496,-156.67582487416496)" cx="156.67582487416496" cy="156.67582487416496" stroke-dasharray="0,0" stroke-width="4" stroke="rgba(153,173,209,1)" r="156.67582487416496"/>
</g>
</g>
</g>
<g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,205.366562)">
<path id="halo" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
<path id="halo" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="14" stroke="transparent" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
</g>
<g transform="matrix(1,0,0,1,160.733124,205.366562)">
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="2" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="2" stroke="transparent"/>
</g>
</g>
<g id="edge2" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge2" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,205.366562)">
<path id="halo" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
<path id="halo" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="14" stroke="transparent" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
</g>
<g transform="matrix(1,0,0,1,260.733124,205.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="2" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="2" stroke="transparent"/>
</g>
</g>
<g id="edge3" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge3" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,255.366562)">
<path id="halo" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
<path id="halo" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="14" stroke="transparent" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
</g>
<g transform="matrix(1,0,0,1,260.733124,255.366562)">
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="2" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="2" stroke="transparent"/>
</g>
</g>
<g id="edge4" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge4" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,255.366562)">
<path id="halo" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
<path id="halo" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="14" stroke="transparent" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
</g>
<g transform="matrix(1,0,0,1,160.733124,255.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="2" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="2" stroke="transparent"/>
</g>
</g>
</g>
<g id="g-svg-5" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="node1" fill="none" transform="matrix(1,0,0,1,150,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="halo" fill="none" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="12" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="3" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="13.5px" font-size="14" text-anchor="middle" font-weight="700">
node1
</text>
</g>
</g>
</g>
<g id="node2" fill="none" transform="matrix(1,0,0,1,250,200)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="halo" fill="none" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="12" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="3" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="13.5px" font-size="14" text-anchor="middle" font-weight="700">
node2
</text>
</g>
</g>
</g>
<g id="node3" fill="none" transform="matrix(1,0,0,1,350,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="halo" fill="none" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="12" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="3" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="13.5px" font-size="14" text-anchor="middle" font-weight="700">
node3
</text>
</g>
</g>
</g>
<g id="node4" fill="none" transform="matrix(1,0,0,1,250,300)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="halo" fill="none" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="12" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="3" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="13.5px" font-size="14" text-anchor="middle" font-weight="700">
node4
</text>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 9.3 KiB

114
packages/g6/__tests__/snapshots/behaviors/lasso-select/lasso-selected-2.svg Normal file
View File

@ -0,0 +1,114 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
<g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="g-svg-7" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="combo1" fill="none" transform="matrix(1,0,0,1,249.535004,263.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="halo" fill="none" transform="translate(-155.40014551151486,-155.40014551151486)" cx="155.40014551151486" cy="155.40014551151486" stroke-dasharray="0,0" stroke-width="12" stroke="rgba(153,173,209,1)" r="155.40014551151486" stroke-opacity="0.25" pointer-events="none"/>
</g>
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(253,253,253,1)" transform="translate(-155.40014551151486,-155.40014551151486)" cx="155.40014551151486" cy="155.40014551151486" stroke-dasharray="0,0" stroke-width="4" stroke="rgba(153,173,209,1)" r="155.40014551151486"/>
</g>
</g>
</g>
<g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,205.366562)">
<path id="halo" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
<path id="halo" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="14" stroke="transparent" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
</g>
<g transform="matrix(1,0,0,1,160.733124,205.366562)">
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="2" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="2" stroke="transparent"/>
</g>
</g>
<g id="edge2" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge2" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,205.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge3" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge3" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,255.366562)">
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge4" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge4" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,255.366562)">
<path id="halo" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
<path id="halo" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="14" stroke="transparent" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
</g>
<g transform="matrix(1,0,0,1,160.733124,255.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="2" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="2" stroke="transparent"/>
</g>
</g>
</g>
<g id="g-svg-5" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="node1" fill="none" transform="matrix(1,0,0,1,150,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="halo" fill="none" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="12" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="3" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="13.5px" font-size="14" text-anchor="middle" font-weight="700">
node1
</text>
</g>
</g>
</g>
<g id="node2" fill="none" transform="matrix(1,0,0,1,250,200)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="halo" fill="none" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="12" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="3" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="13.5px" font-size="14" text-anchor="middle" font-weight="700">
node2
</text>
</g>
</g>
</g>
<g id="node3" fill="none" transform="matrix(1,0,0,1,350,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node3
</text>
</g>
</g>
</g>
<g id="node4" fill="none" transform="matrix(1,0,0,1,250,300)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="halo" fill="none" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="12" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="3" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="13.5px" font-size="14" text-anchor="middle" font-weight="700">
node4
</text>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 8.1 KiB

114
packages/g6/__tests__/snapshots/behaviors/lasso-select/lasso-selected-3.svg Normal file
View File

@ -0,0 +1,114 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
<g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="g-svg-7" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="combo1" fill="none" transform="matrix(1,0,0,1,249.535004,263.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="halo" fill="none" transform="translate(-155.40014551151486,-155.40014551151486)" cx="155.40014551151486" cy="155.40014551151486" stroke-dasharray="0,0" stroke-width="12" stroke="rgba(153,173,209,1)" r="155.40014551151486" stroke-opacity="0.25" pointer-events="none"/>
</g>
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(253,253,253,1)" transform="translate(-155.40014551151486,-155.40014551151486)" cx="155.40014551151486" cy="155.40014551151486" stroke-dasharray="0,0" stroke-width="4" stroke="rgba(153,173,209,1)" r="155.40014551151486"/>
</g>
</g>
</g>
<g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,205.366562)">
<path id="halo" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
<path id="halo" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="14" stroke="transparent" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
</g>
<g transform="matrix(1,0,0,1,160.733124,205.366562)">
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="2" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="2" stroke="transparent"/>
</g>
</g>
<g id="edge2" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge2" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,205.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge3" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge3" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,255.366562)">
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge4" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge4" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,255.366562)">
<path id="halo" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
<path id="halo" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="14" stroke="transparent" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
</g>
<g transform="matrix(1,0,0,1,160.733124,255.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="2" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="2" stroke="transparent"/>
</g>
</g>
</g>
<g id="g-svg-5" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="node1" fill="none" transform="matrix(1,0,0,1,150,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="halo" fill="none" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="12" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="3" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="13.5px" font-size="14" text-anchor="middle" font-weight="700">
node1
</text>
</g>
</g>
</g>
<g id="node2" fill="none" transform="matrix(1,0,0,1,250,200)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="halo" fill="none" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="12" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="3" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="13.5px" font-size="14" text-anchor="middle" font-weight="700">
node2
</text>
</g>
</g>
</g>
<g id="node3" fill="none" transform="matrix(1,0,0,1,350,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node3
</text>
</g>
</g>
</g>
<g id="node4" fill="none" transform="matrix(1,0,0,1,250,300)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="halo" fill="none" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="12" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(23,131,255,1)" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="3" stroke="rgba(0,0,0,1)" r="12"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="13.5px" font-size="14" text-anchor="middle" font-weight="700">
node4
</text>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 8.1 KiB

97
packages/g6/__tests__/snapshots/behaviors/lasso-select/lasso-selected-4.svg Normal file
View File

@ -0,0 +1,97 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
<g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="g-svg-7" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="combo1" fill="none" transform="matrix(1,0,0,1,250.979996,261.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="halo" fill="none" transform="translate(-153.09563155100147,-153.09563155100147)" cx="153.09563155100147" cy="153.09563155100147" stroke-dasharray="0,0" stroke-width="12" stroke="rgba(153,173,209,1)" r="153.09563155100147" stroke-opacity="0.25" pointer-events="none"/>
</g>
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(253,253,253,1)" transform="translate(-153.09563155100147,-153.09563155100147)" cx="153.09563155100147" cy="153.09563155100147" stroke-dasharray="0,0" stroke-width="4" stroke="rgba(153,173,209,1)" r="153.09563155100147"/>
</g>
</g>
</g>
<g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,205.366562)">
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge2" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge2" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,205.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge3" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge3" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,255.366562)">
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge4" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge4" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,255.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
</g>
<g id="g-svg-5" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="node1" fill="none" transform="matrix(1,0,0,1,150,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node1
</text>
</g>
</g>
</g>
<g id="node2" fill="none" transform="matrix(1,0,0,1,250,200)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node2
</text>
</g>
</g>
</g>
<g id="node3" fill="none" transform="matrix(1,0,0,1,350,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node3
</text>
</g>
</g>
</g>
<g id="node4" fill="none" transform="matrix(1,0,0,1,250,300)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node4
</text>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.3 KiB

125
packages/g6/__tests__/snapshots/behaviors/lasso-select/lasso-selected-5.svg Normal file
View File

@ -0,0 +1,125 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
<g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="g-svg-7" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="combo1" fill="none" transform="matrix(1,0,0,1,250.979996,261.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="halo" fill="none" transform="translate(-153.09563155100147,-153.09563155100147)" cx="153.09563155100147" cy="153.09563155100147" stroke-dasharray="0,0" stroke-width="12" stroke="rgba(153,173,209,1)" r="153.09563155100147" stroke-opacity="0.25" pointer-events="none"/>
</g>
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(253,253,253,1)" transform="translate(-153.09563155100147,-153.09563155100147)" cx="153.09563155100147" cy="153.09563155100147" stroke-dasharray="0,0" stroke-width="1" stroke="rgba(153,173,209,1)" r="153.09563155100147"/>
</g>
</g>
</g>
<g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,205.366562)">
<path id="halo" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
<path id="halo" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="14" stroke="transparent" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
</g>
<g transform="matrix(1,0,0,1,160.733124,205.366562)">
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge2" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge2" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,205.366562)">
<path id="halo" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
<path id="halo" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="14" stroke="transparent" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
</g>
<g transform="matrix(1,0,0,1,260.733124,205.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge3" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge3" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,255.366562)">
<path id="halo" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
<path id="halo" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="14" stroke="transparent" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
</g>
<g transform="matrix(1,0,0,1,260.733124,255.366562)">
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge4" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge4" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,255.366562)">
<path id="halo" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
<path id="halo" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="14" stroke="transparent" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
</g>
<g transform="matrix(1,0,0,1,160.733124,255.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
</g>
<g id="g-svg-5" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="node1" fill="none" transform="matrix(1,0,0,1,150,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="halo" fill="none" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="12" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node1
</text>
</g>
</g>
</g>
<g id="node2" fill="none" transform="matrix(1,0,0,1,250,200)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="halo" fill="none" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="12" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node2
</text>
</g>
</g>
</g>
<g id="node3" fill="none" transform="matrix(1,0,0,1,350,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="halo" fill="none" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="12" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node3
</text>
</g>
</g>
</g>
<g id="node4" fill="none" transform="matrix(1,0,0,1,250,300)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="halo" fill="none" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="12" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node4
</text>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 9.3 KiB

125
packages/g6/__tests__/snapshots/behaviors/lasso-select/lasso-selected-mode-diff.svg Normal file
View File

@ -0,0 +1,125 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
<g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="g-svg-7" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="combo1" fill="none" transform="matrix(1,0,0,1,250.979996,261.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="halo" fill="none" transform="translate(-153.09563155100147,-153.09563155100147)" cx="153.09563155100147" cy="153.09563155100147" stroke-dasharray="0,0" stroke-width="12" stroke="rgba(153,173,209,1)" r="153.09563155100147" stroke-opacity="0.25" pointer-events="none"/>
</g>
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(253,253,253,1)" transform="translate(-153.09563155100147,-153.09563155100147)" cx="153.09563155100147" cy="153.09563155100147" stroke-dasharray="0,0" stroke-width="1" stroke="rgba(153,173,209,1)" r="153.09563155100147"/>
</g>
</g>
</g>
<g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,205.366562)">
<path id="halo" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
<path id="halo" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="14" stroke="transparent" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
</g>
<g transform="matrix(1,0,0,1,160.733124,205.366562)">
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge2" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge2" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,205.366562)">
<path id="halo" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
<path id="halo" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="14" stroke="transparent" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
</g>
<g transform="matrix(1,0,0,1,260.733124,205.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge3" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge3" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,255.366562)">
<path id="halo" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
<path id="halo" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="14" stroke="transparent" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
</g>
<g transform="matrix(1,0,0,1,260.733124,255.366562)">
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge4" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge4" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,255.366562)">
<path id="halo" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
<path id="halo" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="14" stroke="transparent" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
</g>
<g transform="matrix(1,0,0,1,160.733124,255.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
</g>
<g id="g-svg-5" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="node1" fill="none" transform="matrix(1,0,0,1,150,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="halo" fill="none" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="12" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node1
</text>
</g>
</g>
</g>
<g id="node2" fill="none" transform="matrix(1,0,0,1,250,200)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="halo" fill="none" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="12" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node2
</text>
</g>
</g>
</g>
<g id="node3" fill="none" transform="matrix(1,0,0,1,350,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="halo" fill="none" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="12" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node3
</text>
</g>
</g>
</g>
<g id="node4" fill="none" transform="matrix(1,0,0,1,250,300)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="halo" fill="none" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="12" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node4
</text>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 9.3 KiB

94
packages/g6/__tests__/snapshots/behaviors/lasso-select/lasso-selected-mode-intersect.svg Normal file
View File

@ -0,0 +1,94 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
<g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="g-svg-7" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="combo1" fill="none" transform="matrix(1,0,0,1,250.979996,261.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(253,253,253,1)" transform="translate(-153.09563155100147,-153.09563155100147)" cx="153.09563155100147" cy="153.09563155100147" stroke-dasharray="0,0" stroke-width="1" stroke="rgba(153,173,209,1)" r="153.09563155100147"/>
</g>
</g>
</g>
<g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,205.366562)">
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge2" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge2" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,205.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge3" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge3" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,255.366562)">
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge4" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge4" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,255.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
</g>
<g id="g-svg-5" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="node1" fill="none" transform="matrix(1,0,0,1,150,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node1
</text>
</g>
</g>
</g>
<g id="node2" fill="none" transform="matrix(1,0,0,1,250,200)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node2
</text>
</g>
</g>
</g>
<g id="node3" fill="none" transform="matrix(1,0,0,1,350,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node3
</text>
</g>
</g>
</g>
<g id="node4" fill="none" transform="matrix(1,0,0,1,250,300)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node4
</text>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB

125
packages/g6/__tests__/snapshots/behaviors/lasso-select/lasso-selected-mode-union.svg Normal file
View File

@ -0,0 +1,125 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
<g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="g-svg-7" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="combo1" fill="none" transform="matrix(1,0,0,1,250.979996,261.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="halo" fill="none" transform="translate(-153.09563155100147,-153.09563155100147)" cx="153.09563155100147" cy="153.09563155100147" stroke-dasharray="0,0" stroke-width="12" stroke="rgba(153,173,209,1)" r="153.09563155100147" stroke-opacity="0.25" pointer-events="none"/>
</g>
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(253,253,253,1)" transform="translate(-153.09563155100147,-153.09563155100147)" cx="153.09563155100147" cy="153.09563155100147" stroke-dasharray="0,0" stroke-width="1" stroke="rgba(153,173,209,1)" r="153.09563155100147"/>
</g>
</g>
</g>
<g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,205.366562)">
<path id="halo" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
<path id="halo" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="14" stroke="transparent" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
</g>
<g transform="matrix(1,0,0,1,160.733124,205.366562)">
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge2" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge2" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,205.366562)">
<path id="halo" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
<path id="halo" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="14" stroke="transparent" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
</g>
<g transform="matrix(1,0,0,1,260.733124,205.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge3" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge3" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,255.366562)">
<path id="halo" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
<path id="halo" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="14" stroke="transparent" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
</g>
<g transform="matrix(1,0,0,1,260.733124,255.366562)">
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge4" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge4" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,255.366562)">
<path id="halo" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
<path id="halo" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="14" stroke="transparent" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
</g>
<g transform="matrix(1,0,0,1,160.733124,255.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
</g>
<g id="g-svg-5" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="node1" fill="none" transform="matrix(1,0,0,1,150,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="halo" fill="none" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="12" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node1
</text>
</g>
</g>
</g>
<g id="node2" fill="none" transform="matrix(1,0,0,1,250,200)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="halo" fill="none" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="12" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node2
</text>
</g>
</g>
</g>
<g id="node3" fill="none" transform="matrix(1,0,0,1,350,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="halo" fill="none" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="12" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node3
</text>
</g>
</g>
</g>
<g id="node4" fill="none" transform="matrix(1,0,0,1,250,300)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="halo" fill="none" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="12" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node4
</text>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 9.3 KiB

97
packages/g6/__tests__/snapshots/behaviors/lasso-select/lasso-selecting-1.svg Normal file
View File

@ -0,0 +1,97 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
<g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="g-svg-7" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="combo1" fill="none" transform="matrix(1,0,0,1,250.979996,261.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(253,253,253,1)" transform="translate(-153.09563155100147,-153.09563155100147)" cx="153.09563155100147" cy="153.09563155100147" stroke-dasharray="0,0" stroke-width="1" stroke="rgba(153,173,209,1)" r="153.09563155100147"/>
</g>
</g>
</g>
<g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,205.366562)">
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g id="edge2" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge2" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,205.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g id="edge3" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge3" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,255.366562)">
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g id="edge4" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge4" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,255.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="3" stroke="transparent"/>
</g>
</g>
</g>
<g id="g-svg-5" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="node1" fill="none" transform="matrix(1,0,0,1,150,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node1
</text>
</g>
</g>
</g>
<g id="node2" fill="none" transform="matrix(1,0,0,1,250,200)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node2
</text>
</g>
</g>
</g>
<g id="node3" fill="none" transform="matrix(1,0,0,1,350,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node3
</text>
</g>
</g>
</g>
<g id="node4" fill="none" transform="matrix(1,0,0,1,250,300)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node4
</text>
</g>
</g>
</g>
</g>
<g transform="matrix(1,0,0,1,100,100)">
<path id="g6-lasso-select-path-id" fill="rgba(238,246,255,1)" stroke-width="1" stroke="rgba(221,238,254,1)" fill-opacity="0.4" pointer-events="none" d="M 0,0 L 0,300 L 300,300 L 300,0 Z"/>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.2 KiB

97
packages/g6/__tests__/snapshots/behaviors/lasso-select/lasso-selecting-2.svg Normal file
View File

@ -0,0 +1,97 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
<g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="g-svg-7" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="combo1" fill="none" transform="matrix(1,0,0,1,250.979996,261.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(253,253,253,1)" transform="translate(-153.09563155100147,-153.09563155100147)" cx="153.09563155100147" cy="153.09563155100147" stroke-dasharray="0,0" stroke-width="1" stroke="rgba(153,173,209,1)" r="153.09563155100147"/>
</g>
</g>
</g>
<g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,205.366562)">
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge2" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge2" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,205.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge3" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge3" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,255.366562)">
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge4" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge4" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,255.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
</g>
<g id="g-svg-5" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="node1" fill="none" transform="matrix(1,0,0,1,150,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node1
</text>
</g>
</g>
</g>
<g id="node2" fill="none" transform="matrix(1,0,0,1,250,200)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node2
</text>
</g>
</g>
</g>
<g id="node3" fill="none" transform="matrix(1,0,0,1,350,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node3
</text>
</g>
</g>
</g>
<g id="node4" fill="none" transform="matrix(1,0,0,1,250,300)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node4
</text>
</g>
</g>
</g>
</g>
<g transform="matrix(1,0,0,1,100,100)">
<path id="g6-lasso-select-path-id" fill="rgba(238,246,255,1)" stroke-width="1" stroke="rgba(221,238,254,1)" fill-opacity="0.4" pointer-events="none" d="M 0,0 L 0,300 L 300,300 Z"/>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.2 KiB

97
packages/g6/__tests__/snapshots/behaviors/lasso-select/lasso-selecting-3.svg Normal file
View File

@ -0,0 +1,97 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
<g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="g-svg-7" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="combo1" fill="none" transform="matrix(1,0,0,1,250.979996,261.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(253,253,253,1)" transform="translate(-153.09563155100147,-153.09563155100147)" cx="153.09563155100147" cy="153.09563155100147" stroke-dasharray="0,0" stroke-width="1" stroke="rgba(153,173,209,1)" r="153.09563155100147"/>
</g>
</g>
</g>
<g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,205.366562)">
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge2" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge2" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,205.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge3" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge3" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,255.366562)">
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge4" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge4" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,255.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
</g>
<g id="g-svg-5" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="node1" fill="none" transform="matrix(1,0,0,1,150,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node1
</text>
</g>
</g>
</g>
<g id="node2" fill="none" transform="matrix(1,0,0,1,250,200)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node2
</text>
</g>
</g>
</g>
<g id="node3" fill="none" transform="matrix(1,0,0,1,350,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node3
</text>
</g>
</g>
</g>
<g id="node4" fill="none" transform="matrix(1,0,0,1,250,300)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node4
</text>
</g>
</g>
</g>
</g>
<g transform="matrix(1,0,0,1,100,100)">
<path id="g6-lasso-select-path-id" fill="rgba(0,128,0,1)" stroke-width="2" stroke="rgba(0,0,255,1)" fill-opacity="0.4" pointer-events="none" d="M 0,0 L 0,200 L 200,200 L 200,0 Z"/>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.2 KiB

97
packages/g6/__tests__/snapshots/behaviors/lasso-select/lasso-selecting-4.svg Normal file
View File

@ -0,0 +1,97 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
<g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="g-svg-7" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="combo1" fill="none" transform="matrix(1,0,0,1,250.979996,261.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(253,253,253,1)" transform="translate(-153.09563155100147,-153.09563155100147)" cx="153.09563155100147" cy="153.09563155100147" stroke-dasharray="0,0" stroke-width="1" stroke="rgba(153,173,209,1)" r="153.09563155100147"/>
</g>
</g>
</g>
<g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,205.366562)">
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge2" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge2" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,205.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge3" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge3" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,255.366562)">
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge4" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge4" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,255.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
</g>
<g id="g-svg-5" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="node1" fill="none" transform="matrix(1,0,0,1,150,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node1
</text>
</g>
</g>
</g>
<g id="node2" fill="none" transform="matrix(1,0,0,1,250,200)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node2
</text>
</g>
</g>
</g>
<g id="node3" fill="none" transform="matrix(1,0,0,1,350,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node3
</text>
</g>
</g>
</g>
<g id="node4" fill="none" transform="matrix(1,0,0,1,250,300)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node4
</text>
</g>
</g>
</g>
</g>
<g transform="matrix(1,0,0,1,100,100)">
<path id="g6-lasso-select-path-id" fill="rgba(0,128,0,1)" stroke-width="2" stroke="rgba(0,0,255,1)" fill-opacity="0.4" pointer-events="none" d="M 0,0 L 0,100 L 100,100 L 100,0 Z"/>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.2 KiB

128
packages/g6/__tests__/snapshots/behaviors/lasso-select/lasso-selecting-5.svg Normal file
View File

@ -0,0 +1,128 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
<g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="g-svg-7" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="combo1" fill="none" transform="matrix(1,0,0,1,250.979996,261.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="halo" fill="none" transform="translate(-153.09563155100147,-153.09563155100147)" cx="153.09563155100147" cy="153.09563155100147" stroke-dasharray="0,0" stroke-width="12" stroke="rgba(153,173,209,1)" r="153.09563155100147" stroke-opacity="0.25" pointer-events="none"/>
</g>
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(253,253,253,1)" transform="translate(-153.09563155100147,-153.09563155100147)" cx="153.09563155100147" cy="153.09563155100147" stroke-dasharray="0,0" stroke-width="1" stroke="rgba(153,173,209,1)" r="153.09563155100147"/>
</g>
</g>
</g>
<g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,205.366562)">
<path id="halo" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
<path id="halo" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="14" stroke="transparent" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
</g>
<g transform="matrix(1,0,0,1,160.733124,205.366562)">
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge2" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge2" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,205.366562)">
<path id="halo" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
<path id="halo" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="14" stroke="transparent" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
</g>
<g transform="matrix(1,0,0,1,260.733124,205.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge3" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge3" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,255.366562)">
<path id="halo" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
<path id="halo" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="14" stroke="transparent" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
</g>
<g transform="matrix(1,0,0,1,260.733124,255.366562)">
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge4" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge4" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,255.366562)">
<path id="halo" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
<path id="halo" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="14" stroke="transparent" stroke-dasharray="0,0" pointer-events="none" stroke-opacity="0.25"/>
</g>
<g transform="matrix(1,0,0,1,160.733124,255.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
</g>
<g id="g-svg-5" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="node1" fill="none" transform="matrix(1,0,0,1,150,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="halo" fill="none" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="12" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node1
</text>
</g>
</g>
</g>
<g id="node2" fill="none" transform="matrix(1,0,0,1,250,200)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="halo" fill="none" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="12" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node2
</text>
</g>
</g>
</g>
<g id="node3" fill="none" transform="matrix(1,0,0,1,350,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="halo" fill="none" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="12" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node3
</text>
</g>
</g>
</g>
<g id="node4" fill="none" transform="matrix(1,0,0,1,250,300)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="halo" fill="none" transform="translate(-12,-12)" cx="12" cy="12" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="12" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node4
</text>
</g>
</g>
</g>
</g>
<g transform="matrix(1,0,0,1,100,100)">
<path id="g6-lasso-select-path-id" fill="rgba(0,128,0,1)" stroke-width="2" stroke="rgba(0,0,255,1)" fill-opacity="0.4" pointer-events="none" d="M 0,0 L 0,400 L 400,400 L 400,0 Z"/>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 9.5 KiB

97
packages/g6/__tests__/snapshots/behaviors/lasso-select/lasso-selecting-mode-diff.svg Normal file
View File

@ -0,0 +1,97 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
<g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="g-svg-7" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="combo1" fill="none" transform="matrix(1,0,0,1,250.979996,261.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(253,253,253,1)" transform="translate(-153.09563155100147,-153.09563155100147)" cx="153.09563155100147" cy="153.09563155100147" stroke-dasharray="0,0" stroke-width="1" stroke="rgba(153,173,209,1)" r="153.09563155100147"/>
</g>
</g>
</g>
<g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,205.366562)">
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge2" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge2" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,205.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge3" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge3" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,255.366562)">
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge4" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge4" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,255.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
</g>
<g id="g-svg-5" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="node1" fill="none" transform="matrix(1,0,0,1,150,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node1
</text>
</g>
</g>
</g>
<g id="node2" fill="none" transform="matrix(1,0,0,1,250,200)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node2
</text>
</g>
</g>
</g>
<g id="node3" fill="none" transform="matrix(1,0,0,1,350,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node3
</text>
</g>
</g>
</g>
<g id="node4" fill="none" transform="matrix(1,0,0,1,250,300)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node4
</text>
</g>
</g>
</g>
</g>
<g transform="matrix(1,0,0,1,100,100)">
<path id="g6-lasso-select-path-id" fill="rgba(0,128,0,1)" stroke-width="2" stroke="rgba(0,0,255,1)" fill-opacity="0.4" pointer-events="none" d="M 0,0 L 0,400 L 400,400 L 400,0 Z"/>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.2 KiB

97
packages/g6/__tests__/snapshots/behaviors/lasso-select/lasso-selecting-mode-intersect.svg Normal file
View File

@ -0,0 +1,97 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
<g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="g-svg-7" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="combo1" fill="none" transform="matrix(1,0,0,1,250.979996,261.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(253,253,253,1)" transform="translate(-153.09563155100147,-153.09563155100147)" cx="153.09563155100147" cy="153.09563155100147" stroke-dasharray="0,0" stroke-width="1" stroke="rgba(153,173,209,1)" r="153.09563155100147"/>
</g>
</g>
</g>
<g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,205.366562)">
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge2" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge2" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,205.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge3" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge3" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,255.366562)">
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge4" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge4" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,255.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
</g>
<g id="g-svg-5" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="node1" fill="none" transform="matrix(1,0,0,1,150,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node1
</text>
</g>
</g>
</g>
<g id="node2" fill="none" transform="matrix(1,0,0,1,250,200)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node2
</text>
</g>
</g>
</g>
<g id="node3" fill="none" transform="matrix(1,0,0,1,350,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node3
</text>
</g>
</g>
</g>
<g id="node4" fill="none" transform="matrix(1,0,0,1,250,300)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node4
</text>
</g>
</g>
</g>
</g>
<g transform="matrix(1,0,0,1,100,100)">
<path id="g6-lasso-select-path-id" fill="rgba(0,128,0,1)" stroke-width="2" stroke="rgba(0,0,255,1)" fill-opacity="0.4" pointer-events="none" d="M 0,0 L 0,400 L 400,400 L 400,0 Z"/>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.2 KiB

97
packages/g6/__tests__/snapshots/behaviors/lasso-select/lasso-selecting-mode-union.svg Normal file
View File

@ -0,0 +1,97 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
<g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="g-svg-7" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="combo1" fill="none" transform="matrix(1,0,0,1,250.979996,261.500000)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" fill="rgba(253,253,253,1)" transform="translate(-153.09563155100147,-153.09563155100147)" cx="153.09563155100147" cy="153.09563155100147" stroke-dasharray="0,0" stroke-width="1" stroke="rgba(153,173,209,1)" r="153.09563155100147"/>
</g>
</g>
</g>
<g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge1" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,205.366562)">
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,39.266873708001015 L 78.53374741600203,0" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge2" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge2" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,205.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708001015" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge3" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge3" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,260.733124,255.366562)">
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 78.53374741600203,0 L 0,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
<g id="edge4" fill="none" marker-start="false" marker-end="false" transform="matrix(1,0,0,1,0,0)">
<g id="edge4" fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g transform="matrix(1,0,0,1,160.733124,255.366562)">
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path id="key" fill="none" d="M 0,0 L 78.53374741600203,39.266873708000986" stroke-width="1" stroke="transparent"/>
</g>
</g>
</g>
<g id="g-svg-5" fill="none" transform="matrix(1,0,0,1,0,0)">
<g id="node1" fill="none" transform="matrix(1,0,0,1,150,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node1
</text>
</g>
</g>
</g>
<g id="node2" fill="none" transform="matrix(1,0,0,1,250,200)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node2
</text>
</g>
</g>
</g>
<g id="node3" fill="none" transform="matrix(1,0,0,1,350,250)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node3
</text>
</g>
</g>
</g>
<g id="node4" fill="none" transform="matrix(1,0,0,1,250,300)">
<g transform="matrix(1,0,0,1,0,0)">
<circle id="key" 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"/>
</g>
<g id="label" fill="none" transform="matrix(1,0,0,1,0,12)">
<g transform="matrix(1,0,0,1,0,0)">
<text id="text" fill="rgba(0,0,0,0.8509803921568627)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" font-size="12" text-anchor="middle" font-weight="400">
node4
</text>
</g>
</g>
</g>
</g>
<g transform="matrix(1,0,0,1,100,100)">
<path id="g6-lasso-select-path-id" fill="rgba(0,128,0,1)" stroke-width="2" stroke="rgba(0,0,255,1)" fill-opacity="0.4" pointer-events="none" d="M 0,0 L 0,400 L 400,400 L 400,0 Z"/>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.2 KiB

134
packages/g6/__tests__/unit/behaviors/brush-select.spec.ts Normal file
View File

@ -0,0 +1,134 @@
import type { Graph } from '@/src';
import { CommonEvent } from '@/src';
import { behaviorBrushSelect } from '@@/demos';
import { createDemoGraph } from '@@/utils';
describe('behavior brush select', () => {
let graph: Graph;
beforeAll(async () => {
graph = await createDemoGraph(behaviorBrushSelect, { animation: false });
});
it('brush select', async () => {
await expect(graph).toMatchSnapshot(__filename);
graph.emit(CommonEvent.POINTER_DOWN, { canvas: { x: 100, y: 100 }, targetType: 'canvas' });
graph.emit(CommonEvent.POINTER_UP, { canvas: { x: 100, y: 100 } });
await expect(graph).toMatchSnapshot(__filename, 'brush-select-clear');
graph.emit(CommonEvent.POINTER_DOWN, { canvas: { x: 100, y: 100 }, targetType: 'canvas' });
graph.emit(CommonEvent.POINTER_MOVE, { canvas: { x: 400, y: 400 } });
await expect(graph).toMatchSnapshot(__filename, 'brush-selecting-1');
graph.emit(CommonEvent.POINTER_UP, { canvas: { x: 400, y: 400 } });
await expect(graph).toMatchSnapshot(__filename, 'brush-selected-1');
graph.emit(`canvas:${CommonEvent.CLICK}`);
await expect(graph).toMatchSnapshot(__filename, 'brush-clear-1');
graph.emit(CommonEvent.POINTER_DOWN, { canvas: { x: 100, y: 100 }, targetType: 'canvas' });
graph.emit(CommonEvent.POINTER_MOVE, { canvas: { x: 300, y: 300 } });
await expect(graph).toMatchSnapshot(__filename, 'brush-selecting-2');
graph.emit(CommonEvent.POINTER_UP, { canvas: { x: 300, y: 300 } });
await expect(graph).toMatchSnapshot(__filename, 'brush-selected-2');
graph.emit(`canvas:${CommonEvent.CLICK}`);
await expect(graph).toMatchSnapshot(__filename, 'brush-clear-2');
graph.setBehaviors([{ type: 'brush-select', style: { color: 'green', lineWidth: 2, stroke: 'blue' } }]);
graph.emit(CommonEvent.POINTER_DOWN, { canvas: { x: 100, y: 100 }, targetType: 'canvas' });
graph.emit(CommonEvent.POINTER_MOVE, { canvas: { x: 400, y: 400 } });
await expect(graph).toMatchSnapshot(__filename, 'brush-selecting-3');
graph.emit(CommonEvent.POINTER_UP, { canvas: { x: 400, y: 400 } });
await expect(graph).toMatchSnapshot(__filename, 'brush-selected-3');
graph.emit(`canvas:${CommonEvent.CLICK}`);
await expect(graph).toMatchSnapshot(__filename, 'brush-clear-3');
graph.setBehaviors([{ type: 'brush-select', trigger: 'shift' }]);
graph.emit(CommonEvent.KEY_DOWN, { key: 'Shift' });
graph.emit(CommonEvent.POINTER_DOWN, { canvas: { x: 100, y: 100 }, targetType: 'canvas' });
graph.emit(CommonEvent.POINTER_MOVE, { canvas: { x: 400, y: 400 } });
await expect(graph).toMatchSnapshot(__filename, 'brush-selecting-4');
graph.emit(CommonEvent.KEY_UP, { key: 'Shift' });
graph.emit(CommonEvent.POINTER_UP, { canvas: { x: 400, y: 400 } });
await expect(graph).toMatchSnapshot(__filename, 'brush-selected-4');
graph.emit(`canvas:${CommonEvent.CLICK}`);
await expect(graph).toMatchSnapshot(__filename, 'brush-clear-4');
graph.setBehaviors([{ type: 'brush-select', state: 'active', trigger: 'shift', immediately: true }]);
graph.emit(CommonEvent.KEY_DOWN, { key: 'Shift' });
graph.emit(CommonEvent.POINTER_DOWN, { canvas: { x: 100, y: 100 }, targetType: 'canvas' });
graph.emit(CommonEvent.POINTER_MOVE, { canvas: { x: 400, y: 400 } });
await expect(graph).toMatchSnapshot(__filename, 'brush-selecting-5');
graph.emit(CommonEvent.KEY_UP, { key: 'Shift' });
graph.emit(CommonEvent.POINTER_UP, { canvas: { x: 400, y: 400 } });
await expect(graph).toMatchSnapshot(__filename, 'brush-selected-5');
graph.emit(`canvas:${CommonEvent.CLICK}`);
await expect(graph).toMatchSnapshot(__filename, 'brush-clear-5');
graph.setBehaviors([{ type: 'brush-select', mode: 'union', trigger: 'drag' }]);
graph.emit(CommonEvent.POINTER_DOWN, { canvas: { x: 100, y: 100 }, targetType: 'canvas' });
graph.emit(CommonEvent.POINTER_MOVE, { canvas: { x: 400, y: 400 } });
await expect(graph).toMatchSnapshot(__filename, 'brush-selecting-mode-union');
graph.emit(CommonEvent.POINTER_UP, { canvas: { x: 400, y: 400 } });
await expect(graph).toMatchSnapshot(__filename, 'brush-selected-mode-union');
graph.emit(`canvas:${CommonEvent.CLICK}`);
await expect(graph).toMatchSnapshot(__filename, 'brush-clear-mode-union');
graph.setBehaviors([{ type: 'brush-select', mode: 'diff' }]);
graph.emit(CommonEvent.POINTER_DOWN, { canvas: { x: 100, y: 100 }, targetType: 'canvas' });
graph.emit(CommonEvent.POINTER_MOVE, { canvas: { x: 400, y: 400 } });
await expect(graph).toMatchSnapshot(__filename, 'brush-selecting-mode-diff');
graph.emit(CommonEvent.POINTER_UP, { canvas: { x: 400, y: 400 } });
await expect(graph).toMatchSnapshot(__filename, 'brush-selected-mode-diff');
graph.emit(`canvas:${CommonEvent.CLICK}`);
await expect(graph).toMatchSnapshot(__filename, 'brush-clear-mode-diff');
graph.setBehaviors([{ type: 'brush-select', mode: 'intersect' }]);
graph.emit(CommonEvent.POINTER_DOWN, { canvas: { x: 100, y: 100 }, targetType: 'canvas' });
graph.emit(CommonEvent.POINTER_MOVE, { canvas: { x: 400, y: 400 } });
await expect(graph).toMatchSnapshot(__filename, 'brush-selecting-mode-intersect');
graph.emit(CommonEvent.POINTER_UP, { canvas: { x: 400, y: 400 } });
await expect(graph).toMatchSnapshot(__filename, 'brush-selected-mode-intersect');
graph.emit(`canvas:${CommonEvent.CLICK}`);
await expect(graph).toMatchSnapshot(__filename, 'brush-clear-mode-intersect');
});
afterAll(() => {
graph.destroy();
});
});

153
packages/g6/__tests__/unit/behaviors/lasso-select.spec.ts Normal file
View File

@ -0,0 +1,153 @@
import type { Graph } from '@/src';
import { CommonEvent } from '@/src';
import { behaviorLassoSelect } from '@@/demos';
import { createDemoGraph } from '@@/utils';
describe('behavior lasso select', () => {
let graph: Graph;
beforeAll(async () => {
graph = await createDemoGraph(behaviorLassoSelect, { animation: false });
});
it('lasso select', async () => {
await expect(graph).toMatchSnapshot(__filename);
graph.emit(CommonEvent.POINTER_DOWN, { canvas: { x: 100, y: 100 }, targetType: 'canvas' });
graph.emit(CommonEvent.POINTER_UP);
await expect(graph).toMatchSnapshot(__filename, 'lasso-select-clear');
graph.emit(CommonEvent.POINTER_DOWN, { canvas: { x: 100, y: 100 }, targetType: 'canvas' });
graph.emit(CommonEvent.POINTER_MOVE, { canvas: { x: 100, y: 400 } });
graph.emit(CommonEvent.POINTER_MOVE, { canvas: { x: 400, y: 400 } });
graph.emit(CommonEvent.POINTER_MOVE, { canvas: { x: 400, y: 100 } });
await expect(graph).toMatchSnapshot(__filename, 'lasso-selecting-1');
graph.emit(CommonEvent.POINTER_UP);
await expect(graph).toMatchSnapshot(__filename, 'lasso-selected-1');
graph.emit(`canvas:${CommonEvent.CLICK}`);
await expect(graph).toMatchSnapshot(__filename, 'lasso-clear-1');
graph.emit(CommonEvent.POINTER_DOWN, { canvas: { x: 100, y: 100 }, targetType: 'canvas' });
graph.emit(CommonEvent.POINTER_MOVE, { canvas: { x: 100, y: 400 } });
graph.emit(CommonEvent.POINTER_MOVE, { canvas: { x: 400, y: 400 } });
await expect(graph).toMatchSnapshot(__filename, 'lasso-selecting-2');
graph.emit(CommonEvent.POINTER_UP);
await expect(graph).toMatchSnapshot(__filename, 'lasso-selected-2');
graph.emit(`canvas:${CommonEvent.CLICK}`);
await expect(graph).toMatchSnapshot(__filename, 'lasso-clear-2');
graph.setBehaviors([{ type: 'lasso-select', style: { color: 'green', lineWidth: 2, stroke: 'blue' } }]);
graph.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: 300, y: 300 } });
graph.emit(CommonEvent.POINTER_MOVE, { canvas: { x: 300, y: 100 } });
await expect(graph).toMatchSnapshot(__filename, 'lasso-selecting-3');
graph.emit(CommonEvent.POINTER_UP);
await expect(graph).toMatchSnapshot(__filename, 'lasso-selected-3');
graph.emit(`canvas:${CommonEvent.CLICK}`);
await expect(graph).toMatchSnapshot(__filename, 'lasso-clear-3');
graph.setBehaviors([{ type: 'lasso-select', trigger: 'shift' }]);
graph.emit(CommonEvent.KEY_DOWN, { key: 'Shift' });
graph.emit(CommonEvent.POINTER_DOWN, { canvas: { x: 100, y: 100 }, targetType: 'canvas' });
graph.emit(CommonEvent.POINTER_MOVE, { canvas: { x: 100, y: 200 } });
graph.emit(CommonEvent.POINTER_MOVE, { canvas: { x: 200, y: 200 } });
graph.emit(CommonEvent.POINTER_MOVE, { canvas: { x: 200, y: 100 } });
await expect(graph).toMatchSnapshot(__filename, 'lasso-selecting-4');
graph.emit(CommonEvent.KEY_UP, { key: 'Shift' });
graph.emit(CommonEvent.POINTER_UP);
await expect(graph).toMatchSnapshot(__filename, 'lasso-selected-4');
graph.emit(`canvas:${CommonEvent.CLICK}`);
await expect(graph).toMatchSnapshot(__filename, 'lasso-clear-4');
graph.setBehaviors([{ type: 'lasso-select', state: 'active', trigger: 'shift', immediately: true }]);
graph.emit(CommonEvent.KEY_DOWN, { key: 'Shift' });
graph.emit(CommonEvent.POINTER_DOWN, { canvas: { x: 100, y: 100 }, targetType: 'canvas' });
graph.emit(CommonEvent.POINTER_MOVE, { canvas: { x: 100, y: 500 } });
graph.emit(CommonEvent.POINTER_MOVE, { canvas: { x: 500, y: 500 } });
graph.emit(CommonEvent.POINTER_MOVE, { canvas: { x: 500, y: 100 } });
await expect(graph).toMatchSnapshot(__filename, 'lasso-selecting-5');
graph.emit(CommonEvent.KEY_UP, { key: 'Shift' });
graph.emit(CommonEvent.POINTER_UP);
await expect(graph).toMatchSnapshot(__filename, 'lasso-selected-5');
graph.emit(`canvas:${CommonEvent.CLICK}`);
await expect(graph).toMatchSnapshot(__filename, 'lasso-clear-5');
graph.setBehaviors([{ type: 'lasso-select', mode: 'union', trigger: 'drag' }]);
graph.emit(CommonEvent.POINTER_DOWN, { canvas: { x: 100, y: 100 }, targetType: 'canvas' });
graph.emit(CommonEvent.POINTER_MOVE, { canvas: { x: 100, y: 500 } });
graph.emit(CommonEvent.POINTER_MOVE, { canvas: { x: 500, y: 500 } });
graph.emit(CommonEvent.POINTER_MOVE, { canvas: { x: 500, y: 100 } });
await expect(graph).toMatchSnapshot(__filename, 'lasso-selecting-mode-union');
graph.emit(CommonEvent.POINTER_UP);
await expect(graph).toMatchSnapshot(__filename, 'lasso-selected-mode-union');
graph.emit(`canvas:${CommonEvent.CLICK}`);
await expect(graph).toMatchSnapshot(__filename, 'lasso-clear-mode-union');
graph.setBehaviors([{ type: 'lasso-select', mode: 'diff' }]);
graph.emit(CommonEvent.POINTER_DOWN, { canvas: { x: 100, y: 100 }, targetType: 'canvas' });
graph.emit(CommonEvent.POINTER_MOVE, { canvas: { x: 100, y: 500 } });
graph.emit(CommonEvent.POINTER_MOVE, { canvas: { x: 500, y: 500 } });
graph.emit(CommonEvent.POINTER_MOVE, { canvas: { x: 500, y: 100 } });
await expect(graph).toMatchSnapshot(__filename, 'lasso-selecting-mode-diff');
graph.emit(CommonEvent.POINTER_UP);
await expect(graph).toMatchSnapshot(__filename, 'lasso-selected-mode-diff');
graph.emit(`canvas:${CommonEvent.CLICK}`);
await expect(graph).toMatchSnapshot(__filename, 'lasso-clear-mode-diff');
graph.setBehaviors([{ type: 'lasso-select', mode: 'intersect' }]);
graph.emit(CommonEvent.POINTER_DOWN, { canvas: { x: 100, y: 100 }, targetType: 'canvas' });
graph.emit(CommonEvent.POINTER_MOVE, { canvas: { x: 100, y: 500 } });
graph.emit(CommonEvent.POINTER_MOVE, { canvas: { x: 500, y: 500 } });
graph.emit(CommonEvent.POINTER_MOVE, { canvas: { x: 500, y: 100 } });
await expect(graph).toMatchSnapshot(__filename, 'lasso-selecting-mode-intersect');
graph.emit(CommonEvent.POINTER_UP);
await expect(graph).toMatchSnapshot(__filename, 'lasso-selected-mode-intersect');
graph.emit(`canvas:${CommonEvent.CLICK}`);
await expect(graph).toMatchSnapshot(__filename, 'lasso-clear-mode-intersect');
});
afterAll(() => {
graph.destroy();
});
});

306
packages/g6/src/behaviors/brush-select.ts Normal file
View File

@ -0,0 +1,306 @@
import { Rect } from '@antv/g';
import { isFunction } from '@antv/util';
import { CommonEvent } from '../constants';
import { getRectPoints, isBBoxCenterInRect } from '../utils/behaviors/brush';
import { getAllElementState, transformEdgeState } from '../utils/behaviors/utils';
import { Shortcut } from '../utils/shortcut';
import { BaseBehavior } from './base-behavior';
import type { ID } from '@antv/graphlib';
import type { Graph } from '../runtime/graph';
import type { RuntimeContext } from '../runtime/types';
import type { NodeStyle } from '../spec/element/node';
import type { ElementTypes, IPointerEvent, Point, Points, State } from '../types';
import type { ShortcutKey } from '../utils/shortcut';
import type { BaseBehaviorOptions } from './base-behavior';
const SHOW_RECT_ID = 'g6-brush-select-rect-id';
type SELECT_MODE = 'union' | 'intersect' | 'diff' | 'default';
export type States = Record<ID, State | State[]>;
export interface BrushSelectOptions extends BaseBehaviorOptions {
/**
* <zh/> 是否启用框选功能
*
* <en/> Whether to enable Brush select element function.
*/
enable?: boolean | ((event: IPointerEvent) => boolean);
/**
* <zh/> 可框选的元素类型
*
* <en/> Enable Elements type.
*/
enableElements?: ElementTypes;
/**
* <zh/> 是否启用动画
*
* <en/> Whether to enable animation.
*/
animation?: boolean;
/**
* <zh/> 交互配置 按键拖拽 或 直接拖拽
*
* <en/> Trigger click or drag.
*/
trigger?: ShortcutKey;
/**
* <zh/> 框选选中模式
* union : 选中元素添加 state 状态
* intersect : 进一步筛选已经 state 开启的元素
* diff : 反转选中元素的 state 状态
* default : 选中元素添加 state 状态, 其他元素 state 关闭
*
* <en/> Box Select Select the mode.
* union : Select element add state.
* intersect : Further filter the elements that are already state enabled.
* diff : Inverts the state of the selected element.
* default : Check element state to turn on and other elements state to turn off.
*/
mode?: SELECT_MODE;
/**
* <zh/> 选中 state 状态
*
* <en/> Check state status.
*/
state?: 'selected' | 'active'; // TODO: Enum
/**
* <zh/> 及时框选, 在框选模式为 default 时，才能使用
*
* <en/> Timely screening.
*/
immediately?: boolean;
/**
* <zh/> 框选 框样式
*
* <en/> Timely screening.
*/
style?: NodeStyle;
/**
* <zh/> 框选元素状态回调。
*
* <en/> Callback when brush select elements.
*/
onSelect?: (states: States) => States;
}
export const DEFAULT_STYLE = {
lineWidth: 1,
color: '#EEF6FF',
stroke: '#DDEEFE',
fillOpacity: 0.4,
zIndex: 2,
};
export class BrushSelect<T extends BaseBehaviorOptions = BrushSelectOptions> extends BaseBehavior<T> {
static defaultOptions: Partial<BrushSelectOptions> = {
enable: true,
trigger: ['drag'],
immediately: false,
state: 'selected',
mode: 'default',
animation: false,
enableElements: ['node', 'combo', 'edge'],
style: {
size: 0,
type: 'rect',
...DEFAULT_STYLE,
pointerEvents: 'none',
},
};
private startPoint?: Point;
private endPoint?: Point;
private rectShape?: Rect;
public shortcut?: Shortcut;
public selectElementFn: (graph: Graph, id: ID, points: Points) => boolean = isBBoxCenterInRect;
constructor(context: RuntimeContext, options: T) {
super(context, Object.assign({}, BrushSelect.defaultOptions, options));
this.shortcut = new Shortcut(context.graph);
if (options.type === 'lasso-select') return;
this.bindEvents();
}
public pointerDown = async (event: IPointerEvent) => {
if (!this.validate(event) || !this.isKeydown() || this.startPoint) return;
const { style, trigger } = this.options;
const triggers = (Array.isArray(trigger) ? trigger : [trigger]) as string[];
if (event.targetType !== 'canvas' && triggers.includes('drag')) return;
const { canvas } = this.context;
this.rectShape = new Rect({
id: SHOW_RECT_ID,
style: {
...BrushSelect.defaultOptions.style,
fill: style.color || DEFAULT_STYLE.color,
...style,
pointerEvents: 'none',
},
});
canvas.appendChild(this.rectShape);
this.startPoint = [event.canvas.x, event.canvas.y];
};
public pointerMove = async (event: IPointerEvent) => {
if (!this.startPoint) return;
const { immediately, mode } = this.options;
this.endPoint = [event.canvas.x, event.canvas.y];
this.rectShape?.attr({
x: Math.min(this.endPoint[0], this.startPoint[0]),
y: Math.min(this.endPoint[1], this.startPoint[1]),
width: Math.abs(this.endPoint[0] - this.startPoint[0]),
height: Math.abs(this.endPoint[1] - this.startPoint[1]),
});
if (immediately && mode === 'default') {
this.updateElementState(getRectPoints(this.startPoint, this.endPoint));
}
};
public pointerUp = async (event: IPointerEvent) => {
if (!this.startPoint) return;
if (!this.endPoint) {
await this.clearBrush();
return;
}
const points = getRectPoints(this.startPoint, [event.canvas.x, event.canvas.y]);
this.updateElementState(points);
await this.clearBrush();
};
public clearSelected = () => {
if (this.endPoint) return;
const { graph } = this.context;
const selects = getAllElementState(graph, () => []);
graph.setElementState(selects, this.options.animation);
};
public updateElementState = (points: Points) => {
const { graph } = this.context;
const { enableElements, state, mode, onSelect } = this.options;
// 框选选中的 ids
const rectSelectIds = this.getPointsSelectIds(graph, points, enableElements);
// state mode 框选逻辑
let stateChangeFn = (id: ID, oldState: string[]): string[] => (rectSelectIds.includes(id) ? [state] : []);
switch (mode) {
case 'union':
stateChangeFn = (id: ID, oldState: string[]) => (rectSelectIds.includes(id) ? [state] : oldState);
break;
case 'diff':
stateChangeFn = (id: ID, oldState: string[]) => {
if (rectSelectIds.includes(id)) {
return oldState.includes(state) ? [] : [state];
}
return oldState;
};
break;
case 'intersect':
stateChangeFn = (id: ID, oldState: string[]) => {
if (rectSelectIds.includes(id)) {
return oldState.includes(state) ? [state] : [];
}
return oldState;
};
break;
}
let states = getAllElementState(graph, stateChangeFn);
if (enableElements.includes('edge')) {
transformEdgeState(graph, states, state);
}
if (isFunction(onSelect)) {
states = onSelect(states);
}
graph.setElementState(states, this.options.animation);
};
private clearBrush = async () => {
this.rectShape?.remove();
this.rectShape = undefined;
this.startPoint = undefined;
this.endPoint = undefined;
};
public getPointsSelectIds = (graph: Graph, points: Points, itemTypes: ElementTypes) => {
const selectedNodeIds: ID[] = [];
const selectedComboIds: ID[] = [];
if (itemTypes.includes('node')) {
graph.getNodeData().forEach((node) => {
const { id } = node;
if (
graph.getElementVisibility(id) !== 'hidden' && // hidden node is not selectable
this.selectElementFn(graph, id, points)
) {
selectedNodeIds.push(id);
}
});
}
if (itemTypes.includes('combo')) {
graph.getComboData().forEach((combo) => {
const { id } = combo;
if (
graph.getElementVisibility(id) !== 'hidden' && // hidden combo is not selectable
this.selectElementFn(graph, id, points)
) {
selectedComboIds.push(id);
}
});
}
return [...selectedNodeIds, ...selectedComboIds];
};
// 当前按键是否和 trigger 配置一致
public isKeydown() {
const { trigger } = this.options;
const keys = (Array.isArray(trigger) ? trigger : [trigger]) as string[];
if (keys.length === 0 || keys.includes('drag')) return true;
return this.shortcut?.match(keys);
}
public validate(event: IPointerEvent) {
if (this.destroyed) return false;
const { enable } = this.options;
if (isFunction(enable)) return enable(event);
return !!enable;
}
public bindEvents() {
const { graph } = this.context;
this.unbindEvents();
graph.on(CommonEvent.POINTER_DOWN, this.pointerDown);
graph.on(CommonEvent.POINTER_MOVE, this.pointerMove);
graph.on(CommonEvent.POINTER_UP, this.pointerUp);
graph.on(`canvas:${CommonEvent.CLICK}`, this.clearSelected);
}
public unbindEvents() {
const { graph } = this.context;
graph.off(CommonEvent.POINTER_DOWN, this.pointerDown);
graph.off(CommonEvent.POINTER_MOVE, this.pointerMove);
graph.off(CommonEvent.POINTER_UP, this.pointerUp);
graph.off(`canvas:${CommonEvent.CLICK}`, this.clearSelected);
}
public destroy() {
this.unbindEvents();
super.destroy();
}
}

4
packages/g6/src/behaviors/index.ts
View File

@ -1,4 +1,5 @@
export { BaseBehavior } from './base-behavior';
export { BrushSelect } from './brush-select';
export { CollapseExpand } from './collapse-expand';
export { CreateEdge } from './create-edge';
export { DragCanvas } from './drag-canvas';
@ -6,9 +7,11 @@ export { DragElement } from './drag-element';
export { DragElementForce } from './drag-element-force';
export { FocusElement } from './focus-element';
export { HoverElement } from './hover-element';
export { LassoSelect } from './lasso-select';
export { ZoomCanvas } from './zoom-canvas';
export type { BaseBehaviorOptions } from './base-behavior';
export type { BrushSelectOptions } from './brush-select';
export type { CollapseExpandOptions } from './collapse-expand';
export type { CreateEdgeOptions } from './create-edge';
export type { DragCanvasOptions } from './drag-canvas';
@ -16,4 +19,5 @@ export type { DragElementOptions } from './drag-element';
export type { DragElementForceOptions } from './drag-element-force';
export type { FocusElementOptions } from './focus-element';
export type { HoverElementOptions } from './hover-element';
export type { LassoSelectOptions } from './lasso-select';
export type { ZoomCanvasOptions } from './zoom-canvas';

103
packages/g6/src/behaviors/lasso-select.ts Normal file
View File

@ -0,0 +1,103 @@
import { Path } from '@antv/g';
import { isBBoxIntersectPolygon } from '../utils/behaviors/lasso';
import { getAllElementState } from '../utils/behaviors/utils';
import { pointsToPath } from '../utils/path';
import { BrushSelect, DEFAULT_STYLE } from './brush-select';
import type { ID } from '@antv/graphlib';
import type { RuntimeContext } from '../runtime/types';
import type { IPointerEvent, Points, State } from '../types';
import type { BrushSelectOptions } from './brush-select';
const SHOW_PATH_ID = 'g6-lasso-select-path-id';
export type States = Record<ID, State | State[]>;
export type LassoSelectOptions = BrushSelectOptions;
export class LassoSelect extends BrushSelect<LassoSelectOptions> {
static defaultOptions: Partial<LassoSelectOptions> = {
...BrushSelect.defaultOptions,
style: DEFAULT_STYLE,
};
private points?: Points;
private pathShape?: Path;
public selectElementFn = isBBoxIntersectPolygon;
constructor(context: RuntimeContext, options: LassoSelectOptions) {
super(context, Object.assign({}, LassoSelect.defaultOptions, options));
this.bindEvents();
}
public pointerDown = async (event: IPointerEvent) => {
if (!this.validate(event) || !this.isKeydown() || this.points) return;
const { style, trigger } = this.options;
const triggers = (Array.isArray(trigger) ? trigger : [trigger]) as string[];
if (event.targetType !== 'canvas' && triggers.includes('drag')) return;
const { canvas } = this.context;
this.pathShape = new Path({
id: SHOW_PATH_ID,
style: {
...LassoSelect.defaultOptions.style,
fill: style.color || DEFAULT_STYLE.color,
...style,
pointerEvents: 'none',
},
});
canvas.appendChild(this.pathShape);
this.points = [[event.canvas.x, event.canvas.y]];
};
public pointerMove = async (event: IPointerEvent) => {
if (!this.points) return;
const { immediately, mode } = this.options;
const { element } = this.context;
this.points.push([event.canvas.x, event.canvas.y]);
this.pathShape?.setAttribute('path', pointsToPath(this.points));
if (immediately && mode === 'default') {
this.lassoUpdateElementState();
}
await element?.draw({ animation: false, silence: true });
};
public pointerUp = async () => {
if (!this.points) return;
if (this.points.length < 2) {
await this.clearLasso();
return;
}
this.lassoUpdateElementState();
await this.clearLasso();
};
public clearSelected = () => {
if (this.points) return;
const { graph } = this.context;
const selects = getAllElementState(graph, () => []);
graph.setElementState(selects, this.options.animation);
};
private lassoUpdateElementState = () => {
if (!this.points || this.points?.length < 2) return;
this.updateElementState(this.points);
};
private clearLasso = async () => {
this.pathShape?.remove();
this.pathShape = undefined;
this.points = undefined;
};
}

2
packages/g6/src/behaviors/types.ts
View File

@ -2,5 +2,7 @@ import type { BaseBehavior } from './base-behavior';
import type { DragCanvasOptions } from './drag-canvas';
import type { ZoomCanvasOptions } from './zoom-canvas';
export type { States } from './brush-select';
export type BuiltInBehaviorOptions = DragCanvasOptions | ZoomCanvasOptions;
export type Behavior = BaseBehavior<any>;

4
packages/g6/src/registry/build-in.ts
View File

@ -1,5 +1,6 @@
import { comboCollapseExpand, fade, translate } from '../animations';
import {
BrushSelect,
CollapseExpand,
CreateEdge,
DragCanvas,
@ -7,6 +8,7 @@ import {
DragElementForce,
FocusElement,
HoverElement,
LassoSelect,
ZoomCanvas,
} from '../behaviors';
import {
@ -71,6 +73,8 @@ export const BUILT_IN_EXTENSIONS: ExtensionRegistry = {
'hover-element': HoverElement,
'focus-element': FocusElement,
'create-edge': CreateEdge,
'brush-select': BrushSelect,
'lasso-select': LassoSelect,
},
combo: {
circle: CircleCombo,

2
packages/g6/src/types/element.ts
View File

@ -12,6 +12,8 @@ import type { Size } from './size';
export type ElementType = 'node' | 'edge' | 'combo';
export type ElementTypes = Array<ElementType>;
export type ElementOptions = NodeOptions | EdgeOptions | ComboOptions;
export type Node = BaseNode;

1
packages/g6/src/types/point.ts
View File

@ -1,3 +1,4 @@
import type { Vector2, Vector3 } from './vector';
export type Point = Vector2 | Vector3;
export type Points = Point[];

29
packages/g6/src/utils/behaviors/brush.ts Normal file
View File

@ -0,0 +1,29 @@
import { isPointInPolygon } from '../point';
import type { ID } from '@antv/graphlib';
import type { Graph } from '../../runtime/graph';
import type { Point, Points } from '../../types';
/**
* <zh/> 元素中心是否在 rect 中
*
* <en/> Element center in rect.
* @param graph Graph
* @param id ID
* @param points Points
* @returns boolean
*/
export function isBBoxCenterInRect(graph: Graph, id: ID, points: Points) {
const bbox = graph.getElementRenderBounds(id);
if (!bbox) return false;
return isPointInPolygon(bbox.center, points);
}
/**
*
* @param start
* @param end
*/
export function getRectPoints(start: Point, end: Point): Points {
return [start, [start[0], end[1]], end, [end[0], start[1]]];
}

127
packages/g6/src/utils/behaviors/lasso.ts Normal file
View File

@ -0,0 +1,127 @@
import { AABB } from '@antv/g';
import { getLinesIntersection } from '../line';
import { isPointInPolygon } from '../point';
import type { ID } from '@antv/graphlib';
import type { Graph } from '../../runtime/graph';
import type { Points } from '../../types';
import type { LineSegment } from '../line';
/**
* <zh/> 元素中心是否在 path 中
*
* <en/> Element center in path.
* @param graph Graph
* @param id ID
* @param points Points
* @returns boolean
*/
export const isBBoxIntersectPolygon = (graph: Graph, id: ID, points: Points) => {
const bbox = graph.getElementRenderBounds(id);
if (!bbox) return false;
const shapePoints = [
[bbox.min[0], bbox.min[1]],
[bbox.max[0], bbox.min[1]],
[bbox.max[0], bbox.max[1]],
[bbox.min[0], bbox.max[1]],
] as Points;
return isPolygonsIntersect(points, shapePoints);
};
/**
* <zh/> 两个多边形是否存在相交.
*
* <en/> Whether two polygons intersect.
* @param points1 Points
* @param points2 Points
* @returns boolean
*/
const isPolygonsIntersect = (points1: Points, points2: Points): boolean => {
const getBBox = (points: Points): Partial<AABB> => {
const xArr = points.map((p) => p[0]);
const yArr = points.map((p) => p[1]);
return {
min: [Math.min.apply(null, xArr), Math.min.apply(null, yArr), 0],
max: [Math.max.apply(null, xArr), Math.max.apply(null, yArr), 0],
};
};
const parseToLines = (points: Points) => {
const lines = [];
const count = points.length;
for (let i = 0; i < count - 1; i++) {
const point = points[i];
const next = points[i + 1];
lines.push([point, next]);
}
if (lines.length > 1) {
const first = points[0];
const last = points[count - 1];
lines.push([last, first]);
}
return lines;
};
// 空数组，或者一个点返回 false
if (points1.length < 2 || points2.length < 2) {
return false;
}
const bbox1 = getBBox(points1);
const bbox2 = getBBox(points2);
// 判定包围盒是否相交，比判定点是否在多边形内要快的多，可以筛选掉大多数情况
if (!intersectBBox(bbox1, bbox2)) {
return false;
}
let isIn = false;
// 判定点是否在多边形内部，一旦有一个点在另一个多边形内，则返回
points2.forEach((point) => {
if (isPointInPolygon(point, points1)) {
isIn = true;
return false;
}
});
if (isIn) {
return true;
}
points1.forEach((point) => {
if (isPointInPolygon(point, points2)) {
isIn = true;
return false;
}
});
if (isIn) {
return true;
}
const lines1 = parseToLines(points1);
const lines2 = parseToLines(points2);
let isIntersect = false;
lines2.forEach((line) => {
if (lineIntersectPolygon(lines1, line)) {
isIntersect = true;
return false;
}
});
return isIntersect;
};
const intersectBBox = (box1: Partial<AABB>, box2: Partial<AABB>) => {
if (!box2?.min || !box1?.min || !box2?.max || !box1?.max) return false;
return (
box2.min[0] <= box1.max[0] && box2.max[0] >= box1.min[0] && box2.min[1] <= box1.max[1] && box2.max[1] >= box1.min[1]
);
};
const lineIntersectPolygon = (lines: Points[], line: Points) => {
let isIntersect = false;
lines.forEach((l) => {
if (l.length > 1 && line.length > 1 && getLinesIntersection(l as LineSegment, line as LineSegment)) {
isIntersect = true;
return false;
}
});
return isIntersect;
};

47
packages/g6/src/utils/behaviors/utils.ts Normal file
View File

@ -0,0 +1,47 @@
import { isFunction } from '@antv/util';
import type { ID } from '@antv/graphlib';
import type { States } from '../../behaviors/types';
import type { Graph } from '../../runtime/graph';
/**
* <zh/> 获取所有元素状态.
*
* <en/> Gets all element states.
* @param graph Graph
* @param callback (id: ID, state: string[]) => string[]
* @returns States
*/
export const getAllElementState = (graph: Graph, callback?: (id: ID, state: string[]) => string[]): States => {
const allElementState: States = {};
const datas = graph.getData();
Object.values(datas).forEach((data) => {
data.map((d: any) => {
const state = graph.getElementState(d.id);
allElementState[d.id] = isFunction(callback) ? callback(d.id, state) : state;
});
});
return allElementState;
};
/**
* <zh/> 转化 edge 状态.
*
* <en/> Example Transform the edge state.
* @param graph Graph
* @param states States
* @param state 'active' | 'selected'
*/
export const transformEdgeState = (graph: Graph, states: States, state: 'active' | 'selected') => {
const edgeData = graph.getEdgeData();
edgeData.forEach(({ id, target, source }) => {
if (!id) return;
if (states[target].includes(state) && states[source].includes(state)) {
states[id] = [state];
} else {
states[id] = [];
}
});
};

23
packages/g6/src/utils/path.ts
View File

@ -1,5 +1,26 @@
import type { PathArray, PathCommand } from '@antv/util';
import type { Point } from '../types';
import type { Point, Points } from '../types';
/**
* <zh/> points 转化为 path 路径
*
* <en/> points transfrom path.
* @param points Point[]
* @param isClose boolean
* @returns path string[][]
*/
export function pointsToPath(points: Points, isClose = true): PathArray {
const path = [];
points.forEach((point, index) => {
path.push([index === 0 ? 'M' : 'L', ...point]);
});
if (isClose) {
path.push(['Z']);
}
return path as PathArray;
}
const PATH_COMMANDS: Record<PathCommand, string[]> = {
M: ['x', 'y'],

19
packages/g6/src/utils/position.ts
View File

@ -1,5 +1,5 @@
import type { AABB } from '@antv/g';
import type { Anchor, NodeLikeData, Placement, Position, RelativePlacement } from '../types';
import type { Anchor, NodeLikeData, Placement, Points, Position, RelativePlacement } from '../types';
import { parseAnchor } from './anchor';
import { parsePlacement } from './placement';
@ -54,3 +54,20 @@ export function getXYByAnchor(bbox: AABB, anchor: Anchor): Position {
const parsedAnchor = parseAnchor(anchor);
return getXYByRelativePlacement(bbox, parsedAnchor as RelativePlacement);
}
/**
* <zh/> 通过 rect points 路径点获取 position 方位配置.
*
* <en/> The rect points command is used to obtain the position and orientation configuration.
* @param points Points
* @returns `{ left: number; right: number; top: number; bottom: number }`
*/
export const getPositionByRectPoints = (points: Points) => {
const [p1, p2] = points;
return {
left: Math.min(p1[0], p2[0]),
right: Math.max(p1[0], p2[0]),
top: Math.min(p1[1], p2[1]),
bottom: Math.max(p1[1], p2[1]),
};
};

15
packages/g6/src/utils/shortcut.ts
View File

@ -1,6 +1,6 @@
import EventEmitter from '@antv/event-emitter';
import type { FederatedMouseEvent } from '@antv/g';
import { isEqual } from '@antv/util';
import { isEqual, isString } from '@antv/util';
import { CommonEvent } from '../constants';
export interface ShortcutOptions {}
@ -9,6 +9,8 @@ export type ShortcutKey = string[];
type Handler = (event: any) => void;
const lowerCaseKeys = (keys: ShortcutKey) => keys.map((key) => (isString(key) ? key.toLocaleLowerCase() : key));
export class Shortcut {
private map: Map<ShortcutKey, Handler> = new Map();
@ -38,6 +40,13 @@ export class Shortcut {
this.map.clear();
}
public match(key: ShortcutKey) {
// 排序
const recordKeyList = lowerCaseKeys(Array.from(this.recordKey)).sort();
const keyList = lowerCaseKeys(key).sort();
return isEqual(recordKeyList, keyList);
}
private bindEvents() {
const { emitter } = this;
@ -48,17 +57,19 @@ export class Shortcut {
}
private onKeyDown = (event: KeyboardEvent) => {
if (!event?.key) return;
this.recordKey.add(event.key);
this.trigger(event);
};
private onKeyUp = (event: KeyboardEvent) => {
if (!event?.key) return;
this.recordKey.delete(event.key);
};
private trigger(event: KeyboardEvent) {
this.map.forEach((handler, key) => {
if (isEqual(Array.from(this.recordKey), key)) handler(event);
if (this.match(key)) handler(event);
});
}

67
packages/site/docs/common/BehaviorBrushSelect.en.md
View File

@ -1,9 +1,9 @@
## brushStyle
## style
**Type**:
```ts
type brushStyle = {
type style = {
fill?: string;
stroke?: string;
fillOpacity?: number;
@ -16,7 +16,7 @@ type brushStyle = {
```json
{
"fill": "#EEF6FF",
"color": "#EEF6FF",
"fillOpacity": 0.4,
"stroke": "#DDEEFE",
"lineWidth": 1
@ -27,75 +27,36 @@ type brushStyle = {
**Description**: The style of the selection area
## eventName
**Type**: `string`
**Default**: `''`
The event name triggered when selected/deselected
<embed src="./BehaviorItemTypes.en.md"></embed>
## onDeselect
## onSelect
**Type**:
```ts
type onDeselect = (
selectedIds: { nodes: ID[]; edges: ID[]; combos: ID[] },
deselectedIds: { nodes: ID[]; edges: ID[]; combos: ID[] },
) => void;
type onSelect = (states: { [key: ID]: string[] }) => { [key: ID]: string[] };
```
**Required**: false
**Description**: The callback function when deselected
## onSelect
**Type**:
```ts
type onSelect = (selectedIds: { nodes: ID[]; edges: ID[]; combos: ID[] }) => void;
```
**Required**: false
**Description**: The callback function when selected
## selectedState
## state
**Type**: `string`
**Default**: `'selected'`
**Default**: `'selected' | 'active'`
Switch to this state when highlighted
## selectSetMode
## mode
**Type**: `'union' | 'intersect' | 'latest' | 'latest'`
**Type**: `'union' | 'intersect' | 'diff' | 'default'`
**Default**: `'latest'`
**Default**: `'default'`
The mode of the select set
<embed src="./BehaviorShouldBegin.zh.md"></embed>
## shouldUpdate
**Type**:
```ts
type shouldUpdate = (itemType: ITEM_TYPE, id: ID, action: 'select' | 'deselect', self: BrushSelect) => boolean;
```
**Default**: `() => {}`
**Required**: false
**Description**: Whether to allow the current node to update the interaction state. When false is returned, you need to manually listen for events and update the state
## trigger
**Type**: `'shift' | 'ctrl' | 'alt' | 'meta' | 'drag'`
@ -104,6 +65,14 @@ type shouldUpdate = (itemType: ITEM_TYPE, id: ID, action: 'select' | 'deselect',
The event type that triggers the interaction
## immediately
**Type**: `boolean`
**Default**: `false`
The event type that triggers the interaction
---
```ts

67
packages/site/docs/common/BehaviorBrushSelect.zh.md
View File

@ -1,10 +1,10 @@
## brushStyle
## style
**类型**：
```ts
type brushStyle = {
fill?: string;
type style = {
color?: string;
stroke?: string;
fillOpacity?: number;
lineWidth?: number;
@ -16,7 +16,7 @@ type brushStyle = {
```json
{
"fill": "#EEF6FF",
"color": "#EEF6FF",
"fillOpacity": 0.4,
"stroke": "#DDEEFE",
"lineWidth": 1
@ -27,75 +27,36 @@ type brushStyle = {
**说明**：选区样式
## eventName
**类型**：`string`
**默认值**：`''`
选中/取消选中时触发的事件名
<embed src="./BehaviorItemTypes.zh.md"></embed>
## onDeselect
**类型**：
```ts
type onDeselect = (
selectedIds: { nodes: ID[]; edges: ID[]; combos: ID[] },
deselectedIds: { nodes: ID[]; edges: ID[]; combos: ID[] },
) => void;
```
**是否必须**：false
**说明**：取消选中时的回调函数
## onSelect
**类型**：
```ts
type onSelect = (selectedIds: { nodes: ID[]; edges: ID[]; combos: ID[] }) => void;
type onSelect = (states: { [key: ID]: string[] }) => { [key: ID]: string[] };
```
**是否必须**：false
**说明**：选中时的回调函数
## selectedState
## state
**类型**：`string`
**默认值**：`'selected'`
**默认值**：`'selected' | 'active'`
选中时切换到该状态
## selectSetMode
## mode
**类型**：`'union' | 'intersect' | 'latest' | 'latest'`
**类型**：`'union' | 'intersect' | 'diff' | 'default'`
**默认值**：`'latest'`
**默认值**：`'default'`
选区的选择模式
<embed src="./BehaviorShouldBegin.zh.md"></embed>
## shouldUpdate
**类型**：
```ts
type shouldUpdate = (itemType: ITEM_TYPE, id: ID, action: 'select' | 'deselect', self: BrushSelect) => boolean;
```
**是否必须**：false
**是否必须**：false
**说明**：是否允许当前节点更新交互状态。返回 false 时，需要手动监听事件和更新状态
## trigger
**类型**：`'shift' | 'ctrl' | 'alt' | 'meta' | 'drag'`
@ -104,6 +65,14 @@ type shouldUpdate = (itemType: ITEM_TYPE, id: ID, action: 'select' | 'deselect',
触发交互的事件类型
## immediately
**类型**：`boolean`
**默认值**：`false`
Real-time departure brush select.
---
```ts

40
packages/site/examples/interaction/select/demo/brush-combo.ts Normal file
View File

@ -0,0 +1,40 @@
import { Graph } from '@antv/g6';
const graph = new Graph({
container: 'container',
node: {
style: {
labelText: (d) => d.id,
},
},
combo: {
style: {
type: 'circle', // 👈🏻 Combo shape type.
},
},
data: {
nodes: [
{ id: 'node1', style: { x: 250, y: 150, parentId: 'combo1', lineWidth: 0 } },
{ id: 'node2', style: { x: 350, y: 150, parentId: 'combo1', lineWidth: 0 } },
{ id: 'node3', style: { x: 250, y: 300, parentId: 'combo2', lineWidth: 0 } },
],
edges: [
{ id: 'edge1', target: 'node1', source: 'node2' },
{ id: 'edge2', target: 'node1', source: 'node3' },
],
combos: [
{ id: 'combo1', style: { parentId: 'combo2' } }, // collapsed: true
{ id: 'combo2', style: {} },
],
},
animation: false,
behaviors: [
{
type: 'brush-select',
immediately: true, // need mode: 'default'.
mode: 'default',
},
],
});
graph.render();

78
packages/site/examples/interaction/select/demo/brush.js
View File

@ -1,78 +0,0 @@
import { Graph, extend, Extensions } from '@antv/g6';
const data = {
nodes: [
{ id: 'node1', data: { x: 150, y: 250 } },
{ id: 'node2', data: { x: 350, y: 250 } },
],
edges: [
{
id: 'edge1',
source: 'node1',
target: 'node2',
},
],
};
const container = document.getElementById('container');
const width = container.scrollWidth;
const height = (container.scrollHeight || 500) - 30;
const ExtGraph = extend(Graph, {
behaviors: {
'hover-activate': Extensions.HoverActivate,
'brush-select': Extensions.BrushSelect,
},
});
const modes = {};
const ALLOWED_TRIGGERS = ['shift', 'alt', 'ctrl', 'drag', 'meta'];
ALLOWED_TRIGGERS.forEach((trigger) => {
const defaultBehavior = ['drag-node', 'hover-activate'];
if (trigger === 'shift') {
modes.default = [...defaultBehavior, 'brush-select'];
} else {
modes[`${trigger}Select`] = [
...defaultBehavior,
{
type: 'brush-select',
trigger: trigger,
},
];
}
});
const graph = new ExtGraph({
container,
width,
height,
autoFit: 'center',
modes,
data,
});
const switchDiv = document.createElement('div');
switchDiv.innerHTML = `👉 Trigger：`;
switchDiv.style.position = 'absolute';
switchDiv.style.zIndex = 10;
container.appendChild(switchDiv);
const selector = document.createElement('select');
selector.id = 'selector';
ALLOWED_TRIGGERS.forEach((trigger, index) => {
const option = document.createElement('option');
option.value = trigger;
option.innerHTML = `${trigger}`;
selector.appendChild(option);
});
switchDiv.appendChild(selector);
// Listen to the selector, change the graph mode when the selector is changed
selector.addEventListener('change', (e) => {
const value = e.target.value;
const mode = value === 'shift' ? 'default' : `${value}Select`;
// change the graph mode
graph.setMode(mode);
});
window.graph = graph;

78
packages/site/examples/interaction/select/demo/brush.ts Normal file
View File

@ -0,0 +1,78 @@
import { Graph } from '@antv/g6';
const ALLOWED_TRIGGERS = ['shift', 'alt', 'ctrl', 'drag', 'meta'];
const graph = new Graph({
container: 'container',
data: {
nodes: [
{ id: 'node1', style: { x: 150, y: 250, lineWidth: 0 } },
{ id: 'node2', style: { x: 250, y: 200, lineWidth: 0 } },
{ id: 'node3', style: { x: 300, y: 250, lineWidth: 0 } },
{ id: 'node4', style: { x: 250, y: 300, lineWidth: 0 } },
],
edges: [
{
id: 'edge1',
source: 'node1',
target: 'node2',
},
{
id: 'edge2',
source: 'node2',
target: 'node3',
},
{
id: 'edge3',
source: 'node3',
target: 'node4',
},
{
id: 'edge4',
source: 'node4',
target: 'node1',
},
],
},
behaviors: [
{
type: 'brush-select',
mode: 'diff',
trigger: 'shift',
style: {
color: '#00f',
fillOpacity: 0.2,
stroke: '#0ff',
},
},
],
});
const switchDiv = document.createElement('div');
switchDiv.innerHTML = `👉 Trigger：`;
switchDiv.style.position = 'absolute';
switchDiv.style.zIndex = 10;
container.appendChild(switchDiv);
const selector = document.createElement('select');
selector.id = 'selector';
ALLOWED_TRIGGERS.forEach((trigger, index) => {
const option = document.createElement('option');
option.value = trigger;
option.innerHTML = `${trigger}`;
selector.appendChild(option);
});
switchDiv.appendChild(selector);
// Listen to the selector, change the graph mode when the selector is changed
selector.addEventListener('change', (e) => {
const value = e.target.value;
// change the graph mode
graph.setBehaviors([
{
type: 'brush-select',
trigger: value,
},
]);
});
graph.render();

78
packages/site/examples/interaction/select/demo/lasso.js
View File

@ -1,78 +0,0 @@
import { Graph, extend, Extensions } from '@antv/g6';
const data = {
nodes: [
{ id: 'node1', data: { x: 150, y: 250 } },
{ id: 'node2', data: { x: 350, y: 250 } },
],
edges: [
{
id: 'edge1',
source: 'node1',
target: 'node2',
},
],
};
const container = document.getElementById('container');
const width = container.scrollWidth;
const height = (container.scrollHeight || 500) - 30;
const ExtGraph = extend(Graph, {
behaviors: {
'hover-activate': Extensions.HoverActivate,
'lasso-select': Extensions.LassoSelect,
},
});
const modes = {};
const ALLOWED_TRIGGERS = ['shift', 'alt', 'ctrl', 'drag', 'meta'];
ALLOWED_TRIGGERS.forEach((trigger) => {
const defaultBehavior = ['drag-node', 'hover-activate'];
if (trigger === 'shift') {
modes.default = [...defaultBehavior, 'lasso-select'];
} else {
modes[`${trigger}Select`] = [
...defaultBehavior,
{
type: 'lasso-select',
trigger: trigger,
},
];
}
});
const graph = new ExtGraph({
container,
width,
height,
autoFit: 'center',
modes,
data,
});
const switchDiv = document.createElement('div');
switchDiv.innerHTML = `👉 Trigger：`;
switchDiv.style.position = 'absolute';
switchDiv.style.zIndex = 10;
container.appendChild(switchDiv);
const selector = document.createElement('select');
selector.id = 'selector';
ALLOWED_TRIGGERS.forEach((trigger, index) => {
const option = document.createElement('option');
option.value = trigger;
option.innerHTML = `${trigger}`;
selector.appendChild(option);
});
switchDiv.appendChild(selector);
// Listen to the selector, change the graph mode when the selector is changed
selector.addEventListener('change', (e) => {
const value = e.target.value;
const mode = value === 'shift' ? 'default' : `${value}Select`;
// change the graph mode
graph.setMode(mode);
});
window.graph = graph;

79
packages/site/examples/interaction/select/demo/lasso.ts Normal file
View File

@ -0,0 +1,79 @@
import { Graph } from '@antv/g6';
const ALLOWED_TRIGGERS = ['shift', 'alt', 'ctrl', 'drag', 'meta'];
const graph = new Graph({
container: 'container',
data: {
nodes: [
{ id: 'node1', style: { x: 200, y: 250, lineWidth: 0 } },
{ id: 'node2', style: { x: 250, y: 200, lineWidth: 0 } },
{ id: 'node3', style: { x: 300, y: 250, lineWidth: 0 } },
{ id: 'node4', style: { x: 250, y: 300, lineWidth: 0 } },
],
edges: [
{
id: 'edge1',
source: 'node1',
target: 'node2',
},
{
id: 'edge2',
source: 'node2',
target: 'node3',
},
{
id: 'edge3',
source: 'node3',
target: 'node4',
},
{
id: 'edge4',
source: 'node4',
target: 'node1',
},
],
},
behaviors: [
{
type: 'lasso-select',
mode: 'diff',
trigger: 'shift',
style: {
color: '#00f',
fillOpacity: 0.1,
stroke: '#0ff',
lineWidth: 2,
},
},
],
});
const switchDiv = document.createElement('div');
switchDiv.innerHTML = `👉 Trigger：`;
switchDiv.style.position = 'absolute';
switchDiv.style.zIndex = 10;
container.appendChild(switchDiv);
const selector = document.createElement('select');
selector.id = 'selector';
ALLOWED_TRIGGERS.forEach((trigger, index) => {
const option = document.createElement('option');
option.value = trigger;
option.innerHTML = `${trigger}`;
selector.appendChild(option);
});
switchDiv.appendChild(selector);
// Listen to the selector, change the graph mode when the selector is changed
selector.addEventListener('change', (e) => {
const value = e.target.value;
// change the graph mode
graph.setBehaviors([
{
type: 'lasso-select',
trigger: value,
},
]);
});
graph.render();

13
packages/site/examples/interaction/select/demo/meta.json
View File

@ -10,14 +10,19 @@
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*F0RGQ67xbGYAAAAAAAAAAAAAARQnAQ"
},
{
"filename": "brush.js",
"filename": "brush.ts",
"title": "框选",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*ZDEiRIQRByEAAAAAAAAAAAAAARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*OeBHQZKfEwsAAAAAAAAAAAAADmJ7AQ/original"
},
{
"filename": "lasso.js",
"filename": "brush-combo.ts",
"title": "框选 combo",
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*hE19RZL7iYQAAAAAAAAAAAAADmJ7AQ/original"
},
{
"filename": "lasso.ts",
"title": "拉索选择",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*8WwrRplTPG8AAAAAAAAAAAAAARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*GSdRQ5TO9IAAAAAAAAAAAAAADmJ7AQ/original"
}
]
}