Insert shape in center of canvas with click of an HTML btn

GoJS
1

How can I insert a shape object in main canvas with click of an html button?

Also how I want to insert an shape object from pallet with button click.

2

Both of those can be accomplished with code like:

myDiagram.model.commit(m => {
    m.addNodeData({ . . . });
});

The exact properties you need to have on that node data object that you add to the model will depend on the template that is used to represent the node and the diagram properties. And in the case of inserting something from a Palette, that is likely to be a copy of the node data of an item in the palette’s model.

3

May I get to see an example where i can add an element in center of canvas with simple HTML bundle?

4

OK, I’ll assume that you normally have the user locate nodes manually by dragging them from a Palette onto the Diagram, and that you have not set Diagram.layout (i.e. there is no automatic layout that will re-arrange the nodes and links).

myDiagram.commit(diag => {
  const data = {};  // this might need more properties set -- depends on your node template!
  diag.model.addNodeData(data);
  const node = diag.findNodeForData(data);
  if (node) node.location = diag.viewportBounds.center;
});
5

Thanks a lot! it worked :)