shape viewing bug fixed
This commit is contained in:
parent
0c2ca28d0e
commit
0a34c0ab3e
|
|
@ -209,7 +209,7 @@ export function Board() {
|
||||||
...('connectionStatus' in storeWithHandle ? { connectionStatus: storeWithHandle.connectionStatus } : {}),
|
...('connectionStatus' in storeWithHandle ? { connectionStatus: storeWithHandle.connectionStatus } : {}),
|
||||||
error: storeWithHandle.error
|
error: storeWithHandle.error
|
||||||
}
|
}
|
||||||
const automergeHandle = storeWithHandle.handle
|
const automergeHandle = (storeWithHandle as any).handle
|
||||||
const [editor, setEditor] = useState<Editor | null>(null)
|
const [editor, setEditor] = useState<Editor | null>(null)
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|
@ -227,82 +227,109 @@ export function Board() {
|
||||||
|
|
||||||
// Remove the URL-based locking effect and replace with store-based initialization
|
// Remove the URL-based locking effect and replace with store-based initialization
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!editor) return
|
if (!editor || !store.store) return
|
||||||
initLockIndicators(editor)
|
initLockIndicators(editor)
|
||||||
watchForLockedShapes(editor)
|
watchForLockedShapes(editor)
|
||||||
|
|
||||||
|
// Function to check and fix missing shapes
|
||||||
|
const checkAndFixMissingShapes = () => {
|
||||||
// Debug: Check what shapes the editor can see
|
if (!editor || !store.store) return
|
||||||
if (editor) {
|
|
||||||
const editorShapes = editor.getRenderingShapes()
|
|
||||||
console.log(`📊 Board: Editor can see ${editorShapes.length} shapes for rendering`)
|
|
||||||
|
|
||||||
// Debug: Check all shapes in the store vs what editor can see
|
// Only check if store is synced
|
||||||
const storeShapes = store.store?.allRecords().filter((r: any) => r.typeName === 'shape') || []
|
if (store.status !== 'synced-remote') {
|
||||||
console.log(`📊 Board: Store has ${storeShapes.length} shapes, editor sees ${editorShapes.length}`)
|
console.log(`📊 Board: Store not synced yet (status: ${store.status}), skipping shape check`)
|
||||||
|
return
|
||||||
if (editorShapes.length > 0 && editor) {
|
|
||||||
const shape = editor.getShape(editorShapes[0].id)
|
|
||||||
console.log("📊 Board: Sample editor shape:", {
|
|
||||||
id: editorShapes[0].id,
|
|
||||||
type: shape?.type,
|
|
||||||
x: shape?.x,
|
|
||||||
y: shape?.y
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Debug: Check current page and page IDs
|
const editorShapes = editor.getCurrentPageShapes()
|
||||||
|
const storeShapes = store.store.allRecords().filter((r: any) => r.typeName === 'shape') || []
|
||||||
const currentPageId = editor.getCurrentPageId()
|
const currentPageId = editor.getCurrentPageId()
|
||||||
console.log(`📊 Board: Current page ID: ${currentPageId}`)
|
|
||||||
|
|
||||||
const pageRecords = store.store?.allRecords().filter((r: any) => r.typeName === 'page') || []
|
// Get shapes on current page from store
|
||||||
console.log(`📊 Board: Available pages:`, pageRecords.map((p: any) => ({
|
const storeShapesOnCurrentPage = storeShapes.filter((s: any) => s.parentId === currentPageId)
|
||||||
id: p.id,
|
|
||||||
name: (p as any).name
|
|
||||||
})))
|
|
||||||
|
|
||||||
// Check if there are shapes in store that editor can't see
|
console.log(`📊 Board: Store has ${storeShapes.length} total shapes, ${storeShapesOnCurrentPage.length} on current page. Editor sees ${editorShapes.length} shapes on current page.`)
|
||||||
if (storeShapes.length > editorShapes.length) {
|
|
||||||
|
// Check if there are shapes in store on current page that editor can't see
|
||||||
|
if (storeShapesOnCurrentPage.length > editorShapes.length) {
|
||||||
const editorShapeIds = new Set(editorShapes.map(s => s.id))
|
const editorShapeIds = new Set(editorShapes.map(s => s.id))
|
||||||
const missingShapes = storeShapes.filter((s: any) => !editorShapeIds.has(s.id))
|
const missingShapes = storeShapesOnCurrentPage.filter((s: any) => !editorShapeIds.has(s.id))
|
||||||
console.warn(`📊 Board: ${missingShapes.length} shapes in store but not visible to editor:`, missingShapes.map((s: any) => ({
|
|
||||||
id: s.id,
|
|
||||||
type: s.type,
|
|
||||||
x: s.x,
|
|
||||||
y: s.y,
|
|
||||||
parentId: s.parentId
|
|
||||||
})))
|
|
||||||
|
|
||||||
// Check if missing shapes are on a different page
|
if (missingShapes.length > 0) {
|
||||||
const shapesOnCurrentPage = missingShapes.filter((s: any) => s.parentId === currentPageId)
|
console.warn(`📊 Board: ${missingShapes.length} shapes in store on current page but not visible to editor:`, missingShapes.map((s: any) => ({
|
||||||
const shapesOnOtherPages = missingShapes.filter((s: any) => s.parentId !== currentPageId)
|
|
||||||
console.log(`📊 Board: Missing shapes on current page: ${shapesOnCurrentPage.length}, on other pages: ${shapesOnOtherPages.length}`)
|
|
||||||
|
|
||||||
if (shapesOnOtherPages.length > 0) {
|
|
||||||
console.log(`📊 Board: Shapes on other pages:`, shapesOnOtherPages.map((s: any) => ({
|
|
||||||
id: s.id,
|
id: s.id,
|
||||||
|
type: s.type,
|
||||||
|
x: s.x,
|
||||||
|
y: s.y,
|
||||||
parentId: s.parentId
|
parentId: s.parentId
|
||||||
})))
|
})))
|
||||||
|
|
||||||
// Fix: Move shapes to the current page
|
// Try to get the shapes from the editor to see if they exist but aren't being returned
|
||||||
console.log(`📊 Board: Moving ${shapesOnOtherPages.length} shapes to current page ${currentPageId}`)
|
const missingShapeIds = missingShapes.map((s: any) => s.id)
|
||||||
const shapesToMove = shapesOnOtherPages.map((s: any) => ({
|
const shapesFromEditor = missingShapeIds.map(id => editor.getShape(id)).filter(Boolean)
|
||||||
id: s.id,
|
|
||||||
type: s.type,
|
|
||||||
parentId: currentPageId
|
|
||||||
}))
|
|
||||||
|
|
||||||
try {
|
if (shapesFromEditor.length > 0) {
|
||||||
editor.updateShapes(shapesToMove)
|
console.log(`📊 Board: ${shapesFromEditor.length} missing shapes actually exist in editor but aren't in getCurrentPageShapes()`)
|
||||||
console.log(`📊 Board: Successfully moved ${shapesToMove.length} shapes to current page`)
|
// Try to select them to make them visible
|
||||||
} catch (error) {
|
editor.setSelectedShapes(shapesFromEditor.map(s => s.id))
|
||||||
console.error(`📊 Board: Error moving shapes to current page:`, error)
|
} else {
|
||||||
|
// Shapes don't exist in editor - might be a sync issue
|
||||||
|
console.error(`📊 Board: ${missingShapes.length} shapes are in store but don't exist in editor - possible sync issue`)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check if shapes are outside viewport
|
||||||
|
const viewport = editor.getViewportPageBounds()
|
||||||
|
const shapesOutsideViewport = missingShapes.filter((s: any) => {
|
||||||
|
if (s.x === undefined || s.y === undefined) return true
|
||||||
|
const shapeBounds = {
|
||||||
|
x: s.x,
|
||||||
|
y: s.y,
|
||||||
|
w: (s.props as any)?.w || 100,
|
||||||
|
h: (s.props as any)?.h || 100
|
||||||
|
}
|
||||||
|
return !(
|
||||||
|
shapeBounds.x + shapeBounds.w >= viewport.x &&
|
||||||
|
shapeBounds.x <= viewport.x + viewport.w &&
|
||||||
|
shapeBounds.y + shapeBounds.h >= viewport.y &&
|
||||||
|
shapeBounds.y <= viewport.y + viewport.h
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
if (shapesOutsideViewport.length > 0) {
|
||||||
|
console.log(`📊 Board: ${shapesOutsideViewport.length} missing shapes are outside viewport - focusing on them`)
|
||||||
|
// Focus on the first missing shape
|
||||||
|
const firstShape = shapesOutsideViewport[0] as any
|
||||||
|
if (firstShape && firstShape.x !== undefined && firstShape.y !== undefined) {
|
||||||
|
editor.setCamera({
|
||||||
|
x: firstShape.x - viewport.w / 2,
|
||||||
|
y: firstShape.y - viewport.h / 2,
|
||||||
|
z: editor.getCamera().z
|
||||||
|
}, { animation: { duration: 300 } })
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Also check for shapes on other pages
|
||||||
|
const shapesOnOtherPages = storeShapes.filter((s: any) => s.parentId !== currentPageId)
|
||||||
|
if (shapesOnOtherPages.length > 0) {
|
||||||
|
console.log(`📊 Board: ${shapesOnOtherPages.length} shapes exist on other pages (not current page ${currentPageId})`)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}, [editor])
|
|
||||||
|
// Initial check
|
||||||
|
checkAndFixMissingShapes()
|
||||||
|
|
||||||
|
// Listen to store changes to continuously monitor for missing shapes
|
||||||
|
const unsubscribe = store.store.listen(() => {
|
||||||
|
// Debounce the check to avoid excessive calls
|
||||||
|
setTimeout(checkAndFixMissingShapes, 500)
|
||||||
|
}, { source: "user", scope: "document" })
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
unsubscribe()
|
||||||
|
}
|
||||||
|
}, [editor, store.store])
|
||||||
|
|
||||||
// Update presence when session changes
|
// Update presence when session changes
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue