Feat/flip group shape (#876)

* feat: flip group shape when it's only selected

* fix undefined object

* add test for flipping grouped shape

* fix conflict

packages/tldraw/src/state/TLDR.ts

@@ -392,16 +392,30 @@ export class TLDR {
     const beforeShapes: Record<string, Partial<T>> = {}
     const afterShapes: Record<string, Partial<T>> = {}
 
-    ids.forEach((id, i) => {
-      const shape = TLDR.getShape<T>(data, id, pageId)
-      if (shape.isLocked) return
+    const shapes = data.document.pages?.[data.appState.currentPageId].shapes
+    const groupShape = shapes?.[ids[0]]
 
-      const change = fn(shape, i)
-      if (change) {
-        beforeShapes[id] = TLDR.getBeforeShape(shape, change)
-        afterShapes[id] = change
-      }
-    })
+    if (ids.length === 1 && groupShape?.type === 'group') {
+      groupShape.children.forEach((id, i) => {
+        const shape = TLDR.getShape<T>(data, id, pageId)
+        if (shape.isLocked) return
+        const change = fn(shape, i)
+        if (change) {
+          beforeShapes[id] = TLDR.getBeforeShape(shape, change)
+          afterShapes[id] = change
+        }
+      })
+    } else {
+      ids.forEach((id, i) => {
+        const shape = TLDR.getShape<T>(data, id, pageId)
+        if (shape.isLocked) return
+        const change = fn(shape, i)
+        if (change) {
+          beforeShapes[id] = TLDR.getBeforeShape(shape, change)
+          afterShapes[id] = change
+        }
+      })
+    }
 
     const dataWithMutations = Utils.deepMerge(data, {
       document: {

packages/tldraw/src/state/commands/flipShapes/flipShapes.spec.ts

@@ -61,4 +61,50 @@ describe('Flip command', () => {
     expect(app.getShape<RectangleShape>('rect1').point).toStrictEqual([0, 100])
     expect(app.getShape<RectangleShape>('rect2').point).toStrictEqual([100, 0])
   })
+
+  it('flips vertically the children of a grouped shape', () => {
+    app.group(
+      [app.getShape<RectangleShape>('rect1').id, app.getShape<RectangleShape>('rect2').id],
+      'groupId'
+    )
+    app.select('groupId')
+    expect(app.getShape<RectangleShape>('rect1').point).toStrictEqual([0, 0])
+    expect(app.getShape<RectangleShape>('rect2').point).toStrictEqual([100, 100])
+
+    app.flipVertical()
+    expect(app.getShape<RectangleShape>('rect1').point).toStrictEqual([0, 100])
+    expect(app.getShape<RectangleShape>('rect2').point).toStrictEqual([100, 0])
+  })
+  it('flips horizontally the children of a grouped shape', () => {
+    app.group(
+      [app.getShape<RectangleShape>('rect1').id, app.getShape<RectangleShape>('rect2').id],
+      'groupId'
+    )
+    app.select('groupId')
+    expect(app.getShape<RectangleShape>('rect1').point).toStrictEqual([0, 0])
+    expect(app.getShape<RectangleShape>('rect2').point).toStrictEqual([100, 100])
+
+    app.flipHorizontal()
+
+    expect(app.getShape<RectangleShape>('rect1').point).toStrictEqual([100, 0])
+    expect(app.getShape<RectangleShape>('rect2').point).toStrictEqual([0, 100])
+  })
+  it('stays in the same point when the grouped shape is selected with other shape', () => {
+    app.group(
+      [app.getShape<RectangleShape>('rect1').id, app.getShape<RectangleShape>('rect2').id],
+      'groupId'
+    )
+    app.select('groupId', 'rect3')
+    expect(app.getShape<RectangleShape>('rect1').point).toStrictEqual([0, 0])
+    expect(app.getShape<RectangleShape>('rect2').point).toStrictEqual([100, 100])
+
+    app.flipHorizontal()
+
+    expect(app.getShape<RectangleShape>('rect1').point).toStrictEqual([0, 0])
+    expect(app.getShape<RectangleShape>('rect2').point).toStrictEqual([100, 100])
+
+    app.flipVertical()
+    expect(app.getShape<RectangleShape>('rect1').point).toStrictEqual([0, 0])
+    expect(app.getShape<RectangleShape>('rect2').point).toStrictEqual([100, 100])
+  })
 })

packages/tldraw/src/state/commands/flipShapes/flipShapes.ts

@@ -1,8 +1,8 @@
-import { TLBoundsCorner, Utils } from '@tldraw/core'
 import { TLDR } from '~state/TLDR'
 import type { TldrawApp } from '~state/TldrawApp'
 import { FlipType } from '~types'
 import type { TldrawCommand } from '~types'
+import { TLBoundsCorner, Utils } from '@tldraw/core'
 
 export function flipShapes(app: TldrawApp, ids: string[], type: FlipType): TldrawCommand {
   const {
@@ -20,7 +20,6 @@ export function flipShapes(app: TldrawApp, ids: string[], type: FlipType): Tldra
     ids,
     (shape) => {
       const shapeBounds = TLDR.getBounds(shape)
-
       switch (type) {
         case FlipType.Horizontal: {
           const newShapeBounds = Utils.getRelativeTransformedBoundingBox(