[Bug]: canvas:click will reset all elements's state

[mahoushoujoarale]

Describe the bug / 问题描述

https://github.com/antvis/G6/blob/v5/packages/g6/src/behaviors/click-select.ts

canvas:click will reset all elements's state because of this.getClearStates()

if (type === 'select') {
        Object.assign(states, this.getClearStates(!!unselectedState));
        const addState = (list: ID[], state: State) => {
          list.forEach((id) => {
            if (!states[id]) states[id] = graph.getElementState(id);
            states[id].push(state);
          });
        };
        addState(click, selectState);
        addState(neighbor, neighborState);
        if (unselectedState) {
          Object.keys(states).forEach((id) => {
            if (!click.includes(id) && !neighbor.includes(id)) states[id].push(unselectedState);
          });
        }
      } else Object.assign(states, this.getClearStates());

see https://github.com/antvis/G6/blob/v5/packages/g6/src/behaviors/click-select.ts

it's supposed to be like

else {
        const targetState = states[target.id];
        states[target.id] = targetState.filter((s) => s !== selectState && s !== neighborState);
        if (!targetState.includes(unselectedState)) states[target.id].push(unselectedState);
        neighbor.forEach((id) => {
          states[id] = states[id].filter((s) => s !== neighborState);
          if (!states[id].includes(selectState)) states[id].push(unselectedState);
        });
      }

in the next few lines

@Aarebecca

Reproduction link / 复现链接

No response

Steps to Reproduce the Bug or Issue / 重现步骤

No response

Version / 版本

🆕 5.x

OS / 操作系统

• macOS
• Windows
• Linux
• Others / 其他

Browser / 浏览器

• Chrome
• Edge
• Firefox
• Safari (Limited support / 有限支持)
• IE (Nonsupport / 不支持)
• Others / 其他

[yvonneyx]

Thanks for pointing this out — it does look like a bug. Would you be interested in submitting a PR to help fix it?

[mahoushoujoarale]

Sorry, guys, I've made a mistake, it's nothing to do with click-select but brush-select. brush-select listens on canvas:click, and clear all states of all elements. see https://github.com/antvis/G6/blob/v5/packages/g6/src/behaviors/brush-select.ts

graph.on(CanvasEvent.CLICK, this.clearStates);

  protected clearStates() {
    if (this.endPoint) return;

    this.clearElementsStates();
  }

protected clearElementsStates() {
    const { graph } = this.context;
    const states = Object.values(graph.getData()).reduce((acc, data) => {
      return Object.assign(
        {},
        acc,
        data.reduce((acc: Record<ID, []>, datum: ElementDatum) => {
          acc[idOf(datum)] = [];
          return acc;
        }, {}),
      );
    }, {});

    graph.setElementState(states, this.options.animation);
  }

@yvonneyx

[Rey-Wang]

opened a PR for this