How to construct complex node templates?

GoJS
21

For example, I want to move the cross 10x10 inside the second circle from top that is the center of crossing should be anywhere inside that outer circle. The same with aqua colored circle, which is inside the same outer circle.

22

As I mentioned in the very first reply, a Spot Panel will do what you want. The intro page goes into detail on how to use them, and many samples contain examples.

$(go.Panel, "Spot",
  $(go.Shape, "Circle",
    {
      fill: "white", stroke: "dimgray", strokeWidth: 2,
      width: 40, height: 40
    }
  ),
  $(go.Shape, "Circle",
    { fill: "aqua", width: 20, height: 20 } 
  ),
  $(go.Shape, "LineH", { width: 20, height: 1 }),
  $(go.Shape, "LineV", { width: 1, height: 20 })
)
23

This is my code mixed with your code:

var custom3Template =
    $(go.Node, "Vertical", nodeStyle(),
        $(go.Panel, "Spot",
            $(go.Shape, "Circle", shapeStyle1(),
            { fill: white }),
            $(go.Spot,
                $(go.Shape, "Circle", shapeStyle1(),
                { fill: blue, width: 20, height: 20 }))),
        $(go.Panel, "Spot",
            $(go.Shape, "Circle",
                {
                    fill: "white",
                    stroke: "dimgray",
                    strokeWidth: 2,
                    width: 40,
                    height: 40
                }
            ),
            $(go.Shape, "Circle",
                { fill: "aqua", width: 20, height: 20 }
            ),
            $(go.Shape, "LineH", { width: 20, height: 1 }),
            $(go.Shape, "LineV", { width: 1, height: 20 })),
        $(go.Shape, "Rectangle", shapeStyle4(),
            { fill: green }),
        $(go.Shape, "Rectangle", shapeStyle3(),
            { fill: dollarbill },
            { visible: true }),
        $(go.Shape, "Rectangle", shapeStyle5(),
            { fill: green }),
        $(go.Shape, "Rectangle", portStyle1(true),
            { portId: "" }),
        $(go.Shape, "Rectangle", portStyle2(true),
            { portId: "" })
    );

It doesn’t work, which means palette and diagram are empty.

24

Use go-debug.js to figure out what’s wrong.

25

The is code that works, but cross and circle are in center of outer circle:

var custom3Template =
    $(go.Node, "Vertical", nodeStyle(),
        $(go.Panel, "Spot",
            $(go.Shape, "Circle", shapeStyle1(),
            { fill: white }),
            $(go.Panel, "Spot",
                $(go.Shape, "Circle", shapeStyle1(),
                { fill: blue, width: 20, height: 20 }))),
        $(go.Panel, "Spot",
            $(go.Shape, "Circle",
                {
                    fill: "white",
                    stroke: "dimgray",
                    strokeWidth: 2,
                    width: 40,
                    height: 40
                }
            ),
            $(go.Shape, "Circle",
                { fill: "aqua", position: new go.Point(5, 5), width: 20, height: 20 }
            ),
            $(go.Shape, "LineH", { width: 20, height: 1 }),
            $(go.Shape, "LineV", { width: 1, height: 20 })),
        $(go.Shape, "Rectangle", shapeStyle4(),
            { fill: green }),
        $(go.Shape, "Rectangle", shapeStyle3(),
            { fill: dollarbill },
            { visible: true }),
        $(go.Shape, "Rectangle", shapeStyle5(),
            { fill: green }),
        $(go.Shape, "Rectangle", portStyle1(true),
            { portId: "" }),
        $(go.Shape, "Rectangle", portStyle2(true),
            { portId: "" })
    );

How to move the center of cross and circle?

26

Set the alignment on the aqua circle and each line. GoJS Panels -- Northwoods Software

27

It’s working now. Thanks a lot.