fix big on transform

components/canvas/shape.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, memo, useEffect, useState } from 'react'
+import React, { useRef, memo, useEffect } from 'react'
 import state, { useSelector } from 'state'
 import styled from 'styles'
 import { getShapeUtils } from 'state/shape-utils'
@@ -14,12 +14,6 @@ interface ShapeProps {
   isSelecting: boolean
 }
 
-function ShapeGuard(props: ShapeProps): JSX.Element {
-  const hasShape = useMissingShapeTest(props.id)
-  if (!hasShape) return null
-  return <Shape {...props} />
-}
-
 function Shape({ id, isSelecting }: ShapeProps): JSX.Element {
   const rGroup = useRef<SVGGElement>(null)
 
@@ -97,6 +91,21 @@ function Shape({ id, isSelecting }: ShapeProps): JSX.Element {
   )
 }
 
+function ShapeGuard(props: ShapeProps): JSX.Element {
+  const hasShape = useSelector(
+    (s) => tld.getShape(s.data, props.id) !== undefined
+  )
+
+  if (!hasShape) {
+    console.warn('missing shape!')
+    return null
+  }
+
+  return <Shape {...props} />
+}
+
+export default memo(ShapeGuard)
+
 interface RealShapeProps {
   id: string
   isParent: boolean
@@ -197,19 +206,3 @@ const EventSoak = styled('use', {
 const StyledGroup = styled('g', {
   outline: 'none',
 })
-
-export default memo(ShapeGuard)
-
-function useMissingShapeTest(id: string) {
-  const [isShape, setIsShape] = useState(true)
-
-  useEffect(() => {
-    return state.onUpdate((s) => {
-      if (isShape && !tld.getShape(s.data, id)) {
-        setIsShape(false)
-      }
-    })
-  }, [isShape, id])
-
-  return isShape
-}

state/sessions/transform-session.ts

@@ -69,7 +69,7 @@ export default class TransformSession extends BaseSession {
         transformOrigin,
       })
 
-      shapes[id] = { ...shape }
+      shapes[id] = deepClone(shape)
     }
 
     tld.updateParents(data, Object.keys(shapeBounds))

state/sessions/transform-single-session.ts

@@ -53,7 +53,7 @@ export default class TransformSingleSession extends BaseSession {
       transformOrigin: [0.5, 0.5],
     })
 
-    data.document.pages[data.currentPageId].shapes[shape.id] = { ...shape }
+    data.document.pages[data.currentPageId].shapes[shape.id] = deepClone(shape)
 
     tld.updateParents(data, [id])
   }