lingo3d
Version:
Lingo3D is a React/Vue 3d game development framework that ships with a complete visual editor
87 lines • 4.26 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
import { useState, useRef, useMemo } from "preact/hooks";
import CollapseIcon from "../icons/CollapseIcon";
import ExpandIcon from "../icons/ExpandIcon";
import Appendable from "../../../display/core/Appendable";
import { setDragImage } from "../../utils/dragToCreate";
import { draggingItemPtr } from "../../../pointers/draggingItemPtr";
import useMouseDown from "../../hooks/useMouseDown";
import { TREE_ITEM_HEIGHT } from "../../../globals";
const BaseTreeItem = ({ label, children, selected, onCollapse, onExpand, onClick, onMouseDown, onContextMenu, onDrop, onDragStart, onDragEnd, myDraggingItem, draggable, expandedSignal, expandable = !!children, outlined, IconComponent, height = TREE_ITEM_HEIGHT }) => {
const expandIconStyle = {
opacity: expandable ? 0.5 : 0.05,
cursor: "pointer"
};
const startRef = useMouseDown(onClick);
const endRef = useRef(null);
const highlightWidth = useMemo(() => {
if (!selected || !startRef.current || !endRef.current)
return;
const boundsStart = startRef.current.getBoundingClientRect();
const boundsEnd = endRef.current.getBoundingClientRect();
return boundsEnd.right - boundsStart.left + 4;
}, [selected, expandedSignal?.value]);
const collapse = () => {
if (expandedSignal)
expandedSignal.value = false;
onCollapse?.();
};
const expand = () => {
if (expandedSignal)
expandedSignal.value = true;
onExpand?.();
};
const canSetDragOver = () => draggable && draggingItemPtr[0] && draggingItemPtr[0] !== myDraggingItem;
const [dragOver, setDragOver] = useState(false);
return (_jsxs("div", { draggable: draggable, onDragStart: (e) => {
e.stopPropagation();
draggingItemPtr[0] = myDraggingItem;
setDragImage(e);
onDragStart?.();
}, onDragEnd: (e) => {
e.stopPropagation();
draggingItemPtr[0] = undefined;
onDragEnd?.();
}, onDragOver: (e) => {
e.stopPropagation();
e.preventDefault();
canSetDragOver() && setDragOver(true);
}, onDragEnter: (e) => {
e.stopPropagation();
e.preventDefault();
canSetDragOver() && setDragOver(true);
}, onDragLeave: (e) => {
e.stopPropagation();
canSetDragOver() && setDragOver(false);
}, onDrop: (e) => {
e.stopPropagation();
if (!canSetDragOver())
return;
setDragOver(false);
if (draggingItemPtr[0] instanceof Appendable &&
!draggingItemPtr[0].traverseSome((child) => myDraggingItem === child))
onDrop?.(draggingItemPtr[0]);
}, style: {
color: "rgba(255, 255, 255, 0.75)",
marginLeft: 8,
borderLeft: "1px solid rgba(255, 255, 255, 0.05)",
backgroundColor: dragOver
? "rgba(255, 255, 255, 0.5)"
: undefined
}, children: [_jsxs("div", { ref: startRef, onMouseDown: onMouseDown, onDblClick: expandedSignal?.value ? collapse : expand, onContextMenu: onContextMenu, style: {
display: "flex",
alignItems: "center",
backgroundColor: selected && !outlined
? "rgba(255, 255, 255, 0.1)"
: undefined,
outline: selected && outlined
? "1px solid rgba(255, 255, 255, 0.5)"
: undefined,
width: highlightWidth,
minWidth: "100%",
height
}, children: [expandedSignal?.value ? (_jsx(CollapseIcon, { style: expandIconStyle, onClick: collapse })) : (_jsx(ExpandIcon, { style: expandIconStyle, onClick: expand })), IconComponent && _jsx(IconComponent, {}), _jsx("div", { ref: endRef, style: { whiteSpace: "nowrap" }, children: label })] }), expandedSignal?.value &&
(typeof children === "function" ? children() : children)] }));
};
export default BaseTreeItem;
//# sourceMappingURL=BaseTreeItem.js.map