feat: click element behavior support setting neighborSelectedState

This commit is contained in:
yvonneyx 2024-05-31 17:42:45 +08:00
parent 59e8bcd6a0
commit 88271812a1
3 changed files with 791 additions and 20 deletions

View File

@ -0,0 +1,703 @@
<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 332.650583411075,289.9425596579931 L 336.65379891314376,305.84644180685063" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-opacity="0.25" stroke-dasharray="0,0" pointer-events="none"/>
<path fill="none" d="M 332.650583411075,289.9425596579931 L 336.65379891314376,305.84644180685063" stroke-width="14" stroke="transparent" stroke-opacity="0.25" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g>
<path fill="none" d="M 332.650583411075,289.9425596579931 L 336.65379891314376,305.84644180685063" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 10,0 L 10,0" 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 339.9938428674067,282.31108817493833 L 361.1841966833745,286.7856220301398" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-opacity="0.25" stroke-dasharray="0,0" pointer-events="none"/>
<path fill="none" d="M 339.9938428674067,282.31108817493833 L 361.1841966833745,286.7856220301398" stroke-width="14" stroke="transparent" stroke-opacity="0.25" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g>
<path fill="none" d="M 339.9938428674067,282.31108817493833 L 361.1841966833745,286.7856220301398" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 10,0 L 10,0" 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 336.69957818245064,287.85295433399017 L 356.41629706169,310.96592383983796" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-opacity="0.25" stroke-dasharray="0,0" pointer-events="none"/>
<path fill="none" d="M 336.69957818245064,287.85295433399017 L 356.41629706169,310.96592383983796" stroke-width="14" stroke="transparent" stroke-opacity="0.25" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g>
<path fill="none" d="M 336.69957818245064,287.85295433399017 L 356.41629706169,310.96592383983796" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 10,0 L 10,0" 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 339.7580499244718,277.2740288327925 L 381.2849188255282,264.3528327394731" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-opacity="0.25" stroke-dasharray="0,0" pointer-events="none"/>
<path fill="none" d="M 339.7580499244718,277.2740288327925 L 381.2849188255282,264.3528327394731" stroke-width="14" stroke="transparent" stroke-opacity="0.25" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g>
<path fill="none" d="M 339.7580499244718,277.2740288327925 L 381.2849188255282,264.3528327394731" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 10,0 L 10,0" 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.12249647073156,281.56201439406976 L 384.27743639059656,287.42812842819586" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-opacity="0.25" stroke-dasharray="0,0" pointer-events="none"/>
<path fill="none" d="M 340.12249647073156,281.56201439406976 L 384.27743639059656,287.42812842819586" stroke-width="14" stroke="transparent" stroke-opacity="0.25" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g>
<path fill="none" d="M 340.12249647073156,281.56201439406976 L 384.27743639059656,287.42812842819586" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 10,0 L 10,0" 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 338.51690131513084,274.67831049230784 L 356.1711174836973,262.84817876550466" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-opacity="0.25" stroke-dasharray="0,0" pointer-events="none"/>
<path fill="none" d="M 338.51690131513084,274.67831049230784 L 356.1711174836973,262.84817876550466" stroke-width="14" stroke="transparent" stroke-opacity="0.25" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g>
<path fill="none" d="M 338.51690131513084,274.67831049230784 L 356.1711174836973,262.84817876550466" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 10,0 L 10,0" 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 327.44200808400853,289.854450731398 L 321.1157922089602,311.81983515727387" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-opacity="0.25" stroke-dasharray="0,0" pointer-events="none"/>
<path fill="none" d="M 327.44200808400853,289.854450731398 L 321.1157922089602,311.81983515727387" stroke-width="14" stroke="transparent" stroke-opacity="0.25" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g>
<path fill="none" d="M 327.44200808400853,289.854450731398 L 321.1157922089602,311.81983515727387" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 10,0 L 10,0" 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 321.9942161117886,274.54351651677905 L 310.510819288602,266.5739456414241" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-opacity="0.25" stroke-dasharray="0,0" pointer-events="none"/>
<path fill="none" d="M 321.9942161117886,274.54351651677905 L 310.510819288602,266.5739456414241" stroke-width="14" stroke="transparent" stroke-opacity="0.25" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g>
<path fill="none" d="M 321.9942161117886,274.54351651677905 L 310.510819288602,266.5739456414241" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 10,0 L 10,0" 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 321.20027867596497,275.9054450752487 L 275.3929220076288,253.8409385917435" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-opacity="0.25" stroke-dasharray="0,0" pointer-events="none"/>
<path fill="none" d="M 321.20027867596497,275.9054450752487 L 275.3929220076288,253.8409385917435" stroke-width="14" stroke="transparent" stroke-opacity="0.25" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g>
<path fill="none" d="M 321.20027867596497,275.9054450752487 L 275.3929220076288,253.8409385917435" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 10,0 L 10,0" 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.22154300511824,280.73375115922863 L 264.32777340113176,283.46851934858387" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-opacity="0.25" stroke-dasharray="0,0" pointer-events="none"/>
<path fill="none" d="M 320.22154300511824,280.73375115922863 L 264.32777340113176,283.46851934858387" stroke-width="14" stroke="transparent" stroke-opacity="0.25" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g>
<path fill="none" d="M 320.22154300511824,280.73375115922863 L 264.32777340113176,283.46851934858387" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 10,0 L 10,0" 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 333.1342211929674,270.6822866773431 L 341.3418225082045,243.84556061269595" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-opacity="0.25" stroke-dasharray="0,0" pointer-events="none"/>
<path fill="none" d="M 333.1342211929674,270.6822866773431 L 341.3418225082045,243.84556061269595" stroke-width="14" stroke="transparent" stroke-opacity="0.25" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g>
<path fill="none" d="M 333.1342211929674,270.6822866773431 L 341.3418225082045,243.84556061269595" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 10,0 L 10,0" 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 321.1922712381789,284.5680038857596 L 299.48341845908675,294.9753310751779" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-opacity="0.25" stroke-dasharray="0,0" pointer-events="none"/>
<path fill="none" d="M 321.1922712381789,284.5680038857596 L 299.48341845908675,294.9753310751779" stroke-width="14" stroke="transparent" stroke-opacity="0.25" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g>
<path fill="none" d="M 321.1922712381789,284.5680038857596 L 299.48341845908675,294.9753310751779" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 10,0 L 10,0" 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 337.6456340639597,286.93125978166 L 348.4643207700247,296.65901121443375" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-opacity="0.25" stroke-dasharray="0,0" pointer-events="none"/>
<path fill="none" d="M 337.6456340639597,286.93125978166 L 348.4643207700247,296.65901121443375" stroke-width="14" stroke="transparent" stroke-opacity="0.25" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g>
<path fill="none" d="M 337.6456340639597,286.93125978166 L 348.4643207700247,296.65901121443375" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 10,0 L 10,0" 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.72044534152894,277.08973620842096 L 257.2794478469476,255.99441601325876" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-opacity="0.25" stroke-dasharray="0,0" pointer-events="none"/>
<path fill="none" d="M 320.72044534152894,277.08973620842096 L 257.2794478469476,255.99441601325876" stroke-width="14" stroke="transparent" stroke-opacity="0.25" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g>
<path fill="none" d="M 320.72044534152894,277.08973620842096 L 257.2794478469476,255.99441601325876" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 10,0 L 10,0" 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 368.35053578372714,298.50290020313963 L 365.52418955806974,308.9225758710791" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
</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.0510581757449,271.3073908084629 L 392.9726539824582,278.81950128138084" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
</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 400.5078694813476,263.91244518782185 L 422.02698159287115,269.54138171647503" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
</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 403.3283227111816,284.68340747515725 L 422.56349247436526,276.1337006791396" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
</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 357.8770849923209,249.7699537337608 L 350.8677880545541,241.79427050940328" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
</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 310.51563002944954,315.2122561592677 L 298.29867050765984,305.51525238565415" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
</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 292.76194182843284,257.8537308386963 L 275.91710480242654,252.5200026818115" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
</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 256.40626874696636,248.8284663130213 L 191.7643092559633,244.46908007369746" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
</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 270.7373386450179,258.50382781631777 L 286.11236228271645,290.2957785069244" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
</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 274.79794162654554,244.09772175175831 L 296.4672561273607,230.181895557812" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
</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 257.5012960011384,254.09529854714825 L 229.20451454573657,268.7305223757033" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
</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 257.5477433396219,244.8186432623987 L 238.087235908425,234.50528557060912" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
</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 261.1607330415961,240.97363154743587 L 240.3647186185602,207.01873905803288" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
</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 244.79510139621294,280.97389009480145 L 229.8668248733183,276.3078176688704" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
</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 245.59068057320954,279.1142524810412 L 190.5360131523764,248.63918074649789" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
</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 263.5441901513499,287.86589190090194 L 281.26162649904074,295.38960126316056" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
</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.60253706510684,227.12418473972238 L 334.54550370637753,231.9368961928948" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
</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.11694687155637,247.86185062732287 L 224.691738431178,239.58387385998182" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
</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 242.21038430377263,244.5406288622083 L 220.76977927044612,212.65408854501825" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
</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 241.5174422343785,245.0512032382379 L 235.52422951855118,237.61049414945742" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
</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.88285126563517,251.4817125373356 L 191.69441924217733,245.15360240407065" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
</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.74460714233118,224.6103768866849 L 215.46364481079382,214.35187286917449" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
</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 220.69792211727116,225.76909767706312 L 230.46231042667415,207.32857383172595" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
</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 205.5693942232922,201.62678644481576 L 184.34395111362187,195.6062152641686" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
</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 184.68059340366415,193.80252746182785 L 225.18473252407023,197.5658960000862" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
</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.32270726240625,198.302047516414 L 134.27494898759375,218.99638388007037" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
</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.09752853733272,202.7825301041519 L 180.4129237331751,233.89106913901216" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
</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 164.73500462955448,192.3974269494027 L 134.3364751678088,190.9367557898551" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
</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.29417128700513,208.31886580249028 L 231.0990477071355,219.9947786066894" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
</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 219.65845717265282,232.64677559521536 L 191.37988816426125,240.97204459521433" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
</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 189.72456746177508,249.8785357837294 L 212.3846091739671,267.242176496544" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
</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 174.98699364849082,251.12836001874703 L 163.3473874550248,263.67887569902643" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
</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 179.10772502967555,253.43061742237228 L 174.49374591759008,270.0221871430574" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
</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 174.45924245950096,236.99148676061765 L 131.6757291591514,197.26153447961673" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
</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.28858536098755,240.6688157346562 L 148.31441146518432,232.77516925069537" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
</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 173.74719757320935,237.84962098518602 L 155.30501800296253,224.20891172965773" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
</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.1972416219292,235.50436058894988 L 162.45409504799267,215.11764868839387" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
</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.26998674102566,246.86655935918824 L 147.29922712616184,254.92254891717894" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
</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.33819515970592,240.52198379270385 L 135.32295291158314,227.6952861047571" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
</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 127.8112170337342,199.83796033602502 L 135.35280731929316,220.2666081454203" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
</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 119.90015157317256,181.5004276455087 L 112.44906107331181,166.49659689062412" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
</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 115.40200328803994,185.98811682609647 L 100.13788318656944,178.3634151563254" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
</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 130.70814543258126,198.17357271862292 L 140.90509767044608,210.54554349231458" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
</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 133.28006327515453,194.95327187392715 L 147.9323009216228,202.32932089951035" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
</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 124.79689453251751,200.44672195318068 L 125.42528106562702,214.431131440374" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
</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.43927090141014,248.5682119334842 L 129.21714694526955,233.8457284962033" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
</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="none" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="10" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g>
<circle fill="rgba(23,131,255,1)" stroke-width="3" stroke="rgba(0,0,0,1)" r="10"/>
</g>
</g>
<g fill="none" x="339.09477962307636" y="315.5439433427595" transform="matrix(1,0,0,1,339.094788,315.543945)">
<g>
<circle fill="none" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="10" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g>
<circle fill="rgba(23,131,255,1)" stroke-width="0" stroke="rgba(0,0,0,1)" r="10"/>
</g>
</g>
<g fill="none" x="370.96843627903814" y="288.8516669183745" transform="matrix(1,0,0,1,370.968445,288.851654)">
<g>
<circle fill="none" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="10" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g>
<circle fill="rgba(23,131,255,1)" stroke-width="0" stroke="rgba(0,0,0,1)" r="10"/>
</g>
</g>
<g fill="none" x="362.90626949018645" y="318.57382808705063" transform="matrix(1,0,0,1,362.906281,318.573822)">
<g>
<circle fill="none" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="10" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g>
<circle fill="rgba(23,131,255,1)" stroke-width="0" stroke="rgba(0,0,0,1)" r="10"/>
</g>
</g>
<g fill="none" x="390.8333705666316" y="261.38180952561333" transform="matrix(1,0,0,1,390.833374,261.381805)">
<g>
<circle fill="none" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="10" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g>
<circle fill="rgba(23,131,255,1)" stroke-width="0" stroke="rgba(0,0,0,1)" r="10"/>
</g>
</g>
<g fill="none" x="394.1903393745575" y="288.74508614019544" transform="matrix(1,0,0,1,394.190338,288.745087)">
<g>
<circle fill="none" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="10" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g>
<circle fill="rgba(23,131,255,1)" stroke-width="0" stroke="rgba(0,0,0,1)" r="10"/>
</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)" stroke-width="0" stroke="rgba(0,0,0,1)" r="10" fill-opacity="0.25" stroke-opacity="0.25"/>
</g>
</g>
<g fill="none" x="364.47843549149144" y="257.28142373450123" transform="matrix(1,0,0,1,364.478424,257.281433)">
<g>
<circle fill="none" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="10" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g>
<circle fill="rgba(23,131,255,1)" stroke-width="0" stroke="rgba(0,0,0,1)" r="10"/>
</g>
</g>
<g fill="none" x="318.3482125134808" y="321.42923476402336" transform="matrix(1,0,0,1,318.348206,321.429230)">
<g>
<circle fill="none" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="10" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g>
<circle fill="rgba(23,131,255,1)" stroke-width="0" stroke="rgba(0,0,0,1)" r="10"/>
</g>
</g>
<g fill="none" x="302.2954406091757" y="260.87239236590455" transform="matrix(1,0,0,1,302.295441,260.872406)">
<g>
<circle fill="none" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="10" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g>
<circle fill="rgba(23,131,255,1)" stroke-width="0" stroke="rgba(0,0,0,1)" r="10"/>
</g>
</g>
<g fill="none" x="266.38361733300684" y="249.50133290102752" transform="matrix(1,0,0,1,266.383606,249.501328)">
<g>
<circle fill="none" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="10" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g>
<circle fill="rgba(23,131,255,1)" stroke-width="0" stroke="rgba(0,0,0,1)" r="10"/>
</g>
</g>
<g fill="none" x="254.3397272252356" y="283.9572085882244" transform="matrix(1,0,0,1,254.339722,283.957214)">
<g>
<circle fill="none" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="10" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g>
<circle fill="rgba(23,131,255,1)" stroke-width="0" stroke="rgba(0,0,0,1)" r="10"/>
</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)" stroke-width="0" stroke="rgba(0,0,0,1)" r="10" fill-opacity="0.25" stroke-opacity="0.25"/>
</g>
</g>
<g fill="none" x="344.26645305476836" y="234.28278436399253" transform="matrix(1,0,0,1,344.266449,234.282791)">
<g>
<circle fill="none" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="10" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g>
<circle fill="rgba(23,131,255,1)" stroke-width="0" stroke="rgba(0,0,0,1)" r="10"/>
</g>
</g>
<g fill="none" x="290.4660994057329" y="299.29828902264836" transform="matrix(1,0,0,1,290.466095,299.298279)">
<g>
<circle fill="none" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="10" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g>
<circle fill="rgba(23,131,255,1)" stroke-width="0" stroke="rgba(0,0,0,1)" r="10"/>
</g>
</g>
<g fill="none" x="355.90035417740864" y="303.3452130308936" transform="matrix(1,0,0,1,355.900360,303.345215)">
<g>
<circle fill="none" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="10" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g>
<circle fill="rgba(23,131,255,1)" stroke-width="0" stroke="rgba(0,0,0,1)" r="10"/>
</g>
</g>
<g fill="none" x="247.79029302376827" y="252.83909345220087" transform="matrix(1,0,0,1,247.790298,252.839096)">
<g>
<circle fill="none" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="10" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g>
<circle fill="rgba(23,131,255,1)" stroke-width="0" stroke="rgba(0,0,0,1)" r="10"/>
</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)" stroke-width="0" stroke="rgba(0,0,0,1)" r="10" fill-opacity="0.25" stroke-opacity="0.25"/>
</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)" stroke-width="0" stroke="rgba(0,0,0,1)" r="10" fill-opacity="0.25" stroke-opacity="0.25"/>
</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)" stroke-width="0" stroke="rgba(0,0,0,1)" r="10" fill-opacity="0.25" stroke-opacity="0.25"/>
</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)" stroke-width="0" stroke="rgba(0,0,0,1)" r="10" fill-opacity="0.25" stroke-opacity="0.25"/>
</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)" stroke-width="0" stroke="rgba(0,0,0,1)" r="10" fill-opacity="0.25" stroke-opacity="0.25"/>
</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)" stroke-width="0" stroke="rgba(0,0,0,1)" r="10" fill-opacity="0.25" stroke-opacity="0.25"/>
</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)" stroke-width="0" stroke="rgba(0,0,0,1)" r="10" fill-opacity="0.25" stroke-opacity="0.25"/>
</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)" stroke-width="0" stroke="rgba(0,0,0,1)" r="10" fill-opacity="0.25" stroke-opacity="0.25"/>
</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)" stroke-width="0" stroke="rgba(0,0,0,1)" r="10" fill-opacity="0.25" stroke-opacity="0.25"/>
</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)" stroke-width="0" stroke="rgba(0,0,0,1)" r="10" fill-opacity="0.25" stroke-opacity="0.25"/>
</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)" stroke-width="0" stroke="rgba(0,0,0,1)" r="10" fill-opacity="0.25" stroke-opacity="0.25"/>
</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)" stroke-width="0" stroke="rgba(0,0,0,1)" r="10" fill-opacity="0.25" stroke-opacity="0.25"/>
</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)" stroke-width="0" stroke="rgba(0,0,0,1)" r="10" fill-opacity="0.25" stroke-opacity="0.25"/>
</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)" stroke-width="0" stroke="rgba(0,0,0,1)" r="10" fill-opacity="0.25" stroke-opacity="0.25"/>
</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)" stroke-width="0" stroke="rgba(0,0,0,1)" r="10" fill-opacity="0.25" stroke-opacity="0.25"/>
</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)" stroke-width="0" stroke="rgba(0,0,0,1)" r="10" fill-opacity="0.25" stroke-opacity="0.25"/>
</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)" stroke-width="0" stroke="rgba(0,0,0,1)" r="10" fill-opacity="0.25" stroke-opacity="0.25"/>
</g>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 50 KiB

View File

@ -31,8 +31,32 @@ describe('behavior click element', () => {
graph.emit(`node:${CommonEvent.CLICK}`, { target: { id: '0' }, targetType: 'node' });
});
it('selectedState and neighborSelectedState', async () => {
graph.setBehaviors([
{
type: 'click-element',
selectedState: 'selected',
neighborSelectedState: 'active',
unselectedState: 'inactive',
degree: 1,
},
]);
graph.emit(`node:${CommonEvent.CLICK}`, { target: { id: '0' }, targetType: 'node' });
await expect(graph).toMatchSnapshot(__filename, 'custom-neighborSelectedState');
graph.emit(`node:${CommonEvent.CLICK}`, { target: { id: '0' }, targetType: 'node' });
});
it('1 degree', async () => {
graph.setBehaviors([{ type: 'click-element', degree: 1, selectedState: 'selected', unselectedState: undefined }]);
graph.setBehaviors([
{
type: 'click-element',
degree: 1,
selectedState: 'selected',
neighborSelectedState: 'selected',
unselectedState: undefined,
},
]);
graph.emit(`node:${CommonEvent.CLICK}`, { target: { id: '0' }, targetType: 'node' });
await expect(graph).toMatchSnapshot(__filename, 'node-1-degree');

View File

@ -53,16 +53,23 @@ export interface ClickElementOptions extends BaseBehaviorOptions {
*/
trigger?: ShortcutKey;
/**
* <zh/>
* <zh/>
*
* <en/> The state to be applied when select.
* <en/> The state to be applied when an element is selected
* @defaultValue 'selected'
*/
selectedState?: State;
/**
* <zh/>
* <zh/> n n degree degree 1
*
* <en/> The state to be applied on other unselected elements when some elements are selected
* <en/> The state to be applied to the neighboring elements within n degrees when an element is selected. The value of n is controlled by the degree property, for instance, a degree of 1 indicates direct neighbors
* @defaultValue 'selected'
*/
neighborSelectedState?: State;
/**
* <zh/>
*
* <en/> The state to be applied to all unselected elements when some elements are selected, excluding the selected element and its affected neighbors
* @defaultValue undefined
*/
unselectedState?: State;
@ -80,7 +87,14 @@ export interface ClickElementOptions extends BaseBehaviorOptions {
*
* <en/> For edges, `0 `means only the current edge is selected,`1` means the current edge and its directly adjacent nodes are selected, etc.
*/
degree?: number;
degree?: number | ((event: IPointerEvent) => number);
/**
* <zh/>
*
* <en/> Callback when the element is clicked
* @param event - <zh/> | <en/> click event
*/
onClick?: (event: IPointerEvent) => void;
}
/**
@ -93,7 +107,9 @@ export interface ClickElementOptions extends BaseBehaviorOptions {
* <en/> When the mouse clicks on an element, you can activate the state of the element, such as selecting nodes or edges. When the degree is 1, clicking on a node will highlight the current node and its directly adjacent nodes and edges.
*/
export class ClickElement extends BaseBehavior<ClickElementOptions> {
private selectedElementIds: ID[] = [];
private selectedElementIds: Set<ID> = new Set<ID>();
private neighborSelectedElementIds: Set<ID> = new Set<ID>();
private shortcut: Shortcut;
@ -103,6 +119,7 @@ export class ClickElement extends BaseBehavior<ClickElementOptions> {
multiple: false,
trigger: ['shift'],
selectedState: 'selected',
neighborSelectedState: 'selected',
unselectedState: undefined,
degree: 0,
};
@ -126,50 +143,77 @@ export class ClickElement extends BaseBehavior<ClickElementOptions> {
if (!this.validate(event)) return;
this.updateElementsState(event, false);
this.updateElementsState(event, true);
this.options.onClick?.(event);
};
private onClickCanvas = (event: IPointerEvent) => {
if (!this.validate(event)) return;
this.updateElementsState(event, false);
this.selectedElementIds = [];
this.selectedElementIds.clear();
this.neighborSelectedElementIds.clear();
this.options.onClick?.(event);
};
private updateElementsState = (event: IPointerEvent, add: boolean) => {
if (!this.options.selectedState && !this.options.unselectedState) return;
const { graph } = this.context;
const { targetType, target } = event as { targetType: ElementType; target: Element };
const { target } = event as { target: Element };
if (add) {
// 如果当前元素已经被选中,则取消选中 | If the current element is already selected, deselect it
if (this.selectedElementIds.includes(target.id)) {
this.selectedElementIds = this.selectedElementIds.filter((id) => id !== target.id);
if (this.selectedElementIds.has(target.id)) {
this.selectedElementIds.delete(target.id);
} else {
const selectedElementIds = getElementNthDegreeIds(graph, targetType, target.id, this.options.degree);
const isMultiple = this.options.multiple && this.shortcut.match(this.options.trigger);
if (!isMultiple) {
this.selectedElementIds = selectedElementIds;
} else {
this.selectedElementIds.push(...selectedElementIds);
}
if (!isMultiple) this.selectedElementIds.clear();
this.selectedElementIds.add(target.id);
this.updateNeighborSelectedElementIds(event);
}
}
if (!this.selectedElementIds.length) return;
if (!this.selectedElementIds.size) return;
const states: Record<ID, State[]> = {};
if (this.options.selectedState) {
Object.assign(states, this.getElementsState(this.selectedElementIds, this.options.selectedState, add));
Object.assign(
states,
this.getElementsState(Array.from(this.selectedElementIds), this.options.selectedState, add),
);
}
if (this.options.neighborSelectedState && this.neighborSelectedElementIds.size > 0) {
Object.assign(
states,
this.getElementsState(Array.from(this.neighborSelectedElementIds), this.options.neighborSelectedState, add),
);
}
if (this.options.unselectedState) {
const inactiveIds = idsOf(graph.getData(), true).filter((id) => !this.selectedElementIds.includes(id));
const inactiveIds = idsOf(graph.getData(), true).filter(
(id) => !this.selectedElementIds.has(id) && !this.neighborSelectedElementIds.has(id),
);
Object.assign(states, this.getElementsState(inactiveIds, this.options.unselectedState, add));
}
graph.setElementState(states, this.options.animation);
};
private updateNeighborSelectedElementIds = (event: IPointerEvent) => {
this.neighborSelectedElementIds.clear();
const degree = isFunction(this.options.degree) ? this.options.degree(event) : this.options.degree;
if (degree) {
const { targetType } = event as { targetType: ElementType };
this.selectedElementIds.forEach((id) => {
const neighborIds = getElementNthDegreeIds(this.context.graph, targetType, id, degree);
this.neighborSelectedElementIds = new Set(
[...this.neighborSelectedElementIds, ...neighborIds].filter((id) => !this.selectedElementIds.has(id)),
);
});
}
};
private getElementsState = (ids: ID[], state: State, add: boolean) => {
const { graph } = this.context;
const states: Record<ID, State[]> = {};