Everything a host needs to place a DOM text editor exactly over a text clip.
Coordinate model: bounds is the clip's geometry box in composition space (see
ClipBoundingInfo). frame is that same box BEFORE the clip scale — the text frame in
text units (frame.width × scale[0] === bounds.width). content is where the glyph block sits
inside the frame, in the same unscaled units, relative to the frame's top-left corner; it already
accounts for padding, wrap width, text alignment, stroke and drop shadow. It is the box of the
line boxes (lines × lineHeight) whose fill glyphs coincide with the rendered ones — the stroke
and the shadow extend beyond it — so a DOM element with css placed at content puts its caret
on the canvas glyphs. content.y already includes the baseline correction between the renderer
(glyph-ink ascent) and CSS (font-table ascent), so the DOM baseline lands on the rendered one.
A typical host layout is: a box positioned at bounds (as it already does for selection
handles), inside it an element of frame size with transform: scale(scale[0] × ratio, scale[1] × ratio)
(ratio = canvas CSS px per composition px, transform-origin top-left), and inside that a
textarea at content with css spread on it.
Everything a host needs to place a DOM text editor exactly over a text clip.
Coordinate model:
boundsis the clip's geometry box in composition space (see ClipBoundingInfo).frameis that same box BEFORE the clip scale — the text frame in text units (frame.width × scale[0] === bounds.width).contentis where the glyph block sits inside the frame, in the same unscaled units, relative to the frame's top-left corner; it already accounts for padding, wrap width, text alignment, stroke and drop shadow. It is the box of the line boxes (lines × lineHeight) whose fill glyphs coincide with the rendered ones — the stroke and the shadow extend beyond it — so a DOM element withcssplaced atcontentputs its caret on the canvas glyphs.content.yalready includes the baseline correction between the renderer (glyph-ink ascent) and CSS (font-table ascent), so the DOM baseline lands on the rendered one.A typical host layout is: a box positioned at
bounds(as it already does for selection handles), inside it an element offramesize withtransform: scale(scale[0] × ratio, scale[1] × ratio)(ratio= canvas CSS px per composition px, transform-origin top-left), and inside that a textarea atcontentwithcssspread on it.