Implement Component Groups

src/css/LayoutEditor.module.css

@@ -56,6 +56,11 @@
     cursor: pointer;
 }
 
+.placeholder {
+    font-style: italic;
+    opacity: 0.5;
+}
+
 .layoutContainer {
     margin-left: var(--ui-large-margin);
 

src/localization/chinese-simplified.ts

@@ -247,6 +247,10 @@ export function resolveChineseSimplified(text: Label): string {
         case Label.ComponentBlankSpaceDescription: return "仅显示背景的空组件，用作间距。";
         case Label.ComponentSeparator: return "分隔线";
         case Label.ComponentSeparatorDescription: return "在组件之间渲染分隔线。";
+        case Label.Row: return "行";
+        case Label.RowDescription: return "一行水平排列的组件，改变内部组件的布局方向。";
+        case Label.Column: return "列";
+        case Label.ColumnDescription: return "一列垂直排列的组件，改变内部组件的布局方向。";
         case Label.AccuracySeconds: return "秒";
         case Label.AccuracyTenths: return "十分之一秒";
         case Label.AccuracyHundredths: return "百分之一秒";

src/localization/dutch.ts

@@ -247,6 +247,10 @@ export function resolveDutch(text: Label): string {
         case Label.ComponentBlankSpaceDescription: return "Leeg component voor padding tussen onderdelen.";
         case Label.ComponentSeparator: return "Scheiding";
         case Label.ComponentSeparatorDescription: return "Tekent een scheidingslijn tussen componenten.";
+        case Label.Row: return "Rij";
+        case Label.RowDescription: return "Een rij componenten die horizontaal zijn ingedeeld, waardoor de lay-outrichting voor de componenten binnenin verandert.";
+        case Label.Column: return "Kolom";
+        case Label.ColumnDescription: return "Een kolom componenten die verticaal zijn ingedeeld, waardoor de lay-outrichting voor de componenten binnenin verandert.";
         case Label.AccuracySeconds: return "Seconden";
         case Label.AccuracyTenths: return "Tienden";
         case Label.AccuracyHundredths: return "Honderdsten";

src/localization/english.ts

@@ -247,6 +247,10 @@ export function resolveEnglish(text: Label): string {
         case Label.ComponentBlankSpaceDescription: return "An empty component that doesn't show anything other than a background. It mostly serves as padding between other components.";
         case Label.ComponentSeparator: return "Separator";
         case Label.ComponentSeparatorDescription: return "A simple component that just renders a separator between components.";
+        case Label.Row: return "Row";
+        case Label.RowDescription: return "A row of components laid out horizontally, changing the layout direction for the components inside.";
+        case Label.Column: return "Column";
+        case Label.ColumnDescription: return "A column of components laid out vertically, changing the layout direction for the components inside.";
         case Label.AccuracySeconds: return "Seconds";
         case Label.AccuracyTenths: return "Tenths";
         case Label.AccuracyHundredths: return "Hundredths";

src/localization/french.ts

@@ -247,6 +247,10 @@ export function resolveFrench(text: Label): string {
         case Label.ComponentBlankSpaceDescription: return "Composant vide servant d’espacement.";
         case Label.ComponentSeparator: return "Séparateur";
         case Label.ComponentSeparatorDescription: return "Affiche un séparateur entre les composants.";
+        case Label.Row: return "Ligne";
+        case Label.RowDescription: return "Une ligne de composants disposés horizontalement, changeant la direction du layout pour les composants à l'intérieur.";
+        case Label.Column: return "Colonne";
+        case Label.ColumnDescription: return "Une colonne de composants disposés verticalement, changeant la direction du layout pour les composants à l'intérieur.";
         case Label.AccuracySeconds: return "Secondes";
         case Label.AccuracyTenths: return "Dixièmes";
         case Label.AccuracyHundredths: return "Centièmes";

src/localization/german.ts

@@ -247,6 +247,10 @@ export function resolveGerman(text: Label): string {
         case Label.ComponentBlankSpaceDescription: return "Leere Komponente als Abstand zwischen anderen.";
         case Label.ComponentSeparator: return "Trenner";
         case Label.ComponentSeparatorDescription: return "Zeichnet einen Trenner zwischen Komponenten.";
+        case Label.Row: return "Zeile";
+        case Label.RowDescription: return "Eine Zeile von Komponenten, die horizontal angeordnet sind und die Layoutrichtung für die enthaltenen Komponenten ändern.";
+        case Label.Column: return "Spalte";
+        case Label.ColumnDescription: return "Eine Spalte von Komponenten, die vertikal angeordnet sind und die Layoutrichtung für die enthaltenen Komponenten ändern.";
         case Label.AccuracySeconds: return "Sekunden";
         case Label.AccuracyTenths: return "Zehntel";
         case Label.AccuracyHundredths: return "Hundertstel";

src/localization/index.ts

@@ -260,6 +260,10 @@ export enum Label {
     ComponentBlankSpaceDescription,
     ComponentSeparator,
     ComponentSeparatorDescription,
+    Row,
+    RowDescription,
+    Column,
+    ColumnDescription,
     AccuracySeconds,
     AccuracyTenths,
     AccuracyHundredths,

src/localization/italian.ts

@@ -247,6 +247,10 @@ export function resolveItalian(text: Label): string {
         case Label.ComponentBlankSpaceDescription: return "Componente vuoto usato come spaziatura.";
         case Label.ComponentSeparator: return "Separatore";
         case Label.ComponentSeparatorDescription: return "Rende un separatore tra componenti.";
+        case Label.Row: return "Riga";
+        case Label.RowDescription: return "Una riga di componenti disposti orizzontalmente, che cambia la direzione del layout per i componenti al suo interno.";
+        case Label.Column: return "Colonna";
+        case Label.ColumnDescription: return "Una colonna di componenti disposti verticalmente, che cambia la direzione del layout per i componenti al suo interno.";
         case Label.AccuracySeconds: return "Secondi";
         case Label.AccuracyTenths: return "Decimi";
         case Label.AccuracyHundredths: return "Centesimi";

src/localization/japanese.ts

@@ -247,6 +247,10 @@ export function resolveJapanese(text: Label): string {
         case Label.ComponentBlankSpaceDescription: return "背景のみの空コンポーネントです。コンポーネント間の余白として使います。";
         case Label.ComponentSeparator: return "区切り";
         case Label.ComponentSeparatorDescription: return "コンポーネント間の区切り線を表示します。";
+        case Label.Row: return "行";
+        case Label.RowDescription: return "水平に配置されたコンポーネントの行で、内部のコンポーネントのレイアウト方向を変更します。";
+        case Label.Column: return "列";
+        case Label.ColumnDescription: return "垂直に配置されたコンポーネントの列で、内部のコンポーネントのレイアウト方向を変更します。";
         case Label.AccuracySeconds: return "秒";
         case Label.AccuracyTenths: return "1/10 秒";
         case Label.AccuracyHundredths: return "1/100 秒";

src/localization/korean.ts

@@ -247,6 +247,10 @@ export function resolveKorean(text: Label): string {
         case Label.ComponentBlankSpaceDescription: return "배경만 있는 빈 컴포넌트입니다.";
         case Label.ComponentSeparator: return "구분선";
         case Label.ComponentSeparatorDescription: return "컴포넌트 사이의 구분선을 표시합니다.";
+        case Label.Row: return "행";
+        case Label.RowDescription: return "수평으로 배치된 구성 요소의 행으로, 내부 구성 요소의 레이아웃 방향을 변경합니다.";
+        case Label.Column: return "열";
+        case Label.ColumnDescription: return "수직으로 배치된 구성 요소의 열로, 내부 구성 요소의 레이아웃 방향을 변경합니다.";
         case Label.AccuracySeconds: return "초";
         case Label.AccuracyTenths: return "0.1초";
         case Label.AccuracyHundredths: return "0.01초";

src/localization/polish.ts

@@ -247,6 +247,10 @@ export function resolvePolish(text: Label): string {
         case Label.ComponentBlankSpaceDescription: return "Pusty komponent, który nie pokazuje nic poza tłem. Służy głównie jako odstęp między innymi komponentami.";
         case Label.ComponentSeparator: return "Separator";
         case Label.ComponentSeparatorDescription: return "Prosty komponent, który renderuje separator między komponentami.";
+        case Label.Row: return "Wiersz";
+        case Label.RowDescription: return "Wiersz komponentów ułożonych poziomo, zmieniający kierunek układu dla komponentów wewnątrz.";
+        case Label.Column: return "Kolumna";
+        case Label.ColumnDescription: return "Kolumna komponentów ułożonych pionowo, zmieniająca kierunek układu dla komponentów wewnątrz.";
         case Label.AccuracySeconds: return "Sekundy";
         case Label.AccuracyTenths: return "Dziesiąte";
         case Label.AccuracyHundredths: return "Setne";

src/localization/portuguese-brazil.ts

@@ -247,6 +247,10 @@ export function resolveBrazilianPortuguese(text: Label): string {
         case Label.ComponentBlankSpaceDescription: return "Componente vazio com apenas o fundo.";
         case Label.ComponentSeparator: return "Separador";
         case Label.ComponentSeparatorDescription: return "Mostra uma linha separadora entre componentes.";
+        case Label.Row: return "Linha";
+        case Label.RowDescription: return "Uma linha de componentes dispostos horizontalmente, alterando a direção do layout para os componentes internos.";
+        case Label.Column: return "Coluna";
+        case Label.ColumnDescription: return "Uma coluna de componentes dispostos verticalmente, alterando a direção do layout para os componentes internos.";
         case Label.AccuracySeconds: return "Segundos";
         case Label.AccuracyTenths: return "Décimos";
         case Label.AccuracyHundredths: return "Centésimos";

src/localization/portuguese.ts

@@ -247,6 +247,10 @@ export function resolvePortuguese(text: Label): string {
         case Label.ComponentBlankSpaceDescription: return "Componente vazio com apenas o fundo.";
         case Label.ComponentSeparator: return "Separador";
         case Label.ComponentSeparatorDescription: return "Mostra uma linha separadora entre componentes.";
+        case Label.Row: return "Linha";
+        case Label.RowDescription: return "Uma linha de componentes dispostos horizontalmente, alterando a direção do layout para os componentes no interior.";
+        case Label.Column: return "Coluna";
+        case Label.ColumnDescription: return "Uma coluna de componentes dispostos verticalmente, alterando a direção do layout para os componentes no interior.";
         case Label.AccuracySeconds: return "Segundos";
         case Label.AccuracyTenths: return "Décimos";
         case Label.AccuracyHundredths: return "Centésimos";

src/localization/russian.ts

@@ -247,6 +247,10 @@ export function resolveRussian(text: Label): string {
         case Label.ComponentBlankSpaceDescription: return "Пустой компонент только с фоном.";
         case Label.ComponentSeparator: return "Разделитель";
         case Label.ComponentSeparatorDescription: return "Показывает разделительную линию между компонентами.";
+        case Label.Row: return "Строка";
+        case Label.RowDescription: return "Строка компонентов, расположенных горизонтально, изменяющая направление разметки для компонентов внутри.";
+        case Label.Column: return "Столбец";
+        case Label.ColumnDescription: return "Столбец компонентов, расположенных вертикально, изменяющий направление разметки для компонентов внутри.";
         case Label.AccuracySeconds: return "Секунды";
         case Label.AccuracyTenths: return "Десятые";
         case Label.AccuracyHundredths: return "Сотые";

src/localization/spanish.ts

@@ -247,6 +247,10 @@ export function resolveSpanish(text: Label): string {
         case Label.ComponentBlankSpaceDescription: return "Componente vacío con solo el fondo.";
         case Label.ComponentSeparator: return "Separador";
         case Label.ComponentSeparatorDescription: return "Muestra una línea separadora entre componentes.";
+        case Label.Row: return "Fila";
+        case Label.RowDescription: return "Una fila de componentes dispuestos horizontalmente, cambiando la dirección del diseño para los componentes interiores.";
+        case Label.Column: return "Columna";
+        case Label.ColumnDescription: return "Una columna de componentes dispuestos verticalmente, cambiando la dirección del diseño para los componentes interiores.";
         case Label.AccuracySeconds: return "Segundos";
         case Label.AccuracyTenths: return "Décimas";
         case Label.AccuracyHundredths: return "Centésimas";

src/ui/components/Settings/index.tsx

@@ -73,6 +73,8 @@ export type ExtendedSettingsDescriptionValueJson =
 export interface SettingValueFactory<T> {
     fromBool(v: boolean): T;
     fromUint(value: number): T;
+    fromOptionalUint(value: number): T;
+    fromOptionalEmptyUint(): T;
     fromInt(value: number): T;
     fromString(value: string): T;
     fromOptionalString(value: string): T;
@@ -146,6 +148,12 @@ export class JsonSettingValueFactory implements SettingValueFactory<ExtendedSett
     public fromUint(_: number): ExtendedSettingsDescriptionValueJson {
         throw new Error("Not implemented");
     }
+    public fromOptionalUint(_: number): ExtendedSettingsDescriptionValueJson {
+        throw new Error("Not implemented");
+    }
+    public fromOptionalEmptyUint(): ExtendedSettingsDescriptionValueJson {
+        throw new Error("Not implemented");
+    }
     public fromInt(_: number): ExtendedSettingsDescriptionValueJson {
         throw new Error("Not implemented");
     }
@@ -300,6 +308,52 @@ export class SettingsComponent<T> extends React.Component<Props<T>> {
                         />
                     </div>
                 );
+            } else if ("OptionalUInt" in value) {
+                const children = [
+                    <Switch
+                        checked={value.OptionalUInt !== null}
+                        setIsChecked={(checked) => {
+                            if (checked) {
+                                this.props.setValue(
+                                    valueIndex,
+                                    factory.fromOptionalUint(1),
+                                );
+                            } else {
+                                this.props.setValue(
+                                    valueIndex,
+                                    factory.fromOptionalEmptyUint(),
+                                );
+                            }
+                        }}
+                    />,
+                ];
+
+                if (value.OptionalUInt !== null) {
+                    children.push(
+                        <input
+                            type="number"
+                            className={`${tableClasses.number} ${tableClasses.textBox}`}
+                            value={value.OptionalUInt}
+                            min="1"
+                            onChange={(e) => {
+                                this.props.setValue(
+                                    valueIndex,
+                                    factory.fromOptionalUint(
+                                        e.target.valueAsNumber,
+                                    ),
+                                );
+                            }}
+                        />,
+                    );
+                }
+
+                component = (
+                    <div
+                        className={`${tableClasses.settingsValueBox} ${tableClasses.optionalValue}`}
+                    >
+                        {children}
+                    </div>
+                );
             } else if ("Int" in value) {
                 component = (
                     <div className={tableClasses.settingsValueBox}>

src/ui/views/LayoutEditor.tsx

@@ -134,6 +134,8 @@ export function View({
         if (i === state.selected_component) {
             className += " " + tableClasses.selected;
         }
+        const indent = state.indent_levels[i];
+        const isPlaceholder = state.is_placeholder[i];
         return (
             <tr
                 key={i}
@@ -159,7 +161,18 @@ export function View({
                     return false;
                 }}
             >
-                <td className={className}>{c}</td>
+                <td
+                    className={className}
+                    style={{ paddingLeft: indent * 20 + 8 }}
+                >
+                    <span
+                        className={
+                            isPlaceholder ? classes.placeholder : undefined
+                        }
+                    >
+                        {c}
+                    </span>
+                </td>
             </tr>
         );
     });
@@ -207,6 +220,7 @@ export function View({
                             allVariables={allVariables}
                             addVariable={(v) => addVariable(v)}
                             addComponent={(v) => addComponent(v)}
+                            layoutDirection={state.layout_direction}
                             lang={lang}
                         />
                         <button
@@ -219,6 +233,7 @@ export function View({
                         <button
                             aria-label={resolve(Label.DuplicateComponent, lang)}
                             onClick={duplicateComponent}
+                            disabled={!state.buttons.can_duplicate}
                         >
                             <Copy strokeWidth={2.5} />
                         </button>
@@ -324,11 +339,13 @@ function AddComponentButton({
     allVariables,
     addVariable,
     addComponent,
+    layoutDirection,
     lang,
 }: {
     allVariables: Set<string>;
     addVariable: (name: string) => void;
     addComponent: (componentClass: ComponentClass) => void;
+    layoutDirection: LiveSplit.LayoutDirection;
     lang?: LiveSplit.Language;
 }) {
     const [position, setPosition] = useState<Position | null>(null);
@@ -583,6 +600,26 @@ function AddComponentButton({
                             )}
                         </span>
                     </MenuItem>
+                    <MenuItem
+                        className={`${tooltipClasses.contextMenuItem} ${tooltipClasses.tooltip}`}
+                        onClick={() => addComponent(LiveSplit.GroupComponent)}
+                        lang={lang}
+                    >
+                        {resolve(
+                            layoutDirection === "Vertical"
+                                ? Label.Row
+                                : Label.Column,
+                            lang,
+                        )}
+                        <span className={tooltipClasses.tooltipText}>
+                            {resolve(
+                                layoutDirection === "Vertical"
+                                    ? Label.RowDescription
+                                    : Label.ColumnDescription,
+                                lang,
+                            )}
+                        </span>
+                    </MenuItem>
                     <MenuItem
                         className={`${tooltipClasses.contextMenuItem} ${tooltipClasses.tooltip}`}
                         onClick={() =>