Hi,
" To create a new link to another node, drag from the port (the edge of the Shape that is not behind the TextBlock) to any node, including itself."
This is what documentation says, is there anyway by which we can drag from any point on node to draw a new link even from text block?
And how can I change that pink border highlight to other color when drawing new link.
Basically, you’ll want to set fromLinkable and/or toLinkable to true on the whole Node. This assumes that you haven’t set portId on any other element of the node. But it does mean that by default users will not be able to drag the node, because a mouse-down-and-move will start to draw a new link from or to that node, rather than dragging the node.
To customize the LinkingTool, please read GoJS Tools -- Northwoods Software
Linking works well with textblock, I also have picture on node, there linking doesn’t work.
How are you defining your node template?
getNodeTemplate(): any {
return go.GraphObject.make(
go.Node,
'Auto',
{
fromLinkable: true,
toLinkable: true,
dragComputation: (part: go.Part, point: go.Point, gridpt: any) => this.nodeDragComputation(part, point, gridpt),
minSize: new go.Size(100, 50),
contextMenu: this.onCreateContextMenu(),
resizeObjectName: 'NodePanel',
zOrder: 2,
mouseDrop: this.mouseDropOnNode
},
new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
this.getShapeNodeTemplate(),
this.getPanelNodeTemplate(),
this.getDotsTextBlockNodeTemplate(),
this.getIconImplementationComponentNodeTemplate(),
);
}
getShapeNodeTemplate(): any {
return go.GraphObject.make(
go.Shape,
{
cursor: 'pointer',
fill: 'white',
portId: '',
stroke: '#000000',
strokeWidth: 1,
doubleClick: (event, object) => this.onDoubleClickShape(event, object),
},
new go.Binding('figure', 'shape'),
new go.Binding('geometryString', 'geometryString'),
new go.Binding('toSpot', 'type', (value: DiagramNodeType) => this.getNodeToSpot(value)),
new go.Binding('fill', 'fillColor'),
new go.Binding('stroke', 'borderColor'),
new go.Binding('strokeWidth', 'borderWidth'),
);
}
getPanelNodeTemplate(): any {
return go.GraphObject.make(
go.Panel,
'Table',
{
background: 'transparent',
margin: 6,
doubleClick: (event, object) => this.onDoubleClickTextBlock(event, object),
},
this.getNameTextBlockNodeTemplate(),
);
}
getDotsTextBlockNodeTemplate(): void {
return go.GraphObject.make(
go.TextBlock,
{
text: '...',
font: 'bold 12pt sans-serif',
alignment: go.Spot.TopCenter,
margin: new go.Margin(-6, 0, 0, 0),
},
new go.Binding('visible', 'hasMissingNodes'),
);
}
getIconImplementationComponentNodeTemplate(): any {
return go.GraphObject.make(
go.Picture,
{
width: 14,
height: 14,
alignment: go.Spot.TopLeft,
imageStretch: go.GraphObject.UniformToFill,
margin: 1,
doubleClick: (event, object) => this.onDoubleClickIconImplementationComponent(event, object),
},
new go.Binding('source', 'data', (value) => this.getIconImplementationComponent(value)),
{
toolTip: this.getToolTipIconImplementationComponentNodeTemplate(),
},
);
}
getToolTipIconImplementationComponentNodeTemplate(): any {
return go.GraphObject.make(
go.Adornment,
'Spot',
{ background: 'transparent' },
go.GraphObject.make(go.Placeholder, {
padding: 15,
}),
go.GraphObject.make(
go.TextBlock,
{
alignment: go.Spot.TopRight,
},
new go.Binding('text', 'data', (graphable) => this.getNameImplementationComponent(graphable)),
),
);
}
getNameTextBlockNodeTemplate(): any {
return go.GraphObject.make(
go.TextBlock,
{
// editable: true,
column: 0,
minSize: new go.Size(50, NaN),
maxSize: new go.Size(100, NaN),
font: '12px sans-serif',
textAlign: "center",
margin: new go.Margin(2, 15, 0, 12),
doubleClick: (event, object) => this.onDoubleClickTextBlock(event, object),
// textValidation: (block, oldString, newString) => isValidDiagramNodeText(newString),
// textEditor: this._customTextEditor,
},
new go.Binding('text').makeTwoWay(),
);
}
Basically, you’ll want to set fromLinkable and/or toLinkable to true on the whole Node. This assumes that you haven’t set portId on any other element of the node
But you are setting portId and various port-related properties on a Shape, not on the whole Node if you want the whole Node to act as the only and default port.
It works well with all those properties, on all text blocks within node expect for picture
getIconImplementationComponentNodeTemplate()
by removing code for tooltip added on picture, linking works perfect.
Issue is with “getToolTipIconImplementationComponentNodeTemplate()”
I can’t explain that. The code looks innocuous – you don’t set pickable to false, nor fromLinkable and toLinkable, so I don’t see why that 14x14 area would act any differently from any other element in the node.
Can’t we use tooltip and linking tool together?
The tooltip isn’t showing when the user can’t draw a new link from there, is it?
when tooltip shows up, user can’t draw a link
and when I remove the code for showing up tooltip it works perfect.
I am able to draw link from anywhere from the node, including picture, text block.
A tooltip, which is either an Adornment or some HTML, is not a Node, so of course the user cannot draw a link from a tooltip.
In the Image attached “abcd” is the tooltip which we see when we hover on picture in top left corner of the node.
If I try to draw a link from the picture(not tooltip “abcd”), it moves the node instead of drawing link.
That’s because the tooltip Adornment is still showing and covering the Picture.
Try not setting Adornment.background, so that there’s “nothing” there for the Adornment to respond to mouse events.
works when I don’t set any Adornment.background, Thanks for the quick solutions.