Hi, i have a function calling addNodeToDiagram() which is adding node definition to diagram canvas, i want to have some offset between previously added node and new node added to diagram.
I’m assuming there is no Diagram.layout that is messing up the node arrangement that you want. I’m also assuming you are keeping track of where the last node was placed.
Is there a Binding for the Node’s location or position property? If so, set the corresponding data property on the node data object that you are adding to the model.
If not, do something like:
const newdata = { ... };
model.addNodeData(newdata);
const newnode = diagram.findNodeForData(newdata);
if (newnode) newnode.position = ...;
what do you mean by setting corresponding data property on the node data object, I do have position and location binding for the node.
also,
data = { … };
model.addNodeData(data);
const node = diagram.findNodesByExample({ category: “SpaceObject” });
if (node) node.position = diagram.viewportBounds.Center;
it is adding node to the center of canvas continuously, what shall i use instead of diagram.viewportBounds.Center;
I am able to apply offset while copy pasting node.
Your node template should not have two Bindings for the Node’s location or position. Those might conflict with each other.
Diagram.findNodesByExample returns an Iterator, not a Node. Diagram | GoJS API
What I was suggesting was that if you have a Binding like:
new go.Binding("location", "loc", go.Point.parse)
Then you could do:
const p = ...; // desired location for new node
model.addNodeData({ . . ., loc: go.Point.stringify(p) });
maybe this will always put the node on same location again and again, what i am looking for is when clicking a button node is added to center of canvas now clicking the button again it will set the node little away from center so that multiple nodes doesnot overlap each other. just similar to “commandHandler.copiesTree”.
Just make sure that the location point is slightly offset from the previous location that you specified.
I am not specifying any location manually, it is taking the location from
if (node) node.position = diagram.viewportBounds.Center;
node template:
diagram.nodeTemplateMap.add(
'SpaceObject',
this.$(
go.Node,
'Spot',
{
locationSpot: go.Spot.Center,
resizable: true,
resizeObjectName: 'SPACE',
zOrder: 0,
groupable: false,
},
new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(
go.Point.stringify
),
this.$(
go.Panel,
'Spot',
{},
this.$(
go.Shape,
'RoundedRectangle',
{
name: 'SPACE',
stroke: '#C4C7CB',
strokeWidth: 2,
strokeDashArray: [8, 4],
fill: 'Transparent',
desiredSize: new go.Size(360, 700),
stretch: go.GraphObject.Horizontal,
},
new go.Binding('desiredSize', 'size', go.Size.parse).makeTwoWay(
go.Size.stringify
)
)
),
this.$(
go.Panel,
'Auto',
{ alignment: go.Spot.TopLeft, alignmentFocus: go.Spot.BottomLeft },
this.$(
go.TextBlock,
{
text: 'Space',
background: '#E7EAEC',
font: 'bold 12pt Inter, sans-serif',
stroke: 'Black',
editable: true,
},
new go.Binding('text', 'spaceText').makeTwoWay(go.Point.stringify)
)
)
)
);
function:
DropSpaceNode() {
this.diagram.commit((diag: any) => {
const data = {
category: 'SpaceObject',
spaceText: 'Space',
};
diag.model.addNodeData(data);
const node = diag.findNodeForData(data);
if (node) node.location = diag.viewportBounds.center;
});
const node = _that.diagram.findNodesByExample({ category: 'SpaceObject' });
if (node) node.position = _that.diagram.viewportBounds.Center;
this.diagram.requestUpdate();
}
The value of diag.viewportBounds.center is probably the same point each time, so you need to calculate what point you want to use instead.
Remove these two lines:
const node = _that.diagram.findNodesByExample({ category: 'SpaceObject' });
if (node) node.position = _that.diagram.viewportBounds.Center;
Because you are performing a transaction, you don’t need to call requestUpdate.
Okay! Thanks a lot Walter