diff --git a/packages/g6/__tests__/bugs/element-custom-state-switch.spec.ts b/packages/g6/__tests__/bugs/element-custom-state-switch.spec.ts
new file mode 100644
index 00000000000..c8468148bf0
--- /dev/null
+++ b/packages/g6/__tests__/bugs/element-custom-state-switch.spec.ts
@@ -0,0 +1,108 @@
+import { createGraph } from '@@/utils';
+import { CanvasEvent, CommonEvent, NodeEvent } from '@antv/g6';
+
+describe('bug: element-custom-state-switch', () => {
+ it('single select', async () => {
+ const graph = createGraph({
+ data: {
+ nodes: [{ id: 'node-1', states: ['important'], style: { x: 100, y: 100 } }],
+ },
+ node: {
+ style: {
+ fill: 'red',
+ },
+ state: {
+ important: {
+ fill: 'green',
+ },
+ },
+ },
+ behaviors: [
+ {
+ type: 'click-select',
+ },
+ ],
+ });
+
+ await graph.draw();
+
+ await expect(graph).toMatchSnapshot(__filename, 'single');
+
+ expect(graph.getElementState('node-1')).toEqual(['important']);
+
+ // click
+ graph.emit(NodeEvent.CLICK, { target: { id: 'node-1' }, targetType: 'node' });
+
+ expect(graph.getElementState('node-1')).toEqual(['important', 'selected']);
+
+ await expect(graph).toMatchSnapshot(__filename, 'single-select');
+
+ // click again
+ graph.emit(NodeEvent.CLICK, { target: { id: 'node-1' }, targetType: 'node' });
+
+ expect(graph.getElementState('node-1')).toEqual(['important']);
+
+ await expect(graph).toMatchSnapshot(__filename, 'single');
+ });
+
+ it('multiple select', async () => {
+ const graph = createGraph({
+ data: {
+ nodes: [
+ { id: 'node-1', states: ['important'], style: { x: 100, y: 100 } },
+ { id: 'node-2', style: { x: 150, y: 100 } },
+ ],
+ },
+ node: {
+ style: {
+ fill: 'red',
+ },
+ state: {
+ important: {
+ fill: 'green',
+ },
+ },
+ },
+ behaviors: [
+ {
+ type: 'click-select',
+ multiple: true,
+ },
+ ],
+ });
+
+ await graph.draw();
+
+ await expect(graph).toMatchSnapshot(__filename, 'multiple');
+
+ graph.emit(NodeEvent.CLICK, { target: { id: 'node-2' }, targetType: 'node' });
+ graph.emit(CommonEvent.KEY_DOWN, { key: 'shift' });
+ graph.emit(NodeEvent.CLICK, { target: { id: 'node-1' }, targetType: 'node' });
+ // graph.emit(CommonEvent.KEY_UP, { key: 'shift' });
+
+ expect(graph.getElementState('node-1')).toEqual(['important', 'selected']);
+ expect(graph.getElementState('node-2')).toEqual(['selected']);
+
+ await expect(graph).toMatchSnapshot(__filename, 'multiple-select');
+
+ // unselect
+ graph.emit(NodeEvent.CLICK, { target: { id: 'node-1' }, targetType: 'node' });
+ expect(graph.getElementState('node-1')).toEqual(['important']);
+ graph.emit(NodeEvent.CLICK, { target: { id: 'node-2' }, targetType: 'node' });
+ expect(graph.getElementState('node-2')).toEqual([]);
+
+ await expect(graph).toMatchSnapshot(__filename, 'multiple');
+
+ // reselect
+ graph.emit(NodeEvent.CLICK, { target: { id: 'node-1' }, targetType: 'node' });
+ graph.emit(NodeEvent.CLICK, { target: { id: 'node-2' }, targetType: 'node' });
+ graph.emit(CommonEvent.KEY_UP, { key: 'shift' });
+
+ // click canvas
+ graph.emit(CanvasEvent.CLICK);
+ expect(graph.getElementState('node-1')).toEqual(['important']);
+ expect(graph.getElementState('node-2')).toEqual([]);
+
+ await expect(graph).toMatchSnapshot(__filename, 'multiple-unselect');
+ });
+});
diff --git a/packages/g6/__tests__/snapshots/bugs/element-custom-state-switch/multiple-select.svg b/packages/g6/__tests__/snapshots/bugs/element-custom-state-switch/multiple-select.svg
new file mode 100644
index 00000000000..4d07f77f0af
--- /dev/null
+++ b/packages/g6/__tests__/snapshots/bugs/element-custom-state-switch/multiple-select.svg
@@ -0,0 +1,25 @@
+
\ No newline at end of file
diff --git a/packages/g6/__tests__/snapshots/bugs/element-custom-state-switch/multiple-unselect.svg b/packages/g6/__tests__/snapshots/bugs/element-custom-state-switch/multiple-unselect.svg
new file mode 100644
index 00000000000..23b1ea57d67
--- /dev/null
+++ b/packages/g6/__tests__/snapshots/bugs/element-custom-state-switch/multiple-unselect.svg
@@ -0,0 +1,19 @@
+
\ No newline at end of file
diff --git a/packages/g6/__tests__/snapshots/bugs/element-custom-state-switch/multiple.svg b/packages/g6/__tests__/snapshots/bugs/element-custom-state-switch/multiple.svg
new file mode 100644
index 00000000000..23b1ea57d67
--- /dev/null
+++ b/packages/g6/__tests__/snapshots/bugs/element-custom-state-switch/multiple.svg
@@ -0,0 +1,19 @@
+
\ No newline at end of file
diff --git a/packages/g6/__tests__/snapshots/bugs/element-custom-state-switch/single-select.svg b/packages/g6/__tests__/snapshots/bugs/element-custom-state-switch/single-select.svg
new file mode 100644
index 00000000000..f7e150ad005
--- /dev/null
+++ b/packages/g6/__tests__/snapshots/bugs/element-custom-state-switch/single-select.svg
@@ -0,0 +1,17 @@
+
\ No newline at end of file
diff --git a/packages/g6/__tests__/snapshots/bugs/element-custom-state-switch/single.svg b/packages/g6/__tests__/snapshots/bugs/element-custom-state-switch/single.svg
new file mode 100644
index 00000000000..9f90409d2c7
--- /dev/null
+++ b/packages/g6/__tests__/snapshots/bugs/element-custom-state-switch/single.svg
@@ -0,0 +1,14 @@
+
\ No newline at end of file
diff --git a/packages/g6/src/behaviors/click-select.ts b/packages/g6/src/behaviors/click-select.ts
index 74cffe95645..0c86c4779f4 100644
--- a/packages/g6/src/behaviors/click-select.ts
+++ b/packages/g6/src/behaviors/click-select.ts
@@ -188,7 +188,7 @@ export class ClickSelect extends BaseBehavior {
Object.assign(states, this.getClearStates(!!unselectedState));
const addState = (list: ID[], state: State) => {
list.forEach((id) => {
- if (!states[id]) states[id] = [];
+ if (!states[id]) states[id] = graph.getElementState(id);
states[id].push(state);
});
};
@@ -206,8 +206,7 @@ export class ClickSelect extends BaseBehavior {
if (type === 'select') {
const addState = (list: ID[], state: State) => {
list.forEach((id) => {
- const datum = graph.getElementData(id);
- const dataStatesSet = new Set(statesOf(datum));
+ const dataStatesSet = new Set(graph.getElementState(id));
dataStatesSet.add(state);
dataStatesSet.delete(unselectedState);
states[id] = Array.from(dataStatesSet);