lingo3d/lib/editor/Toolbar/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 TranslateIcon from "./icons/TranslateIcon";
import RotateIcon from "./icons/RotateIcon";
import ScaleIcon from "./icons/ScaleIcon";
import AbsoluteIcon from "./icons/AbsoluteIcon";
import RelativeIcon from "./icons/RelativeIcon";
import ToolbarButton from "./ToolbarButton";
import CursorIcon from "./icons/CursorIcon";
import Section from "./Section";
import { setTransformControlsSpace } from "../../states/useTransformControlsSpace";
import PathIcon from "./icons/PathIcon";
import useInitCSS from "../hooks/useInitCSS";
import { setEditorMode } from "../../states/useEditorMode";
import useSyncState from "../hooks/useSyncState";
import { getSelectionTarget } from "../../states/useSelectionTarget";
import { getEditorModeComputed } from "../../states/useEditorModeComputed";
import { getTransformControlsSpaceComputed } from "../../states/useTransformControlsSpaceComputed";
import { setWorldPlay } from "../../states/useWorldPlay";
import useInitEditor from "../hooks/useInitEditor";
import { stopPropagation } from "../utils/stopPropagation";
const Toolbar = () => {
    useInitCSS();
    useInitEditor();
    const mode = useSyncState(getEditorModeComputed);
    const space = useSyncState(getTransformControlsSpaceComputed);
    const target = useSyncState(getSelectionTarget);
    const canTranslate = target && "x" in target;
    const canRotate = target && "rotationX" in target;
    const canScale = target && "scaleX" in target;
    return (_jsx("div", { ref: stopPropagation, className: "lingo3d-ui lingo3d-bg lingo3d-toolbar", style: {
            width: 50,
            height: "100%",
            overflowY: "scroll"
        }, children: _jsxs("div", { className: "lingo3d-flexcenter lingo3d-flexcol", style: { opacity: 0.75, paddingTop: 12 }, children: [_jsxs(Section, { children: [_jsx(ToolbarButton, { active: mode === "select", onClick: () => {
                                setWorldPlay(false);
                                setEditorMode("select");
                            }, children: _jsx(CursorIcon, {}) }), _jsx(ToolbarButton, { active: mode === "translate", onClick: () => {
                                setWorldPlay(false);
                                setEditorMode("translate");
                            }, disabled: !canTranslate, children: _jsx(TranslateIcon, {}) }), _jsx(ToolbarButton, { active: mode === "rotate", disabled: !canRotate, onClick: () => {
                                setWorldPlay(false);
                                setEditorMode("rotate");
                            }, children: _jsx(RotateIcon, {}) }), _jsx(ToolbarButton, { active: mode === "scale", disabled: !canScale, onClick: () => {
                                setWorldPlay(false);
                                setEditorMode("scale");
                            }, children: _jsx(ScaleIcon, {}) })] }), _jsxs(Section, { children: [_jsx(ToolbarButton, { active: space === "world", onClick: () => setTransformControlsSpace("world"), disabled: mode !== "translate" && mode !== "rotate", children: _jsx(AbsoluteIcon, {}) }), _jsx(ToolbarButton, { active: space === "local", onClick: () => setTransformControlsSpace("local"), disabled: mode !== "translate" &&
                                mode !== "rotate" &&
                                mode !== "scale", children: _jsx(RelativeIcon, {}) })] }), _jsx(Section, { children: _jsx(ToolbarButton, { active: mode === "curve", onClick: () => {
                            setWorldPlay(false);
                            setEditorMode("curve");
                        }, children: _jsx(PathIcon, {}) }) })] }) }));
};
export default Toolbar;
//# sourceMappingURL=index.js.map