Right Click causes MoveCanvasAction

[brian-eightsolutions]

If you right click on the canvas and bring up the context menu, a MoveCanvasAction is fired by startFiringAction. But if you close the context menu by clicking on the context menu itself, stopFiringAction is not called. This causes a state where the canvas moves with the mouse without clicking anything until the mouse is clicked again.

I don't think the MoveCanvasAction should be fired if it is a right click.

[tosiek88]

Hi can you reopen this issue, I was trying to track DiagramWidget.tsx but this file is anymore in repository. Behavior is still same, after right click all Nodes are moved.
Where logic about onMouseDown have been moved?

[msaglietto]

Hey I got the same issue adding a contextual menu on the canvas on 6.2.0... maybe this is a regression issue

The mouse down was moved to:
https://github.com/projectstorm/react-diagrams/blob/master/packages/react-canvas-core/src/entities/canvas/CanvasWidget.tsx#L86
or can be added to
https://github.com/projectstorm/react-diagrams/blob/master/packages/react-canvas-core/src/core-actions/ActionEventBus.ts#L51

But I think better to be added on the move action but don't know where is that

[alexandernst]

I fixed it with the following:

engine = createEngine();
engine.getStateMachine().pushState(new DiagramState());

and my DiagramState class:

import {
  SelectingState,
  State,
  Action,
  InputType,
  DragCanvasState,
} from '@projectstorm/react-canvas-core';

import {
  PortModel,
  DragNewLinkState,
  DragDiagramItemsState
} from '@projectstorm/react-diagrams-core';

export class DiagramState extends State {
  constructor() {
    super({
      name: 'default-diagrams'
    });
    this.childStates = [new SelectingState()];
    this.dragCanvas = new DragCanvasState();
    this.dragNewLink = new DragNewLinkState();
    this.dragItems = new DragDiagramItemsState();

    // determine what was clicked on
    this.registerAction(
      new Action({
        type: InputType.MOUSE_DOWN,
        fire: (event) => {
          if (event.event.button !== 0) {
            // we don't want to do anything on right-clicks
            return;
          } else {
            const element = this.engine.getActionEventBus().getModelForEvent(event);

            // the canvas was clicked on, transition to the dragging canvas state
            if (!element) {
                this.transitionWithEvent(this.dragCanvas, event);
            }
            // initiate dragging a new link
            else if (element instanceof PortModel) {
                this.transitionWithEvent(this.dragNewLink, event);
            }
            // move the items (and potentially link points)
            else {
                this.transitionWithEvent(this.dragItems, event);
            }
          }
        }
      })
    );
  }
}