lingo3d/lib/editor/Library/index.js

Lingo3D is a React/Vue 3d game development framework that ships with a complete visual editor

import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
import Components from "./Components";
import { LIBRARY_WIDTH } from "../../globals";
import useInitCSS from "../hooks/useInitCSS";
import AppBar from "../component/bars/AppBar";
import Tab from "../component/tabs/Tab";
import useInitEditor from "../hooks/useInitEditor";
import TextBox from "../component/TextBox";
import { useEffect, useMemo, useState } from "preact/hooks";
import { stopPropagation } from "../utils/stopPropagation";
import Templates from "./Templates";
import { librarySignal } from "./librarySignal";
import { getSelectionTarget } from "../../states/useSelectionTarget";
const objectNames = [
    { gameGraph: "joystick" },
    "cube",
    "sphere",
    "cone",
    "cylinder",
    "octahedron",
    "tetrahedron",
    "torus",
    "plane",
    "circle",
    "group",
    "model",
    "dummy",
    { dummyIK: "dummy" },
    "svgMesh",
    "htmlMesh",
    // { reticle: "htmlMesh" },
    { splashScreen: "screen" },
    "text",
    "spawnPoint",
    "audio",
    "reflector",
    "water",
    { sprite: "plane" },
    { spriteSheet: "plane" },
    "areaLight",
    "ambientLight",
    "skyLight",
    "directionalLight",
    "pointLight",
    "spotLight",
    { pooledPointLight: "light" },
    { pooledSpotLight: "light" },
    { environment: "light" },
    "camera",
    "thirdPersonCamera",
    "firstPersonCamera",
    "orbitCamera"
];
const Library = ({ onDragStart, onDragEnd }) => {
    useInitCSS();
    useInitEditor();
    const [search, setSearch] = useState();
    const [deselect, setDeselect] = useState({});
    useEffect(() => {
        const handle = getSelectionTarget((val) => !val && setDeselect({}));
        return () => {
            handle.cancel();
        };
    }, []);
    const names = useMemo(() => search
        ? objectNames.filter((n) => (typeof n === "object" ? Object.keys(n)[0] : n)
            .toLowerCase()
            .includes(search))
        : objectNames, [search]);
    return (_jsxs("div", { ref: stopPropagation, className: "lingo3d-ui lingo3d-bg lingo3d-library lingo3d-flexcol", style: { width: LIBRARY_WIDTH, height: "100%" }, children: [_jsxs(AppBar, { style: { padding: 10 }, children: [_jsx(Tab, { width: "100%", selectedSignal: librarySignal, children: "components" }), _jsx(Tab, { width: "100%", selectedSignal: librarySignal, children: "templates" })] }), _jsx(TextBox, { onChange: (val) => setSearch(val.toLowerCase()), clearOnChange: deselect }), _jsxs("div", { style: { padding: 10, overflowY: "scroll", flexGrow: 1 }, children: [librarySignal.value.at(-1) === "components" && (_jsx(Components, { names: names, onDragStart: onDragStart, onDragEnd: onDragEnd })), librarySignal.value.at(-1) === "templates" && _jsx(Templates, {})] })] }));
};
export default Library;
//# sourceMappingURL=index.js.map