tldraw/dist-esm/lib/tools/SelectTool/childStates/EditingShape.mjs.map

A tiny little drawing editor.

{
  "version": 3,
  "sources": ["../../../../../src/lib/tools/SelectTool/childStates/EditingShape.ts"],
  "sourcesContent": ["import {\n\tactiveElementShouldCaptureKeys,\n\tStateNode,\n\tTLCancelEventInfo,\n\tTLCompleteEventInfo,\n\ttlenv,\n\tTLPointerEventInfo,\n\tTLShape,\n} from '@tldraw/editor'\nimport { getTextLabels } from '../../../utils/shapes/shapes'\nimport { renderPlaintextFromRichText } from '../../../utils/text/richText'\nimport { getHitShapeOnCanvasPointerDown } from '../../selection-logic/getHitShapeOnCanvasPointerDown'\nimport { updateHoveredShapeId } from '../../selection-logic/updateHoveredShapeId'\n\ninterface EditingShapeInfo {\n\tisCreatingTextWhileToolLocked?: boolean\n}\n\nexport class EditingShape extends StateNode {\n\tstatic override id = 'editing_shape'\n\n\thitLabelOnShapeForPointerUp: TLShape | null = null\n\tprivate info = {} as EditingShapeInfo\n\tprivate didPointerDownOnEditingShape = false\n\n\tprivate isTextInputFocused(): boolean {\n\t\tconst container = this.editor.getContainer()\n\t\treturn container.contains(document.activeElement) && activeElementShouldCaptureKeys(false)\n\t}\n\n\toverride onEnter(info: EditingShapeInfo) {\n\t\tconst editingShape = this.editor.getEditingShape()\n\t\tif (!editingShape) throw Error('Entered editing state without an editing shape')\n\t\tthis.hitLabelOnShapeForPointerUp = null\n\t\tthis.didPointerDownOnEditingShape = false\n\n\t\tthis.info = info\n\n\t\tif (info.isCreatingTextWhileToolLocked) {\n\t\t\tthis.parent.setCurrentToolIdMask('text')\n\t\t}\n\n\t\tupdateHoveredShapeId(this.editor)\n\t\tthis.editor.select(editingShape)\n\t}\n\n\toverride onExit() {\n\t\tconst hadEditingShape = !!this.editor.getEditingShapeId()\n\t\tthis.editor.setEditingShape(null)\n\n\t\tupdateHoveredShapeId.cancel()\n\n\t\tif (this.info.isCreatingTextWhileToolLocked && hadEditingShape) {\n\t\t\tthis.parent.setCurrentToolIdMask(undefined)\n\t\t\tthis.editor.setCurrentTool('text', {})\n\t\t}\n\t}\n\n\toverride onPointerMove(info: TLPointerEventInfo) {\n\t\t// In the case where on pointer down we hit a shape's label, we need to check if the user is dragging.\n\t\t// and if they are, we need to transition to translating instead.\n\t\tif (this.hitLabelOnShapeForPointerUp && this.editor.inputs.getIsDragging()) {\n\t\t\tif (this.editor.getIsReadonly()) return\n\t\t\tif (this.hitLabelOnShapeForPointerUp.isLocked) return\n\n\t\t\tthis.editor.select(this.hitLabelOnShapeForPointerUp)\n\t\t\tthis.parent.transition('translating', info)\n\t\t\tthis.hitLabelOnShapeForPointerUp = null\n\t\t\treturn\n\t\t}\n\n\t\t// Check if dragging from editing shape with blurred input\n\t\tif (this.didPointerDownOnEditingShape && this.editor.inputs.isDragging) {\n\t\t\tif (this.editor.getIsReadonly()) return\n\n\t\t\tconst editingShape = this.editor.getEditingShape()\n\t\t\tif (!editingShape || editingShape.isLocked) return\n\n\t\t\tif (!this.isTextInputFocused()) {\n\t\t\t\t// Input blurred during drag - exit edit mode and start translating\n\t\t\t\tthis.editor.select(editingShape)\n\t\t\t\tthis.parent.transition('translating', info)\n\t\t\t\tthis.didPointerDownOnEditingShape = false\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// Input still focused - user is selecting text, stay in edit mode\n\t\t\tthis.didPointerDownOnEditingShape = false\n\t\t}\n\n\t\tswitch (info.target) {\n\t\t\tcase 'shape':\n\t\t\tcase 'canvas': {\n\t\t\t\tupdateHoveredShapeId(this.editor)\n\t\t\t\treturn\n\t\t\t}\n\t\t}\n\t}\n\n\toverride onPointerDown(info: TLPointerEventInfo) {\n\t\tthis.hitLabelOnShapeForPointerUp = null\n\t\tthis.didPointerDownOnEditingShape = false\n\n\t\tswitch (info.target) {\n\t\t\t// N.B. This bit of logic has a bit of history to it.\n\t\t\t// There was a PR that got rid of this logic: https://github.com/tldraw/tldraw/pull/4237\n\t\t\t// But here we bring it back to help support the new rich text world.\n\t\t\t// The original issue which is visible in the video attachments in the PR now seem\n\t\t\t// to have been resolved anyway via some other layer.\n\t\t\tcase 'canvas': {\n\t\t\t\tconst hitShape = getHitShapeOnCanvasPointerDown(this.editor, true /* hitLabels */)\n\t\t\t\tif (hitShape) {\n\t\t\t\t\tthis.onPointerDown({\n\t\t\t\t\t\t...info,\n\t\t\t\t\t\tshape: hitShape,\n\t\t\t\t\t\ttarget: 'shape',\n\t\t\t\t\t})\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tbreak\n\t\t\t}\n\t\t\tcase 'shape': {\n\t\t\t\tconst { shape: selectingShape } = info\n\t\t\t\tconst editingShape = this.editor.getEditingShape()\n\n\t\t\t\tif (!editingShape) {\n\t\t\t\t\tthrow Error('Expected an editing shape!')\n\t\t\t\t}\n\n\t\t\t\t// for shapes with labels, check to see if the click was inside of the shape's label\n\t\t\t\tconst geometry = this.editor.getShapeUtil(selectingShape).getGeometry(selectingShape)\n\t\t\t\tconst textLabels = getTextLabels(geometry)\n\t\t\t\tconst textLabel = textLabels.length === 1 ? textLabels[0] : undefined\n\t\t\t\t// N.B. One nuance here is that we want empty text fields to be removed from the canvas when the user clicks away from them.\n\t\t\t\tconst isEmptyTextShape =\n\t\t\t\t\tthis.editor.isShapeOfType(editingShape, 'text') &&\n\t\t\t\t\trenderPlaintextFromRichText(this.editor, editingShape.props.richText).trim() === ''\n\t\t\t\tif (textLabel && !isEmptyTextShape) {\n\t\t\t\t\tconst pointInShapeSpace = this.editor.getPointInShapeSpace(\n\t\t\t\t\t\tselectingShape,\n\t\t\t\t\t\tthis.editor.inputs.getCurrentPagePoint()\n\t\t\t\t\t)\n\t\t\t\t\tif (\n\t\t\t\t\t\ttextLabel.bounds.containsPoint(pointInShapeSpace, 0) &&\n\t\t\t\t\t\ttextLabel.hitTestPoint(pointInShapeSpace)\n\t\t\t\t\t) {\n\t\t\t\t\t\t// it's a hit to the label!\n\t\t\t\t\t\tif (selectingShape.id === editingShape.id) {\n\t\t\t\t\t\t\t// Track click on editing shape for drag detection\n\t\t\t\t\t\t\tthis.didPointerDownOnEditingShape = true\n\t\t\t\t\t\t\treturn\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tthis.hitLabelOnShapeForPointerUp = selectingShape\n\n\t\t\t\t\t\t\tthis.editor.markHistoryStoppingPoint('editing on pointer up')\n\t\t\t\t\t\t\tthis.editor.select(selectingShape.id)\n\t\t\t\t\t\t\treturn\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tif (selectingShape.id === editingShape.id) {\n\t\t\t\t\t\t// If we clicked on a frame, while editing its heading, cancel editing\n\t\t\t\t\t\tif (this.editor.isShapeOfType(selectingShape, 'frame')) {\n\t\t\t\t\t\t\tthis.editor.setEditingShape(null)\n\t\t\t\t\t\t\tthis.parent.transition('idle', info)\n\t\t\t\t\t\t}\n\t\t\t\t\t\t// If we clicked on the editing shape (which isn't a shape with a label), do nothing\n\t\t\t\t\t} else {\n\t\t\t\t\t\t// But if we clicked on a different shape of the same type, transition to pointing_shape instead\n\t\t\t\t\t\tthis.parent.transition('pointing_shape', info)\n\t\t\t\t\t\treturn\n\t\t\t\t\t}\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tbreak\n\t\t\t}\n\t\t}\n\n\t\t// still here? Cancel editing and transition back to select idle\n\t\tthis.parent.transition('idle', info)\n\t\t// then feed the pointer down event back into the state chart as if it happened in that state\n\t\tthis.editor.root.handleEvent(info)\n\t}\n\n\toverride onPointerUp(info: TLPointerEventInfo) {\n\t\tif (this.didPointerDownOnEditingShape) {\n\t\t\tthis.didPointerDownOnEditingShape = false\n\t\t\tif (!this.isTextInputFocused()) {\n\t\t\t\t// We clicked on the text label, which blured the input.\n\t\t\t\t// We want to stay in edit mode and select all the text.\n\t\t\t\tthis.editor.getRichTextEditor()?.commands.focus('all')\n\t\t\t\treturn\n\t\t\t}\n\t\t}\n\n\t\t// If we're not dragging, and it's a hit to the label, begin editing the shape.\n\t\tconst hitShape = this.hitLabelOnShapeForPointerUp\n\t\tif (!hitShape) return\n\t\tthis.hitLabelOnShapeForPointerUp = null\n\n\t\t// Stay in edit mode to maintain flow of editing.\n\t\tconst util = this.editor.getShapeUtil(hitShape)\n\t\tif (hitShape.isLocked) return\n\n\t\tif (this.editor.getIsReadonly()) {\n\t\t\tif (!util.canEditInReadonly(hitShape)) {\n\t\t\t\tthis.parent.transition('pointing_shape', info)\n\t\t\t\treturn\n\t\t\t}\n\t\t}\n\n\t\tthis.editor.select(hitShape.id)\n\n\t\tconst currentEditingShape = this.editor.getEditingShape()\n\t\tconst isEditToEditAction = currentEditingShape && currentEditingShape.id !== hitShape.id\n\t\tthis.editor.setEditingShape(hitShape.id)\n\n\t\tconst isMobile = tlenv.isIos || tlenv.isAndroid\n\t\tif (!isMobile || !isEditToEditAction) {\n\t\t\tthis.editor.emit('place-caret', { shapeId: hitShape.id, point: info.point })\n\t\t} else if (isMobile && isEditToEditAction) {\n\t\t\tthis.editor.emit('select-all-text', { shapeId: hitShape.id })\n\t\t}\n\t\tupdateHoveredShapeId(this.editor)\n\t}\n\n\toverride onComplete(info: TLCompleteEventInfo) {\n\t\tthis.editor.getContainer().focus()\n\t\tthis.parent.transition('idle', info)\n\t}\n\n\toverride onCancel(info: TLCancelEventInfo) {\n\t\tthis.editor.getContainer().focus()\n\t\tthis.parent.transition('idle', info)\n\t}\n}\n"],
  "mappings": "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",
  "names": []
}