diff --git a/packages/tldraw/src/state/TldrawApp.ts b/packages/tldraw/src/state/TldrawApp.ts index 2635cca89..c51e42750 100644 --- a/packages/tldraw/src/state/TldrawApp.ts +++ b/packages/tldraw/src/state/TldrawApp.ts @@ -1437,8 +1437,6 @@ export class TldrawApp extends StateManager { .map((shape) => { const parentShapeId = idsMap[shape.parentId] - console.log(shape) - const copy = { ...shape, id: idsMap[shape.id], @@ -2500,6 +2498,36 @@ export class TldrawApp extends StateManager { onKeyDown: TLKeyboardEventHandler = (key, info, e) => { switch (e.key) { + case '.': { + if (this.status === 'idle') { + const { shiftKey, metaKey, altKey, ctrlKey, spaceKey } = this + + this.onPointerDown( + { + target: 'canvas', + pointerId: 0, + origin: info.point, + point: info.point, + delta: [0, 0], + pressure: 0.5, + shiftKey, + ctrlKey, + metaKey, + altKey, + spaceKey, + }, + { + shiftKey, + altKey, + ctrlKey, + pointerId: 0, + clientX: info.point[0], + clientY: info.point[1], + } as unknown as React.PointerEvent + ) + } + break + } case 'Escape': { this.cancel() break @@ -2531,6 +2559,34 @@ export class TldrawApp extends StateManager { if (!info) return switch (e.key) { + case '.': { + const { currentPoint, shiftKey, metaKey, altKey, ctrlKey, spaceKey } = this + + this.onPointerUp( + { + target: 'canvas', + pointerId: 0, + origin: currentPoint, + point: currentPoint, + delta: [0, 0], + pressure: 0.5, + shiftKey, + ctrlKey, + metaKey, + altKey, + spaceKey, + }, + { + shiftKey, + altKey, + ctrlKey, + pointerId: 0, + clientX: currentPoint[0], + clientY: currentPoint[1], + } as unknown as React.PointerEvent + ) + break + } case 'Meta': { this.metaKey = false break diff --git a/packages/tldraw/src/state/tools/ArrowTool/ArrowTool.ts b/packages/tldraw/src/state/tools/ArrowTool/ArrowTool.ts index db607c1a1..5206a2185 100644 --- a/packages/tldraw/src/state/tools/ArrowTool/ArrowTool.ts +++ b/packages/tldraw/src/state/tools/ArrowTool/ArrowTool.ts @@ -9,6 +9,8 @@ export class ArrowTool extends BaseTool { /* ----------------- Event Handlers ----------------- */ onPointerDown: TLPointerEventHandler = () => { + if (this.status !== Status.Idle) return + const { currentPoint, appState: { currentPageId, currentStyle }, diff --git a/packages/tldraw/src/state/tools/DrawTool/DrawTool.ts b/packages/tldraw/src/state/tools/DrawTool/DrawTool.ts index eaf67fabb..fb0b085d0 100644 --- a/packages/tldraw/src/state/tools/DrawTool/DrawTool.ts +++ b/packages/tldraw/src/state/tools/DrawTool/DrawTool.ts @@ -9,6 +9,8 @@ export class DrawTool extends BaseTool { /* ----------------- Event Handlers ----------------- */ onPointerDown: TLPointerEventHandler = (info) => { + if (this.status !== Status.Idle) return + const { currentPoint, appState: { currentPageId, currentStyle }, diff --git a/packages/tldraw/src/state/tools/EllipseTool/EllipseTool.ts b/packages/tldraw/src/state/tools/EllipseTool/EllipseTool.ts index 16a7eebc4..2eb607372 100644 --- a/packages/tldraw/src/state/tools/EllipseTool/EllipseTool.ts +++ b/packages/tldraw/src/state/tools/EllipseTool/EllipseTool.ts @@ -9,6 +9,8 @@ export class EllipseTool extends BaseTool { /* ----------------- Event Handlers ----------------- */ onPointerDown: TLPointerEventHandler = () => { + if (this.status !== Status.Idle) return + const { currentPoint, appState: { currentPageId, currentStyle }, diff --git a/packages/tldraw/src/state/tools/EraseTool/EraseTool.ts b/packages/tldraw/src/state/tools/EraseTool/EraseTool.ts index fb8f86d5a..541532d87 100644 --- a/packages/tldraw/src/state/tools/EraseTool/EraseTool.ts +++ b/packages/tldraw/src/state/tools/EraseTool/EraseTool.ts @@ -18,6 +18,8 @@ export class EraseTool extends BaseTool { /* ----------------- Event Handlers ----------------- */ onPointerDown: TLPointerEventHandler = () => { + if (this.status !== Status.Idle) return + this.setStatus(Status.Pointing) } diff --git a/packages/tldraw/src/state/tools/LineTool/LineTool.ts b/packages/tldraw/src/state/tools/LineTool/LineTool.ts index 4397fcfac..7c0156223 100644 --- a/packages/tldraw/src/state/tools/LineTool/LineTool.ts +++ b/packages/tldraw/src/state/tools/LineTool/LineTool.ts @@ -9,6 +9,8 @@ export class LineTool extends BaseTool { /* ----------------- Event Handlers ----------------- */ onPointerDown: TLPointerEventHandler = () => { + if (this.status !== Status.Idle) return + const { currentPoint, appState: { currentPageId, currentStyle }, diff --git a/packages/tldraw/src/state/tools/RectangleTool/RectangleTool.ts b/packages/tldraw/src/state/tools/RectangleTool/RectangleTool.ts index cf88ed6ae..8789e3f5a 100644 --- a/packages/tldraw/src/state/tools/RectangleTool/RectangleTool.ts +++ b/packages/tldraw/src/state/tools/RectangleTool/RectangleTool.ts @@ -9,6 +9,8 @@ export class RectangleTool extends BaseTool { /* ----------------- Event Handlers ----------------- */ onPointerDown: TLPointerEventHandler = () => { + if (this.status !== Status.Idle) return + const { currentPoint, appState: { currentPageId, currentStyle }, diff --git a/packages/tldraw/src/state/tools/SelectTool/SelectTool.ts b/packages/tldraw/src/state/tools/SelectTool/SelectTool.ts index 48f496a36..1ab1572d3 100644 --- a/packages/tldraw/src/state/tools/SelectTool/SelectTool.ts +++ b/packages/tldraw/src/state/tools/SelectTool/SelectTool.ts @@ -237,7 +237,10 @@ export class SelectTool extends BaseTool { onPointerMove: TLPointerEventHandler = (info, e) => { const { originPoint, currentPoint } = this.app - if ((this.status === Status.SpacePanning && e.buttons === 1) || (this.status === Status.MiddleWheelPanning && e.buttons === 4)) { + if ( + (this.status === Status.SpacePanning && e.buttons === 1) || + (this.status === Status.MiddleWheelPanning && e.buttons === 4) + ) { this.app.onPan?.({ ...info, delta: Vec.neg(info.delta) }, e as unknown as WheelEvent) return } @@ -344,6 +347,32 @@ export class SelectTool extends BaseTool { if (e.buttons === 4) { this.setStatus(Status.MiddleWheelPanning) } + + if (info.target === 'canvas' && this.status === Status.Idle) { + const { currentPoint } = this.app + + if (info.spaceKey && e.buttons === 1) return + + if (this.status === Status.Idle && info.altKey && info.shiftKey) { + this.setStatus(Status.ClonePainting) + this.clonePaint(currentPoint) + return + } + + // Unless the user is holding shift or meta, clear the current selection + if (!info.shiftKey) { + this.app.onShapeBlur() + + if (info.altKey && this.app.selectedIds.length > 0) { + this.app.duplicate(this.app.selectedIds, currentPoint) + return + } + + this.selectNone() + } + + this.setStatus(Status.PointingCanvas) + } } onPointerUp: TLPointerEventHandler = (info, e) => { @@ -403,32 +432,6 @@ export class SelectTool extends BaseTool { // Canvas - onPointCanvas: TLCanvasEventHandler = (info, e) => { - const { currentPoint } = this.app - - if (info.spaceKey && e.buttons === 1) return - - if (this.status === Status.Idle && info.altKey && info.shiftKey) { - this.setStatus(Status.ClonePainting) - this.clonePaint(currentPoint) - return - } - - // Unless the user is holding shift or meta, clear the current selection - if (!info.shiftKey) { - this.app.onShapeBlur() - - if (info.altKey && this.app.selectedIds.length > 0) { - this.app.duplicate(this.app.selectedIds, currentPoint) - return - } - - this.selectNone() - } - - this.setStatus(Status.PointingCanvas) - } - onDoubleClickCanvas: TLCanvasEventHandler = () => { // Needs debugging // const { currentPoint } = this.app diff --git a/packages/tldraw/src/test/TldrawTestApp.tsx b/packages/tldraw/src/test/TldrawTestApp.tsx index b0a680b6d..1c36c03a9 100644 --- a/packages/tldraw/src/test/TldrawTestApp.tsx +++ b/packages/tldraw/src/test/TldrawTestApp.tsx @@ -73,22 +73,23 @@ export class TldrawTestApp extends TldrawApp { inputs.pointerDown(this.getPoint(options), id), {} as React.PointerEvent ) - this.onPointerDown( - inputs.pointerDown(this.getPoint(options), 'canvas'), - {} as React.PointerEvent - ) + this.onPointerDown(inputs.pointerDown(this.getPoint(options), id), {} as React.PointerEvent) return this } doubleClickBoundHandle = (id: TLBoundsHandle, options?: PointerOptions | number[]) => { + this.onPointerDown(inputs.pointerDown(this.getPoint(options), id), {} as React.PointerEvent) + this.onPointerUp(inputs.pointerUp(this.getPoint(options), id), {} as React.PointerEvent) + this.onPointerDown(inputs.pointerDown(this.getPoint(options), id), {} as React.PointerEvent) this.onDoubleClickBoundsHandle( + inputs.pointerUp(this.getPoint(options), id), + {} as React.PointerEvent + ) + this.onReleaseBoundsHandle?.( inputs.pointerDown(this.getPoint(options), id), {} as React.PointerEvent ) - this.onPointerDown( - inputs.pointerDown(this.getPoint(options), 'canvas'), - {} as React.PointerEvent - ) + this.onPointerUp?.(inputs.pointerUp(this.getPoint(options), id), {} as React.PointerEvent) return this }