lingo3d/lib/editor/component/ContextMenu.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 { createPortal, useLayoutEffect, useRef, useState } from "preact/compat";
import { stopPropagation } from "../utils/stopPropagation";
import TextOptionsInput from "./TextOptionsInput";
import prevent from "../utils/prevent";
const ContextMenu = ({ positionSignal, children, input }) => {
    if (!positionSignal?.value)
        return null;
    const elRef = useRef(null);
    const [xOverFlow, setXOverFlow] = useState(false);
    const [yOverFlow, setYOverFlow] = useState(false);
    useLayoutEffect(() => {
        const el = elRef.current;
        if (!el || !positionSignal.value)
            return;
        setXOverFlow(positionSignal.value.x + el.offsetWidth > window.innerWidth);
        setYOverFlow(positionSignal.value.y + el.offsetHeight > window.innerHeight);
    }, []);
    return createPortal(_jsxs("div", { ref: stopPropagation, className: "lingo3d-ui lingo3d-absfull", style: { zIndex: 2 }, onContextMenu: prevent, children: [_jsx("div", { className: "lingo3d-absfull", onMouseDown: () => (positionSignal.value = undefined) }), _jsx("div", { ref: elRef, className: "lingo3d-bg-dark", style: {
                    position: "absolute",
                    left: xOverFlow ? undefined : positionSignal.value.x,
                    right: xOverFlow ? 0 : undefined,
                    top: yOverFlow ? undefined : positionSignal.value.y,
                    bottom: yOverFlow ? 0 : undefined,
                    padding: 6,
                    border: "1px solid rgba(255, 255, 255, 0.2)"
                }, children: input ? (_jsx(TextOptionsInput, { autoFocus: true, style: { padding: 6 }, placeholder: input.label, options: input.options, onEnter: (value) => {
                        input.onInput?.(value);
                        positionSignal.value = undefined;
                    }, onEscape: () => (positionSignal.value = undefined) })) : (children) })] }), document.body);
};
export default ContextMenu;
//# sourceMappingURL=ContextMenu.js.map