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

fix: text align in a shape on export (#914)

Browse source 
* fix: text align in a shape on export

* force align type to Start for labels

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
This commit is contained in:
Judicael 2022-08-15 23:45:08 +03:00 committed by GitHub
parent 394dd87cd9
commit b54a217f13
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 12 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -8,7 +8,7 @@ import {
import { Vec } from '@tldraw/vec'
import * as React from 'react'
import { BINDING_DISTANCE } from '~constants'
import type { ShapesWithProp, TDBinding, TDMeta, TDShape, TransformInfo } from '~types'
import { AlignStyle, ShapesWithProp, TDBinding, TDMeta, TDShape, TransformInfo } from '~types'
import { getFontStyle, getShapeStyle } from './shared'
import { getTextLabelSize } from './shared/getTextSize'
import { getTextSvgElement } from './shared/getTextSvgElement'
@ -182,7 +182,11 @@ export abstract class TDShapeUtil<T extends TDShape, E extends Element = any> ex
const s = shape as TDShape & { label: string }
const g = document.createElementNS('http://www.w3.org/2000/svg', 'g')
const bounds = this.getBounds(shape)
const labelElm = getTextSvgElement(s['label'], shape.style, bounds)
const labelElm = getTextSvgElement(
s['label'],
{ ...shape.style, textAlign: AlignStyle.Start },
bounds
)
labelElm.setAttribute('fill', getShapeStyle(shape.style, isDarkMode).stroke)
labelElm.setAttribute('transform-origin', 'top left')
g.setAttribute('text-align', 'center')

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

@ -12,6 +12,7 @@ export function getTextSvgElement(text: string, style: ShapeStyles, bounds: TLBo
const font = getFontStyle(style)
const [, height] = getTextLabelSize(text, font)
const textLines = text.split('\n').map((line, i) => {
const textElm = document.createElementNS('http://www.w3.org/2000/svg', 'text')
textElm.textContent = line
@ -23,10 +24,14 @@ 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('alignment-baseline', 'central')
const [width] = getTextLabelSize(line, font)
console.log(font, scale, width, bounds.width)
textElm.setAttribute(
'transform',
`translate(${(bounds.width - width) / 2}, ${(bounds.height - height) / 2})`
`translate(${(bounds.width - width) / 2}, ${(bounds.height - height * scale) / 2})`
)
if (style.scale !== 1) {
textElm.setAttribute('transform', `scale(${style.scale})`)