2051 lines
107 KiB
TypeScript
2051 lines
107 KiB
TypeScript
import {
|
|
TLRecord,
|
|
TLStoreWithStatus,
|
|
createTLStore,
|
|
TLStoreSnapshot,
|
|
} from "@tldraw/tldraw"
|
|
import { createTLSchema, defaultBindingSchemas, defaultShapeSchemas } from "@tldraw/tlschema"
|
|
import { useEffect, useState } from "react"
|
|
import { DocHandle, DocHandleChangePayload } from "@automerge/automerge-repo"
|
|
import {
|
|
useLocalAwareness,
|
|
useRemoteAwareness,
|
|
} from "@automerge/automerge-repo-react-hooks"
|
|
|
|
import { applyAutomergePatchesToTLStore } from "./AutomergeToTLStore.js"
|
|
import { applyTLStoreChangesToAutomerge } from "./TLStoreToAutomerge.js"
|
|
|
|
// Import custom shape utilities
|
|
import { ChatBoxShape } from "@/shapes/ChatBoxShapeUtil"
|
|
import { VideoChatShape } from "@/shapes/VideoChatShapeUtil"
|
|
import { EmbedShape } from "@/shapes/EmbedShapeUtil"
|
|
import { MarkdownShape } from "@/shapes/MarkdownShapeUtil"
|
|
import { MycrozineTemplateShape } from "@/shapes/MycrozineTemplateShapeUtil"
|
|
import { SlideShape } from "@/shapes/SlideShapeUtil"
|
|
import { PromptShape } from "@/shapes/PromptShapeUtil"
|
|
import { SharedPianoShape } from "@/shapes/SharedPianoShapeUtil"
|
|
import { TranscriptionShape } from "@/shapes/TranscriptionShapeUtil"
|
|
import { ObsNoteShape } from "@/shapes/ObsNoteShapeUtil"
|
|
import { FathomTranscriptShape } from "@/shapes/FathomTranscriptShapeUtil"
|
|
import { HolonShape } from "@/shapes/HolonShapeUtil"
|
|
import { ObsidianBrowserShape } from "@/shapes/ObsidianBrowserShapeUtil"
|
|
import { FathomMeetingsBrowserShape } from "@/shapes/FathomMeetingsBrowserShapeUtil"
|
|
import { LocationShareShape } from "@/shapes/LocationShareShapeUtil"
|
|
|
|
export function useAutomergeStoreV2({
|
|
handle,
|
|
userId: _userId,
|
|
}: {
|
|
handle: DocHandle<any>
|
|
userId: string
|
|
}): TLStoreWithStatus {
|
|
console.log("useAutomergeStoreV2 called with handle:", !!handle)
|
|
|
|
// Create a custom schema that includes all the custom shapes
|
|
const customSchema = createTLSchema({
|
|
shapes: {
|
|
...defaultShapeSchemas,
|
|
ChatBox: {} as any,
|
|
VideoChat: {} as any,
|
|
Embed: {} as any,
|
|
Markdown: {} as any,
|
|
MycrozineTemplate: {} as any,
|
|
Slide: {} as any,
|
|
Prompt: {} as any,
|
|
SharedPiano: {} as any,
|
|
Transcription: {} as any,
|
|
ObsNote: {} as any,
|
|
FathomTranscript: {} as any,
|
|
Holon: {} as any,
|
|
ObsidianBrowser: {} as any,
|
|
FathomMeetingsBrowser: {} as any,
|
|
LocationShare: {} as any,
|
|
},
|
|
bindings: defaultBindingSchemas,
|
|
})
|
|
|
|
const [store] = useState(() => {
|
|
const store = createTLStore({
|
|
schema: customSchema,
|
|
shapeUtils: [
|
|
ChatBoxShape,
|
|
VideoChatShape,
|
|
EmbedShape,
|
|
MarkdownShape,
|
|
MycrozineTemplateShape,
|
|
SlideShape,
|
|
PromptShape,
|
|
SharedPianoShape,
|
|
TranscriptionShape,
|
|
ObsNoteShape,
|
|
FathomTranscriptShape,
|
|
HolonShape,
|
|
ObsidianBrowserShape,
|
|
FathomMeetingsBrowserShape,
|
|
LocationShareShape,
|
|
],
|
|
})
|
|
return store
|
|
})
|
|
|
|
const [storeWithStatus, setStoreWithStatus] = useState<TLStoreWithStatus>({
|
|
status: "loading",
|
|
})
|
|
|
|
// Debug: Log store status when it changes
|
|
useEffect(() => {
|
|
if (storeWithStatus.status === "synced-remote" && storeWithStatus.store) {
|
|
const allRecords = storeWithStatus.store.allRecords()
|
|
const shapes = allRecords.filter(r => r.typeName === 'shape')
|
|
const pages = allRecords.filter(r => r.typeName === 'page')
|
|
console.log(`📊 useAutomergeStoreV2: Store synced with ${allRecords.length} total records, ${shapes.length} shapes, ${pages.length} pages`)
|
|
}
|
|
}, [storeWithStatus.status, storeWithStatus.store])
|
|
|
|
/* -------------------- TLDraw <--> Automerge -------------------- */
|
|
useEffect(() => {
|
|
// Early return if handle is not available
|
|
if (!handle) {
|
|
setStoreWithStatus({ status: "loading" })
|
|
return
|
|
}
|
|
|
|
const unsubs: (() => void)[] = []
|
|
|
|
// A hacky workaround to prevent local changes from being applied twice
|
|
// once into the automerge doc and then back again.
|
|
let isLocalChange = false
|
|
|
|
// Listen for changes from Automerge and apply them to TLDraw
|
|
const automergeChangeHandler = (payload: DocHandleChangePayload<any>) => {
|
|
if (isLocalChange) {
|
|
isLocalChange = false
|
|
return
|
|
}
|
|
|
|
try {
|
|
// Apply patches from Automerge to TLDraw store
|
|
if (payload.patches && payload.patches.length > 0) {
|
|
try {
|
|
applyAutomergePatchesToTLStore(payload.patches, store)
|
|
// Only log if there are many patches or if debugging is needed
|
|
if (payload.patches.length > 5) {
|
|
console.log(`✅ Successfully applied ${payload.patches.length} patches`)
|
|
}
|
|
} catch (patchError) {
|
|
console.error("Error applying patches, attempting individual patch application:", patchError)
|
|
// Try applying patches one by one to identify problematic ones
|
|
let successCount = 0
|
|
for (const patch of payload.patches) {
|
|
try {
|
|
applyAutomergePatchesToTLStore([patch], store)
|
|
successCount++
|
|
} catch (individualPatchError) {
|
|
console.error(`Failed to apply individual patch:`, individualPatchError)
|
|
// Log the problematic patch for debugging
|
|
console.error("Problematic patch details:", {
|
|
action: patch.action,
|
|
path: patch.path,
|
|
value: 'value' in patch ? patch.value : undefined,
|
|
patchId: patch.path[1],
|
|
errorMessage: individualPatchError instanceof Error ? individualPatchError.message : String(individualPatchError)
|
|
})
|
|
|
|
// Try to get more context about the failing record
|
|
const recordId = patch.path[1] as string
|
|
try {
|
|
const existingRecord = store.get(recordId as any)
|
|
console.error("Existing record that failed:", existingRecord)
|
|
} catch (e) {
|
|
console.error("Could not retrieve existing record:", e)
|
|
}
|
|
}
|
|
}
|
|
// Only log if there are failures or many patches
|
|
if (successCount < payload.patches.length || payload.patches.length > 5) {
|
|
console.log(`Successfully applied ${successCount} out of ${payload.patches.length} patches`)
|
|
}
|
|
}
|
|
}
|
|
|
|
setStoreWithStatus({
|
|
store,
|
|
status: "synced-remote",
|
|
connectionStatus: "online",
|
|
})
|
|
} catch (error) {
|
|
console.error("Error applying Automerge patches to TLDraw:", error)
|
|
setStoreWithStatus({
|
|
store,
|
|
status: "synced-remote",
|
|
connectionStatus: "offline",
|
|
error: error instanceof Error ? error : new Error("Unknown error") as any,
|
|
})
|
|
}
|
|
}
|
|
|
|
handle.on("change", automergeChangeHandler)
|
|
|
|
// Listen for changes from TLDraw and apply them to Automerge
|
|
// CRITICAL: Listen to ALL sources, not just "user", to catch richText/text changes
|
|
const unsubscribeTLDraw = store.listen(({ changes, source }) => {
|
|
// DEBUG: Log all changes to see what's being detected
|
|
const totalChanges = Object.keys(changes.added || {}).length + Object.keys(changes.updated || {}).length + Object.keys(changes.removed || {}).length
|
|
|
|
if (totalChanges > 0) {
|
|
console.log(`🔍 TLDraw store changes detected (source: ${source}):`, {
|
|
added: Object.keys(changes.added || {}).length,
|
|
updated: Object.keys(changes.updated || {}).length,
|
|
removed: Object.keys(changes.removed || {}).length,
|
|
source: source
|
|
})
|
|
|
|
// DEBUG: Check for richText/text changes in updated records
|
|
if (changes.updated) {
|
|
Object.values(changes.updated).forEach(([_, record]) => {
|
|
if (record.typeName === 'shape') {
|
|
if (record.type === 'geo' && (record.props as any)?.richText) {
|
|
console.log(`🔍 Geo shape ${record.id} richText change detected:`, {
|
|
hasRichText: !!(record.props as any).richText,
|
|
richTextType: typeof (record.props as any).richText,
|
|
source: source
|
|
})
|
|
}
|
|
if (record.type === 'note' && (record.props as any)?.richText) {
|
|
console.log(`🔍 Note shape ${record.id} richText change detected:`, {
|
|
hasRichText: !!(record.props as any).richText,
|
|
richTextType: typeof (record.props as any).richText,
|
|
richTextContentLength: Array.isArray((record.props as any).richText?.content)
|
|
? (record.props as any).richText.content.length
|
|
: 'not array',
|
|
source: source
|
|
})
|
|
}
|
|
if (record.type === 'arrow' && (record.props as any)?.text !== undefined) {
|
|
console.log(`🔍 Arrow shape ${record.id} text change detected:`, {
|
|
hasText: !!(record.props as any).text,
|
|
textValue: (record.props as any).text,
|
|
source: source
|
|
})
|
|
}
|
|
if (record.type === 'text' && (record.props as any)?.richText) {
|
|
console.log(`🔍 Text shape ${record.id} richText change detected:`, {
|
|
hasRichText: !!(record.props as any).richText,
|
|
richTextType: typeof (record.props as any).richText,
|
|
source: source
|
|
})
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
// DEBUG: Log added shapes to track what's being created
|
|
if (changes.added) {
|
|
Object.values(changes.added).forEach((record) => {
|
|
if (record.typeName === 'shape') {
|
|
console.log(`🔍 Shape added: ${record.type} (${record.id})`, {
|
|
type: record.type,
|
|
id: record.id,
|
|
hasRichText: !!(record.props as any)?.richText,
|
|
hasText: !!(record.props as any)?.text,
|
|
source: source
|
|
})
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
// CRITICAL: Don't skip changes - always save them to ensure consistency
|
|
// The isLocalChange flag is only used to prevent feedback loops from Automerge changes
|
|
// We should always save TLDraw changes, even if they came from Automerge sync
|
|
// This ensures that all shapes (notes, rectangles, etc.) are consistently persisted
|
|
|
|
try {
|
|
// Set flag to prevent feedback loop when this change comes back from Automerge
|
|
isLocalChange = true
|
|
|
|
handle.change((doc) => {
|
|
applyTLStoreChangesToAutomerge(doc, changes)
|
|
})
|
|
|
|
// Reset flag after a short delay to allow Automerge change handler to process
|
|
// This prevents feedback loops while ensuring all changes are saved
|
|
setTimeout(() => {
|
|
isLocalChange = false
|
|
}, 100)
|
|
|
|
// Only log if there are many changes or if debugging is needed
|
|
if (totalChanges > 3) {
|
|
console.log(`✅ Applied ${totalChanges} TLDraw changes to Automerge document`)
|
|
} else if (totalChanges > 0) {
|
|
console.log(`✅ Applied ${totalChanges} TLDraw change(s) to Automerge document`)
|
|
}
|
|
|
|
// Check if the document actually changed
|
|
const docAfter = handle.doc()
|
|
} catch (error) {
|
|
console.error("Error applying TLDraw changes to Automerge:", error)
|
|
// Reset flag on error to prevent getting stuck
|
|
isLocalChange = false
|
|
}
|
|
}, {
|
|
// CRITICAL: Don't filter by source - listen to ALL changes
|
|
// This ensures we catch richText/text changes regardless of their source
|
|
// (TLDraw might emit these changes with a different source than "user")
|
|
scope: "document",
|
|
})
|
|
|
|
unsubs.push(
|
|
() => handle.off("change", automergeChangeHandler),
|
|
unsubscribeTLDraw
|
|
)
|
|
|
|
// Initial load - populate TLDraw store from Automerge document
|
|
const initializeStore = async () => {
|
|
try {
|
|
// Only log if debugging is needed
|
|
// console.log("Starting TLDraw store initialization...")
|
|
await handle.whenReady()
|
|
// console.log("Automerge handle is ready")
|
|
|
|
const doc = handle.doc()
|
|
// Only log if debugging is needed
|
|
// console.log("Got Automerge document (FIXED VERSION):", {
|
|
// hasStore: !!doc.store,
|
|
// storeKeys: doc.store ? Object.keys(doc.store).length : 0,
|
|
// })
|
|
|
|
// Skip pre-sanitization to avoid Automerge reference errors
|
|
// We'll handle validation issues in the record processing loop instead
|
|
// Force cache refresh - pre-sanitization code has been removed
|
|
|
|
// Initialize store with existing records from Automerge
|
|
if (doc.store) {
|
|
const allStoreValues = Object.values(doc.store)
|
|
console.log("All store values from Automerge:", allStoreValues.map((v: any) => ({
|
|
hasTypeName: !!v?.typeName,
|
|
hasId: !!v?.id,
|
|
typeName: v?.typeName,
|
|
id: v?.id
|
|
})))
|
|
|
|
// Simple filtering - only keep valid TLDraw records
|
|
// Skip custom record types like obsidian_vault - they're not TLDraw records
|
|
// Components should read them directly from Automerge (like ObsidianVaultBrowser does)
|
|
const records = allStoreValues.filter((record: any) => {
|
|
if (!record || !record.typeName || !record.id) return false
|
|
// Skip obsidian_vault records - they're not TLDraw records
|
|
if (record.typeName === 'obsidian_vault' ||
|
|
(typeof record.id === 'string' && record.id.startsWith('obsidian_vault:'))) {
|
|
return false
|
|
}
|
|
return true
|
|
})
|
|
|
|
// Only log if there are many records or if debugging is needed
|
|
if (records.length > 50) {
|
|
console.log(`Found ${records.length} valid records in Automerge document`)
|
|
}
|
|
|
|
// CRITICAL FIXES ONLY - preserve all other properties
|
|
// Note: obsidian_vault records are filtered out above - they're not TLDraw records
|
|
const processedRecords = records.map((record: any) => {
|
|
// Create a deep copy to avoid modifying immutable Automerge objects
|
|
const processedRecord = JSON.parse(JSON.stringify(record))
|
|
|
|
// CRITICAL FIXES ONLY - preserve all other properties
|
|
if (processedRecord.typeName === 'shape') {
|
|
// Ensure basic required properties exist
|
|
if (typeof processedRecord.x !== 'number') processedRecord.x = 0
|
|
if (typeof processedRecord.y !== 'number') processedRecord.y = 0
|
|
if (typeof processedRecord.rotation !== 'number') processedRecord.rotation = 0
|
|
if (typeof processedRecord.isLocked !== 'boolean') processedRecord.isLocked = false
|
|
if (typeof processedRecord.opacity !== 'number') processedRecord.opacity = 1
|
|
if (!processedRecord.meta || typeof processedRecord.meta !== 'object') processedRecord.meta = {}
|
|
if (!processedRecord.index) processedRecord.index = 'a1'
|
|
if (!processedRecord.parentId) {
|
|
const pageRecord = records.find((r: any) => r.typeName === 'page') as any
|
|
if (pageRecord && pageRecord.id) {
|
|
processedRecord.parentId = pageRecord.id
|
|
} else {
|
|
processedRecord.parentId = 'page:page'
|
|
}
|
|
}
|
|
if (!processedRecord.props || typeof processedRecord.props !== 'object') processedRecord.props = {}
|
|
|
|
// CRITICAL: Infer type from properties BEFORE defaulting to 'geo'
|
|
// This ensures arrows and other shapes are properly recognized
|
|
if (!processedRecord.type || typeof processedRecord.type !== 'string') {
|
|
// Check for arrow-specific properties first
|
|
if (processedRecord.props?.start !== undefined ||
|
|
processedRecord.props?.end !== undefined ||
|
|
processedRecord.props?.arrowheadStart !== undefined ||
|
|
processedRecord.props?.arrowheadEnd !== undefined ||
|
|
processedRecord.props?.kind === 'line' ||
|
|
processedRecord.props?.kind === 'curved' ||
|
|
processedRecord.props?.kind === 'straight') {
|
|
processedRecord.type = 'arrow'
|
|
}
|
|
// Check for line-specific properties
|
|
else if (processedRecord.props?.points !== undefined) {
|
|
processedRecord.type = 'line'
|
|
}
|
|
// Check for geo-specific properties (w/h/geo)
|
|
else if (processedRecord.props?.geo !== undefined ||
|
|
('w' in processedRecord && 'h' in processedRecord) ||
|
|
('w' in processedRecord.props && 'h' in processedRecord.props)) {
|
|
processedRecord.type = 'geo'
|
|
}
|
|
// Check for note-specific properties
|
|
else if (processedRecord.props?.growY !== undefined ||
|
|
processedRecord.props?.verticalAlign !== undefined) {
|
|
processedRecord.type = 'note'
|
|
}
|
|
// Check for text-specific properties
|
|
else if (processedRecord.props?.textAlign !== undefined ||
|
|
processedRecord.props?.autoSize !== undefined) {
|
|
processedRecord.type = 'text'
|
|
}
|
|
// Check for draw-specific properties
|
|
else if (processedRecord.props?.segments !== undefined) {
|
|
processedRecord.type = 'draw'
|
|
}
|
|
// Default to geo only if no other indicators found
|
|
else {
|
|
processedRecord.type = 'geo'
|
|
}
|
|
}
|
|
|
|
// CRITICAL: For geo shapes, move w/h/geo from top-level to props (required by TLDraw schema)
|
|
if (processedRecord.type === 'geo' || ('w' in processedRecord && 'h' in processedRecord && processedRecord.type !== 'arrow')) {
|
|
if (!processedRecord.type || processedRecord.type === 'geo') {
|
|
processedRecord.type = 'geo'
|
|
}
|
|
|
|
// Move w from top-level to props
|
|
if ('w' in processedRecord && processedRecord.w !== undefined) {
|
|
if (!('w' in processedRecord.props) || processedRecord.props.w === undefined) {
|
|
processedRecord.props.w = processedRecord.w
|
|
}
|
|
delete (processedRecord as any).w
|
|
}
|
|
|
|
// Move h from top-level to props
|
|
if ('h' in processedRecord && processedRecord.h !== undefined) {
|
|
if (!('h' in processedRecord.props) || processedRecord.props.h === undefined) {
|
|
processedRecord.props.h = processedRecord.h
|
|
}
|
|
delete (processedRecord as any).h
|
|
}
|
|
|
|
// Move geo from top-level to props
|
|
if ('geo' in processedRecord && processedRecord.geo !== undefined) {
|
|
if (!('geo' in processedRecord.props) || processedRecord.props.geo === undefined) {
|
|
processedRecord.props.geo = processedRecord.geo
|
|
}
|
|
delete (processedRecord as any).geo
|
|
}
|
|
|
|
// Fix richText structure if it exists (preserve content)
|
|
if (processedRecord.props.richText) {
|
|
if (Array.isArray(processedRecord.props.richText)) {
|
|
processedRecord.props.richText = { content: processedRecord.props.richText, type: 'doc' }
|
|
} else if (typeof processedRecord.props.richText === 'object' && processedRecord.props.richText !== null) {
|
|
if (!processedRecord.props.richText.type) {
|
|
processedRecord.props.richText = { ...processedRecord.props.richText, type: 'doc' }
|
|
}
|
|
if (!processedRecord.props.richText.content) {
|
|
processedRecord.props.richText = { ...processedRecord.props.richText, content: [] }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// CRITICAL: For arrow shapes, preserve text property
|
|
if (processedRecord.type === 'arrow') {
|
|
if ((processedRecord.props as any).text === undefined || (processedRecord.props as any).text === null) {
|
|
(processedRecord.props as any).text = ''
|
|
}
|
|
}
|
|
|
|
// CRITICAL: For line shapes, ensure points structure exists (required by schema)
|
|
if (processedRecord.type === 'line') {
|
|
if ('w' in processedRecord.props) delete (processedRecord.props as any).w
|
|
if ('h' in processedRecord.props) delete (processedRecord.props as any).h
|
|
if (!processedRecord.props.points || typeof processedRecord.props.points !== 'object' || Array.isArray(processedRecord.props.points)) {
|
|
processedRecord.props.points = {
|
|
'a1': { id: 'a1', index: 'a1' as any, x: 0, y: 0 },
|
|
'a2': { id: 'a2', index: 'a2' as any, x: 100, y: 0 }
|
|
}
|
|
}
|
|
}
|
|
|
|
// CRITICAL: For group shapes, remove w/h from props (they cause validation errors)
|
|
if (processedRecord.type === 'group') {
|
|
if ('w' in processedRecord.props) delete (processedRecord.props as any).w
|
|
if ('h' in processedRecord.props) delete (processedRecord.props as any).h
|
|
}
|
|
|
|
// CRITICAL: For image/video shapes, fix crop structure if it exists
|
|
if (processedRecord.type === 'image' || processedRecord.type === 'video') {
|
|
if (processedRecord.props.crop !== null && processedRecord.props.crop !== undefined) {
|
|
if (!processedRecord.props.crop.topLeft || !processedRecord.props.crop.bottomRight) {
|
|
if (processedRecord.props.crop.x !== undefined && processedRecord.props.crop.y !== undefined) {
|
|
processedRecord.props.crop = {
|
|
topLeft: { x: processedRecord.props.crop.x || 0, y: processedRecord.props.crop.y || 0 },
|
|
bottomRight: {
|
|
x: (processedRecord.props.crop.x || 0) + (processedRecord.props.crop.w || 1),
|
|
y: (processedRecord.props.crop.y || 0) + (processedRecord.props.crop.h || 1)
|
|
}
|
|
}
|
|
} else {
|
|
processedRecord.props.crop = {
|
|
topLeft: { x: 0, y: 0 },
|
|
bottomRight: { x: 1, y: 1 }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// CRITICAL: Fix richText structure for note shapes if it exists
|
|
if (processedRecord.type === 'note' && processedRecord.props.richText) {
|
|
if (Array.isArray(processedRecord.props.richText)) {
|
|
processedRecord.props.richText = { content: processedRecord.props.richText, type: 'doc' }
|
|
} else if (typeof processedRecord.props.richText === 'object' && processedRecord.props.richText !== null) {
|
|
if (!processedRecord.props.richText.type) {
|
|
processedRecord.props.richText = { ...processedRecord.props.richText, type: 'doc' }
|
|
}
|
|
if (!processedRecord.props.richText.content) {
|
|
processedRecord.props.richText = { ...processedRecord.props.richText, content: [] }
|
|
}
|
|
}
|
|
}
|
|
|
|
// Ensure props object exists for all shapes
|
|
if (!processedRecord.props) processedRecord.props = {}
|
|
|
|
// Preserve original data structure - only move properties when TLDraw validation requires it
|
|
// Arrow shapes don't have w/h properties, so remove them if present
|
|
if (processedRecord.type === 'arrow') {
|
|
if ('w' in processedRecord) {
|
|
console.log(`Removing invalid w property from arrow shape ${processedRecord.id}`)
|
|
delete (processedRecord as any).w
|
|
}
|
|
if ('h' in processedRecord) {
|
|
console.log(`Removing invalid h property from arrow shape ${processedRecord.id}`)
|
|
delete (processedRecord as any).h
|
|
}
|
|
}
|
|
// For other shapes, preserve the original structure - don't move w/h unless validation fails
|
|
|
|
// Handle arrow shapes specially - ensure they have required properties
|
|
if (processedRecord.type === 'arrow') {
|
|
// Ensure required arrow properties exist
|
|
if (!processedRecord.props.kind) processedRecord.props.kind = 'line'
|
|
if (!processedRecord.props.labelColor) processedRecord.props.labelColor = 'black'
|
|
if (!processedRecord.props.color) processedRecord.props.color = 'black'
|
|
if (!processedRecord.props.fill) processedRecord.props.fill = 'none'
|
|
if (!processedRecord.props.dash) processedRecord.props.dash = 'draw'
|
|
if (!processedRecord.props.size) processedRecord.props.size = 'm'
|
|
if (!processedRecord.props.arrowheadStart) processedRecord.props.arrowheadStart = 'none'
|
|
if (!processedRecord.props.arrowheadEnd) processedRecord.props.arrowheadEnd = 'arrow'
|
|
if (!processedRecord.props.font) processedRecord.props.font = 'draw'
|
|
if (!processedRecord.props.start) processedRecord.props.start = { x: 0, y: 0 }
|
|
if (!processedRecord.props.end) processedRecord.props.end = { x: 100, y: 0 }
|
|
if (processedRecord.props.bend === undefined) processedRecord.props.bend = 0
|
|
if (!processedRecord.props.text) processedRecord.props.text = ''
|
|
if (processedRecord.props.labelPosition === undefined) processedRecord.props.labelPosition = 0.5
|
|
if (processedRecord.props.scale === undefined) processedRecord.props.scale = 1
|
|
if (processedRecord.props.elbowMidPoint === undefined) processedRecord.props.elbowMidPoint = 0.5
|
|
|
|
// Remove any invalid properties
|
|
const invalidArrowProps = ['w', 'h', 'geo', 'insets', 'scribbles']
|
|
invalidArrowProps.forEach(prop => {
|
|
if (prop in processedRecord.props) {
|
|
console.log(`Removing invalid prop '${prop}' from arrow shape ${processedRecord.id}`)
|
|
delete (processedRecord.props as any)[prop]
|
|
}
|
|
})
|
|
}
|
|
|
|
// Handle note shapes specially - ensure they have required properties
|
|
if (processedRecord.type === 'note') {
|
|
// Ensure required note properties exist
|
|
if (!processedRecord.props.color) processedRecord.props.color = 'black'
|
|
if (!processedRecord.props.labelColor) processedRecord.props.labelColor = 'black'
|
|
if (!processedRecord.props.size) processedRecord.props.size = 'm'
|
|
if (!processedRecord.props.font) processedRecord.props.font = 'draw'
|
|
if (processedRecord.props.fontSizeAdjustment === undefined) processedRecord.props.fontSizeAdjustment = 0
|
|
if (!processedRecord.props.align) processedRecord.props.align = 'start'
|
|
if (!processedRecord.props.verticalAlign) processedRecord.props.verticalAlign = 'start'
|
|
if (processedRecord.props.growY === undefined) processedRecord.props.growY = 0
|
|
if (!processedRecord.props.url) processedRecord.props.url = ''
|
|
// Note: richText is not required for note shapes
|
|
if (processedRecord.props.scale === undefined) processedRecord.props.scale = 1
|
|
|
|
// Remove any invalid properties
|
|
const invalidNoteProps = ['w', 'h', 'geo', 'insets', 'scribbles']
|
|
invalidNoteProps.forEach(prop => {
|
|
if (prop in processedRecord.props) {
|
|
console.log(`Removing invalid prop '${prop}' from note shape ${processedRecord.id}`)
|
|
delete (processedRecord.props as any)[prop]
|
|
}
|
|
})
|
|
}
|
|
|
|
// Handle text shapes specially - ensure they have required properties
|
|
if (processedRecord.type === 'text') {
|
|
// Ensure required text properties exist (matching default tldraw text shape schema)
|
|
if (!processedRecord.props.color) processedRecord.props.color = 'black'
|
|
if (!processedRecord.props.size) processedRecord.props.size = 'm'
|
|
if (!processedRecord.props.font) processedRecord.props.font = 'draw'
|
|
if (!processedRecord.props.textAlign) processedRecord.props.textAlign = 'start'
|
|
if (processedRecord.props.w === undefined || processedRecord.props.w === null) {
|
|
processedRecord.props.w = 100
|
|
}
|
|
if (processedRecord.props.scale === undefined) processedRecord.props.scale = 1
|
|
if (processedRecord.props.autoSize === undefined) processedRecord.props.autoSize = false
|
|
|
|
// Ensure richText property exists for text shapes
|
|
if (!processedRecord.props.richText) {
|
|
console.log(`🔧 Creating default richText object for text shape ${processedRecord.id}`)
|
|
processedRecord.props.richText = { content: [], type: 'doc' }
|
|
}
|
|
|
|
// Remove any invalid properties (including 'text' property which is not in default schema)
|
|
// Note: richText is actually required for text shapes, so don't remove it
|
|
const invalidTextProps = ['text', 'h', 'geo', 'insets', 'scribbles', 'isMinimized', 'roomUrl', 'roomId', 'align', 'verticalAlign', 'growY', 'url']
|
|
invalidTextProps.forEach(prop => {
|
|
if (prop in processedRecord.props) {
|
|
console.log(`Removing invalid prop '${prop}' from text shape ${processedRecord.id}`)
|
|
delete (processedRecord.props as any)[prop]
|
|
}
|
|
})
|
|
}
|
|
|
|
// Handle draw shapes specially - ensure they have required properties
|
|
if (processedRecord.type === 'draw') {
|
|
// Ensure required draw properties exist
|
|
if (!processedRecord.props.color) processedRecord.props.color = 'black'
|
|
if (!processedRecord.props.fill) processedRecord.props.fill = 'none'
|
|
if (!processedRecord.props.dash) processedRecord.props.dash = 'draw'
|
|
if (!processedRecord.props.size) processedRecord.props.size = 'm'
|
|
|
|
// Validate and fix segments array - this is critical for preventing Polyline2d errors
|
|
if (!processedRecord.props.segments || !Array.isArray(processedRecord.props.segments)) {
|
|
console.log(`🔧 Fixing missing/invalid segments for draw shape ${processedRecord.id}`)
|
|
processedRecord.props.segments = [
|
|
{
|
|
type: "free",
|
|
points: [
|
|
{ x: 0, y: 0, z: 0.5 },
|
|
{ x: 10, y: 10, z: 0.5 }
|
|
]
|
|
}
|
|
]
|
|
} else {
|
|
// Validate each segment in the array
|
|
// Polyline2d requires at least 2 points per segment
|
|
const validSegments = []
|
|
for (let i = 0; i < processedRecord.props.segments.length; i++) {
|
|
const segment = processedRecord.props.segments[i]
|
|
if (segment && typeof segment === 'object' &&
|
|
segment.type &&
|
|
Array.isArray(segment.points) &&
|
|
segment.points.length >= 2) {
|
|
// Validate points in the segment
|
|
const validPoints = segment.points.filter((point: any) =>
|
|
point &&
|
|
typeof point === 'object' &&
|
|
typeof point.x === 'number' &&
|
|
typeof point.y === 'number' &&
|
|
!isNaN(point.x) && !isNaN(point.y)
|
|
)
|
|
// Polyline2d requires at least 2 points
|
|
if (validPoints.length >= 2) {
|
|
validSegments.push({
|
|
type: segment.type,
|
|
points: validPoints
|
|
})
|
|
} else if (validPoints.length === 1) {
|
|
// If only 1 point, duplicate it to create a valid 2-point segment
|
|
console.log(`🔧 Draw shape ${processedRecord.id} segment ${i} has only 1 point, duplicating to create valid segment`)
|
|
validSegments.push({
|
|
type: segment.type,
|
|
points: [validPoints[0], { ...validPoints[0] }]
|
|
})
|
|
}
|
|
}
|
|
}
|
|
|
|
if (validSegments.length === 0) {
|
|
console.log(`🔧 All segments invalid for draw shape ${processedRecord.id}, creating default segment`)
|
|
processedRecord.props.segments = [
|
|
{
|
|
type: "free",
|
|
points: [
|
|
{ x: 0, y: 0, z: 0.5 },
|
|
{ x: 10, y: 10, z: 0.5 }
|
|
]
|
|
}
|
|
]
|
|
} else {
|
|
processedRecord.props.segments = validSegments
|
|
}
|
|
}
|
|
|
|
if (processedRecord.props.isComplete === undefined) processedRecord.props.isComplete = true
|
|
if (processedRecord.props.isClosed === undefined) processedRecord.props.isClosed = false
|
|
if (processedRecord.props.isPen === undefined) processedRecord.props.isPen = false
|
|
if (processedRecord.props.scale === undefined) processedRecord.props.scale = 1
|
|
|
|
// Remove any invalid properties
|
|
const invalidDrawProps = ['w', 'h', 'geo', 'insets', 'scribbles', 'richText']
|
|
invalidDrawProps.forEach(prop => {
|
|
if (prop in processedRecord.props) {
|
|
console.log(`Removing invalid prop '${prop}' from draw shape ${processedRecord.id}`)
|
|
delete (processedRecord.props as any)[prop]
|
|
}
|
|
})
|
|
}
|
|
|
|
// Handle geo shapes specially - ensure geo property is in props where TLDraw expects it
|
|
if (processedRecord.type === 'geo') {
|
|
// Ensure props exists
|
|
if (!processedRecord.props) processedRecord.props = {}
|
|
|
|
// CRITICAL: ALWAYS remove w/h/geo from top level (TLDraw validation fails if they exist at top level)
|
|
// Move w from top level to props (preserve value if not already in props)
|
|
if ('w' in processedRecord) {
|
|
console.log(`🔧 Geo shape fix: Removing w from top level for shape ${processedRecord.id}`)
|
|
if (!('w' in processedRecord.props) || processedRecord.props.w === undefined) {
|
|
processedRecord.props.w = (processedRecord as any).w
|
|
}
|
|
delete (processedRecord as any).w
|
|
}
|
|
|
|
// Move h from top level to props (preserve value if not already in props)
|
|
if ('h' in processedRecord) {
|
|
console.log(`🔧 Geo shape fix: Removing h from top level for shape ${processedRecord.id}`)
|
|
if (!('h' in processedRecord.props) || processedRecord.props.h === undefined) {
|
|
processedRecord.props.h = (processedRecord as any).h
|
|
}
|
|
delete (processedRecord as any).h
|
|
}
|
|
|
|
// Move geo from top level to props (preserve value if not already in props)
|
|
if ('geo' in processedRecord) {
|
|
console.log(`🔧 Geo shape fix: Removing geo from top level for shape ${processedRecord.id}`)
|
|
if (!('geo' in processedRecord.props) || processedRecord.props.geo === undefined) {
|
|
processedRecord.props.geo = (processedRecord as any).geo
|
|
}
|
|
delete (processedRecord as any).geo
|
|
}
|
|
|
|
// Ensure geo property exists in props with a default value
|
|
if (!processedRecord.props.geo) {
|
|
processedRecord.props.geo = 'rectangle'
|
|
}
|
|
|
|
// Ensure w/h exist in props with defaults if missing
|
|
if (!processedRecord.props) processedRecord.props = {}
|
|
if (processedRecord.props.w === undefined || processedRecord.props.w === null) {
|
|
processedRecord.props.w = 100
|
|
}
|
|
if (processedRecord.props.h === undefined || processedRecord.props.h === null) {
|
|
processedRecord.props.h = 100
|
|
}
|
|
if (processedRecord.props.geo === undefined || processedRecord.props.geo === null) {
|
|
processedRecord.props.geo = 'rectangle'
|
|
}
|
|
if (!processedRecord.props.dash) processedRecord.props.dash = 'draw'
|
|
if (!processedRecord.props.growY) processedRecord.props.growY = 0
|
|
if (!processedRecord.props.url) processedRecord.props.url = ''
|
|
if (!processedRecord.props.scale) processedRecord.props.scale = 1
|
|
if (!processedRecord.props.color) processedRecord.props.color = 'black'
|
|
if (!processedRecord.props.labelColor) processedRecord.props.labelColor = 'black'
|
|
if (!processedRecord.props.fill) processedRecord.props.fill = 'none'
|
|
if (!processedRecord.props.size) processedRecord.props.size = 'm'
|
|
if (!processedRecord.props.font) processedRecord.props.font = 'draw'
|
|
if (!processedRecord.props.align) processedRecord.props.align = 'middle'
|
|
if (!processedRecord.props.verticalAlign) processedRecord.props.verticalAlign = 'middle'
|
|
// Note: richText IS required for geo shapes in TLDraw
|
|
if (!processedRecord.props.richText) processedRecord.props.richText = { content: [], type: 'doc' }
|
|
// Ensure basic geo properties exist
|
|
if (!processedRecord.props.geo) processedRecord.props.geo = 'rectangle'
|
|
if (!processedRecord.props.fill) processedRecord.props.fill = 'solid'
|
|
if (!processedRecord.props.color) processedRecord.props.color = 'white'
|
|
|
|
// Validate geo property
|
|
const validGeoTypes = [
|
|
'cloud', 'rectangle', 'ellipse', 'triangle', 'diamond', 'pentagon',
|
|
'hexagon', 'octagon', 'star', 'rhombus', 'rhombus-2', 'oval',
|
|
'trapezoid', 'arrow-right', 'arrow-left', 'arrow-up', 'arrow-down',
|
|
'x-box', 'check-box', 'heart'
|
|
]
|
|
|
|
if (!validGeoTypes.includes(processedRecord.props.geo)) {
|
|
console.log(`Setting valid geo property for shape ${processedRecord.id} (was: ${processedRecord.props.geo})`)
|
|
processedRecord.props.geo = 'rectangle'
|
|
}
|
|
|
|
// Remove invalid properties from props (only log if actually removing)
|
|
const invalidProps = ['insets', 'scribbles']
|
|
invalidProps.forEach(prop => {
|
|
if (prop in processedRecord.props) {
|
|
delete (processedRecord.props as any)[prop]
|
|
}
|
|
})
|
|
}
|
|
|
|
// Handle rich text content that might be undefined or invalid
|
|
// Only process richText for shapes that actually use it (text, note, geo, etc.)
|
|
// CRITICAL: geo shapes (rectangles) can legitimately have richText in TLDraw
|
|
if (processedRecord.type === 'text' || processedRecord.type === 'note' || processedRecord.type === 'geo') {
|
|
if (processedRecord.props && processedRecord.props.richText !== undefined) {
|
|
if (!Array.isArray(processedRecord.props.richText) && typeof processedRecord.props.richText !== 'object') {
|
|
console.warn('Fixing invalid richText property for shape:', processedRecord.id, 'type:', processedRecord.type, 'was:', typeof processedRecord.props.richText)
|
|
processedRecord.props.richText = { content: [], type: 'doc' }
|
|
} else if (Array.isArray(processedRecord.props.richText)) {
|
|
// If it's an array, convert to proper richText object structure
|
|
console.log(`🔧 Converting richText array to object for shape ${processedRecord.id}`)
|
|
processedRecord.props.richText = { content: processedRecord.props.richText, type: 'doc' }
|
|
}
|
|
} else {
|
|
// Create default empty richText object for text shapes (but not for geo/note unless they already have it)
|
|
if (processedRecord.type === 'text') {
|
|
if (!processedRecord.props) processedRecord.props = {}
|
|
processedRecord.props.richText = { content: [], type: 'doc' }
|
|
}
|
|
}
|
|
} else if (processedRecord.props && processedRecord.props.richText !== undefined) {
|
|
// Remove richText from shapes that don't use it (but preserve for geo/note which are handled above)
|
|
delete (processedRecord.props as any).richText
|
|
}
|
|
|
|
// Remove invalid properties that cause validation errors (after moving geo properties)
|
|
const invalidProperties = [
|
|
'insets', 'scribbles', 'duplicateProps', 'isAspectRatioLocked',
|
|
'isFlippedHorizontal', 'isFlippedVertical', 'isFrozen', 'isSnappable',
|
|
'isTransparent', 'isVisible', 'isZIndexLocked', 'isHidden'
|
|
]
|
|
invalidProperties.forEach(prop => {
|
|
if (prop in processedRecord) {
|
|
delete (processedRecord as any)[prop]
|
|
}
|
|
})
|
|
|
|
// Custom shapes are supported natively by our custom schema - no conversion needed!
|
|
// Just ensure they have the required properties for their type
|
|
if (processedRecord.type === 'VideoChat' || processedRecord.type === 'ChatBox' ||
|
|
processedRecord.type === 'Embed' || processedRecord.type === 'SharedPiano' ||
|
|
processedRecord.type === 'MycrozineTemplate' || processedRecord.type === 'Slide') {
|
|
// These are embed-like shapes - ensure they have basic properties
|
|
if (!processedRecord.props) processedRecord.props = {}
|
|
if (processedRecord.props.w === undefined || processedRecord.props.w === null) {
|
|
processedRecord.props.w = 300
|
|
}
|
|
if (processedRecord.props.h === undefined || processedRecord.props.h === null) {
|
|
processedRecord.props.h = 200
|
|
}
|
|
console.log(`🔧 Ensured embed-like shape ${processedRecord.type} has required properties:`, processedRecord.props)
|
|
} else if (processedRecord.type === 'Prompt' || processedRecord.type === 'Transcription' ||
|
|
processedRecord.type === 'Markdown') {
|
|
// These are text-like shapes - ensure they have text properties
|
|
if (!processedRecord.props) processedRecord.props = {}
|
|
if (processedRecord.props.w === undefined || processedRecord.props.w === null) {
|
|
processedRecord.props.w = 300
|
|
}
|
|
|
|
// Convert value property to richText if it exists (for Prompt shapes)
|
|
if (processedRecord.props.value && !processedRecord.props.richText) {
|
|
processedRecord.props.richText = {
|
|
content: [
|
|
{
|
|
type: 'paragraph',
|
|
content: [
|
|
{
|
|
type: 'text',
|
|
text: processedRecord.props.value
|
|
}
|
|
]
|
|
}
|
|
],
|
|
type: 'doc'
|
|
}
|
|
console.log(`🔧 Converted value to richText for ${processedRecord.type} shape ${processedRecord.id}`)
|
|
}
|
|
|
|
if (!processedRecord.props.richText) {
|
|
processedRecord.props.richText = { content: [], type: 'doc' }
|
|
}
|
|
console.log(`🔧 Ensured text-like shape ${processedRecord.type} has required properties:`, processedRecord.props)
|
|
}
|
|
|
|
// Validate that the shape type is supported by our schema
|
|
const validCustomShapes = ['ObsNote', 'VideoChat', 'Transcription', 'SharedPiano', 'Prompt', 'ChatBox', 'Embed', 'Markdown', 'MycrozineTemplate', 'Slide', 'FathomTranscript', 'Holon', 'ObsidianBrowser', 'HolonBrowser', 'FathomMeetingsBrowser', 'LocationShare']
|
|
const validDefaultShapes = ['arrow', 'bookmark', 'draw', 'embed', 'frame', 'geo', 'group', 'highlight', 'image', 'line', 'note', 'text', 'video']
|
|
const allValidShapes = [...validCustomShapes, ...validDefaultShapes]
|
|
|
|
if (!allValidShapes.includes(processedRecord.type)) {
|
|
console.log(`🔧 Unknown shape type ${processedRecord.type}, converting to text shape for shape:`, processedRecord.id)
|
|
processedRecord.type = 'text'
|
|
if (!processedRecord.props) processedRecord.props = {}
|
|
// Preserve existing props and only set defaults for missing required text shape properties
|
|
// This prevents losing metadata or other valid properties
|
|
processedRecord.props = {
|
|
...processedRecord.props, // Preserve existing props
|
|
w: processedRecord.props.w || 300,
|
|
color: processedRecord.props.color || 'black',
|
|
size: processedRecord.props.size || 'm',
|
|
font: processedRecord.props.font || 'draw',
|
|
textAlign: processedRecord.props.textAlign || 'start',
|
|
autoSize: processedRecord.props.autoSize !== undefined ? processedRecord.props.autoSize : false,
|
|
scale: processedRecord.props.scale || 1,
|
|
richText: processedRecord.props.richText || { content: [], type: 'doc' }
|
|
}
|
|
// Remove invalid properties for text shapes (but preserve meta and other valid top-level properties)
|
|
const invalidTextProps = ['h', 'geo', 'insets', 'scribbles', 'isMinimized', 'roomUrl', 'text', 'align', 'verticalAlign', 'growY', 'url']
|
|
invalidTextProps.forEach(prop => {
|
|
if (prop in processedRecord.props) {
|
|
delete (processedRecord.props as any)[prop]
|
|
}
|
|
})
|
|
console.log(`🔧 Converted unknown shape to text:`, processedRecord.props)
|
|
}
|
|
|
|
// Universal shape validation - ensure any shape type can be imported
|
|
// CRITICAL: Fix image and video shapes FIRST - ensure crop has correct structure
|
|
// Tldraw expects crop to be { topLeft: { x, y }, bottomRight: { x, y } } or null
|
|
if (processedRecord.type === 'image' || processedRecord.type === 'video') {
|
|
// Ensure props exists for image/video shapes
|
|
if (!processedRecord.props) {
|
|
processedRecord.props = {}
|
|
}
|
|
// Fix crop structure
|
|
if (processedRecord.props.crop !== null && processedRecord.props.crop !== undefined) {
|
|
// If crop exists but has wrong structure, fix it
|
|
if (!processedRecord.props.crop.topLeft || !processedRecord.props.crop.bottomRight) {
|
|
// Convert old format { x, y, w, h } to new format, or set default
|
|
if (processedRecord.props.crop.x !== undefined && processedRecord.props.crop.y !== undefined) {
|
|
// Old format: convert to new format
|
|
processedRecord.props.crop = {
|
|
topLeft: { x: processedRecord.props.crop.x || 0, y: processedRecord.props.crop.y || 0 },
|
|
bottomRight: {
|
|
x: (processedRecord.props.crop.x || 0) + (processedRecord.props.crop.w || 1),
|
|
y: (processedRecord.props.crop.y || 0) + (processedRecord.props.crop.h || 1)
|
|
}
|
|
}
|
|
} else {
|
|
// Invalid structure: set to default (full crop)
|
|
processedRecord.props.crop = {
|
|
topLeft: { x: 0, y: 0 },
|
|
bottomRight: { x: 1, y: 1 }
|
|
}
|
|
}
|
|
} else {
|
|
// Ensure topLeft and bottomRight are proper objects
|
|
if (!processedRecord.props.crop.topLeft || typeof processedRecord.props.crop.topLeft !== 'object') {
|
|
processedRecord.props.crop.topLeft = { x: 0, y: 0 }
|
|
}
|
|
if (!processedRecord.props.crop.bottomRight || typeof processedRecord.props.crop.bottomRight !== 'object') {
|
|
processedRecord.props.crop.bottomRight = { x: 1, y: 1 }
|
|
}
|
|
}
|
|
} else {
|
|
// Crop is null/undefined: set to null (no crop)
|
|
processedRecord.props.crop = null
|
|
}
|
|
}
|
|
|
|
// CRITICAL: Fix line shapes - ensure valid points and remove invalid w/h properties
|
|
if (processedRecord.type === 'line') {
|
|
if (!processedRecord.props) {
|
|
processedRecord.props = {}
|
|
}
|
|
// Line shapes should NOT have w or h properties
|
|
if ('w' in processedRecord.props) {
|
|
console.log(`🔧 Universal fix: Removing invalid w property from line shape ${processedRecord.id}`)
|
|
delete processedRecord.props.w
|
|
}
|
|
if ('h' in processedRecord.props) {
|
|
console.log(`🔧 Universal fix: Removing invalid h property from line shape ${processedRecord.id}`)
|
|
delete processedRecord.props.h
|
|
}
|
|
|
|
// Line shapes REQUIRE points property: Record<string, { id: string, index: IndexKey, x: number, y: number }>
|
|
if (!processedRecord.props.points || typeof processedRecord.props.points !== 'object' || Array.isArray(processedRecord.props.points)) {
|
|
console.log(`🔧 Universal fix: Creating default points for line shape ${processedRecord.id}`)
|
|
// Create default points with at least 2 points
|
|
const point1 = { id: 'a1', index: 'a1' as any, x: 0, y: 0 }
|
|
const point2 = { id: 'a2', index: 'a2' as any, x: 100, y: 0 }
|
|
processedRecord.props.points = {
|
|
'a1': point1,
|
|
'a2': point2
|
|
}
|
|
} else {
|
|
// Validate and fix existing points
|
|
const validPoints: Record<string, { id: string, index: any, x: number, y: number }> = {}
|
|
let pointIndex = 0
|
|
const indices = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a7', 'a8', 'a9', 'a10']
|
|
|
|
for (const [key, point] of Object.entries(processedRecord.props.points)) {
|
|
if (point && typeof point === 'object' &&
|
|
typeof (point as any).x === 'number' &&
|
|
typeof (point as any).y === 'number' &&
|
|
!isNaN((point as any).x) && !isNaN((point as any).y)) {
|
|
const index = indices[pointIndex] || `a${pointIndex + 1}`
|
|
validPoints[index] = {
|
|
id: index,
|
|
index: index as any,
|
|
x: (point as any).x,
|
|
y: (point as any).y
|
|
}
|
|
pointIndex++
|
|
}
|
|
}
|
|
|
|
if (Object.keys(validPoints).length === 0) {
|
|
// No valid points, create default
|
|
console.log(`🔧 Universal fix: No valid points found for line shape ${processedRecord.id}, creating default points`)
|
|
processedRecord.props.points = {
|
|
'a1': { id: 'a1', index: 'a1' as any, x: 0, y: 0 },
|
|
'a2': { id: 'a2', index: 'a2' as any, x: 100, y: 0 }
|
|
}
|
|
} else if (Object.keys(validPoints).length === 1) {
|
|
// Only one point, add a second one
|
|
const firstPoint = Object.values(validPoints)[0]
|
|
const secondIndex = indices[1] || 'a2'
|
|
validPoints[secondIndex] = {
|
|
id: secondIndex,
|
|
index: secondIndex as any,
|
|
x: firstPoint.x + 100,
|
|
y: firstPoint.y
|
|
}
|
|
processedRecord.props.points = validPoints
|
|
} else {
|
|
processedRecord.props.points = validPoints
|
|
}
|
|
}
|
|
|
|
// Ensure other required line shape properties exist
|
|
if (!processedRecord.props.color) processedRecord.props.color = 'black'
|
|
if (!processedRecord.props.dash) processedRecord.props.dash = 'draw'
|
|
if (!processedRecord.props.size) processedRecord.props.size = 'm'
|
|
if (!processedRecord.props.spline) processedRecord.props.spline = 'line'
|
|
if (processedRecord.props.scale === undefined || processedRecord.props.scale === null) {
|
|
processedRecord.props.scale = 1
|
|
}
|
|
}
|
|
|
|
// CRITICAL: Fix group shapes - remove invalid w/h properties
|
|
if (processedRecord.type === 'group') {
|
|
if (!processedRecord.props) {
|
|
processedRecord.props = {}
|
|
}
|
|
// Group shapes should NOT have w or h properties
|
|
if ('w' in processedRecord.props) {
|
|
console.log(`🔧 Universal fix: Removing invalid w property from group shape ${processedRecord.id}`)
|
|
delete processedRecord.props.w
|
|
}
|
|
if ('h' in processedRecord.props) {
|
|
console.log(`🔧 Universal fix: Removing invalid h property from group shape ${processedRecord.id}`)
|
|
delete processedRecord.props.h
|
|
}
|
|
}
|
|
|
|
if (processedRecord.props) {
|
|
|
|
// Fix any richText issues for text shapes only
|
|
if (processedRecord.type === 'text' && processedRecord.props.richText !== undefined) {
|
|
if (!Array.isArray(processedRecord.props.richText)) {
|
|
console.log(`🔧 Universal fix: Converting richText to proper object for text shape ${processedRecord.id}`)
|
|
processedRecord.props.richText = { content: [], type: 'doc' }
|
|
} else {
|
|
// Convert array to proper object structure
|
|
console.log(`🔧 Universal fix: Converting richText array to object for text shape ${processedRecord.id}`)
|
|
processedRecord.props.richText = { content: processedRecord.props.richText, type: 'doc' }
|
|
}
|
|
}
|
|
|
|
// Special handling for geo shapes
|
|
if (processedRecord.type === 'geo') {
|
|
// Geo shapes should have richText property but not text property
|
|
if ('text' in processedRecord.props) {
|
|
console.log(`🔧 Removing invalid text property from geo shape ${processedRecord.id}`)
|
|
delete processedRecord.props.text
|
|
}
|
|
|
|
// Ensure richText property exists and is properly structured for geo shapes
|
|
if (!processedRecord.props.richText) {
|
|
console.log(`🔧 Adding missing richText property for geo shape ${processedRecord.id}`)
|
|
processedRecord.props.richText = { content: [], type: 'doc' }
|
|
} else if (Array.isArray(processedRecord.props.richText)) {
|
|
console.log(`🔧 Converting richText array to object for geo shape ${processedRecord.id}`)
|
|
processedRecord.props.richText = { content: processedRecord.props.richText, type: 'doc' }
|
|
} else if (typeof processedRecord.props.richText !== 'object' || processedRecord.props.richText === null) {
|
|
console.log(`🔧 Fixing invalid richText structure for geo shape ${processedRecord.id}`)
|
|
processedRecord.props.richText = { content: [], type: 'doc' }
|
|
} else if (!processedRecord.props.richText.content) {
|
|
// If richText exists but content is missing, preserve the rest and add empty content
|
|
console.log(`🔧 Adding missing content to richText for geo shape ${processedRecord.id}`)
|
|
processedRecord.props.richText = {
|
|
...processedRecord.props.richText,
|
|
content: processedRecord.props.richText.content || [],
|
|
type: processedRecord.props.richText.type || 'doc'
|
|
}
|
|
}
|
|
|
|
// Ensure geo shape has proper structure
|
|
if (!processedRecord.props.geo) {
|
|
processedRecord.props.geo = 'rectangle'
|
|
}
|
|
if (processedRecord.props.w === undefined || processedRecord.props.w === null) {
|
|
processedRecord.props.w = 100
|
|
}
|
|
if (processedRecord.props.h === undefined || processedRecord.props.h === null) {
|
|
processedRecord.props.h = 100
|
|
}
|
|
|
|
// Fix dash property - ensure it's a valid value
|
|
if (processedRecord.props.dash === '' || processedRecord.props.dash === undefined) {
|
|
processedRecord.props.dash = 'solid'
|
|
} else if (!['draw', 'solid', 'dashed', 'dotted'].includes(processedRecord.props.dash)) {
|
|
console.log(`🔧 Fixing invalid dash value '${processedRecord.props.dash}' for geo shape:`, processedRecord.id)
|
|
processedRecord.props.dash = 'solid'
|
|
}
|
|
|
|
// Fix scale property - ensure it's a number
|
|
if (processedRecord.props.scale === undefined || processedRecord.props.scale === null) {
|
|
processedRecord.props.scale = 1
|
|
} else if (typeof processedRecord.props.scale !== 'number') {
|
|
console.log(`🔧 Fixing invalid scale value '${processedRecord.props.scale}' for geo shape:`, processedRecord.id)
|
|
processedRecord.props.scale = 1
|
|
}
|
|
|
|
// Remove invalid properties for geo shapes (including insets) - but NOT richText as it's required
|
|
const invalidGeoOtherProps = ['transcript', 'isTranscribing', 'isPaused', 'isEditing', 'roomUrl', 'roomId', 'prompt', 'value', 'agentBinding', 'isMinimized', 'noteId', 'title', 'content', 'tags', 'showPreview', 'backgroundColor', 'textColor', 'editingContent', 'vaultName', 'insets']
|
|
invalidGeoOtherProps.forEach(prop => {
|
|
if (prop in processedRecord.props) {
|
|
console.log(`🔧 Removing invalid ${prop} property from geo shape:`, processedRecord.id)
|
|
delete processedRecord.props[prop]
|
|
}
|
|
})
|
|
}
|
|
|
|
// Fix note shapes - ensure richText exists and remove invalid w/h properties
|
|
if (processedRecord.type === 'note') {
|
|
// Note shapes REQUIRE richText property (it's part of the schema)
|
|
if (!processedRecord.props.richText || typeof processedRecord.props.richText !== 'object') {
|
|
console.log(`🔧 Adding missing richText property for note shape ${processedRecord.id}`)
|
|
processedRecord.props.richText = { content: [], type: 'doc' }
|
|
}
|
|
if ('w' in processedRecord.props) {
|
|
console.log(`🔧 Removing invalid w property from note shape:`, processedRecord.id)
|
|
delete processedRecord.props.w
|
|
}
|
|
if ('h' in processedRecord.props) {
|
|
console.log(`🔧 Removing invalid h property from note shape:`, processedRecord.id)
|
|
delete processedRecord.props.h
|
|
}
|
|
}
|
|
|
|
// Fix text shapes - remove h property
|
|
if (processedRecord.type === 'text') {
|
|
if ('h' in processedRecord.props) {
|
|
console.log(`🔧 Removing invalid h property from text shape:`, processedRecord.id)
|
|
delete processedRecord.props.h
|
|
}
|
|
}
|
|
|
|
// Fix embed shapes - ensure required properties and remove invalid ones
|
|
if (processedRecord.type === 'embed') {
|
|
if (!processedRecord.props.url) {
|
|
console.log(`🔧 Adding missing url property for embed shape:`, processedRecord.id)
|
|
processedRecord.props.url = ''
|
|
}
|
|
if (!processedRecord.props.w) {
|
|
processedRecord.props.w = 400
|
|
}
|
|
if (!processedRecord.props.h) {
|
|
processedRecord.props.h = 300
|
|
}
|
|
|
|
// Remove invalid properties for embed shapes
|
|
const invalidEmbedProps = ['isMinimized', 'roomUrl', 'roomId', 'color', 'fill', 'dash', 'size', 'text', 'font', 'align', 'verticalAlign', 'growY', 'richText']
|
|
invalidEmbedProps.forEach(prop => {
|
|
if (prop in processedRecord.props) {
|
|
console.log(`🔧 Removing invalid prop '${prop}' from embed shape ${processedRecord.id}`)
|
|
delete (processedRecord.props as any)[prop]
|
|
}
|
|
})
|
|
}
|
|
|
|
// Ensure all required properties exist for any shape type (except arrow, draw, line, text, note, and group)
|
|
if (processedRecord.type !== 'arrow' && processedRecord.type !== 'draw' && processedRecord.type !== 'line' && processedRecord.type !== 'text' && processedRecord.type !== 'note' && processedRecord.type !== 'group') {
|
|
const requiredProps = ['w', 'h']
|
|
requiredProps.forEach(prop => {
|
|
if (processedRecord.props[prop] === undefined) {
|
|
console.log(`🔧 Universal fix: Adding missing ${prop} for shape ${processedRecord.id} (type: ${processedRecord.type})`)
|
|
if (prop === 'w' && processedRecord.props.w === undefined) processedRecord.props.w = 100
|
|
if (prop === 'h' && processedRecord.props.h === undefined) processedRecord.props.h = 100
|
|
}
|
|
})
|
|
} else if (processedRecord.type === 'text') {
|
|
// Text shapes only need w, not h
|
|
if (processedRecord.props.w === undefined || processedRecord.props.w === null) {
|
|
console.log(`🔧 Universal fix: Adding missing w for text shape ${processedRecord.id}`)
|
|
processedRecord.props.w = 100
|
|
}
|
|
}
|
|
|
|
// Clean up any null/undefined values in props (but preserve required objects like crop for images/videos)
|
|
// IMPORTANT: crop is already set above for image/video shapes, so we must skip it here
|
|
Object.keys(processedRecord.props).forEach(propKey => {
|
|
// Skip crop for image/video shapes - it must be an object, not undefined
|
|
if ((processedRecord.type === 'image' || processedRecord.type === 'video') && propKey === 'crop') {
|
|
return // crop is required and already set above
|
|
}
|
|
if (processedRecord.props[propKey] === null || processedRecord.props[propKey] === undefined) {
|
|
console.log(`🔧 Universal fix: Removing null/undefined prop ${propKey} from shape ${processedRecord.id}`)
|
|
delete processedRecord.props[propKey]
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
// Fix instance records
|
|
if (processedRecord.typeName === 'instance') {
|
|
if (!processedRecord.meta) processedRecord.meta = {}
|
|
if ('insets' in processedRecord && !Array.isArray(processedRecord.insets)) {
|
|
processedRecord.insets = [false, false, false, false]
|
|
}
|
|
// Always ensure scribbles is an array, even if undefined
|
|
if (!Array.isArray(processedRecord.scribbles)) {
|
|
processedRecord.scribbles = []
|
|
}
|
|
// Always ensure duplicateProps is an object with required properties
|
|
if (typeof processedRecord.duplicateProps !== 'object' || processedRecord.duplicateProps === null) {
|
|
processedRecord.duplicateProps = {}
|
|
}
|
|
// Ensure duplicateProps has the required shapeIds array
|
|
if (!Array.isArray(processedRecord.duplicateProps.shapeIds)) {
|
|
processedRecord.duplicateProps.shapeIds = []
|
|
}
|
|
// Ensure duplicateProps has the required offset object
|
|
if (typeof processedRecord.duplicateProps.offset !== 'object' || processedRecord.duplicateProps.offset === null) {
|
|
processedRecord.duplicateProps.offset = { x: 0, y: 0 }
|
|
}
|
|
}
|
|
|
|
return processedRecord
|
|
})
|
|
|
|
console.log(`Processed ${processedRecords.length} records for loading`)
|
|
|
|
// Debug: Log shape structures before loading
|
|
const shapesToLoad = processedRecords.filter(r => r.typeName === 'shape')
|
|
console.log(`📊 About to load ${shapesToLoad.length} shapes into store`)
|
|
|
|
if (shapesToLoad.length > 0) {
|
|
console.log("📊 Sample processed shape structure:", {
|
|
id: shapesToLoad[0].id,
|
|
type: shapesToLoad[0].type,
|
|
x: shapesToLoad[0].x,
|
|
y: shapesToLoad[0].y,
|
|
props: shapesToLoad[0].props,
|
|
parentId: shapesToLoad[0].parentId,
|
|
allKeys: Object.keys(shapesToLoad[0])
|
|
})
|
|
|
|
// Log all shapes with their positions
|
|
console.log("📊 All processed shapes:", shapesToLoad.map(s => ({
|
|
id: s.id,
|
|
type: s.type,
|
|
x: s.x,
|
|
y: s.y,
|
|
hasProps: !!s.props,
|
|
propsW: s.props?.w,
|
|
propsH: s.props?.h,
|
|
parentId: s.parentId
|
|
})))
|
|
}
|
|
|
|
// Load records into store
|
|
if (processedRecords.length > 0) {
|
|
console.log("Attempting to load records into store...")
|
|
|
|
// Final validation: ensure all shapes are properly structured
|
|
processedRecords.forEach(record => {
|
|
if (record.typeName === 'shape') {
|
|
// Final check for geo shapes - ALWAYS remove w/h/geo from top level (even if in props)
|
|
if (record.type === 'geo') {
|
|
// ALWAYS delete w from top level (TLDraw validation fails if it exists at top level)
|
|
if ('w' in record) {
|
|
console.log(`🔧 FINAL PRE-STORE FIX: Removing w from top level for geo shape ${record.id}`)
|
|
if (!record.props) record.props = {}
|
|
if (!('w' in record.props) || record.props.w === undefined) {
|
|
record.props.w = (record as any).w
|
|
}
|
|
delete (record as any).w
|
|
}
|
|
// ALWAYS delete h from top level
|
|
if ('h' in record) {
|
|
console.log(`🔧 FINAL PRE-STORE FIX: Removing h from top level for geo shape ${record.id}`)
|
|
if (!record.props) record.props = {}
|
|
if (!('h' in record.props) || record.props.h === undefined) {
|
|
record.props.h = (record as any).h
|
|
}
|
|
delete (record as any).h
|
|
}
|
|
// ALWAYS delete geo from top level
|
|
if ('geo' in record) {
|
|
console.log(`🔧 FINAL PRE-STORE FIX: Removing geo from top level for geo shape ${record.id}`)
|
|
if (!record.props) record.props = {}
|
|
if (!('geo' in record.props) || record.props.geo === undefined) {
|
|
record.props.geo = (record as any).geo
|
|
}
|
|
delete (record as any).geo
|
|
}
|
|
}
|
|
|
|
// Ensure text shapes have richText
|
|
if (record.type === 'text') {
|
|
if (!record.props) {
|
|
record.props = {}
|
|
}
|
|
if (!record.props.richText) {
|
|
console.log(`🔧 Final fix: Adding richText to text shape ${record.id}`)
|
|
record.props.richText = { content: [], type: 'doc' }
|
|
}
|
|
}
|
|
}
|
|
})
|
|
|
|
try {
|
|
store.mergeRemoteChanges(() => {
|
|
// CRITICAL: Final safety check - ensure no geo shapes have w/h/geo at top level
|
|
// Note: obsidian_vault records are already filtered out above
|
|
const sanitizedRecords = processedRecords.map(record => {
|
|
if (record.typeName === 'shape' && record.type === 'geo') {
|
|
const sanitized = { ...record }
|
|
// ALWAYS remove from top level if present
|
|
if ('w' in sanitized) {
|
|
console.log(`🔧 LAST-CHANCE FIX: Removing w from top level for geo shape ${sanitized.id}`)
|
|
if (!sanitized.props) sanitized.props = {}
|
|
if (!('w' in sanitized.props) || sanitized.props.w === undefined) {
|
|
sanitized.props.w = (sanitized as any).w
|
|
}
|
|
delete (sanitized as any).w
|
|
}
|
|
if ('h' in sanitized) {
|
|
console.log(`🔧 LAST-CHANCE FIX: Removing h from top level for geo shape ${sanitized.id}`)
|
|
if (!sanitized.props) sanitized.props = {}
|
|
if (!('h' in sanitized.props) || sanitized.props.h === undefined) {
|
|
sanitized.props.h = (sanitized as any).h
|
|
}
|
|
delete (sanitized as any).h
|
|
}
|
|
if ('geo' in sanitized) {
|
|
console.log(`🔧 LAST-CHANCE FIX: Removing geo from top level for geo shape ${sanitized.id}`)
|
|
if (!sanitized.props) sanitized.props = {}
|
|
if (!('geo' in sanitized.props) || sanitized.props.geo === undefined) {
|
|
sanitized.props.geo = (sanitized as any).geo
|
|
}
|
|
delete (sanitized as any).geo
|
|
}
|
|
return sanitized
|
|
}
|
|
return record
|
|
})
|
|
|
|
// Put TLDraw records into store
|
|
if (sanitizedRecords.length > 0) {
|
|
store.put(sanitizedRecords)
|
|
}
|
|
})
|
|
console.log("Successfully loaded all records into store")
|
|
} catch (error) {
|
|
console.error("Error loading records into store:", error)
|
|
// Try loading records one by one to identify problematic ones
|
|
console.log("Attempting to load records one by one...")
|
|
let successCount = 0
|
|
const failedRecords = []
|
|
|
|
for (const record of processedRecords) {
|
|
// Final validation for individual record: ensure text shapes have richText
|
|
if (record.type === 'text') {
|
|
if (!record.props) {
|
|
record.props = {}
|
|
}
|
|
if (!record.props.richText) {
|
|
console.log(`🔧 Individual fix: Adding richText to text shape ${record.id}`)
|
|
record.props.richText = { content: [], type: 'doc' }
|
|
}
|
|
}
|
|
|
|
try {
|
|
// CRITICAL: Final validation before putting record into store
|
|
if (record.typeName === 'shape' && record.type === 'geo') {
|
|
// ALWAYS remove w/h/geo from top level (TLDraw validation fails if they exist at top level)
|
|
if ('w' in record) {
|
|
console.log(`🔧 INDIVIDUAL PRE-STORE FIX: Removing w from top level for geo shape ${record.id}`)
|
|
if (!record.props) record.props = {}
|
|
if (!('w' in record.props) || record.props.w === undefined) {
|
|
record.props.w = (record as any).w
|
|
}
|
|
delete (record as any).w
|
|
}
|
|
if ('h' in record) {
|
|
console.log(`🔧 INDIVIDUAL PRE-STORE FIX: Removing h from top level for geo shape ${record.id}`)
|
|
if (!record.props) record.props = {}
|
|
if (!('h' in record.props) || record.props.h === undefined) {
|
|
record.props.h = (record as any).h
|
|
}
|
|
delete (record as any).h
|
|
}
|
|
if ('geo' in record) {
|
|
console.log(`🔧 INDIVIDUAL PRE-STORE FIX: Removing geo from top level for geo shape ${record.id}`)
|
|
if (!record.props) record.props = {}
|
|
if (!('geo' in record.props) || record.props.geo === undefined) {
|
|
record.props.geo = (record as any).geo
|
|
}
|
|
delete (record as any).geo
|
|
}
|
|
|
|
// Ensure geo property exists in props
|
|
if (!record.props) record.props = {}
|
|
if (!record.props.geo) {
|
|
record.props.geo = 'rectangle'
|
|
}
|
|
}
|
|
|
|
// CRITICAL: Final safety check - ensure no geo shapes have w/h/geo at top level
|
|
let recordToPut = record
|
|
if (record.typeName === 'shape' && record.type === 'geo') {
|
|
// Store values before removing from top level
|
|
const wValue = 'w' in record ? (record as any).w : undefined
|
|
const hValue = 'h' in record ? (record as any).h : undefined
|
|
const geoValue = 'geo' in record ? (record as any).geo : undefined
|
|
|
|
// Create cleaned record without w/h/geo at top level
|
|
const cleaned: any = {}
|
|
for (const key in record) {
|
|
if (key !== 'w' && key !== 'h' && key !== 'geo') {
|
|
cleaned[key] = (record as any)[key]
|
|
}
|
|
}
|
|
|
|
// Ensure props exists and move values there if needed
|
|
if (!cleaned.props) cleaned.props = {}
|
|
if (wValue !== undefined && (!('w' in cleaned.props) || cleaned.props.w === undefined)) {
|
|
cleaned.props.w = wValue
|
|
}
|
|
if (hValue !== undefined && (!('h' in cleaned.props) || cleaned.props.h === undefined)) {
|
|
cleaned.props.h = hValue
|
|
}
|
|
if (geoValue !== undefined && (!('geo' in cleaned.props) || cleaned.props.geo === undefined)) {
|
|
cleaned.props.geo = geoValue
|
|
}
|
|
|
|
recordToPut = cleaned as any
|
|
}
|
|
|
|
store.mergeRemoteChanges(() => {
|
|
store.put([recordToPut])
|
|
})
|
|
successCount++
|
|
console.log(`✅ Successfully loaded record ${record.id} (${record.typeName})`)
|
|
} catch (individualError) {
|
|
console.error(`❌ Failed to load record ${record.id} (${record.typeName}):`, individualError)
|
|
console.log("Problematic record structure:", {
|
|
id: record.id,
|
|
typeName: record.typeName,
|
|
type: record.type,
|
|
hasW: 'w' in record,
|
|
hasH: 'h' in record,
|
|
w: record.w,
|
|
h: record.h,
|
|
propsW: record.props?.w,
|
|
propsH: record.props?.h,
|
|
allKeys: Object.keys(record)
|
|
})
|
|
failedRecords.push(record)
|
|
}
|
|
}
|
|
// Only log if there are failures or many records
|
|
if (successCount < processedRecords.length || processedRecords.length > 50) {
|
|
console.log(`Successfully loaded ${successCount} out of ${processedRecords.length} records`)
|
|
}
|
|
// Only log if debugging is needed
|
|
// console.log(`Failed records: ${failedRecords.length}`, failedRecords.map(r => r.id))
|
|
|
|
// Try to fix and reload failed records
|
|
if (failedRecords.length > 0) {
|
|
// Only log if debugging is needed
|
|
// console.log("Attempting to fix and reload failed records...")
|
|
for (const record of failedRecords) {
|
|
try {
|
|
// Additional cleanup for failed records - create deep copy
|
|
let fixedRecord = JSON.parse(JSON.stringify(record))
|
|
|
|
// Fix instance records specifically
|
|
if (fixedRecord.typeName === 'instance') {
|
|
if (!fixedRecord.meta) fixedRecord.meta = {}
|
|
if (!Array.isArray(fixedRecord.insets)) {
|
|
fixedRecord.insets = [false, false, false, false]
|
|
}
|
|
if (!Array.isArray(fixedRecord.scribbles)) {
|
|
fixedRecord.scribbles = []
|
|
}
|
|
if (typeof fixedRecord.duplicateProps !== 'object' || fixedRecord.duplicateProps === null) {
|
|
fixedRecord.duplicateProps = {}
|
|
}
|
|
if (!Array.isArray(fixedRecord.duplicateProps.shapeIds)) {
|
|
fixedRecord.duplicateProps.shapeIds = []
|
|
}
|
|
if (typeof fixedRecord.duplicateProps.offset !== 'object' || fixedRecord.duplicateProps.offset === null) {
|
|
fixedRecord.duplicateProps.offset = { x: 0, y: 0 }
|
|
}
|
|
}
|
|
|
|
// Remove any remaining top-level w/h properties for shapes (except arrow, draw, and text)
|
|
if (fixedRecord.typeName === 'shape') {
|
|
if (fixedRecord.type !== 'arrow' && fixedRecord.type !== 'draw' && fixedRecord.type !== 'text') {
|
|
if ('w' in fixedRecord) {
|
|
if (!fixedRecord.props) fixedRecord.props = {}
|
|
fixedRecord.props.w = fixedRecord.w
|
|
delete (fixedRecord as any).w
|
|
}
|
|
if ('h' in fixedRecord) {
|
|
if (!fixedRecord.props) fixedRecord.props = {}
|
|
fixedRecord.props.h = fixedRecord.h
|
|
delete (fixedRecord as any).h
|
|
}
|
|
} else if (fixedRecord.type === 'text') {
|
|
// Text shapes only need w, not h
|
|
if ('w' in fixedRecord) {
|
|
if (!fixedRecord.props) fixedRecord.props = {}
|
|
fixedRecord.props.w = fixedRecord.w
|
|
delete (fixedRecord as any).w
|
|
}
|
|
if ('h' in fixedRecord) {
|
|
delete (fixedRecord as any).h
|
|
}
|
|
} else {
|
|
// For arrow and draw shapes, remove w/h entirely
|
|
if ('w' in fixedRecord) {
|
|
delete (fixedRecord as any).w
|
|
}
|
|
if ('h' in fixedRecord) {
|
|
delete (fixedRecord as any).h
|
|
}
|
|
}
|
|
}
|
|
|
|
// Comprehensive richText validation - ensure it's always an object with content and type for text shapes
|
|
if (fixedRecord.type === 'text' && fixedRecord.props) {
|
|
if (fixedRecord.props.richText !== undefined) {
|
|
if (!Array.isArray(fixedRecord.props.richText)) {
|
|
console.log(`🔧 Fixing richText for text shape ${fixedRecord.id}: was ${typeof fixedRecord.props.richText}, setting to proper object`)
|
|
fixedRecord.props.richText = { content: [], type: 'doc' }
|
|
} else {
|
|
// If it's an array, convert to proper richText object structure
|
|
console.log(`🔧 Converting richText array to object for text shape ${fixedRecord.id}`)
|
|
fixedRecord.props.richText = { content: fixedRecord.props.richText, type: 'doc' }
|
|
}
|
|
} else {
|
|
// Text shapes must have richText as an object
|
|
console.log(`🔧 Creating default richText object for text shape ${fixedRecord.id}`)
|
|
fixedRecord.props.richText = { content: [], type: 'doc' }
|
|
}
|
|
} else if (fixedRecord.type === 'text' && !fixedRecord.props) {
|
|
// Ensure props object exists for text shapes
|
|
fixedRecord.props = { richText: { content: [], type: 'doc' } }
|
|
}
|
|
|
|
// Fix text shapes - ensure they have required properties including color
|
|
if (fixedRecord.type === 'text') {
|
|
if (!fixedRecord.props.color) {
|
|
console.log(`🔧 Adding missing color property for text shape ${fixedRecord.id}`)
|
|
fixedRecord.props.color = 'black'
|
|
}
|
|
if (!fixedRecord.props.size) {
|
|
fixedRecord.props.size = 'm'
|
|
}
|
|
if (!fixedRecord.props.font) {
|
|
fixedRecord.props.font = 'draw'
|
|
}
|
|
if (!fixedRecord.props.textAlign) {
|
|
fixedRecord.props.textAlign = 'start'
|
|
}
|
|
if (!fixedRecord.props.w) {
|
|
fixedRecord.props.w = 100
|
|
}
|
|
if (fixedRecord.props.scale === undefined) {
|
|
fixedRecord.props.scale = 1
|
|
}
|
|
if (fixedRecord.props.autoSize === undefined) {
|
|
fixedRecord.props.autoSize = false
|
|
}
|
|
if (!fixedRecord.props.richText) {
|
|
console.log(`🔧 Creating default richText object for text shape ${fixedRecord.id}`)
|
|
fixedRecord.props.richText = { content: [], type: 'doc' }
|
|
}
|
|
|
|
// Remove invalid properties for text shapes (matching default text shape schema)
|
|
// Note: richText is actually required for text shapes, so don't remove it
|
|
const invalidTextProps = ['h', 'geo', 'insets', 'scribbles', 'isMinimized', 'roomUrl', 'text', 'align', 'verticalAlign', 'growY', 'url']
|
|
invalidTextProps.forEach(prop => {
|
|
if (prop in fixedRecord.props) {
|
|
console.log(`🔧 Removing invalid prop '${prop}' from text shape ${fixedRecord.id}`)
|
|
delete (fixedRecord.props as any)[prop]
|
|
}
|
|
})
|
|
}
|
|
|
|
// Fix embed shapes - ensure they have required properties and remove invalid ones
|
|
if (fixedRecord.type === 'Embed' || fixedRecord.type === 'embed') {
|
|
if (!fixedRecord.props.url) {
|
|
console.log(`🔧 Adding missing url property for embed shape ${fixedRecord.id}`)
|
|
fixedRecord.props.url = ''
|
|
}
|
|
if (!fixedRecord.props.w) {
|
|
fixedRecord.props.w = 400
|
|
}
|
|
if (!fixedRecord.props.h) {
|
|
fixedRecord.props.h = 300
|
|
}
|
|
if (fixedRecord.props.isMinimized === undefined) {
|
|
fixedRecord.props.isMinimized = false
|
|
}
|
|
|
|
// Remove invalid properties for embed shapes (matching custom EmbedShape schema)
|
|
const invalidEmbedProps = ['doesResize', 'doesResizeHeight', 'roomUrl', 'roomId', 'color', 'fill', 'dash', 'size', 'text', 'font', 'align', 'verticalAlign', 'growY', 'richText']
|
|
invalidEmbedProps.forEach(prop => {
|
|
if (prop in fixedRecord.props) {
|
|
console.log(`🔧 Removing invalid prop '${prop}' from embed shape ${fixedRecord.id}`)
|
|
delete (fixedRecord.props as any)[prop]
|
|
}
|
|
})
|
|
}
|
|
|
|
// Remove any other problematic properties from shapes
|
|
const invalidProps = ['insets', 'scribbles', 'geo']
|
|
invalidProps.forEach(prop => {
|
|
if (prop in fixedRecord) {
|
|
delete (fixedRecord as any)[prop]
|
|
}
|
|
})
|
|
|
|
// Final validation - ensure all required properties exist
|
|
if (fixedRecord.typeName === 'shape') {
|
|
// Ensure basic required properties
|
|
if (fixedRecord.x === undefined) fixedRecord.x = 0
|
|
if (fixedRecord.y === undefined) fixedRecord.y = 0
|
|
if (fixedRecord.rotation === undefined) fixedRecord.rotation = 0
|
|
if (fixedRecord.isLocked === undefined) fixedRecord.isLocked = false
|
|
if (fixedRecord.opacity === undefined) fixedRecord.opacity = 1
|
|
if (!fixedRecord.meta) fixedRecord.meta = {}
|
|
|
|
// CRITICAL: Final geo shape validation - ALWAYS remove w/h/geo from top level
|
|
if (fixedRecord.type === 'geo') {
|
|
// Store values before removing from top level
|
|
const wValue = 'w' in fixedRecord ? (fixedRecord as any).w : undefined
|
|
const hValue = 'h' in fixedRecord ? (fixedRecord as any).h : undefined
|
|
const geoValue = 'geo' in fixedRecord ? (fixedRecord as any).geo : undefined
|
|
|
|
// Ensure props exists
|
|
if (!fixedRecord.props) fixedRecord.props = {}
|
|
|
|
// ALWAYS remove w from top level (even if value is 0 or undefined)
|
|
if ('w' in fixedRecord) {
|
|
if (!('w' in fixedRecord.props) || fixedRecord.props.w === undefined) {
|
|
fixedRecord.props.w = wValue !== undefined ? wValue : 100
|
|
}
|
|
delete (fixedRecord as any).w
|
|
}
|
|
|
|
// ALWAYS remove h from top level (even if value is 0 or undefined)
|
|
if ('h' in fixedRecord) {
|
|
if (!('h' in fixedRecord.props) || fixedRecord.props.h === undefined) {
|
|
fixedRecord.props.h = hValue !== undefined ? hValue : 100
|
|
}
|
|
delete (fixedRecord as any).h
|
|
}
|
|
|
|
// ALWAYS remove geo from top level (even if value is undefined)
|
|
if ('geo' in fixedRecord) {
|
|
if (!('geo' in fixedRecord.props) || fixedRecord.props.geo === undefined) {
|
|
fixedRecord.props.geo = geoValue !== undefined ? geoValue : 'rectangle'
|
|
}
|
|
delete (fixedRecord as any).geo
|
|
}
|
|
|
|
// Ensure geo property exists in props
|
|
if (!fixedRecord.props.geo) {
|
|
fixedRecord.props.geo = 'rectangle'
|
|
}
|
|
|
|
// Ensure w and h are in props
|
|
if (fixedRecord.props.w === undefined) fixedRecord.props.w = 100
|
|
if (fixedRecord.props.h === undefined) fixedRecord.props.h = 100
|
|
}
|
|
|
|
// Ensure parentId exists
|
|
if (!fixedRecord.parentId) {
|
|
const pageRecord = records.find((r: any) => r.typeName === 'page') as any
|
|
if (pageRecord && pageRecord.id) {
|
|
fixedRecord.parentId = pageRecord.id
|
|
}
|
|
}
|
|
|
|
// Ensure props object exists
|
|
if (!fixedRecord.props) fixedRecord.props = {}
|
|
|
|
// Ensure w and h exist in props (except for arrow, draw, line, text, note, and group shapes)
|
|
if (fixedRecord.type !== 'arrow' && fixedRecord.type !== 'draw' && fixedRecord.type !== 'line' && fixedRecord.type !== 'text' && fixedRecord.type !== 'note' && fixedRecord.type !== 'group') {
|
|
if (fixedRecord.props.w === undefined) fixedRecord.props.w = 100
|
|
if (fixedRecord.props.h === undefined) fixedRecord.props.h = 100
|
|
} else if (fixedRecord.type === 'text') {
|
|
// Text shapes only need w, not h
|
|
if (fixedRecord.props.w === undefined) fixedRecord.props.w = 100
|
|
} else if (fixedRecord.type === 'line') {
|
|
// Line shapes should NOT have w or h properties
|
|
if ('w' in fixedRecord.props) {
|
|
console.log(`🔧 FINAL FIX: Removing invalid w property from line shape ${fixedRecord.id}`)
|
|
delete fixedRecord.props.w
|
|
}
|
|
if ('h' in fixedRecord.props) {
|
|
console.log(`🔧 FINAL FIX: Removing invalid h property from line shape ${fixedRecord.id}`)
|
|
delete fixedRecord.props.h
|
|
}
|
|
|
|
// Ensure line shapes have valid points
|
|
if (!fixedRecord.props.points || typeof fixedRecord.props.points !== 'object' || Array.isArray(fixedRecord.props.points)) {
|
|
console.log(`🔧 FINAL FIX: Creating default points for line shape ${fixedRecord.id}`)
|
|
fixedRecord.props.points = {
|
|
'a1': { id: 'a1', index: 'a1' as any, x: 0, y: 0 },
|
|
'a2': { id: 'a2', index: 'a2' as any, x: 100, y: 0 }
|
|
}
|
|
} else {
|
|
// Validate points
|
|
const validPoints: Record<string, { id: string, index: any, x: number, y: number }> = {}
|
|
let pointIndex = 0
|
|
const indices = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a7', 'a8', 'a9', 'a10']
|
|
|
|
for (const [key, point] of Object.entries(fixedRecord.props.points)) {
|
|
if (point && typeof point === 'object' &&
|
|
typeof (point as any).x === 'number' &&
|
|
typeof (point as any).y === 'number' &&
|
|
!isNaN((point as any).x) && !isNaN((point as any).y)) {
|
|
const index = indices[pointIndex] || `a${pointIndex + 1}`
|
|
validPoints[index] = {
|
|
id: index,
|
|
index: index as any,
|
|
x: (point as any).x,
|
|
y: (point as any).y
|
|
}
|
|
pointIndex++
|
|
}
|
|
}
|
|
|
|
if (Object.keys(validPoints).length === 0) {
|
|
fixedRecord.props.points = {
|
|
'a1': { id: 'a1', index: 'a1' as any, x: 0, y: 0 },
|
|
'a2': { id: 'a2', index: 'a2' as any, x: 100, y: 0 }
|
|
}
|
|
} else if (Object.keys(validPoints).length === 1) {
|
|
const firstPoint = Object.values(validPoints)[0]
|
|
const secondIndex = indices[1] || 'a2'
|
|
validPoints[secondIndex] = {
|
|
id: secondIndex,
|
|
index: secondIndex as any,
|
|
x: firstPoint.x + 100,
|
|
y: firstPoint.y
|
|
}
|
|
fixedRecord.props.points = validPoints
|
|
} else {
|
|
fixedRecord.props.points = validPoints
|
|
}
|
|
}
|
|
|
|
// Ensure other required line shape properties
|
|
if (!fixedRecord.props.color) fixedRecord.props.color = 'black'
|
|
if (!fixedRecord.props.dash) fixedRecord.props.dash = 'draw'
|
|
if (!fixedRecord.props.size) fixedRecord.props.size = 'm'
|
|
if (!fixedRecord.props.spline) fixedRecord.props.spline = 'line'
|
|
if (fixedRecord.props.scale === undefined || fixedRecord.props.scale === null) {
|
|
fixedRecord.props.scale = 1
|
|
}
|
|
} else if (fixedRecord.type === 'note') {
|
|
// Note shapes should NOT have w or h properties, but DO need richText
|
|
if ('w' in fixedRecord.props) {
|
|
console.log(`🔧 FINAL FIX: Removing invalid w property from note shape ${fixedRecord.id}`)
|
|
delete fixedRecord.props.w
|
|
}
|
|
if ('h' in fixedRecord.props) {
|
|
console.log(`🔧 FINAL FIX: Removing invalid h property from note shape ${fixedRecord.id}`)
|
|
delete fixedRecord.props.h
|
|
}
|
|
// Note shapes REQUIRE richText property
|
|
if (!fixedRecord.props.richText || typeof fixedRecord.props.richText !== 'object') {
|
|
console.log(`🔧 FINAL FIX: Adding missing richText property for note shape ${fixedRecord.id}`)
|
|
fixedRecord.props.richText = { content: [], type: 'doc' }
|
|
}
|
|
} else if (fixedRecord.type === 'group') {
|
|
// Group shapes should NOT have w or h properties
|
|
if ('w' in fixedRecord.props) {
|
|
console.log(`🔧 FINAL FIX: Removing invalid w property from group shape ${fixedRecord.id}`)
|
|
delete fixedRecord.props.w
|
|
}
|
|
if ('h' in fixedRecord.props) {
|
|
console.log(`🔧 FINAL FIX: Removing invalid h property from group shape ${fixedRecord.id}`)
|
|
delete fixedRecord.props.h
|
|
}
|
|
}
|
|
}
|
|
|
|
// CRITICAL: Final safety check - ensure no geo shapes have w/h/geo at top level
|
|
if (fixedRecord.typeName === 'shape' && fixedRecord.type === 'geo') {
|
|
// Store values before removing from top level
|
|
const wValue = 'w' in fixedRecord ? (fixedRecord as any).w : undefined
|
|
const hValue = 'h' in fixedRecord ? (fixedRecord as any).h : undefined
|
|
const geoValue = 'geo' in fixedRecord ? (fixedRecord as any).geo : undefined
|
|
|
|
// Create cleaned record without w/h/geo at top level
|
|
const cleaned: any = {}
|
|
for (const key in fixedRecord) {
|
|
if (key !== 'w' && key !== 'h' && key !== 'geo') {
|
|
cleaned[key] = (fixedRecord as any)[key]
|
|
}
|
|
}
|
|
|
|
// Ensure props exists and move values there if needed
|
|
if (!cleaned.props) cleaned.props = {}
|
|
if (wValue !== undefined && (!('w' in cleaned.props) || cleaned.props.w === undefined)) {
|
|
cleaned.props.w = wValue
|
|
}
|
|
if (hValue !== undefined && (!('h' in cleaned.props) || cleaned.props.h === undefined)) {
|
|
cleaned.props.h = hValue
|
|
}
|
|
if (geoValue !== undefined && (!('geo' in cleaned.props) || cleaned.props.geo === undefined)) {
|
|
cleaned.props.geo = geoValue
|
|
}
|
|
|
|
fixedRecord = cleaned as any
|
|
}
|
|
|
|
// CRITICAL: Final safety check - ensure text shapes don't have props.text (TLDraw schema doesn't allow it)
|
|
// Text shapes should only use props.richText, not props.text
|
|
if (fixedRecord.typeName === 'shape' && fixedRecord.type === 'text' && fixedRecord.props && 'text' in fixedRecord.props) {
|
|
delete (fixedRecord.props as any).text
|
|
}
|
|
|
|
store.mergeRemoteChanges(() => {
|
|
store.put([fixedRecord])
|
|
})
|
|
console.log(`✅ Successfully loaded fixed record ${fixedRecord.id}`)
|
|
successCount++
|
|
} catch (retryError) {
|
|
console.error(`❌ Still failed to load record ${record.id} after fix attempt:`, retryError)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Verify loading
|
|
const storeRecords = store.allRecords()
|
|
const shapes = storeRecords.filter(r => r.typeName === 'shape')
|
|
console.log(`📊 Store verification: ${processedRecords.length} processed records, ${storeRecords.length} total store records, ${shapes.length} shapes`)
|
|
|
|
// Debug: Check if shapes have the right structure
|
|
if (shapes.length > 0) {
|
|
console.log("📊 Sample loaded shape:", {
|
|
id: shapes[0].id,
|
|
type: shapes[0].type,
|
|
x: shapes[0].x,
|
|
y: shapes[0].y,
|
|
hasProps: !!shapes[0].props,
|
|
propsKeys: shapes[0].props ? Object.keys(shapes[0].props) : [],
|
|
allKeys: Object.keys(shapes[0])
|
|
})
|
|
|
|
// Validate all shapes have proper structure
|
|
const invalidShapes = shapes.filter(shape => {
|
|
const issues = []
|
|
if (!shape.props) issues.push('missing props')
|
|
// Only check w/h for shapes that actually need them
|
|
const shapesWithoutWH = ['arrow', 'draw', 'text', 'note', 'line']
|
|
if (!shapesWithoutWH.includes(shape.type) && (!(shape.props as any)?.w || !(shape.props as any)?.h)) {
|
|
issues.push('missing w/h in props')
|
|
}
|
|
if ('w' in shape || 'h' in shape) {
|
|
issues.push('w/h at top level instead of props')
|
|
}
|
|
return issues.length > 0
|
|
})
|
|
|
|
if (invalidShapes.length > 0) {
|
|
console.warn(`⚠️ Found ${invalidShapes.length} shapes with structural issues:`, invalidShapes.map(s => ({
|
|
id: s.id,
|
|
type: s.type,
|
|
issues: {
|
|
missingProps: !s.props,
|
|
missingWH: s.type !== 'arrow' && s.type !== 'draw' && (!(s.props as any)?.w || !(s.props as any)?.h),
|
|
topLevelWH: 'w' in s || 'h' in s
|
|
}
|
|
})))
|
|
}
|
|
}
|
|
|
|
// Debug: Check for any shapes that might have validation issues
|
|
const shapesWithTopLevelW = shapes.filter(s => 'w' in s)
|
|
const shapesWithTopLevelH = shapes.filter(s => 'h' in s)
|
|
if (shapesWithTopLevelW.length > 0 || shapesWithTopLevelH.length > 0) {
|
|
console.warn(`📊 Found ${shapesWithTopLevelW.length} shapes with top-level w, ${shapesWithTopLevelH.length} with top-level h`)
|
|
|
|
// Fix shapes with top-level w/h properties
|
|
shapesWithTopLevelW.forEach(shape => {
|
|
console.log(`🔧 Fixing shape ${shape.id} with top-level w property`)
|
|
if (!shape.props) shape.props = {}
|
|
;(shape.props as any).w = (shape as any).w
|
|
delete (shape as any).w
|
|
})
|
|
|
|
shapesWithTopLevelH.forEach(shape => {
|
|
console.log(`🔧 Fixing shape ${shape.id} with top-level h property`)
|
|
if (!shape.props) shape.props = {}
|
|
;(shape.props as any).h = (shape as any).h
|
|
delete (shape as any).h
|
|
})
|
|
}
|
|
|
|
if (shapes.length === 0) {
|
|
// Only log if debugging is needed
|
|
// console.log("No store data found in Automerge document")
|
|
}
|
|
}
|
|
|
|
// Only log if debugging is needed
|
|
// console.log("Setting store status to synced-remote")
|
|
setStoreWithStatus({
|
|
store,
|
|
status: "synced-remote",
|
|
connectionStatus: "online",
|
|
})
|
|
} catch (error) {
|
|
console.error("Error initializing store from Automerge:", error)
|
|
|
|
// Try to recover by creating a minimal valid store
|
|
try {
|
|
console.log("Attempting to recover with minimal store...")
|
|
const minimalStore = createTLStore({
|
|
schema: customSchema,
|
|
})
|
|
|
|
// Add basic page and camera records
|
|
minimalStore.mergeRemoteChanges(() => {
|
|
minimalStore.put([
|
|
{
|
|
id: 'page:page' as any,
|
|
typeName: 'page',
|
|
name: 'Page',
|
|
index: 'a0' as any,
|
|
meta: {}
|
|
},
|
|
{
|
|
id: 'camera:page:page' as any,
|
|
typeName: 'camera',
|
|
x: 0,
|
|
y: 0,
|
|
z: 1,
|
|
meta: {}
|
|
}
|
|
])
|
|
})
|
|
|
|
setStoreWithStatus({
|
|
store: minimalStore,
|
|
status: "synced-remote",
|
|
connectionStatus: "offline",
|
|
error: error instanceof Error ? error : new Error("Store initialization failed, using minimal store") as any,
|
|
})
|
|
} catch (recoveryError) {
|
|
console.error("Failed to recover with minimal store:", recoveryError)
|
|
setStoreWithStatus({
|
|
store,
|
|
status: "not-synced",
|
|
error: error instanceof Error ? error : new Error("Unknown error") as any,
|
|
})
|
|
}
|
|
}
|
|
}
|
|
|
|
initializeStore()
|
|
|
|
return () => {
|
|
unsubs.forEach((unsub) => unsub())
|
|
}
|
|
}, [handle, store])
|
|
|
|
/* -------------------- Presence -------------------- */
|
|
// Create a safe handle that won't cause null errors
|
|
const safeHandle = handle || {
|
|
on: () => {},
|
|
off: () => {},
|
|
removeListener: () => {},
|
|
whenReady: () => Promise.resolve(),
|
|
doc: () => null,
|
|
change: () => {},
|
|
broadcast: () => {},
|
|
} as any
|
|
|
|
const [, updateLocalState] = useLocalAwareness({
|
|
handle: safeHandle,
|
|
userId: _userId,
|
|
initialState: {},
|
|
})
|
|
|
|
const [peerStates] = useRemoteAwareness({
|
|
handle: safeHandle,
|
|
localUserId: _userId,
|
|
})
|
|
|
|
return {
|
|
...storeWithStatus,
|
|
store,
|
|
} as TLStoreWithStatus
|
|
}
|
|
|
|
// Presence hook (simplified version)
|
|
export function useAutomergePresence(params: {
|
|
handle: DocHandle<any> | null
|
|
store: any
|
|
userMetadata: {
|
|
userId: string
|
|
name: string
|
|
color: string
|
|
}
|
|
}) {
|
|
const { handle, store, userMetadata } = params
|
|
|
|
// Simple presence implementation
|
|
useEffect(() => {
|
|
if (!handle || !store) return
|
|
|
|
const updatePresence = () => {
|
|
// Basic presence update logic
|
|
console.log("Updating presence for user:", userMetadata.userId)
|
|
}
|
|
|
|
updatePresence()
|
|
}, [handle, store, userMetadata])
|
|
|
|
return {
|
|
updatePresence: () => {},
|
|
presence: {},
|
|
}
|
|
} |