Add text/label inside a shape

GoJS
#1

How to add a text/label inside a shape?

@walter, I have modified the “myRowHeaders” from the sample : Basic Day/Hour Infinite Timeline to the following:

Now, i wanted to have some texts inside the 2 shapes: “Square” and “Rectangle”.

myRowHeaders =
   $(go.Diagram, "myRowHeadersDiv",
      {
		nodeTemplate:
          $(go.Node, "Auto",				            		  
        	...
    		$(go.Panel, "Horizontal",
    			{ alignment: go.Spot.Left},
				$(go.Shape, "Square",
					{
						...
						click: function (e, shape) {
							...
						}
					}
				),
				
				$(go.Panel, "Vertical",
					...
					$(go.TextBlock,
						...
					),
					$(go.Shape, "Rectangle",
						{
							click: function (e, shape) {
								...
							}	  	    				
						},  
					)			
				)
    		)
    	)
   });

How this can be achieved?

Thanks.

#2

A Vertical Panel will not position either element within the other.

I really do not know what you want. Could you provide some screenshots or sketches?

#3

I am targeting to create the following diagram:

Till now, i am able to create this diagram, but not able to add text as shown in next diagram:

Shapes in red circle need to have some text inside them, like this:

"+" in “Square” shape
"Show" in “Rectangle” shape

#4

One normally implements such borders or containers around an object by using an “Auto” Panel. GoJS Panels -- Northwoods Software

#5

Using this way, i.e, by adding “textblock”, “Shape” is not “clickable” on the “text area”

#6

I’m thinking you want it to be something like:

Node, "Auto",
  Shape,
  Panel, "Vertical",
    TextBlock, "Activity-Task-13",
    Panel, "Auto",
      Shape,
      TextBlock, "show"
#7

Yeah, but, Using this way, text is below the shape.

#8

??? Try it the way I suggest.

#9

Yes, Text is inside the Shape…

But, Using this way, i.e, by adding “textblock”, “Shape” is not “clickable” on the “text area” inside the shape…

#10

Again I’m not sure what you want, but I am guessing that you will want to move the GraphObject.click event handler from the Shape to the enclosing “Auto” Panel.

That is basically how “Button” is defined: https://gojs.net/latest/extensions/Buttons.js

#11

Yes, i want to do something like that…
let me try, if i can use button here…
Thanks.

#12

“Button” works for me…
Punching myself… i missed using it… :(
But, now job done… thanks a lot…! :)