Added UI Project to this repository, small UI fixes

2026-09-05 21:01:52 +00:00 · 2024-11-05 22:21:47 +01:00
parent 4957f3c033
commit df125f4e57
182 changed files with 3083 additions and 82002 deletions
@@ -0,0 +1,190 @@
+import {IDockviewPanelProps} from "dockview";
+import {MenuBar, MenuItem} from "../Components/Menu.tsx";
+
+import "./EntityHierarchyWindow.css";
+import {MouseEventHandler, ReactElement, MouseEvent} from "react";
+
+import IconVisible from "../assets/Icons/AntDesign/eye-visible.svg";
+import IconInvisible from "../assets/Icons/AntDesign/eye-invisible.svg";
+import {Updater, useImmer} from "use-immer";
+
+import {EngineGlue} from "../EngineGlue";
+
+type EntityId = number;
+
+class Entity
+{
+	name: string;
+	id: EntityId;
+	visible: boolean = true;
+	children: EntityId[];
+
+	constructor(name: string, key: number, children: EntityId[] = [])
+	{
+		this.name = name;
+		this.id = key;
+		this.children = children;
+	}
+}
+
+type EntityMap = {
+	selectedIds: EntityId[];
+	[id: EntityId]: Entity;
+};
+
+const entityHierarchy: EntityMap = {
+	selectedIds: [],
+
+	0: new Entity("Entity Root", 0, [1, 4]),
+	1: new Entity("Entity Entity 1", 1, [2, 3]),
+	2: new Entity("Entity Entity 1.1", 2),
+	3: new Entity("Entity Entity 1.2", 3),
+	4: new Entity("Entity Entity 2", 4, [5, 6]),
+	5: new Entity("Entity Entity 2.1", 5),
+	6: new Entity("Entity Entity 2.2", 6, [7]),
+	7: new Entity("Entity Entity 2.2.1", 7, [8, 9]),
+	8: new Entity("Entity Entity 2.2.1.1", 8),
+	9: new Entity("Entity Entity 2.2.1.2", 9)
+};
+
+export default function EntityHierarchyWindow(props: IDockviewPanelProps)
+{
+	const [entities, updateEntities] = useImmer(entityHierarchy);
+
+	return (
+		<>
+			<MenuBar>
+				<MenuItem text="Create">
+					<MenuItem text="Empty Entity" onClick={window.EngineGlue.onClickCreateEmptyEntity}/>
+					<MenuItem text="Parent Entity">
+						<MenuItem text="Test 1 (lang)">
+							<MenuItem text="Du">
+								<MenuItem text="Übertreibst">
+									<MenuItem text="Völlig"/>
+									<MenuItem text="Du Hund!"/>
+								</MenuItem>
+							</MenuItem>
+						</MenuItem>
+						<MenuItem text="Test 2">
+							<MenuItem text="Ach komm,"/>
+						</MenuItem>
+						<MenuItem text="Test 3">
+							<MenuItem text="Hör auf!"/>
+						</MenuItem>
+					</MenuItem>
+					<MenuItem text="Child Entity"/>
+				</MenuItem>
+				<MenuItem text="Delete">
+					<MenuItem text="Selected"/>
+					<MenuItem text="All"/>
+				</MenuItem>
+				<MenuItem text="Copy">
+				</MenuItem>
+				<input className="filterEntities" placeholder="Filter entities..."/>
+			</MenuBar>
+			<EntityTree items={entities} updateItems={updateEntities}/>
+			<button className="title-bar__button close" onClick={EngineGlue.handleClickCloseWindow}>🗙</button>
+		</>
+	);
+}
+
+function EntityTreeItem({item, allEntities, updateEntities}: {
+	item: Entity,
+	allEntities: EntityMap, updateEntities: Updater<EntityMap>}) : ReactElement
+{
+	//const [isOpen, setOpen] = useState(false);
+
+	const isSelected = allEntities.selectedIds.includes(item.id);
+	//const isVisible = allEntities[item.id].visible;
+
+	function handleClick(event: MouseEvent)
+	{
+		console.log("Clicked" + item.name);
+		updateEntities(draft => {
+			if (isSelected)
+			{
+				draft.selectedIds = allEntities.selectedIds.filter((id) => {return id != item.id});
+			}
+			else
+			{
+				draft.selectedIds.push(item.id);
+			}
+		});
+
+		event.stopPropagation();
+	}
+
+	function toggleVisibility(event: MouseEvent)
+	{
+		event.stopPropagation();
+
+		// updateEntities(draft => {
+		// 	draft[item.id].visible = !draft[item.id].visible;
+		// });
+
+		//event.stopPropagation();
+	}
+
+	return (
+		<li>
+			<div className={"tree-view__item " + (isSelected ? "selected" : "")} onClick={handleClick}>
+				<div className="tree-view__item__text">
+					{item.name}
+				</div>
+				<VisibilityToggle item={item} onClick={toggleVisibility} updateEntities={updateEntities} />
+			</div>
+
+			{
+				item.children.length > 0 &&
+                <ul>
+					{
+						item.children.map((childId) => {
+							const entity: Entity = allEntities[childId];
+
+							if (entity === undefined)
+								return;
+
+							return <EntityTreeItem key={entity.id} item={entity} allEntities={allEntities} updateEntities={updateEntities}/>;
+						})
+					}
+                </ul>
+			}
+		</li>
+	);
+}
+
+function VisibilityToggle({item, onClick, updateEntities} : {item: Entity, onClick: MouseEventHandler, updateEntities: Updater<EntityMap>}) {
+	function clickHandler(event: MouseEvent)
+	{
+		updateEntities(draft => {
+			draft[item.id].visible = !item.visible;
+		});
+
+		console.log("Clickidy" + item.visible);
+		
+		onClick(event);
+
+		event.stopPropagation();
+	}
+
+	return (
+		<div onClick={clickHandler}>
+			<img src={item.visible ? IconVisible : IconInvisible} />
+		</div>
+	);
+}
+
+function EntityTree({items, updateItems}: { items: EntityMap, updateItems: Updater<EntityMap> })
+{
+	return (
+		<ul className="tree-view">
+			{
+				items[0].children.map((childId) => {
+				const entity: Entity = items[childId];
+
+				return <EntityTreeItem key={entity.id} item={entity} allEntities={items} updateEntities={updateItems} />;
+				})
+			}
+		</ul>
+	);
+}