tldraw
Version:
A tiny little drawing editor.
58 lines (57 loc) • 1.71 kB
JavaScript
import { jsx } from "react/jsx-runtime";
import { useEditor, useIsEditing, useValue } from "@tldraw/editor";
import { useEffect, useRef } from "react";
import { getFrameHeadingSide, getFrameHeadingTranslation } from "../frameHelpers.mjs";
import { FrameLabelInput } from "./FrameLabelInput.mjs";
function FrameHeading({
id,
name,
width,
height
}) {
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, 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 + var(--space-5))`,
bottom: "100%",
transform: `${translation} scale(var(--tl-scale)) translateX(calc(-1 * var(--space-3))`
},
children: /* @__PURE__ */ jsx("div", { className: "tl-frame-heading-hit-area", children: /* @__PURE__ */ jsx(FrameLabelInput, { ref: rInput, id, name, isEditing }) })
}
);
}
export {
FrameHeading
};
//# sourceMappingURL=FrameHeading.mjs.map