tldraw 4.2.2 → 4.2.3

package/src/lib/shapes/geo/GeoShapeUtil.tsx

@@ -15,7 +15,6 @@ import {
 	TLResizeInfo,
 	TLShapeUtilCanvasSvgDef,
 	Vec,
-	WeakCache,
 	exhaustiveSwitchError,
 	geoShapeMigrations,
 	geoShapeProps,
@@ -44,7 +43,6 @@ import {
 import { getFillDefForCanvas, getFillDefForExport } from '../shared/defaultStyleDefs'
 import { useDefaultColorTheme } from '../shared/useDefaultColorTheme'
 import { useIsReadyForEditing } from '../shared/useEditablePlainText'
-import { useEfficientZoomThreshold } from '../shared/useEfficientZoomThreshold'
 import { GeoShapeBody } from './components/GeoShapeBody'
 import { getGeoShapePath } from './getGeoShapePath'
 
@@ -56,10 +54,6 @@ export class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
 	static override props = geoShapeProps
 	static override migrations = geoShapeMigrations
 
-	override options = {
-		showTextOutline: true,
-	}
-
 	override canEdit() {
 		return true
 	}
@@ -87,40 +81,53 @@ export class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
 	}
 
 	override getGeometry(shape: TLGeoShape) {
-		const { props } = shape
-		const { scale } = props
-		const path = getGeoShapePath(shape)
-		const pathGeometry = path.toGeometry()
+		const w = Math.max(1, shape.props.w)
+		const h = Math.max(1, shape.props.h + shape.props.growY)
 
-		const scaledW = Math.max(1, props.w)
-		const scaledH = Math.max(1, props.h + props.growY)
-		const unscaledW = scaledW / scale
-		const unscaledH = scaledH / scale
-
-		const isEmptyLabel = isEmptyRichText(props.richText)
-		const unscaledLabelSize = isEmptyLabel
-			? EMPTY_LABEL_SIZE
-			: getUnscaledLabelSize(this.editor, shape)
+		const path = getGeoShapePath(shape)
+		const unscaledlabelSize = getUnscaledLabelSize(this.editor, shape)
+		// unscaled w and h
+		const unscaledW = w / shape.props.scale
+		const unscaledH = h / shape.props.scale
+		const unscaledminWidth = Math.min(100, unscaledW / 2)
+		const unscaledMinHeight = Math.min(
+			LABEL_FONT_SIZES[shape.props.size] * TEXT_PROPS.lineHeight + LABEL_PADDING * 2,
+			unscaledH / 2
+		)
 
-		const labelBounds = getLabelBounds(
+		const unscaledLabelWidth = Math.min(
 			unscaledW,
+			Math.max(unscaledlabelSize.w, Math.min(unscaledminWidth, Math.max(1, unscaledW - 8)))
+		)
+		const unscaledLabelHeight = Math.min(
 			unscaledH,
-			unscaledLabelSize,
-			props.size,
-			props.align,
-			props.verticalAlign,
-			scale
+			Math.max(unscaledlabelSize.h, Math.min(unscaledMinHeight, Math.max(1, unscaledH - 8)))
 		)
 
+		// todo: use centroid for label position
+
 		return new Group2d({
 			children: [
-				pathGeometry,
+				path.toGeometry(),
 				new Rectangle2d({
-					...labelBounds,
+					x:
+						shape.props.align === 'start'
+							? 0
+							: shape.props.align === 'end'
+								? (unscaledW - unscaledLabelWidth) * shape.props.scale
+								: ((unscaledW - unscaledLabelWidth) / 2) * shape.props.scale,
+					y:
+						shape.props.verticalAlign === 'start'
+							? 0
+							: shape.props.verticalAlign === 'end'
+								? (unscaledH - unscaledLabelHeight) * shape.props.scale
+								: ((unscaledH - unscaledLabelHeight) / 2) * shape.props.scale,
+					width: unscaledLabelWidth * shape.props.scale,
+					height: unscaledLabelHeight * shape.props.scale,
 					isFilled: true,
 					isLabel: true,
 					excludeFromShapeBounds: true,
-					isEmptyLabel: isEmptyLabel,
+					isEmptyLabel: isEmptyRichText(shape.props.richText),
 				}),
 			],
 		})
@@ -188,7 +195,7 @@ export class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
 		const isReadyForEditing = useIsReadyForEditing(editor, shape.id)
 		const isEmpty = isEmptyRichText(shape.props.richText)
 		const showHtmlContainer = isReadyForEditing || !isEmpty
-		const isForceSolid = useEfficientZoomThreshold(shape.props.scale * 0.25)
+		const isForceSolid = useValue('force solid', () => editor.getZoomLevel() < 0.2, [editor])
 
 		return (
 			<>
@@ -217,7 +224,6 @@ export class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
 							isSelected={isOnlySelected}
 							labelColor={getColorValue(theme, props.labelColor, 'solid')}
 							wrap
-							showTextOutline={this.options.showTextOutline}
 						/>
 					</HTMLContainer>
 				)}
@@ -227,7 +233,9 @@ export class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
 	}
 
 	indicator(shape: TLGeoShape) {
-		const isZoomedOut = useEfficientZoomThreshold(shape.props.scale * 0.25)
+		const isZoomedOut = useValue('isZoomedOut', () => this.editor.getZoomLevel() < 0.25, [
+			this.editor,
+		])
 
 		const { size, dash, scale } = shape.props
 		const strokeWidth = STROKE_SIZES[size]
@@ -275,7 +283,6 @@ export class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
 					labelColor={getColorValue(theme, props.labelColor, 'solid')}
 					bounds={bounds}
 					padding={LABEL_PADDING}
-					showTextOutline={this.options.showTextOutline}
 				/>
 			)
 		}
@@ -296,32 +303,41 @@ export class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
 		shape: TLGeoShape,
 		{ handle, newPoint, scaleX, scaleY, initialShape }: TLResizeInfo<TLGeoShape>
 	) {
-		const unscaledInitial = getUnscaledGeoProps(initialShape.props)
+		const unscaledInitialW = initialShape.props.w / initialShape.props.scale
+		const unscaledInitialH = initialShape.props.h / initialShape.props.scale
+		const unscaledGrowY = initialShape.props.growY / initialShape.props.scale
 		// use the w/h from props here instead of the initialBounds here,
 		// since cloud shapes calculated bounds can differ from the props w/h.
-		let unscaledW = unscaledInitial.w * scaleX
-		let unscaledH = (unscaledInitial.h + unscaledInitial.growY) * scaleY
+		let unscaledW = unscaledInitialW * scaleX
+		let unscaledH = (unscaledInitialH + unscaledGrowY) * scaleY
 		let overShrinkX = 0
 		let overShrinkY = 0
 
+		const min = MIN_SIZE_WITH_LABEL
+
 		if (!isEmptyRichText(shape.props.richText)) {
-			// Use initialShape for label measurement to hit the cache.
-			// Creating a temp shape with new dimensions would break WeakCache and cause
-			// expensive measurements on every resize frame.
-			const unscaledLabelSize = getUnscaledLabelSize(this.editor, initialShape)
+			let newW = Math.max(Math.abs(unscaledW), min)
+			let newH = Math.max(Math.abs(unscaledH), min)
 
-			const absUnscaledW = Math.abs(unscaledW)
-			const absUnscaledH = Math.abs(unscaledH)
+			if (newW < min && newH === min) newW = min
+			if (newW === min && newH < min) newH = min
 
-			// Constrain to label size (primary constraint) and min size with label (secondary)
-			const constrainedW = Math.max(absUnscaledW, unscaledLabelSize.w, MIN_SIZE_WITH_LABEL)
-			const constrainedH = Math.max(absUnscaledH, unscaledLabelSize.h, MIN_SIZE_WITH_LABEL)
+			const unscaledLabelSize = getUnscaledLabelSize(this.editor, {
+				...shape,
+				props: {
+					...shape.props,
+					w: newW * shape.props.scale,
+					h: newH * shape.props.scale,
+				},
+			})
 
-			overShrinkX = constrainedW - absUnscaledW
-			overShrinkY = constrainedH - absUnscaledH
+			const nextW = Math.max(Math.abs(unscaledW), unscaledLabelSize.w) * Math.sign(unscaledW)
+			const nextH = Math.max(Math.abs(unscaledH), unscaledLabelSize.h) * Math.sign(unscaledH)
+			overShrinkX = Math.abs(nextW) - Math.abs(unscaledW)
+			overShrinkY = Math.abs(nextH) - Math.abs(unscaledH)
 
-			unscaledW = constrainedW * Math.sign(unscaledW || 1)
-			unscaledH = constrainedH * Math.sign(unscaledH || 1)
+			unscaledW = nextW
+			unscaledH = nextH
 		}
 
 		const scaledW = unscaledW * shape.props.scale
@@ -363,93 +379,147 @@ export class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
 	}
 
 	override onBeforeCreate(shape: TLGeoShape) {
-		const { props } = shape
-
-		// No text - ensure growY is 0
-		if (isEmptyRichText(props.richText)) {
-			return props.growY !== 0 ? { ...shape, props: { ...props, growY: 0 } } : undefined
+		if (isEmptyRichText(shape.props.richText)) {
+			if (shape.props.growY) {
+				// No text / some growY, set growY to 0
+				return {
+					...shape,
+					props: {
+						...shape.props,
+						growY: 0,
+					},
+				}
+			} else {
+				// No text / no growY, nothing to change
+				return
+			}
 		}
 
-		// Has text - calculate growY needed to fit label
-		const unscaledShapeH = props.h / props.scale
-		const unscaledLabelH = getUnscaledLabelSize(this.editor, shape).h
-		const unscaledGrowY = calculateGrowY(unscaledShapeH, unscaledLabelH, props.growY / props.scale)
+		const unscaledPrevHeight = shape.props.h / shape.props.scale
+		const unscaledNextHeight = getUnscaledLabelSize(this.editor, shape).h
+
+		let growY: number | null = null
+
+		if (unscaledNextHeight > unscaledPrevHeight) {
+			growY = unscaledNextHeight - unscaledPrevHeight
+		} else {
+			if (shape.props.growY) {
+				growY = 0
+			}
+		}
 
-		if (unscaledGrowY !== null) {
+		if (growY !== null) {
 			return {
 				...shape,
-				props: { ...props, growY: unscaledGrowY * props.scale },
+				props: {
+					...shape.props,
+					// scale the growY
+					growY: growY * shape.props.scale,
+				},
 			}
 		}
 	}
 
 	override onBeforeUpdate(prev: TLGeoShape, next: TLGeoShape) {
-		const { props: prevProps } = prev
-		const { props: nextProps } = next
-
-		// No change to text, font, or size - no update needed
+		// No change to text, font, or size, no need to update update
 		if (
-			isEqual(prevProps.richText, nextProps.richText) &&
-			prevProps.font === nextProps.font &&
-			prevProps.size === nextProps.size
+			isEqual(prev.props.richText, next.props.richText) &&
+			prev.props.font === next.props.font &&
+			prev.props.size === next.props.size
 		) {
 			return
 		}
 
-		const wasEmpty = isEmptyRichText(prevProps.richText)
-		const isEmpty = isEmptyRichText(nextProps.richText)
-
-		// If label is empty and used to be empty, skip label measurement and dimension adjustment
-		if (wasEmpty && isEmpty) {
-			return
+		// If we got rid of the text, cancel out any growY from the prev text
+		const wasEmpty = isEmptyRichText(prev.props.richText)
+		const isEmpty = isEmptyRichText(next.props.richText)
+		if (!wasEmpty && isEmpty) {
+			return {
+				...next,
+				props: {
+					...next.props,
+					growY: 0,
+				},
+			}
 		}
 
-		// Text was removed - reset growY
-		if (isEmpty) {
-			return nextProps.growY !== 0 ? { ...next, props: { ...nextProps, growY: 0 } } : undefined
-		}
+		// Get the prev width and height in unscaled values
+		const unscaledPrevWidth = prev.props.w / prev.props.scale
+		const unscaledPrevHeight = prev.props.h / prev.props.scale
+		const unscaledPrevGrowY = prev.props.growY / prev.props.scale
 
-		const unscaledPrev = getUnscaledGeoProps(prevProps)
-		const unscaledLabelSize = getUnscaledLabelSize(this.editor, next)
-		const { scale } = nextProps
+		// Get the next width and height in unscaled values
+		const unscaledNextLabelSize = getUnscaledLabelSize(this.editor, next)
+
+		// When entering the first character in a label (not pasting in multiple characters...)
+		if (wasEmpty && !isEmpty && renderPlaintextFromRichText(this.editor, next.props.richText)) {
+			let unscaledW = Math.max(unscaledPrevWidth, unscaledNextLabelSize.w)
+			let unscaledH = Math.max(unscaledPrevHeight, unscaledNextLabelSize.h)
+
+			const min = MIN_SIZE_WITH_LABEL
+
+			// If both the width and height were less than the minimum size, make the shape square
+			if (unscaledPrevWidth < min && unscaledPrevHeight < min) {
+				unscaledW = Math.max(unscaledW, min)
+				unscaledH = Math.max(unscaledH, min)
+				unscaledW = Math.max(unscaledW, unscaledH)
+				unscaledH = Math.max(unscaledW, unscaledH)
+			}
 
-		// Text was added for the first time - expand shape to fit (if wasEmpty and now there's text...
-		// It might be just whitespace but it is faster to assume that it is NOT just whitespace and expand
-		// the shape in either case (a label with just spaces text will be less performant but that's acceptable)
-		if (wasEmpty && !isEmpty) {
-			const expanded = expandShapeForFirstLabel(unscaledPrev.w, unscaledPrev.h, unscaledLabelSize)
+			// Don't set a growY—at least, not until we've implemented a growX property
 			return {
 				...next,
 				props: {
-					...nextProps,
-					w: expanded.w * scale,
-					h: expanded.h * scale,
+					...next.props,
+					// Scale the results
+					w: unscaledW * next.props.scale,
+					h: unscaledH * next.props.scale,
 					growY: 0,
 				},
 			}
 		}
 
-		// Text was modified - adjust dimensions to fit new label
-		const unscaledNextW = next.props.w / scale
-		const needsWidthExpand = unscaledLabelSize.w > unscaledNextW
-		const unscaledGrowY = calculateGrowY(unscaledPrev.h, unscaledLabelSize.h, unscaledPrev.growY)
+		let growY: number | null = null
 
-		if (unscaledGrowY !== null || needsWidthExpand) {
+		if (unscaledNextLabelSize.h > unscaledPrevHeight) {
+			growY = unscaledNextLabelSize.h - unscaledPrevHeight
+		} else {
+			if (unscaledPrevGrowY) {
+				growY = 0
+			}
+		}
+
+		if (growY !== null) {
+			const unscaledNextWidth = next.props.w / next.props.scale
+			return {
+				...next,
+				props: {
+					...next.props,
+					// Scale the results
+					growY: growY * next.props.scale,
+					w: Math.max(unscaledNextWidth, unscaledNextLabelSize.w) * next.props.scale,
+				},
+			}
+		}
+
+		if (unscaledNextLabelSize.w > unscaledPrevWidth) {
 			return {
 				...next,
 				props: {
-					...nextProps,
-					growY: (unscaledGrowY ?? unscaledPrev.growY) * scale,
-					w: Math.max(unscaledNextW, unscaledLabelSize.w) * scale,
+					...next.props,
+					// Scale the results
+					w: unscaledNextLabelSize.w * next.props.scale,
 				},
 			}
 		}
+
+		// otherwise, no update needed
 	}
 
 	override onDoubleClick(shape: TLGeoShape) {
 		// Little easter egg: double-clicking a rectangle / checkbox while
 		// holding alt will toggle between check-box and rectangle
-		if (this.editor.inputs.getAltKey()) {
+		if (this.editor.inputs.altKey) {
 			switch (shape.props.geo) {
 				case 'rectangle': {
 					return {
@@ -487,151 +557,29 @@ export class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
 }
 
 // imperfect but good enough, should be the width of the W in the font / size combo
-const MIN_WIDTHS = Object.freeze({
+const minWidths = {
 	s: 12,
 	m: 14,
 	l: 16,
 	xl: 20,
-})
+}
 
-const EXTRA_PADDINGS = Object.freeze({
+const extraPaddings = {
 	s: 2,
 	m: 3.5,
 	l: 5,
 	xl: 10,
-})
-
-const EMPTY_LABEL_SIZE = Object.freeze({ w: 0, h: 0 })
-
-// Margin between label edge and shape edge (in unscaled units)
-const LABEL_EDGE_MARGIN = 8
-
-/** Calculate label bounds for hit testing */
-function getLabelBounds(
-	unscaledShapeW: number,
-	unscaledShapeH: number,
-	unscaledLabelSize: { w: number; h: number },
-	size: TLGeoShapeProps['size'],
-	align: TLGeoShapeProps['align'],
-	verticalAlign: TLGeoShapeProps['verticalAlign'],
-	scale: number
-): { x: number; y: number; width: number; height: number } {
-	// Calculate minimum label dimensions based on font size and shape size
-	const unscaledMinWidth = Math.min(100, unscaledShapeW / 2)
-	const unscaledMinHeight = Math.min(
-		LABEL_FONT_SIZES[size] * TEXT_PROPS.lineHeight + LABEL_PADDING * 2,
-		unscaledShapeH / 2
-	)
-
-	// Label dimensions: at least the measured size, but constrained to shape bounds
-	const unscaledLabelW = Math.min(
-		unscaledShapeW,
-		Math.max(
-			unscaledLabelSize.w,
-			Math.min(unscaledMinWidth, Math.max(1, unscaledShapeW - LABEL_EDGE_MARGIN))
-		)
-	)
-	const unscaledLabelH = Math.min(
-		unscaledShapeH,
-		Math.max(
-			unscaledLabelSize.h,
-			Math.min(unscaledMinHeight, Math.max(1, unscaledShapeH - LABEL_EDGE_MARGIN))
-		)
-	)
-
-	// Calculate position based on alignment
-	const unscaledX =
-		align === 'start'
-			? 0
-			: align === 'end'
-				? unscaledShapeW - unscaledLabelW
-				: (unscaledShapeW - unscaledLabelW) / 2
-
-	const unscaledY =
-		verticalAlign === 'start'
-			? 0
-			: verticalAlign === 'end'
-				? unscaledShapeH - unscaledLabelH
-				: (unscaledShapeH - unscaledLabelH) / 2
-
-	return {
-		x: unscaledX * scale,
-		y: unscaledY * scale,
-		width: unscaledLabelW * scale,
-		height: unscaledLabelH * scale,
-	}
 }
 
-/** Get the unscaled dimensions from a geo shape's props */
-function getUnscaledGeoProps(props: TLGeoShapeProps) {
-	const { w, h, growY, scale } = props
-	return {
-		w: w / scale,
-		h: h / scale,
-		growY: growY / scale,
-	}
-}
-
-/**
- * Calculate the growY needed to fit a label within a shape.
- * Returns null if no change is needed, otherwise returns the new unscaled growY value.
- */
-function calculateGrowY(
-	unscaledShapeH: number,
-	unscaledLabelH: number,
-	unscaledCurrentGrowY: number
-): number | null {
-	if (unscaledLabelH > unscaledShapeH) {
-		// Label is taller than shape - need to grow
-		return unscaledLabelH - unscaledShapeH
-	}
-	if (unscaledCurrentGrowY > 0) {
-		// Label fits and we have existing growY - reset it
-		return 0
-	}
-	// No change needed
-	return null
-}
-
-/**
- * Calculate expanded dimensions when adding a label to a shape for the first time.
- * Ensures the shape meets minimum size requirements and is square if originally small.
- */
-function expandShapeForFirstLabel(
-	unscaledW: number,
-	unscaledH: number,
-	unscaledLabelSize: { w: number; h: number }
-): { w: number; h: number } {
-	let w = Math.max(unscaledW, unscaledLabelSize.w)
-	let h = Math.max(unscaledH, unscaledLabelSize.h)
-
-	// If shape was smaller than min size in both dimensions, make it square
-	if (unscaledW < MIN_SIZE_WITH_LABEL && unscaledH < MIN_SIZE_WITH_LABEL) {
-		w = Math.max(w, MIN_SIZE_WITH_LABEL)
-		h = Math.max(h, MIN_SIZE_WITH_LABEL)
-		// Make square by using the larger dimension
-		const maxDim = Math.max(w, h)
-		w = maxDim
-		h = maxDim
-	}
-
-	return { w, h }
-}
-
-const labelSizesForGeo = new WeakCache<TLGeoShape, { w: number; h: number }>()
-
-// Returns cached label size for the shape. Don't call with empty rich text.
 function getUnscaledLabelSize(editor: Editor, shape: TLGeoShape) {
-	return labelSizesForGeo.get(shape, () => {
-		return measureUnscaledLabelSize(editor, shape)
-	})
-}
-
-// This is the expensive part of the code so we want to avoid calling it if we can
-function measureUnscaledLabelSize(editor: Editor, shape: TLGeoShape) {
 	const { richText, font, size, w } = shape.props
 
-	const minWidth = MIN_WIDTHS[size]
+	if (!richText || isEmptyRichText(richText)) {
+		return { w: 0, h: 0 }
+	}
+
+	// way too expensive to be recomputing on every update
+	const minWidth = minWidths[size]
 
 	const html = renderHtmlFromRichTextForMeasurement(editor, richText)
 	const textSize = editor.textMeasure.measureHtml(html, {
@@ -643,7 +591,7 @@ function measureUnscaledLabelSize(editor: Editor, shape: TLGeoShape) {
 			// Guard because a DOM nodes can't be less 0
 			0,
 			// A 'w' width that we're setting as the min-width
-			Math.ceil(minWidth + EXTRA_PADDINGS[size]),
+			Math.ceil(minWidth + extraPaddings[size]),
 			// The actual text size
 			Math.ceil(w / shape.props.scale - LABEL_PADDING * 2)
 		),

package/src/lib/shapes/geo/toolStates/Idle.ts

@@ -1,5 +1,4 @@
 import { StateNode, TLKeyboardEventInfo, TLPointerEventInfo } from '@tldraw/editor'
-import { startEditingShapeWithRichText } from '../../../tools/SelectTool/selectHelpers'
 
 export class Idle extends StateNode {
 	static override id = 'idle'
@@ -13,11 +12,22 @@ export class Idle extends StateNode {
 	}
 
 	override onKeyUp(info: TLKeyboardEventInfo) {
-		const { editor } = this
 		if (info.key === 'Enter') {
-			const onlySelectedShape = editor.getOnlySelectedShape()
-			if (editor.canEditShape(onlySelectedShape)) {
-				startEditingShapeWithRichText(editor, onlySelectedShape, { selectAll: true })
+			if (this.editor.getIsReadonly()) return null
+
+			const onlySelectedShape = this.editor.getOnlySelectedShape()
+			// If the only selected shape is editable, start editing it
+			if (
+				onlySelectedShape &&
+				this.editor.getShapeUtil(onlySelectedShape).canEdit(onlySelectedShape)
+			) {
+				this.editor.setCurrentTool('select')
+				this.editor.setEditingShape(onlySelectedShape.id)
+				this.editor.root.getCurrent()?.transition('editing_shape', {
+					...info,
+					target: 'shape',
+					shape: onlySelectedShape,
+				})
 			}
 		}
 	}

package/src/lib/shapes/geo/toolStates/Pointing.ts

@@ -16,15 +16,15 @@ export class Pointing extends StateNode {
 	}
 
 	override onPointerMove(info: TLPointerEventInfo) {
-		if (this.editor.inputs.getIsDragging()) {
-			const originPagePoint = this.editor.inputs.getOriginPagePoint()
+		if (this.editor.inputs.isDragging) {
+			const { originPagePoint } = this.editor.inputs
 
 			const id = createShapeId()
 
 			const creatingMarkId = this.editor.markHistoryStoppingPoint(`creating_geo:${id}`)
 			const newPoint = maybeSnapToGrid(originPagePoint, this.editor)
 			this.editor
-				.createShapes([
+				.createShapes<TLGeoShape>([
 					{
 						id,
 						type: 'geo',
@@ -71,7 +71,7 @@ export class Pointing extends StateNode {
 	}
 
 	private complete() {
-		const originPagePoint = this.editor.inputs.getOriginPagePoint()
+		const { originPagePoint } = this.editor.inputs
 
 		const id = createShapeId()
 
@@ -88,7 +88,7 @@ export class Pointing extends StateNode {
 					? { w: 300, h: 180 }
 					: { w: 200, h: 200 }
 
-		this.editor.createShapes([
+		this.editor.createShapes<TLGeoShape>([
 			{
 				id,
 				type: 'geo',
@@ -115,7 +115,7 @@ export class Pointing extends StateNode {
 		if (parentTransform) delta.rot(-parentTransform.rotation())
 		const newPoint = maybeSnapToGrid(new Vec(shape.x - delta.x, shape.y - delta.y), this.editor)
 		this.editor.select(id)
-		this.editor.updateShape({
+		this.editor.updateShape<TLGeoShape>({
 			id: shape.id,
 			type: 'geo',
 			x: newPoint.x,