Fixes brushing, selection, double-clicking

hooks/useShapeEvents.ts

@@ -13,11 +13,11 @@ export default function useShapeEvents(
       if (!inputs.canAccept(e.pointerId)) return
       e.stopPropagation()
       rGroup.current.setPointerCapture(e.pointerId)
+
       if (inputs.isDoubleClick()) {
         state.send('DOUBLE_POINTED_SHAPE', inputs.pointerDown(e, id))
-      } else {
-        state.send('POINTED_SHAPE', inputs.pointerDown(e, id))
       }
+      state.send('POINTED_SHAPE', inputs.pointerDown(e, id))
     },
     [id]
   )

state/sessions/brush-session.ts

@@ -5,7 +5,7 @@ import { getShapeUtils } from 'lib/shape-utils'
 import {
   getBoundsFromPoints,
   getPage,
-  getSelectedIds,
+  getPageState,
   getShapes,
   setSelectedIds,
   setToArray,
@@ -32,9 +32,11 @@ export default class BrushSession extends BaseSession {
 
     const hits = new Set<string>([])
 
-    const selectedIds = getSelectedIds(data)
+    const selectedIds = new Set(snapshot.selectedIds)
 
     for (let id in snapshot.shapeHitTests) {
+      if (selectedIds.has(id)) continue
+
       const { test, selectId } = snapshot.shapeHitTests[id]
       if (!hits.has(selectId)) {
         if (test(brushBounds)) {
@@ -50,6 +52,8 @@ export default class BrushSession extends BaseSession {
       }
     }
 
+    getPageState(data).selectedIds = selectedIds
+
     data.brush = brushBounds
   }
 
@@ -69,21 +73,28 @@ export default class BrushSession extends BaseSession {
  * brush will intersect that shape. For tests, start broad -> fine.
  */
 export function getBrushSnapshot(data: Data) {
+  const cData = current(data)
+  const { selectedIds } = getPageState(cData)
+
+  const shapesToTest = getShapes(cData)
+    .filter((shape) => shape.type !== ShapeType.Group)
+    .filter(
+      (shape) => !(selectedIds.has(shape.id) || selectedIds.has(shape.parentId))
+    )
+
   return {
-    selectedIds: setToArray(getSelectedIds(data)),
+    selectedIds: setToArray(selectedIds),
     shapeHitTests: Object.fromEntries(
-      getShapes(state.data)
-        .filter((shape) => shape.type !== ShapeType.Group)
-        .map((shape) => {
-          return [
-            shape.id,
-            {
-              selectId: getTopParentId(data, shape.id),
-              test: (bounds: Bounds) =>
-                getShapeUtils(shape).hitTestBounds(shape, bounds),
-            },
-          ]
-        })
+      shapesToTest.map((shape) => {
+        return [
+          shape.id,
+          {
+            selectId: getTopParentId(cData, shape.id),
+            test: (bounds: Bounds) =>
+              getShapeUtils(shape).hitTestBounds(shape, bounds),
+          },
+        ]
+      })
     ),
   }
 }

state/state.ts

@@ -50,8 +50,6 @@ import {
 import session from './session'
 import { pointInBounds } from 'utils/bounds'
 
-let currentBounds: Bounds
-
 const initialData: Data = {
   isReadOnly: false,
   settings: {
@@ -212,7 +210,13 @@ const state = createState({
                 CANCELLED: 'clearSelectedIds',
                 STARTED_PINCHING: { to: 'pinching' },
                 POINTED_CANVAS: { to: 'brushSelecting' },
-                POINTED_BOUNDS: { to: 'pointingBounds' },
+                POINTED_BOUNDS: [
+                  {
+                    if: 'isPressingMetaKey',
+                    to: 'brushSelecting',
+                  },
+                  { to: 'pointingBounds' },
+                ],
                 POINTED_BOUNDS_HANDLE: {
                   if: 'isPointingRotationHandle',
                   to: 'rotatingSelection',
@@ -225,14 +229,20 @@ const state = createState({
                     unless: 'shapeIsHovered',
                     do: 'setHoveredId',
                   },
-                  else: { if: 'shapeIsHovered', do: 'clearHoveredId' },
+                  else: {
+                    if: 'shapeIsHovered',
+                    do: 'clearHoveredId',
+                  },
                 },
                 UNHOVERED_SHAPE: 'clearHoveredId',
                 DOUBLE_POINTED_SHAPE: [
-                  'setDrilledPointedId',
-                  'clearSelectedIds',
-                  'pushPointedIdToSelectedIds',
                   {
+                    unless: 'isPressingShiftKey',
+                    do: [
+                      'setDrilledPointedId',
+                      'clearSelectedIds',
+                      'pushPointedIdToSelectedIds',
+                    ],
                     to: 'pointingBounds',
                   },
                 ],
@@ -242,7 +252,10 @@ const state = createState({
                     to: 'brushSelecting',
                   },
                   'setPointedId',
-                  { if: 'pointInSelectionBounds', to: 'pointingBounds' },
+                  {
+                    if: 'pointInSelectionBounds',
+                    to: 'pointingBounds',
+                  },
                   {
                     unless: 'isPointedShapeSelected',
                     then: {
@@ -262,10 +275,12 @@ const state = createState({
                 STOPPED_POINTING: [
                   {
                     if: 'isPressingShiftKey',
-                    then: {
-                      if: 'isPointedShapeSelected',
-                      do: 'pullPointedIdFromSelectedIds',
-                    },
+                    then: [
+                      {
+                        if: 'isPointedShapeSelected',
+                        do: 'pullPointedIdFromSelectedIds',
+                      },
+                    ],
                     else: {
                       unless: 'isPointingBounds',
                       do: ['clearSelectedIds', 'pushPointedIdToSelectedIds'],
@@ -742,7 +757,7 @@ const state = createState({
   },
   conditions: {
     isPointingBounds(data, payload: PointerInfo) {
-      return payload.target === 'bounds'
+      return getSelectedIds(data).size > 0 && payload.target === 'bounds'
     },
     isReadOnly(data) {
       return data.isReadOnly
@@ -763,9 +778,11 @@ const state = createState({
       return data.hoveredId === payload.target
     },
     pointInSelectionBounds(data, payload: PointerInfo) {
-      return (
-        currentBounds &&
-        pointInBounds(screenToWorld(payload.point, data), currentBounds)
+      if (getSelectedIds(data).size === 0) return false
+
+      return pointInBounds(
+        screenToWorld(payload.point, data),
+        getSelectionBounds(data)
       )
     },
     pointHitsShape(data, payload: PointerInfo) {
@@ -1448,73 +1465,7 @@ const state = createState({
       return new Set(getSelectedIds(data))
     },
     selectedBounds(data) {
-      const selectedIds = getSelectedIds(data)
-
-      const page = getPage(data)
-
-      const shapes = Array.from(selectedIds.values())
-        .map((id) => page.shapes[id])
-        .filter(Boolean)
-
-      if (selectedIds.size === 0) return null
-
-      if (selectedIds.size === 1) {
-        if (!shapes[0]) {
-          console.error('Could not find that shape! Clearing selected IDs.')
-          setSelectedIds(data, [])
-          return null
-        }
-
-        const shape = shapes[0]
-        const shapeUtils = getShapeUtils(shape)
-
-        if (!shapeUtils.canTransform) return null
-
-        let bounds = shapeUtils.getBounds(shape)
-
-        let parentId = shape.parentId
-
-        while (parentId !== data.currentPageId) {
-          const parent = page.shapes[parentId]
-
-          bounds = rotateBounds(
-            bounds,
-            getBoundsCenter(getShapeUtils(parent).getBounds(parent)),
-            parent.rotation
-          )
-
-          bounds.rotation = parent.rotation
-
-          parentId = parent.parentId
-        }
-
-        return bounds
-      }
-
-      const uniqueSelectedShapeIds: string[] = Array.from(
-        new Set(
-          Array.from(selectedIds.values()).flatMap((id) =>
-            getDocumentBranch(data, id)
-          )
-        ).values()
-      )
-
-      const commonBounds = getCommonBounds(
-        ...uniqueSelectedShapeIds
-          .map((id) => page.shapes[id])
-          .filter((shape) => shape.type !== ShapeType.Group)
-          .map((shape) => {
-            const parentOffset = getParentOffset(data, shape.id)
-            const parentRotation = getParentRotation(data, shape.id)
-            const bounds = getShapeUtils(shape).getRotatedBounds(shape)
-
-            return bounds
-          })
-      )
-
-      currentBounds = commonBounds
-
-      return commonBounds
+      return getSelectionBounds(data)
     },
     selectedStyle(data) {
       const selectedIds = Array.from(getSelectedIds(data).values())
@@ -1591,3 +1542,65 @@ function hasPointedIdInChildren(data: Data, id: string, pointedId: string) {
     hasPointedIdInChildren(data, childId, pointedId)
   )
 }
+
+function getSelectionBounds(data: Data) {
+  const selectedIds = getSelectedIds(data)
+
+  const page = getPage(data)
+
+  const shapes = Array.from(selectedIds.values())
+    .map((id) => page.shapes[id])
+    .filter(Boolean)
+
+  if (selectedIds.size === 0) return null
+
+  if (selectedIds.size === 1) {
+    if (!shapes[0]) {
+      console.error('Could not find that shape! Clearing selected IDs.')
+      setSelectedIds(data, [])
+      return null
+    }
+
+    const shape = shapes[0]
+    const shapeUtils = getShapeUtils(shape)
+
+    if (!shapeUtils.canTransform) return null
+
+    let bounds = shapeUtils.getBounds(shape)
+
+    let parentId = shape.parentId
+
+    while (parentId !== data.currentPageId) {
+      const parent = page.shapes[parentId]
+
+      bounds = rotateBounds(
+        bounds,
+        getBoundsCenter(getShapeUtils(parent).getBounds(parent)),
+        parent.rotation
+      )
+
+      bounds.rotation = parent.rotation
+
+      parentId = parent.parentId
+    }
+
+    return bounds
+  }
+
+  const uniqueSelectedShapeIds: string[] = Array.from(
+    new Set(
+      Array.from(selectedIds.values()).flatMap((id) =>
+        getDocumentBranch(data, id)
+      )
+    ).values()
+  )
+
+  const commonBounds = getCommonBounds(
+    ...uniqueSelectedShapeIds
+      .map((id) => page.shapes[id])
+      .filter((shape) => shape.type !== ShapeType.Group)
+      .map((shape) => getShapeUtils(shape).getRotatedBounds(shape))
+  )
+
+  return commonBounds
+}

utils/utils.ts

@@ -1370,6 +1370,10 @@ export function getPage(data: Data, pageId = data.currentPageId) {
   return data.document.pages[pageId]
 }
 
+export function getPageState(data: Data, pageId = data.currentPageId) {
+  return data.pageStates[pageId]
+}
+
 export function getCurrentCode(data: Data, fileId = data.currentCodeFileId) {
   return data.document.code[fileId]
 }