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: add fullscreen plugin

Browse Source
This commit is contained in:
yvonneyx 2024-06-05 19:39:01 +08:00
parent c1be9ab52a
commit 79ed07d2ba
9 changed files with 1427 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -100,6 +100,7 @@ export { pluginBackground } from './plugin-background';
export { pluginBubbleSets } from './plugin-bubble-sets';
export { pluginCameraSetting } from './plugin-camera-setting';
export { pluginContextmenu } from './plugin-contextmenu';
export { pluginFullscreen } from './plugin-fullscreen';
export { pluginGridLine } from './plugin-grid-line';
export { pluginHistory } from './plugin-history';
export { pluginHull } from './plugin-hull';

43
packages/g6/__tests__/demos/plugin-fullscreen.ts Normal file
View File

@ -0,0 +1,43 @@
import { Fullscreen, Graph } from '@/src';
import data from '@@/dataset/cluster.json';
export const pluginFullscreen: TestCase = async (context) => {
const graph = new Graph({
...context,
data,
layout: { type: 'd3-force' },
plugins: [
{
type: 'fullscreen',
key: 'fullscreen',
},
],
});
graph.setPlugins((prev) => [
...prev,
{
type: 'toolbar',
key: 'toolbar',
position: 'top-left',
onClick: (item: string) => {
const fullscreenPlugin = graph.getPluginInstance<Fullscreen>('fullscreen');
if (item === 'request-fullscreen') {
fullscreenPlugin.request();
}
if (item === 'exit-fullscreen') {
fullscreenPlugin.exit();
}
},
getItems: () => {
return [
{ id: 'request-fullscreen', value: 'request-fullscreen' },
{ id: 'exit-fullscreen', value: 'exit-fullscreen' },
];
},
},
]);
await graph.render();
return graph;
};

602
packages/g6/__tests__/snapshots/plugins/fullscreen/exit.svg Normal file
View File

@ -0,0 +1,602 @@
<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 >
<g fill="none">
<g fill="none"/>
<g fill="none">
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 334.1151766217825,295.76106176138273 L 335.18920570243625,300.027939703461" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 345.8643917519133,283.5507073884951 L 355.313647798868,285.54600281658304" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 340.5935682559835,292.417693242978 L 352.52230698815714,306.40118493085015" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 345.4871230432173,275.4914124410618 L 375.5558457067827,266.1354491312038" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 346.070237517233,282.3521893391054 L 378.3296953440951,286.63795348316023" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 343.5012852682719,271.33826309628625 L 351.18673353055624,266.18822616152625" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 325.7814560984762,295.62008747883056 L 322.77634419449254,306.0541984098413" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 317.06498894292423,271.1225927354402 L 315.4400464574664,269.9948694227629" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 315.7946890456065,273.30167842899164 L 280.79851163798725,256.44470523800055" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 314.2287119722517,281.0269681633595 L 270.3206044339983,283.175302344453" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 334.8889970728103,264.9446249923427 L 339.5870466283616,249.58322229769635" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 315.7818771451487,287.1617725258091 L 304.8938125521169,292.3815624351284" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 342.10725766639797,290.9429819592497 L 344.0026971675864,292.64728903684403" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 315.0269557105088,275.19654424206726 L 262.9729374779678,257.8876079796124" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 366.7797903594322,304.2936478933828 L 367.09493498236463,303.13182818083595" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 392.78166866712934,277.26274204158756 L 392.2420434910738,272.8641500482562" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 406.31256675609364,265.4308290485618 L 416.2222843181251,268.02299785573507" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 408.8111134570312,282.2463999582985 L 417.0807017285157,278.57070819599835" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 353.91628154435404,245.263066110736 L 354.82859150252096,246.30115813242807" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 305.8160847072755,311.4820720130315 L 302.9982158298339,309.2454365318904" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 287.0418425211957,256.0425257383985 L 281.6372041096637,254.33120778210932" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 250.41986642092746,248.42474959204498 L 197.75071158200222,244.87279679467375" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 273.3495782578099,263.9053279973194 L 283.50012266992445,284.8942783259228" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 279.84654302825413,240.85555829402423 L 291.4186547256521,233.42405901554608" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 252.17191002760276,256.8516811666482 L 234.53390051927224,265.97413975620344" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 252.24622576917628,242.00903271104886 L 243.3887534788706,237.31489612195895" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 258.0270092923349,235.85701396710834 L 243.49844236782133,212.1353566383604" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 239.0683292261282,279.18389553840103 L 235.59359704340304,278.09781222527084" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 240.34125590932277,276.20847535638467 L 195.78543781626317,251.5449578711544" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 269.0668712343473,290.21109842816185 L 275.73894541604335,293.04439473590065" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 320.435104226046,228.53172170660267 L 328.71293654543837,230.52935922601452" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 233.91293591734177,244.87550336211504 L 229.8957493853926,242.57022112518965" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 238.86243580888777,239.5615485379317 L 224.11772776533098,217.63316886929485" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 237.75372849785717,240.37846753957908 L 239.28794325507252,242.28322984811624" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 231.93838294786786,250.6672824181354 L 197.63888755994464,245.9680325232709" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 215.5803393232377,218.61262596791454 L 215.6279126298873,220.34962378794484" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 223.50564328314167,220.46657923251973 L 227.65458926080362,212.63109227626933" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 199.79711168988467,199.98948550897086 L 190.1162336470294,197.24351620001352" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 190.65486131109702,194.3576157162683 L 219.21046461663735,197.01080774564576" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 161.2822434850844,201.55684780360616 L 139.3154127649156,215.74158359287821" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 176.92195752496676,208.7256199439868 L 179.58849474554106,227.94797929917726" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 158.74191927252156,192.10945489638806 L 140.32956052484172,191.22472784286975" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 232.1855666373332,214.21555942949226 L 232.20765235680742,214.09808497968743" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 213.90270750163512,234.34128016132894 L 197.13563783527894,239.27754002910075" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 194.48712471130105,253.52792593072488 L 207.62205192444114,263.5927863495486" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 170.90700661004624,255.52764470675305 L 167.42737449346936,259.2795910110204" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 177.5001768199418,259.21125655255344 L 176.10129412732383,264.24154801287625" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 170.06260470766247,232.90864749374606 L 136.07236691098987,201.34437374648832" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 166.58955335004103,238.7923738522077 L 154.01344347613085,234.65161113314386" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 168.92333288959588,234.28166225305546 L 160.128882686576,227.7768704617883" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 172.84340336754767,230.52924561907764 L 165.8079333023742,220.0927636582661" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 166.559795558102,248.708763651459 L 153.0094183090855,253.08034462490818" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 166.6689290279904,238.557442745084 L 140.99221904329866,229.65982715237695" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 129.88914751032237,205.4666551167416 L 133.27487684270497,214.6379133647037" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 117.23144277342375,176.12660281191546 L 115.11776987306062,171.87042172421735" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 110.03440551721155,183.30690550085592 L 105.50548095739782,181.04462648156596" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 134.52423294847767,202.80363492889822 L 137.08901015454967,205.91548128203928" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 138.6393014965949,197.65115357738503 L 142.57306270018245,199.63143919605247" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 125.06623150837567,206.44067370419066 L 125.15594408976885,208.43717968936403" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 132.4334883494828,242.9134054509966 L 131.2229294971969,239.5005349786909" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
</g>
<g fill="none">
<g fill="none" x="330.209605228419" y="280.2450627294096" transform="matrix(1,0,0,1,330.209595,280.245056)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="339.09477962307636" y="315.5439433427595" transform="matrix(1,0,0,1,339.094788,315.543945)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="370.96843627903814" y="288.8516669183745" transform="matrix(1,0,0,1,370.968445,288.851654)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="362.90626949018645" y="318.57382808705063" transform="matrix(1,0,0,1,362.906281,318.573822)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="390.8333705666316" y="261.38180952561333" transform="matrix(1,0,0,1,390.833374,261.381805)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="394.1903393745575" y="288.74508614019544" transform="matrix(1,0,0,1,394.190338,288.745087)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="431.7014789453777" y="272.0720153946496" transform="matrix(1,0,0,1,431.701477,272.072021)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="364.47843549149144" y="257.28142373450123" transform="matrix(1,0,0,1,364.478424,257.281433)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="318.3482125134808" y="321.42923476402336" transform="matrix(1,0,0,1,318.348206,321.429230)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="302.2954406091757" y="260.87239236590455" transform="matrix(1,0,0,1,302.295441,260.872406)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="266.38361733300684" y="249.50133290102752" transform="matrix(1,0,0,1,266.383606,249.501328)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="254.3397272252356" y="283.9572085882244" transform="matrix(1,0,0,1,254.339722,283.957214)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="304.8815771188896" y="224.7782921581964" transform="matrix(1,0,0,1,304.881592,224.778290)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="344.26645305476836" y="234.28278436399253" transform="matrix(1,0,0,1,344.266449,234.282791)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="290.4660994057329" y="299.29828902264836" transform="matrix(1,0,0,1,290.466095,299.298279)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="355.90035417740864" y="303.3452130308936" transform="matrix(1,0,0,1,355.900360,303.345215)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="247.79029302376827" y="252.83909345220087" transform="matrix(1,0,0,1,247.790298,252.839096)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="216.01838263636145" y="234.6066297482171" transform="matrix(1,0,0,1,216.018387,234.606628)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="215.18986028427523" y="204.35562724199048" transform="matrix(1,0,0,1,215.189865,204.355621)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="174.72348571507533" y="192.877381921129" transform="matrix(1,0,0,1,174.723480,192.877380)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="235.14184203487181" y="198.49104370483496" transform="matrix(1,0,0,1,235.141846,198.491043)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="229.25137868408746" y="229.82259369692397" transform="matrix(1,0,0,1,229.251373,229.822601)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="181.78697020120458" y="243.79622267465135" transform="matrix(1,0,0,1,181.786972,243.796219)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="124.34799591236852" y="190.45680543292272" transform="matrix(1,0,0,1,124.348000,190.456802)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="220.32219861151185" y="273.32448746177096" transform="matrix(1,0,0,1,220.322205,273.324493)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="156.54741544348207" y="271.0110103195917" transform="matrix(1,0,0,1,156.547409,271.011017)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="171.81450117618255" y="279.65659296793626" transform="matrix(1,0,0,1,171.814499,279.656586)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="108.00121334441076" y="157.54021827065668" transform="matrix(1,0,0,1,108.001213,157.540222)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="138.81602069382026" y="229.6477593502967" transform="matrix(1,0,0,1,138.816025,229.647766)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="91.19188511998078" y="173.89473434893958" transform="matrix(1,0,0,1,91.191887,173.894730)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="147.26524757451654" y="218.26231617624563" transform="matrix(1,0,0,1,147.265244,218.262314)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="156.8643721130784" y="206.82579697954296" transform="matrix(1,0,0,1,156.864365,206.825790)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="137.78223987448965" y="257.9928890298493" transform="matrix(1,0,0,1,137.782242,257.992889)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="125.87417362786235" y="224.42104880515834" transform="matrix(1,0,0,1,125.874176,224.421051)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

602
packages/g6/__tests__/snapshots/plugins/fullscreen/request.svg Normal file
View File

@ -0,0 +1,602 @@
<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 >
<g fill="none">
<g fill="none"/>
<g fill="none">
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 334.1151766217825,295.76106176138273 L 335.18920570243625,300.027939703461" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 345.8643917519133,283.5507073884951 L 355.313647798868,285.54600281658304" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 340.5935682559835,292.417693242978 L 352.52230698815714,306.40118493085015" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 345.4871230432173,275.4914124410618 L 375.5558457067827,266.1354491312038" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 346.070237517233,282.3521893391054 L 378.3296953440951,286.63795348316023" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 343.5012852682719,271.33826309628625 L 351.18673353055624,266.18822616152625" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 325.7814560984762,295.62008747883056 L 322.77634419449254,306.0541984098413" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 317.06498894292423,271.1225927354402 L 315.4400464574664,269.9948694227629" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 315.7946890456065,273.30167842899164 L 280.79851163798725,256.44470523800055" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 314.2287119722517,281.0269681633595 L 270.3206044339983,283.175302344453" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 334.8889970728103,264.9446249923427 L 339.5870466283616,249.58322229769635" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 315.7818771451487,287.1617725258091 L 304.8938125521169,292.3815624351284" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 342.10725766639797,290.9429819592497 L 344.0026971675864,292.64728903684403" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 315.0269557105088,275.19654424206726 L 262.9729374779678,257.8876079796124" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 366.7797903594322,304.2936478933828 L 367.09493498236463,303.13182818083595" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 392.78166866712934,277.26274204158756 L 392.2420434910738,272.8641500482562" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 406.31256675609364,265.4308290485618 L 416.2222843181251,268.02299785573507" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 408.8111134570312,282.2463999582985 L 417.0807017285157,278.57070819599835" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 353.91628154435404,245.263066110736 L 354.82859150252096,246.30115813242807" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 305.8160847072755,311.4820720130315 L 302.9982158298339,309.2454365318904" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 287.0418425211957,256.0425257383985 L 281.6372041096637,254.33120778210932" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 250.41986642092746,248.42474959204498 L 197.75071158200222,244.87279679467375" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 273.3495782578099,263.9053279973194 L 283.50012266992445,284.8942783259228" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 279.84654302825413,240.85555829402423 L 291.4186547256521,233.42405901554608" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 252.17191002760276,256.8516811666482 L 234.53390051927224,265.97413975620344" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 252.24622576917628,242.00903271104886 L 243.3887534788706,237.31489612195895" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 258.0270092923349,235.85701396710834 L 243.49844236782133,212.1353566383604" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 239.0683292261282,279.18389553840103 L 235.59359704340304,278.09781222527084" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 240.34125590932277,276.20847535638467 L 195.78543781626317,251.5449578711544" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 269.0668712343473,290.21109842816185 L 275.73894541604335,293.04439473590065" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 320.435104226046,228.53172170660267 L 328.71293654543837,230.52935922601452" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 233.91293591734177,244.87550336211504 L 229.8957493853926,242.57022112518965" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 238.86243580888777,239.5615485379317 L 224.11772776533098,217.63316886929485" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 237.75372849785717,240.37846753957908 L 239.28794325507252,242.28322984811624" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 231.93838294786786,250.6672824181354 L 197.63888755994464,245.9680325232709" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 215.5803393232377,218.61262596791454 L 215.6279126298873,220.34962378794484" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 223.50564328314167,220.46657923251973 L 227.65458926080362,212.63109227626933" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 199.79711168988467,199.98948550897086 L 190.1162336470294,197.24351620001352" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 190.65486131109702,194.3576157162683 L 219.21046461663735,197.01080774564576" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 161.2822434850844,201.55684780360616 L 139.3154127649156,215.74158359287821" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 176.92195752496676,208.7256199439868 L 179.58849474554106,227.94797929917726" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 158.74191927252156,192.10945489638806 L 140.32956052484172,191.22472784286975" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 232.1855666373332,214.21555942949226 L 232.20765235680742,214.09808497968743" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 213.90270750163512,234.34128016132894 L 197.13563783527894,239.27754002910075" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 194.48712471130105,253.52792593072488 L 207.62205192444114,263.5927863495486" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 170.90700661004624,255.52764470675305 L 167.42737449346936,259.2795910110204" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 177.5001768199418,259.21125655255344 L 176.10129412732383,264.24154801287625" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 170.06260470766247,232.90864749374606 L 136.07236691098987,201.34437374648832" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 166.58955335004103,238.7923738522077 L 154.01344347613085,234.65161113314386" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 168.92333288959588,234.28166225305546 L 160.128882686576,227.7768704617883" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 172.84340336754767,230.52924561907764 L 165.8079333023742,220.0927636582661" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 166.559795558102,248.708763651459 L 153.0094183090855,253.08034462490818" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 166.6689290279904,238.557442745084 L 140.99221904329866,229.65982715237695" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 129.88914751032237,205.4666551167416 L 133.27487684270497,214.6379133647037" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 117.23144277342375,176.12660281191546 L 115.11776987306062,171.87042172421735" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 110.03440551721155,183.30690550085592 L 105.50548095739782,181.04462648156596" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 134.52423294847767,202.80363492889822 L 137.08901015454967,205.91548128203928" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 138.6393014965949,197.65115357738503 L 142.57306270018245,199.63143919605247" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 125.06623150837567,206.44067370419066 L 125.15594408976885,208.43717968936403" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
<g fill="none" marker-start="false" marker-end="false">
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
<g>
<path fill="none" d="M 132.4334883494828,242.9134054509966 L 131.2229294971969,239.5005349786909" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 16,0 L 16,0" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
</g>
<g fill="none">
<g fill="none" x="330.209605228419" y="280.2450627294096" transform="matrix(1,0,0,1,330.209595,280.245056)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="339.09477962307636" y="315.5439433427595" transform="matrix(1,0,0,1,339.094788,315.543945)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="370.96843627903814" y="288.8516669183745" transform="matrix(1,0,0,1,370.968445,288.851654)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="362.90626949018645" y="318.57382808705063" transform="matrix(1,0,0,1,362.906281,318.573822)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="390.8333705666316" y="261.38180952561333" transform="matrix(1,0,0,1,390.833374,261.381805)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="394.1903393745575" y="288.74508614019544" transform="matrix(1,0,0,1,394.190338,288.745087)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="431.7014789453777" y="272.0720153946496" transform="matrix(1,0,0,1,431.701477,272.072021)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="364.47843549149144" y="257.28142373450123" transform="matrix(1,0,0,1,364.478424,257.281433)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="318.3482125134808" y="321.42923476402336" transform="matrix(1,0,0,1,318.348206,321.429230)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="302.2954406091757" y="260.87239236590455" transform="matrix(1,0,0,1,302.295441,260.872406)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="266.38361733300684" y="249.50133290102752" transform="matrix(1,0,0,1,266.383606,249.501328)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="254.3397272252356" y="283.9572085882244" transform="matrix(1,0,0,1,254.339722,283.957214)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="304.8815771188896" y="224.7782921581964" transform="matrix(1,0,0,1,304.881592,224.778290)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="344.26645305476836" y="234.28278436399253" transform="matrix(1,0,0,1,344.266449,234.282791)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="290.4660994057329" y="299.29828902264836" transform="matrix(1,0,0,1,290.466095,299.298279)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="355.90035417740864" y="303.3452130308936" transform="matrix(1,0,0,1,355.900360,303.345215)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="247.79029302376827" y="252.83909345220087" transform="matrix(1,0,0,1,247.790298,252.839096)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="216.01838263636145" y="234.6066297482171" transform="matrix(1,0,0,1,216.018387,234.606628)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="215.18986028427523" y="204.35562724199048" transform="matrix(1,0,0,1,215.189865,204.355621)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="174.72348571507533" y="192.877381921129" transform="matrix(1,0,0,1,174.723480,192.877380)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="235.14184203487181" y="198.49104370483496" transform="matrix(1,0,0,1,235.141846,198.491043)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="229.25137868408746" y="229.82259369692397" transform="matrix(1,0,0,1,229.251373,229.822601)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="181.78697020120458" y="243.79622267465135" transform="matrix(1,0,0,1,181.786972,243.796219)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="124.34799591236852" y="190.45680543292272" transform="matrix(1,0,0,1,124.348000,190.456802)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="220.32219861151185" y="273.32448746177096" transform="matrix(1,0,0,1,220.322205,273.324493)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="156.54741544348207" y="271.0110103195917" transform="matrix(1,0,0,1,156.547409,271.011017)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="171.81450117618255" y="279.65659296793626" transform="matrix(1,0,0,1,171.814499,279.656586)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="108.00121334441076" y="157.54021827065668" transform="matrix(1,0,0,1,108.001213,157.540222)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="138.81602069382026" y="229.6477593502967" transform="matrix(1,0,0,1,138.816025,229.647766)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="91.19188511998078" y="173.89473434893958" transform="matrix(1,0,0,1,91.191887,173.894730)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="147.26524757451654" y="218.26231617624563" transform="matrix(1,0,0,1,147.265244,218.262314)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="156.8643721130784" y="206.82579697954296" transform="matrix(1,0,0,1,156.864365,206.825790)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="137.78223987448965" y="257.9928890298493" transform="matrix(1,0,0,1,137.782242,257.992889)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="125.87417362786235" y="224.42104880515834" transform="matrix(1,0,0,1,125.874176,224.421051)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

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

@ -65,6 +65,7 @@ export {
BubbleSets,
CameraSetting,
Contextmenu,
Fullscreen,
GridLine,
History,
Hull,
@ -156,6 +157,7 @@ export type {
BubbleSetsOptions,
CameraSettingOptions,
ContextmenuOptions,
FullscreenOptions,
GridLineOptions,
HistoryOptions,
HullOptions,

167
packages/g6/src/plugins/fullscreen/index.ts Normal file
View File

@ -0,0 +1,167 @@
import type { RuntimeContext } from '../../runtime/types';
import type { ShortcutKey } from '../../utils/shortcut';
import { Shortcut } from '../../utils/shortcut';
import type { BasePluginOptions } from '../base-plugin';
import { BasePlugin } from '../base-plugin';
/**
* <zh/> 全屏配置项
*
* <en/> Full screen options
*/
export interface FullscreenOptions extends BasePluginOptions {
/**
* <zh/> 触发全屏的方式
* - `request` : 请求全屏
* - `exit` : 退出全屏
*
* <en/> The way to trigger full screen
* - `request`: request full screen
* - `exit`: exit full screen
*/
trigger?: {
request?: ShortcutKey;
exit?: ShortcutKey;
};
/**
* <zh/> 是否自适应画布尺寸，全屏后画布尺寸会自动适应屏幕尺寸
*
* <en/> Whether to adapt the canvas size
* @defaultValue true
*/
autoFit?: boolean;
/**
* <zh/> 请求全屏后的回调
*
* <en/> Callback when requesting full screen
*/
onRequestFinish?: () => void;
/**
* <zh/> 退出全屏后的回调
*
* <en/> Callback when exiting full screen
*/
onExitFinish?: () => void;
}
/**
* <zh/> 全屏
*
* <en/> Full screen
*/
export class Fullscreen extends BasePlugin<FullscreenOptions> {
static defaultOptions: Partial<FullscreenOptions> = {
trigger: {},
autoFit: true,
};
private shortcut: Shortcut;
private $el = this.context.canvas.getContainer()!;
private graphSize: [number, number] = [0, 0];
constructor(context: RuntimeContext, options: FullscreenOptions) {
super(context, Object.assign({}, Fullscreen.defaultOptions, options));
this.shortcut = new Shortcut(context.graph);
this.bindEvents();
this.$el.style.backgroundColor = this.context.graph.getBackground()!;
}
private bindEvents() {
this.unbindEvents();
this.shortcut.unbindAll();
const { request = [], exit = [] } = this.options.trigger;
this.shortcut.bind(request, this.request);
this.shortcut.bind(exit, this.exit);
const events = ['webkitfullscreenchange', 'mozfullscreenchange', 'fullscreenchange', 'MSFullscreenChange'];
events.forEach((eventName) => {
document.addEventListener(eventName, this.onFullscreenChange, false);
});
}
private unbindEvents() {
this.shortcut.unbindAll();
const events = ['webkitfullscreenchange', 'mozfullscreenchange', 'fullscreenchange', 'MSFullscreenChange'];
events.forEach((eventName) => {
document.removeEventListener(eventName, this.onFullscreenChange, false);
});
}
private setGraphSize(fullScreen = true) {
let width, height;
if (fullScreen) {
width = window.screen.width;
height = window.screen.height;
this.graphSize = this.context.graph.getSize();
} else {
[width, height] = this.graphSize;
}
this.context.graph.setSize(width, height);
this.context.graph.render();
}
private onFullscreenChange = () => {
const isFull = !!document.fullscreenElement;
if (this.options.autoFit) this.setGraphSize(isFull);
if (isFull) {
this.options.onRequestFinish?.();
} else {
this.options.onExitFinish?.();
}
};
/**
* <zh/> 请求全屏
*
* <en/> Request full screen
*/
public request() {
if (document.fullscreenElement || !isFullscreenEnabled()) return;
this.$el.requestFullscreen().catch((err: Error) => {
console.debug(`Error attempting to enable full-screen: ${err.message} (${err.name})`);
});
}
/**
* <zh/> 退出全屏
*
* <en/> Exit full screen
*/
public exit() {
if (!document.fullscreenElement) return;
document.exitFullscreen();
}
/**
* <zh/> 更新配置
*
* <en/> Update options
* @param options - <zh/> 配置项 | <en/> Options
* @internal
*/
public update(options: Partial<FullscreenOptions>): void {
this.unbindEvents();
super.update(options);
this.bindEvents();
}
}
/**
* <zh/> 判断是否支持全屏
*
* <en/> Determine whether full screen is enabled
* @returns <zh/> 是否支持全屏 | <en/> Whether full screen is enabled
*/
function isFullscreenEnabled() {
return (
document.fullscreenEnabled ||
Reflect.get(document, 'webkitFullscreenEnabled') ||
Reflect.get(document, 'mozFullscreenEnabled') ||
Reflect.get(document, 'msFullscreenEnabled')
);
}

2
packages/g6/src/plugins/index.ts
View File

@ -3,6 +3,7 @@ export { BasePlugin } from './base-plugin';
export { BubbleSets } from './bubble-sets';
export { CameraSetting } from './camera-setting';
export { Contextmenu } from './contextmenu';
export { Fullscreen } from './fullscreen';
export { GridLine } from './grid-line';
export { History } from './history';
export { Hull } from './hull';
@ -17,6 +18,7 @@ export type { BasePluginOptions } from './base-plugin';
export type { BubbleSetsOptions } from './bubble-sets';
export type { CameraSettingOptions } from './camera-setting';
export type { ContextmenuOptions } from './contextmenu';
export type { FullscreenOptions } from './fullscreen';
export type { GridLineOptions } from './grid-line';
export type { HistoryOptions } from './history';
export type { HullOptions } from './hull';

4
packages/g6/src/plugins/toolbar/util.ts
View File

@ -111,5 +111,9 @@ export const BUILD_IN_SVG_ICON = `
<symbol id="reset" viewBox="64 64 896 896">
<path d="M909.1 209.3l-56.4 44.1C775.8 155.1 656.2 92 521.9 92 290 92 102.3 279.5 102 511.5 101.7 743.7 289.8 932 521.9 932c181.3 0 335.8-115 394.6-276.1 1.5-4.2-.7-8.9-4.9-10.3l-56.7-19.5a8 8 0 00-10.1 4.8c-1.8 5-3.8 10-5.9 14.9-17.3 41-42.1 77.8-73.7 109.4A344.77 344.77 0 01655.9 829c-42.3 17.9-87.4 27-133.8 27-46.5 0-91.5-9.1-133.8-27A341.5 341.5 0 01279 755.2a342.16 342.16 0 01-73.7-109.4c-17.9-42.4-27-87.4-27-133.9s9.1-91.5 27-133.9c17.3-41 42.1-77.8 73.7-109.4 31.6-31.6 68.4-56.4 109.3-73.8 42.3-17.9 87.4-27 133.8-27 46.5 0 91.5 9.1 133.8 27a341.5 341.5 0 01109.3 73.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 003 14.1l175.6 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c-.1-6.6-7.8-10.3-13-6.2z"></path>
</symbol>
<symbol id="exit-fullscreen" viewBox="0 0 1024 1024">
<path d="M418.13333333 361.43786666c0 0.2048-0.13653333 0.4096-0.13653334 0.68266667C417.99679999 362.32533333 418.13333333 362.53013333 418.13333333 362.73493333 418.13333333 371.54133333 414.44693333 379.392 408.78079999 385.39946666 408.43946666 385.7408 408.30293333 386.21866666 408.02986666 386.49173333c-1.09226667 1.09226667-2.59413333 1.77493333-3.82293333 2.73066667C398.40426666 393.65973333 391.64586666 396.8 383.93173333 396.8 383.72693333 396.8 383.59039999 396.73173333 383.38559999 396.73173333S382.97599999 396.8 382.77119999 396.8L112.29866666 396.8C92.50133333 396.8 76.79999999 381.50826666 76.79999999 362.66666666 76.66346666 343.89333333 92.63786666 328.53333333 112.16213333 328.53333333l189.44 0L87.44959999 114.51733333C73.59146666 100.59093333 73.25013333 78.5408 86.63039999 65.29706666c13.17546667-13.44853333 35.36213333-12.97066667 49.152 0.88746667l214.08426667 214.08426667L349.86666666 90.89706666C349.79839999 71.23626666 365.22666666 55.46666666 383.99999999 55.46666666 402.77333333 55.33013333 418.13333333 71.30453333 418.13333333 90.8288L418.13333333 361.43786666zM928.90453333 328.53333333l-189.44 0 214.15253333-214.08426667c13.85813333-13.9264 14.19946667-35.90826667 0.88746667-49.22026666-13.17546667-13.44853333-35.36213333-12.97066667-49.152 0.88746666l-214.08426667 214.08426667L691.26826666 90.89706666C691.26826666 71.23626666 675.83999999 55.46666666 657.06666666 55.46666666 638.29333333 55.33013333 622.93333333 71.30453333 622.93333333 90.8288l0 270.60906666c0 0.2048 0.13653333 0.4096 0.13653333 0.68266667C623.06986666 362.32533333 622.93333333 362.53013333 622.93333333 362.73493333 622.93333333 371.54133333 626.61973333 379.392 632.28586666 385.39946666c0.34133333 0.34133333 0.47786667 0.8192 0.8192 1.09226667 1.09226667 1.09226667 2.59413333 1.77493333 3.8912 2.73066667C642.66239999 393.65973333 649.42079999 396.8 657.13493333 396.8c0.2048 0 0.34133333-0.06826667 0.54613333-0.06826667S658.09066666 396.8 658.29546666 396.8l270.5408 0C948.56533333 396.8 964.26666666 381.50826666 964.26666666 362.66666666 964.40319999 343.89333333 948.42879999 328.53333333 928.90453333 328.53333333zM418.13333333 635.73333333c0-8.8064-3.6864-16.5888-9.35253334-22.66453333C408.43946666 612.72746666 408.30293333 612.2496 408.02986666 611.90826666 406.86933333 610.88426666 405.43573333 610.2016 404.20693333 609.24586666 398.47253333 604.80853333 391.64586666 601.6 383.93173333 601.6 383.72693333 601.6 383.59039999 601.73653333 383.38559999 601.73653333S382.97599999 601.6 382.77119999 601.6L112.29866666 601.6C92.50133333 601.6 76.79999999 616.96 76.79999999 635.73333333 76.66346666 654.50666666 92.63786666 669.86666666 112.16213333 669.86666666l189.44 0-214.15253334 214.15253334c-13.85813333 13.85813333-14.19946667 35.84-0.88746666 49.22026666 13.17546667 13.44853333 35.36213333 12.9024 49.152-0.95573333l214.08426666-214.08426667 0 189.37173334c0 19.59253333 15.42826667 35.49866667 34.2016 35.36213333C402.77333333 943.2064 418.13333333 927.232 418.13333333 907.5712L418.13333333 637.09866666c0-0.27306667-0.13653333-0.47786667-0.13653334-0.68266666C417.99679999 636.14293333 418.13333333 635.93813333 418.13333333 635.73333333zM739.46453333 669.86666666l189.44 0c19.456 0 35.49866667-15.36 35.36213333-34.13333333C964.26666666 616.96 948.56533333 601.6 928.76799999 601.6L658.29546666 601.6C658.09066666 601.6 657.88586666 601.73653333 657.68106666 601.73653333S657.33973333 601.6 657.13493333 601.6C649.42079999 601.6 642.59413333 604.80853333 636.85973333 609.24586666 635.63093333 610.2016 634.19733333 610.88426666 633.03679999 611.90826666 632.76373333 612.2496 632.62719999 612.72746666 632.28586666 613.0688 626.61973333 619.14453333 622.93333333 626.92693333 622.93333333 635.73333333c0 0.2048 0.13653333 0.4096 0.13653333 0.68266667C623.06986666 636.6208 622.93333333 636.8256 622.93333333 637.09866666l0 270.5408C622.93333333 927.232 638.29333333 943.2064 657.06666666 942.93333333c18.77333333 0.13653333 34.2016-15.70133333 34.2016-35.36213333l0-189.37173334 214.08426667 214.08426667c13.78986667 13.85813333 35.90826667 14.40426667 49.152 0.95573333 13.312-13.312 12.97066667-35.36213333-0.88746667-49.22026666L739.46453333 669.86666666z" ></path></symbol>
<symbol id="request-fullscreen" viewBox="0 0 1024 1024">
<path d="M69.818182 87.598545v273.128728a34.909091 34.909091 0 0 0 69.818182 0V163.653818l221.928727 222.021818a33.512727 33.512727 0 0 0 47.383273-47.383272L186.926545 116.363636h197.073455a34.909091 34.909091 0 0 0 0-69.818181H110.871273C85.364364 46.545455 69.818182 59.671273 69.818182 87.598545zM938.542545 46.545455H665.413818a34.909091 34.909091 0 0 0 0 69.818181h197.073455L640.465455 338.292364a33.512727 33.512727 0 0 0 47.383272 47.383272l221.928728-222.021818v197.073455a34.909091 34.909091 0 0 0 69.818181 0V87.598545c0-27.927273-15.453091-41.053091-40.96-41.05309z m-827.671272 907.636363h273.128727a34.909091 34.909091 0 0 0 0-69.818182H186.926545l222.021819-221.928727a33.512727 33.512727 0 0 0-47.383273-47.383273L139.636364 837.073455V640a34.909091 34.909091 0 0 0-69.818182 0v273.128727c0 27.927273 15.546182 41.053091 41.053091 41.053091z m868.724363-41.053091V640a34.909091 34.909091 0 0 0-69.818181 0v197.073455L687.941818 615.051636a33.512727 33.512727 0 0 0-47.383273 47.383273L862.487273 884.363636H665.413818a34.909091 34.909091 0 0 0 0 69.818182h273.128727c25.6 0 41.053091-13.125818 41.053091-41.053091z" ></path></symbol>
</svg>
`;

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

@ -57,6 +57,7 @@ import {
Background,
BubbleSets,
Contextmenu,
Fullscreen,
GridLine,
History,
Hull,
@ -163,15 +164,16 @@ export const BUILT_IN_EXTENSIONS: ExtensionRegistry = {
plugin: {
'bubble-sets': BubbleSets,
'grid-line': GridLine,
background: Background,
contextmenu: Contextmenu,
fullscreen: Fullscreen,
history: History,
timebar: Timebar,
hull: Hull,
legend: Legend,
timebar: Timebar,
toolbar: Toolbar,
tooltip: Tooltip,
watermark: Watermark,
background: Background,
},
transform: {
'update-related-edges': UpdateRelatedEdge,