76 lines
3.2 KiB
TypeScript
76 lines
3.2 KiB
TypeScript
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 => (
|
|
<div
|
|
className={`toolbox-button${type === this.state.activeTrackUnitType ? " active" : ""}`}
|
|
onclick={() => this.state.selectTrackUnitTypePaint(type)}>
|
|
<div classes={TrackUnitView.getClasses({ on: true, type, stickingType: "none" })} />
|
|
</div>
|
|
))}</div>;
|
|
case "sticking":
|
|
return <div className={"details"}>{...TrackUnitStickingTypeList.reduce((prev, stickingType) => {
|
|
if (stickingType !== "none") {
|
|
prev.push(<div
|
|
className={`toolbox-button${stickingType === this.state.activeStickingType ? " active" : ""}`}
|
|
onclick={() => this.state.selectStickingTypePaint(stickingType)}>
|
|
{new IconView({ iconName: StickingTypeIconMap[stickingType] })}
|
|
</div> as HTMLButtonElement);
|
|
}
|
|
return prev;
|
|
}, [] as HTMLElement[])}</div>;
|
|
case "eraser":
|
|
return <div className={"details hidden"} />;
|
|
}
|
|
}
|
|
|
|
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;
|
|
}
|
|
}
|