Tap and Drop Picture to Center

GoJS
1

I am using the html btn to drop an image in the center of canvas, my nodeTemplate is

diagram.nodeTemplateMap.add(
“BackgroundImage”, // Background Image Node
$(
go.Node,
“Auto”,
{
locationSpot: go.Spot.Center,
selectable: false,
pickable: false,
},
$(
go.Panel,
“Horizontal”,
{},
$(
go.Picture,
“”,
{
source: “”,
},
new go.Binding(“source”, “source”)
)
),
$(go.Shape, “rectangle”, { fill: “yellow” })
)
);

var _getBackgroundImageDefinition = function () {
return {
source:
“https://upload.wikimedia.org/wikipedia/commons/9/9a/Sample_Floorplan.jpg”,
category: “BackgroundImage”,
};
};

document.getElementById(“dropPicture”).addEventListener(“click”, (e) => {
console.log("clicked dropPicture in the menu >>> ");
var nodeDefinition = _getBackgroundImageDefinition();
_addNodeToDiagram(nodeDefinition);
});

diag.model.addNodeData(nodeDefinition);

gojs
gojs1846×865 92.9 KB

the added image is been added in center but from its top corner, how can i get it added from it’s center to the center of canvas?

2

Please format your code so that it is legible. Surround it with lines consisting only of triple-backquote.

Did you assign its location to myDiagram.viewportBounds.center?

3

I found the solution, the error was with not binding the node location.
working as expected! Thanks walter :D