Fix missing shape (accept it)

components/canvas/canvas.tsx

@@ -77,6 +77,7 @@ function Peer({ id }: { id: string }): JSX.Element {
 
   return <Cursor point={point} />
 }
+
 const MainSVG = styled('svg', {
   position: 'fixed',
   overflow: 'hidden',

components/canvas/cursor.tsx

@@ -19,6 +19,7 @@ export default function Cursor({
       viewBox="0 0 35 35"
       version="1.1"
       pointerEvents="none"
+      opacity="0"
       xmlns="http://www.w3.org/2000/svg"
       xmlnsXlink="http://www.w3.org/1999/xlink"
     >

components/canvas/shape.tsx

@@ -8,6 +8,7 @@ import useShapeEvents from 'hooks/useShapeEvents'
 import vec from 'utils/vec'
 import { getShapeStyle } from 'state/shape-styles'
 import useShapeDef from 'hooks/useShape'
+import { ShapeUtility } from 'types'
 
 interface ShapeProps {
   id: string
@@ -19,22 +20,26 @@ function Shape({ id, isSelecting }: ShapeProps): JSX.Element {
 
   const isHidden = useSelector((s) => {
     const shape = tld.getShape(s.data, id)
-    return shape.isHidden
+    if (shape === undefined) return true
+    return shape?.isHidden
   })
 
   const children = useSelector((s) => {
     const shape = tld.getShape(s.data, id)
-    return shape.children
+    if (shape === undefined) return []
+    return shape?.children
   }, deepCompareArrays)
 
   const strokeWidth = useSelector((s) => {
     const shape = tld.getShape(s.data, id)
+    if (shape === undefined) return 0
     const style = getShapeStyle(shape?.style)
     return +style.strokeWidth
   })
 
   const transform = useSelector((s) => {
     const shape = tld.getShape(s.data, id)
+    if (shape === undefined) return ''
     const center = getShapeUtils(shape).getCenter(shape)
     const rotation = shape.rotation * (180 / Math.PI)
     const parentPoint = tld.getShape(s.data, shape.parentId)?.point || [0, 0]
@@ -51,12 +56,18 @@ function Shape({ id, isSelecting }: ShapeProps): JSX.Element {
 
   const shape = tld.getShape(state.data, id)
 
-  const shapeUtils = getShapeUtils(shape)
+  const shapeUtils = shape ? getShapeUtils(shape) : ({} as ShapeUtility<any>)
 
-  const { isParent, isForeignObject, canStyleFill } = shapeUtils
+  const {
+    isParent = false,
+    isForeignObject = false,
+    canStyleFill = false,
+  } = shapeUtils
 
   const events = useShapeEvents(id, isParent, rGroup)
 
+  if (!shape) return null
+
   return (
     <StyledGroup
       id={id + '-group'}
@@ -91,20 +102,7 @@ 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)
+export default memo(Shape)
 
 interface RealShapeProps {
   id: string

state/state.ts

@@ -163,19 +163,19 @@ const state = createState({
       },
       on: {
         // Network-Related
-        RT_LOADED_ROOM: [
-          'clearRoom',
-          { if: 'hasRoom', do: ['clearDocument', 'connectToRoom'] },
-        ],
-        RT_UNLOADED_ROOM: ['clearRoom', 'clearDocument'],
-        RT_DISCONNECTED_ROOM: ['clearRoom', 'clearDocument'],
-        RT_CREATED_SHAPE: 'addRtShape',
-        RT_CHANGED_STATUS: 'setRtStatus',
-        RT_DELETED_SHAPE: 'deleteRtShape',
-        RT_EDITED_SHAPE: 'editRtShape',
-        RT_MOVED_CURSOR: 'moveRtCursor',
+        // RT_LOADED_ROOM: [
+        //   'clearRoom',
+        //   { if: 'hasRoom', do: ['clearDocument', 'connectToRoom'] },
+        // ],
+        // RT_UNLOADED_ROOM: ['clearRoom', 'clearDocument'],
+        // RT_DISCONNECTED_ROOM: ['clearRoom', 'clearDocument'],
+        // RT_CREATED_SHAPE: 'addRtShape',
+        // RT_CHANGED_STATUS: 'setRtStatus',
+        // RT_DELETED_SHAPE: 'deleteRtShape',
+        // RT_EDITED_SHAPE: 'editRtShape',
+        // RT_MOVED_CURSOR: 'moveRtCursor',
+        // MOVED_POINTER: { secretlyDo: 'sendRtCursorMove' },
         // Client
-        MOVED_POINTER: { secretlyDo: 'sendRtCursorMove' },
         RESIZED_WINDOW: 'resetPageState',
         RESET_PAGE: 'resetPage',
         TOGGLED_READ_ONLY: 'toggleReadOnly',