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',