From 6b023ee5964a8681a3f8f47081312f056dfc352e Mon Sep 17 00:00:00 2001 From: Judicael <46365844+judicaelandria@users.noreply.github.com> Date: Sat, 6 Aug 2022 15:41:42 +0300 Subject: [PATCH] fix: text shape in svg (#886) --- packages/tldraw/src/state/shapes/TDShapeUtil.tsx | 6 ------ .../src/state/shapes/shared/getTextSvgElement.ts | 11 ++++++++++- 2 files changed, 10 insertions(+), 7 deletions(-) diff --git a/packages/tldraw/src/state/shapes/TDShapeUtil.tsx b/packages/tldraw/src/state/shapes/TDShapeUtil.tsx index 5601b4952..27ec9754b 100644 --- a/packages/tldraw/src/state/shapes/TDShapeUtil.tsx +++ b/packages/tldraw/src/state/shapes/TDShapeUtil.tsx @@ -184,13 +184,7 @@ export abstract class TDShapeUtil ex const bounds = this.getBounds(shape) const labelElm = getTextSvgElement(s['label'], shape.style, bounds) 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', - `translate(${bounds.width / 2}, ${(bounds.height - size[1]) / 2})` - ) g.setAttribute('text-align', 'center') g.setAttribute('text-anchor', 'middle') g.appendChild(elm) diff --git a/packages/tldraw/src/state/shapes/shared/getTextSvgElement.ts b/packages/tldraw/src/state/shapes/shared/getTextSvgElement.ts index fbeaa6bb1..3d3c30d2d 100644 --- a/packages/tldraw/src/state/shapes/shared/getTextSvgElement.ts +++ b/packages/tldraw/src/state/shapes/shared/getTextSvgElement.ts @@ -2,16 +2,20 @@ import type { TLBounds } from '@tldraw/core' import { LINE_HEIGHT } from '~constants' import { AlignStyle, ShapeStyles } from '~types' 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) { const fontSize = getFontSize(style.size, style.font) const g = document.createElementNS('http://www.w3.org/2000/svg', 'g') const scale = style.scale ?? 1 + 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 + textElm.setAttribute('y', fontSize * (0.5 + i * LINE_HEIGHT) + '') textElm.setAttribute('letter-spacing', fontSize * -0.03 + '') 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('alignment-baseline', 'central') + const [width] = getTextLabelSize(line, font) + textElm.setAttribute( + 'transform', + `translate(${(bounds.width - width) / 2}, ${(bounds.height - height) / 2})` + ) if (style.scale !== 1) { textElm.setAttribute('transform', `scale(${style.scale})`) }