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

remove copy file creating problems

This commit is contained in:
Jeff Emmett 2024-11-27 12:25:04 +07:00
parent c71b67e24c
commit b0a3cd7328
2 changed files with 2 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -17,6 +17,7 @@
"license": "ISC",
"dependencies": {
"@dimforge/rapier2d": "^0.11.2",
"@tldraw/assets": "^3.5.0",
"@tldraw/sync": "^3.4.1",
"@tldraw/sync-core": "^3.4.1",
"@tldraw/tldraw": "^3.4.1",

103
src/hooks/copy useLocalStorageRoom.ts
View File

@ -1,103 +0,0 @@
import useLocalStorageState from 'use-local-storage-state';
import { TLRecord, createTLStore, SerializedStore, Editor, StoreSchema, TLStoreProps } from '@tldraw/tldraw';
import { customSchema } from '../../worker/TldrawDurableObject';
import { useMemo, useCallback, useEffect, useState } from 'react';
import { useSync } from '@tldraw/sync';
import { WORKER_URL } from '../components/Board';
import { TLRecord as TLSchemaRecord } from '@tldraw/tlschema'
import { defaultAssetUrls } from '@tldraw/assets'
const CACHE_VERSION = '1.0';
export function useLocalStorageRoom(roomId: string) {
const [isOnline, setIsOnline] = useState(navigator.onLine);
const storageKey = `tldraw_board_${roomId}_v${CACHE_VERSION}`;
const [records, setRecords] = useLocalStorageState<SerializedStore<TLRecord>>(storageKey, {
defaultValue: createTLStore({
schema: customSchema as unknown as StoreSchema<TLRecord, unknown>
}).serialize()
});
// Create a persistent store
const baseStore = useMemo(() => {
return createTLStore({
schema: customSchema as unknown as StoreSchema<TLRecord, unknown>,
initialData: records,
})
}, [records]);
// Use sync with the base store
const syncedStore = useSync({
uri: `${WORKER_URL.replace('https://', 'wss://')}/connect/${roomId}`,
schema: customSchema,
store: baseStore,
assets: defaultAssetUrls
});
// Handle online/offline transitions
useEffect(() => {
const handleOnline = () => {
setIsOnline(true);
if (syncedStore?.store) {
const filteredRecords = filterNonCameraRecords(records);
syncedStore.store.mergeRemoteChanges(() => {
Object.values(filteredRecords).forEach(record => {
syncedStore.store.put([record as unknown as TLSchemaRecord]);
});
});
}
};
const handleOffline = () => setIsOnline(false);
window.addEventListener('online', handleOnline);
window.addEventListener('offline', handleOffline);
return () => {
window.removeEventListener('online', handleOnline);
window.removeEventListener('offline', handleOffline);
};
}, [records, syncedStore?.store]);
const filterNonCameraRecords = (data: SerializedStore<TLRecord>) => {
return Object.fromEntries(
Object.entries(data).filter(([_, record]) => {
return (record as TLRecord).typeName !== 'camera' &&
(record as TLRecord).typeName !== 'instance_page_state' &&
(record as TLRecord).typeName !== 'instance_presence';
})
) as SerializedStore<TLRecord>;
};
// Sync with server store when online
useEffect(() => {
if (!isOnline || !syncedStore?.store) return;
const syncInterval = setInterval(() => {
const serverRecords = syncedStore.store.allRecords();
if (Object.keys(serverRecords).length > 0) {
setRecords(syncedStore.store.serialize() as typeof records);
}
}, 5000);
return () => clearInterval(syncInterval);
}, [isOnline, syncedStore?.store, setRecords]);
const store = useMemo(() => {
if (isOnline && syncedStore?.store) {
return syncedStore.store;
}
return createTLStore({
schema: customSchema as unknown as StoreSchema<TLRecord, unknown>,
initialData: records,
});
}, [isOnline, syncedStore?.store, records]);
return {
store,
records,
setRecords,
isOnline
};
}