mylingo3d
Version:
Lingo3D is a React/Vue 3d game development framework that ships with a complete visual editor
67 lines • 4.24 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
import { useLayoutEffect, useMemo, useState } from "preact/hooks";
import register from "preact-custom-element";
import { emitSceneGraphChange, onSceneGraphChange } from "../../events/onSceneGraphChange";
import { appendableRoot, hiddenAppendables } from "../../api/core/Appendable";
import TreeItem from "./TreeItem";
import Model from "../../display/Model";
import ModelTreeItem from "./ModelTreeItem";
import { multipleSelectionGroupManagers } from "../../states/useMultipleSelectionTargets";
import GroupIcon from "./icons/GroupIcon";
import DeleteIcon from "./icons/DeleteIcon";
import TitleBarButton from "../component/TitleBarButton";
import { useMultipleSelectionTargets, useSceneGraphTarget, useSelectionTarget } from "../states";
import deleteSelected from "../Editor/deleteSelected";
import { emitEditorGroupItems } from "../../events/onEditorGroupItems";
import { emitSelectionTarget } from "../../events/onSelectionTarget";
import FindIcon from "./icons/FindIcon";
import ObjectManager from "../../display/core/ObjectManager";
import SceneGraphContextMenu from "./SceneGraphContextMenu";
import { onSceneGraphNameChange } from "../../events/onSceneGraphNameChange";
import "./retargetBones";
import useInit from "../utils/useInit";
import { decreaseEditorMounted, increaseEditorMounted } from "../../states/useEditorMounted";
import EmptyTreeItem from "../component/EmptyTreeItem";
import scene from "../../engine/scene";
import TreeItemContextProvider from "../component/TreeItemContextProviter";
import TitleBar from "../component/TitleBar";
const SceneGraph = () => {
const [r, render] = useState({});
const elRef = useInit();
useLayoutEffect(() => {
const cb = () => render({});
const handle0 = onSceneGraphChange(cb);
const handle1 = onSceneGraphNameChange(cb);
increaseEditorMounted();
return () => {
handle0.cancel();
handle1.cancel();
decreaseEditorMounted();
};
}, []);
const appendables = useMemo(() => [...appendableRoot].filter((item) => !multipleSelectionGroupManagers.has(item) &&
!hiddenAppendables.has(item)), [r]);
const [multipleSelectionTargets] = useMultipleSelectionTargets();
const [selectionTarget] = useSelectionTarget();
const [sceneGraphTarget] = useSceneGraphTarget();
const handleFind = () => {
if (sceneGraphTarget?.name && selectionTarget instanceof ObjectManager)
setTimeout(() => emitSelectionTarget(selectionTarget.find(sceneGraphTarget.name)));
};
return (_jsxs("div", { ref: elRef, className: "lingo3d-ui lingo3d-bg", onClick: () => emitSelectionTarget(), style: {
width: 200,
height: "100%",
paddingTop: 0,
display: "flex",
flexDirection: "column"
}, children: [_jsxs(TitleBar, { title: "scenegraph", children: [_jsx(TitleBarButton, { disabled: !sceneGraphTarget, onClick: handleFind, children: _jsx(FindIcon, {}) }), _jsx(TitleBarButton, { disabled: !multipleSelectionTargets.length, onClick: emitEditorGroupItems, children: _jsx(GroupIcon, {}) }), _jsx(TitleBarButton, { disabled: !selectionTarget, onClick: deleteSelected, children: _jsx(DeleteIcon, {}) })] }), _jsx("div", { style: { overflow: "scroll", flexGrow: 1 }, className: "lingo3d-ui", children: _jsxs(TreeItemContextProvider, { children: [appendables.map((appendable) => appendable instanceof Model ? (_jsx(ModelTreeItem, { appendable: appendable }, appendable.uuid)) : (_jsx(TreeItem, { appendable: appendable }, appendable.uuid))), _jsx(EmptyTreeItem, { onDrop: (child) => {
emitSceneGraphChange();
appendableRoot.add(child);
scene.attach(child.outerObject3d);
child.parent?.children?.delete(child);
child.parent = undefined;
} })] }) }), _jsx(SceneGraphContextMenu, {})] }));
};
export default SceneGraph;
register(SceneGraph, "lingo3d-scenegraph");
//# sourceMappingURL=index.js.map