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

fix(plugins): fix error when members is empty

Browse Source
This commit is contained in:
Aaron 2024-06-05 15:09:01 +08:00
parent 472fa89920
commit 16e57566c6
3 changed files with 343 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

333
packages/g6/__tests__/snapshots/plugins/hull/plugin-hull/emptyMembers.svg Normal file
View File

@ -0,0 +1,333 @@
<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 transform="matrix(0.738356,0,0,0.738356,82.873116,59.688713)">
<g fill="none">
<g fill="none"/>
<g fill="none">
<g>
<path fill="rgba(173,216,230,1)" d="" class="key" fill-opacity="0.2" stroke="rgba(0,0,255,1)" stroke-opacity="0.2" stroke-width="5"/>
</g>
</g>
<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 242.70220904589752,336.4694653367003 L 412.3786745724615,414.7183207979798" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 242.70220904589752,336.4694653367003 L 412.3786745724615,414.7183207979798" 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 230.409790385153,303.27036594801456 L 322.7541257689082,101.63778043119126" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 230.409790385153,303.27036594801456 L 322.7541257689082,101.63778043119126" 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 196.05993400936816,318.79769201129295 L -1.6359604056209012,259.32138479322424" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 196.05993400936816,318.79769201129295 L -1.6359604056209012,259.32138479322424" 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 203.87196338673076,345.10200081146075 L 88.67682196796154,481.53879951312354" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 203.87196338673076,345.10200081146075 L 88.67682196796154,481.53879951312354" 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.30558581891265,347.76172230438976 L 295.3346355691993,459.2249795568192" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 221.74804755012565,350.9388117151259 L 233.95117146992462,525.0367129709244" 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 426.23806524940085,435.998110712254 L 427.8809673752996,539.500944643873" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 426.23806524940085,435.998110712254 L 427.8809673752996,539.500944643873" 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 439.84615384615387,415.2307692307692 L 539.0769230769231,373.88461538461536" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 439.84615384615387,415.2307692307692 L 539.0769230769231,373.88461538461536" 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 329.4136357452248,73.00570423560104 L 332.7931821273876,-49.50285211780052" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 329.4136357452248,73.00570423560104 L 332.7931821273876,-49.50285211780052" 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.03400458130506,78.95483810870303 L 207.98299770934747,-3.47741905435151" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 317.03400458130506,78.95483810870303 L 207.98299770934747,-3.47741905435151" 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.9470991960691,93.52072676511068 L 466.02645040196546,142.23963661744466" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 342.9470991960691,93.52072676511068 L 466.02645040196546,142.23963661744466" 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 341.92385936457174,80.38594332009727 L 451.53807031771413,15.807028339951366" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 341.92385936457174,80.38594332009727 L 451.53807031771413,15.807028339951366" 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 331.6637450917915,102.76158738367783 L 351.66812745410425,213.61920630816107" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 331.6637450917915,102.76158738367783 L 351.66812745410425,213.61920630816107" 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.84903262044696,92.97494946937412 L 208.07548368977652,130.51252526531295" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M 314.84903262044696,92.97494946937412 L 208.07548368977652,130.51252526531295" 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 -1.1200313241457156,253.10618580489128 L 86.56001566207286,241.94690709755437" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M -1.1200313241457156,253.10618580489128 L 86.56001566207286,241.94690709755437" 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 -21.552085358709142,241.06535439382804 L -64.22395732064543,133.96732280308598" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M -21.552085358709142,241.06535439382804 L -64.22395732064543,133.96732280308598" 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 -24.773813685114824,267.16635497669256 L -86.61309315744259,352.9168225116537" class="key" stroke-width="1" stroke="rgba(153,173,209,1)"/>
<path fill="none" d="M -24.773813685114824,267.16635497669256 L -86.61309315744259,352.9168225116537" class="key" stroke-width="3" stroke="transparent"/>
</g>
</g>
</g>
<g fill="none">
<g fill="none" x="220" y="326" transform="matrix(1,0,0,1,220,326)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="25"/>
</g>
<g fill="none" class="label" transform="matrix(1,0,0,1,0,27)">
<g>
<text fill="rgba(0,0,0,1)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" class="text" font-size="12" text-anchor="middle" fill-opacity="0.85" font-weight="400">
node0
</text>
</g>
</g>
</g>
<g fill="none" x="426" y="421" transform="matrix(1,0,0,1,426,421)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="15"/>
</g>
<g fill="none" class="label" transform="matrix(1,0,0,1,0,17)">
<g>
<text fill="rgba(0,0,0,1)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" class="text" font-size="12" text-anchor="middle" fill-opacity="0.85" font-weight="400">
node1
</text>
</g>
</g>
</g>
<g fill="none" x="329" y="88" transform="matrix(1,0,0,1,329,88)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="15"/>
</g>
<g fill="none" class="label" transform="matrix(1,0,0,1,0,17)">
<g>
<text fill="rgba(0,0,0,1)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" class="text" font-size="12" text-anchor="middle" fill-opacity="0.85" font-weight="400">
node2
</text>
</g>
</g>
</g>
<g fill="none" x="-16" y="255" transform="matrix(1,0,0,1,-16,255)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="15"/>
</g>
<g fill="none" class="label" transform="matrix(1,0,0,1,0,17)">
<g>
<text fill="rgba(0,0,0,1)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" class="text" font-size="12" text-anchor="middle" fill-opacity="0.85" font-weight="400">
node3
</text>
</g>
</g>
</g>
<g fill="none" x="79" y="493" transform="matrix(1,0,0,1,79,493)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="15"/>
</g>
<g fill="none" class="label" transform="matrix(1,0,0,1,0,17)">
<g>
<text fill="rgba(0,0,0,1)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" class="text" font-size="12" text-anchor="middle" fill-opacity="0.85" font-weight="400">
node4
</text>
</g>
</g>
</g>
<g fill="none" x="428" y="547" transform="matrix(1,0,0,1,428,547)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="7.5"/>
</g>
<g fill="none" class="label" transform="matrix(1,0,0,1,0,9.500000)">
<g>
<text fill="rgba(0,0,0,1)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" class="text" font-size="12" text-anchor="middle" fill-opacity="0.85" font-weight="400">
node6
</text>
</g>
</g>
</g>
<g fill="none" x="546" y="371" transform="matrix(1,0,0,1,546,371)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="7.5"/>
</g>
<g fill="none" class="label" transform="matrix(1,0,0,1,0,9.500000)">
<g>
<text fill="rgba(0,0,0,1)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" class="text" font-size="12" text-anchor="middle" fill-opacity="0.85" font-weight="400">
node7
</text>
</g>
</g>
</g>
<g fill="none" x="333" y="-57" transform="matrix(1,0,0,1,333,-57)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="7.5"/>
</g>
<g fill="none" class="label" transform="matrix(1,0,0,1,0,9.500000)">
<g>
<text fill="rgba(0,0,0,1)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" class="text" font-size="12" text-anchor="middle" fill-opacity="0.85" font-weight="400">
node8
</text>
</g>
</g>
</g>
<g fill="none" x="202" y="-8" transform="matrix(1,0,0,1,202,-8)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="7.5"/>
</g>
<g fill="none" class="label" transform="matrix(1,0,0,1,0,9.500000)">
<g>
<text fill="rgba(0,0,0,1)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" class="text" font-size="12" text-anchor="middle" fill-opacity="0.85" font-weight="400">
node9
</text>
</g>
</g>
</g>
<g fill="none" x="473" y="145" transform="matrix(1,0,0,1,473,145)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="7.5"/>
</g>
<g fill="none" class="label" transform="matrix(1,0,0,1,0,9.500000)">
<g>
<text fill="rgba(0,0,0,1)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" class="text" font-size="12" text-anchor="middle" fill-opacity="0.85" font-weight="400">
node10
</text>
</g>
</g>
</g>
<g fill="none" x="458" y="12" transform="matrix(1,0,0,1,458,12)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="7.5"/>
</g>
<g fill="none" class="label" transform="matrix(1,0,0,1,0,9.500000)">
<g>
<text fill="rgba(0,0,0,1)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" class="text" font-size="12" text-anchor="middle" fill-opacity="0.85" font-weight="400">
node11
</text>
</g>
</g>
</g>
<g fill="none" x="353" y="221" transform="matrix(1,0,0,1,353,221)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="7.5"/>
</g>
<g fill="none" class="label" transform="matrix(1,0,0,1,0,9.500000)">
<g>
<text fill="rgba(0,0,0,1)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" class="text" font-size="12" text-anchor="middle" fill-opacity="0.85" font-weight="400">
node12
</text>
</g>
</g>
</g>
<g fill="none" x="201" y="133" transform="matrix(1,0,0,1,201,133)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="7.5"/>
</g>
<g fill="none" class="label" transform="matrix(1,0,0,1,0,9.500000)">
<g>
<text fill="rgba(0,0,0,1)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" class="text" font-size="12" text-anchor="middle" fill-opacity="0.85" font-weight="400">
node13
</text>
</g>
</g>
</g>
<g fill="none" x="94" y="241" transform="matrix(1,0,0,1,94,241)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="7.5"/>
</g>
<g fill="none" class="label" transform="matrix(1,0,0,1,0,9.500000)">
<g>
<text fill="rgba(0,0,0,1)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" class="text" font-size="12" text-anchor="middle" fill-opacity="0.85" font-weight="400">
node14
</text>
</g>
</g>
</g>
<g fill="none" x="-67" y="127" transform="matrix(1,0,0,1,-67,127)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="7.5"/>
</g>
<g fill="none" class="label" transform="matrix(1,0,0,1,0,9.500000)">
<g>
<text fill="rgba(0,0,0,1)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" class="text" font-size="12" text-anchor="middle" fill-opacity="0.85" font-weight="400">
node15
</text>
</g>
</g>
</g>
<g fill="none" x="-91" y="359" transform="matrix(1,0,0,1,-91,359)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="7.5"/>
</g>
<g fill="none" class="label" transform="matrix(1,0,0,1,0,9.500000)">
<g>
<text fill="rgba(0,0,0,1)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" class="text" font-size="12" text-anchor="middle" fill-opacity="0.85" font-weight="400">
node16
</text>
</g>
</g>
</g>
<g fill="none" x="302.71799912589677" y="472.28200087410323" transform="matrix(1,0,0,1,302.717987,472.282013)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="15"/>
</g>
<g fill="none" class="label" transform="matrix(1,0,0,1,0,17)">
<g>
<text fill="rgba(0,0,0,1)" dominant-baseline="central" paint-order="stroke" dx="0.5" dy="11.5px" class="text" font-size="12" text-anchor="middle" fill-opacity="0.85" font-weight="400">
node5
</text>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

5
packages/g6/__tests__/unit/plugins/hull/plugin-hull.spec.ts
View File

@ -89,4 +89,9 @@ describe('plugin hull', () => {
graph.emit(NodeEvent.DRAG_END);
await expect(graph).toMatchSnapshot(__filename, 'updateMember__position');
});
it('empty members', async () => {
hull.updateMember([]);
await expect(graph).toMatchSnapshot(__filename, 'emptyMembers');
});
});

7
packages/g6/src/plugins/hull/index.ts
View File

@ -127,9 +127,12 @@ export class Hull extends BasePlugin<HullOptions> {
this.shape.update({ d: this.getHullPath(true) });
};
private getHullPath = (forceUpdate = false): PathArray => {
private getHullPath = (forceUpdate = false): string | PathArray => {
const { graph } = this.context;
const data = this.options.members.map((id) => graph.getNodeData(id));
const members = this.getMember();
if (members.length === 0) return '';
const data = members.map((id) => graph.getNodeData(id));
const vertices = hull(data.map(positionOf), this.options.concavity).slice(1).reverse() as Point[];
const hullMemberIds = vertices.flatMap((point) => data.filter((m) => isEqual(positionOf(m), point)).map(idOf));
if (isEqual(hullMemberIds, this.hullMemberIds) && !forceUpdate) return this.path;