GOJS template with triangle image with text on top left

GoJS
#1

I need to show triangle shape with multiple text on top left of shape.
Can you help me to achieve same.
I am able to create something like shown on code pen -
[https://codepen.io/rajeshpatil74/pen/qBNOYmm]

  • What i needed is the triangle to be near to the border of circle and stay on border whenever shape is resized.
  • The various text in the triangle should fit within the triangle (it ok if triangle gets resized automatically)

Something like below -

image

Make adorments always visible
#2

Does this do what you want?

    myDiagram.nodeTemplate =
      $(go.Node, "Spot",
        $(go.Shape, "Circle", { fill: "white", width: 200, height: 200 },
          new go.Binding("fill", "color")),
        $(go.Panel, "Auto",
          { alignment: new go.Spot(0.2, 0.2), alignmentFocus: go.Spot.BottomRight },
          $(go.Shape, "Triangle", { fill: "white" }),
          $(go.TextBlock, { textAlign: "center" },
            new go.Binding("text"))
        )
      );

image
image882×745 44.8 KB

#3

Yes. Walter
This one is the expected.
I modified my code pen to support itempanel for same.
Now when the node is resized, triangle get shifted inside the circle (depending on the site of circle).

image
image1397×781 45.5 KB

In bigger circle, it goes inside.
How i can make it on fixed position. ?

#4

You need to have the same structure as the example I just gave you.

Panel, "Spot"
    Shape, "Circle"
    Panel, "Auto", alignment
        Shape, "Triangle"
        TextBlock

The Circle Shape is what may change size, so you can replace that with an arbitrarily complicated Panel that has a Circle Shape occupying its full width and height.

#5

Walter, i am not able to get this working.
Can you share what i need to do on my code pen. ( I am using a groupTemplate)

#6 
    var TLspot = new go.Spot((1-Math.sin(Math.PI/4))/2, (1-Math.sin(Math.PI/4))/2);
    myDiagram.nodeTemplate =
      $(go.Node, "Spot",
        { 
          selectionObjectName: "SHAPE",
          resizable: true, resizeObjectName: "SHAPE"
        },
        $(go.Shape, "Circle",
          { fill: "white", width: 200, height: 200, name: "SHAPE" },
          new go.Binding("fill", "color")),
        $(go.Panel, "Auto",
          { alignment: TLspot, alignmentFocus: new go.Spot(1, 1, -20, -20) },
          $(go.Shape, "Triangle", { fill: "white" }),
          $(go.TextBlock, { textAlign: "center" },
            new go.Binding("text"))
        )
      );