tldraw
Version:
A tiny little drawing editor.
82 lines (81 loc) • 2.28 kB
JavaScript
import {
Box,
canonicalizeRotation,
last,
toDomPrecision
} from "@tldraw/editor";
import { defaultEmptyAs } from "./FrameShapeUtil.mjs";
function getFrameHeadingSide(editor, shape) {
const pageRotation = canonicalizeRotation(editor.getShapePageTransform(shape.id).rotation());
const offsetRotation = pageRotation + Math.PI / 4;
const scaledRotation = (offsetRotation * (2 / Math.PI) + 4) % 4;
return Math.floor(scaledRotation);
}
function getFrameHeadingInfo(editor, shape, opts) {
if (process.env.NODE_ENV === "test") {
return {
box: new Box(0, -opts.height, shape.props.w, opts.height),
spans: []
};
}
const spans = editor.textMeasure.measureTextSpans(
defaultEmptyAs(shape.props.name, "Frame") + String.fromCharCode(8203),
opts
);
const firstSpan = spans[0];
const lastSpan = last(spans);
const labelTextWidth = lastSpan.box.w + lastSpan.box.x - firstSpan.box.x;
return {
box: new Box(0, -opts.height, labelTextWidth, opts.height),
spans
};
}
function getFrameHeadingOpts(shape, color) {
return {
fontSize: 12,
fontFamily: "Inter, sans-serif",
textAlign: "start",
width: shape.props.w,
height: 32,
padding: 0,
lineHeight: 1,
fontStyle: "normal",
fontWeight: "normal",
overflow: "truncate-ellipsis",
verticalTextAlign: "middle",
fill: color,
offsetY: -(32 + 2),
offsetX: 2
};
}
function getFrameHeadingTranslation(shape, side, isSvg) {
const u = isSvg ? "" : "px";
const r = isSvg ? "" : "deg";
let labelTranslate;
switch (side) {
case 0:
labelTranslate = ``;
break;
case 3:
labelTranslate = `translate(${toDomPrecision(shape.props.w)}${u}, 0${u}) rotate(90${r})`;
break;
case 2:
labelTranslate = `translate(${toDomPrecision(shape.props.w)}${u}, ${toDomPrecision(
shape.props.h
)}${u}) rotate(180${r})`;
break;
case 1:
labelTranslate = `translate(0${u}, ${toDomPrecision(shape.props.h)}${u}) rotate(270${r})`;
break;
default:
throw Error("labelSide out of bounds");
}
return labelTranslate;
}
export {
getFrameHeadingInfo,
getFrameHeadingOpts,
getFrameHeadingSide,
getFrameHeadingTranslation
};
//# sourceMappingURL=frameHelpers.mjs.map