Customising cursor and link

GoJS
1

Hi, I am trying to implement a custom cursor for our error validation link - i.e. when a link is disabled, 1) the cursor should turn into this new red arrow cursor, 2) this red cross icon should appear at the end of the link connection line.
image
Do you guys have any suggestions for how we can do this? I have checked the gojs cursors and couldn’t find any ways to change the colour.

Additionally, when dragging the connection line there is this default blue colour, I have checked ways for binding and changing the line colour but colour changes were still not applied to when the line is being dragged.
image

Any suggestions would be greatly appreciated.

2

First, I suggest that you read: GoJS Tools -- Northwoods Software
That should answer your second question.

Second, about showing that white X on a red square only when a proposed link is invalid, you can customize the linking operation by setting LinkingTool.portTargeted. LinkingBaseTool | GoJS API

When your function receives null as the first (and second) arguments, change the temporaryToPort or temporaryFromPort to be that X-in-square, if it isn’t already. When the first argument is not null, change it back to what you want it to be when a link would be valid, if it isn’t already. By default the temporary ports are Shapes with a null fill and a magenta stroke with strokeWidth 2.

3

thanks! the first worked. For the temporary to and from ports, can the x-in-a-square be defined as an image or does this have to be a custom shape? I can’t seem to tweak the parameters to achieve the exact design

4

You can use any GraphObject. So, yes, you could use a Picture. Or you could use a Panel holding two Shapes.

5

Amazing, thank you!

6

Hi again, currently we are using linkingTool.linkValidation for validation and we need the x-in-a-square to display based on conditions inside this, but are having issues with creating the temporaryPort inside linkvalidation. Is there a good way to get the actual toPort data for LinkingTool.portTargeted instead? or if you have any other suggestion?

7

You receive both the Node and the port object as function arguments, so you can look at the Node.data or the data associated with the port, if that is you set up the node template. (I.e., if some panel has a binding of itemArray and its itemTemplate has a binding of portId.)

8

when I receive the Node and port object, this only contains the data for the current Node, but for the validation I need I would also require the data of the Node that I wish to link to, is this also possible? In linkingTool.linkValidation this was the toPort data

9

Look at the original… properties of the LinkingTool.