jeffemmett
/
canvas-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update dev and prod shape render

This commit is contained in:
Jeff Emmett 2025-11-10 20:16:45 -08:00
parent 92cac8dee5
commit 73ac456e17
2 changed files with 48 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/automerge/AutomergeToTLStore.ts
View File

@ -349,6 +349,12 @@ export function sanitizeRecord(record: any): TLRecord {
// Use JSON parse/stringify to create a deep copy of nested objects (like richText.content)
sanitized.props = JSON.parse(JSON.stringify(sanitized.props))
// CRITICAL: Map old shape type names to new ones (migration support)
// This handles renamed shape types from old data
if (sanitized.type === 'Transcribe') {
sanitized.type = 'Transcription'
}
// CRITICAL: Infer type from properties BEFORE defaulting to 'geo'
// This ensures arrows and other shapes are properly recognized
if (!sanitized.type || typeof sanitized.type !== 'string') {

56
src/automerge/useAutomergeStoreV2.ts
View File

@ -368,18 +368,26 @@ export function useAutomergeStoreV2({
if (existingStoreShapes.length > 0) {
console.log(`✅ Store already populated from patches (${existingStoreShapes.length} shapes) - using patch-based loading like dev`)
// CRITICAL: Force editor to see shapes by refreshing them
// This ensures the editor detects shapes that were loaded via patches
setTimeout(() => {
// CRITICAL: Force editor to see shapes by refreshing them multiple times
// Sometimes the editor needs multiple updates to detect shapes
const refreshShapes = (attempt: number) => {
const shapesToRefresh = existingStoreShapes.map(s => store.get(s.id)).filter((s): s is TLRecord => s !== undefined && s.typeName === 'shape')
if (shapesToRefresh.length > 0) {
store.mergeRemoteChanges(() => {
// Re-put shapes to ensure editor detects them
// Re-put shapes to trigger editor update
store.put(shapesToRefresh)
})
console.log(`📊 Refreshed ${shapesToRefresh.length} existing shapes to ensure editor visibility`)
console.log(`📊 Refreshed ${shapesToRefresh.length} existing shapes (attempt ${attempt}) to ensure editor visibility`)
// Try multiple times to ensure editor picks them up
if (attempt < 3) {
setTimeout(() => refreshShapes(attempt + 1), 200)
}
}, 100)
}
}
// Start refreshing after a short delay
setTimeout(() => refreshShapes(1), 100)
setStoreWithStatus({
store,
@ -408,16 +416,26 @@ export function useAutomergeStoreV2({
if (currentShapes.length > 0) {
console.log(`✅ Patches applied successfully: ${currentShapes.length} shapes loaded via patches`)
// Refresh shapes to ensure editor sees them
setTimeout(() => {
// CRITICAL: Force editor to see shapes by refreshing them multiple times
// Sometimes the editor needs multiple updates to detect shapes
const refreshShapes = (attempt: number) => {
const shapesToRefresh = currentShapes.map(s => store.get(s.id)).filter((s): s is TLRecord => s !== undefined && s.typeName === 'shape')
if (shapesToRefresh.length > 0) {
store.mergeRemoteChanges(() => {
// Re-put shapes to trigger editor update
store.put(shapesToRefresh)
})
console.log(`📊 Refreshed ${shapesToRefresh.length} shapes to ensure editor visibility`)
console.log(`📊 Refreshed ${shapesToRefresh.length} shapes (attempt ${attempt}) to ensure editor visibility`)
// Try multiple times to ensure editor picks them up
if (attempt < 3) {
setTimeout(() => refreshShapes(attempt + 1), 200)
}
}, 100)
}
}
// Start refreshing after a short delay
setTimeout(() => refreshShapes(1), 100)
setStoreWithStatus({
store,
@ -478,17 +496,27 @@ export function useAutomergeStoreV2({
})
console.log(`✅ Applied ${allRecords.length} records directly to store (fallback for missed patches - works in dev and production)`)
// Refresh shapes to ensure editor sees them
setTimeout(() => {
// CRITICAL: Force editor to see shapes by refreshing them multiple times
// Sometimes the editor needs multiple updates to detect shapes
const refreshShapes = (attempt: number) => {
const shapes = store.allRecords().filter((r: any) => r.typeName === 'shape')
const shapesToRefresh = shapes.map(s => store.get(s.id)).filter((s): s is TLRecord => s !== undefined && s.typeName === 'shape')
if (shapesToRefresh.length > 0) {
store.mergeRemoteChanges(() => {
// Re-put shapes to trigger editor update
store.put(shapesToRefresh)
})
console.log(`📊 Refreshed ${shapesToRefresh.length} shapes to ensure editor visibility`)
console.log(`📊 Refreshed ${shapesToRefresh.length} shapes (attempt ${attempt}) to ensure editor visibility`)
// Try multiple times to ensure editor picks them up
if (attempt < 3) {
setTimeout(() => refreshShapes(attempt + 1), 200)
}
}, 100)
}
}
// Start refreshing after a short delay
setTimeout(() => refreshShapes(1), 100)
}
} catch (error) {
console.error(`❌ Error applying records directly:`, error)