From 47c888c10a83645003a7503b2b5648e0f522cee4 Mon Sep 17 00:00:00 2001 From: Steve Ruiz Date: Sun, 14 Apr 2024 13:24:33 +0100 Subject: [PATCH] update text tests (strange) --- apps/examples/e2e/tests/test-text.spec.ts | 178 +++++++++--------- packages/editor/editor.css | 7 - .../src/lib/shapes/note/NoteShapeUtil.tsx | 2 +- .../tldraw/src/lib/shapes/note/noteHelpers.ts | 2 +- .../src/lib/shapes/shared/TextHelpers.ts | 41 ---- .../lib/tools/SelectTool/childStates/Idle.ts | 3 +- .../SelectTool/childStates/PointingHandle.ts | 2 +- .../src/lib/tools/SelectTool/selectHelpers.ts | 40 ++++ 8 files changed, 133 insertions(+), 142 deletions(-) diff --git a/apps/examples/e2e/tests/test-text.spec.ts b/apps/examples/e2e/tests/test-text.spec.ts index eed0013eb..cade612cf 100644 --- a/apps/examples/e2e/tests/test-text.spec.ts +++ b/apps/examples/e2e/tests/test-text.spec.ts @@ -107,94 +107,6 @@ test.describe('text measurement', () => { expect(formatLines(spans)).toEqual([['tes'], ['ting']]) }) - test('for auto-font-sizing shapes, should do normal font size for text that does not have long words', async () => { - const shape = await page.evaluate(() => { - const id = 'shape:testShape' as TLShapeId - editor.createShapes([ - { - id, - type: 'note', - x: 0, - y: 0, - props: { - text: 'this is just some regular text', - size: 'xl', - }, - }, - ]) - - return editor.getShape(id) as TLNoteShape - }) - - expect(shape.props.fontSizeAdjustment).toEqual(32) - }) - - test('for auto-font-sizing shapes, should auto-size text that have slightly long words', async () => { - const shape = await page.evaluate(() => { - const id = 'shape:testShape' as TLShapeId - editor.createShapes([ - { - id, - type: 'note', - x: 0, - y: 0, - props: { - text: 'Amsterdam', - size: 'xl', - }, - }, - ]) - - return editor.getShape(id) as TLNoteShape - }) - - expect(shape.props.fontSizeAdjustment).toEqual(27) - }) - - test('for auto-font-sizing shapes, should auto-size text that have long words', async () => { - const shape = await page.evaluate(() => { - const id = 'shape:testShape' as TLShapeId - editor.createShapes([ - { - id, - type: 'note', - x: 0, - y: 0, - props: { - text: 'this is a tentoonstelling', - size: 'xl', - }, - }, - ]) - - return editor.getShape(id) as TLNoteShape - }) - - expect(shape.props.fontSizeAdjustment).toEqual(20) - }) - - test('for auto-font-sizing shapes, should wrap text that has words that are way too long', async () => { - const shape = await page.evaluate(() => { - const id = 'shape:testShape' as TLShapeId - editor.createShapes([ - { - id, - type: 'note', - x: 0, - y: 0, - props: { - text: 'a very long dutch word like ziekenhuisinrichtingsmaatschappij', - size: 'xl', - }, - }, - ]) - - return editor.getShape(id) as TLNoteShape - }) - - expect(shape.props.fontSizeAdjustment).toEqual(14) - }) - test('should preserve whitespace at line breaks', async () => { const spans = await page.evaluate< { text: string; box: BoxModel }[], @@ -245,7 +157,7 @@ test.describe('text measurement', () => { measureTextSpansOptions ) - expect(formatLines(spans)).toEqual([[' ', 'testing', ' ', 'testing']]) + expect(formatLines(spans)).toEqual([[' ', 'testing', ' '], ['testing']]) }) test('should place starting whitespace on its own line if it has to', async () => { @@ -330,4 +242,92 @@ test.describe('text measurement', () => { expect(formatLines(spans)).toEqual([[' \n'], [' \n'], [' \n'], [' ']]) }) + + test('for auto-font-sizing shapes, should do normal font size for text that does not have long words', async () => { + const shape = await page.evaluate(() => { + const id = 'shape:testShape' as TLShapeId + editor.createShapes([ + { + id, + type: 'note', + x: 0, + y: 0, + props: { + text: 'this is just some regular text', + size: 'xl', + }, + }, + ]) + + return editor.getShape(id) as TLNoteShape + }) + + expect(shape.props.fontSizeAdjustment).toEqual(32) + }) + + test('for auto-font-sizing shapes, should auto-size text that have slightly long words', async () => { + const shape = await page.evaluate(() => { + const id = 'shape:testShape' as TLShapeId + editor.createShapes([ + { + id, + type: 'note', + x: 0, + y: 0, + props: { + text: 'Amsterdam', + size: 'xl', + }, + }, + ]) + + return editor.getShape(id) as TLNoteShape + }) + + expect(shape.props.fontSizeAdjustment).toEqual(28) + }) + + test('for auto-font-sizing shapes, should auto-size text that have long words', async () => { + const shape = await page.evaluate(() => { + const id = 'shape:testShape' as TLShapeId + editor.createShapes([ + { + id, + type: 'note', + x: 0, + y: 0, + props: { + text: 'this is a tentoonstelling', + size: 'xl', + }, + }, + ]) + + return editor.getShape(id) as TLNoteShape + }) + + expect(shape.props.fontSizeAdjustment).toEqual(21) + }) + + test('for auto-font-sizing shapes, should wrap text that has words that are way too long', async () => { + const shape = await page.evaluate(() => { + const id = 'shape:testShape' as TLShapeId + editor.createShapes([ + { + id, + type: 'note', + x: 0, + y: 0, + props: { + text: 'a very long dutch word like ziekenhuisinrichtingsmaatschappij', + size: 'xl', + }, + }, + ]) + + return editor.getShape(id) as TLNoteShape + }) + + expect(shape.props.fontSizeAdjustment).toEqual(14) + }) }) diff --git a/packages/editor/editor.css b/packages/editor/editor.css index 6b86b0998..150146e56 100644 --- a/packages/editor/editor.css +++ b/packages/editor/editor.css @@ -1184,13 +1184,6 @@ input, color: currentColor; } -.tl-note-svg { - box-shadow: - 0px 4px 5px -5px rgba(15, 23, 31, 0.6), - 0px 11px 13px -10px rgba(15, 23, 31, 0.4), - 0px 48px 10px -10px inset rgba(15, 23, 44, 0.03); -} - /* --------------------- Loading -------------------- */ .tl-loading { diff --git a/packages/tldraw/src/lib/shapes/note/NoteShapeUtil.tsx b/packages/tldraw/src/lib/shapes/note/NoteShapeUtil.tsx index fd1818e58..b6824633f 100644 --- a/packages/tldraw/src/lib/shapes/note/NoteShapeUtil.tsx +++ b/packages/tldraw/src/lib/shapes/note/NoteShapeUtil.tsx @@ -35,7 +35,7 @@ import { } from '../shared/default-shape-constants' import { getFontDefForExport } from '../shared/defaultStyleDefs' -import { startEditingShapeWithLabel } from '../shared/TextHelpers' +import { startEditingShapeWithLabel } from '../../tools/SelectTool/selectHelpers' import { useForceSolid } from '../shared/useForceSolid' import { ADJACENT_NOTE_MARGIN, diff --git a/packages/tldraw/src/lib/shapes/note/noteHelpers.ts b/packages/tldraw/src/lib/shapes/note/noteHelpers.ts index 9f3965b1b..dabf4bf33 100644 --- a/packages/tldraw/src/lib/shapes/note/noteHelpers.ts +++ b/packages/tldraw/src/lib/shapes/note/noteHelpers.ts @@ -1,5 +1,5 @@ import { Editor, TLNoteShape, TLShape, Vec, compact, createShapeId } from '@tldraw/editor' -import { zoomToShapeIfOffscreen } from '../shared/TextHelpers' +import { zoomToShapeIfOffscreen } from '../../tools/SelectTool/selectHelpers' /** @internal */ export const ADJACENT_NOTE_MARGIN = 20 diff --git a/packages/tldraw/src/lib/shapes/shared/TextHelpers.ts b/packages/tldraw/src/lib/shapes/shared/TextHelpers.ts index ee56921c5..cda4cbb34 100644 --- a/packages/tldraw/src/lib/shapes/shared/TextHelpers.ts +++ b/packages/tldraw/src/lib/shapes/shared/TextHelpers.ts @@ -4,8 +4,6 @@ * Copyright (c) Federico Brigante (bfred.it) */ -import { ANIMATION_MEDIUM_MS, Editor, TLShape } from '@tldraw/editor' - // TODO: Most of this file can be moved into a DOM utils library. /** @internal */ @@ -292,42 +290,3 @@ function getCaretIndex(element: HTMLElement) { } return position } - -/** @internal */ -export function startEditingShapeWithLabel(editor: Editor, shape: TLShape, selectAll = false) { - // Finish this shape and start editing the next one - editor.select(shape) - editor.setEditingShape(shape) - editor.setCurrentTool('select.editing_shape', { - target: 'shape', - shape: shape, - }) - if (selectAll) { - editor.emit('select-all-text', { shapeId: shape.id }) - } - zoomToShapeIfOffscreen(editor) -} - -const ZOOM_TO_SHAPE_PADDING = 16 -export function zoomToShapeIfOffscreen(editor: Editor) { - const selectionPageBounds = editor.getSelectionPageBounds() - const viewportPageBounds = editor.getViewportPageBounds() - if (selectionPageBounds && !viewportPageBounds.contains(selectionPageBounds)) { - const eb = selectionPageBounds - .clone() - // Expand the bounds by the padding - .expandBy(ZOOM_TO_SHAPE_PADDING / editor.getZoomLevel()) - // then expand the bounds to include the viewport bounds - .expand(viewportPageBounds) - - // then use the difference between the centers to calculate the offset - const nextBounds = viewportPageBounds.clone().translate({ - x: (eb.center.x - viewportPageBounds.center.x) * 2, - y: (eb.center.y - viewportPageBounds.center.y) * 2, - }) - editor.zoomToBounds(nextBounds, { - duration: ANIMATION_MEDIUM_MS, - inset: 0, - }) - } -} diff --git a/packages/tldraw/src/lib/tools/SelectTool/childStates/Idle.ts b/packages/tldraw/src/lib/tools/SelectTool/childStates/Idle.ts index bd897d490..e9d885565 100644 --- a/packages/tldraw/src/lib/tools/SelectTool/childStates/Idle.ts +++ b/packages/tldraw/src/lib/tools/SelectTool/childStates/Idle.ts @@ -16,12 +16,11 @@ import { debugFlags, pointInPolygon, } from '@tldraw/editor' -import { startEditingShapeWithLabel } from '../../../shapes/shared/TextHelpers' import { getHitShapeOnCanvasPointerDown } from '../../selection-logic/getHitShapeOnCanvasPointerDown' import { getShouldEnterCropMode } from '../../selection-logic/getShouldEnterCropModeOnPointerDown' import { selectOnCanvasPointerUp } from '../../selection-logic/selectOnCanvasPointerUp' import { updateHoveredId } from '../../selection-logic/updateHoveredId' -import { kickoutOccludedShapes } from '../selectHelpers' +import { kickoutOccludedShapes, startEditingShapeWithLabel } from '../selectHelpers' const SKIPPED_KEYS_FOR_AUTO_EDITING = [ 'Delete', diff --git a/packages/tldraw/src/lib/tools/SelectTool/childStates/PointingHandle.ts b/packages/tldraw/src/lib/tools/SelectTool/childStates/PointingHandle.ts index d6bf19aac..138253371 100644 --- a/packages/tldraw/src/lib/tools/SelectTool/childStates/PointingHandle.ts +++ b/packages/tldraw/src/lib/tools/SelectTool/childStates/PointingHandle.ts @@ -13,7 +13,7 @@ import { getNoteAdjacentPositions, getNoteShapeForAdjacentPosition, } from '../../../shapes/note/noteHelpers' -import { startEditingShapeWithLabel } from '../../../shapes/shared/TextHelpers' +import { startEditingShapeWithLabel } from '../selectHelpers' export class PointingHandle extends StateNode { static override id = 'pointing_handle' diff --git a/packages/tldraw/src/lib/tools/SelectTool/selectHelpers.ts b/packages/tldraw/src/lib/tools/SelectTool/selectHelpers.ts index 1dac656f5..d242ed302 100644 --- a/packages/tldraw/src/lib/tools/SelectTool/selectHelpers.ts +++ b/packages/tldraw/src/lib/tools/SelectTool/selectHelpers.ts @@ -1,4 +1,5 @@ import { + ANIMATION_MEDIUM_MS, Editor, Geometry2d, Mat, @@ -113,3 +114,42 @@ export function getOccludedChildren(editor: Editor, parent: TLShape) { return results } + +/** @internal */ +export function startEditingShapeWithLabel(editor: Editor, shape: TLShape, selectAll = false) { + // Finish this shape and start editing the next one + editor.select(shape) + editor.setEditingShape(shape) + editor.setCurrentTool('select.editing_shape', { + target: 'shape', + shape: shape, + }) + if (selectAll) { + editor.emit('select-all-text', { shapeId: shape.id }) + } + zoomToShapeIfOffscreen(editor) +} + +const ZOOM_TO_SHAPE_PADDING = 16 +export function zoomToShapeIfOffscreen(editor: Editor) { + const selectionPageBounds = editor.getSelectionPageBounds() + const viewportPageBounds = editor.getViewportPageBounds() + if (selectionPageBounds && !viewportPageBounds.contains(selectionPageBounds)) { + const eb = selectionPageBounds + .clone() + // Expand the bounds by the padding + .expandBy(ZOOM_TO_SHAPE_PADDING / editor.getZoomLevel()) + // then expand the bounds to include the viewport bounds + .expand(viewportPageBounds) + + // then use the difference between the centers to calculate the offset + const nextBounds = viewportPageBounds.clone().translate({ + x: (eb.center.x - viewportPageBounds.center.x) * 2, + y: (eb.center.y - viewportPageBounds.center.y) * 2, + }) + editor.zoomToBounds(nextBounds, { + duration: ANIMATION_MEDIUM_MS, + inset: 0, + }) + } +}