[fix] fix text shapes bugs (#509)

* cleanup

* Fix text size, and slash

* Remove console.log
This commit is contained in:
Steve Ruiz 2022-01-14 20:35:11 +00:00 committed by GitHub
parent bff8b3cc07
commit 08a930f59c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 10 additions and 11 deletions

View file

@ -878,7 +878,11 @@ export class TLDR {
static fixNewLines = /\r?\n|\r/g
static normalizeText(text: string) {
return text.replace(TLDR.fixNewLines, '\n')
return text
.replace(TLDR.fixNewLines, '\n')
.split('\n')
.map((x) => x || ' ')
.join('\n')
}
/* -------------------------------------------------- */

View file

@ -2920,7 +2920,7 @@ export class TldrawApp extends StateManager<TDSnapshot> {
onKeyDown: TLKeyboardEventHandler = (key, info, e) => {
switch (e.key) {
case '/': {
if (this.status === 'idle') {
if (this.status === 'idle' && !this.pageState.editingId) {
const { shiftKey, metaKey, altKey, ctrlKey, spaceKey } = this
this.onPointerDown(
@ -3562,7 +3562,6 @@ export class TldrawApp extends StateManager<TDSnapshot> {
isZoomSnap: false,
isFocusMode: false,
isSnapping: false,
//@ts-ignore
isDebugMode: process.env.NODE_ENV === 'development',
isReadonlyMode: false,
nudgeDistanceLarge: 16,

View file

@ -3,7 +3,6 @@ import * as React from 'react'
import { Utils, HTMLContainer, TLBounds } from '@tldraw/core'
import { defaultTextStyle, getShapeStyle, getFontStyle } from '../shared/shape-styles'
import { TextShape, TDMeta, TDShapeType, TransformInfo, AlignStyle } from '~types'
import { TextAreaUtils } from '../shared'
import { BINDING_DISTANCE, GHOSTED_OPACITY, LETTER_SPACING } from '~constants'
import { TDShapeUtil } from '../TDShapeUtil'
import { styled } from '~styles'
@ -219,7 +218,7 @@ export class TextUtil extends TDShapeUtil<T, E> {
return { minX: 0, minY: 0, maxX: 10, maxY: 10, width: 10, height: 10 }
}
melm.innerHTML = `${shape.text}&zwj;`
melm.textContent = shape.text
melm.style.font = getFontStyle(shape.style)
// In tests, offsetWidth and offsetHeight will be 0
@ -334,7 +333,7 @@ function getMeasurementDiv() {
border: '1px solid transparent',
padding: '4px',
margin: '0px',
letterSpacing: `${LETTER_SPACING}px`,
letterSpacing: LETTER_SPACING,
opacity: '0',
position: 'absolute',
top: '-500px',

View file

@ -16,7 +16,7 @@ function getMeasurementDiv() {
border: '1px solid transparent',
padding: '4px',
margin: '0px',
letterSpacing: `${LETTER_SPACING}px`,
letterSpacing: LETTER_SPACING,
opacity: '0',
position: 'absolute',
top: '-500px',
@ -59,7 +59,7 @@ export function getTextLabelSize(text: string, font: string) {
prevText = text
prevFont = font
melm.innerHTML = `${text}&zwj;`
melm.textContent = `${text}`
melm.style.font = font
// In tests, offsetWidth and offsetHeight will be 0

View file

@ -16,7 +16,6 @@ export function transformRectangle<T extends TLShape & { size: number[] }>(
const size = Vec.toFixed(
Vec.mul(initialShape.size, Math.min(Math.abs(scaleX), Math.abs(scaleY)))
)
const point = Vec.toFixed([
bounds.minX +
(bounds.width - shape.size[0]) * (scaleX < 0 ? 1 - transformOrigin[0] : transformOrigin[0]),
@ -24,14 +23,12 @@ export function transformRectangle<T extends TLShape & { size: number[] }>(
(bounds.height - shape.size[1]) *
(scaleY < 0 ? 1 - transformOrigin[1] : transformOrigin[1]),
])
const rotation =
(scaleX < 0 && scaleY >= 0) || (scaleY < 0 && scaleX >= 0)
? initialShape.rotation
? -initialShape.rotation
: 0
: initialShape.rotation
return {
size,
point,