mylingo3d/lib/editor/Library/ObjectIcon.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 { upperFirst } from "@lincode/utils";
import createObject from "../../api/serializer/createObject";
import drag, { dragImage } from "../utils/drag";
const setDraggingItem = drag(createObject);
const ObjectIcon = ({ name, iconName = name }) => {
    return (_jsxs("div", { draggable: true, onDragStart: (e) => {
            setDraggingItem(name);
            e.dataTransfer.setDragImage(dragImage, 0, 0);
        }, onDragEnd: () => setDraggingItem(undefined), style: {
            width: "50%",
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            paddingTop: 20,
            paddingBottom: 20
        }, children: [_jsx("div", { style: {
                    width: 50,
                    height: 50,
                    backgroundImage: `url(https://unpkg.com/lingo3d-editor@1.0.3/assets/${iconName}.png)`,
                    backgroundSize: "contain",
                    backgroundPosition: "center",
                    backgroundRepeat: "no-repeat"
                } }), _jsx("div", { style: {
                    marginTop: 6,
                    opacity: 0.75,
                    overflow: "hidden",
                    textOverflow: "ellipsis",
                    maxWidth: "100%"
                }, children: upperFirst(name) })] }));
};
export default ObjectIcon;
//# sourceMappingURL=ObjectIcon.js.map