nils/papercrate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
nils
2025-11-06 21:40:36 +01:00
parent 5562c271e1
commit 07169e853b
5 changed files with 11 additions and 284 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/app/AppLayout.jsx
+1 -38
View File
@@ -196,13 +196,7 @@ const AppLayout = () => {
const [selectedFolder, setSelectedFolder] = useState(routeFolderId || 'root'); const [selectedFolder, setSelectedFolder] = useState(routeFolderId || 'root');
const [currentFolder, setCurrentFolder] = useState(null); const [currentFolder, setCurrentFolder] = useState(null);
const [currentSubfolders, setCurrentSubfolders] = useState([]); const [currentSubfolders, setCurrentSubfolders] = useState([]);
const [documents, setDocumentsState] = useState([]); const [documents, setDocuments] = useState([]);
const setDocuments = useCallback((updater) => {
const stack = new Error('[trace] setDocuments invoked').stack?.split('\n').slice(1, 10);
console.log('[desk][trace] setDocuments invoked', { type: typeof updater });
console.log('[desk][trace] setDocuments stack', stack);
setDocumentsState(updater);
}, []);
const [documentsViewMode, setDocumentsViewMode] = useState(() => { const [documentsViewMode, setDocumentsViewMode] = useState(() => {
if (typeof window === 'undefined') { if (typeof window === 'undefined') {
return 'list'; return 'list';
@@ -351,37 +345,6 @@ const AppLayout = () => {
} }
}, [appDispatch]); }, [appDispatch]);
const [searchResults, setSearchResults] = useState(null); const [searchResults, setSearchResults] = useState(null);
const documentsTraceRef = useRef(documents);
const searchResultsTraceRef = useRef(searchResults);
useEffect(() => {
if (documentsTraceRef.current !== documents) {
const prev = documentsTraceRef.current || [];
const next = documents || [];
const stack = new Error('[trace] documents updated').stack?.split('\n').slice(1, 8);
console.log('[desk][trace] documents state updated', {
prevCount: prev.length,
nextCount: next.length,
sameRef: prev === next,
});
console.log('[desk][trace] documents stack', stack);
documentsTraceRef.current = documents;
}
}, [documents]);
useEffect(() => {
if (searchResultsTraceRef.current !== searchResults) {
const prev = searchResultsTraceRef.current || [];
const next = searchResults || [];
const stack = new Error('[trace] searchResults updated').stack?.split('\n').slice(1, 8);
console.log('[desk][trace] searchResults state updated', {
prevCount: Array.isArray(prev) ? prev.length : null,
nextCount: Array.isArray(next) ? next.length : null,
sameRef: prev === next,
});
console.log('[desk][trace] searchResults stack', stack);
searchResultsTraceRef.current = searchResults;
}
}, [searchResults]);
const [previewEntries, setPreviewEntries] = useState(() => new Map()); const [previewEntries, setPreviewEntries] = useState(() => new Map());
const previewInflightRef = useRef(new Map()); const previewInflightRef = useRef(new Map());
const previewReturnPathRef = useRef(null); const previewReturnPathRef = useRef(null);
frontend/src/desktop/DesktopWorkspace.jsx
+2 -60
View File
@@ -32,7 +32,7 @@ import DesktopDocumentCard from './DesktopDocumentCard';
import './DesktopWorkspace.css'; import './DesktopWorkspace.css';
const DEBUG_DRAG = false; const DEBUG_DRAG = false;
const DEBUG_FOCUS = true; const DEBUG_FOCUS = false;
const usePreviewMetadata = (documents, getDocumentAsset, ensureAssetUrl) => { const usePreviewMetadata = (documents, getDocumentAsset, ensureAssetUrl) => {
const [metadataMap, setMetadataMap] = useState(() => new Map()); const [metadataMap, setMetadataMap] = useState(() => new Map());
@@ -140,23 +140,6 @@ const DesktopWorkspace = ({
const allowLayoutPersistence = Boolean(tenantId && viewId && viewId.startsWith('folder:')); const allowLayoutPersistence = Boolean(tenantId && viewId && viewId.startsWith('folder:'));
const itemsTraceRef = useRef(items);
useEffect(() => {
if (itemsTraceRef.current !== items) {
const prev = itemsTraceRef.current || [];
const next = items || [];
const stack = new Error('[trace] items updated').stack?.split('\n').slice(1, 8);
console.log('[desk][trace] items value changed', {
prevCount: prev.length,
nextCount: next.length,
sameRef: prev === next,
fromSearch: Boolean(searchResults),
});
console.log('[desk][trace] items stack', stack);
itemsTraceRef.current = items;
}
}, [items, searchResults]);
const containerRef = useRef(null); const containerRef = useRef(null);
const itemRefs = useRef(new Map()); const itemRefs = useRef(new Map());
const dragTransformsRef = useRef(new Map()); const dragTransformsRef = useRef(new Map());
@@ -231,33 +214,8 @@ const DesktopWorkspace = ({
} = workspaceSnapshot; } = workspaceSnapshot;
useEffect(() => { useEffect(() => {
const isDevEnv = () => {
if (typeof globalThis === 'undefined') {
return true;
}
const proc = globalThis.process;
if (!proc || typeof proc !== 'object') {
return true;
}
const env = proc.env;
if (!env || typeof env !== 'object') {
return true;
}
return env.NODE_ENV !== 'production';
};
const shouldWaitForPersisted = allowLayoutPersistence && !initialLoadDone; const shouldWaitForPersisted = allowLayoutPersistence && !initialLoadDone;
if (isDevEnv()) {
console.log('[desk][layout] React effect -> ensureLayoutForItems', {
docSizeVersion,
initialLoadDone,
itemCount: items.length,
allowLayoutPersistence,
shouldWaitForPersisted,
});
}
if (shouldWaitForPersisted) { if (shouldWaitForPersisted) {
return; return;
} }
@@ -430,16 +388,10 @@ const DesktopWorkspace = ({
const focusTarget = () => { const focusTarget = () => {
try { try {
if (DEBUG_FOCUS) {
console.log('[desk] focusCanvas -> attempting focus', canvas);
}
canvas.focus({ preventScroll: true }); canvas.focus({ preventScroll: true });
if (DEBUG_FOCUS) {
console.log('[desk] focusCanvas: applied focus. activeElement:', document?.activeElement);
}
} catch (error) { } catch (error) {
if (DEBUG_FOCUS) { if (DEBUG_FOCUS) {
console.warn('[desk] focusTarget failed to focus canvas', error); void error;
} }
} }
}; };
@@ -449,22 +401,12 @@ const DesktopWorkspace = ({
return; return;
} }
if (DEBUG_FOCUS) {
console.log('[desk] requestCanvasFocus -> scheduling deferred focus');
}
if (typeof window.requestAnimationFrame === 'function') { if (typeof window.requestAnimationFrame === 'function') {
window.requestAnimationFrame(() => { window.requestAnimationFrame(() => {
if (DEBUG_FOCUS) {
console.log('[desk] requestCanvasFocus -> executing deferred focus (rAF)');
}
focusTarget(); focusTarget();
}); });
} else { } else {
setTimeout(() => { setTimeout(() => {
if (DEBUG_FOCUS) {
console.log('[desk] requestCanvasFocus -> executing deferred focus (timeout)');
}
focusTarget(); focusTarget();
}, 0); }, 0);
} }
frontend/src/desktop/tags/useDeskTagInteractions.js
+2 -4
View File
@@ -11,7 +11,7 @@ import {
} from '../../documents/tagTransfer'; } from '../../documents/tagTransfer';
const TAG_REMOVE_DISTANCE = 160; const TAG_REMOVE_DISTANCE = 160;
const DEBUG_DROP = true; const DEBUG_DROP = false;
const createDragPreview = (node, clientX, clientY) => { const createDragPreview = (node, clientX, clientY) => {
if (!(node instanceof HTMLElement)) { if (!(node instanceof HTMLElement)) {
@@ -132,9 +132,7 @@ export const useDeskTagInteractions = ({
void (async () => { void (async () => {
try { try {
await removePromise; await removePromise;
if (DEBUG_DROP) { void DEBUG_DROP;
console.log('[desk] finalizeTagDrag -> removed tag due to fling');
}
} catch (error) { } catch (error) {
console.error('Failed to remove tag after drag', error); console.error('Failed to remove tag after drag', error);
scheduleShowNode(); scheduleShowNode();
frontend/src/desktop/useDocumentDrag.js
+6 -36
View File
@@ -123,7 +123,7 @@ const useDocumentDrag = (options = {}) => {
capturedTarget.releasePointerCapture(pointerId); capturedTarget.releasePointerCapture(pointerId);
} catch (error) { } catch (error) {
if (debugDrag) { if (debugDrag) {
console.warn('[desk] releasePointerCapture failed', error); void error;
} }
} }
} }
@@ -143,18 +143,6 @@ const useDocumentDrag = (options = {}) => {
const handlePointerDown = useCallback( const handlePointerDown = useCallback(
(event, docIdInput, options = {}) => { (event, docIdInput, options = {}) => {
if (debugDrag) {
console.log(
'[desk] handlePointerDown fired for doc',
docIdInput,
'button',
event.button,
'pointerType',
event.pointerType,
'pointerId',
event.pointerId,
);
}
preventAll(event); preventAll(event);
const docId = docIdInput != null ? docIdInput : null; const docId = docIdInput != null ? docIdInput : null;
@@ -268,7 +256,7 @@ const useDocumentDrag = (options = {}) => {
capturedTarget.setPointerCapture(event.pointerId); capturedTarget.setPointerCapture(event.pointerId);
} catch (error) { } catch (error) {
if (debugDrag) { if (debugDrag) {
console.warn('[desk] setPointerCapture failed', error); void error;
} }
} }
} }
@@ -424,22 +412,11 @@ const useDocumentDrag = (options = {}) => {
(event) => { (event) => {
const state = dragStateRef.current; const state = dragStateRef.current;
if (!state) { if (!state) {
if (debugDrag) { return;
console.log('[desk] handlePointerMove: no drag state for pointer', event.pointerId);
} }
return; if (state.pointerId !== event.pointerId) {
} return;
if (state.pointerId !== event.pointerId) {
if (debugDrag) {
console.log(
'[desk] handlePointerMove: pointer mismatch expected',
state.pointerId,
'got',
event.pointerId,
);
} }
return;
}
preventAll(event); preventAll(event);
if (state.isGroup) { if (state.isGroup) {
@@ -550,7 +527,6 @@ const useDocumentDrag = (options = {}) => {
setDragTransform(item.docId, payload); setDragTransform(item.docId, payload);
const node = itemRefs.current.get(item.docId); const node = itemRefs.current.get(item.docId);
applyDomTransform(node, payload); applyDomTransform(node, payload);
console.log('[desk] drag update', item.docId, payload.centerX, payload.centerY);
}); });
state.lastClientX = event.clientX; state.lastClientX = event.clientX;
@@ -565,9 +541,6 @@ const useDocumentDrag = (options = {}) => {
return; return;
} }
if (state.locked) { if (state.locked) {
if (debugDrag) {
console.log('[desk] handlePointerMove: locked drag for doc', state.docKey);
}
return; return;
} }
@@ -669,7 +642,6 @@ const useDocumentDrag = (options = {}) => {
setDragTransform(state.docKey, transformPayload); setDragTransform(state.docKey, transformPayload);
const primaryNode = itemRefs.current.get(state.docKey); const primaryNode = itemRefs.current.get(state.docKey);
applyDomTransform(primaryNode, transformPayload); applyDomTransform(primaryNode, transformPayload);
console.log('[desk] drag update', state.docKey, transformPayload.centerX, transformPayload.centerY);
const offsetX = pointerCanvasX - currentCenterX; const offsetX = pointerCanvasX - currentCenterX;
const offsetY = pointerCanvasY - currentCenterY; const offsetY = pointerCanvasY - currentCenterY;
@@ -710,9 +682,7 @@ const useDocumentDrag = (options = {}) => {
state.localPointerOffsetY = updatedLocalOffsetY; state.localPointerOffsetY = updatedLocalOffsetY;
} }
if (debugDrag) { void debugDrag;
console.log('[desk] handlePointerMove: moved doc', state.docKey, 'to', currentCenterX, currentCenterY);
}
}, },
[ [
bringToFront, bringToFront,
frontend/src/desktop/workspaceEngine.js
-146
View File
@@ -17,23 +17,6 @@ export const ANGULAR_DAMPING = 11;
export const TORQUE_TO_ACCELERATION = 0.006; export const TORQUE_TO_ACCELERATION = 0.006;
export const SETTLE_ANGULAR_VELOCITY = 1.2; export const SETTLE_ANGULAR_VELOCITY = 1.2;
const getNodeEnv = () => {
if (typeof globalThis === 'undefined') {
return undefined;
}
const proc = globalThis.process;
if (!proc || typeof proc !== 'object') {
return undefined;
}
const env = proc.env;
if (!env || typeof env !== 'object') {
return undefined;
}
return env.NODE_ENV;
};
const isDevEnvironment = () => getNodeEnv() !== 'production';
export const applyDomTransform = ( export const applyDomTransform = (
node, node,
{ {
@@ -433,17 +416,6 @@ export class WorkspaceEngine {
} }
updateConfig({ allowLayoutPersistence, tenantId, viewId }) { updateConfig({ allowLayoutPersistence, tenantId, viewId }) {
if (isDevEnvironment()) {
console.log('[desk][config] updateConfig -> received', {
allowLayoutPersistence,
tenantId,
viewId,
currentAllow: this.allowLayoutPersistence,
currentTenant: this.tenantId,
currentView: this.viewId,
initialLoadDone: this.initialLoadDone,
});
}
const allowChanged = const allowChanged =
typeof allowLayoutPersistence === 'boolean' typeof allowLayoutPersistence === 'boolean'
&& allowLayoutPersistence !== this.allowLayoutPersistence; && allowLayoutPersistence !== this.allowLayoutPersistence;
@@ -451,9 +423,6 @@ export class WorkspaceEngine {
const viewChanged = viewId !== undefined && viewId !== this.viewId; const viewChanged = viewId !== undefined && viewId !== this.viewId;
if (!allowChanged && !tenantChanged && !viewChanged) { if (!allowChanged && !tenantChanged && !viewChanged) {
if (isDevEnvironment()) {
console.log('[desk][config] updateConfig -> no changes');
}
if ( if (
this.allowLayoutPersistence this.allowLayoutPersistence
&& this.tenantId && this.tenantId
@@ -461,9 +430,6 @@ export class WorkspaceEngine {
&& !this.initialLoadDone && !this.initialLoadDone
&& !this.loadingPersisted && !this.loadingPersisted
) { ) {
if (isDevEnvironment()) {
console.log('[desk][config] updateConfig -> triggering load for pending persistence');
}
this.loadPersistedLayout(); this.loadPersistedLayout();
} }
return; return;
@@ -480,9 +446,6 @@ export class WorkspaceEngine {
} }
if (!this.allowLayoutPersistence) { if (!this.allowLayoutPersistence) {
if (isDevEnvironment()) {
console.log('[desk][config] updateConfig -> persistence disabled, clearing state');
}
this.persistedLayout = new Map(); this.persistedLayout = new Map();
this.layoutDirty = false; this.layoutDirty = false;
this.emit(); this.emit();
@@ -490,22 +453,10 @@ export class WorkspaceEngine {
} }
if (!this.tenantId || !this.viewId) { if (!this.tenantId || !this.viewId) {
if (isDevEnvironment()) {
console.log('[desk][config] updateConfig -> missing tenant/view, waiting', {
tenantId: this.tenantId,
viewId: this.viewId,
});
}
return; return;
} }
if (!this.initialLoadDone) { if (!this.initialLoadDone) {
if (isDevEnvironment()) {
console.log('[desk][config] updateConfig -> fetching persisted layout', {
tenantId: this.tenantId,
viewId: this.viewId,
});
}
this.loadPersistedLayout(); this.loadPersistedLayout();
} }
} }
@@ -522,14 +473,6 @@ export class WorkspaceEngine {
this.ensureLayoutForItems(); this.ensureLayoutForItems();
} }
this.recalcVisibleDocIds(); this.recalcVisibleDocIds();
if (isDevEnvironment()) {
console.log('[desk][config] setItems', {
itemCount: this.items.length,
canGenerateLayoutImmediately,
allowLayoutPersistence: this.allowLayoutPersistence,
initialLoadDone: this.initialLoadDone,
});
}
} }
setDocumentLookup(map) { setDocumentLookup(map) {
@@ -563,14 +506,6 @@ export class WorkspaceEngine {
this.ensureLayoutForItems(); this.ensureLayoutForItems();
this.recalcVisibleDocIds(); this.recalcVisibleDocIds();
this.emit(); this.emit();
if (isDevEnvironment()) {
console.log('[desk][config] setCanvasSize', {
width,
height,
allowLayoutPersistence: this.allowLayoutPersistence,
initialLoadDone: this.initialLoadDone,
});
}
} }
setDraggingId(docId) { setDraggingId(docId) {
@@ -909,31 +844,15 @@ export class WorkspaceEngine {
} }
ensureLayoutForItems() { ensureLayoutForItems() {
if (this.allowLayoutPersistence && !this.initialLoadDone) {
if (isDevEnvironment()) {
console.log('[desk][layout] ensureLayoutForItems -> waiting for persisted layout to load');
}
return;
}
const persistenceReady = !this.allowLayoutPersistence || !this.tenantId || !this.viewId || this.initialLoadDone; const persistenceReady = !this.allowLayoutPersistence || !this.tenantId || !this.viewId || this.initialLoadDone;
const canvasReady = Boolean(this.canvasSize.width && this.canvasSize.height); const canvasReady = Boolean(this.canvasSize.width && this.canvasSize.height);
const sizesReady = !this.items.some((doc) => !this.ensureDocumentSize(doc)); const sizesReady = !this.items.some((doc) => !this.ensureDocumentSize(doc));
if (!persistenceReady) { if (!persistenceReady) {
if (isDevEnvironment()) {
console.log('[desk][layout] ensureLayoutForItems -> waiting for persisted layout to load', {
allowLayoutPersistence: this.allowLayoutPersistence,
initialLoadDone: this.initialLoadDone,
});
}
return; return;
} }
if (!canvasReady) { if (!canvasReady) {
if (isDevEnvironment()) {
console.log('[desk][layout] ensureLayoutForItems -> canvas missing size', this.canvasSize);
}
return; return;
} }
if (!this.items.length) { if (!this.items.length) {
@@ -945,9 +864,6 @@ export class WorkspaceEngine {
} }
if (!sizesReady) { if (!sizesReady) {
if (isDevEnvironment()) {
console.log('[desk][layout] ensureLayoutForItems -> waiting for document sizes');
}
return; return;
} }
@@ -956,11 +872,8 @@ export class WorkspaceEngine {
const canvasWidth = this.canvasSize.width || DESK_DEFAULT_CANVAS_WIDTH; const canvasWidth = this.canvasSize.width || DESK_DEFAULT_CANVAS_WIDTH;
const canvasHeight = this.canvasSize.height || DESK_DEFAULT_CANVAS_HEIGHT; const canvasHeight = this.canvasSize.height || DESK_DEFAULT_CANVAS_HEIGHT;
const docsNeedingLayout = []; const docsNeedingLayout = [];
let generatedCount = 0;
const currentEntries = new Map(this.layout); const currentEntries = new Map(this.layout);
let persistedAppliedCount = 0;
let reusedCurrentCount = 0;
this.items.forEach((doc) => { this.items.forEach((doc) => {
if (!doc?.id) { if (!doc?.id) {
@@ -982,8 +895,6 @@ export class WorkspaceEngine {
const persisted = this.persistedLayout.get(docKey); const persisted = this.persistedLayout.get(docKey);
const currentEntry = currentEntries.get(docKey) || null; const currentEntry = currentEntries.get(docKey) || null;
const hasPersisted = Boolean(persisted);
const hasCurrent = !hasPersisted && Boolean(currentEntry);
let existing = persisted || currentEntry; let existing = persisted || currentEntry;
if (existing) { if (existing) {
const defaultCenterX = (minCenterX + maxCenterX) / 2; const defaultCenterX = (minCenterX + maxCenterX) / 2;
@@ -996,11 +907,6 @@ export class WorkspaceEngine {
const z = existing.z ?? maxZ; const z = existing.z ?? maxZ;
maxZ = Math.max(maxZ, z); maxZ = Math.max(maxZ, z);
next.set(docKey, { centerX, centerY, rotation, z, width: docWidth, height: docHeight }); next.set(docKey, { centerX, centerY, rotation, z, width: docWidth, height: docHeight });
if (hasPersisted) {
persistedAppliedCount += 1;
} else if (hasCurrent) {
reusedCurrentCount += 1;
}
return; return;
} }
@@ -1027,31 +933,14 @@ export class WorkspaceEngine {
); );
generatedLayout.forEach((entry, docId) => { generatedLayout.forEach((entry, docId) => {
next.set(docId, entry); next.set(docId, entry);
generatedCount += 1;
}); });
maxZ = Math.max(maxZ, updatedMaxZ); maxZ = Math.max(maxZ, updatedMaxZ);
if (isDevEnvironment()) {
console.log('[desk][layout] ensureLayoutForItems -> generated layout for items', {
requested: docsNeedingLayout.length,
applied: generatedCount,
});
}
} }
this.layout = next; this.layout = next;
this.zCounter = Math.max(this.zCounter, maxZ); this.zCounter = Math.max(this.zCounter, maxZ);
this.syncLayoutSnapshot(); this.syncLayoutSnapshot();
this.recalcVisibleDocIds(); this.recalcVisibleDocIds();
if (isDevEnvironment()) {
console.log('[desk][layout] ensureLayoutForItems -> applied layout', {
items: this.items.length,
layoutSize: this.layout.size,
persistedAppliedCount,
reusedCurrentCount,
generatedCount,
initialLoadDone: this.initialLoadDone,
});
}
} }
recalcVisibleDocIds() { recalcVisibleDocIds() {
@@ -1222,38 +1111,14 @@ export class WorkspaceEngine {
async loadPersistedLayout() { async loadPersistedLayout() {
if (!this.allowLayoutPersistence || !this.tenantId || !this.viewId) { if (!this.allowLayoutPersistence || !this.tenantId || !this.viewId) {
if (isDevEnvironment()) {
console.log('[desk][load] loadPersistedLayout -> aborted, missing config', {
allowLayoutPersistence: this.allowLayoutPersistence,
tenantId: this.tenantId,
viewId: this.viewId,
});
}
return; return;
} }
if (this.loadingPersisted || this.initialLoadDone) { if (this.loadingPersisted || this.initialLoadDone) {
if (isDevEnvironment()) {
console.log('[desk][load] loadPersistedLayout -> already loading or done', {
loadingPersisted: this.loadingPersisted,
initialLoadDone: this.initialLoadDone,
});
}
return; return;
} }
this.loadingPersisted = true; this.loadingPersisted = true;
try { try {
if (isDevEnvironment()) {
console.log('[desk][load] loadPersistedLayout -> fetching', {
tenantId: this.tenantId,
viewId: this.viewId,
});
}
const records = await fetchLayoutRecords({ tenantId: this.tenantId, viewId: this.viewId }); const records = await fetchLayoutRecords({ tenantId: this.tenantId, viewId: this.viewId });
if (isDevEnvironment()) {
console.log('[desk][load] loadPersistedLayout -> fetched records', {
count: records.length,
});
}
const map = new Map(); const map = new Map();
records.forEach((record) => { records.forEach((record) => {
if (!record || !record.documentId) { if (!record || !record.documentId) {
@@ -1276,12 +1141,6 @@ export class WorkspaceEngine {
this.layoutSnapshot = new Map(this.layout); this.layoutSnapshot = new Map(this.layout);
this.ensureLayoutForItems(); this.ensureLayoutForItems();
this.initialLoadDone = true; this.initialLoadDone = true;
if (isDevEnvironment()) {
console.log('[desk][load] loadPersistedLayout -> applied persisted layout', {
layoutSize: this.layout.size,
persistedSize: this.persistedLayout.size,
});
}
this.emit(); this.emit();
} catch (error) { } catch (error) {
console.warn('[desk] Failed to load persisted layout', error); console.warn('[desk] Failed to load persisted layout', error);
@@ -1292,11 +1151,6 @@ export class WorkspaceEngine {
if (!this.layout.size) { if (!this.layout.size) {
this.ensureLayoutForItems(); this.ensureLayoutForItems();
} }
if (isDevEnvironment()) {
console.log('[desk][load] loadPersistedLayout -> fallback to generated layout', {
layoutSize: this.layout.size,
});
}
this.emit(); this.emit();
} }
} }