Using Linkable Ports with Dragging and Dropping Fields

GoJS
1

I have implemented the code where I can drag and drop fields from one node to another or within a node by following this: Dragging Fields Between Records. Also, I am able to drag ports from one field to another using fromLinkable and toLinkable; however, I can’t seem to figure out how to implement both at the same time. One thought is to just hold down a specific keyboard key (i.e. ctrl, cmd, or shift) to drag and drop and not hold down the keyboard key to connect ports. I have tried with no success. I thought about adding this keyboard shortcut somewhere in this code:

FieldDraggingTool.prototype.doActivate = function() { ... }

Any thoughts? I am open to other ideas as well.

Thanks in advance. Here is what the current diagram looks like.

image
image754×466 27.9 KB

2

Right idea – but you need to override Tool.canStart to look for the this.diagram.lastInput.shift keyboard modifier.

3

Thank you. This is definitely a step in the right direction. I am still having issues however. See my code below. How do I get canStart on the linkingTool to run normal if one of the three keys are detected. Right now, I am calling doActivate which has its own issues of freezing the diagram when trying to connect ports:

// checks if ctrl, meta, or shift key is pressed before starting field dragging
fileDiagram.toolManager.linkingTool.canStart = function() {
	if (!this.diagram.lastInput.shift && 
        !this.diagram.lastInput.meta && 
        !this.diagram.lastInput.control) fileDiagram.toolManager.linkingTool.doActivate();	
}
4

The purpose of canStart is only to return true or false.

Either return false or return calling the super method.

5

Wow. I way overthought that. Thank you. Here is what I did instead:

fileDiagram.toolManager.linkingTool.canStart = function() {
	return !this.diagram.lastInput.shift && 
           !this.diagram.lastInput.meta && 
           !this.diagram.lastInput.control ? go.LinkingTool.prototype.canStart.call(this) : false;
}