mylingo3d/lib/editor/Menu/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 register from "preact-custom-element";
import MenuButton from "./MenuButton";
import ContextMenu from "../component/ContextMenu";
import MenuItem from "../component/ContextMenu/MenuItem";
import { useState } from "preact/hooks";
import { setNodeEditor } from "../../states/useNodeEditor";
import { useNodeEditor } from "../states";
import useInit from "../utils/useInit";
const Menu = () => {
    const elRef = useInit();
    const [data, setData] = useState();
    const [nodeEditor] = useNodeEditor();
    return (_jsxs("div", { ref: elRef, className: "lingo3d-ui", style: {
            position: "absolute",
            left: 0,
            top: 0,
            width: "100%",
            height: 25,
            background: "rgb(35, 36, 41)",
            marginTop: -20,
            display: "flex",
            justifyContent: "flex-start",
            alignItems: "center"
        }, children: [_jsxs("ul", { style: {
                    display: "flex",
                    flexDirection: "row",
                    alignItems: "start"
                }, children: [_jsx(MenuButton, { onClick: (e) => setData({
                            x: e.left,
                            y: e.top,
                            menuItems: [
                                {
                                    text: "open...",
                                    onClick: () => console.log("first button clicked")
                                }
                            ]
                        }), children: "File" }), _jsx(MenuButton, { onClick: (e) => setData({
                            x: e.left,
                            y: e.top,
                            menuItems: [
                                {
                                    text: nodeEditor
                                        ? "hide nodes editor"
                                        : "show nodes editor",
                                    onClick: () => {
                                        setData(undefined);
                                        setNodeEditor(!nodeEditor);
                                    }
                                }
                            ]
                        }), children: "View" })] }), _jsx(ContextMenu, { data: data, setData: setData, children: data?.menuItems.map((item) => (_jsx(MenuItem, { setData: setData, onClick: item.onClick, children: item.text }))) })] }));
};
export default Menu;
register(Menu, "lingo3d-menu");
//# sourceMappingURL=index.js.map