tldraw 5.2.0-next.e2b8d10bf10e → 5.2.0

package/dist-cjs/lib/shapes/note/noteHelpers.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/shapes/note/noteHelpers.ts"],
-  "sourcesContent": ["import {\n\tEditor,\n\tIndexKey,\n\tTLNoteShape,\n\tTLShape,\n\tVec,\n\tcompact,\n\tcreateShapeId,\n\ttoRichText,\n} from '@tldraw/editor'\n\n/** @internal */\nexport const CLONE_HANDLE_MARGIN = 0\n/** @internal */\nexport const NOTE_ADJACENT_POSITION_SNAP_RADIUS = 10\n\nconst BASE_NOTE_POSITIONS = (editor: Editor, noteWidth: number, noteHeight: number) =>\n\t[\n\t\t[\n\t\t\t['a1' as IndexKey],\n\t\t\tnew Vec(noteWidth * 0.5, noteHeight * -0.5 - editor.options.adjacentShapeMargin),\n\t\t], // t\n\t\t[\n\t\t\t['a2' as IndexKey],\n\t\t\tnew Vec(noteWidth * 1.5 + editor.options.adjacentShapeMargin, noteHeight * 0.5),\n\t\t], // r\n\t\t[\n\t\t\t['a3' as IndexKey],\n\t\t\tnew Vec(noteWidth * 0.5, noteHeight * 1.5 + editor.options.adjacentShapeMargin),\n\t\t], // b\n\t\t[\n\t\t\t['a4' as IndexKey],\n\t\t\tnew Vec(noteWidth * -0.5 - editor.options.adjacentShapeMargin, noteHeight * 0.5),\n\t\t], // l\n\t] as const\n\nfunction getBaseAdjacentNotePositions(\n\teditor: Editor,\n\tscale: number,\n\tnoteWidth: number,\n\tnoteHeight: number\n) {\n\tif (scale === 1) return BASE_NOTE_POSITIONS(editor, noteWidth, noteHeight)\n\tconst w = noteWidth * scale\n\tconst h = noteHeight * scale\n\tconst m = editor.options.adjacentShapeMargin * scale\n\treturn [\n\t\t[['a1' as IndexKey], new Vec(w * 0.5, h * -0.5 - m)], // t\n\t\t[['a2' as IndexKey], new Vec(w * 1.5 + m, h * 0.5)], // r\n\t\t[['a3' as IndexKey], new Vec(w * 0.5, h * 1.5 + m)], // b\n\t\t[['a4' as IndexKey], new Vec(w * -0.5 - m, h * 0.5)], // l\n\t] as const\n}\n\n/** @internal */\nexport interface NoteAdjacentPositionsOpts {\n\tpagePoint: Vec\n\tpageRotation: number\n\tgrowY: number\n\textraHeight: number\n\tscale: number\n\tnoteWidth: number\n\tnoteHeight: number\n}\n\n/**\n * Get the adjacent positions for a particular note shape.\n *\n * @internal */\nexport function getNoteAdjacentPositions(\n\teditor: Editor,\n\topts: NoteAdjacentPositionsOpts\n): Record<IndexKey, Vec> {\n\tconst { pagePoint, pageRotation, growY, extraHeight, scale, noteWidth, noteHeight } = opts\n\treturn Object.fromEntries(\n\t\tgetBaseAdjacentNotePositions(editor, scale, noteWidth, noteHeight).map(([id, v], i) => {\n\t\t\tconst point = v.clone()\n\t\t\tif (i === 0 && extraHeight) {\n\t\t\t\t// apply top margin (the growY of the moving note shape)\n\t\t\t\tpoint.y -= extraHeight\n\t\t\t} else if (i === 2 && growY) {\n\t\t\t\t// apply bottom margin (the growY of this note shape)\n\t\t\t\tpoint.y += growY\n\t\t\t}\n\t\t\treturn [id, point.rot(pageRotation).add(pagePoint)]\n\t\t})\n\t)\n}\n\n/** @internal */\nexport interface AvailableNoteAdjacentPositionsOpts {\n\trotation: number\n\tscale: number\n\textraHeight: number\n\tnoteWidth: number\n\tnoteHeight: number\n}\n\n/**\n * Get all of the available note adjacent positions, excluding the selected shapes.\n *\n * @internal */\nexport function getAvailableNoteAdjacentPositions(\n\teditor: Editor,\n\topts: AvailableNoteAdjacentPositionsOpts\n) {\n\tconst { rotation, scale, extraHeight, noteWidth, noteHeight } = opts\n\tconst selectedShapeIds = new Set(editor.getSelectedShapeIds())\n\tconst minSize =\n\t\t(Math.max(noteWidth, noteHeight) + editor.options.adjacentShapeMargin + extraHeight) ** 2\n\tconst allCenters = new Map<TLNoteShape, Vec>()\n\tconst positions: (Vec | undefined)[] = []\n\n\t// Get all the positions that are adjacent to the selected note shapes\n\tfor (const shape of editor.getCurrentPageShapes()) {\n\t\tif (\n\t\t\t!editor.isShapeOfType(shape, 'note') ||\n\t\t\tscale !== shape.props.scale ||\n\t\t\tselectedShapeIds.has(shape.id)\n\t\t) {\n\t\t\tcontinue\n\t\t}\n\n\t\tconst transform = editor.getShapePageTransform(shape.id)!\n\n\t\t// If the note has a different rotation, we can't use its adjacent positions\n\t\tif (rotation !== transform.rotation()) continue\n\n\t\t// Save the unselected note shape's center\n\t\tallCenters.set(shape, editor.getShapePageBounds(shape)!.center)\n\n\t\t// And push its position to the positions array\n\t\tpositions.push(\n\t\t\t...Object.values(\n\t\t\t\tgetNoteAdjacentPositions(editor, {\n\t\t\t\t\tpagePoint: transform.point(),\n\t\t\t\t\tpageRotation: rotation,\n\t\t\t\t\tgrowY: shape.props.growY,\n\t\t\t\t\textraHeight,\n\t\t\t\t\tscale,\n\t\t\t\t\tnoteWidth,\n\t\t\t\t\tnoteHeight,\n\t\t\t\t})\n\t\t\t)\n\t\t)\n\t}\n\n\t// Remove positions that are inside of another note shape\n\tconst len = positions.length\n\tlet position: Vec | undefined\n\tfor (const [shape, center] of allCenters) {\n\t\tfor (let i = 0; i < len; i++) {\n\t\t\tposition = positions[i]\n\t\t\tif (!position) continue\n\t\t\tif (Vec.Dist2(center, position) > minSize) continue\n\t\t\tif (editor.isPointInShape(shape, position)) {\n\t\t\t\tpositions[i] = undefined\n\t\t\t}\n\t\t}\n\t}\n\n\treturn compact(positions)\n}\n\n/** @internal */\nexport interface NoteShapeForAdjacentPositionOpts {\n\tshape: TLNoteShape\n\tcenter: Vec\n\tpageRotation: number\n\tnoteWidth: number\n\tnoteHeight: number\n\tforceNew?: boolean\n}\n\n/**\n * For a particular adjacent note position, get the shape in that position or create a new one.\n *\n * @internal */\nexport function getNoteShapeForAdjacentPosition(\n\teditor: Editor,\n\topts: NoteShapeForAdjacentPositionOpts\n) {\n\tconst { shape, center, pageRotation, noteWidth, noteHeight, forceNew = false } = opts\n\t// There might already be a note in that position! If there is, we'll\n\t// select the next note and switch focus to it. If there's not, then\n\t// we'll create a new note in that position.\n\n\tlet nextNote: TLShape | undefined\n\n\t// Check the center of where a new note would be\n\t// Start from the top of the stack, and work our way down\n\tconst allShapesOnPage = editor.getCurrentPageShapesSorted()\n\n\tconst minDistance =\n\t\t(Math.max(noteWidth, noteHeight) + editor.options.adjacentShapeMargin ** 2) ** shape.props.scale\n\n\tfor (let i = allShapesOnPage.length - 1; i >= 0; i--) {\n\t\tconst otherNote = allShapesOnPage[i]\n\t\tif (otherNote.type === 'note' && otherNote.id !== shape.id) {\n\t\t\tconst otherBounds = editor.getShapePageBounds(otherNote)\n\t\t\tif (\n\t\t\t\totherBounds &&\n\t\t\t\tVec.Dist2(otherBounds.center, center) < minDistance &&\n\t\t\t\teditor.isPointInShape(otherNote, center)\n\t\t\t) {\n\t\t\t\tnextNote = otherNote\n\t\t\t\tbreak\n\t\t\t}\n\t\t}\n\t}\n\n\teditor.complete()\n\n\t// If we didn't find any in that position, then create a new one\n\tif (!nextNote || forceNew) {\n\t\teditor.markHistoryStoppingPoint('creating note shape')\n\t\tconst id = createShapeId()\n\n\t\t// We create it at the center first, so that it becomes\n\t\t// the child of whatever parent was at that center\n\t\teditor.createShape({\n\t\t\tid,\n\t\t\ttype: 'note',\n\t\t\tx: center.x,\n\t\t\ty: center.y,\n\t\t\trotation: pageRotation,\n\t\t\topacity: shape.opacity,\n\t\t\tprops: {\n\t\t\t\t// Use the props of the shape we're cloning\n\t\t\t\t...shape.props,\n\t\t\t\trichText: toRichText(''),\n\t\t\t\tgrowY: 0,\n\t\t\t\tfontSizeAdjustment: 1,\n\t\t\t\turl: '',\n\t\t\t\ttextFirstEditedBy: null,\n\t\t\t},\n\t\t})\n\n\t\t// Now we need to correct its location within its new parent\n\n\t\tconst createdShape = editor.getShape<TLNoteShape>(id)!\n\t\tif (!createdShape) return // may have hit max shapes\n\n\t\t// We need to put the page point in the same coordinate space as the newly created shape (i.e its parent's space)\n\t\tconst topLeft = editor.getPointInParentSpace(\n\t\t\tcreatedShape,\n\t\t\tVec.Sub(\n\t\t\t\tcenter,\n\t\t\t\tVec.Rot(new Vec(noteWidth / 2, noteHeight / 2).mul(createdShape.props.scale), pageRotation)\n\t\t\t)\n\t\t)\n\n\t\teditor.updateShape({\n\t\t\tid,\n\t\t\ttype: 'note',\n\t\t\tx: topLeft.x,\n\t\t\ty: topLeft.y,\n\t\t})\n\n\t\tnextNote = editor.getShape(id)!\n\t}\n\n\teditor.zoomToSelectionIfOffscreen(16, {\n\t\tanimation: {\n\t\t\tduration: editor.options.animationMediumMs,\n\t\t},\n\t\tinset: 0,\n\t})\n\treturn nextNote\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n\tEditor,\n\tIndexKey,\n\tTLNoteShape,\n\tTLShape,\n\tVec,\n\tcompact,\n\tcreateShapeId,\n\ttoRichText,\n} from '@tldraw/editor'\n\n/** @internal */\nexport const CLONE_HANDLE_MARGIN = 0\n/** @internal */\nexport const NOTE_ADJACENT_POSITION_SNAP_RADIUS = 10\n\nconst BASE_NOTE_POSITIONS = (editor: Editor, noteWidth: number, noteHeight: number) =>\n\t[\n\t\t[\n\t\t\t['a1' as IndexKey],\n\t\t\tnew Vec(noteWidth * 0.5, noteHeight * -0.5 - editor.options.adjacentShapeMargin),\n\t\t], // t\n\t\t[\n\t\t\t['a2' as IndexKey],\n\t\t\tnew Vec(noteWidth * 1.5 + editor.options.adjacentShapeMargin, noteHeight * 0.5),\n\t\t], // r\n\t\t[\n\t\t\t['a3' as IndexKey],\n\t\t\tnew Vec(noteWidth * 0.5, noteHeight * 1.5 + editor.options.adjacentShapeMargin),\n\t\t], // b\n\t\t[\n\t\t\t['a4' as IndexKey],\n\t\t\tnew Vec(noteWidth * -0.5 - editor.options.adjacentShapeMargin, noteHeight * 0.5),\n\t\t], // l\n\t] as const\n\nfunction getBaseAdjacentNotePositions(\n\teditor: Editor,\n\tscale: number,\n\tnoteWidth: number,\n\tnoteHeight: number\n) {\n\tif (scale === 1) return BASE_NOTE_POSITIONS(editor, noteWidth, noteHeight)\n\tconst w = noteWidth * scale\n\tconst h = noteHeight * scale\n\tconst m = editor.options.adjacentShapeMargin * scale\n\treturn [\n\t\t[['a1' as IndexKey], new Vec(w * 0.5, h * -0.5 - m)], // t\n\t\t[['a2' as IndexKey], new Vec(w * 1.5 + m, h * 0.5)], // r\n\t\t[['a3' as IndexKey], new Vec(w * 0.5, h * 1.5 + m)], // b\n\t\t[['a4' as IndexKey], new Vec(w * -0.5 - m, h * 0.5)], // l\n\t] as const\n}\n\n/** @internal */\nexport interface NoteAdjacentPositionsOpts {\n\tpagePoint: Vec\n\tpageRotation: number\n\tgrowY: number\n\textraHeight: number\n\tscale: number\n\tnoteWidth: number\n\tnoteHeight: number\n}\n\n/**\n * Get the adjacent positions for a particular note shape.\n *\n * @internal */\nexport function getNoteAdjacentPositions(\n\teditor: Editor,\n\topts: NoteAdjacentPositionsOpts\n): Record<IndexKey, Vec> {\n\tconst { pagePoint, pageRotation, growY, extraHeight, scale, noteWidth, noteHeight } = opts\n\treturn Object.fromEntries(\n\t\tgetBaseAdjacentNotePositions(editor, scale, noteWidth, noteHeight).map(([id, v], i) => {\n\t\t\tconst point = v.clone()\n\t\t\tif (i === 0 && extraHeight) {\n\t\t\t\t// apply top margin (the growY of the moving note shape)\n\t\t\t\tpoint.y -= extraHeight\n\t\t\t} else if (i === 2 && growY) {\n\t\t\t\t// apply bottom margin (the growY of this note shape)\n\t\t\t\tpoint.y += growY\n\t\t\t}\n\t\t\treturn [id, point.rot(pageRotation).add(pagePoint)]\n\t\t})\n\t)\n}\n\n/** @internal */\nexport interface AvailableNoteAdjacentPositionsOpts {\n\trotation: number\n\tscale: number\n\textraHeight: number\n\tnoteWidth: number\n\tnoteHeight: number\n}\n\n/**\n * Get all of the available note adjacent positions, excluding the selected shapes.\n *\n * @internal */\nexport function getAvailableNoteAdjacentPositions(\n\teditor: Editor,\n\topts: AvailableNoteAdjacentPositionsOpts\n) {\n\tconst { rotation, scale, extraHeight, noteWidth, noteHeight } = opts\n\tconst selectedShapeIds = new Set(editor.getSelectedShapeIds())\n\tconst minSize =\n\t\t(Math.max(noteWidth, noteHeight) + editor.options.adjacentShapeMargin + extraHeight) ** 2\n\tconst allCenters = new Map<TLNoteShape, Vec>()\n\tconst positions: (Vec | undefined)[] = []\n\n\t// Get all the positions that are adjacent to the selected note shapes\n\tfor (const shape of editor.getCurrentPageShapes()) {\n\t\tif (\n\t\t\t!editor.isShapeOfType(shape, 'note') ||\n\t\t\tscale !== shape.props.scale ||\n\t\t\tselectedShapeIds.has(shape.id)\n\t\t) {\n\t\t\tcontinue\n\t\t}\n\n\t\tconst transform = editor.getShapePageTransform(shape.id)!\n\n\t\t// If the note has a different rotation, we can't use its adjacent positions\n\t\tif (rotation !== transform.rotation()) continue\n\n\t\t// Save the unselected note shape's center\n\t\tallCenters.set(shape, editor.getShapePageBounds(shape)!.center)\n\n\t\t// And push its position to the positions array\n\t\tpositions.push(\n\t\t\t...Object.values(\n\t\t\t\tgetNoteAdjacentPositions(editor, {\n\t\t\t\t\tpagePoint: transform.point(),\n\t\t\t\t\tpageRotation: rotation,\n\t\t\t\t\tgrowY: shape.props.growY,\n\t\t\t\t\textraHeight,\n\t\t\t\t\tscale,\n\t\t\t\t\tnoteWidth,\n\t\t\t\t\tnoteHeight,\n\t\t\t\t})\n\t\t\t)\n\t\t)\n\t}\n\n\t// Remove positions that are inside of another note shape\n\tconst len = positions.length\n\tlet position: Vec | undefined\n\tfor (const [shape, center] of allCenters) {\n\t\tfor (let i = 0; i < len; i++) {\n\t\t\tposition = positions[i]\n\t\t\tif (!position) continue\n\t\t\tif (Vec.Dist2(center, position) > minSize) continue\n\t\t\tif (editor.isPointInShape(shape, position)) {\n\t\t\t\tpositions[i] = undefined\n\t\t\t}\n\t\t}\n\t}\n\n\treturn compact(positions)\n}\n\n/** @internal */\nexport interface NoteShapeForAdjacentPositionOpts {\n\tshape: TLNoteShape\n\tcenter: Vec\n\tpageRotation: number\n\tnoteWidth: number\n\tnoteHeight: number\n\tforceNew?: boolean\n}\n\n/**\n * For a particular adjacent note position, get the shape in that position or create a new one.\n *\n * @internal */\nexport function getNoteShapeForAdjacentPosition(\n\teditor: Editor,\n\topts: NoteShapeForAdjacentPositionOpts\n) {\n\tconst { shape, center, pageRotation, noteWidth, noteHeight, forceNew = false } = opts\n\t// There might already be a note in that position! If there is, we'll\n\t// select the next note and switch focus to it. If there's not, then\n\t// we'll create a new note in that position.\n\n\tlet nextNote: TLShape | undefined\n\n\t// Check the center of where a new note would be\n\t// Start from the top of the stack, and work our way down\n\tconst allShapesOnPage = editor.getCurrentPageShapesSorted()\n\n\tconst minDistance =\n\t\t(Math.max(noteWidth, noteHeight) + editor.options.adjacentShapeMargin ** 2) ** shape.props.scale\n\n\tfor (let i = allShapesOnPage.length - 1; i >= 0; i--) {\n\t\tconst otherNote = allShapesOnPage[i]\n\t\tif (otherNote.type === 'note' && otherNote.id !== shape.id) {\n\t\t\tconst otherBounds = editor.getShapePageBounds(otherNote)\n\t\t\tif (\n\t\t\t\totherBounds &&\n\t\t\t\tVec.Dist2(otherBounds.center, center) < minDistance &&\n\t\t\t\teditor.isPointInShape(otherNote, center)\n\t\t\t) {\n\t\t\t\tnextNote = otherNote\n\t\t\t\tbreak\n\t\t\t}\n\t\t}\n\t}\n\n\teditor.complete()\n\n\t// If we didn't find any in that position, then create a new one\n\tif (!nextNote || forceNew) {\n\t\teditor.markHistoryStoppingPoint('creating note shape')\n\t\tconst id = createShapeId()\n\n\t\t// We create it at the center first, so that it becomes\n\t\t// the child of whatever parent was at that center\n\t\teditor.createShape({\n\t\t\tid,\n\t\t\ttype: 'note',\n\t\t\tx: center.x,\n\t\t\ty: center.y,\n\t\t\trotation: pageRotation,\n\t\t\topacity: shape.opacity,\n\t\t\tprops: {\n\t\t\t\t// Use the props of the shape we're cloning\n\t\t\t\t...shape.props,\n\t\t\t\trichText: toRichText(''),\n\t\t\t\tgrowY: 0,\n\t\t\t\tfontSizeAdjustment: 1,\n\t\t\t\turl: '',\n\t\t\t\ttextLastEditedBy: null,\n\t\t\t},\n\t\t})\n\n\t\t// Now we need to correct its location within its new parent\n\n\t\tconst createdShape = editor.getShape<TLNoteShape>(id)!\n\t\tif (!createdShape) return // may have hit max shapes\n\n\t\t// We need to put the page point in the same coordinate space as the newly created shape (i.e its parent's space)\n\t\tconst topLeft = editor.getPointInParentSpace(\n\t\t\tcreatedShape,\n\t\t\tVec.Sub(\n\t\t\t\tcenter,\n\t\t\t\tVec.Rot(new Vec(noteWidth / 2, noteHeight / 2).mul(createdShape.props.scale), pageRotation)\n\t\t\t)\n\t\t)\n\n\t\teditor.updateShape({\n\t\t\tid,\n\t\t\ttype: 'note',\n\t\t\tx: topLeft.x,\n\t\t\ty: topLeft.y,\n\t\t})\n\n\t\tnextNote = editor.getShape(id)!\n\t}\n\n\teditor.zoomToSelectionIfOffscreen(16, {\n\t\tanimation: {\n\t\t\tduration: editor.options.animationMediumMs,\n\t\t},\n\t\tinset: 0,\n\t})\n\treturn nextNote\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBASO;AAGA,MAAM,sBAAsB;AAE5B,MAAM,qCAAqC;AAElD,MAAM,sBAAsB,CAAC,QAAgB,WAAmB,eAC/D;AAAA,EACC;AAAA,IACC,CAAC,IAAgB;AAAA,IACjB,IAAI,kBAAI,YAAY,KAAK,aAAa,OAAO,OAAO,QAAQ,mBAAmB;AAAA,EAChF;AAAA;AAAA,EACA;AAAA,IACC,CAAC,IAAgB;AAAA,IACjB,IAAI,kBAAI,YAAY,MAAM,OAAO,QAAQ,qBAAqB,aAAa,GAAG;AAAA,EAC/E;AAAA;AAAA,EACA;AAAA,IACC,CAAC,IAAgB;AAAA,IACjB,IAAI,kBAAI,YAAY,KAAK,aAAa,MAAM,OAAO,QAAQ,mBAAmB;AAAA,EAC/E;AAAA;AAAA,EACA;AAAA,IACC,CAAC,IAAgB;AAAA,IACjB,IAAI,kBAAI,YAAY,OAAO,OAAO,QAAQ,qBAAqB,aAAa,GAAG;AAAA,EAChF;AAAA;AACD;AAED,SAAS,6BACR,QACA,OACA,WACA,YACC;AACD,MAAI,UAAU,EAAG,QAAO,oBAAoB,QAAQ,WAAW,UAAU;AACzE,QAAM,IAAI,YAAY;AACtB,QAAM,IAAI,aAAa;AACvB,QAAM,IAAI,OAAO,QAAQ,sBAAsB;AAC/C,SAAO;AAAA,IACN,CAAC,CAAC,IAAgB,GAAG,IAAI,kBAAI,IAAI,KAAK,IAAI,OAAO,CAAC,CAAC;AAAA;AAAA,IACnD,CAAC,CAAC,IAAgB,GAAG,IAAI,kBAAI,IAAI,MAAM,GAAG,IAAI,GAAG,CAAC;AAAA;AAAA,IAClD,CAAC,CAAC,IAAgB,GAAG,IAAI,kBAAI,IAAI,KAAK,IAAI,MAAM,CAAC,CAAC;AAAA;AAAA,IAClD,CAAC,CAAC,IAAgB,GAAG,IAAI,kBAAI,IAAI,OAAO,GAAG,IAAI,GAAG,CAAC;AAAA;AAAA,EACpD;AACD;AAiBO,SAAS,yBACf,QACA,MACwB;AACxB,QAAM,EAAE,WAAW,cAAc,OAAO,aAAa,OAAO,WAAW,WAAW,IAAI;AACtF,SAAO,OAAO;AAAA,IACb,6BAA6B,QAAQ,OAAO,WAAW,UAAU,EAAE,IAAI,CAAC,CAAC,IAAI,CAAC,GAAG,MAAM;AACtF,YAAM,QAAQ,EAAE,MAAM;AACtB,UAAI,MAAM,KAAK,aAAa;AAE3B,cAAM,KAAK;AAAA,MACZ,WAAW,MAAM,KAAK,OAAO;AAE5B,cAAM,KAAK;AAAA,MACZ;AACA,aAAO,CAAC,IAAI,MAAM,IAAI,YAAY,EAAE,IAAI,SAAS,CAAC;AAAA,IACnD,CAAC;AAAA,EACF;AACD;AAeO,SAAS,kCACf,QACA,MACC;AACD,QAAM,EAAE,UAAU,OAAO,aAAa,WAAW,WAAW,IAAI;AAChE,QAAM,mBAAmB,IAAI,IAAI,OAAO,oBAAoB,CAAC;AAC7D,QAAM,WACJ,KAAK,IAAI,WAAW,UAAU,IAAI,OAAO,QAAQ,sBAAsB,gBAAgB;AACzF,QAAM,aAAa,oBAAI,IAAsB;AAC7C,QAAM,YAAiC,CAAC;AAGxC,aAAW,SAAS,OAAO,qBAAqB,GAAG;AAClD,QACC,CAAC,OAAO,cAAc,OAAO,MAAM,KACnC,UAAU,MAAM,MAAM,SACtB,iBAAiB,IAAI,MAAM,EAAE,GAC5B;AACD;AAAA,IACD;AAEA,UAAM,YAAY,OAAO,sBAAsB,MAAM,EAAE;AAGvD,QAAI,aAAa,UAAU,SAAS,EAAG;AAGvC,eAAW,IAAI,OAAO,OAAO,mBAAmB,KAAK,EAAG,MAAM;AAG9D,cAAU;AAAA,MACT,GAAG,OAAO;AAAA,QACT,yBAAyB,QAAQ;AAAA,UAChC,WAAW,UAAU,MAAM;AAAA,UAC3B,cAAc;AAAA,UACd,OAAO,MAAM,MAAM;AAAA,UACnB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACD,CAAC;AAAA,MACF;AAAA,IACD;AAAA,EACD;AAGA,QAAM,MAAM,UAAU;AACtB,MAAI;AACJ,aAAW,CAAC,OAAO,MAAM,KAAK,YAAY;AACzC,aAAS,IAAI,GAAG,IAAI,KAAK,KAAK;AAC7B,iBAAW,UAAU,CAAC;AACtB,UAAI,CAAC,SAAU;AACf,UAAI,kBAAI,MAAM,QAAQ,QAAQ,IAAI,QAAS;AAC3C,UAAI,OAAO,eAAe,OAAO,QAAQ,GAAG;AAC3C,kBAAU,CAAC,IAAI;AAAA,MAChB;AAAA,IACD;AAAA,EACD;AAEA,aAAO,uBAAQ,SAAS;AACzB;AAgBO,SAAS,gCACf,QACA,MACC;AACD,QAAM,EAAE,OAAO,QAAQ,cAAc,WAAW,YAAY,WAAW,MAAM,IAAI;AAKjF,MAAI;AAIJ,QAAM,kBAAkB,OAAO,2BAA2B;AAE1D,QAAM,eACJ,KAAK,IAAI,WAAW,UAAU,IAAI,OAAO,QAAQ,uBAAuB,MAAM,MAAM,MAAM;AAE5F,WAAS,IAAI,gBAAgB,SAAS,GAAG,KAAK,GAAG,KAAK;AACrD,UAAM,YAAY,gBAAgB,CAAC;AACnC,QAAI,UAAU,SAAS,UAAU,UAAU,OAAO,MAAM,IAAI;AAC3D,YAAM,cAAc,OAAO,mBAAmB,SAAS;AACvD,UACC,eACA,kBAAI,MAAM,YAAY,QAAQ,MAAM,IAAI,eACxC,OAAO,eAAe,WAAW,MAAM,GACtC;AACD,mBAAW;AACX;AAAA,MACD;AAAA,IACD;AAAA,EACD;AAEA,SAAO,SAAS;AAGhB,MAAI,CAAC,YAAY,UAAU;AAC1B,WAAO,yBAAyB,qBAAqB;AACrD,UAAM,SAAK,6BAAc;AAIzB,WAAO,YAAY;AAAA,MAClB;AAAA,MACA,MAAM;AAAA,MACN,GAAG,OAAO;AAAA,MACV,GAAG,OAAO;AAAA,MACV,UAAU;AAAA,MACV,SAAS,MAAM;AAAA,MACf,OAAO;AAAA;AAAA,QAEN,GAAG,MAAM;AAAA,QACT,cAAU,0BAAW,EAAE;AAAA,QACvB,OAAO;AAAA,QACP,oBAAoB;AAAA,QACpB,KAAK;AAAA,QACL,kBAAkB;AAAA,MACnB;AAAA,IACD,CAAC;AAID,UAAM,eAAe,OAAO,SAAsB,EAAE;AACpD,QAAI,CAAC,aAAc;AAGnB,UAAM,UAAU,OAAO;AAAA,MACtB;AAAA,MACA,kBAAI;AAAA,QACH;AAAA,QACA,kBAAI,IAAI,IAAI,kBAAI,YAAY,GAAG,aAAa,CAAC,EAAE,IAAI,aAAa,MAAM,KAAK,GAAG,YAAY;AAAA,MAC3F;AAAA,IACD;AAEA,WAAO,YAAY;AAAA,MAClB;AAAA,MACA,MAAM;AAAA,MACN,GAAG,QAAQ;AAAA,MACX,GAAG,QAAQ;AAAA,IACZ,CAAC;AAED,eAAW,OAAO,SAAS,EAAE;AAAA,EAC9B;AAEA,SAAO,2BAA2B,IAAI;AAAA,IACrC,WAAW;AAAA,MACV,UAAU,OAAO,QAAQ;AAAA,IAC1B;AAAA,IACA,OAAO;AAAA,EACR,CAAC;AACD,SAAO;AACR;",
   "names": []
 }

package/dist-cjs/lib/shapes/note/toolStates/Pointing.js

@@ -33,32 +33,49 @@ class Pointing extends import_editor.StateNode {
   info = {};
   markId = "";
   shape = {};
+  shapeId;
+  shapeCenter = new import_editor.Vec();
+  hasCreatedShape = false;
   onEnter() {
     const { editor } = this;
-    const id = (0, import_editor.createShapeId)();
-    this.markId = editor.markHistoryStoppingPoint(`creating_note:${id}`);
+    this.hasCreatedShape = false;
+    this.shapeId = (0, import_editor.createShapeId)();
+    this.markId = editor.markHistoryStoppingPoint(`creating_note:${this.shapeId}`);
     const noteUtil = editor.getShapeUtil("note");
     const dv = (0, import_getDisplayValues.getDisplayValues)(noteUtil, { props: noteUtil.getDefaultProps() });
-    const center = this.editor.inputs.getOriginPagePoint().clone();
+    const center = editor.inputs.getOriginPagePoint().clone();
     const offset = getNoteShapeAdjacentPositionOffset(
-      this.editor,
+      editor,
       center,
-      this.editor.getResizeScaleFactor(),
+      editor.getResizeScaleFactor(),
       dv.noteWidth,
       dv.noteHeight
     );
     if (offset) {
       center.sub(offset);
     }
-    const shape = createNoteShape(this.editor, id, center);
+    this.shapeCenter = center;
+    if (!editor.getInstanceState().isCoarsePointer) {
+      this.ensureShapeCreated();
+    }
+  }
+  // Create the note now if it hasn't been created yet (idempotent). The deferred
+  // drag and release paths route through here; a max-shapes failure cancels the
+  // gesture, matching the original onEnter behaviour.
+  ensureShapeCreated() {
+    if (this.hasCreatedShape) return;
+    const shape = createNoteShape(this.editor, this.shapeId, this.shapeCenter);
     if (shape) {
       this.shape = shape;
+      this.hasCreatedShape = true;
     } else {
       this.cancel();
     }
   }
   onPointerMove(info) {
     if (this.editor.inputs.getIsDragging()) {
+      this.ensureShapeCreated();
+      if (!this.hasCreatedShape) return;
       this.editor.setCurrentTool("select.translating", {
         ...info,
         target: "shape",
@@ -75,6 +92,9 @@ class Pointing extends import_editor.StateNode {
   onPointerUp() {
     this.complete();
   }
+  onLongPress() {
+    (0, import_editor.cancelShapeCreationOnLongPress)(this.editor, () => this.cancel());
+  }
   onInterrupt() {
     this.cancel();
   }
@@ -85,6 +105,8 @@ class Pointing extends import_editor.StateNode {
     this.cancel();
   }
   complete() {
+    this.ensureShapeCreated();
+    if (!this.hasCreatedShape) return;
     if (this.editor.getInstanceState().isToolLocked) {
       this.parent.transition("idle");
     } else {

package/dist-cjs/lib/shapes/note/toolStates/Pointing.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/shapes/note/toolStates/Pointing.ts"],
-  "sourcesContent": ["import {\n\tEditor,\n\tStateNode,\n\tTLNoteShape,\n\tTLPointerEventInfo,\n\tTLShapeId,\n\tVec,\n\tcreateShapeId,\n\tmaybeSnapToGrid,\n} from '@tldraw/editor'\nimport { startEditingShapeWithRichText } from '../../../tools/SelectTool/selectHelpers'\nimport { getDisplayValues } from '../../shared/getDisplayValues'\nimport {\n\tNOTE_ADJACENT_POSITION_SNAP_RADIUS,\n\tgetAvailableNoteAdjacentPositions,\n} from '../noteHelpers'\nimport type { NoteShapeUtil } from '../NoteShapeUtil'\n\nexport class Pointing extends StateNode {\n\tstatic override id = 'pointing'\n\n\tdragged = false\n\n\tinfo = {} as TLPointerEventInfo\n\n\tmarkId = ''\n\n\tshape = {} as TLNoteShape\n\n\toverride onEnter() {\n\t\tconst { editor } = this\n\n\t\tconst id = createShapeId()\n\t\tthis.markId = editor.markHistoryStoppingPoint(`creating_note:${id}`)\n\n\t\t// Resolve note dimensions from the util's defaults\n\t\tconst noteUtil = editor.getShapeUtil('note') as NoteShapeUtil\n\t\tconst dv = getDisplayValues(noteUtil, { props: noteUtil.getDefaultProps() } as TLNoteShape)\n\n\t\t// Check for note pits; if the pointer is close to one, place the note centered on the pit\n\t\tconst center = this.editor.inputs.getOriginPagePoint().clone()\n\t\tconst offset = getNoteShapeAdjacentPositionOffset(\n\t\t\tthis.editor,\n\t\t\tcenter,\n\t\t\tthis.editor.getResizeScaleFactor(),\n\t\t\tdv.noteWidth,\n\t\t\tdv.noteHeight\n\t\t)\n\t\tif (offset) {\n\t\t\tcenter.sub(offset)\n\t\t}\n\n\t\t// Allow this to trigger the max shapes reached alert\n\t\tconst shape = createNoteShape(this.editor, id, center)\n\t\tif (shape) {\n\t\t\tthis.shape = shape\n\t\t} else {\n\t\t\tthis.cancel()\n\t\t}\n\t}\n\n\toverride onPointerMove(info: TLPointerEventInfo) {\n\t\tif (this.editor.inputs.getIsDragging()) {\n\t\t\tthis.editor.setCurrentTool('select.translating', {\n\t\t\t\t...info,\n\t\t\t\ttarget: 'shape',\n\t\t\t\tshape: this.shape,\n\t\t\t\tonInteractionEnd: 'note',\n\t\t\t\tisCreating: true,\n\t\t\t\tcreatingMarkId: this.markId,\n\t\t\t\tonCreate: () => {\n\t\t\t\t\tstartEditingShapeWithRichText(this.editor, this.shape.id)\n\t\t\t\t},\n\t\t\t})\n\t\t}\n\t}\n\n\toverride onPointerUp() {\n\t\tthis.complete()\n\t}\n\n\toverride onInterrupt() {\n\t\tthis.cancel()\n\t}\n\n\toverride onComplete() {\n\t\tthis.complete()\n\t}\n\n\toverride onCancel() {\n\t\tthis.cancel()\n\t}\n\n\tprivate complete() {\n\t\tif (this.editor.getInstanceState().isToolLocked) {\n\t\t\tthis.parent.transition('idle')\n\t\t} else {\n\t\t\tstartEditingShapeWithRichText(this.editor, this.shape.id, { info: this.info })\n\t\t}\n\t}\n\n\tprivate cancel() {\n\t\tthis.editor.bailToMark(this.markId)\n\t\tthis.parent.transition('idle', this.info)\n\t}\n}\n\nexport function getNoteShapeAdjacentPositionOffset(\n\teditor: Editor,\n\tcenter: Vec,\n\tscale: number,\n\tnoteWidth: number,\n\tnoteHeight: number\n) {\n\tlet min = NOTE_ADJACENT_POSITION_SNAP_RADIUS / editor.getZoomLevel() // in screen space\n\tlet offset: Vec | undefined\n\tfor (const pit of getAvailableNoteAdjacentPositions(editor, {\n\t\trotation: 0,\n\t\tscale,\n\t\textraHeight: 0,\n\t\tnoteWidth,\n\t\tnoteHeight,\n\t})) {\n\t\t// only check page rotations of zero\n\t\tconst deltaToPit = Vec.Sub(center, pit)\n\t\tconst dist = deltaToPit.len()\n\t\tif (dist < min) {\n\t\t\tmin = dist\n\t\t\toffset = deltaToPit\n\t\t}\n\t}\n\treturn offset\n}\n\nexport function createNoteShape(editor: Editor, id: TLShapeId, center: Vec) {\n\teditor.createShape({\n\t\tid,\n\t\ttype: 'note',\n\t\tx: center.x,\n\t\ty: center.y,\n\t\tprops: {\n\t\t\tscale: editor.getResizeScaleFactor(),\n\t\t},\n\t})\n\n\tconst shape = editor.getShape<TLNoteShape>(id)\n\t// Should never happen since we just checked, but just in case\n\tif (!shape) return\n\n\teditor.select(id)\n\tconst bounds = editor.getShapeGeometry(shape).bounds\n\tconst newPoint = maybeSnapToGrid(\n\t\tnew Vec(shape.x - bounds.width / 2, shape.y - bounds.height / 2),\n\t\teditor\n\t)\n\n\t// Center the text around the created point\n\teditor.updateShapes([\n\t\t{\n\t\t\tid,\n\t\t\ttype: 'note',\n\t\t\tx: newPoint.x,\n\t\t\ty: newPoint.y,\n\t\t},\n\t])\n\n\treturn editor.getShape<TLNoteShape>(id)\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n\tEditor,\n\tStateNode,\n\tTLNoteShape,\n\tTLPointerEventInfo,\n\tTLShapeId,\n\tVec,\n\tcreateShapeId,\n\tcancelShapeCreationOnLongPress,\n\tmaybeSnapToGrid,\n} from '@tldraw/editor'\nimport { startEditingShapeWithRichText } from '../../../tools/SelectTool/selectHelpers'\nimport { getDisplayValues } from '../../shared/getDisplayValues'\nimport {\n\tNOTE_ADJACENT_POSITION_SNAP_RADIUS,\n\tgetAvailableNoteAdjacentPositions,\n} from '../noteHelpers'\nimport type { NoteShapeUtil } from '../NoteShapeUtil'\n\nexport class Pointing extends StateNode {\n\tstatic override id = 'pointing'\n\n\tdragged = false\n\n\tinfo = {} as TLPointerEventInfo\n\n\tmarkId = ''\n\n\tshape = {} as TLNoteShape\n\n\tprivate shapeId!: TLShapeId\n\n\tprivate shapeCenter = new Vec()\n\n\tprivate hasCreatedShape = false\n\n\toverride onEnter() {\n\t\tconst { editor } = this\n\n\t\tthis.hasCreatedShape = false\n\t\tthis.shapeId = createShapeId()\n\t\tthis.markId = editor.markHistoryStoppingPoint(`creating_note:${this.shapeId}`)\n\n\t\t// Resolve note dimensions from the util's defaults\n\t\tconst noteUtil = editor.getShapeUtil('note') as NoteShapeUtil\n\t\tconst dv = getDisplayValues(noteUtil, { props: noteUtil.getDefaultProps() } as TLNoteShape)\n\n\t\t// Check for note pits; if the pointer is close to one, place the note centered on the pit\n\t\tconst center = editor.inputs.getOriginPagePoint().clone()\n\t\tconst offset = getNoteShapeAdjacentPositionOffset(\n\t\t\teditor,\n\t\t\tcenter,\n\t\t\teditor.getResizeScaleFactor(),\n\t\t\tdv.noteWidth,\n\t\t\tdv.noteHeight\n\t\t)\n\t\tif (offset) {\n\t\t\tcenter.sub(offset)\n\t\t}\n\t\tthis.shapeCenter = center\n\n\t\t// On a coarse pointer, defer creating the note until the gesture commits (a\n\t\t// drag or a release). The note is created on press, and a long-press cancels\n\t\t// the pending creation, so without deferral the note appears on press and\n\t\t// vanishes at the long-press mark \u2014 a visible flash. On a fine pointer there\n\t\t// is no long-press cancel, so create immediately to keep the press-and-drag feel.\n\t\tif (!editor.getInstanceState().isCoarsePointer) {\n\t\t\tthis.ensureShapeCreated()\n\t\t}\n\t}\n\n\t// Create the note now if it hasn't been created yet (idempotent). The deferred\n\t// drag and release paths route through here; a max-shapes failure cancels the\n\t// gesture, matching the original onEnter behaviour.\n\tprivate ensureShapeCreated() {\n\t\tif (this.hasCreatedShape) return\n\n\t\tconst shape = createNoteShape(this.editor, this.shapeId, this.shapeCenter)\n\t\tif (shape) {\n\t\t\tthis.shape = shape\n\t\t\tthis.hasCreatedShape = true\n\t\t} else {\n\t\t\tthis.cancel()\n\t\t}\n\t}\n\n\toverride onPointerMove(info: TLPointerEventInfo) {\n\t\tif (this.editor.inputs.getIsDragging()) {\n\t\t\tthis.ensureShapeCreated()\n\t\t\tif (!this.hasCreatedShape) return\n\t\t\tthis.editor.setCurrentTool('select.translating', {\n\t\t\t\t...info,\n\t\t\t\ttarget: 'shape',\n\t\t\t\tshape: this.shape,\n\t\t\t\tonInteractionEnd: 'note',\n\t\t\t\tisCreating: true,\n\t\t\t\tcreatingMarkId: this.markId,\n\t\t\t\tonCreate: () => {\n\t\t\t\t\tstartEditingShapeWithRichText(this.editor, this.shape.id)\n\t\t\t\t},\n\t\t\t})\n\t\t}\n\t}\n\n\toverride onPointerUp() {\n\t\tthis.complete()\n\t}\n\n\toverride onLongPress() {\n\t\tcancelShapeCreationOnLongPress(this.editor, () => this.cancel())\n\t}\n\n\toverride onInterrupt() {\n\t\tthis.cancel()\n\t}\n\n\toverride onComplete() {\n\t\tthis.complete()\n\t}\n\n\toverride onCancel() {\n\t\tthis.cancel()\n\t}\n\n\tprivate complete() {\n\t\tthis.ensureShapeCreated()\n\t\tif (!this.hasCreatedShape) return\n\t\tif (this.editor.getInstanceState().isToolLocked) {\n\t\t\tthis.parent.transition('idle')\n\t\t} else {\n\t\t\tstartEditingShapeWithRichText(this.editor, this.shape.id, { info: this.info })\n\t\t}\n\t}\n\n\tprivate cancel() {\n\t\tthis.editor.bailToMark(this.markId)\n\t\tthis.parent.transition('idle', this.info)\n\t}\n}\n\nexport function getNoteShapeAdjacentPositionOffset(\n\teditor: Editor,\n\tcenter: Vec,\n\tscale: number,\n\tnoteWidth: number,\n\tnoteHeight: number\n) {\n\tlet min = NOTE_ADJACENT_POSITION_SNAP_RADIUS / editor.getZoomLevel() // in screen space\n\tlet offset: Vec | undefined\n\tfor (const pit of getAvailableNoteAdjacentPositions(editor, {\n\t\trotation: 0,\n\t\tscale,\n\t\textraHeight: 0,\n\t\tnoteWidth,\n\t\tnoteHeight,\n\t})) {\n\t\t// only check page rotations of zero\n\t\tconst deltaToPit = Vec.Sub(center, pit)\n\t\tconst dist = deltaToPit.len()\n\t\tif (dist < min) {\n\t\t\tmin = dist\n\t\t\toffset = deltaToPit\n\t\t}\n\t}\n\treturn offset\n}\n\nexport function createNoteShape(editor: Editor, id: TLShapeId, center: Vec) {\n\teditor.createShape({\n\t\tid,\n\t\ttype: 'note',\n\t\tx: center.x,\n\t\ty: center.y,\n\t\tprops: {\n\t\t\tscale: editor.getResizeScaleFactor(),\n\t\t},\n\t})\n\n\tconst shape = editor.getShape<TLNoteShape>(id)\n\t// Should never happen since we just checked, but just in case\n\tif (!shape) return\n\n\teditor.select(id)\n\tconst bounds = editor.getShapeGeometry(shape).bounds\n\tconst newPoint = maybeSnapToGrid(\n\t\tnew Vec(shape.x - bounds.width / 2, shape.y - bounds.height / 2),\n\t\teditor\n\t)\n\n\t// Center the text around the created point\n\teditor.updateShapes([\n\t\t{\n\t\t\tid,\n\t\t\ttype: 'note',\n\t\t\tx: newPoint.x,\n\t\t\ty: newPoint.y,\n\t\t},\n\t])\n\n\treturn editor.getShape<TLNoteShape>(id)\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist-cjs/lib/shapes/shared/PlainTextLabel.js

@@ -32,6 +32,7 @@ __export(PlainTextLabel_exports, {
 });
 module.exports = __toCommonJS(PlainTextLabel_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_editor = require("@tldraw/editor");
 var import_classnames = __toESM(require("classnames"), 1);
 var import_react = __toESM(require("react"), 1);
 var import_PlainTextArea = require("../text/PlainTextArea");
@@ -90,8 +91,8 @@ const PlainTextLabel = import_react.default.memo(function PlainTextLabel2({
           className: `${cssPrefix}-label__inner tl-text-content__wrapper`,
           style: {
             fontSize,
-            lineHeight: lineHeight.toString(),
-            minHeight: Math.floor(fontSize * lineHeight) + "px",
+            lineHeight: `${(0, import_editor.resolveLineHeightPx)(fontSize, lineHeight)}px`,
+            minHeight: `${(0, import_editor.resolveLineHeightPx)(fontSize, lineHeight)}px`,
             minWidth: Math.ceil(textWidth || 0),
             color: labelColor,
             width: textWidth ? Math.ceil(textWidth) : void 0,

package/dist-cjs/lib/shapes/shared/PlainTextLabel.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/shapes/shared/PlainTextLabel.tsx"],
-  "sourcesContent": ["import { Box, ExtractShapeByProps, TLShapeId } from '@tldraw/editor'\nimport classNames from 'classnames'\nimport React from 'react'\nimport { PlainTextArea } from '../text/PlainTextArea'\nimport { isLegacyAlign } from './legacyProps'\nimport { TextHelpers } from './TextHelpers'\nimport { useEditablePlainText } from './useEditablePlainText'\n\n/** @public */\nexport interface PlainTextLabelProps {\n\tshapeId: TLShapeId\n\ttype: ExtractShapeByProps<{ text: string }>['type']\n\tfontFamily: string\n\tfontSize: number\n\tlineHeight: number\n\ttextAlign: 'start' | 'center' | 'end'\n\tverticalAlign: 'start' | 'middle' | 'end'\n\twrap?: boolean\n\ttext?: string\n\tlabelColor: string\n\tbounds?: Box\n\tisSelected: boolean\n\tonKeyDown?(e: KeyboardEvent): void\n\tclassNamePrefix?: string\n\tstyle?: React.CSSProperties\n\ttextWidth?: number\n\ttextHeight?: number\n\tpadding?: number\n\tshowTextOutline?: boolean\n}\n\n/**\n * Renders a text label that can be used inside of shapes.\n * The component has the ability to be edited in place and furthermore\n * supports rich text editing.\n *\n * @public @react\n */\nexport const PlainTextLabel = React.memo(function PlainTextLabel({\n\tshapeId,\n\ttype,\n\ttext: plaintext,\n\tlabelColor,\n\tfontFamily,\n\tfontSize,\n\tlineHeight,\n\ttextAlign,\n\tverticalAlign,\n\twrap,\n\tisSelected,\n\tpadding = 0,\n\tonKeyDown: handleKeyDownCustom,\n\tclassNamePrefix,\n\tstyle,\n\ttextWidth,\n\ttextHeight,\n\tshowTextOutline = true,\n}: PlainTextLabelProps) {\n\tconst { rInput, isEmpty, isEditing, isReadyForEditing, ...editableTextRest } =\n\t\tuseEditablePlainText(shapeId, type, plaintext)\n\n\tconst finalPlainText = TextHelpers.normalizeTextForDom(plaintext || '')\n\tconst hasText = finalPlainText.length > 0\n\n\tconst legacyAlign = isLegacyAlign(textAlign)\n\n\tif (!isEditing && !hasText) {\n\t\treturn null\n\t}\n\n\t// TODO: probably combine tl-text and tl-arrow eventually\n\t// In case you're grepping for this, it breaks down as follows:\n\t// tl-text-label, tl-text-label__inner, tl-text-shape-label, tl-text\n\t// tl-arrow-label, tl-arrow-label__inner, tl-arrow\n\tconst cssPrefix = classNamePrefix || 'tl-text'\n\treturn (\n\t\t<div\n\t\t\tclassName={`${cssPrefix}-label tl-text-wrapper tl-plain-text-wrapper`}\n\t\t\taria-hidden={!isEditing}\n\t\t\tdata-hastext={!isEmpty}\n\t\t\tdata-isediting={isEditing}\n\t\t\tdata-is-ready-for-editing={isReadyForEditing}\n\t\t\tdata-textwrap={!!wrap}\n\t\t\tdata-isselected={isSelected}\n\t\t\tstyle={{\n\t\t\t\tfontFamily,\n\t\t\t\ttextAlign,\n\t\t\t\tjustifyContent:\n\t\t\t\t\ttextAlign === 'center' || legacyAlign\n\t\t\t\t\t\t? 'center'\n\t\t\t\t\t\t: textAlign === 'end'\n\t\t\t\t\t\t\t? 'flex-end'\n\t\t\t\t\t\t\t: 'flex-start',\n\t\t\t\talignItems:\n\t\t\t\t\tverticalAlign === 'middle'\n\t\t\t\t\t\t? 'center'\n\t\t\t\t\t\t: verticalAlign === 'end'\n\t\t\t\t\t\t\t? 'flex-end'\n\t\t\t\t\t\t\t: 'flex-start',\n\t\t\t\tpadding,\n\t\t\t\t...style,\n\t\t\t}}\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName={`${cssPrefix}-label__inner tl-text-content__wrapper`}\n\t\t\t\tstyle={{\n\t\t\t\t\tfontSize,\n\t\t\t\t\tlineHeight: lineHeight.toString(),\n\t\t\t\t\tminHeight: Math.floor(fontSize * lineHeight) + 'px',\n\t\t\t\t\tminWidth: Math.ceil(textWidth || 0),\n\t\t\t\t\tcolor: labelColor,\n\t\t\t\t\twidth: textWidth ? Math.ceil(textWidth) : undefined,\n\t\t\t\t\theight: textHeight ? Math.ceil(textHeight) : undefined,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclassName={classNames(\n\t\t\t\t\t\t`${cssPrefix} tl-text tl-text-content`,\n\t\t\t\t\t\tshowTextOutline ? 'tl-text__outline' : 'tl-text__no-outline'\n\t\t\t\t\t)}\n\t\t\t\t\tdir=\"auto\"\n\t\t\t\t>\n\t\t\t\t\t{finalPlainText.split('\\n').map((lineOfText, index) => (\n\t\t\t\t\t\t<div key={index} dir=\"auto\">\n\t\t\t\t\t\t\t{lineOfText}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t\t{(isReadyForEditing || isSelected) && (\n\t\t\t\t\t<PlainTextArea\n\t\t\t\t\t\t// Fudge the ref type because we're using forwardRef and it's not typed correctly.\n\t\t\t\t\t\tref={rInput as any}\n\t\t\t\t\t\ttext={plaintext}\n\t\t\t\t\t\tisEditing={isEditing}\n\t\t\t\t\t\tshapeId={shapeId}\n\t\t\t\t\t\t{...editableTextRest}\n\t\t\t\t\t\thandleKeyDown={handleKeyDownCustom ?? editableTextRest.handleKeyDown}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>\n\t)\n})\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAuGG;AAtGH,wBAAuB;AACvB,mBAAkB;AAClB,2BAA8B;AAC9B,yBAA8B;AAC9B,yBAA4B;AAC5B,kCAAqC;AAgC9B,MAAM,iBAAiB,aAAAA,QAAM,KAAK,SAASC,gBAAe;AAAA,EAChE;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,kBAAkB;AACnB,GAAwB;AACvB,QAAM,EAAE,QAAQ,SAAS,WAAW,mBAAmB,GAAG,iBAAiB,QAC1E,kDAAqB,SAAS,MAAM,SAAS;AAE9C,QAAM,iBAAiB,+BAAY,oBAAoB,aAAa,EAAE;AACtE,QAAM,UAAU,eAAe,SAAS;AAExC,QAAM,kBAAc,kCAAc,SAAS;AAE3C,MAAI,CAAC,aAAa,CAAC,SAAS;AAC3B,WAAO;AAAA,EACR;AAMA,QAAM,YAAY,mBAAmB;AACrC,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAW,GAAG,SAAS;AAAA,MACvB,eAAa,CAAC;AAAA,MACd,gBAAc,CAAC;AAAA,MACf,kBAAgB;AAAA,MAChB,6BAA2B;AAAA,MAC3B,iBAAe,CAAC,CAAC;AAAA,MACjB,mBAAiB;AAAA,MACjB,OAAO;AAAA,QACN;AAAA,QACA;AAAA,QACA,gBACC,cAAc,YAAY,cACvB,WACA,cAAc,QACb,aACA;AAAA,QACL,YACC,kBAAkB,WACf,WACA,kBAAkB,QACjB,aACA;AAAA,QACL;AAAA,QACA,GAAG;AAAA,MACJ;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACA,WAAW,GAAG,SAAS;AAAA,UACvB,OAAO;AAAA,YACN;AAAA,YACA,YAAY,WAAW,SAAS;AAAA,YAChC,WAAW,KAAK,MAAM,WAAW,UAAU,IAAI;AAAA,YAC/C,UAAU,KAAK,KAAK,aAAa,CAAC;AAAA,YAClC,OAAO;AAAA,YACP,OAAO,YAAY,KAAK,KAAK,SAAS,IAAI;AAAA,YAC1C,QAAQ,aAAa,KAAK,KAAK,UAAU,IAAI;AAAA,UAC9C;AAAA,UAEA;AAAA;AAAA,cAAC;AAAA;AAAA,gBACA,eAAW,kBAAAC;AAAA,kBACV,GAAG,SAAS;AAAA,kBACZ,kBAAkB,qBAAqB;AAAA,gBACxC;AAAA,gBACA,KAAI;AAAA,gBAEH,yBAAe,MAAM,IAAI,EAAE,IAAI,CAAC,YAAY,UAC5C,4CAAC,SAAgB,KAAI,QACnB,wBADQ,KAEV,CACA;AAAA;AAAA,YACF;AAAA,aACE,qBAAqB,eACtB;AAAA,cAAC;AAAA;AAAA,gBAEA,KAAK;AAAA,gBACL,MAAM;AAAA,gBACN;AAAA,gBACA;AAAA,gBACC,GAAG;AAAA,gBACJ,eAAe,uBAAuB,iBAAiB;AAAA;AAAA,YACxD;AAAA;AAAA;AAAA,MAEF;AAAA;AAAA,EACD;AAEF,CAAC;",
+  "sourcesContent": ["import { Box, ExtractShapeByProps, TLShapeId, resolveLineHeightPx } from '@tldraw/editor'\nimport classNames from 'classnames'\nimport React from 'react'\nimport { PlainTextArea } from '../text/PlainTextArea'\nimport { isLegacyAlign } from './legacyProps'\nimport { TextHelpers } from './TextHelpers'\nimport { useEditablePlainText } from './useEditablePlainText'\n\n/** @public */\nexport interface PlainTextLabelProps {\n\tshapeId: TLShapeId\n\ttype: ExtractShapeByProps<{ text: string }>['type']\n\tfontFamily: string\n\tfontSize: number\n\tlineHeight: number\n\ttextAlign: 'start' | 'center' | 'end'\n\tverticalAlign: 'start' | 'middle' | 'end'\n\twrap?: boolean\n\ttext?: string\n\tlabelColor: string\n\tbounds?: Box\n\tisSelected: boolean\n\tonKeyDown?(e: KeyboardEvent): void\n\tclassNamePrefix?: string\n\tstyle?: React.CSSProperties\n\ttextWidth?: number\n\ttextHeight?: number\n\tpadding?: number\n\tshowTextOutline?: boolean\n}\n\n/**\n * Renders a text label that can be used inside of shapes.\n * The component has the ability to be edited in place and furthermore\n * supports rich text editing.\n *\n * @public @react\n */\nexport const PlainTextLabel = React.memo(function PlainTextLabel({\n\tshapeId,\n\ttype,\n\ttext: plaintext,\n\tlabelColor,\n\tfontFamily,\n\tfontSize,\n\tlineHeight,\n\ttextAlign,\n\tverticalAlign,\n\twrap,\n\tisSelected,\n\tpadding = 0,\n\tonKeyDown: handleKeyDownCustom,\n\tclassNamePrefix,\n\tstyle,\n\ttextWidth,\n\ttextHeight,\n\tshowTextOutline = true,\n}: PlainTextLabelProps) {\n\tconst { rInput, isEmpty, isEditing, isReadyForEditing, ...editableTextRest } =\n\t\tuseEditablePlainText(shapeId, type, plaintext)\n\n\tconst finalPlainText = TextHelpers.normalizeTextForDom(plaintext || '')\n\tconst hasText = finalPlainText.length > 0\n\n\tconst legacyAlign = isLegacyAlign(textAlign)\n\n\tif (!isEditing && !hasText) {\n\t\treturn null\n\t}\n\n\t// TODO: probably combine tl-text and tl-arrow eventually\n\t// In case you're grepping for this, it breaks down as follows:\n\t// tl-text-label, tl-text-label__inner, tl-text-shape-label, tl-text\n\t// tl-arrow-label, tl-arrow-label__inner, tl-arrow\n\tconst cssPrefix = classNamePrefix || 'tl-text'\n\treturn (\n\t\t<div\n\t\t\tclassName={`${cssPrefix}-label tl-text-wrapper tl-plain-text-wrapper`}\n\t\t\taria-hidden={!isEditing}\n\t\t\tdata-hastext={!isEmpty}\n\t\t\tdata-isediting={isEditing}\n\t\t\tdata-is-ready-for-editing={isReadyForEditing}\n\t\t\tdata-textwrap={!!wrap}\n\t\t\tdata-isselected={isSelected}\n\t\t\tstyle={{\n\t\t\t\tfontFamily,\n\t\t\t\ttextAlign,\n\t\t\t\tjustifyContent:\n\t\t\t\t\ttextAlign === 'center' || legacyAlign\n\t\t\t\t\t\t? 'center'\n\t\t\t\t\t\t: textAlign === 'end'\n\t\t\t\t\t\t\t? 'flex-end'\n\t\t\t\t\t\t\t: 'flex-start',\n\t\t\t\talignItems:\n\t\t\t\t\tverticalAlign === 'middle'\n\t\t\t\t\t\t? 'center'\n\t\t\t\t\t\t: verticalAlign === 'end'\n\t\t\t\t\t\t\t? 'flex-end'\n\t\t\t\t\t\t\t: 'flex-start',\n\t\t\t\tpadding,\n\t\t\t\t...style,\n\t\t\t}}\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName={`${cssPrefix}-label__inner tl-text-content__wrapper`}\n\t\t\t\tstyle={{\n\t\t\t\t\tfontSize,\n\t\t\t\t\tlineHeight: `${resolveLineHeightPx(fontSize, lineHeight)}px`,\n\t\t\t\t\tminHeight: `${resolveLineHeightPx(fontSize, lineHeight)}px`,\n\t\t\t\t\tminWidth: Math.ceil(textWidth || 0),\n\t\t\t\t\tcolor: labelColor,\n\t\t\t\t\twidth: textWidth ? Math.ceil(textWidth) : undefined,\n\t\t\t\t\theight: textHeight ? Math.ceil(textHeight) : undefined,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclassName={classNames(\n\t\t\t\t\t\t`${cssPrefix} tl-text tl-text-content`,\n\t\t\t\t\t\tshowTextOutline ? 'tl-text__outline' : 'tl-text__no-outline'\n\t\t\t\t\t)}\n\t\t\t\t\tdir=\"auto\"\n\t\t\t\t>\n\t\t\t\t\t{finalPlainText.split('\\n').map((lineOfText, index) => (\n\t\t\t\t\t\t<div key={index} dir=\"auto\">\n\t\t\t\t\t\t\t{lineOfText}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t\t{(isReadyForEditing || isSelected) && (\n\t\t\t\t\t<PlainTextArea\n\t\t\t\t\t\t// Fudge the ref type because we're using forwardRef and it's not typed correctly.\n\t\t\t\t\t\tref={rInput as any}\n\t\t\t\t\t\ttext={plaintext}\n\t\t\t\t\t\tisEditing={isEditing}\n\t\t\t\t\t\tshapeId={shapeId}\n\t\t\t\t\t\t{...editableTextRest}\n\t\t\t\t\t\thandleKeyDown={handleKeyDownCustom ?? editableTextRest.handleKeyDown}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>\n\t)\n})\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAuGG;AAvGH,oBAAyE;AACzE,wBAAuB;AACvB,mBAAkB;AAClB,2BAA8B;AAC9B,yBAA8B;AAC9B,yBAA4B;AAC5B,kCAAqC;AAgC9B,MAAM,iBAAiB,aAAAA,QAAM,KAAK,SAASC,gBAAe;AAAA,EAChE;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,kBAAkB;AACnB,GAAwB;AACvB,QAAM,EAAE,QAAQ,SAAS,WAAW,mBAAmB,GAAG,iBAAiB,QAC1E,kDAAqB,SAAS,MAAM,SAAS;AAE9C,QAAM,iBAAiB,+BAAY,oBAAoB,aAAa,EAAE;AACtE,QAAM,UAAU,eAAe,SAAS;AAExC,QAAM,kBAAc,kCAAc,SAAS;AAE3C,MAAI,CAAC,aAAa,CAAC,SAAS;AAC3B,WAAO;AAAA,EACR;AAMA,QAAM,YAAY,mBAAmB;AACrC,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAW,GAAG,SAAS;AAAA,MACvB,eAAa,CAAC;AAAA,MACd,gBAAc,CAAC;AAAA,MACf,kBAAgB;AAAA,MAChB,6BAA2B;AAAA,MAC3B,iBAAe,CAAC,CAAC;AAAA,MACjB,mBAAiB;AAAA,MACjB,OAAO;AAAA,QACN;AAAA,QACA;AAAA,QACA,gBACC,cAAc,YAAY,cACvB,WACA,cAAc,QACb,aACA;AAAA,QACL,YACC,kBAAkB,WACf,WACA,kBAAkB,QACjB,aACA;AAAA,QACL;AAAA,QACA,GAAG;AAAA,MACJ;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACA,WAAW,GAAG,SAAS;AAAA,UACvB,OAAO;AAAA,YACN;AAAA,YACA,YAAY,OAAG,mCAAoB,UAAU,UAAU,CAAC;AAAA,YACxD,WAAW,OAAG,mCAAoB,UAAU,UAAU,CAAC;AAAA,YACvD,UAAU,KAAK,KAAK,aAAa,CAAC;AAAA,YAClC,OAAO;AAAA,YACP,OAAO,YAAY,KAAK,KAAK,SAAS,IAAI;AAAA,YAC1C,QAAQ,aAAa,KAAK,KAAK,UAAU,IAAI;AAAA,UAC9C;AAAA,UAEA;AAAA;AAAA,cAAC;AAAA;AAAA,gBACA,eAAW,kBAAAC;AAAA,kBACV,GAAG,SAAS;AAAA,kBACZ,kBAAkB,qBAAqB;AAAA,gBACxC;AAAA,gBACA,KAAI;AAAA,gBAEH,yBAAe,MAAM,IAAI,EAAE,IAAI,CAAC,YAAY,UAC5C,4CAAC,SAAgB,KAAI,QACnB,wBADQ,KAEV,CACA;AAAA;AAAA,YACF;AAAA,aACE,qBAAqB,eACtB;AAAA,cAAC;AAAA;AAAA,gBAEA,KAAK;AAAA,gBACL,MAAM;AAAA,gBACN;AAAA,gBACA;AAAA,gBACC,GAAG;AAAA,gBACJ,eAAe,uBAAuB,iBAAiB;AAAA;AAAA,YACxD;AAAA;AAAA;AAAA,MAEF;AAAA;AAAA,EACD;AAEF,CAAC;",
   "names": ["React", "PlainTextLabel", "classNames"]
 }

package/dist-cjs/lib/shapes/shared/RichTextLabel.js

@@ -128,8 +128,8 @@ const RichTextLabel = import_react.default.memo(function RichTextLabel2({
           className: `${cssPrefix}-label__inner tl-text-content__wrapper`,
           style: {
             fontSize,
-            lineHeight: lineHeight.toString(),
-            minHeight: Math.floor(fontSize * lineHeight) + "px",
+            lineHeight: `${(0, import_editor.resolveLineHeightPx)(fontSize, lineHeight)}px`,
+            minHeight: `${(0, import_editor.resolveLineHeightPx)(fontSize, lineHeight)}px`,
             minWidth: Math.ceil(textWidth || 0),
             color: labelColor,
             width: textWidth ? Math.ceil(textWidth) : void 0,
@@ -194,7 +194,7 @@ function RichTextSVG({
     fontSize: `${fontSize}px`,
     wrap: wrap ? "wrap" : "nowrap",
     color: labelColor,
-    lineHeight,
+    lineHeight: `${(0, import_editor.resolveLineHeightPx)(fontSize, lineHeight)}px`,
     textAlign,
     width: "100%",
     wordWrap: "break-word",

package/dist-cjs/lib/shapes/shared/RichTextLabel.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/shapes/shared/RichTextLabel.tsx"],
-  "sourcesContent": ["import {\n\tBox,\n\tExtractShapeByProps,\n\tTLEventInfo,\n\tTLRichText,\n\tTLShapeId,\n\topenWindow,\n\tpreventDefault,\n\tuseEditor,\n\tuseReactor,\n\tuseValue,\n} from '@tldraw/editor'\nimport classNames from 'classnames'\nimport React, { useMemo } from 'react'\nimport { renderHtmlFromRichText } from '../../utils/text/richText'\nimport { RichTextArea } from '../text/RichTextArea'\nimport { isLegacyAlign } from './legacyProps'\nimport { useEditableRichText } from './useEditableRichText'\n\n/** @public */\nexport interface RichTextLabelProps {\n\tshapeId: TLShapeId\n\ttype: ExtractShapeByProps<{ richText: TLRichText }>['type']\n\tfontFamily: string\n\tfontSize: number\n\tlineHeight: number\n\ttextAlign: 'start' | 'center' | 'end'\n\tverticalAlign: 'start' | 'middle' | 'end'\n\twrap?: boolean\n\trichText?: TLRichText\n\tlabelColor: string\n\tbounds?: Box\n\tisSelected: boolean\n\tonKeyDown?(e: KeyboardEvent): void\n\tclassNamePrefix?: string\n\tstyle?: React.CSSProperties\n\ttextWidth?: number\n\ttextHeight?: number\n\tpadding?: number\n\thasCustomTabBehavior?: boolean\n\tshowTextOutline?: boolean\n}\n\n/**\n * Renders a text label that can be used inside of shapes.\n * The component has the ability to be edited in place and furthermore\n * supports rich text editing.\n *\n * @public @react\n */\nexport const RichTextLabel = React.memo(function RichTextLabel({\n\tshapeId,\n\ttype,\n\trichText,\n\tlabelColor,\n\tfontFamily,\n\tfontSize,\n\tlineHeight,\n\ttextAlign,\n\tverticalAlign,\n\twrap,\n\tisSelected,\n\tpadding = 0,\n\tonKeyDown: handleKeyDownCustom,\n\tclassNamePrefix,\n\tstyle,\n\ttextWidth,\n\ttextHeight,\n\thasCustomTabBehavior,\n\tshowTextOutline = true,\n}: RichTextLabelProps) {\n\tconst editor = useEditor()\n\tconst isDragging = React.useRef(false)\n\tconst legacyAlign = isLegacyAlign(textAlign)\n\tconst { rInput, isEmpty, isEditing, isReadyForEditing, ...editableTextRest } =\n\t\tuseEditableRichText(shapeId, type, richText)\n\n\tconst html = useMemo(() => {\n\t\tif (richText) {\n\t\t\treturn renderHtmlFromRichText(editor, richText)\n\t\t}\n\t\treturn undefined\n\t}, [editor, richText])\n\n\tconst selectToolActive = useValue(\n\t\t'isSelectToolActive',\n\t\t() => editor.getCurrentToolId() === 'select',\n\t\t[editor]\n\t)\n\n\tuseReactor(\n\t\t'isDragging',\n\t\t() => {\n\t\t\teditor.getInstanceState()\n\t\t\tisDragging.current = editor.inputs.getIsDragging()\n\t\t},\n\t\t[editor]\n\t)\n\n\tconst handlePointerDown = (e: React.MouseEvent<HTMLDivElement>) => {\n\t\tconst HTMLElementCtor = editor.getContainerWindow().HTMLElement\n\t\tif (\n\t\t\te.target instanceof HTMLElementCtor &&\n\t\t\t(e.target.tagName === 'A' || e.target.closest('a'))\n\t\t) {\n\t\t\t// This mousedown prevent default is to let dragging when over a link work.\n\t\t\tpreventDefault(e)\n\n\t\t\tif (!selectToolActive) return\n\t\t\tconst link = e.target.closest('a')?.getAttribute('href') ?? ''\n\t\t\t// We don't get the mouseup event later because we preventDefault\n\t\t\t// so we have to do it manually.\n\t\t\tconst handlePointerUp = (e: TLEventInfo) => {\n\t\t\t\tif (e.name !== 'pointer_up' || !link) return\n\n\t\t\t\tif (!isDragging.current) {\n\t\t\t\t\topenWindow(link, '_blank', false)\n\t\t\t\t}\n\t\t\t\teditor.off('event', handlePointerUp)\n\t\t\t}\n\t\t\teditor.on('event', handlePointerUp)\n\t\t}\n\t}\n\n\t// Should be guarded higher up so that this doesn't render... but repeated here. This should never be true.\n\tif (!isEditing && isEmpty) return null\n\n\t// TODO: probably combine tl-text and tl-arrow eventually\n\tconst cssPrefix = classNamePrefix || 'tl-text'\n\treturn (\n\t\t<div\n\t\t\tclassName={classNames(\n\t\t\t\t`${cssPrefix}-label tl-text-wrapper tl-rich-text-wrapper`,\n\t\t\t\tshowTextOutline ? 'tl-text__outline' : 'tl-text__no-outline'\n\t\t\t)}\n\t\t\taria-hidden={!isEditing}\n\t\t\tdata-hastext={!isEmpty}\n\t\t\tdata-isediting={isEditing}\n\t\t\tdata-textwrap={!!wrap}\n\t\t\tdata-isselected={isSelected}\n\t\t\tstyle={{\n\t\t\t\tfontFamily,\n\t\t\t\ttextAlign,\n\t\t\t\tjustifyContent:\n\t\t\t\t\ttextAlign === 'center' || legacyAlign\n\t\t\t\t\t\t? 'center'\n\t\t\t\t\t\t: textAlign === 'end'\n\t\t\t\t\t\t\t? 'flex-end'\n\t\t\t\t\t\t\t: 'flex-start',\n\t\t\t\talignItems:\n\t\t\t\t\tverticalAlign === 'middle'\n\t\t\t\t\t\t? 'center'\n\t\t\t\t\t\t: verticalAlign === 'end'\n\t\t\t\t\t\t\t? 'flex-end'\n\t\t\t\t\t\t\t: 'flex-start',\n\t\t\t\tpadding,\n\t\t\t\t...style,\n\t\t\t}}\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName={`${cssPrefix}-label__inner tl-text-content__wrapper`}\n\t\t\t\tstyle={{\n\t\t\t\t\tfontSize,\n\t\t\t\t\tlineHeight: lineHeight.toString(),\n\t\t\t\t\tminHeight: Math.floor(fontSize * lineHeight) + 'px',\n\t\t\t\t\tminWidth: Math.ceil(textWidth || 0),\n\t\t\t\t\tcolor: labelColor,\n\t\t\t\t\twidth: textWidth ? Math.ceil(textWidth) : undefined,\n\t\t\t\t\theight: textHeight ? Math.ceil(textHeight) : undefined,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div className={`${cssPrefix} tl-text tl-text-content`} dir=\"auto\">\n\t\t\t\t\t{richText && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName=\"tl-rich-text\"\n\t\t\t\t\t\t\tdata-is-select-tool-active={selectToolActive}\n\t\t\t\t\t\t\t// todo: see if I can abuse this\n\t\t\t\t\t\t\tdangerouslySetInnerHTML={{ __html: html || '' }}\n\t\t\t\t\t\t\tonPointerDown={handlePointerDown}\n\t\t\t\t\t\t\tdata-is-ready-for-editing={isReadyForEditing}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t{(isReadyForEditing || isSelected) && (\n\t\t\t\t\t<RichTextArea\n\t\t\t\t\t\t// Fudge the ref type because we're using forwardRef and it's not typed correctly.\n\t\t\t\t\t\tref={rInput as any}\n\t\t\t\t\t\trichText={richText}\n\t\t\t\t\t\tisEditing={isEditing}\n\t\t\t\t\t\tshapeId={shapeId}\n\t\t\t\t\t\t{...editableTextRest}\n\t\t\t\t\t\thasCustomTabBehavior={hasCustomTabBehavior}\n\t\t\t\t\t\thandleKeyDown={handleKeyDownCustom ?? editableTextRest.handleKeyDown}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>\n\t)\n})\n\n/** @public */\nexport interface RichTextSVGProps {\n\tbounds: Box\n\trichText: TLRichText\n\tfontSize: number\n\tfontFamily: string\n\tlineHeight: number\n\ttextAlign: 'start' | 'center' | 'end'\n\tverticalAlign: 'start' | 'middle' | 'end'\n\twrap?: boolean\n\tlabelColor: string\n\tpadding: number\n\tshowTextOutline?: boolean\n}\n\n/**\n * Renders a rich text string as SVG given bounds and text properties.\n *\n * @public @react\n */\nexport function RichTextSVG({\n\tbounds,\n\trichText,\n\tfontSize,\n\tfontFamily,\n\tlineHeight,\n\ttextAlign,\n\tverticalAlign,\n\twrap,\n\tlabelColor,\n\tpadding,\n\tshowTextOutline = true,\n}: RichTextSVGProps) {\n\tconst editor = useEditor()\n\tconst html = renderHtmlFromRichText(editor, richText)\n\tconst legacyAlign = isLegacyAlign(textAlign)\n\tconst justifyContent =\n\t\ttextAlign === 'center' || legacyAlign\n\t\t\t? ('center' as const)\n\t\t\t: textAlign === 'start'\n\t\t\t\t? ('flex-start' as const)\n\t\t\t\t: ('flex-end' as const)\n\tconst alignItems =\n\t\tverticalAlign === 'middle' ? 'center' : verticalAlign === 'start' ? 'flex-start' : 'flex-end'\n\tconst wrapperStyle = {\n\t\tdisplay: 'flex',\n\t\tfontFamily,\n\t\theight: `100%`,\n\t\tjustifyContent,\n\t\talignItems,\n\t\tpadding: `${padding}px`,\n\t}\n\tconst style = {\n\t\tfontSize: `${fontSize}px`,\n\t\twrap: wrap ? 'wrap' : 'nowrap',\n\t\tcolor: labelColor,\n\t\tlineHeight,\n\t\ttextAlign,\n\t\twidth: '100%',\n\t\twordWrap: 'break-word' as const,\n\t\toverflowWrap: 'break-word' as const,\n\t\twhiteSpace: 'pre-wrap',\n\t\ttextShadow: showTextOutline ? 'var(--tl-text-outline)' : 'none',\n\t\ttabSize: 'var(--tl-tab-size, 2)',\n\t}\n\n\treturn (\n\t\t<foreignObject\n\t\t\tx={bounds.minX}\n\t\t\ty={bounds.minY}\n\t\t\twidth={bounds.w}\n\t\t\theight={bounds.h}\n\t\t\tclassName={classNames(\n\t\t\t\t'tl-export-embed-styles tl-rich-text tl-rich-text-svg',\n\t\t\t\tshowTextOutline ? 'tl-text__outline' : 'tl-text__no-outline'\n\t\t\t)}\n\t\t>\n\t\t\t<div style={wrapperStyle}>\n\t\t\t\t<div dangerouslySetInnerHTML={{ __html: html }} style={style} />\n\t\t\t</div>\n\t\t</foreignObject>\n\t)\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n\tBox,\n\tExtractShapeByProps,\n\tTLEventInfo,\n\tTLRichText,\n\tTLShapeId,\n\topenWindow,\n\tpreventDefault,\n\tresolveLineHeightPx,\n\tuseEditor,\n\tuseReactor,\n\tuseValue,\n} from '@tldraw/editor'\nimport classNames from 'classnames'\nimport React, { useMemo } from 'react'\nimport { renderHtmlFromRichText } from '../../utils/text/richText'\nimport { RichTextArea } from '../text/RichTextArea'\nimport { isLegacyAlign } from './legacyProps'\nimport { useEditableRichText } from './useEditableRichText'\n\n/** @public */\nexport interface RichTextLabelProps {\n\tshapeId: TLShapeId\n\ttype: ExtractShapeByProps<{ richText: TLRichText }>['type']\n\tfontFamily: string\n\tfontSize: number\n\tlineHeight: number\n\ttextAlign: 'start' | 'center' | 'end'\n\tverticalAlign: 'start' | 'middle' | 'end'\n\twrap?: boolean\n\trichText?: TLRichText\n\tlabelColor: string\n\tbounds?: Box\n\tisSelected: boolean\n\tonKeyDown?(e: KeyboardEvent): void\n\tclassNamePrefix?: string\n\tstyle?: React.CSSProperties\n\ttextWidth?: number\n\ttextHeight?: number\n\tpadding?: number\n\thasCustomTabBehavior?: boolean\n\tshowTextOutline?: boolean\n}\n\n/**\n * Renders a text label that can be used inside of shapes.\n * The component has the ability to be edited in place and furthermore\n * supports rich text editing.\n *\n * @public @react\n */\nexport const RichTextLabel = React.memo(function RichTextLabel({\n\tshapeId,\n\ttype,\n\trichText,\n\tlabelColor,\n\tfontFamily,\n\tfontSize,\n\tlineHeight,\n\ttextAlign,\n\tverticalAlign,\n\twrap,\n\tisSelected,\n\tpadding = 0,\n\tonKeyDown: handleKeyDownCustom,\n\tclassNamePrefix,\n\tstyle,\n\ttextWidth,\n\ttextHeight,\n\thasCustomTabBehavior,\n\tshowTextOutline = true,\n}: RichTextLabelProps) {\n\tconst editor = useEditor()\n\tconst isDragging = React.useRef(false)\n\tconst legacyAlign = isLegacyAlign(textAlign)\n\tconst { rInput, isEmpty, isEditing, isReadyForEditing, ...editableTextRest } =\n\t\tuseEditableRichText(shapeId, type, richText)\n\n\tconst html = useMemo(() => {\n\t\tif (richText) {\n\t\t\treturn renderHtmlFromRichText(editor, richText)\n\t\t}\n\t\treturn undefined\n\t}, [editor, richText])\n\n\tconst selectToolActive = useValue(\n\t\t'isSelectToolActive',\n\t\t() => editor.getCurrentToolId() === 'select',\n\t\t[editor]\n\t)\n\n\tuseReactor(\n\t\t'isDragging',\n\t\t() => {\n\t\t\teditor.getInstanceState()\n\t\t\tisDragging.current = editor.inputs.getIsDragging()\n\t\t},\n\t\t[editor]\n\t)\n\n\tconst handlePointerDown = (e: React.MouseEvent<HTMLDivElement>) => {\n\t\tconst HTMLElementCtor = editor.getContainerWindow().HTMLElement\n\t\tif (\n\t\t\te.target instanceof HTMLElementCtor &&\n\t\t\t(e.target.tagName === 'A' || e.target.closest('a'))\n\t\t) {\n\t\t\t// This mousedown prevent default is to let dragging when over a link work.\n\t\t\tpreventDefault(e)\n\n\t\t\tif (!selectToolActive) return\n\t\t\tconst link = e.target.closest('a')?.getAttribute('href') ?? ''\n\t\t\t// We don't get the mouseup event later because we preventDefault\n\t\t\t// so we have to do it manually.\n\t\t\tconst handlePointerUp = (e: TLEventInfo) => {\n\t\t\t\tif (e.name !== 'pointer_up' || !link) return\n\n\t\t\t\tif (!isDragging.current) {\n\t\t\t\t\topenWindow(link, '_blank', false)\n\t\t\t\t}\n\t\t\t\teditor.off('event', handlePointerUp)\n\t\t\t}\n\t\t\teditor.on('event', handlePointerUp)\n\t\t}\n\t}\n\n\t// Should be guarded higher up so that this doesn't render... but repeated here. This should never be true.\n\tif (!isEditing && isEmpty) return null\n\n\t// TODO: probably combine tl-text and tl-arrow eventually\n\tconst cssPrefix = classNamePrefix || 'tl-text'\n\treturn (\n\t\t<div\n\t\t\tclassName={classNames(\n\t\t\t\t`${cssPrefix}-label tl-text-wrapper tl-rich-text-wrapper`,\n\t\t\t\tshowTextOutline ? 'tl-text__outline' : 'tl-text__no-outline'\n\t\t\t)}\n\t\t\taria-hidden={!isEditing}\n\t\t\tdata-hastext={!isEmpty}\n\t\t\tdata-isediting={isEditing}\n\t\t\tdata-textwrap={!!wrap}\n\t\t\tdata-isselected={isSelected}\n\t\t\tstyle={{\n\t\t\t\tfontFamily,\n\t\t\t\ttextAlign,\n\t\t\t\tjustifyContent:\n\t\t\t\t\ttextAlign === 'center' || legacyAlign\n\t\t\t\t\t\t? 'center'\n\t\t\t\t\t\t: textAlign === 'end'\n\t\t\t\t\t\t\t? 'flex-end'\n\t\t\t\t\t\t\t: 'flex-start',\n\t\t\t\talignItems:\n\t\t\t\t\tverticalAlign === 'middle'\n\t\t\t\t\t\t? 'center'\n\t\t\t\t\t\t: verticalAlign === 'end'\n\t\t\t\t\t\t\t? 'flex-end'\n\t\t\t\t\t\t\t: 'flex-start',\n\t\t\t\tpadding,\n\t\t\t\t...style,\n\t\t\t}}\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName={`${cssPrefix}-label__inner tl-text-content__wrapper`}\n\t\t\t\tstyle={{\n\t\t\t\t\tfontSize,\n\t\t\t\t\tlineHeight: `${resolveLineHeightPx(fontSize, lineHeight)}px`,\n\t\t\t\t\tminHeight: `${resolveLineHeightPx(fontSize, lineHeight)}px`,\n\t\t\t\t\tminWidth: Math.ceil(textWidth || 0),\n\t\t\t\t\tcolor: labelColor,\n\t\t\t\t\twidth: textWidth ? Math.ceil(textWidth) : undefined,\n\t\t\t\t\theight: textHeight ? Math.ceil(textHeight) : undefined,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div className={`${cssPrefix} tl-text tl-text-content`} dir=\"auto\">\n\t\t\t\t\t{richText && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName=\"tl-rich-text\"\n\t\t\t\t\t\t\tdata-is-select-tool-active={selectToolActive}\n\t\t\t\t\t\t\t// todo: see if I can abuse this\n\t\t\t\t\t\t\tdangerouslySetInnerHTML={{ __html: html || '' }}\n\t\t\t\t\t\t\tonPointerDown={handlePointerDown}\n\t\t\t\t\t\t\tdata-is-ready-for-editing={isReadyForEditing}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t{(isReadyForEditing || isSelected) && (\n\t\t\t\t\t<RichTextArea\n\t\t\t\t\t\t// Fudge the ref type because we're using forwardRef and it's not typed correctly.\n\t\t\t\t\t\tref={rInput as any}\n\t\t\t\t\t\trichText={richText}\n\t\t\t\t\t\tisEditing={isEditing}\n\t\t\t\t\t\tshapeId={shapeId}\n\t\t\t\t\t\t{...editableTextRest}\n\t\t\t\t\t\thasCustomTabBehavior={hasCustomTabBehavior}\n\t\t\t\t\t\thandleKeyDown={handleKeyDownCustom ?? editableTextRest.handleKeyDown}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>\n\t)\n})\n\n/** @public */\nexport interface RichTextSVGProps {\n\tbounds: Box\n\trichText: TLRichText\n\tfontSize: number\n\tfontFamily: string\n\tlineHeight: number\n\ttextAlign: 'start' | 'center' | 'end'\n\tverticalAlign: 'start' | 'middle' | 'end'\n\twrap?: boolean\n\tlabelColor: string\n\tpadding: number\n\tshowTextOutline?: boolean\n}\n\n/**\n * Renders a rich text string as SVG given bounds and text properties.\n *\n * @public @react\n */\nexport function RichTextSVG({\n\tbounds,\n\trichText,\n\tfontSize,\n\tfontFamily,\n\tlineHeight,\n\ttextAlign,\n\tverticalAlign,\n\twrap,\n\tlabelColor,\n\tpadding,\n\tshowTextOutline = true,\n}: RichTextSVGProps) {\n\tconst editor = useEditor()\n\tconst html = renderHtmlFromRichText(editor, richText)\n\tconst legacyAlign = isLegacyAlign(textAlign)\n\tconst justifyContent =\n\t\ttextAlign === 'center' || legacyAlign\n\t\t\t? ('center' as const)\n\t\t\t: textAlign === 'start'\n\t\t\t\t? ('flex-start' as const)\n\t\t\t\t: ('flex-end' as const)\n\tconst alignItems =\n\t\tverticalAlign === 'middle' ? 'center' : verticalAlign === 'start' ? 'flex-start' : 'flex-end'\n\tconst wrapperStyle = {\n\t\tdisplay: 'flex',\n\t\tfontFamily,\n\t\theight: `100%`,\n\t\tjustifyContent,\n\t\talignItems,\n\t\tpadding: `${padding}px`,\n\t}\n\tconst style = {\n\t\tfontSize: `${fontSize}px`,\n\t\twrap: wrap ? 'wrap' : 'nowrap',\n\t\tcolor: labelColor,\n\t\tlineHeight: `${resolveLineHeightPx(fontSize, lineHeight)}px`,\n\t\ttextAlign,\n\t\twidth: '100%',\n\t\twordWrap: 'break-word' as const,\n\t\toverflowWrap: 'break-word' as const,\n\t\twhiteSpace: 'pre-wrap',\n\t\ttextShadow: showTextOutline ? 'var(--tl-text-outline)' : 'none',\n\t\ttabSize: 'var(--tl-tab-size, 2)',\n\t}\n\n\treturn (\n\t\t<foreignObject\n\t\t\tx={bounds.minX}\n\t\t\ty={bounds.minY}\n\t\t\twidth={bounds.w}\n\t\t\theight={bounds.h}\n\t\t\tclassName={classNames(\n\t\t\t\t'tl-export-embed-styles tl-rich-text tl-rich-text-svg',\n\t\t\t\tshowTextOutline ? 'tl-text__outline' : 'tl-text__no-outline'\n\t\t\t)}\n\t\t>\n\t\t\t<div style={wrapperStyle}>\n\t\t\t\t<div dangerouslySetInnerHTML={{ __html: html }} style={style} />\n\t\t\t</div>\n\t\t</foreignObject>\n\t)\n}\n"],
+  "mappings": "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",
   "names": ["React", "RichTextLabel", "e", "classNames"]
 }

package/dist-cjs/lib/shapes/shared/defaultStyleDefs.js

@@ -77,7 +77,10 @@ const generateImage = (dpr, currentZoom, solid) => {
     canvasEl.width = size;
     canvasEl.height = size;
     const ctx = canvasEl.getContext("2d");
-    if (!ctx) return;
+    if (!ctx) {
+      reject();
+      return;
+    }
     ctx.fillStyle = solid;
     ctx.fillRect(0, 0, size, size);
     ctx.globalCompositeOperation = "destination-out";
@@ -102,6 +105,17 @@ const generateImage = (dpr, currentZoom, solid) => {
     });
   });
 };
+const patternImageBlobCache = /* @__PURE__ */ new Map();
+function getPatternImageBlob(dpr, zoom, solid) {
+  const key = `${dpr}_${zoom}_${solid}`;
+  let blob = patternImageBlobCache.get(key);
+  if (!blob) {
+    blob = generateImage(dpr, zoom, solid);
+    blob.catch(() => patternImageBlobCache.delete(key));
+    patternImageBlobCache.set(key, blob);
+  }
+  return blob;
+}
 const canvasBlob = (size, fn) => {
   const canvas = (0, import_editor.getGlobalDocument)().createElement("canvas");
   canvas.width = size[0];
@@ -184,12 +198,12 @@ function usePattern() {
     const darkSolid = definition.colors.dark.solid;
     const promise = Promise.all(
       getPatternLodsToGenerate(maxEffectiveZoom).flatMap((zoom) => [
-        generateImage(dpr, zoom, lightSolid).then((blob) => ({
+        getPatternImageBlob(dpr, zoom, lightSolid).then((blob) => ({
           zoom,
           theme: "light",
           url: URL.createObjectURL(blob)
         })),
-        generateImage(dpr, zoom, darkSolid).then((blob) => ({
+        getPatternImageBlob(dpr, zoom, darkSolid).then((blob) => ({
           zoom,
           theme: "dark",
           url: URL.createObjectURL(blob)

package/dist-cjs/lib/shapes/shared/defaultStyleDefs.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/shapes/shared/defaultStyleDefs.tsx"],
-  "sourcesContent": ["import {\n\tDefaultFontStyle,\n\tSvgExportDef,\n\tTLDefaultFillStyle,\n\tTLShapeUtilCanvasSvgDef,\n\tdebugFlags,\n\tgetGlobalDocument,\n\tlast,\n\tsuffixSafeId,\n\ttlenv,\n\tuseColorMode,\n\tuseEditor,\n\tuseSharedSafeId,\n\tuseUniqueSafeId,\n\tuseValue,\n} from '@tldraw/editor'\nimport { useCallback, useEffect, useRef, useState } from 'react'\n\n/** @public */\nexport function getFillDefForExport(fill: TLDefaultFillStyle): SvgExportDef {\n\treturn {\n\t\tkey: `${DefaultFontStyle.id}:${fill}`,\n\t\tasync getElement() {\n\t\t\tif (fill !== 'pattern') return null\n\n\t\t\treturn <HashPatternForExport />\n\t\t},\n\t}\n}\n\nfunction HashPatternForExport() {\n\tconst getHashPatternZoomName = useGetHashPatternZoomName()\n\tconst maskId = useUniqueSafeId()\n\tconst editor = useEditor()\n\tconst colorMode = useColorMode()\n\tconst colors = editor.getCurrentTheme().colors[colorMode]\n\tconst t = 8 / 12\n\treturn (\n\t\t<>\n\t\t\t<mask id={maskId}>\n\t\t\t\t<rect x=\"0\" y=\"0\" width=\"8\" height=\"8\" fill=\"white\" />\n\t\t\t\t<g strokeLinecap=\"round\" stroke=\"black\">\n\t\t\t\t\t<line x1={t * 1} y1={t * 3} x2={t * 3} y2={t * 1} />\n\t\t\t\t\t<line x1={t * 5} y1={t * 7} x2={t * 7} y2={t * 5} />\n\t\t\t\t\t<line x1={t * 9} y1={t * 11} x2={t * 11} y2={t * 9} />\n\t\t\t\t</g>\n\t\t\t</mask>\n\t\t\t<pattern\n\t\t\t\tid={getHashPatternZoomName(1, colorMode)}\n\t\t\t\twidth=\"8\"\n\t\t\t\theight=\"8\"\n\t\t\t\tpatternUnits=\"userSpaceOnUse\"\n\t\t\t>\n\t\t\t\t<rect x=\"0\" y=\"0\" width=\"8\" height=\"8\" fill={colors.solid} mask={`url(#${maskId})`} />\n\t\t\t</pattern>\n\t\t</>\n\t)\n}\n\nexport function getFillDefForCanvas(): TLShapeUtilCanvasSvgDef {\n\treturn {\n\t\tkey: `${DefaultFontStyle.id}:pattern`,\n\t\tcomponent: PatternFillDefForCanvas,\n\t}\n}\nconst TILE_PATTERN_SIZE = 8\n\nconst generateImage = (dpr: number, currentZoom: number, solid: string) => {\n\treturn new Promise<Blob>((resolve, reject) => {\n\t\tconst size = TILE_PATTERN_SIZE * currentZoom * dpr\n\n\t\tconst canvasEl = getGlobalDocument().createElement('canvas')\n\t\tcanvasEl.width = size\n\t\tcanvasEl.height = size\n\n\t\tconst ctx = canvasEl.getContext('2d')\n\t\tif (!ctx) return\n\n\t\tctx.fillStyle = solid\n\t\tctx.fillRect(0, 0, size, size)\n\n\t\t// This essentially generates an inverse of the pattern we're drawing.\n\t\tctx.globalCompositeOperation = 'destination-out'\n\n\t\tctx.lineCap = 'round'\n\t\tctx.lineWidth = 1.25 * currentZoom * dpr\n\n\t\tconst t = 8 / 12\n\t\tconst s = (v: number) => v * currentZoom * dpr\n\n\t\tctx.beginPath()\n\t\tctx.moveTo(s(t * 1), s(t * 3))\n\t\tctx.lineTo(s(t * 3), s(t * 1))\n\n\t\tctx.moveTo(s(t * 5), s(t * 7))\n\t\tctx.lineTo(s(t * 7), s(t * 5))\n\n\t\tctx.moveTo(s(t * 9), s(t * 11))\n\t\tctx.lineTo(s(t * 11), s(t * 9))\n\t\tctx.stroke()\n\n\t\tcanvasEl.toBlob((blob) => {\n\t\t\tif (!blob || debugFlags.throwToBlob.get()) {\n\t\t\t\treject()\n\t\t\t} else {\n\t\t\t\tresolve(blob)\n\t\t\t}\n\t\t})\n\t})\n}\n\nconst canvasBlob = (size: [number, number], fn: (ctx: CanvasRenderingContext2D) => void) => {\n\tconst canvas = getGlobalDocument().createElement('canvas')\n\tcanvas.width = size[0]\n\tcanvas.height = size[1]\n\tconst ctx = canvas.getContext('2d')\n\tif (!ctx) return ''\n\tfn(ctx)\n\treturn canvas.toDataURL()\n}\ninterface PatternDef {\n\tzoom: number\n\turl: string\n\ttheme: string\n}\n\nlet defaultPixels: { white: string; black: string } | null = null\nfunction getDefaultPixels() {\n\tif (!defaultPixels) {\n\t\tdefaultPixels = {\n\t\t\twhite: canvasBlob([1, 1], (ctx) => {\n\t\t\t\tctx.fillStyle = '#f8f9fa'\n\t\t\t\tctx.fillRect(0, 0, 1, 1)\n\t\t\t}),\n\t\t\tblack: canvasBlob([1, 1], (ctx) => {\n\t\t\t\tctx.fillStyle = '#212529'\n\t\t\t\tctx.fillRect(0, 0, 1, 1)\n\t\t\t}),\n\t\t}\n\t}\n\treturn defaultPixels\n}\n\nfunction getPatternLodForZoomLevel(zoom: number) {\n\treturn Math.ceil(Math.log2(Math.max(1, zoom)))\n}\n\nexport function useGetHashPatternZoomName() {\n\tconst id = useSharedSafeId('hash_pattern')\n\treturn useCallback(\n\t\t(zoom: number, theme: string) => {\n\t\t\tconst lod = getPatternLodForZoomLevel(zoom)\n\t\t\treturn suffixSafeId(id, `${theme}_${lod}`)\n\t\t},\n\t\t[id]\n\t)\n}\n\nfunction getPatternLodsToGenerate(maxZoom: number) {\n\tconst levels = []\n\tconst minLod = 0\n\tconst maxLod = getPatternLodForZoomLevel(maxZoom)\n\tfor (let i = minLod; i <= maxLod; i++) {\n\t\tlevels.push(Math.pow(2, i))\n\t}\n\treturn levels\n}\n\nfunction getDefaultPatterns(maxZoom: number): PatternDef[] {\n\tconst defaultPixels = getDefaultPixels()\n\treturn getPatternLodsToGenerate(maxZoom).flatMap((zoom) => [\n\t\t{ zoom, url: defaultPixels.white, theme: 'light' },\n\t\t{ zoom, url: defaultPixels.black, theme: 'dark' },\n\t])\n}\n\nfunction usePattern() {\n\tconst editor = useEditor()\n\tconst dpr = useValue('devicePixelRatio', () => editor.getInstanceState().devicePixelRatio, [\n\t\teditor,\n\t])\n\t// In dynamic size mode, new shapes are created with scale = 1 / zoomLevel.\n\t// For pattern LOD generation, we use the worst-case effective zoom:\n\t// a shape created at min zoom and later viewed at max zoom (maxZoom / minZoom)\n\tconst maxEffectiveZoom = useValue(\n\t\t'maxEffectiveZoom',\n\t\t() => {\n\t\t\tconst steps = editor.getCameraOptions().zoomSteps\n\t\t\treturn last(steps)! / steps[0]\n\t\t},\n\t\t[editor]\n\t)\n\tconst [isReady, setIsReady] = useState(false)\n\tconst [backgroundUrls, setBackgroundUrls] = useState<PatternDef[]>(() =>\n\t\tgetDefaultPatterns(maxEffectiveZoom)\n\t)\n\tconst getHashPatternZoomName = useGetHashPatternZoomName()\n\n\tuseEffect(() => {\n\t\tif (process.env.NODE_ENV === 'test') {\n\t\t\tsetIsReady(true)\n\t\t\treturn\n\t\t}\n\n\t\tconst definition = editor.getCurrentTheme()\n\t\tconst lightSolid = definition.colors.light.solid\n\t\tconst darkSolid = definition.colors.dark.solid\n\n\t\tconst promise = Promise.all(\n\t\t\tgetPatternLodsToGenerate(maxEffectiveZoom).flatMap<Promise<PatternDef>>((zoom) => [\n\t\t\t\tgenerateImage(dpr, zoom, lightSolid).then((blob) => ({\n\t\t\t\t\tzoom,\n\t\t\t\t\ttheme: 'light',\n\t\t\t\t\turl: URL.createObjectURL(blob),\n\t\t\t\t})),\n\t\t\t\tgenerateImage(dpr, zoom, darkSolid).then((blob) => ({\n\t\t\t\t\tzoom,\n\t\t\t\t\ttheme: 'dark',\n\t\t\t\t\turl: URL.createObjectURL(blob),\n\t\t\t\t})),\n\t\t\t])\n\t\t)\n\n\t\tlet isCancelled = false\n\t\tpromise.then((urls) => {\n\t\t\tif (isCancelled) return\n\t\t\tsetBackgroundUrls(urls)\n\t\t\tsetIsReady(true)\n\t\t})\n\t\treturn () => {\n\t\t\tisCancelled = true\n\t\t\tsetIsReady(false)\n\t\t\tpromise.then((patterns) => {\n\t\t\t\tfor (const { url } of patterns) {\n\t\t\t\t\tURL.revokeObjectURL(url)\n\t\t\t\t}\n\t\t\t})\n\t\t}\n\t}, [dpr, maxEffectiveZoom, editor])\n\n\tconst defs = (\n\t\t<>\n\t\t\t{backgroundUrls.map((item) => {\n\t\t\t\tconst id = getHashPatternZoomName(item.zoom, item.theme)\n\t\t\t\treturn (\n\t\t\t\t\t<pattern\n\t\t\t\t\t\tkey={id}\n\t\t\t\t\t\tid={id}\n\t\t\t\t\t\twidth={TILE_PATTERN_SIZE}\n\t\t\t\t\t\theight={TILE_PATTERN_SIZE}\n\t\t\t\t\t\tpatternUnits=\"userSpaceOnUse\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<image href={item.url} width={TILE_PATTERN_SIZE} height={TILE_PATTERN_SIZE} />\n\t\t\t\t\t</pattern>\n\t\t\t\t)\n\t\t\t})}\n\t\t</>\n\t)\n\n\treturn { defs, isReady }\n}\n\nfunction PatternFillDefForCanvas() {\n\tconst editor = useEditor()\n\tconst containerRef = useRef<SVGGElement>(null)\n\tconst { defs, isReady } = usePattern()\n\n\tuseEffect(() => {\n\t\tif (isReady && tlenv.isSafari) {\n\t\t\tconst htmlLayer = findHtmlLayerParent(containerRef.current!)\n\t\t\tif (htmlLayer) {\n\t\t\t\t// Wait for `patternContext` to be picked up\n\t\t\t\teditor.timers.requestAnimationFrame(() => {\n\t\t\t\t\thtmlLayer.style.display = 'none'\n\n\t\t\t\t\t// Wait for 'display = \"none\"' to take effect\n\t\t\t\t\teditor.timers.requestAnimationFrame(() => {\n\t\t\t\t\t\thtmlLayer.style.display = ''\n\t\t\t\t\t})\n\t\t\t\t})\n\t\t\t}\n\t\t}\n\t}, [editor, isReady])\n\n\treturn (\n\t\t<g ref={containerRef} data-testid={isReady ? 'ready-pattern-fill-defs' : undefined}>\n\t\t\t{defs}\n\t\t</g>\n\t)\n}\n\nfunction findHtmlLayerParent(element: Element): HTMLElement | null {\n\tif (element.classList.contains('tl-html-layer')) return element as HTMLElement\n\tif (element.parentElement) return findHtmlLayerParent(element.parentElement)\n\treturn null\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n\tDefaultFontStyle,\n\tSvgExportDef,\n\tTLDefaultFillStyle,\n\tTLShapeUtilCanvasSvgDef,\n\tdebugFlags,\n\tgetGlobalDocument,\n\tlast,\n\tsuffixSafeId,\n\ttlenv,\n\tuseColorMode,\n\tuseEditor,\n\tuseSharedSafeId,\n\tuseUniqueSafeId,\n\tuseValue,\n} from '@tldraw/editor'\nimport { useCallback, useEffect, useRef, useState } from 'react'\n\n/** @public */\nexport function getFillDefForExport(fill: TLDefaultFillStyle): SvgExportDef {\n\treturn {\n\t\tkey: `${DefaultFontStyle.id}:${fill}`,\n\t\tasync getElement() {\n\t\t\tif (fill !== 'pattern') return null\n\n\t\t\treturn <HashPatternForExport />\n\t\t},\n\t}\n}\n\nfunction HashPatternForExport() {\n\tconst getHashPatternZoomName = useGetHashPatternZoomName()\n\tconst maskId = useUniqueSafeId()\n\tconst editor = useEditor()\n\tconst colorMode = useColorMode()\n\tconst colors = editor.getCurrentTheme().colors[colorMode]\n\tconst t = 8 / 12\n\treturn (\n\t\t<>\n\t\t\t<mask id={maskId}>\n\t\t\t\t<rect x=\"0\" y=\"0\" width=\"8\" height=\"8\" fill=\"white\" />\n\t\t\t\t<g strokeLinecap=\"round\" stroke=\"black\">\n\t\t\t\t\t<line x1={t * 1} y1={t * 3} x2={t * 3} y2={t * 1} />\n\t\t\t\t\t<line x1={t * 5} y1={t * 7} x2={t * 7} y2={t * 5} />\n\t\t\t\t\t<line x1={t * 9} y1={t * 11} x2={t * 11} y2={t * 9} />\n\t\t\t\t</g>\n\t\t\t</mask>\n\t\t\t<pattern\n\t\t\t\tid={getHashPatternZoomName(1, colorMode)}\n\t\t\t\twidth=\"8\"\n\t\t\t\theight=\"8\"\n\t\t\t\tpatternUnits=\"userSpaceOnUse\"\n\t\t\t>\n\t\t\t\t<rect x=\"0\" y=\"0\" width=\"8\" height=\"8\" fill={colors.solid} mask={`url(#${maskId})`} />\n\t\t\t</pattern>\n\t\t</>\n\t)\n}\n\nexport function getFillDefForCanvas(): TLShapeUtilCanvasSvgDef {\n\treturn {\n\t\tkey: `${DefaultFontStyle.id}:pattern`,\n\t\tcomponent: PatternFillDefForCanvas,\n\t}\n}\nconst TILE_PATTERN_SIZE = 8\n\nconst generateImage = (dpr: number, currentZoom: number, solid: string) => {\n\treturn new Promise<Blob>((resolve, reject) => {\n\t\tconst size = TILE_PATTERN_SIZE * currentZoom * dpr\n\n\t\tconst canvasEl = getGlobalDocument().createElement('canvas')\n\t\tcanvasEl.width = size\n\t\tcanvasEl.height = size\n\n\t\tconst ctx = canvasEl.getContext('2d')\n\t\tif (!ctx) {\n\t\t\treject()\n\t\t\treturn\n\t\t}\n\n\t\tctx.fillStyle = solid\n\t\tctx.fillRect(0, 0, size, size)\n\n\t\t// This essentially generates an inverse of the pattern we're drawing.\n\t\tctx.globalCompositeOperation = 'destination-out'\n\n\t\tctx.lineCap = 'round'\n\t\tctx.lineWidth = 1.25 * currentZoom * dpr\n\n\t\tconst t = 8 / 12\n\t\tconst s = (v: number) => v * currentZoom * dpr\n\n\t\tctx.beginPath()\n\t\tctx.moveTo(s(t * 1), s(t * 3))\n\t\tctx.lineTo(s(t * 3), s(t * 1))\n\n\t\tctx.moveTo(s(t * 5), s(t * 7))\n\t\tctx.lineTo(s(t * 7), s(t * 5))\n\n\t\tctx.moveTo(s(t * 9), s(t * 11))\n\t\tctx.lineTo(s(t * 11), s(t * 9))\n\t\tctx.stroke()\n\n\t\tcanvasEl.toBlob((blob) => {\n\t\t\tif (!blob || debugFlags.throwToBlob.get()) {\n\t\t\t\treject()\n\t\t\t} else {\n\t\t\t\tresolve(blob)\n\t\t\t}\n\t\t})\n\t})\n}\n\n// Generating the pattern images is expensive (canvas draw + encode), but the result only depends\n// on the device pixel ratio, zoom level, and solid color. Cache the blobs at the module level so\n// the work is done once and reused across editor mounts and instances. Object URLs are still\n// created and revoked per-instance; only the underlying blobs are shared.\nconst patternImageBlobCache = new Map<string, Promise<Blob>>()\n\nfunction getPatternImageBlob(dpr: number, zoom: number, solid: string): Promise<Blob> {\n\tconst key = `${dpr}_${zoom}_${solid}`\n\tlet blob = patternImageBlobCache.get(key)\n\tif (!blob) {\n\t\tblob = generateImage(dpr, zoom, solid)\n\t\t// Don't keep a rejected promise around (e.g. the throwToBlob debug flag), so a later call\n\t\t// can retry once the failure condition is gone.\n\t\tblob.catch(() => patternImageBlobCache.delete(key))\n\t\tpatternImageBlobCache.set(key, blob)\n\t}\n\treturn blob\n}\n\nconst canvasBlob = (size: [number, number], fn: (ctx: CanvasRenderingContext2D) => void) => {\n\tconst canvas = getGlobalDocument().createElement('canvas')\n\tcanvas.width = size[0]\n\tcanvas.height = size[1]\n\tconst ctx = canvas.getContext('2d')\n\tif (!ctx) return ''\n\tfn(ctx)\n\treturn canvas.toDataURL()\n}\ninterface PatternDef {\n\tzoom: number\n\turl: string\n\ttheme: string\n}\n\nlet defaultPixels: { white: string; black: string } | null = null\nfunction getDefaultPixels() {\n\tif (!defaultPixels) {\n\t\tdefaultPixels = {\n\t\t\twhite: canvasBlob([1, 1], (ctx) => {\n\t\t\t\tctx.fillStyle = '#f8f9fa'\n\t\t\t\tctx.fillRect(0, 0, 1, 1)\n\t\t\t}),\n\t\t\tblack: canvasBlob([1, 1], (ctx) => {\n\t\t\t\tctx.fillStyle = '#212529'\n\t\t\t\tctx.fillRect(0, 0, 1, 1)\n\t\t\t}),\n\t\t}\n\t}\n\treturn defaultPixels\n}\n\nfunction getPatternLodForZoomLevel(zoom: number) {\n\treturn Math.ceil(Math.log2(Math.max(1, zoom)))\n}\n\nexport function useGetHashPatternZoomName() {\n\tconst id = useSharedSafeId('hash_pattern')\n\treturn useCallback(\n\t\t(zoom: number, theme: string) => {\n\t\t\tconst lod = getPatternLodForZoomLevel(zoom)\n\t\t\treturn suffixSafeId(id, `${theme}_${lod}`)\n\t\t},\n\t\t[id]\n\t)\n}\n\nfunction getPatternLodsToGenerate(maxZoom: number) {\n\tconst levels = []\n\tconst minLod = 0\n\tconst maxLod = getPatternLodForZoomLevel(maxZoom)\n\tfor (let i = minLod; i <= maxLod; i++) {\n\t\tlevels.push(Math.pow(2, i))\n\t}\n\treturn levels\n}\n\nfunction getDefaultPatterns(maxZoom: number): PatternDef[] {\n\tconst defaultPixels = getDefaultPixels()\n\treturn getPatternLodsToGenerate(maxZoom).flatMap((zoom) => [\n\t\t{ zoom, url: defaultPixels.white, theme: 'light' },\n\t\t{ zoom, url: defaultPixels.black, theme: 'dark' },\n\t])\n}\n\nfunction usePattern() {\n\tconst editor = useEditor()\n\tconst dpr = useValue('devicePixelRatio', () => editor.getInstanceState().devicePixelRatio, [\n\t\teditor,\n\t])\n\t// In dynamic size mode, new shapes are created with scale = 1 / zoomLevel.\n\t// For pattern LOD generation, we use the worst-case effective zoom:\n\t// a shape created at min zoom and later viewed at max zoom (maxZoom / minZoom)\n\tconst maxEffectiveZoom = useValue(\n\t\t'maxEffectiveZoom',\n\t\t() => {\n\t\t\tconst steps = editor.getCameraOptions().zoomSteps\n\t\t\treturn last(steps)! / steps[0]\n\t\t},\n\t\t[editor]\n\t)\n\tconst [isReady, setIsReady] = useState(false)\n\tconst [backgroundUrls, setBackgroundUrls] = useState<PatternDef[]>(() =>\n\t\tgetDefaultPatterns(maxEffectiveZoom)\n\t)\n\tconst getHashPatternZoomName = useGetHashPatternZoomName()\n\n\tuseEffect(() => {\n\t\tif (process.env.NODE_ENV === 'test') {\n\t\t\tsetIsReady(true)\n\t\t\treturn\n\t\t}\n\n\t\tconst definition = editor.getCurrentTheme()\n\t\tconst lightSolid = definition.colors.light.solid\n\t\tconst darkSolid = definition.colors.dark.solid\n\n\t\tconst promise = Promise.all(\n\t\t\tgetPatternLodsToGenerate(maxEffectiveZoom).flatMap<Promise<PatternDef>>((zoom) => [\n\t\t\t\tgetPatternImageBlob(dpr, zoom, lightSolid).then((blob) => ({\n\t\t\t\t\tzoom,\n\t\t\t\t\ttheme: 'light',\n\t\t\t\t\turl: URL.createObjectURL(blob),\n\t\t\t\t})),\n\t\t\t\tgetPatternImageBlob(dpr, zoom, darkSolid).then((blob) => ({\n\t\t\t\t\tzoom,\n\t\t\t\t\ttheme: 'dark',\n\t\t\t\t\turl: URL.createObjectURL(blob),\n\t\t\t\t})),\n\t\t\t])\n\t\t)\n\n\t\tlet isCancelled = false\n\t\tpromise.then((urls) => {\n\t\t\tif (isCancelled) return\n\t\t\tsetBackgroundUrls(urls)\n\t\t\tsetIsReady(true)\n\t\t})\n\t\treturn () => {\n\t\t\tisCancelled = true\n\t\t\tsetIsReady(false)\n\t\t\tpromise.then((patterns) => {\n\t\t\t\tfor (const { url } of patterns) {\n\t\t\t\t\tURL.revokeObjectURL(url)\n\t\t\t\t}\n\t\t\t})\n\t\t}\n\t}, [dpr, maxEffectiveZoom, editor])\n\n\tconst defs = (\n\t\t<>\n\t\t\t{backgroundUrls.map((item) => {\n\t\t\t\tconst id = getHashPatternZoomName(item.zoom, item.theme)\n\t\t\t\treturn (\n\t\t\t\t\t<pattern\n\t\t\t\t\t\tkey={id}\n\t\t\t\t\t\tid={id}\n\t\t\t\t\t\twidth={TILE_PATTERN_SIZE}\n\t\t\t\t\t\theight={TILE_PATTERN_SIZE}\n\t\t\t\t\t\tpatternUnits=\"userSpaceOnUse\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<image href={item.url} width={TILE_PATTERN_SIZE} height={TILE_PATTERN_SIZE} />\n\t\t\t\t\t</pattern>\n\t\t\t\t)\n\t\t\t})}\n\t\t</>\n\t)\n\n\treturn { defs, isReady }\n}\n\nfunction PatternFillDefForCanvas() {\n\tconst editor = useEditor()\n\tconst containerRef = useRef<SVGGElement>(null)\n\tconst { defs, isReady } = usePattern()\n\n\tuseEffect(() => {\n\t\tif (isReady && tlenv.isSafari) {\n\t\t\tconst htmlLayer = findHtmlLayerParent(containerRef.current!)\n\t\t\tif (htmlLayer) {\n\t\t\t\t// Wait for `patternContext` to be picked up\n\t\t\t\teditor.timers.requestAnimationFrame(() => {\n\t\t\t\t\thtmlLayer.style.display = 'none'\n\n\t\t\t\t\t// Wait for 'display = \"none\"' to take effect\n\t\t\t\t\teditor.timers.requestAnimationFrame(() => {\n\t\t\t\t\t\thtmlLayer.style.display = ''\n\t\t\t\t\t})\n\t\t\t\t})\n\t\t\t}\n\t\t}\n\t}, [editor, isReady])\n\n\treturn (\n\t\t<g ref={containerRef} data-testid={isReady ? 'ready-pattern-fill-defs' : undefined}>\n\t\t\t{defs}\n\t\t</g>\n\t)\n}\n\nfunction findHtmlLayerParent(element: Element): HTMLElement | null {\n\tif (element.classList.contains('tl-html-layer')) return element as HTMLElement\n\tif (element.parentElement) return findHtmlLayerParent(element.parentElement)\n\treturn null\n}\n"],
+  "mappings": "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",
   "names": ["defaultPixels"]
 }