Restores select on single click

packages/tldraw/src/state/tlstate.spec.ts

@@ -72,18 +72,18 @@ describe('TLDrawState', () => {
       expect(tlstate.selectedIds.length).toBe(3)
     })
 
-    it('does not select selected shape when single-clicked', () => {
+    it('selects selected shape when single-clicked', () => {
       tlstate.loadDocument(mockDocument).selectAll()
       tlu.clickShape('rect2')
-      expect(tlstate.selectedIds).toStrictEqual(['rect1', 'rect2', 'rect3'])
-    })
-
-    it('selects shape when double-clicked', () => {
-      tlstate.loadDocument(mockDocument).selectAll()
-      tlu.doubleClickShape('rect2')
       expect(tlstate.selectedIds).toStrictEqual(['rect2'])
     })
 
+    // it('selects shape when double-clicked', () => {
+    //   tlstate.loadDocument(mockDocument).selectAll()
+    //   tlu.doubleClickShape('rect2')
+    //   expect(tlstate.selectedIds).toStrictEqual(['rect2'])
+    // })
+
     it('does not select on meta-click', () => {
       tlstate.loadDocument(mockDocument).deselectAll()
       tlu.clickShape('rect1', { ctrlKey: true })
@@ -98,36 +98,52 @@ describe('TLDrawState', () => {
       expect(tlstate.status.current).toBe('idle')
     })
 
+    it('deletes shapes if cancelled during creating', () => {
+      // TODO
+    })
+
+    it('deletes shapes on undo after creating', () => {
+      // TODO
+    })
+
+    it('re-creates shapes on undo after creating', () => {
+      // TODO
+    })
+
+    it('selects all', () => {
+      // TODO
+    })
+
     // Single click on a selected shape to select just that shape
 
-    // it('single-selects shape in selection on click', () => {
-    //   tlstate.deselectAll()
-    //   clickShape('rect1')
-    //   clickShape('rect2', { shiftKey: true })
-    //   clickShape('rect2')
-    //   expect(tlstate.selectedIds).toStrictEqual(['rect2'])
-    //   expect(tlstate.status.current).toBe('idle')
-    // })
+    it('single-selects shape in selection on click', () => {
+      tlstate.deselectAll()
+      tlu.clickShape('rect1')
+      tlu.clickShape('rect2', { shiftKey: true })
+      tlu.clickShape('rect2')
+      expect(tlstate.selectedIds).toStrictEqual(['rect2'])
+      expect(tlstate.status.current).toBe('idle')
+    })
 
-    // it('single-selects shape in selection on pointerup only', () => {
-    //   tlstate.deselectAll()
-    //   clickShape('rect1')
-    //   clickShape('rect2', { shiftKey: true })
-    //   pointShape('rect2')
-    //   expect(tlstate.selectedIds).toStrictEqual(['rect1', 'rect2'])
-    //   stopPointing('rect2')
-    //   expect(tlstate.selectedIds).toStrictEqual(['rect2'])
-    //   expect(tlstate.status.current).toBe('idle')
-    // })
+    it('single-selects shape in selection on pointerup only', () => {
+      tlstate.deselectAll()
+      tlu.clickShape('rect1')
+      tlu.clickShape('rect2', { shiftKey: true })
+      tlu.pointShape('rect2')
+      expect(tlstate.selectedIds).toStrictEqual(['rect1', 'rect2'])
+      tlu.stopPointing('rect2')
+      expect(tlstate.selectedIds).toStrictEqual(['rect2'])
+      expect(tlstate.status.current).toBe('idle')
+    })
 
-    // it('selects shapes if shift key is lifted before pointerup', () => {
-    //   tlstate.deselectAll()
-    //   clickShape('rect1')
-    //   pointShape('rect2', { shiftKey: true })
-    //   expect(tlstate.status.current).toBe('pointingBounds')
-    //   stopPointing('rect2')
-    //   expect(tlstate.selectedIds).toStrictEqual(['rect2'])
-    //   expect(tlstate.status.current).toBe('idle')
-    // })
+    it('selects shapes if shift key is lifted before pointerup', () => {
+      tlstate.deselectAll()
+      tlu.clickShape('rect1')
+      tlu.pointShape('rect2', { shiftKey: true })
+      expect(tlstate.status.current).toBe('pointingBounds')
+      tlu.stopPointing('rect2')
+      expect(tlstate.selectedIds).toStrictEqual(['rect2'])
+      expect(tlstate.status.current).toBe('idle')
+    })
   })
 })

packages/tldraw/src/state/tlstate.ts

@@ -1474,6 +1474,8 @@ export class TLDrawState implements TLCallbacks {
             if (this.pointedId !== info.target) {
               this.setSelectedIds(data.pageState.selectedIds.filter((id) => id !== info.target))
             }
+          } else {
+            this.setSelectedIds([info.target])
           }
         } else if (this.pointedId === info.target) {
           if (info.shiftKey) {
@@ -1582,7 +1584,7 @@ export class TLDrawState implements TLCallbacks {
   onPointShape: TLPointerEventHandler = (info) => {
     const data = this.getState()
     switch (this.status.current) {
-      case 'idle': {
+      case TLDrawStatus.Idle: {
         switch (this.appState.activeTool) {
           case 'select': {
             if (info.metaKey) {
@@ -1607,21 +1609,38 @@ export class TLDrawState implements TLCallbacks {
         }
         break
       }
-      case 'pointingBounds': {
+      case TLDrawStatus.PointingBounds: {
         this.pointedId = info.target
         break
       }
     }
   }
 
-  onReleaseShape: TLPointerEventHandler = () => {
-    // Unused
+  onReleaseShape: TLPointerEventHandler = (info) => {
+    // const data = this.getState()
+    // switch (this.status.current) {
+    //   case TLDrawStatus.PointingBounds: {
+    //     switch (this.appState.activeTool) {
+    //       case 'select': {
+    //         if (data.pageState.selectedIds.includes(info.target)) {
+    //           // If the shape is not selected; then if the user is pressing shift,
+    //           // add the shape to the current selection; otherwise, set the shape as
+    //           // the only selected shape.
+    //           this.setSelectedIds([info.target], info.shiftKey)
+    //         }
+    //         this.setStatus(TLDrawStatus.Idle)
+    //         break
+    //       }
+    //     }
+    //     break
+    //   }
+    // }
   }
 
-  onDoubleClickShape: TLPointerEventHandler = (info) => {
-    if (this.selectedIds.includes(info.target)) {
-      this.setSelectedIds([info.target])
-    }
+  onDoubleClickShape: TLPointerEventHandler = () => {
+    // if (this.selectedIds.includes(info.target)) {
+    //   this.setSelectedIds([info.target])
+    // }
   }
 
   onRightPointShape: TLPointerEventHandler = () => {

packages/tldraw/src/test/state-utils.tsx

@@ -22,6 +22,7 @@ export class TLStateUtils {
       inputs.pointerDown(this.getPoint(options), 'canvas'),
       {} as React.PointerEvent
     )
+    return this
   }
 
   pointShape = (id: string, options: PointerOptions = {}) => {
@@ -29,6 +30,7 @@ export class TLStateUtils {
       inputs.pointerDown(this.getPoint(options), id),
       {} as React.PointerEvent
     )
+    return this
   }
 
   doubleClickShape = (id: string, options: PointerOptions = {}) => {
@@ -36,6 +38,7 @@ export class TLStateUtils {
       inputs.pointerDown(this.getPoint(options), id),
       {} as React.PointerEvent
     )
+    return this
   }
 
   pointBounds = (options: PointerOptions = {}) => {
@@ -43,6 +46,7 @@ export class TLStateUtils {
       inputs.pointerDown(this.getPoint(options), 'bounds'),
       {} as React.PointerEvent
     )
+    return this
   }
 
   pointBoundsHandle = (
@@ -53,6 +57,7 @@ export class TLStateUtils {
       inputs.pointerDown(this.getPoint(options), 'bounds'),
       {} as React.PointerEvent
     )
+    return this
   }
 
   stopPointing = (target = 'canvas', options: PointerOptions = {}) => {
@@ -60,21 +65,25 @@ export class TLStateUtils {
       inputs.pointerDown(this.getPoint(options), target),
       {} as React.PointerEvent
     )
+    return this
   }
 
   clickCanvas = (options: PointerOptions = {}) => {
     this.pointCanvas(options)
     this.stopPointing()
+    return this
   }
 
   clickShape = (id: string, options: PointerOptions = {}) => {
     this.pointShape(id, options)
     this.stopPointing(id, options)
+    return this
   }
 
   clickBounds = (options: PointerOptions = {}) => {
     this.pointBounds(options)
     this.stopPointing()
+    return this
   }
 
   clickBoundsHandle = (
@@ -83,6 +92,7 @@ export class TLStateUtils {
   ) => {
     this.pointBoundsHandle(id, options)
     this.stopPointing(id)
+    return this
   }
 
   getPoint(options: PointerOptions = {} as PointerOptions): PointerEvent {