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.
$(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);
}
}
}),
)
