121 lines
4.6 KiB
TypeScript
121 lines
4.6 KiB
TypeScript
import { makeAutoObservable } from "mobx";
|
|
import { state } from "./rootState";
|
|
import type { ReactNode } from "react";
|
|
import { IconRun, IconTrash, IconPlus, IconCubePlus, IconCubeOff } from '@tabler/icons-react';
|
|
|
|
export type MenuNodeAction = {
|
|
id: string;
|
|
content: ReactNode;
|
|
tooltip: string;
|
|
onClick: () => void;
|
|
}
|
|
|
|
export type MenuNode = {
|
|
id: string;
|
|
title: ReactNode;
|
|
className?: string;
|
|
actions?: MenuNodeAction[];
|
|
onClick?: () => void;
|
|
selected?: () => boolean;
|
|
children?: MenuNode[];
|
|
}
|
|
|
|
export class MenuState {
|
|
constructor() {
|
|
makeAutoObservable(this);
|
|
}
|
|
|
|
private get editorObjectTypesMenu(): MenuNode[] {
|
|
const editor = state.worldEditor;
|
|
const scene = editor.scene;
|
|
|
|
return Object.values(state.world.data.objectTypes)
|
|
.map((ot) => {
|
|
const children = Object.values(scene.objects)
|
|
.filter((o) => o.typeId === ot.id)
|
|
.map((o, idx) => {
|
|
const isPlayer = scene.playerObjectId === o.id;
|
|
|
|
const actions: MenuNodeAction[] = [];
|
|
if (!isPlayer) {
|
|
actions.push({
|
|
id: 'delete-object-instance',
|
|
content: <IconTrash size="1em" />,
|
|
tooltip: 'Delete the object',
|
|
onClick: () => { editor.deleteObject(o.id); },
|
|
});
|
|
actions.push({
|
|
id: 'control-object-instance-by-player',
|
|
content: <IconRun size="1em" />,
|
|
tooltip: 'Mark as player',
|
|
onClick: () => { scene.playerObjectId = o.id; },
|
|
});
|
|
}
|
|
|
|
return {
|
|
id: `o-${o.id}`,
|
|
title: <>
|
|
{isPlayer && <IconRun size="1em" />}
|
|
{`${ot.name} ${idx + 1}`}
|
|
</>,
|
|
className: isPlayer ? 'player-controlled-object' : undefined,
|
|
actions,
|
|
onClick: () => { state.worldEditor.setSelectedObject({ id: o.id, editMode: 'translate' }) },
|
|
selected: () => state.worldEditor.selection?.type === 'object' && state.worldEditor.selection?.id === o.id,
|
|
} as MenuNode;
|
|
});
|
|
|
|
return {
|
|
id: `ot-${ot.id}`,
|
|
title: `${ot.name} (${children.length ? children.length : 'no'} instance${children.length != 1 ? 's' : ''})`,
|
|
actions: [
|
|
{
|
|
id: 'create-object-instance',
|
|
content: <IconPlus size="1em" />,
|
|
tooltip: 'Create new object instance',
|
|
onClick: () => { editor.addObjectInstanceAtRandomPosition(ot.id); },
|
|
},
|
|
{
|
|
id: 'delete-object-type',
|
|
content: <IconCubeOff size="1em" />,
|
|
tooltip: 'Delete object type',
|
|
onClick: () => { editor.deleteObjectType(ot.id); },
|
|
},
|
|
],
|
|
onClick: () => { editor.setSelectedObjectType({ id: ot.id, editMode: 'scripts' }) },
|
|
selected: () => editor.selection?.type === 'objectType' && editor.selection?.id === ot.id,
|
|
children,
|
|
} as MenuNode
|
|
});
|
|
}
|
|
|
|
private get editorMenu(): MenuNode[] {
|
|
return [
|
|
{
|
|
id: 'editor-scene-menu',
|
|
title: 'Scene',
|
|
onClick: () => { state.worldEditor.resetSelection() },
|
|
selected: () => !state.worldEditor.selection,
|
|
children: this.editorObjectTypesMenu,
|
|
actions: [{
|
|
id: 'create-object-type',
|
|
content: <IconCubePlus size="1em" />,
|
|
tooltip: 'Create new object type',
|
|
onClick: () => { state.worldEditor.addObjectType(); },
|
|
}],
|
|
}
|
|
]
|
|
}
|
|
|
|
public get nodes(): MenuNode[] {
|
|
return [
|
|
...this.editorMenu,
|
|
]
|
|
}
|
|
|
|
public nodeContainsSelected(node: MenuNode): boolean {
|
|
return !!(node.selected?.() || node.children?.some((child) => this.nodeContainsSelected(child)));
|
|
}
|
|
|
|
}
|