Questions about mouse's behaviors

GoJS
1

Hi , i have some questions about mouse 's behaviors

  1. How can i set the left mouse to drag and select with delay =0 and the the right mouse to move the canvas around?

  2. Can i set the behaviors on the touch pad like two-finger scrolling to move the canvas horizontally or vertically?

  3. I’m dragging a link from a port on a node to connect it to the port on the other node, but i drop the link in the diagram before i connect to the other node, can i catch that drop event with the info which node i’m dragging from?

THanks

2
  1. If you set
    myDiagram.toolManager.dragSelectingTool.delay = 0;
    I think that will cause all background drags to start the DragSelectingTool instead of allowing the PanningTool to run.

To get the PanningTool to start on a right mouse button event, you will need to override PanningTool.canStart method. I haven’t tried this, but it ought to look something like:

[code]function CustomPanningTool() {
go.PanningTool.call(this);
}
go.Diagram.inherit(CustomPanningTool, go.PanningTool);

CustomPanningTool.prototype.canStart = function() {
if (!this.isEnabled) return false;
var diagram = this.diagram;
if (diagram === null) return false;
if (!diagram.allowHorizontalScroll && !diagram.allowVerticalScroll) return false;
// require right button & that it has moved far enough away from the mouse down point, so it isn’t a click
// CHANGED to check InputEvent.right INSTEAD OF InputEvent.left
if (!diagram.lastInput.right) return false;
// don’t include the following check when this tool is running modally
if (diagram.currentTool !== this) {
// mouse needs to have moved from the mouse-down point
if (!this.isBeyondDragSize()) return false;
}
return true;
};[/code]
Then install the new tool by:
myDiagram.toolManager.panningTool = new CustomPanningTool();

  1. I don’t know what events, if any, that DOM elements will get. It probably depends on the hardware and on the browser. If it’s at all possible, you can implement it yourself, resulting in changes to Diagram.position.

  2. I’m not sure about this. You’ll need to override LinkingTool.doMouseUp. (Define your CustomLinkingTool just like the CustomPanningTool, above.) Then do something like:

CustomLinkingTool.prototype.doMouseUp = function() { if (this.isActive && this.findTargetPort(this.isForwards) === null) { ... do what you want on failure to link ... } else { go.LinkingTool.prototype.doMouseUp.call(this); } };

3

thanks that helps

4

I also think the panning is better with the right mouse button. I have used the following method and it also works.

myDiagram.toolManager.dragSelectingTool.delay = 0;<br /><br />$("#modelDiv").mousedown(modelMouseDown);<br />$("#modelDiv").mouseup(modelMouseUp);<br />$("#modelDiv").mousemove(modelMouseMove);<br />$("#modelDiv").mouseleave(modelMouseLeave);<br /><br />function modelMouseDown(e) {<br /> if (e.which && e.which == 3) {<br /> myDiagram.toolManager.panningTool.doActivate();<br /> }<br />}<br />function modelMouseUp(e) {<br /> if (e.which && e.which == 3) {<br /> myDiagram.toolManager.panningTool.doDeactivate();<br /> }<br />}<br />function modelMouseMove(e) {<br /> myDiagram.toolManager.panningTool.doMouseMove();<br />}<br />function modelMouseLeave(e) {<br /> myDiagram.toolManager.panningTool.doDeactivate();<br />}<br />

5

That is clever. If users cannot use right mouse button behaviors for anything else such as context menus, I guess that will work.

But I suspect it won’t work on tablets.

6

Oh yep. I hadn’t though about tablets. That’s a really important point…

I think the Right-Mouse to pan the background stems from Computer Games and feels natural to me but maybe not everyone.

Interestingly though… The jQuery mouseDown/Up/Move approach doesn’t seem to have any effect on the contextClick events, they still fire off ok…
myDiagram.nodeTemplate = $gojs(<br /> go.Node,<br /> "Vertical",<br /> { contextClick: showNodeContext }<br />);<br /><br />// Add event listeners to the diagram<br />myDiagram.addDiagramListener("BackgroundContextClicked",showDiagramContext);<br />myDiagram.addDiagramListener("SelectionDeleting",modelSelectionDeleting);<br />myDiagram.addDiagramListener("LinkDrawn",modelLinkDrawn);<br />myDiagram.addDiagramListener("LinkRelinked",modelLinkRelinked);<br />$("#modelDiv").mousedown(modelMouseDown);<br />$("#modelDiv").mouseup(modelMouseUp);<br />$("#modelDiv").mousemove(modelMouseMove);<br />$("#modelDiv").mouseleave(modelMouseLeave);<br />