react-diagrams icon indicating copy to clipboard operation
react-diagrams copied to clipboard

Can I change shift+(click | drag) selection action to ctrl+(click | drag)?

Open terryhahm opened this issue 3 years ago • 1 comments

I prefer to use "ctrl" key to select multiple objects, so I tried to search files in modules to change default "shift" key to "ctrl" key, and haven't figured out yet.

Is there an example of overriding default keydown action? or is there a specific file to look at in the module to do this?

Thanks

terryhahm avatar May 27 '21 05:05 terryhahm

I had the same problem, but I solved it with CustomSelectingState. The original SelectingState keys is already set to shift in the constructor, so you can't change it by setting.

  1. Create a CustomSelectingState
import {
    State,
    Action,
    InputType,
    ActionEvent,
    SelectionBoxState
} from '@projectstorm/react-canvas-core';

export class CustomSelectingState extends State {
    constructor() {
        super({
            name: 'selecting'
        });
        //use 'control' keys instead of 'shift'
        this.keys = ['control']
        // determine what was clicked on
        this.registerAction(
            new Action({
                type: InputType.MOUSE_DOWN,
                fire: (event: ActionEvent<any>) => {
                    const element = this.engine.getActionEventBus().getModelForEvent(event);
                    // go into a selection box on the canvas state
                    if (!element) {
                        this.transitionWithEvent(new SelectionBoxState(), event);
                    }
                    else {
                        element.setSelected(true);
                        this.engine.repaintCanvas();
                    }
                }
            })
        );
    };
}


  1. Replace it in your DefaultState
this.childStates = [new SelectingState()];   //old
this.childStates = [new CustomSelectingState()]; //new

LiKaiChang avatar Jan 13 '22 13:01 LiKaiChang