diff --git a/components/canvas/canvas.tsx b/components/canvas/canvas.tsx
index 179cd62a8..390296ee9 100644
--- a/components/canvas/canvas.tsx
+++ b/components/canvas/canvas.tsx
@@ -77,6 +77,7 @@ function Peer({ id }: { id: string }): JSX.Element {
return
}
+
const MainSVG = styled('svg', {
position: 'fixed',
overflow: 'hidden',
diff --git a/components/canvas/cursor.tsx b/components/canvas/cursor.tsx
index 736bd9cd6..a4fa47387 100644
--- a/components/canvas/cursor.tsx
+++ b/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"
>
diff --git a/components/canvas/shape.tsx b/components/canvas/shape.tsx
index 3fe958282..853639bb6 100644
--- a/components/canvas/shape.tsx
+++ b/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)
- const { isParent, isForeignObject, canStyleFill } = shapeUtils
+ const {
+ isParent = false,
+ isForeignObject = false,
+ canStyleFill = false,
+ } = shapeUtils
const events = useShapeEvents(id, isParent, rGroup)
+ if (!shape) return null
+
return (
tld.getShape(s.data, props.id) !== undefined
- )
-
- if (!hasShape) {
- console.warn('missing shape!')
- return null
- }
-
- return
-}
-
-export default memo(ShapeGuard)
+export default memo(Shape)
interface RealShapeProps {
id: string
diff --git a/state/state.ts b/state/state.ts
index bd13622e5..aa6a8127d 100644
--- a/state/state.ts
+++ b/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',