diff --git a/components/canvas/shape.tsx b/components/canvas/shape.tsx
index 6c614b943..3fe958282 100644
--- a/components/canvas/shape.tsx
+++ b/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
-}
-
function Shape({ id, isSelecting }: ShapeProps): JSX.Element {
const rGroup = useRef(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
+}
+
+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
-}
diff --git a/state/sessions/transform-session.ts b/state/sessions/transform-session.ts
index 3f4e475bd..899aea220 100644
--- a/state/sessions/transform-session.ts
+++ b/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))
diff --git a/state/sessions/transform-single-session.ts b/state/sessions/transform-single-session.ts
index d98a110ef..cf865e42b 100644
--- a/state/sessions/transform-single-session.ts
+++ b/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])
}