Fixes selection for shapes in a group

state/commands/delete-selected.ts

@@ -1,8 +1,8 @@
 import Command from './command'
 import history from '../history'
 import { TranslateSnapshot } from 'state/sessions/translate-session'
-import { Data } from 'types'
+import { Data, ShapeType } from 'types'
-import { getPage, updateParents } from 'utils/utils'
+import { getDocumentBranch, getPage, updateParents } from 'utils/utils'
 import { current } from 'immer'
 import { getShapeUtils } from 'lib/shape-utils'
 
@@ -13,7 +13,9 @@ export default function deleteSelected(data: Data) {
 
   const page = getPage(current(data))
 
-  const shapes = selectedIds.map((id) => page.shapes[id])
+  const childrenToDelete = selectedIds
+    .flatMap((id) => getDocumentBranch(data, id))
+    .map((id) => page.shapes[id])
 
   data.selectedIds.clear()
 
@@ -41,18 +43,22 @@ export default function deleteSelected(data: Data) {
                 parent.children.map((id) => page.shapes[id])
               )
           }
-          delete page.shapes[id]
+
+          for (let shape of childrenToDelete) {
+            delete page.shapes[shape.id]
+          }
         }
 
         data.selectedIds.clear()
       },
       undo(data) {
         const page = getPage(data, currentPageId)
-        data.selectedIds.clear()
+
-        for (let shape of shapes) {
+        for (let shape of childrenToDelete) {
           page.shapes[shape.id] = shape
-          data.selectedIds.add(shape.id)
         }
+
+        data.selectedIds = new Set(selectedIds)
       },
     })
   )

state/commands/style.ts

@@ -1,13 +1,18 @@
 import Command from './command'
 import history from '../history'
 import { Data, ShapeStyles } from 'types'
-import { getPage, getSelectedShapes } from 'utils/utils'
+import { getDocumentBranch, getPage, getSelectedShapes } from 'utils/utils'
 import { getShapeUtils } from 'lib/shape-utils'
 import { current } from 'immer'
 
 export default function styleCommand(data: Data, styles: Partial<ShapeStyles>) {
-  const { currentPageId } = data
+  const cData = current(data)
-  const initialShapes = getSelectedShapes(current(data))
+  const page = getPage(cData)
+  const { currentPageId } = cData
+
+  const shapesToStyle = Array.from(data.selectedIds.values())
+    .flatMap((id) => getDocumentBranch(data, id))
+    .map((id) => page.shapes[id])
 
   history.execute(
     data,
@@ -18,7 +23,7 @@ export default function styleCommand(data: Data, styles: Partial<ShapeStyles>) {
       do(data) {
         const { shapes } = getPage(data, currentPageId)
 
-        for (const { id } of initialShapes) {
+        for (const { id } of shapesToStyle) {
           const shape = shapes[id]
           getShapeUtils(shape).applyStyles(shape, styles)
         }
@@ -26,7 +31,7 @@ export default function styleCommand(data: Data, styles: Partial<ShapeStyles>) {
       undo(data) {
         const { shapes } = getPage(data, currentPageId)
 
-        for (const { id, style } of initialShapes) {
+        for (const { id, style } of shapesToStyle) {
           const shape = shapes[id]
           getShapeUtils(shape).applyStyles(shape, style)
         }

state/history.ts

@@ -1,7 +1,7 @@
 import { Data } from 'types'
 import { BaseCommand } from './commands/command'
 
-const CURRENT_VERSION = 'code_slate_0.0.2'
+const CURRENT_VERSION = 'code_slate_0.0.3'
 
 // A singleton to manage history changes.
 

state/sessions/brush-session.ts

@@ -22,27 +22,23 @@ export default class BrushSession extends BaseSession {
 
     const brushBounds = getBoundsFromPoints([origin, point])
 
+    const hits = new Set<string>([])
+
     for (let id in snapshot.shapeHitTests) {
       const { test, selectId } = snapshot.shapeHitTests[id]
+      if (!hits.has(selectId)) {
         if (test(brushBounds)) {
+          hits.add(selectId)
+
           // When brushing a shape, select its top group parent.
           if (!data.selectedIds.has(selectId)) {
             data.selectedIds.add(selectId)
           }
-
-        // Possibly... select all of the top group parent's children too?
-        // const selectedId = getTopParentId(data, id)
-        // const idsToSelect = collectChildIds(data, selectedId)
-
-        // for (let id in idsToSelect) {
-        //   if (!data.selectedIds.has(id)) {
-        //     data.selectedIds.add(id)
-        //   }
-        // }
         } else if (data.selectedIds.has(selectId)) {
           data.selectedIds.delete(selectId)
         }
       }
+    }
 
     data.brush = brushBounds
   }
@@ -89,16 +85,3 @@ function getTopParentId(data: Data, id: string): string {
     ? id
     : getTopParentId(data, shape.parentId)
 }
-
-function collectChildIds(data: Data, id: string): string[] {
-  const shape = getPage(data).shapes[id]
-
-  if (shape.type === ShapeType.Group) {
-    return [
-      id,
-      ...shape.children.flatMap((childId) => collectChildIds(data, childId)),
-    ]
-  }
-
-  return [id]
-}

state/state.ts

@@ -1027,8 +1027,10 @@ const state = createState({
       const page = getPage(data)
       selectedIds.clear()
       for (let id in page.shapes) {
+        if (page.shapes[id].parentId === data.currentPageId) {
           selectedIds.add(id)
         }
+      }
     },
     setHoveredId(data, payload: PointerInfo) {
       data.hoveredId = payload.target

utils/utils.ts

@@ -1610,6 +1610,8 @@ export function getCurrentCamera(data: Data) {
 //   })
 // }
 
+/* --------------------- Groups --------------------- */
+
 export function updateParents(data: Data, changedShapeIds: string[]) {
   if (changedShapeIds.length === 0) return
 
@@ -1647,3 +1649,13 @@ export function getParentRotation(
     ? rotation + shape.rotation
     : getParentRotation(data, shape.parentId, rotation + shape.rotation)
 }
+
+export function getDocumentBranch(data: Data, id: string): string[] {
+  const shape = getPage(data).shapes[id]
+  if (shape.type !== ShapeType.Group) return [id]
+
+  return [
+    id,
+    ...shape.children.flatMap((childId) => getDocumentBranch(data, childId)),
+  ]
+}