fix: added untracked files:

2023-01-04 12:56:05 +01:00
parent 3908fbe6d1
commit f5a6ad745e
7 changed files with 158 additions and 0 deletions
--- a/src/ui/Root/ToolboxView.tsx
+++ b/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;
+    }
+}