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

fix: text shape in svg (#886)

Browse source
This commit is contained in:
Judicael 2022-08-06 15:41:42 +03:00 committed by GitHub
parent c527e0547b
commit 6b023ee596
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
packages/tldraw/src/state/shapes/TDShapeUtil.tsx
View file

@ -184,13 +184,7 @@ export abstract class TDShapeUtil<T extends TDShape, E extends Element = any> ex
const bounds = this.getBounds(shape) const bounds = this.getBounds(shape)
const labelElm = getTextSvgElement(s['label'], shape.style, bounds) const labelElm = getTextSvgElement(s['label'], shape.style, bounds)
labelElm.setAttribute('fill', getShapeStyle(shape.style, isDarkMode).stroke) labelElm.setAttribute('fill', getShapeStyle(shape.style, isDarkMode).stroke)
const font = getFontStyle(shape.style)
const size = getTextLabelSize(s['label'], font)
labelElm.setAttribute('transform-origin', 'top left') labelElm.setAttribute('transform-origin', 'top left')
labelElm.setAttribute(
'transform',
`translate(${bounds.width / 2}, ${(bounds.height - size[1]) / 2})`
)
g.setAttribute('text-align', 'center') g.setAttribute('text-align', 'center')
g.setAttribute('text-anchor', 'middle') g.setAttribute('text-anchor', 'middle')
g.appendChild(elm) g.appendChild(elm)

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

@ -2,16 +2,20 @@ import type { TLBounds } from '@tldraw/core'
import { LINE_HEIGHT } from '~constants' import { LINE_HEIGHT } from '~constants'
import { AlignStyle, ShapeStyles } from '~types' import { AlignStyle, ShapeStyles } from '~types'
import { getTextAlign } from './getTextAlign' import { getTextAlign } from './getTextAlign'
import { getFontFace, getFontSize } from './shape-styles' import { getTextLabelSize } from './getTextSize'
import { getFontFace, getFontSize, getFontStyle } from './shape-styles'
export function getTextSvgElement(text: string, style: ShapeStyles, bounds: TLBounds) { export function getTextSvgElement(text: string, style: ShapeStyles, bounds: TLBounds) {
const fontSize = getFontSize(style.size, style.font) const fontSize = getFontSize(style.size, style.font)
const g = document.createElementNS('http://www.w3.org/2000/svg', 'g') const g = document.createElementNS('http://www.w3.org/2000/svg', 'g')
const scale = style.scale ?? 1 const scale = style.scale ?? 1
const font = getFontStyle(style)
const [, height] = getTextLabelSize(text, font)
const textLines = text.split('\n').map((line, i) => { const textLines = text.split('\n').map((line, i) => {
const textElm = document.createElementNS('http://www.w3.org/2000/svg', 'text') const textElm = document.createElementNS('http://www.w3.org/2000/svg', 'text')
textElm.textContent = line textElm.textContent = line
textElm.setAttribute('y', fontSize * (0.5 + i * LINE_HEIGHT) + '') textElm.setAttribute('y', fontSize * (0.5 + i * LINE_HEIGHT) + '')
textElm.setAttribute('letter-spacing', fontSize * -0.03 + '') textElm.setAttribute('letter-spacing', fontSize * -0.03 + '')
textElm.setAttribute('font-size', fontSize + 'px') textElm.setAttribute('font-size', fontSize + 'px')
@ -19,6 +23,11 @@ export function getTextSvgElement(text: string, style: ShapeStyles, bounds: TLBo
textElm.setAttribute('text-align', getTextAlign(style.textAlign)) textElm.setAttribute('text-align', getTextAlign(style.textAlign))
textElm.setAttribute('text-align', getTextAlign(style.textAlign)) textElm.setAttribute('text-align', getTextAlign(style.textAlign))
textElm.setAttribute('alignment-baseline', 'central') textElm.setAttribute('alignment-baseline', 'central')
const [width] = getTextLabelSize(line, font)
textElm.setAttribute(
'transform',
`translate(${(bounds.width - width) / 2}, ${(bounds.height - height) / 2})`
)
if (style.scale !== 1) { if (style.scale !== 1) {
textElm.setAttribute('transform', `scale(${style.scale})`) textElm.setAttribute('transform', `scale(${style.scale})`)
} }