in src/core/prototypes/plot_segments/region_2d/base.ts [2479:2729]
public buildSublayoutWidgets(m: Controls.WidgetManager) {
const extra: Controls.Widget[] = [];
const props = this.plotSegment.object.properties;
const type = props.sublayout.type;
if (
type == Region2DSublayoutType.DodgeX ||
type == Region2DSublayoutType.DodgeY ||
type == Region2DSublayoutType.Grid ||
type == Region2DSublayoutType.Overlap
) {
const isXFixed = props.xData && props.xData.type == "numerical";
const isYFixed = props.yData && props.yData.type == "numerical";
const alignmentWidgets = [];
if (!isYFixed) {
alignmentWidgets.push(
m.inputSelect(
{ property: "sublayout", field: ["align", "y"] },
{
type: "radio",
options: ["start", "middle", "end"],
icons: [
"AlignVerticalBottom",
"AlignVerticalCenter",
"AlignVerticalTop",
],
labels: [
strings.alignment.bottom,
strings.alignment.middle,
strings.alignment.top,
],
tooltip: strings.canvas.alignItemsOnY,
}
)
);
}
if (!isXFixed) {
alignmentWidgets.push(
m.inputSelect(
{ property: "sublayout", field: ["align", "x"] },
{
type: "radio",
options: ["start", "middle", "end"],
icons: [
"AlignHorizontalLeft",
"AlignHorizontalCenter",
"AlignHorizontalRight",
],
labels: [
strings.alignment.left,
strings.alignment.middle,
strings.alignment.right,
],
tooltip: strings.canvas.alignItemsOnX,
}
)
);
}
extra.push(
m.vertical(
m.label(strings.alignment.alignment),
m.horizontal([0, 0, 0], ...alignmentWidgets.reverse(), null)
)
);
if (type == Region2DSublayoutType.Grid) {
extra.push(
m.vertical(
m.label(strings.objects.axes.gap),
m.vertical(
m.label(strings.coordinateSystem.x),
m.inputNumber(
{ property: "sublayout", field: "ratioX" },
{ minimum: 0, maximum: 1, percentage: true, showSlider: true }
),
m.label(strings.coordinateSystem.y),
m.inputNumber(
{ property: "sublayout", field: "ratioY" },
{ minimum: 0, maximum: 1, percentage: true, showSlider: true }
)
)
)
);
} else {
extra.push(
m.inputNumber(
{
property: "sublayout",
field: type == Region2DSublayoutType.DodgeX ? "ratioX" : "ratioY",
},
{
minimum: 0,
maximum: 1,
percentage: true,
showSlider: true,
label: strings.objects.axes.gap,
}
)
);
}
if (type == Region2DSublayoutType.Grid) {
const { terminology } = this.config;
extra.push(
m.vertical(
m.label(strings.objects.plotSegment.orientation),
m.horizontal(
[0, 0, 1],
m.inputSelect(
{ property: "sublayout", field: ["grid", "direction"] },
{
type: "radio",
options: [GridDirection.X, GridDirection.Y],
icons: ["GripperBarHorizontal", "GripperBarVertical"],
labels: [
terminology.gridDirectionX,
terminology.gridDirectionY,
],
}
)
),
m.inputSelect(
{
property: "sublayout",
field: ["grid", "gridStartPosition"],
},
{
type: "radio",
icons: [
"ArrowTallDownRight",
"ArrowTallDownLeft",
"ArrowTallUpLeft",
"ArrowTallUpRight",
],
options: [
GridStartPosition.LeftTop,
GridStartPosition.RightTop,
GridStartPosition.LeftBottom,
GridStartPosition.RigtBottom,
],
labels: [
strings.objects.plotSegment.directionDownRight,
strings.objects.plotSegment.directionDownLeft,
strings.objects.plotSegment.directionUpLeft,
strings.objects.plotSegment.directionUpRight,
],
label: strings.objects.plotSegment.direction,
}
)
),
m.inputNumber(
{
property: "sublayout",
field:
props.sublayout.grid.direction == "x"
? ["grid", "xCount"]
: ["grid", "yCount"],
},
{
label: strings.objects.axes.count,
}
)
);
}
if (type != Region2DSublayoutType.Overlap) {
extra.push(
m.vertical(
m.label(strings.objects.plotSegment.order),
m.horizontal(
[0, 0],
m.orderByWidget(
{ property: "sublayout", field: "order" },
{ table: this.plotSegment.object.table, shiftCallout: 15 }
),
m.inputBoolean(
{ property: "sublayout", field: "orderReversed" },
{ type: "highlight", icon: "Sort" }
)
)
)
);
}
}
if (type == Region2DSublayoutType.Packing) {
extra.push(
m.vertical(
m.label(strings.objects.plotSegment.gravity),
m.inputNumber(
{ property: "sublayout", field: ["packing", "gravityX"] },
{ minimum: 0.1, maximum: 15, label: "X" }
),
m.inputNumber(
{ property: "sublayout", field: ["packing", "gravityY"] },
{ minimum: 0.1, maximum: 15, label: "Y" }
)
)
);
}
if (type == Region2DSublayoutType.Jitter) {
extra.push(m.label(strings.objects.plotSegment.distribution));
extra.push(
m.horizontal(
[0, 1, 1],
m.inputBoolean(
{ property: "sublayout", field: ["jitter", "horizontal"] },
{ type: "highlight", icon: "HorizontalDistributeCenter" }
),
m.inputBoolean(
{ property: "sublayout", field: ["jitter", "vertical"] },
{ type: "highlight", icon: "VerticalDistributeCenter" }
)
)
);
}
const options = this.applicableSublayoutOptions();
return [
m.verticalGroup(
{
header: strings.objects.plotSegment.subLayout,
},
[
m.vertical(
m.horizontal(
[0, 0],
m.inputSelect(
{ property: "sublayout", field: "type" },
{
type: "radio",
options: options.map((x) => x.value),
icons: options.map((x) => x.icon),
labels: options.map((x) => x.label),
label: strings.objects.plotSegment.type,
}
),
// for alignment
m.inputSelect(
{ property: "sublayout", field: "type" },
{
type: "radio",
options: [],
icons: [],
labels: [],
}
)
)
),
...extra,
]
),
];
}