Compare commits

..

4 Commits

Author SHA1 Message Date
ruinivist 2c88ac7972 fix: show autosave failures 2026-06-20 09:59:38 +00:00
ruinivist 0f984d4dea fix: tune excalidraw stroke widths 2026-06-20 09:47:25 +00:00
ruinivist 0a1d70b605 fix: extend upload timeout 2026-06-20 09:42:27 +00:00
ruinivist 40bf063490 fix: pan excalidraw with right click 2026-06-20 09:28:19 +00:00
5 changed files with 45 additions and 47 deletions
-4
View File
@@ -1,4 +0,0 @@
## 2024-06-07 - Memoize callbacks passed to Excalidraw
**Learning:** Due to the exceptionally high rendering cost of the `@excalidraw/excalidraw` canvas, always ensure all callbacks passed to it (e.g., `onExcalidrawAPI`) are strictly memoized using `useCallback`. Passing inline functions as props breaks prop stability for `React.memo` and causes severe UI input lag caused by full canvas re-renders when parent states change.
**Action:** When working with `<Excalidraw>` or its wrapper components like `<EditorCanvas>`, always extract inline callback functions (like `onExcalidrawAPI={(api) => { ... }}`) into `useCallback` hooks before passing them down.
File diff suppressed because one or more lines are too long
+3 -8
View File
@@ -307,13 +307,6 @@ function PrivateApp() {
[],
);
// ⚡ Bolt: Memoize the Excalidraw API callback to prevent EditorCanvas from re-rendering
// Excalidraw has exceptionally high rendering cost, so we must maintain prop stability
// for EditorCanvas's React.memo to avoid severe UI input lag on any parent state change.
const handleExcalidrawAPI = useCallback((api: ExcalidrawImperativeAPI) => {
excalidrawApiRef.current = api;
}, []);
return (
<div className="app-shell" ref={appShellRef}>
{toastMessage && (
@@ -339,7 +332,9 @@ function PrivateApp() {
onSceneChange={handleSceneChange}
onSelectionStateChange={handleCodeBlockSelectionChange}
onEditorActivity={scheduleThemeTokenSync}
onExcalidrawAPI={handleExcalidrawAPI}
onExcalidrawAPI={(api) => {
excalidrawApiRef.current = api;
}}
renderEmbeddable={renderCodeBlockEmbeddable}
/>
<CodeBlockSidebar
+4
View File
@@ -231,6 +231,8 @@ export function useDrawingSession() {
}
if (isManual) {
showToast("Saved", 2000);
} else {
showToast(null);
}
})
.catch((saveError: unknown) => {
@@ -251,6 +253,8 @@ export function useDrawingSession() {
);
if (isManual) {
showToast("Save failed", 2000);
} else {
showToast("Autosave failed");
}
throw saveError;
})
+1
View File
@@ -12,6 +12,7 @@ export function createServer(options: CreateServerOptions = {}) {
return {
port: Number(process.env.PORT ?? "3000"),
hostname: process.env.HOST ?? "localhost",
idleTimeout: 120,
routes: {
"/": (request: Request) => {
const drawing = drawingStore.ensureInitialDrawing();