lingo3d/lib/editor/Panels/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 CloseableTab from "../component/tabs/CloseableTab";
import AppBar from "../component/bars/AppBar";
import useInitCSS from "../hooks/useInitCSS";
import FileBrowser from "../FileBrowser";
import { useEffect } from "preact/hooks";
import TimelineEditor from "../TimelineEditor";
import { PANELS_HEIGHT } from "../../globals";
import { getTimeline, setTimeline } from "../../states/useTimeline";
import { useSignal } from "@preact/signals";
import TimelineControls from "../TimelineEditor/TimelineControls";
import useSyncState from "../hooks/useSyncState";
import useInitEditor from "../hooks/useInitEditor";
import FileBrowserControls from "../FileBrowser/FileBrowserControls";
import { selectTab } from "../component/tabs/Tab";
import { getFiles } from "../../states/useFiles";
const Panels = () => {
    useInitCSS();
    useInitEditor();
    const files = useSyncState(getFiles);
    const timeline = useSyncState(getTimeline);
    const selectedSignal = useSignal([]);
    useEffect(() => {
        files && selectTab(selectedSignal, "files");
    }, [files]);
    useEffect(() => {
        timeline && selectTab(selectedSignal, "timeline");
    }, [timeline]);
    return (_jsxs("div", { className: "lingo3d-ui lingo3d-bg lingo3d-panels lingo3d-flexcol", style: { height: PANELS_HEIGHT, width: "100%" }, children: [_jsxs("div", { style: { display: "flex" }, children: [_jsxs(AppBar, { style: { width: 200 }, children: [_jsx(CloseableTab, { selectedSignal: selectedSignal, onClose: () => setTimeline(undefined), children: "timeline" }), _jsx(CloseableTab, { selectedSignal: selectedSignal, disabled: !files, children: "files" })] }), _jsx("div", { style: { flexGrow: 1 }, children: selectedSignal.value.at(-1) === "files" ? (_jsx(FileBrowserControls, {})) : (_jsx(TimelineControls, {})) })] }), _jsx("div", { style: { flexGrow: 1 }, children: selectedSignal.value.at(-1) === "files" ? (_jsx(FileBrowser, {})) : (_jsx(TimelineEditor, {})) })] }));
};
export default Panels;
//# sourceMappingURL=index.js.map