Fix flips (#829)

apps/www/components/IFrameWarning.tsx

@@ -34,8 +34,6 @@ export default function IFrameWarning({ url = 'https://tldraw.com' }: { url?: st
       }
       document.execCommand('copy')
     } catch (err) {
-      console.log('nope')
-
       null // Could not copy to clipboard
     } finally {
       document.body.removeChild(textarea)

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

@@ -19,31 +19,46 @@ describe('Flip command', () => {
   })
 
   it('does, undoes and redoes command', () => {
-    app.select('rect1', 'rect2')
-    app.flipHorizontal()
+    expect(app.getShape<RectangleShape>('rect1').point).toStrictEqual([0, 0])
+    expect(app.getShape<RectangleShape>('rect2').point).toStrictEqual([100, 100])
+
+    app.select('rect1', 'rect2').flipHorizontal()
 
     expect(app.getShape<RectangleShape>('rect1').point).toStrictEqual([100, 0])
+    expect(app.getShape<RectangleShape>('rect2').point).toStrictEqual([0, 100])
 
     app.undo()
 
     expect(app.getShape<RectangleShape>('rect1').point).toStrictEqual([0, 0])
+    expect(app.getShape<RectangleShape>('rect2').point).toStrictEqual([100, 100])
 
     app.redo()
 
     expect(app.getShape<RectangleShape>('rect1').point).toStrictEqual([100, 0])
+    expect(app.getShape<RectangleShape>('rect2').point).toStrictEqual([0, 100])
   })
 
   it('flips horizontally', () => {
     app.select('rect1', 'rect2')
+
+    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('flips vertically', () => {
     app.select('rect1', 'rect2')
+
+    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])
   })
 })

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

@@ -5,9 +5,13 @@ import type { TldrawApp } from '../../internal'
 import { TLDR } from '~state/TLDR'
 
 export function flipShapes(app: TldrawApp, ids: string[], type: FlipType): TldrawCommand {
-  const { selectedIds, currentPageId, shapes } = app
+  const {
+    selectedIds,
+    currentPageId,
+    page: { shapes },
+  } = app
 
-  const boundsForShapes = shapes.map((shape) => TLDR.getBounds(shape))
+  const boundsForShapes = ids.map((id) => TLDR.getBounds(shapes[id]))
 
   const commonBounds = Utils.getCommonBounds(boundsForShapes)