From 0e54994187b5d67d012447f4a2f677fe45e4ac7b Mon Sep 17 00:00:00 2001 From: Aakansha Doshi Date: Wed, 1 Mar 2023 13:38:03 +0530 Subject: [PATCH] rename to getLineHeight and use the same line height for regular text elements --- src/components/App.tsx | 4 ++-- src/element/textElement.ts | 16 ++++++++-------- src/element/textWysiwyg.tsx | 21 ++++++--------------- src/renderer/renderElement.ts | 4 ++-- src/tests/clipboard.test.tsx | 6 +++--- 5 files changed, 21 insertions(+), 30 deletions(-) diff --git a/src/components/App.tsx b/src/components/App.tsx index 5b9311f8d..61abcd701 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -259,7 +259,7 @@ import throttle from "lodash.throttle"; import { fileOpen, FileSystemHandle } from "../data/filesystem"; import { bindTextToShapeAfterDuplication, - getApproxLineHeight, + getLineHeight, getApproxMinLineHeight, getApproxMinLineWidth, getBoundTextElement, @@ -1734,7 +1734,7 @@ class App extends React.Component { // add paragraph only if previous line was not empty, IOW don't add // more than one empty line if (prevLine) { - const defaultLineHeight = getApproxLineHeight( + const defaultLineHeight = getLineHeight( getFontString({ fontSize: textElementProps.fontSize, fontFamily: textElementProps.fontFamily, diff --git a/src/element/textElement.ts b/src/element/textElement.ts index 567e37943..85a036c46 100644 --- a/src/element/textElement.ts +++ b/src/element/textElement.ts @@ -275,17 +275,17 @@ export const measureText = (text: string, font: FontString) => { }; const DUMMY_TEXT = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789".toLocaleUpperCase(); -const cacheApproxLineHeight: { [key: FontString]: number } = {}; +const cacheLineHeight: { [key: FontString]: number } = {}; -export const getApproxLineHeight = (font: FontString) => { - if (cacheApproxLineHeight[font]) { - return cacheApproxLineHeight[font]; +export const getLineHeight = (font: FontString) => { + if (cacheLineHeight[font]) { + return cacheLineHeight[font]; } const fontSize = parseInt(font); // Calculate line height relative to font size - cacheApproxLineHeight[font] = fontSize * 1.2; - return cacheApproxLineHeight[font]; + cacheLineHeight[font] = fontSize * 1.2; + return cacheLineHeight[font]; }; let canvas: HTMLCanvasElement | undefined; @@ -318,7 +318,7 @@ export const getTextWidth = (text: string, font: FontString) => { export const getTextHeight = (text: string, font: FontString) => { const lines = text.replace(/\r\n?/g, "\n").split("\n"); - const lineHeight = getApproxLineHeight(font); + const lineHeight = getLineHeight(font); return lineHeight * lines.length; }; @@ -473,7 +473,7 @@ export const getApproxMinLineWidth = (font: FontString) => { }; export const getApproxMinLineHeight = (font: FontString) => { - return getApproxLineHeight(font) + BOUND_TEXT_PADDING * 2; + return getLineHeight(font) + BOUND_TEXT_PADDING * 2; }; export const getMinCharWidth = (font: FontString) => { diff --git a/src/element/textWysiwyg.tsx b/src/element/textWysiwyg.tsx index d35c40aab..87a6a6b07 100644 --- a/src/element/textWysiwyg.tsx +++ b/src/element/textWysiwyg.tsx @@ -22,7 +22,7 @@ import { import { AppState } from "../types"; import { mutateElement } from "./mutateElement"; import { - getApproxLineHeight, + getLineHeight, getBoundTextElementId, getContainerDims, getContainerElement, @@ -151,9 +151,8 @@ export const textWysiwyg = ({ return; } const { textAlign, verticalAlign } = updatedTextElement; - const approxLineHeight = getApproxLineHeight( - getFontString(updatedTextElement), - ); + const lineHeight = getLineHeight(getFontString(updatedTextElement)); + if (updatedTextElement && isTextElement(updatedTextElement)) { let coordX = updatedTextElement.x; let coordY = updatedTextElement.y; @@ -211,10 +210,7 @@ export const textWysiwyg = ({ // autogrow container height if text exceeds if (!isArrowElement(container) && textElementHeight > maxHeight) { - const diff = Math.min( - textElementHeight - maxHeight, - approxLineHeight, - ); + const diff = Math.min(textElementHeight - maxHeight, lineHeight); mutateElement(container, { height: containerDims.height + diff }); return; } else if ( @@ -224,10 +220,7 @@ export const textWysiwyg = ({ containerDims.height > originalContainerData.height && textElementHeight < maxHeight ) { - const diff = Math.min( - maxHeight - textElementHeight, - approxLineHeight, - ); + const diff = Math.min(maxHeight - textElementHeight, lineHeight); mutateElement(container, { height: containerDims.height - diff }); } else { const { y } = computeBoundTextPosition( @@ -257,9 +250,7 @@ export const textWysiwyg = ({ } const lines = updatedTextElement.originalText.split("\n"); - const lineHeight = updatedTextElement.containerId - ? approxLineHeight - : updatedTextElement.height / lines.length; + if (!container) { maxWidth = (appState.width - 8 - viewportX) / appState.zoom.value; textElementWidth = Math.min(textElementWidth, maxWidth); diff --git a/src/renderer/renderElement.ts b/src/renderer/renderElement.ts index d39b9fbb6..1b9561573 100644 --- a/src/renderer/renderElement.ts +++ b/src/renderer/renderElement.ts @@ -39,7 +39,7 @@ import { } from "../constants"; import { getStroke, StrokeOptions } from "perfect-freehand"; import { - getApproxLineHeight, + getLineHeight, getBoundTextElement, getContainerElement, } from "../element/textElement"; @@ -276,7 +276,7 @@ const drawElementOnCanvas = ( // Canvas does not support multiline text by default const lines = element.text.replace(/\r\n?/g, "\n").split("\n"); const lineHeight = element.containerId - ? getApproxLineHeight(getFontString(element)) + ? getLineHeight(getFontString(element)) : element.height / lines.length; const horizontalOffset = element.textAlign === "center" diff --git a/src/tests/clipboard.test.tsx b/src/tests/clipboard.test.tsx index 26fcf4f0b..784226d67 100644 --- a/src/tests/clipboard.test.tsx +++ b/src/tests/clipboard.test.tsx @@ -3,7 +3,7 @@ import { render, waitFor, GlobalTestState } from "./test-utils"; import { Pointer, Keyboard } from "./helpers/ui"; import ExcalidrawApp from "../excalidraw-app"; import { KEYS } from "../keys"; -import { getApproxLineHeight } from "../element/textElement"; +import { getLineHeight } from "../element/textElement"; import { getFontString } from "../utils"; import { getElementBounds } from "../element"; import { NormalizedZoomValue } from "../types"; @@ -119,7 +119,7 @@ describe("paste text as single lines", () => { it("should space items correctly", async () => { const text = "hkhkjhki\njgkjhffjh\njgkjhffjh"; const lineHeight = - getApproxLineHeight( + getLineHeight( getFontString({ fontSize: h.app.state.currentItemFontSize, fontFamily: h.app.state.currentItemFontFamily, @@ -143,7 +143,7 @@ describe("paste text as single lines", () => { it("should leave a space for blank new lines", async () => { const text = "hkhkjhki\n\njgkjhffjh"; const lineHeight = - getApproxLineHeight( + getLineHeight( getFontString({ fontSize: h.app.state.currentItemFontSize, fontFamily: h.app.state.currentItemFontFamily,