How to construct complex node templates?

GoJS
1

I understand that we can construct node templates vertically or horizontally. But what if need, for example, to draw cross in the middle of top circle?

The code is following:

var custom2Template =
  $(go.Node, "Vertical", nodeStyle(),
    $(go.Shape, "Circle", shapeStyle1(),
        { fill: white }),
    $(go.Shape, "Circle", shapeStyle1(),
        { fill: red, width: 20, 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: "" }),
    });
2

Wrap the cross and the circle in an Auto or Spot panel. GoJS Panels -- Northwoods Software.

3

I’ve already figured it out.

4

Excuse me, I have an additional question - is there a line graphical object in GoJS?

5

See LineH, LineV, etc. in the Shapes sample. GoJS Shapes

The intro page on Shapes also includes more info. GoJS Shapes -- Northwoods Software

6

I’m trying this:

$(go.Shape, "LineH",
    { fill: transparent, startX: 0, startY: 0, endX: 20, endY: 0 }),
$(go.Shape, "LineV",
    { fill: transparent, startX: 0, startY: 0, endX: 0, endY: 20 }))),

But, it doesn’t work.

7

Use width/height instead of setting startX, startY, endX, endY. Also, your fill values should be in quotes. In this case, there isn’t a fill on the line shapes anyways, so setting it won’t do anything.

eg.

$(go.Shape, "LineH",
  { width: 20 })
8

Thank you very much.

9

Excuse me. One more question - how to move nested object from center of Panel?

10

Assuming you’re using a Spot panel, set the alignment: GoJS Panels -- Northwoods Software.

11

I use Panel object and position property doesn’t work. The code looks as following:

var custom3Template =
    $(go.Node, "Vertical", nodeStyle(),
        $(go.Panel, "Auto",
            $(go.Shape, "Circle", shapeStyle1(),
            { fill: white }),
            $(go.Panel, "Auto",
                $(go.Shape, "Circle", shapeStyle1(),
                { fill: blue, width: 20, height: 20 }))),
        $(go.Panel, "Auto",
            $(go.Shape, "Circle", shapeStyle1(),
            { fill: white }),
            $(go.Panel, "Auto",
                $(go.Shape, "Circle", shapeStyle1(),
                    { fill: aqua, position: new go.Point(10, 10), width: 20, height: 20 }))),
                //$(go.Shape, "LineH",
                //    { fill: blue, width: 10 }),
                //$(go.Shape, "LineV",
                //    { fill: blue, height: 10 }))),
        $(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: "" })
    );
12

I already suggested you may want to use Spot panels and set the alignment property for the children. Maybe I’m not clear on what you are trying to achieve. Can you provide a sketch of the results you are looking for?

I think you would benefit a lot from reading the intro on Panels carefully, as you have a handful of errors in your template. Also, you should be using the debug version of the library, go-debug.js so you can see any errors or warnings in the console.

13

I’m trying to use your example with nested panels at this address: GoJS Nodes -- Northwoods Software

Could I use position property in that case?

14

If you provide us a mockup of what your nodes are meant to look like, we can help with the template. I doubt position is what you’re looking for.

15

I’ve discovered something in the meantime, but not sure if approach is right. Here’s the code of node’s template:

var custom3Template =
    $(go.Node, "Vertical", nodeStyle(),
        $(go.Panel,
            $(go.Shape, "Circle", shapeStyle1(),
            { fill: white }),
            $(go.Panel,
                $(go.Shape, "Circle", shapeStyle1(),
                { fill: blue, position: new go.Point(10, 15), width: 20, height: 20 }))),
        $(go.Panel, "Auto",
            $(go.Shape, "Circle", shapeStyle1(),
            { fill: white }),
            $(go.Panel,
                $(go.Shape, "Circle",
                    { fill: aqua, position: new go.Point(20, 20), width: 20, height: 20 }),
                $(go.Shape, "LineH",
                    { fill: blue, position: new go.Point(5, 0), width: 20 }),
                $(go.Shape, "LineV",
                    { fill: blue, position: new go.Point(0, 5), 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: "" })
    );

Here’s important to understand how to change in right way the position of nested elements in order to be able to draw another complex elements. For example, in this node sample I don’t understand why horizontal and vertical lines are not 20 and why circle doesn’t have full solid border.

The image is attached.

16

Because you are using an “Auto” Panel and setting its size, the panel is clipping its non-main elements to fit inside the main element. Use a “Spot” Panel instead. Or a “Position” Panel.

17

Ok. I wrote this:

var custom3Template =
    $(go.Node, "Vertical", nodeStyle(),
        $(go.Panel,
            $(go.Shape, "Circle", shapeStyle1(),
            { fill: white }),
            $(go.Panel,
                $(go.Shape, "Circle", shapeStyle1(),
                { fill: blue, position: new go.Point(10, 15), width: 20, height: 20 }))),
        $(go.Part, go.Panel.Position,
            $(go.Shape, "Circle", shapeStyle1(),
            { fill: white }),
            $(go.Panel,
                $(go.Shape, "Circle",
                    { fill: aqua, position: new go.Point(20, 20), width: 20, height: 20 }),
                $(go.Shape, "LineH",
                    { fill: blue, position: new go.Point(5, 0), width: 20 }),
                $(go.Shape, "LineV",
                    { fill: blue, position: new go.Point(0, 5), 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: "" })
    );

And everything disappeared from palette and diagram. What’s next?

18

Make sure you are using go-debug.js and always check the console output for any warnings or error messages.

19

You put a go.Part inside your node. It must be a go.Panel.

I still think if you gave us a mockup of what it’s meant to look like we could provide you a better explanation of how to do it.

20

Previously was go.Panel.