mylingo3d/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 register from "preact-custom-element";
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 IconButton from "./IconButton";
import { useSelectionTarget, useEditorComputed, useTransformControlsSpaceComputed } from "../states";
import CursorIcon from "./icons/CursorIcon";
import OpenIcon from "./icons/OpenIcont";
import ReactIcon from "./icons/ReactIcon";
import VueIcon from "./icons/VueIcon";
import exportReact from "../../api/files/exportReact";
import exportVue from "../../api/files/exportVue";
import { useEffect } from "preact/hooks";
import openJSON from "../../api/files/openJSON";
import Section from "./Section";
import useInit from "../utils/useInit";
import { setEditorMode } from "../../states/useEditorMode";
import { setTransformControlsSpace } from "../../states/useTransformControlsSpace";
import { isPositionedItem } from "../../api/core/PositionedItem";
import SimpleObjectManager from "../../display/core/SimpleObjectManager";
import PlayIcon from "./icons/PlayIcon";
import { decreaseEditorMounted, increaseEditorMounted } from "../../states/useEditorMounted";
import PathIcon from "./icons/PathIcon";
import FolderIcon from "./icons/FolderIcon";
import { DEBUG } from "../../globals";
import SaveIcon from "./icons/SaveIcon";
import saveJSON from "../../api/files/saveJSON";
import openFolder from "../../api/files/openFolder";
import exportJSON from "../../api/files/exportJSON";
import JSONIcon from "./icons/JSONIcon";
const Toolbar = () => {
    const elRef = useInit();
    const [mode] = useEditorComputed();
    const [space] = useTransformControlsSpaceComputed();
    const [target] = useSelectionTarget();
    const translateOnly = target &&
        isPositionedItem(target) &&
        !(target instanceof SimpleObjectManager);
    useEffect(() => {
        increaseEditorMounted();
        return () => {
            decreaseEditorMounted();
        };
    }, []);
    return (_jsx("div", { ref: elRef, className: "lingo3d-ui lingo3d-bg", style: {
            width: 50,
            height: "100%",
            overflowY: "scroll"
        }, children: _jsxs("div", { style: {
                display: "flex",
                flexDirection: "column",
                alignItems: "center",
                opacity: 0.75,
                paddingTop: 12
            }, children: [_jsxs(Section, { children: [_jsx(IconButton, { active: mode === "select", onClick: () => setEditorMode("select"), children: _jsx(CursorIcon, {}) }), _jsx(IconButton, { active: mode === "translate", onClick: () => setEditorMode("translate"), children: _jsx(TranslateIcon, {}) }), _jsx(IconButton, { active: mode === "rotate", disabled: translateOnly, onClick: () => setEditorMode("rotate"), children: _jsx(RotateIcon, {}) }), _jsx(IconButton, { active: mode === "scale", disabled: translateOnly, onClick: () => setEditorMode("scale"), children: _jsx(ScaleIcon, {}) }), DEBUG && (_jsx(IconButton, { active: mode === "path", onClick: () => setEditorMode("path"), children: _jsx(PathIcon, {}) })), _jsx(IconButton, { active: mode === "play", onClick: () => setEditorMode("play"), children: _jsx(PlayIcon, {}) })] }), _jsxs(Section, { children: [_jsx(IconButton, { active: space === "world", onClick: () => setTransformControlsSpace("world"), disabled: mode !== "translate" && mode !== "rotate", children: _jsx(AbsoluteIcon, {}) }), _jsx(IconButton, { active: space === "local", onClick: () => setTransformControlsSpace("local"), disabled: mode !== "translate" &&
                                mode !== "rotate" &&
                                mode !== "scale", children: _jsx(RelativeIcon, {}) })] }), _jsxs(Section, { children: [_jsx(IconButton, { onClick: openFolder, children: _jsx(FolderIcon, {}) }), _jsx(IconButton, { onClick: openJSON, children: _jsx(OpenIcon, {}) }), _jsx(IconButton, { onClick: saveJSON, children: _jsx(SaveIcon, {}) })] }), _jsxs(Section, { children: [_jsx(IconButton, { onClick: exportJSON, children: _jsx(JSONIcon, {}) }), _jsx(IconButton, { onClick: exportReact, children: _jsx(ReactIcon, {}) }), _jsx(IconButton, { onClick: exportVue, children: _jsx(VueIcon, {}) })] })] }) }));
};
export default Toolbar;
register(Toolbar, "lingo3d-toolbar", ["buttons"]);
//# sourceMappingURL=index.js.map