@bigbluebutton/tldraw 2.0.0-alpha.19

package/src/lib/tools/SelectTool/DragAndDropManager.ts

@@ -0,0 +1,112 @@
+import { Editor, TLShape, TLShapeId, Vec2d, compact } from '@bigbluebutton/editor'
+
+const LAG_DURATION = 100
+
+/** @public */
+export class DragAndDropManager {
+	constructor(public editor: Editor) {
+		editor.disposables.add(this.dispose)
+	}
+
+	prevDroppingShapeId: TLShapeId | null = null
+
+	droppingNodeTimer: ReturnType<typeof setTimeout> | null = null
+
+	first = true
+
+	updateDroppingNode(movingShapes: TLShape[], cb: () => void) {
+		if (this.first) {
+			this.prevDroppingShapeId =
+				this.editor.getDroppingOverShape(this.editor.inputs.originPagePoint, movingShapes)?.id ??
+				null
+			this.first = false
+		}
+
+		if (this.droppingNodeTimer === null) {
+			this.setDragTimer(movingShapes, LAG_DURATION * 10, cb)
+		} else if (this.editor.inputs.pointerVelocity.len() > 0.5) {
+			clearInterval(this.droppingNodeTimer)
+			this.setDragTimer(movingShapes, LAG_DURATION, cb)
+		}
+	}
+
+	private setDragTimer(movingShapes: TLShape[], duration: number, cb: () => void) {
+		this.droppingNodeTimer = setTimeout(() => {
+			this.editor.batch(() => {
+				this.handleDrag(this.editor.inputs.currentPagePoint, movingShapes, cb)
+			})
+			this.droppingNodeTimer = null
+		}, duration)
+	}
+
+	private handleDrag(point: Vec2d, movingShapes: TLShape[], cb?: () => void) {
+		movingShapes = compact(movingShapes.map((shape) => this.editor.getShape(shape.id)))
+
+		const nextDroppingShapeId = this.editor.getDroppingOverShape(point, movingShapes)?.id ?? null
+
+		// is the next dropping shape id different than the last one?
+		if (nextDroppingShapeId === this.prevDroppingShapeId) {
+			return
+		}
+
+		// the old previous one
+		const { prevDroppingShapeId } = this
+
+		const prevDroppingShape = prevDroppingShapeId && this.editor.getShape(prevDroppingShapeId)
+		const nextDroppingShape = nextDroppingShapeId && this.editor.getShape(nextDroppingShapeId)
+
+		// Even if we don't have a next dropping shape id (i.e. if we're dropping
+		// onto the page) set the prev to the current, to avoid repeat calls to
+		// the previous parent's onDragShapesOut
+
+		if (prevDroppingShape) {
+			this.editor.getShapeUtil(prevDroppingShape).onDragShapesOut?.(prevDroppingShape, movingShapes)
+		}
+
+		if (nextDroppingShape) {
+			const res = this.editor
+				.getShapeUtil(nextDroppingShape)
+				.onDragShapesOver?.(nextDroppingShape, movingShapes)
+
+			if (res && res.shouldHint) {
+				this.editor.setHintingShapes([nextDroppingShape.id])
+			}
+		} else {
+			// If we're dropping onto the page, then clear hinting ids
+			this.editor.setHintingShapes([])
+		}
+
+		cb?.()
+
+		// next -> curr
+		this.prevDroppingShapeId = nextDroppingShapeId
+	}
+
+	dropShapes(shapes: TLShape[]) {
+		const { prevDroppingShapeId } = this
+
+		this.handleDrag(this.editor.inputs.currentPagePoint, shapes)
+
+		if (prevDroppingShapeId) {
+			const shape = this.editor.getShape(prevDroppingShapeId)
+			if (!shape) return
+			this.editor.getShapeUtil(shape).onDropShapesOver?.(shape, shapes)
+		}
+	}
+
+	clear() {
+		this.prevDroppingShapeId = null
+
+		if (this.droppingNodeTimer !== null) {
+			clearInterval(this.droppingNodeTimer)
+		}
+
+		this.droppingNodeTimer = null
+		this.editor.setHintingShapes([])
+		this.first = true
+	}
+
+	dispose = () => {
+		this.clear()
+	}
+}

package/src/lib/tools/SelectTool/SelectTool.ts

@@ -0,0 +1,49 @@
+import { StateNode } from '@bigbluebutton/editor'
+import { Brushing } from './childStates/Brushing'
+import { Crop } from './childStates/Crop/Crop'
+import { Cropping } from './childStates/Cropping'
+import { DraggingHandle } from './childStates/DraggingHandle'
+import { EditingShape } from './childStates/EditingShape'
+import { Idle } from './childStates/Idle'
+import { PointingCanvas } from './childStates/PointingCanvas'
+import { PointingCropHandle } from './childStates/PointingCropHandle'
+import { PointingHandle } from './childStates/PointingHandle'
+import { PointingResizeHandle } from './childStates/PointingResizeHandle'
+import { PointingRotateHandle } from './childStates/PointingRotateHandle'
+import { PointingSelection } from './childStates/PointingSelection'
+import { PointingShape } from './childStates/PointingShape'
+import { Resizing } from './childStates/Resizing'
+import { Rotating } from './childStates/Rotating'
+import { ScribbleBrushing } from './childStates/ScribbleBrushing'
+import { Translating } from './childStates/Translating'
+
+/** @public */
+export class SelectTool extends StateNode {
+	static override id = 'select'
+	static override initial = 'idle'
+	static override children = () => [
+		Crop,
+		Cropping,
+		Idle,
+		PointingCanvas,
+		PointingShape,
+		Translating,
+		Brushing,
+		ScribbleBrushing,
+		PointingCropHandle,
+		PointingSelection,
+		PointingResizeHandle,
+		EditingShape,
+		Resizing,
+		Rotating,
+		PointingRotateHandle,
+		PointingHandle,
+		DraggingHandle,
+	]
+
+	override onExit = () => {
+		if (this.editor.getCurrentPageState().editingShapeId) {
+			this.editor.setEditingShape(null)
+		}
+	}
+}

package/src/lib/tools/SelectTool/childStates/Brushing.ts

@@ -0,0 +1,206 @@
+import {
+	Box2d,
+	HIT_TEST_MARGIN,
+	Matrix2d,
+	StateNode,
+	TLCancelEvent,
+	TLEventHandlers,
+	TLFrameShape,
+	TLGroupShape,
+	TLInterruptEvent,
+	TLKeyboardEvent,
+	TLPageId,
+	TLPointerEventInfo,
+	TLShape,
+	TLShapeId,
+	Vec2d,
+	pointInPolygon,
+	polygonsIntersect,
+} from '@bigbluebutton/editor'
+
+export class Brushing extends StateNode {
+	static override id = 'brushing'
+
+	info = {} as TLPointerEventInfo & { target: 'canvas' }
+
+	brush = new Box2d()
+	initialSelectedShapeIds: TLShapeId[] = []
+	excludedShapeIds = new Set<TLShapeId>()
+
+	// The shape that the brush started on
+	initialStartShape: TLShape | null = null
+
+	override onEnter = (info: TLPointerEventInfo & { target: 'canvas' }) => {
+		const { altKey, currentPagePoint } = this.editor.inputs
+
+		if (altKey) {
+			this.parent.transition('scribble_brushing', info)
+			return
+		}
+
+		this.excludedShapeIds = new Set(
+			this.editor
+				.getCurrentPageShapes()
+				.filter(
+					(shape) =>
+						this.editor.isShapeOfType<TLGroupShape>(shape, 'group') ||
+						this.editor.isShapeOrAncestorLocked(shape)
+				)
+				.map((shape) => shape.id)
+		)
+
+		this.info = info
+		this.initialSelectedShapeIds = this.editor.getSelectedShapeIds().slice()
+		this.initialStartShape = this.editor.getShapesAtPoint(currentPagePoint)[0]
+		this.onPointerMove()
+	}
+
+	override onExit = () => {
+		this.initialSelectedShapeIds = []
+		this.editor.updateInstanceState({ brush: null })
+	}
+
+	override onPointerMove = () => {
+		this.hitTestShapes()
+	}
+
+	override onPointerUp: TLEventHandlers['onPointerUp'] = () => {
+		this.complete()
+	}
+
+	override onComplete: TLEventHandlers['onComplete'] = () => {
+		this.complete()
+	}
+
+	override onCancel?: TLCancelEvent | undefined = (info) => {
+		this.editor.setSelectedShapes(this.initialSelectedShapeIds, { squashing: true })
+		this.parent.transition('idle', info)
+	}
+
+	override onKeyDown: TLEventHandlers['onKeyDown'] = (info) => {
+		if (this.editor.inputs.altKey) {
+			this.parent.transition('scribble_brushing', info)
+		} else {
+			this.hitTestShapes()
+		}
+	}
+
+	override onKeyUp?: TLKeyboardEvent | undefined = () => {
+		this.hitTestShapes()
+	}
+
+	private complete() {
+		this.parent.transition('idle')
+	}
+
+	private hitTestShapes() {
+		const zoomLevel = this.editor.getZoomLevel()
+		const currentPageShapes = this.editor.getCurrentPageShapes()
+		const currentPageId = this.editor.getCurrentPageId()
+		const {
+			inputs: { originPagePoint, currentPagePoint, shiftKey, ctrlKey },
+		} = this.editor
+
+		// Set the brush to contain the current and origin points
+		this.brush.setTo(Box2d.FromPoints([originPagePoint, currentPagePoint]))
+
+		// We'll be collecting shape ids
+		const results = new Set(shiftKey ? this.initialSelectedShapeIds : [])
+
+		let A: Vec2d,
+			B: Vec2d,
+			shape: TLShape,
+			pageBounds: Box2d | undefined,
+			pageTransform: Matrix2d | undefined,
+			localCorners: Vec2d[]
+
+		// We'll be testing the corners of the brush against the shapes
+		const { corners } = this.brush
+
+		const { excludedShapeIds } = this
+
+		testAllShapes: for (let i = 0, n = currentPageShapes.length; i < n; i++) {
+			shape = currentPageShapes[i]
+			if (excludedShapeIds.has(shape.id)) continue testAllShapes
+			if (results.has(shape.id)) continue testAllShapes
+
+			pageBounds = this.editor.getShapePageBounds(shape)
+			if (!pageBounds) continue testAllShapes
+
+			// If the brush fully wraps a shape, it's almost certainly a hit
+			if (this.brush.contains(pageBounds)) {
+				this.handleHit(shape, currentPagePoint, currentPageId, results, corners)
+				continue testAllShapes
+			}
+
+			// Should we even test for a single segment intersections? Only if
+			// we're not holding the ctrl key for alternate selection mode
+			// (only wraps count!), or if the shape is a frame.
+			if (ctrlKey || this.editor.isShapeOfType<TLFrameShape>(shape, 'frame')) {
+				continue testAllShapes
+			}
+
+			// If the brush collides the page bounds, then do hit tests against
+			// each of the brush's four sides.
+			if (this.brush.collides(pageBounds)) {
+				// Shapes expect to hit test line segments in their own coordinate system,
+				// so we first need to get the brush corners in the shape's local space.
+				const geometry = this.editor.getShapeGeometry(shape)
+
+				pageTransform = this.editor.getShapePageTransform(shape)
+
+				if (!pageTransform) {
+					continue testAllShapes
+				}
+
+				// Check whether any of the the brush edges intersect the shape
+				localCorners = pageTransform.clone().invert().applyToPoints(corners)
+
+				hitTestBrushEdges: for (let i = 0; i < localCorners.length; i++) {
+					A = localCorners[i]
+					B = localCorners[(i + 1) % localCorners.length]
+
+					if (geometry.hitTestLineSegment(A, B, HIT_TEST_MARGIN / zoomLevel)) {
+						this.handleHit(shape, currentPagePoint, currentPageId, results, corners)
+						break hitTestBrushEdges
+					}
+				}
+			}
+		}
+
+		this.editor.updateInstanceState({ brush: { ...this.brush.toJson() } })
+		this.editor.setSelectedShapes(Array.from(results), { squashing: true })
+	}
+
+	override onInterrupt: TLInterruptEvent = () => {
+		this.editor.updateInstanceState({ brush: null })
+	}
+
+	private handleHit(
+		shape: TLShape,
+		currentPagePoint: Vec2d,
+		currentPageId: TLPageId,
+		results: Set<TLShapeId>,
+		corners: Vec2d[]
+	) {
+		if (shape.parentId === currentPageId) {
+			results.add(shape.id)
+			return
+		}
+
+		// Find the outermost selectable shape, check to see if it has a
+		// page mask; and if so, check to see if the brush intersects it
+		const selectedShape = this.editor.getOutermostSelectableShape(shape)
+		const pageMask = this.editor.getShapeMask(selectedShape.id)
+
+		if (
+			pageMask &&
+			!polygonsIntersect(pageMask, corners) &&
+			!pointInPolygon(currentPagePoint, pageMask)
+		) {
+			return
+		}
+
+		results.add(selectedShape.id)
+	}
+}

package/src/lib/tools/SelectTool/childStates/Crop/Crop.ts

@@ -0,0 +1,10 @@
+import { StateNode } from '@bigbluebutton/editor'
+import { Idle } from './children/Idle'
+import { PointingCrop } from './children/PointingCrop'
+import { TranslatingCrop } from './children/TranslatingCrop'
+
+export class Crop extends StateNode {
+	static override id = 'crop'
+	static override initial = 'idle'
+	static override children = () => [Idle, TranslatingCrop, PointingCrop]
+}

package/src/lib/tools/SelectTool/childStates/Crop/children/Idle.ts

@@ -0,0 +1,217 @@
+import {
+	StateNode,
+	TLEventHandlers,
+	TLExitEventHandler,
+	TLGroupShape,
+	Vec2d,
+} from '@bigbluebutton/editor'
+import { getHitShapeOnCanvasPointerDown } from '../../../../selection-logic/getHitShapeOnCanvasPointerDown'
+import { ShapeWithCrop, getTranslateCroppedImageChange } from './crop_helpers'
+
+export class Idle extends StateNode {
+	static override id = 'idle'
+
+	override onEnter = () => {
+		this.editor.updateInstanceState(
+			{ cursor: { type: 'default', rotation: 0 } },
+			{ ephemeral: true }
+		)
+
+		const onlySelectedShape = this.editor.getOnlySelectedShape()
+
+		// well this fucking sucks. what the fuck.
+		// it's possible for a user to enter cropping, then undo
+		// (which clears the cropping id) but still remain in this state.
+		this.editor.on('change-history', this.cleanupCroppingState)
+
+		if (onlySelectedShape) {
+			this.editor.mark('crop')
+			this.editor.setCroppingShape(onlySelectedShape.id)
+		}
+	}
+
+	override onExit: TLExitEventHandler = () => {
+		this.editor.updateInstanceState(
+			{ cursor: { type: 'default', rotation: 0 } },
+			{ ephemeral: true }
+		)
+
+		this.editor.off('change-history', this.cleanupCroppingState)
+	}
+
+	override onCancel: TLEventHandlers['onCancel'] = () => {
+		this.editor.setCroppingShape(null)
+		this.editor.setCurrentTool('select.idle', {})
+	}
+
+	override onPointerDown: TLEventHandlers['onPointerDown'] = (info) => {
+		if (this.editor.getIsMenuOpen()) return
+
+		if (info.ctrlKey) {
+			this.cancel()
+			// feed the event back into the statechart
+			this.editor.root.handleEvent(info)
+			return
+		}
+
+		switch (info.target) {
+			case 'canvas': {
+				const hitShape = getHitShapeOnCanvasPointerDown(this.editor)
+				if (hitShape && !this.editor.isShapeOfType<TLGroupShape>(hitShape, 'group')) {
+					this.onPointerDown({
+						...info,
+						shape: hitShape,
+						target: 'shape',
+					})
+					return
+				}
+
+				this.cancel()
+				// feed the event back into the statechart
+				this.editor.root.handleEvent(info)
+				break
+			}
+			case 'shape': {
+				if (info.shape.id === this.editor.getCroppingShapeId()) {
+					this.editor.setCurrentTool('select.crop.pointing_crop', info)
+					return
+				} else {
+					if (this.editor.getShapeUtil(info.shape)?.canCrop(info.shape)) {
+						this.editor.setCroppingShape(info.shape.id)
+						this.editor.setSelectedShapes([info.shape.id])
+						this.editor.setCurrentTool('select.crop.pointing_crop', info)
+					} else {
+						this.cancel()
+						// feed the event back into the statechart
+						this.editor.root.handleEvent(info)
+					}
+				}
+				break
+			}
+			case 'selection': {
+				switch (info.handle) {
+					case 'mobile_rotate':
+					case 'top_left_rotate':
+					case 'top_right_rotate':
+					case 'bottom_left_rotate':
+					case 'bottom_right_rotate': {
+						this.editor.setCurrentTool('select.pointing_rotate_handle', {
+							...info,
+							onInteractionEnd: 'select.crop',
+						})
+						break
+					}
+					case 'top':
+					case 'right':
+					case 'bottom':
+					case 'left': {
+						this.editor.setCurrentTool('select.pointing_crop_handle', {
+							...info,
+							onInteractionEnd: 'select.crop',
+						})
+						break
+					}
+					case 'top_left':
+					case 'top_right':
+					case 'bottom_left':
+					case 'bottom_right': {
+						this.editor.setCurrentTool('select.pointing_crop_handle', {
+							...info,
+							onInteractionEnd: 'select.crop',
+						})
+						break
+					}
+					default: {
+						this.cancel()
+					}
+				}
+				break
+			}
+		}
+	}
+
+	override onDoubleClick: TLEventHandlers['onDoubleClick'] = (info) => {
+		// Without this, the double click's "settle" would trigger the reset
+		// after the user double clicked the edge to begin cropping
+		if (this.editor.inputs.shiftKey || info.phase !== 'up') return
+
+		const croppingShapeId = this.editor.getCroppingShapeId()
+		if (!croppingShapeId) return
+		const shape = this.editor.getShape(croppingShapeId)
+		if (!shape) return
+
+		const util = this.editor.getShapeUtil(shape)
+		if (!util) return
+
+		if (info.target === 'selection') {
+			util.onDoubleClickEdge?.(shape)
+		}
+	}
+
+	override onKeyDown: TLEventHandlers['onKeyDown'] = () => {
+		this.nudgeCroppingImage(false)
+	}
+
+	override onKeyRepeat: TLEventHandlers['onKeyRepeat'] = () => {
+		this.nudgeCroppingImage(true)
+	}
+
+	override onKeyUp: TLEventHandlers['onKeyUp'] = (info) => {
+		switch (info.code) {
+			case 'Enter': {
+				this.editor.setCroppingShape(null)
+				this.editor.setCurrentTool('select.idle', {})
+				break
+			}
+		}
+	}
+
+	private cancel() {
+		this.editor.setCroppingShape(null)
+		this.editor.setCurrentTool('select.idle', {})
+	}
+
+	private cleanupCroppingState = () => {
+		if (!this.editor.getCroppingShapeId()) {
+			this.editor.setCurrentTool('select.idle', {})
+		}
+	}
+
+	private nudgeCroppingImage(ephemeral = false) {
+		const {
+			editor: {
+				inputs: { keys },
+			},
+		} = this
+
+		// We want to use the "actual" shift key state,
+		// not the one that's in the editor.inputs.shiftKey,
+		// because that one uses a short timeout on release
+		const shiftKey = keys.has('ShiftLeft')
+
+		const delta = new Vec2d(0, 0)
+
+		if (keys.has('ArrowLeft')) delta.x += 1
+		if (keys.has('ArrowRight')) delta.x -= 1
+		if (keys.has('ArrowUp')) delta.y += 1
+		if (keys.has('ArrowDown')) delta.y -= 1
+
+		if (delta.equals(new Vec2d(0, 0))) return
+
+		if (shiftKey) delta.mul(10)
+
+		const shape = this.editor.getShape(this.editor.getCroppingShapeId()!) as ShapeWithCrop
+		if (!shape) return
+		const partial = getTranslateCroppedImageChange(this.editor, shape, delta)
+
+		if (partial) {
+			if (!ephemeral) {
+				// We don't want to create new marks if the user
+				// is just holding down the arrow keys
+				this.editor.mark('translate crop')
+			}
+
+			this.editor.updateShapes<ShapeWithCrop>([partial])
+		}
+	}
+}

package/src/lib/tools/SelectTool/childStates/Crop/children/PointingCrop.ts

@@ -0,0 +1,19 @@
+import { StateNode, TLEventHandlers, TLPointerEvent } from '@bigbluebutton/editor'
+
+export class PointingCrop extends StateNode {
+	static override id = 'pointing_crop'
+
+	override onCancel: TLEventHandlers['onCancel'] = () => {
+		this.editor.setCurrentTool('select.crop.idle', {})
+	}
+
+	override onPointerMove: TLPointerEvent = (info) => {
+		if (this.editor.inputs.isDragging) {
+			this.editor.setCurrentTool('select.crop.translating_crop', info)
+		}
+	}
+
+	override onPointerUp: TLPointerEvent = (info) => {
+		this.editor.setCurrentTool('select.crop.idle', info)
+	}
+}