PrivateCoffee/tldraw
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Fix scaled text (#687)

Browse source
This commit is contained in:
Steve Ruiz 2022-05-15 10:40:22 +01:00 committed by GitHub
parent cd465e2fc4
commit e32815eaec
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 9 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/tldraw/src/constants.ts
View file

@ -1,6 +1,6 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
export const LETTER_SPACING = '-0.03em'
export const LINE_HEIGHT = 1.3
export const LINE_HEIGHT = 1
export const GRID_SIZE = 8
export const SVG_EXPORT_PADDING = 16
export const BINDING_DISTANCE = 16

1
packages/tldraw/src/state/shapes/TextUtil/TextUtil.tsx
View file

@ -341,6 +341,7 @@ export class TextUtil extends TDShapeUtil<T, E> {
const style = getShapeStyle(shape.style, isDarkMode)
const elm = getTextSvgElement(shape.text, shape.style, bounds)
elm.setAttribute('fill', style.stroke)
return elm
}
}

10
packages/tldraw/src/state/shapes/shared/getTextSvgElement.ts
View file

@ -7,17 +7,21 @@ import { LINE_HEIGHT } from '~constants'
export function getTextSvgElement(text: string, style: ShapeStyles, bounds: TLBounds) {
const fontSize = getFontSize(style.size, style.font)
const g = document.createElementNS('http://www.w3.org/2000/svg', 'g')
const scale = style.scale ?? 1
const textLines = text.split('\n').map((line, i) => {
const textElm = document.createElementNS('http://www.w3.org/2000/svg', 'text')
textElm.textContent = line
textElm.setAttribute('y', LINE_HEIGHT * fontSize * (0.5 + i) + '')
textElm.setAttribute('y', fontSize * (0.5 + i * LINE_HEIGHT) + '')
textElm.setAttribute('letter-spacing', fontSize * -0.03 + '')
textElm.setAttribute('font-size', fontSize + 'px')
textElm.setAttribute('font-family', getFontFace(style.font).slice(1, -1))
textElm.setAttribute('text-align', getTextAlign(style.textAlign))
textElm.setAttribute('text-align', getTextAlign(style.textAlign))
textElm.setAttribute('alignment-baseline', 'central')
if (style.scale !== 1) {
textElm.setAttribute('transform', `scale(${style.scale})`)
}
g.appendChild(textElm)
return textElm
@ -28,14 +32,14 @@ export function getTextSvgElement(text: string, style: ShapeStyles, bounds: TLBo
g.setAttribute('text-align', 'center')
g.setAttribute('text-anchor', 'middle')
textLines.forEach((textElm) => {
textElm.setAttribute('x', bounds.width / 2 + '')
textElm.setAttribute('x', bounds.width / 2 / scale + '')
})
break
}
case AlignStyle.End: {
g.setAttribute('text-align', 'right')
g.setAttribute('text-anchor', 'end')
textLines.forEach((textElm) => textElm.setAttribute('x', bounds.width + ''))
textLines.forEach((textElm) => textElm.setAttribute('x', bounds.width / scale + ''))
break
}
case AlignStyle.Start: {