Skip to content

Commit

Permalink
feat: rename renderBoundingBox to glyphBox
Browse files Browse the repository at this point in the history
  • Loading branch information
qq15725 committed Nov 9, 2024
1 parent ff25fae commit 89e756d
Show file tree
Hide file tree
Showing 3 changed files with 31 additions and 19 deletions.
38 changes: 25 additions & 13 deletions src/Text.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export interface TextOptions {
}

export type MeasureResult = MeasureDomResult & {
renderBoundingBox: BoundingBox
glyphBox: BoundingBox
}

export const defaultTextStyles: TextStyle = {
Expand Down Expand Up @@ -79,7 +79,7 @@ export class Text {
computedStyle: TextStyle = { ...defaultTextStyles }
paragraphs: Paragraph[] = []
boundingBox = new BoundingBox()
renderBoundingBox = new BoundingBox()
glyphBox = new BoundingBox()
parser = new Parser(this)
measurer = new Measurer(this)
plugins = new Map<string, Plugin>()
Expand Down Expand Up @@ -116,10 +116,15 @@ export class Text {

measure(dom = this.measureDom): MeasureResult {
this.computedStyle = { ...defaultTextStyles, ...this.style }
const oldParagraphs = this.paragraphs
const oldRenderBoundingBox = this.renderBoundingBox
const old = {
paragraphs: this.paragraphs,
boundingBox: this.boundingBox,
glyphBox: this.glyphBox,
}
this.paragraphs = this.parser.parse()
const result = this.measurer.measure(dom) as MeasureResult
this.paragraphs = result.paragraphs
this.boundingBox = result.boundingBox
const characters = this.characters
characters.forEach(c => c.update())
const plugins = [...this.plugins.values()]
Expand All @@ -139,9 +144,13 @@ export class Text {
max.max(a, b)
}
})
this.renderBoundingBox = new BoundingBox(min.x, min.y, max.x - min.x, max.y - min.y)
this.renderBoundingBox = BoundingBox.from(
this.renderBoundingBox,
this.glyphBox = new BoundingBox(min.x, min.y, max.x - min.x, max.y - min.y)
const dLeft = this.glyphBox.left - result.boundingBox.left
const dRight = result.boundingBox.right - this.glyphBox.right
const dTop = this.glyphBox.top - result.boundingBox.top
const dBottom = result.boundingBox.bottom - this.glyphBox.bottom
this.glyphBox = BoundingBox.from(
this.glyphBox,
...plugins
.map((plugin) => {
if (plugin.getBoundingBox) {
Expand All @@ -151,9 +160,12 @@ export class Text {
})
.filter(Boolean) as BoundingBox[],
)
result.renderBoundingBox = this.renderBoundingBox
this.paragraphs = oldParagraphs
this.renderBoundingBox = oldRenderBoundingBox
result.glyphBox = this.glyphBox
result.boundingBox.width = this.glyphBox.width + dLeft + dRight
result.boundingBox.height = this.glyphBox.height + dTop + dBottom
this.paragraphs = old.paragraphs
this.boundingBox = old.boundingBox
this.glyphBox = old.glyphBox
return result
}

Expand All @@ -163,10 +175,10 @@ export class Text {
}

update(): this {
const { paragraphs, boundingBox, renderBoundingBox } = this.measure()
const { paragraphs, boundingBox, glyphBox } = this.measure()
this.paragraphs = paragraphs
this.boundingBox = boundingBox
this.renderBoundingBox = renderBoundingBox
this.glyphBox = glyphBox
return this
}

Expand All @@ -179,7 +191,7 @@ export class Text {
if (this.needsUpdate) {
this.update()
}
setupView(ctx, pixelRatio, this.renderBoundingBox)
setupView(ctx, pixelRatio, this.boundingBox)
uploadColors(ctx, this)
const plugins = [...this.plugins.values()]
plugins
Expand Down
4 changes: 2 additions & 2 deletions src/canvas/uploadColors.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@ import type { Text } from '../Text'
import { uploadColor } from './color'

export function uploadColors(ctx: CanvasRenderingContext2D, text: Text): void {
const { paragraphs, computedStyle: style, renderBoundingBox } = text
uploadColor(style, renderBoundingBox, ctx)
const { paragraphs, computedStyle: style, glyphBox } = text
uploadColor(style, glyphBox, ctx)
paragraphs.forEach((paragraph) => {
uploadColor(paragraph.computedStyle, paragraph.lineBox, ctx)
paragraph.fragments.forEach((fragment) => {
Expand Down
8 changes: 4 additions & 4 deletions src/plugins/render.ts
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export function render(): Plugin {
return boxes.length ? BoundingBox.from(...boxes) : undefined
},
render: (ctx, text) => {
const { characters, paragraphs, renderBoundingBox, effects, style } = text
const { characters, paragraphs, glyphBox, effects, style } = text
function fillBackground(color: any, box: BoundingBox): void {
ctx.fillStyle = color
ctx.fillRect(box.left, box.top, box.width, box.height)
Expand All @@ -58,7 +58,7 @@ export function render(): Plugin {
})
if (effects) {
effects.forEach((style) => {
uploadColor(style, renderBoundingBox, ctx)
uploadColor(style, glyphBox, ctx)
ctx.save()
const [a, c, e, b, d, f] = getTransform2D(text, style).transpose().elements
ctx.transform(a, b, c, d, e, f)
Expand Down Expand Up @@ -88,13 +88,13 @@ export function render(): Plugin {
}

export function getTransform2D(text: Text, style: Partial<TextStyle>): Matrix3 {
const { fontSize, renderBoundingBox } = text
const { fontSize, glyphBox } = text
const translateX = (style.translateX ?? 0) * fontSize
const translateY = (style.translateY ?? 0) * fontSize
const PI_2 = Math.PI * 2
const skewX = ((style.skewX ?? 0) / 360) * PI_2
const skewY = ((style.skewY ?? 0) / 360) * PI_2
const { left, top, width, height } = renderBoundingBox
const { left, top, width, height } = glyphBox
const centerX = left + width / 2
const centerY = top + height / 2
tempM1.identity()
Expand Down

0 comments on commit 89e756d

Please sign in to comment.