GoJS Panel Alignment

24 views Asked by At

I am having a tough time building out a panel that I need to have the title left aligned, The LT indicator left aligned next to the title then the context icon right aligned on the horizontal panel.

Here is what the below looks like like and how I want it to change.

enter image description here

$(go.Panel, "Horizontal", {
    alignment: go.Spot.TopLeft,
    stretch: go.GraphObject.Horizontal, // Stretch horizontally to fill the parent panel
    padding: new go.Margin(10, 5, 10, 5)
},
$(go.TextBlock, this.textStyle(14, "600", "black", true, false), {
    margin: new go.Margin(4, 2, 4, 4),
    editable: true,
    isMultiline: false
}, new go.Binding("text", "title", function(t) {
    return t.toUpperCase();
}).makeTwoWay()),
$(go.Panel, "Auto", {
    alignment: go.Spot.TopLeft,
    visible: false
}, new go.Binding("visible", "isLT"),
    $(go.Shape, "Rectangle", {
    fill: "#FF7900",
    stroke: "#FF7900",
    }),
    $(go.TextBlock, {
    margin: 4,
    stroke: "white",
    textAlign: "center",
    font: "700 10px 'Open Sans', sans-serif"
    }, new go.Binding("text", "isLT", function(isLT) {
    return isLT ? "LT" : "";
    }))
),
$("Button", {
    alignment: go.Spot.TopRight
}, $(go.Shape, {
    geometryString: fontAwesomeSvg.editSeat.path, // Use the context menu icon path
    stroke: "#0878AF",
    strokeWidth: 1,
    desiredSize: new go.Size(16, 16)
}), {
    click: function(e, obj) { // Show context menu on click
    var node = obj.part;
    if (node) {
        node.diagram.commandHandler.showContextMenu(node);
    }
    }
}),
)
0

There are 0 answers