Period key works as pointer down / up (#377)

packages/tldraw/src/state/TldrawApp.ts

@@ -1437,8 +1437,6 @@ export class TldrawApp extends StateManager<TDSnapshot> {
         .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<TDSnapshot> {
 
   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<HTMLDivElement>
+          )
+        }
+        break
+      }
       case 'Escape': {
         this.cancel()
         break
@@ -2531,6 +2559,34 @@ export class TldrawApp extends StateManager<TDSnapshot> {
     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<HTMLDivElement>
+        )
+        break
+      }
       case 'Meta': {
         this.metaKey = false
         break

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 },

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 },

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 },

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)
   }
 

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 },

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 },

packages/tldraw/src/state/tools/SelectTool/SelectTool.ts

@@ -237,7 +237,10 @@ export class SelectTool extends BaseTool<Status> {
   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<Status> {
     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<Status> {
 
   // 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

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.pointerDown(this.getPoint(options), id),
+      inputs.pointerUp(this.getPoint(options), id),
       {} as React.PointerEvent
     )
-    this.onPointerDown(
-      inputs.pointerDown(this.getPoint(options), 'canvas'),
+    this.onReleaseBoundsHandle?.(
+      inputs.pointerDown(this.getPoint(options), id),
       {} as React.PointerEvent
     )
+    this.onPointerUp?.(inputs.pointerUp(this.getPoint(options), id), {} as React.PointerEvent)
     return this
   }