Function TextSegmentOverlay

apps/desktop/src/routes/editor/TextOverlay.tsx:180–534

(props: {
	size: { width: number; height: number };
	segment: TauriTextSegment;
	index: number;
	isSelected: boolean;
	onSelect: (e: MouseEvent) => void;
	updateSegment: (fn: (segment: TextSegment) => void) => void;
	createMouseDownDrag: <T>(
		setup: () => T,
		update: (
			e: MouseEvent,
			value: T,
			initialMouse: { x: number; y: number },
		) => void,
	) => (downEvent: MouseEvent) => void;
	clamp: (value: number, min: number, max: number) => number;
})

}

function TextSegmentOverlay(props: {
	size: { width: number; height: number };
	segment: TauriTextSegment;
	index: number;
	isSelected: boolean;
	onSelect: (e: MouseEvent) => void;
	updateSegment: (fn: (segment: TextSegment) => void) => void;
	createMouseDownDrag: <T>(
		setup: () => T,
		update: (
			e: MouseEvent,
			value: T,
			initialMouse: { x: number; y: number },
		) => void,
	) => (downEvent: MouseEvent) => void;
	clamp: (value: number, min: number, max: number) => number;
}) {
	const segment = createMemo(() => normalizeSegment(props.segment));
	let hiddenMeasureRef: HTMLDivElement | undefined;
	const [mounted, setMounted] = createSignal(false);
	const [isResizing, setIsResizing] = createSignal(false);
	let pendingResizeCleanup: (() => void) | null = null;

	onMount(() => {
		setMounted(true);
	});

	onCleanup(() => {
		if (pendingResizeCleanup) {
			pendingResizeCleanup();
			pendingResizeCleanup = null;
		}
		setIsResizing(false);
	});

	const isDefaultSize = (size: { x: number; y: number }) =>
		size.x <= 0.025 || size.y <= 0.025;

	const [lastContent, setLastContent] = createSignal(segment().content);
	const [lastFontSize, setLastFontSize] = createSignal(segment().fontSize);

	const measureAndUpdateSize = (forceUpdate = false) => {
		if (!hiddenMeasureRef) return false;

		const seg = segment();
		if (!forceUpdate && !isDefaultSize(seg.size)) return true;

		const { width: naturalWidth, height: naturalHeight } =
			hiddenMeasureRef.getBoundingClientRect();

		if (
			naturalWidth === 0 ||
			naturalHeight === 0 ||
			!props.size.width ||
			!props.size.height
		)
			return false;