Issues applying location to diagram

@swang92 wrote:

Hello!

I am currently applying a location to a new node and I’ve tested and logged the locations and it is getting and saved to the diagram in location/loc but on the diagram it self, the node is not at the location set.

For testing purposes I set static locations with:

      diagram.model.addNodeData({
        location: new go.Point(100,0),
        text: event.dataTransfer.getData('text'),
      })

I’ve tried different points such as (0,100),(0,0),(50,50) and they all set the node on the bottom right of the diagram.

My diagram is defined as below:

const myDiagram = $(go.Diagram, this.el, { layout: (go.TreeLayout, {
angle: 0,
arrangement: go.TreeLayout.StyleLayered
}),
‘undoManager.isEnabled’: true,
‘linkingTool.isUnconnectedLinkValid’: true,
‘linkingTool.portGravity’: 20,
‘relinkingTool.isUnconnectedLinkValid’: true,
‘relinkingTool.portGravity’: 20,
‘relinkingTool.fromHandleArchetype’: (go.Shape, 'Diamond', { segmentIndex: 0, cursor: 'pointer', desiredSize: new go.Size(8, 8), fill: 'tomato', stroke: 'darkred' }), 'relinkingTool.toHandleArchetype': (go.Shape, ‘Diamond’, {
segmentIndex: -1,
cursor: ‘pointer’,
desiredSize: new go.Size(8, 8),
fill: ‘darkred’,
stroke: ‘tomato’
}),
‘linkReshapingTool.handleArchetype’: $(go.Shape, ‘Diamond’, {
desiredSize: new go.Size(7, 7),
fill: ‘lightblue’,
stroke: ‘deepskyblue’
}),
// Model ChangedEvents get passed up to component users
ModelChanged(e) {
self.$emit(‘model-changed’, e)
},
ChangedSelection(e) {
self.$emit(‘changed-selection’, e)
}
})

window.devicePixelRatio = myDiagram.computePixelRatio()

And the template I am currently just using the exact template from the Drag and Drop example:

myDiagram.nodeTemplate =
(go.Node, "Auto", { locationSpot: go.Spot.Center }, new go.Binding('location'), (go.Shape, “Rectangle”,
{ fill: ‘white’ },
// Shape.fill is bound to Node.data.color
new go.Binding(“fill”, “color”),
// this binding changes the Shape.fill when Node.isHighlighted changes value
new go.Binding(“fill”, “isHighlighted”, function(h, shape) {
if (h) return “red”;
var c = shape.part.data.color;
return c ? c : “white”;
}).ofObject()), // binding source is Node.isHighlighted
$(go.TextBlock,
{ margin: 3, font: “bold 16px sans-serif”, width: 140, textAlign: ‘center’ },
// TextBlock.text is bound to Node.data.key
new go.Binding(“text”))
);

I have checked that the points passed were valid, I have also tried doing a two way bind for location and loc using

new go.Binding(‘location’, ‘loc’, go.Point.parse).makeTwoWay(go.Point.stringify)

replacing new go.Binding(‘location’)

I have also read that layouts prevent setting exact locations on a post and tried removing the layout but no luck. Is there something else I am missing to enable locations or something I am doing wrong?

Posts: 2

Participants: 2

Read full topic