Need a Label which needs to be placed at the top center position on the load of canvas page

GoJS
1

Hi Team,

We are working on an application in which when we give “create diagram” it opens a canvas page with node palette at the left side. We need a label which should come at top center on load of the canvas page.
For that we tried hard coding position(loc : “0 0”) to the label in node data array. For whatever positions we give to the label it is visibly coming at the middle of the canvas page only.
We tried using intialContentAlignment, it works for label but when we drag and drop other nodes that will take that intialContentAlignment value and push the label downwards .

PFB code where we are hardcoding label position:

nodeData.push({
category:“Labels”,
color:“black”,
deletable:true,
desc:“Click here to add title”,
fill:“white”,
font:“normal 20pt Segoe UI, Arial, sans-serif”,
imagePath:“imgpath”,
isDragged:false,
key:“Label-1”,
label:“Click here to add title”,
size:“740 38”,
loc:“0 0”,
name:“Label”,
parent:“designTool”,
stroke:“black”,
text:“Label”,
zOrder:10
});
Thanks,
Praveen

2

There are a number of possibilities. Have you read GoJS Legends and Titles -- Northwoods Software ?

The choice depends on when and for how long you want that special label to be at the top center of the viewport.

3

in that link i saw one example in that the title is placed at required position but it is reference to other object but what i need is on open of the canvas only title should be present at required position

4

What do you mean on “open of canvas”? Do you mean when the HTML DIV and the Diagram have been initialized but you haven’t loaded any Model yet?

In that case you can add the title Part to the Diagram in an “InitialLayoutCompleted” DiagramEvent listener. You can compute the location for that title Part so that it is placed at the middle top of the viewport. The viewport’s bounds in document coordinates is given by Diagram.viewportBounds, but that value will only be useful to you in that “InitialLayoutCompleted” DiagramEvent or later.

Later when the user performs some command to load a model, the title Part will be removed and the model’s Nodes and Links will be created. That “InitialLayoutCompleted” DiagramEvent listener will execute again, running your code to add a title Part at the desired location.