Support rotated shapes when pasting (#107)

packages/core/src/components/shape/shape.tsx

@@ -30,7 +30,7 @@ export const Shape = React.memo(
     useForceUpdate()
 
     return (
-      <Container id={shape.id} className="tl-shape" bounds={bounds} rotation={shape.rotation}>
+      <Container id={shape.id} bounds={bounds} rotation={shape.rotation}>
         <RenderedShape
           shape={shape}
           isBinding={isBinding}

packages/core/src/hooks/useStyle.tsx

@@ -123,6 +123,7 @@ const tlcss = css`
     padding: 0px;
     margin: 0px;
     z-index: 100;
+    overflow: clip;
     touch-action: none;
     overscroll-behavior: none;
     background-color: var(--tl-background);

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

@@ -2,8 +2,6 @@
 
 exports[` 1`] = `"[]"`;
 
-exports[` 2`] = `undefined`;
-
 exports[`TLDrawState Exposes undo/redo stack: history 1`] = `
 Array [
   Object {
@@ -126,3 +124,5 @@ Array [
   },
 ]
 `;
+
+exports[`TLDrawState When copying to SVG Copies shapes.: copied svg 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"-20.741879096242684 -20.741879096242684 236.74 236.74\\" width=\\"204.74\\" height=\\"204.74\\"/>"`;

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

@@ -217,11 +217,6 @@ describe('TLDrawState', () => {
     expect(tlstate.copyJson()).toMatchSnapshot('copied json')
   })
 
-  describe('Copies to SVG', () => {
-    tlstate.selectAll()
-    expect(tlstate.copySvg()).toMatchSnapshot('copied svg')
-  })
-
   describe('Mutates bound shapes', () => {
     const tlstate = new TLDrawState()
       .createShapes(
@@ -446,6 +441,35 @@ describe('TLDrawState', () => {
     expect(tlstate2.shapes.length).toBe(1)
   })
 
+  describe('When copying to SVG', () => {
+    it('Copies shapes.', () => {
+      const tlstate = new TLDrawState()
+      const result = tlstate
+        .loadDocument(mockDocument)
+        .select('rect1')
+        .rotate(0.1)
+        .selectAll()
+        .copySvg()
+      expect(result).toMatchSnapshot('copied svg')
+    })
+
+    it.todo('Copies Text shapes as <text> elements.')
+    // it('Copies Text shapes as <text> elements.', () => {
+    //   const tlstate2 = new TLDrawState()
+
+    //   const svgString = tlstate2
+    //     .createShapes({
+    //       id: 'text1',
+    //       type: TLDrawShapeType.Text,
+    //       text: 'hello world!',
+    //     })
+    //     .select('text1')
+    //     .copySvg()
+
+    //   expect(svgString).toBeTruthy()
+    // })
+  })
+
   describe('when the document prop changes', () => {
     it.todo('replaces the document if the ids are different')
 

packages/tldraw/src/state/tlstate.ts

@@ -987,13 +987,19 @@ export class TLDrawState extends StateManager<Data> {
       if (elm) {
         const clone = elm?.cloneNode(true) as SVGElement
         const shape = this.getShape(id, pageId)
-        clone.setAttribute('transform', `translate(${shape.point})`)
+        const bounds = TLDR.getShapeUtils(shape).getBounds(shape)
+        clone.setAttribute(
+          'transform',
+          `translate(${shape.point[0]}px ${shape.point[1]}px) rotate(${
+            ((shape.rotation || 0) * 180) / Math.PI
+          }, ${bounds.width / 2}, ${bounds.height / 2})`
+        )
         svg.appendChild(clone)
       }
     })
 
     const shapes = ids.map((id) => this.getShape(id, pageId))
-    const bounds = Utils.getCommonBounds(shapes.map(TLDR.getBounds))
+    const bounds = Utils.getCommonBounds(shapes.map(TLDR.getRotatedBounds))
     const padding = 16
 
     // Resize the element to the bounding box