GoJS nested shape positioning

Question

I am trying to draw nested shapes with GoJS library. For now I have rectangle with a single line inside. Whole Object is a panel with two shapes, a rectangle and a minus line. At this point it is fine, MinusLine is rendered in the center of a rectangle.

What I want to achieve is to position/change location of a MinusLine from top to bottom and etc. based on some conditions that I got however I cannot move it in any way. For example move perfectly centered YELLOW line to position of RED or BROWN

Code looks like:

GO(go.Node, "Table",
    {
        layerName: "AfterForeground",
        movable: false,
        locationObjectName: "BODY",
        locationSpot: go.Spot.parse("0.5 0 0 0 "),
        selectionObjectName: "MAIN_SHAPE",
        selectionObjectName: "MAIN_SHAPE",
    },
    new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),

    GO(go.Panel,go.Panel.Position, "Auto", {
        row: 1,
        column: 1,
        name: "BODY",
        stretch: go.GraphObject.Fill
    },
        GO(go.Shape, "Rectangle", {
            fill: wellColor,
            name: "MAIN_SHAPE",
            stroke: myColor,
            strokeWidth: 0.4,

        }, new go.Binding("fill", "wellColor"),
        ) , new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify)
        ,GO(go.Shape, "MinusLine", {}), // <-- Move this YELLOW line vertically somehere inside Rectangle 
    )

score 0 · Accepted Answer · answered Oct 15 '20 at 12:54

Is a Table panel (for the Node's Panel type) really what you want?

So far you have a Table panel that has a single cell, and by default all objects in the cell will sit in the center. You can easily move them by adding the alignment property to the elements.

Here's an example of your table, with two sub-panels added to the Node, one aligned to the top, one aligned to the center with a y offset of 30: https://codepen.io/simonsarris/pen/zYBrLaX?editors=1011

There are other positioning examples for Table panel, here:

https://gojs.net/latest/intro/tablePanels.html

https://gojs.net/latest/intro/tablePanels.html#StretchAndAlignmente

Note that as you have defined the template, the Shape takes up the entire space of the table, with a minus line in the center of the shape. This is probably not what you want. I put a width and height on the Shape and a (bigger) height on the table to make the demonstration legibile.

GoJS nested shape positioning

1 Answers1