Manually controlling tool

Our app has a toolbar that isn’t part of GoJS. When the user clicks on a tool I want to manually force the diagram to use that tool until another tool is selected. This is what I’m trying and not having any luck:

diagram.currentTool = diagram.toolManager.linkingTool

I can click-drag from one node to another but nothing happens. The 2nd time I try it the first node is selected. What am I doing wrong?

Thanks

In GoJS one normally does not have explicit “modes”. The user can use any tool at any time. The actual tool that runs depends on what the ToolManager chooses depending on the circumstances – mostly what is at the mouse (or touch) down point or when first moving the mouse after a mouse down. Read more about this in the first part of Tools.

So first you have to make sure that the user can draw new links without going into a “link-drawing mode” by setting Diagram.currentTool. Can the user do that? If not, please read: Linking.

Hi Walter,

I’ll explain how our current Java app operates and hopefully you can give me direction on how to make the transfer to GoJS. I’ve gone through most examples and read a lot of the docs and API, but part of my problem is I’m trying to mirror how our current app works.

We have a toolbar that these actions can be selected:

Tools - selecting, moving, and zooming

Nodes - start, stop, activity, automated, template, etc. How these work is you select the node type and click on the diagram to create nodes. Once you click a node tool you can click multiple times in the diagram to create nodes.

Links - normal, 90 degree, and template. You select one of these tools then drag from one node to another to create a link. The type of link depends on the tool selected. In the diagram, different types of links will just have a different template.

So it sounds like selecting a tool and telling GoJS what mode to be in isn’t the way to go. It appears that tools and links above are best at letting GoJS automatically select the mode and I have an idea on how to do that from the examples.

Now the challenge is putting the different node types into the diagram. The examples show drag-n-drop from a palette to the diagram. Does a palette have to be used or can I drag from our existing toolbar (written in Ext JS)? Are there any other options from creating nodes other than using a palette? I’m not against using a palette just want to know all my options.

I appreciate any direction you can give while evaluating GoJS. I think it will fit all our needs and once I get past the learning curve, know we can use the cool features of it to improve upon our Java product.

Thanks!

http://gojs.net/latest/samples/basic.html shows the click-to-insert-a-node behavior, except that a double-click is required. You can modify that sample by adding:

"clickCreatingTool.isDoubleClick": false

to the initialization of the Diagram. You would also need to implement some code to set the

myDiagram.toolManager.clickCreatingTool.archetypeNodeData

property, which in the sample is set to a single JavaScript data object to be copied.

When the user chooses to create different kinds of nodes when they click, the action could just set one or more properties on the ClickCreatingTool.archetypeNodeData object, or replace the whole object by setting the ClickCreatingTool.archetypeNodeData property. A typical situation is where the app uses several different kinds of templates, so the choice of which node to create is determined by setting the category property on the ClickCreatingTool.archetypeNodeData object.

Yes, you can also support drag-and-drop from your toolbar. I’m not familiar with the toolbar in ExtJS, so I can’t help you there.

Walter - this is working great! Are there any downsides of using single click like some other events or tools won’t work? Since this will be an enhancement to our product I think letting GoJS operate using defaults settings might be best. The users will have a little learning curve but that’s OK.

No, there’s no significant “downside” of using the ClickCreatingTool with single-clicks. Tools shows the lists of tools that the ToolManager checks when looking for tools to run, and you can see that the ClickCreatingTool is only followed by the ClickSelectingTool. That leads me to believe that the only change in behavior is that when there are some selected Parts, the user won’t be able to click in the background in order to clear the selection, because that would create a new Node. If they have a keyboard they could hit the ESCape key or control click on selected Part(s) in order to deselect without doing anything else.

No reason to force them to learn new behavior unnecessarily, since they probably have enough to learn anyway.