tldraw
Version:
A tiny little drawing editor.
70 lines (69 loc) • 2 kB
JavaScript
import { jsx } from "react/jsx-runtime";
import { useEditor, useIsEditing, useValue } from "@tldraw/editor";
import { memo, useEffect, useRef } from "react";
import { getFrameHeadingSide, getFrameHeadingTranslation } from "../frameHelpers.mjs";
import { FrameLabelInput } from "./FrameLabelInput.mjs";
const FrameHeading = memo(function FrameHeading2({
id,
name,
width,
height,
fill,
stroke,
color,
offsetX,
showColors
}) {
const editor = useEditor();
const { side, translation } = useValue(
"shape rotation",
() => {
const shape = editor.getShape(id);
if (!shape) {
return {
side: 0,
translation: "translate(0, 0)"
};
}
const labelSide = getFrameHeadingSide(editor, shape);
return {
side: labelSide,
translation: getFrameHeadingTranslation(shape, labelSide, false)
};
},
[editor, offsetX, id]
);
const rInput = useRef(null);
const isEditing = useIsEditing(id);
useEffect(() => {
const el = rInput.current;
if (el && isEditing) {
el.focus();
el.select();
}
}, [rInput, isEditing]);
return /* @__PURE__ */ jsx(
"div",
{
className: "tl-frame-heading",
style: {
overflow: isEditing ? "visible" : "hidden",
maxWidth: `calc(var(--tl-zoom) * ${side === 0 || side === 2 ? Math.ceil(width) : Math.ceil(height)}px + ${showColors ? "0px" : "var(--tl-frame-offset-width)"})`,
bottom: "100%",
transform: `${translation} scale(min(var(--tl-scale), 3.5)) translateX(${offsetX}px)`
},
children: /* @__PURE__ */ jsx(
"div",
{
className: "tl-frame-heading-hit-area",
style: { color, backgroundColor: fill, boxShadow: `inset 0px 0px 0px 1px ${stroke}` },
children: /* @__PURE__ */ jsx(FrameLabelInput, { ref: rInput, id, name, isEditing })
}
)
}
);
});
export {
FrameHeading
};
//# sourceMappingURL=FrameHeading.mjs.map