pastilhasandClaude Opus 5
671097877e
The palette was not enough colour, and it was never going to be. What it replaced — the browser's own picker — is the full colour space with an eyedropper in it, and it only ever failed because of WHERE it was: at the right-hand edge of a narrow panel, where its popup opened off the side of the window. So the controls move to the block instead of the picker being rebuilt. A toolbar pinned to the selection frame, in the middle of the picture, where the native popup has room. Above the frame, or below it when the block sits near the top edge — a toolbar drawn off the top is the same unreachable control again. Everything is on it now: size, alignment as three buttons rather than a select, colour, and delete. The row per overlay under the canvas is gone. It was a second place to look — the block up here, the thing that changes it down there — and every adjustment cost a glance each way. The text is typed where it appears. Double-click, or the pencil. The contentEditable is uncontrolled on purpose: re-rendering its children from state replaces the text node the caret stands in, so the caret jumps to the end on every keystroke. The DOM owns the text while it is being typed and the effect only writes back when the two have genuinely diverged. Three things that follow from editing in place. A press on a block being edited places the caret and does not start a drag. Enter is prevented, because a <br> does not survive textContent and the break would vanish on save — width decides the breaks, as it already did. Paste is forced to plain text, because a contentEditable takes markup whole and none of it can be stored or drawn. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
399 lines
17 KiB
TypeScript
399 lines
17 KiB
TypeScript
import { useEffect, useRef, useState } from 'react';
|
||
import { AlignCenter, AlignLeft, AlignRight, Pencil, Plus, Trash2 } from 'lucide-react';
|
||
import { Button } from '@/components/ui/button';
|
||
|
||
/**
|
||
* Text laid over a picture, positioned by dragging it.
|
||
*
|
||
* ── Why it is drawn on the picture rather than listed beside it ──
|
||
*
|
||
* The thing being decided is where a line of text sits on a photograph, and that is not a decision
|
||
* anybody can make from two number fields. The editor is the picture with the text on it, at the shape
|
||
* the page uses, so what is arranged is what is published.
|
||
*
|
||
* ── Everything is relative, and has to be ──
|
||
*
|
||
* `x` and `y` are percentages of the picture, so a position means the same thing on a phone and a
|
||
* desktop. `size` is a percentage of the picture's WIDTH rather than pixels, for the same reason: a
|
||
* headline set at 40px is a headline on a laptop and a caption on a large screen.
|
||
*
|
||
* The preview renders that with container query units — `cqw` — against the box, which is exactly what
|
||
* the percentage means. The page will do the same, so the two cannot drift.
|
||
*
|
||
* ── The controls belong to the block, not to a list under the picture ──
|
||
*
|
||
* They were a row per overlay below the canvas. Two problems, and the second one is the real one.
|
||
*
|
||
* A row is a second place to look: the block is up here and the thing that changes it is down there,
|
||
* so every adjustment is a glance each way. And the row sat at the right-hand edge of a narrow panel,
|
||
* which is where `<input type="color">` opened its picker off the side of the window — unreachable, and
|
||
* unreachable in a way no CSS can fix, because the browser's picker is not in the document.
|
||
*
|
||
* Pinned to the frame instead, the native picker opens in the middle of the panel where there is room
|
||
* for it. That is worth more than any palette we could draw: it is the full colour space, with an
|
||
* eyedropper, already known to whoever is using it.
|
||
*/
|
||
|
||
export type Overlay = {
|
||
text: string;
|
||
/** Percent of the picture. The text's own anchor corner, per `align`. */
|
||
x: number;
|
||
y: number;
|
||
/**
|
||
* The BOX's width, as a percent of the picture. Text wraps inside it.
|
||
*
|
||
* Without one a block is as wide as its longest line, so it changes shape as it is typed and there
|
||
* is nothing stable to drag — which is what made moving one feel like it was fighting back. A width
|
||
* also means a line break is a decision rather than an accident of the current text.
|
||
*
|
||
* Height is not stored. It is whatever the wrapped text needs, and a box that could be shorter than
|
||
* its own words would only ever clip them.
|
||
*/
|
||
w: number;
|
||
/** Percent of the picture's width. */
|
||
size: number;
|
||
color: string;
|
||
align: 'left' | 'center' | 'right';
|
||
};
|
||
|
||
export const emptyOverlay = (): Overlay => ({ text: '', x: 10, y: 70, w: 40, size: 4, color: '#ffffff', align: 'left' });
|
||
|
||
/**
|
||
* The text itself, typed where it will appear.
|
||
*
|
||
* UNCONTROLLED, deliberately. A `contentEditable` whose children React re-renders from state loses the
|
||
* caret to the end of the text on every keystroke, because React replaces the text node the caret is
|
||
* standing in. So the DOM owns the text while it is being typed, and the effect below only writes back
|
||
* when the two have genuinely diverged — a load, or an undo from somewhere else. Typing never trips it,
|
||
* because by then the DOM already says what the state says.
|
||
*/
|
||
const EditableText = ({
|
||
text,
|
||
editing,
|
||
onText,
|
||
onDone,
|
||
}: {
|
||
text: string;
|
||
editing: boolean;
|
||
onText: (text: string) => void;
|
||
onDone: () => void;
|
||
}) => {
|
||
const el = useRef<HTMLSpanElement | null>(null);
|
||
|
||
useEffect(() => {
|
||
if (el.current && el.current.textContent !== text) el.current.textContent = text;
|
||
}, [text]);
|
||
|
||
// Focus on the way in, and put the caret at the end rather than at the start — the common intent is
|
||
// to carry on writing.
|
||
useEffect(() => {
|
||
if (!editing || !el.current) return;
|
||
el.current.focus();
|
||
const range = document.createRange();
|
||
range.selectNodeContents(el.current);
|
||
range.collapse(false);
|
||
const selection = window.getSelection();
|
||
selection?.removeAllRanges();
|
||
selection?.addRange(range);
|
||
}, [editing]);
|
||
|
||
return (
|
||
<span
|
||
ref={el}
|
||
contentEditable={editing}
|
||
suppressContentEditableWarning
|
||
className={editing ? 'outline-none' : ''}
|
||
style={{ cursor: editing ? 'text' : undefined, display: 'block', minHeight: '1em' }}
|
||
onInput={(event) => onText(event.currentTarget.textContent ?? '')}
|
||
onBlur={onDone}
|
||
onKeyDown={(event) => {
|
||
// Enter would insert a <br> or a <div>, neither of which survives `textContent`, so a line
|
||
// break typed here would vanish on save. Breaks come from the box's width instead — see `w`.
|
||
if (event.key === 'Enter') event.preventDefault();
|
||
if (event.key === 'Escape') {
|
||
event.preventDefault();
|
||
el.current?.blur();
|
||
}
|
||
}}
|
||
// Paste as text. The clipboard usually carries markup, and a contentEditable takes it whole —
|
||
// fonts, colours and all — none of which this can store or the page can draw.
|
||
onPaste={(event) => {
|
||
event.preventDefault();
|
||
const plain = event.clipboardData.getData('text/plain').replace(/\s+/g, ' ');
|
||
document.execCommand('insertText', false, plain);
|
||
}}
|
||
/>
|
||
);
|
||
};
|
||
|
||
export const OverlayEditor = ({
|
||
overlays,
|
||
onChange,
|
||
children,
|
||
}: {
|
||
overlays: Overlay[];
|
||
onChange: (overlays: Overlay[]) => void;
|
||
/** The picture. Rendered underneath, at whatever shape its own slot decides. */
|
||
children: React.ReactNode;
|
||
}) => {
|
||
const box = useRef<HTMLDivElement | null>(null);
|
||
const dragging = useRef<{ index: number; dx: number; dy: number } | null>(null);
|
||
/** Resizing the selected block's width. Separate from a move, because the two start the same way. */
|
||
const resizing = useRef<{ index: number; startX: number; startW: number } | null>(null);
|
||
const [selected, setSelected] = useState<number | null>(null);
|
||
/** Which block is taking keystrokes. At most one, and never the same one that is being dragged. */
|
||
const [editing, setEditing] = useState<number | null>(null);
|
||
|
||
const update = (index: number, patch: Partial<Overlay>) =>
|
||
onChange(overlays.map((overlay, i) => (i === index ? { ...overlay, ...patch } : overlay)));
|
||
|
||
const remove = (index: number) => {
|
||
setSelected(null);
|
||
setEditing(null);
|
||
onChange(overlays.filter((_, i) => i !== index));
|
||
};
|
||
|
||
const add = () => {
|
||
onChange([...overlays, emptyOverlay()]);
|
||
// Selected AND editing: a block added and left alone reads as "Text" on the photograph, which is
|
||
// indistinguishable from one somebody forgot to fill in.
|
||
setSelected(overlays.length);
|
||
setEditing(overlays.length);
|
||
};
|
||
|
||
const onPointerDown = (event: React.PointerEvent, index: number) => {
|
||
const rect = box.current?.getBoundingClientRect();
|
||
if (!rect) return;
|
||
event.stopPropagation();
|
||
|
||
// While editing, a press is the caret being placed. Dragging the block out from under the cursor
|
||
// mid-sentence is the opposite of what was asked for, so the gesture is simply not started.
|
||
if (editing === index) return;
|
||
|
||
event.preventDefault();
|
||
(event.target as Element).setPointerCapture?.(event.pointerId);
|
||
// The grab offset, so the text does not jump its own corner under the cursor on the first move.
|
||
dragging.current = {
|
||
index,
|
||
dx: ((event.clientX - rect.left) / rect.width) * 100 - overlays[index]!.x,
|
||
dy: ((event.clientY - rect.top) / rect.height) * 100 - overlays[index]!.y,
|
||
};
|
||
};
|
||
|
||
const onResizeDown = (event: React.PointerEvent, index: number) => {
|
||
const rect = box.current?.getBoundingClientRect();
|
||
if (!rect) return;
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
(event.target as Element).setPointerCapture?.(event.pointerId);
|
||
resizing.current = { index, startX: event.clientX, startW: overlays[index]!.w };
|
||
};
|
||
|
||
const onPointerMove = (event: React.PointerEvent) => {
|
||
const rect = box.current?.getBoundingClientRect();
|
||
|
||
const resize = resizing.current;
|
||
if (resize && rect) {
|
||
// The handle is on the trailing edge, so for a right-aligned block dragging left widens it.
|
||
const direction = overlays[resize.index]!.align === 'right' ? -1 : 1;
|
||
const delta = ((event.clientX - resize.startX) / rect.width) * 100 * direction;
|
||
// 5% is about a word at any sensible size; 100% is the whole picture and there is no more.
|
||
update(resize.index, { w: Math.min(100, Math.max(5, Math.round((resize.startW + delta) * 10) / 10)) });
|
||
return;
|
||
}
|
||
|
||
const drag = dragging.current;
|
||
if (!drag || !rect) return;
|
||
update(drag.index, {
|
||
x: Math.min(100, Math.max(0, ((event.clientX - rect.left) / rect.width) * 100 - drag.dx)),
|
||
y: Math.min(100, Math.max(0, ((event.clientY - rect.top) / rect.height) * 100 - drag.dy)),
|
||
});
|
||
};
|
||
|
||
const endGesture = () => {
|
||
dragging.current = null;
|
||
resizing.current = null;
|
||
};
|
||
|
||
const ALIGNMENTS = [
|
||
{ value: 'left' as const, Icon: AlignLeft, label: 'Left' },
|
||
{ value: 'center' as const, Icon: AlignCenter, label: 'Centre' },
|
||
{ value: 'right' as const, Icon: AlignRight, label: 'Right' },
|
||
];
|
||
|
||
return (
|
||
<div className="flex flex-col gap-3">
|
||
{/*
|
||
`@container` so the overlays can be sized in `cqw` — a percentage of THIS box rather than of the
|
||
viewport. The picture is the thing text should scale with, and the panel is not the page width.
|
||
*/}
|
||
<div
|
||
ref={box}
|
||
className="@container relative"
|
||
onPointerMove={onPointerMove}
|
||
onPointerUp={endGesture}
|
||
onPointerCancel={endGesture}
|
||
// A press that reaches the picture is a press that missed every block, which is how somebody
|
||
// says "none of them" without hunting for a Deselect.
|
||
onPointerDown={() => {
|
||
setSelected(null);
|
||
setEditing(null);
|
||
}}
|
||
>
|
||
{children}
|
||
|
||
{overlays.map((overlay, index) => (
|
||
<div
|
||
key={index}
|
||
onPointerDown={(event) => {
|
||
setSelected(index);
|
||
if (editing !== index) setEditing(null);
|
||
onPointerDown(event, index);
|
||
}}
|
||
onDoubleClick={() => setEditing(index)}
|
||
/*
|
||
A frame, but only on the selected one.
|
||
|
||
Every block outlined at once turns the picture into a wireframe and hides the thing being
|
||
judged — which is how the text looks ON the photograph. Selection is a click, and the
|
||
frame is what the toolbar is attached to.
|
||
*/
|
||
className={`absolute touch-none whitespace-pre-wrap ${
|
||
editing === index ? 'cursor-text' : 'cursor-grab active:cursor-grabbing'
|
||
} ${selected === index ? 'outline outline-1 outline-offset-4 outline-primary' : ''}`}
|
||
style={{
|
||
left: `${overlay.x}%`,
|
||
top: `${overlay.y}%`,
|
||
// The box, not the text. Wrapping inside a known width is what makes a block a stable
|
||
// thing to drag — see the note on `w`.
|
||
width: `${overlay.w}%`,
|
||
// The anchor follows the alignment, so a right-aligned block grows leftwards from where
|
||
// it was put rather than sliding out of the picture.
|
||
transform: overlay.align === 'right' ? 'translateX(-100%)' : overlay.align === 'center' ? 'translateX(-50%)' : undefined,
|
||
fontSize: `${overlay.size}cqw`,
|
||
color: overlay.color,
|
||
textAlign: overlay.align,
|
||
lineHeight: 1.15,
|
||
// Only so the text stays readable while it is being placed over a busy photograph. The
|
||
// page draws it without one — this is scaffolding, not styling.
|
||
textShadow: '0 1px 3px rgba(0,0,0,.45)',
|
||
}}
|
||
>
|
||
{/* An empty block still has to be findable. Shown only when it is not being typed into, so
|
||
the placeholder is never something to delete before writing. */}
|
||
{overlay.text || editing === index ? (
|
||
<EditableText
|
||
text={overlay.text}
|
||
editing={editing === index}
|
||
onText={(text) => update(index, { text })}
|
||
onDone={() => setEditing(null)}
|
||
/>
|
||
) : (
|
||
<span style={{ opacity: 0.6 }}>Text</span>
|
||
)}
|
||
|
||
{/* The handle, on the edge the block grows from. Bigger than it looks — a 3px target is a
|
||
target nobody hits, so the visible bar sits inside a wider grab area. */}
|
||
{selected === index && (
|
||
<div
|
||
onPointerDown={(event) => onResizeDown(event, index)}
|
||
className={`absolute inset-y-0 flex w-4 cursor-ew-resize items-center ${
|
||
overlay.align === 'right' ? '-left-4 justify-start' : '-right-4 justify-end'
|
||
}`}
|
||
>
|
||
<div className="h-8 w-1 rounded bg-primary" />
|
||
</div>
|
||
)}
|
||
|
||
{selected === index && (
|
||
<div
|
||
/*
|
||
Above the block, unless the block is near the top of the picture — a toolbar drawn off
|
||
the top edge is the same unreachable control this whole change is about.
|
||
|
||
Every inherited text property is reset. It is a child of a block set to `4cqw` in the
|
||
overlay's own colour with a shadow under it, and a toolbar that inherited those would
|
||
be enormous, white and blurred.
|
||
*/
|
||
className={`absolute left-1/2 z-30 flex -translate-x-1/2 items-center gap-1 rounded-md border border-border bg-background p-1 shadow-lg ${
|
||
overlay.y < 15 ? 'top-full mt-3' : 'bottom-full mb-3'
|
||
}`}
|
||
style={{ fontSize: '12px', lineHeight: 1.2, color: 'var(--foreground)', textShadow: 'none', textAlign: 'left' }}
|
||
// The toolbar is not part of the picture: a press here must not start a drag, deselect,
|
||
// or leave the field being edited.
|
||
onPointerDown={(event) => event.stopPropagation()}
|
||
>
|
||
<Button size="sm" variant="ghost" className="size-7 shrink-0 p-0" title="Edit text" onClick={() => setEditing(index)}>
|
||
<Pencil className="size-3.5" />
|
||
</Button>
|
||
|
||
<div className="mx-0.5 h-5 w-px bg-border" />
|
||
|
||
{/* Size as a plain step. "4" means a twenty-fifth of the picture's width, which is not a
|
||
thought anybody has — so it is shown as a number that goes up and down. */}
|
||
<Button size="sm" variant="ghost" className="size-7 shrink-0 p-0" title="Smaller" onClick={() => update(index, { size: Math.max(0.5, Math.round((overlay.size - 0.5) * 10) / 10) })}>
|
||
−
|
||
</Button>
|
||
<span className="w-6 shrink-0 text-center text-xs tabular-nums text-muted-foreground">{overlay.size}</span>
|
||
<Button size="sm" variant="ghost" className="size-7 shrink-0 p-0" title="Larger" onClick={() => update(index, { size: Math.min(20, Math.round((overlay.size + 0.5) * 10) / 10) })}>
|
||
+
|
||
</Button>
|
||
|
||
<div className="mx-0.5 h-5 w-px bg-border" />
|
||
|
||
{ALIGNMENTS.map(({ value, Icon, label }) => (
|
||
<Button
|
||
key={value}
|
||
size="sm"
|
||
variant={overlay.align === value ? 'secondary' : 'ghost'}
|
||
className="size-7 shrink-0 p-0"
|
||
title={label}
|
||
onClick={() => update(index, { align: value })}
|
||
>
|
||
<Icon className="size-3.5" />
|
||
</Button>
|
||
))}
|
||
|
||
<div className="mx-0.5 h-5 w-px bg-border" />
|
||
|
||
{/*
|
||
The browser's own picker, and the reason the toolbar is here at all.
|
||
|
||
It is the whole colour space with an eyedropper in it, which no palette we drew came
|
||
close to. It only ever failed because of WHERE it was: at the right-hand edge of the
|
||
panel its popup opened off the side of the window. In the middle of the picture there
|
||
is room for it.
|
||
*/}
|
||
<input
|
||
type="color"
|
||
value={overlay.color}
|
||
onChange={(event) => update(index, { color: event.currentTarget.value })}
|
||
className="size-7 shrink-0 cursor-pointer rounded border border-input bg-transparent p-0.5"
|
||
title="Colour"
|
||
/>
|
||
|
||
<div className="mx-0.5 h-5 w-px bg-border" />
|
||
|
||
<Button
|
||
size="sm"
|
||
variant="ghost"
|
||
className="size-7 shrink-0 p-0 text-muted-foreground hover:text-destructive"
|
||
title="Delete this text"
|
||
onClick={() => remove(index)}
|
||
>
|
||
<Trash2 className="size-3.5" />
|
||
</Button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<Button size="sm" variant="outline" className="self-start" onClick={add} disabled={overlays.length >= 8}>
|
||
<Plus className="size-3.5" />
|
||
Add text
|
||
</Button>
|
||
</div>
|
||
);
|
||
};
|