Turn off canvas dragging with left click and mouse movement

[jmenzies12]

Hey there,

I have a prototype running using GLSP node server along with the GLSP VSCode integration (loosely based on a mix of the task and workflow examples).

I've noticed that holding down the left mouse button and moving the mouse, moves the canvas. Which is definitely nice. However, I've found that this can cause some problems when you are trying to connect links between nodes. If you click on a node after clicking the link item in the palette and then click on the target node either too fast or your hand moves at all, it no longer thinks you are selecting the target node for the link.

Is there anyway to turn this feature off? Be that all together or via a preference.

Cheers
Jonathan

[martin-fleck-at]

Hi Jonathan,

So if you want to get rid of the canvas moving altogether, you need to replace the current mouse listener with one that does nothing on drag using a module, i.e., something like this:

export const customModule = new FeatureModule((_bind, _unbind, _isBound, rebind) => {
    rebind(GLSPScrollMouseListener).to(MyScrollMouseListener);
});

@injectable()
export class MyScrollMouseListener extends GLSPScrollMouseListener {
    protected override dragCanvas(model: GModelRoot & Viewport, event: MouseEvent, lastScrollPosition: Point): Action[] {
        // do not drag canvas
        return [];
    }
}

That module needs to be integrated in the container creation of your GLSPStarter class. We of course could also adapt the behavior to only drag the canvas if a certain minimum threshold of movement is reached. However, what you are describing sounds like the sensitivity of the edge creation tool is too high, i.e., it detects a drag too quickly. We recently added this as a property to the mouse listener and it defaults to half the grid size but it can be adapted manually:

class WorkflowGLSPStarter extends GLSPStarter {
    createContainer(...containerConfiguration: ContainerConfiguration): Container {
        return createWorkflowDiagramContainer(...containerConfiguration, { replace: myEdgeCreationToolModule });
    }
}

export const myEdgeCreationToolModule = new FeatureModule(
    (bind, unbind, isBound, rebind) => {
        const context = { bind, unbind, isBound, rebind };
        bindAsService(context, TYPES.ITool, MyEdgeCreationTool);
        configureActionHandler(context, TriggerEdgeCreationAction.KIND, MyEdgeCreationTool);
        configureDanglingFeedbackEdge(context);
    },
    { featureId: edgeCreationToolModule.featureId }
);

@injectable()
export class MyEdgeCreationTool extends EdgeCreationTool {
    protected override creationListener(): void {
        const creationListener = new EdgeCreationToolMouseListener(
            this.triggerAction,
            this.actionDispatcher,
            this.typeHintProvider,
            this,
            20 // drag sensitivity <-- this right here
        );
        this.toDisposeOnDisable.push(creationListener, this.mouseTool.registerListener(creationListener));
    }
}

I agree that all those options require more adaptations that might be desirable so in the future we may want to think about adding custom options to each feature so they can be configured more easily. Nevertheless, I hope that helps you solve your issue.

[jmenzies12]

Hey Martin,

Thank you for the helpful suggestions. I tried the second one, to decrease the sensitivity to drag on edge creation and it worked quite well. I also managed to apply the same change to the node creation tool.

I agree being able to configure them more easily would be great, however as it stands it wasn't much work on our end to implement your solution. I will likely look into making these configurable by the user, since it can vary from person to person how sensitive they want things.

Cheers
Jonathan