mylingo3d/lib/editor/FileBrowser/FileButton.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 { getExtensionType } from "@lincode/filetypes";
import { splitFileName } from "@lincode/utils";
import { createObjectURL } from "../../display/core/utils/objectURL";
import Model from "../../display/Model";
import { useFileSelected } from "../states";
import drag, { dragImage } from "../utils/drag";
import FileIcon from "./icons/FileIcon";
const setDraggingItem = drag((draggingItem, hitManager) => {
    const filetype = getExtensionType(draggingItem.name);
    const [filename, extension] = splitFileName(draggingItem.name);
    const lazyObjectURL = () => createObjectURL(draggingItem, extension?.toLowerCase());
    if (filetype === "model") {
        const manager = new Model();
        manager.src = lazyObjectURL();
        return manager;
    }
    else if (filetype === "image" && hitManager && "texture" in hitManager) {
        const name = filename.toLowerCase();
        if ("roughness" in hitManager) {
            if (name.includes("rough"))
                hitManager.roughnessMap = lazyObjectURL();
            else if (name.includes("metal"))
                hitManager.metalnessMap = lazyObjectURL();
            else if (name.includes("normal"))
                hitManager.normalMap = lazyObjectURL();
            else if (name.includes("disp"))
                hitManager.displacementMap = lazyObjectURL();
            else if (name.includes("emissive"))
                hitManager.emissiveMap = lazyObjectURL();
            else
                hitManager.texture = lazyObjectURL();
        }
        else
            hitManager.texture = lazyObjectURL();
    }
});
const FileButton = ({ file }) => {
    const [fileSelected, setFileSelected] = useFileSelected();
    return (_jsxs("div", { style: {
            width: 70,
            height: 90,
            background: fileSelected === file
                ? "rgba(255, 255, 255, 0.1)"
                : undefined
        }, draggable: true, onDragStart: (e) => {
            setDraggingItem(file);
            e.dataTransfer.setDragImage(dragImage, 0, 0);
        }, onDragEnd: () => setDraggingItem(undefined), onMouseDown: (e) => (e.stopPropagation(), setFileSelected(file)), children: [_jsx("div", { style: {
                    display: "flex",
                    width: "100%",
                    justifyContent: "center",
                    paddingTop: 10,
                    paddingBottom: 4
                }, children: _jsx(FileIcon, {}) }), _jsx("div", { style: {
                    display: "flex",
                    width: "100%",
                    justifyContent: "center",
                    paddingLeft: 10,
                    paddingRight: 10
                }, children: _jsx("div", { style: {
                        wordBreak: "break-word",
                        overflow: "hidden",
                        textOverflow: "ellipsis",
                        display: "-webkit-box",
                        lineClamp: 2,
                        webkitLineClamp: 2,
                        webkitBoxOrient: "vertical"
                    }, children: file.name }) })] }));
};
export default FileButton;
//# sourceMappingURL=FileButton.js.map