Node drag events are not firing

[LiveDuo]

The following events are firing nodesUpdated, linksUpdated, offsetUpdated, gridUpdated, zoomUpdated.

In a similar manner, gridUpdated is expected to fire when a node is being dragged around the canvas but it doesn't. It seems that no event is capturing dragging actions.

Has anyone experienced this before? Is it the expected behavior?

    const listeners = {
      nodesUpdated: (e) => {
        console.log('nodesUpdated')
      },
      linksUpdated: (e) => {
        console.log('linksUpdated')
      },
      offsetUpdated: (e) => {
        console.log('offsetUpdated')
      },
      gridUpdated: (e) => {
        console.log('gridUpdated')
      },
      zoomUpdated: (e) => {
        console.log('zoomUpdated')
      },
    }
    engine.getModel().registerListener(listeners)

[renato-bohler]

Apparently, gridUpdated is fired when the grid size is changed:

https://github.com/projectstorm/react-diagrams/blob/4a57ecdc97d319986f12cb8e84112e2d3cd5f946/packages/react-canvas-core/src/entities/canvas/CanvasModel.ts#L94-L97

If you want to fire an event when a node is moved, you'll have to implement your MoveItemsState and fire the event on MOUSE_UP. Something like that:

export class MoveItemsState<E extends CanvasEngine = CanvasEngine> extends AbstractDisplacementState<E> {
  // ...

  constructor() {
    super({
      name: 'move-items'
    });

    this.registerAction(
      new Action({
        type: InputType.MOUSE_DOWN,
        fire: (event: ActionEvent<React.MouseEvent>) => {
          this.element = this.engine.getActionEventBus().getModelForEvent(event);
          if (!this.element.isSelected()) {
            this.engine.getModel().clearSelection();
          }
          this.element.setSelected(true);
          this.engine.repaintCanvas();
        }
      })
    );

    this.registerAction(
      new Action({
        type: InputType.MOUSE_UP,
        fire: () => {
          // Add this:
          this.engine.getModel().fireEvent({ node: this.element }, 'nodeMoved');
        }
      })
    );
  }

  // ...
}

[mkellogg91]

@renato-bohler is there a listener specifically for "selected" or something? trying to determine selected without looping through the entire list of nodes and checking their options.selected property on each one. It appears that nodesUpdated doesn't fire when a node is selected

[renato-bohler]

Hmm I'm not sure, but I haven't seem any listener specific to selection

[767746649zyy]

你可以自定义node，在node 上添加onMouseUp事件函数，然后再fire，自定义node <div onMouseUp={handleUp} onMouseDown={handleDown} > 事件 `

  const handleDown = (event) => {
    const point = engine?.getRelativeMousePoint(event);
    positionRef.current.x = point.x;
    positionRef.current.y = point.y;
    positionRef.current.temp = new Date().valueOf();
  };

  const handleUp = (event) => {
    const point = engine?.getRelativeMousePoint(event);
    if (
      new Date().valueOf() - positionRef.current.temp > 200 &&
      positionRef.current.x !== point.x &&
      positionRef.current.y !== point.y
    ) {
      engine.getModel().fireEvent({}, 'nodeUp');
    }
  };

注册的事件监听函数 model.registerListener({ nodeUp: (event: any) => { console.log('node Up----'); // do some thing }, })