fix: added untracked files:

src/AppState.ts

@@ -0,0 +1,37 @@
+import { ISubscriber, Publisher } from "@djledda/ladder";
+import { TrackUnitStickingType, TrackUnitType } from "./TrackUnit";
+
+export type UITool = 
+    | "track-unit-type" 
+    | "eraser" 
+    | "sticking";
+
+export type AppStateEvent = "appstate-tool-select";
+
+export default class AppState {
+    private publisher = new Publisher<AppStateEvent, AppState>(this);
+    selectedTool: UITool = "track-unit-type";
+    activeTrackUnitType: TrackUnitType = "Normal";
+    activeStickingType: TrackUnitStickingType = "lh";
+
+    constructor() {}
+
+    addSubscriber(subscriber: ISubscriber<AppStateEvent>, subscribeTo: Parameters<Publisher<AppStateEvent, AppState>["addSubscriber"]>[1]) {
+        this.publisher.addSubscriber(subscriber, subscribeTo);
+    }
+
+    selectStickingTypePaint(stickingType: TrackUnitStickingType) {
+        this.activeStickingType = stickingType;
+        this.publisher.notifySubs("appstate-tool-select");
+    }
+
+    selectTrackUnitTypePaint(trackUnitType: TrackUnitType) {
+        this.activeTrackUnitType = trackUnitType;
+        this.publisher.notifySubs("appstate-tool-select");
+    }
+
+    selectTool(tool: UITool) {
+        this.selectedTool = tool;
+        this.publisher.notifySubs("appstate-tool-select");
+    }
+}

src/ui/Root/Toolbox.css

@@ -0,0 +1,46 @@
+.root-toolbox {
+    position: relative;
+}
+
+.root-toolbox .main-row {
+    height: 2.5em;
+    margin: auto;
+    display: flex;
+    background-color: var(--color-ui-neutral-dark);
+    justify-content: center;
+    width: 100%;
+}
+
+.root-toolbox .details {
+    position: absolute;
+    top: 2.5em;
+    left: 0;
+    right: 0;
+    margin: auto;
+    width: min-content;
+    border-radius: 0 0 1em 1em;
+    padding: 0.5em;
+    background-color: var(--color-ui-neutral-dark-active);
+    display: flex;
+    justify-content: center;
+}
+
+.root-toolbox .track-unit {
+    margin: 0;
+    padding: 0;
+}
+
+.root-toolbox .toolbox-button {
+    padding: 0.5em;
+    cursor: pointer;
+    color: black;
+    background-color: var(--color-ui-neutral-dark);
+}
+.root-toolbox .toolbox-button:hover {
+    background-color: var(--color-ui-neutral-dark-hover);
+}
+.root-toolbox .toolbox-button.active {
+    background-color: var(--color-ui-neutral-dark-active);
+}
+
+

src/ui/Root/ToolboxView.tsx

@@ -0,0 +1,75 @@
+import AppState, { AppStateEvent } from "@/AppState";
+import { TrackUnitStickingTypeList, TrackUnitTypeList } from "@/TrackUnit";
+import { Capsule, h, frag, Rung, RungOptions, ISubscriber } from "@djledda/ladder";
+import TrackUnitView, { StickingTypeIconMap } from "../TrackUnit/TrackUnitView";
+import IconView from "../Widgets/Icon/IconView";
+import "./Toolbox.css";
+
+type ToolboxOptions = RungOptions & {
+    state: AppState,
+};
+
+export default class ToolboxView extends Rung<HTMLDivElement> implements ISubscriber<AppStateEvent> {
+    private state: AppState;
+
+    constructor(options: ToolboxOptions) {
+        super(options);
+        this.state = options.state;
+        this.state.addSubscriber(this, 'appstate-tool-select');
+    }
+
+    notify(publisher: unknown, event: AppStateEvent): void {
+        if (event === 'appstate-tool-select') {
+            this.redraw();
+        }
+    }
+
+    private SubMenuButtons = () => {
+        switch (this.state.selectedTool) {
+            case "track-unit-type":
+                return <div className={"details"}>{...TrackUnitTypeList.map(type => (
+                    <button 
+                        className={`toolbox-button${type === this.state.activeTrackUnitType ? " active" : ""}`}
+                        onclick={() => this.state.selectTrackUnitTypePaint(type)}>
+                        <div classes={TrackUnitView.getClasses({ on: true, type, stickingType: "none" })} />
+                    </button>
+                ))}</div>;
+            case "sticking":
+                return <div className={"details"}>{...TrackUnitStickingTypeList.reduce((prev, stickingType) => {
+                    if (stickingType !== "none") {
+                        prev.push(<button 
+                            className={`toolbox-button${stickingType === this.state.activeStickingType ? " active" : ""}`}
+                            onclick={() => this.state.selectStickingTypePaint(stickingType)}>
+                            {new IconView({ iconName: StickingTypeIconMap[stickingType] })}
+                        </button> as HTMLButtonElement);
+                    }
+                    return prev;
+                }, [] as HTMLElement[])}</div>;
+            case "eraser":
+                return <></>;
+        }
+    }
+
+    protected build() {
+        return <div className={"root-toolbox"}>
+            <div className={"main-row"}>
+                <div 
+                    className={`toolbox-button${this.state.selectedTool === "track-unit-type" ? " active" : ""}`} 
+                    onclick={() => this.state.selectTool("track-unit-type")}>
+                    Track Type
+                </div>
+                <div 
+                    className={`toolbox-button${this.state.selectedTool === "sticking" ? " active" : ""}`} 
+                    onclick={() => this.state.selectTool("sticking")}>
+                    Sticking
+                </div>
+                <div 
+                    className={`toolbox-button${this.state.selectedTool === "eraser" ? " active" : ""}`} 
+                    onclick={() => this.state.selectTool("eraser")}>
+                    Eraser
+                </div>
+            </div>
+            <this.SubMenuButtons />
+        </div> as HTMLDivElement;
+    }
+}