This commit is contained in:
2025-11-12 17:02:27 +01:00
parent d2e27c12a2
commit b812d748ea
44 changed files with 221 additions and 356 deletions
+12 -18
View File
@@ -251,7 +251,7 @@ const DesktopWorkspace = ({
commitSize();
if (typeof ResizeObserver === 'undefined') {
if (!('ResizeObserver' in window)) {
window.addEventListener('resize', commitSize);
return () => {
window.removeEventListener('resize', commitSize);
@@ -292,7 +292,7 @@ const DesktopWorkspace = ({
const requestCanvasFocus = useCallback(() => {
const canvas = containerRef.current;
if (!canvas || typeof canvas.focus !== 'function') {
if (!canvas?.focus) {
return;
}
@@ -306,20 +306,14 @@ const DesktopWorkspace = ({
}
};
if (typeof window === 'undefined') {
focusTarget();
const raf = window.requestAnimationFrame;
if (raf) {
raf(() => focusTarget());
return;
}
if (typeof window.requestAnimationFrame === 'function') {
window.requestAnimationFrame(() => {
focusTarget();
});
} else {
setTimeout(() => {
focusTarget();
}, 0);
}
setTimeout(() => {
focusTarget();
}, 0);
}, []);
const tagInteractions = useDeskTagInteractions({
@@ -756,8 +750,8 @@ const DesktopWorkspaceView = ({
return (
<>
<div className="desk-shell" onPointerDown={(event) => {
if (event.target === event.currentTarget && typeof onClearSelection === 'function') {
onClearSelection();
if (event.target === event.currentTarget) {
onClearSelection?.();
}
focusShell();
}}
@@ -771,8 +765,8 @@ const DesktopWorkspaceView = ({
onDragLeave={handleCanvasDragLeave}
onDrop={handleCanvasDrop}
onPointerDown={(event) => {
if (event.target === event.currentTarget && typeof onClearSelection === 'function') {
onClearSelection();
if (event.target === event.currentTarget) {
onClearSelection?.();
}
focusShell();
}}
+3 -2
View File
@@ -10,12 +10,13 @@ const openDatabase = () => {
}
currentDbPromise.value = new Promise((resolve, reject) => {
if (typeof indexedDB === 'undefined') {
const dbApi = window.indexedDB;
if (!dbApi) {
reject(new Error('IndexedDB not available'));
return;
}
const request = indexedDB.open(DB_NAME, DB_VERSION);
const request = dbApi.open(DB_NAME, DB_VERSION);
request.onupgradeneeded = () => {
const db = request.result;
+1 -1
View File
@@ -14,7 +14,7 @@ export const preventAll = (event) => {
}
};
export const safeInvoke = (fn, ...args) => (typeof fn === 'function' ? fn(...args) : undefined);
export const safeInvoke = (fn, ...args) => fn?.(...args);
export const getPointerPosition = (event, { fallbackToPage = true } = {}) => {
if (!event) {
@@ -20,8 +20,7 @@ const usePreviewMetadata = (documents, getDocumentAsset, ensureAssetUrl) => {
}
const docId = String(doc.id);
const resolveAsset = (type) =>
(typeof getDocumentAsset === 'function' ? getDocumentAsset(doc, type) : null);
const resolveAsset = (type) => getDocumentAsset?.(doc, type) ?? null;
let asset = resolveAsset('preview') || resolveAsset('thumbnail');
let view = createAssetView(asset);
+6 -17
View File
@@ -183,9 +183,6 @@ export const useDeskPointer = ({
}
longPressActiveRef.current = true;
if (typeof window === 'undefined') {
return;
}
longPressTimerRef.current = window.setTimeout(() => {
if (!longPressActiveRef.current || pointerMovedRef.current) {
@@ -229,8 +226,8 @@ export const useDeskPointer = ({
pointerMovedRef.current = false;
resetLongPressState();
const pointerButton = typeof event.button === 'number' ? event.button : 0;
const pointerType = typeof event.pointerType === 'string' ? event.pointerType : '';
const pointerButton = Number.isFinite(event?.button) ? event.button : 0;
const pointerType = String(event?.pointerType ?? '');
const metaKey = (event.metaKey || event.ctrlKey) && !event.shiftKey && !event.altKey;
const modifierActive = Boolean(event.metaKey || event.ctrlKey || event.shiftKey || event.altKey);
@@ -322,12 +319,10 @@ export const useDeskPointer = ({
&& !pointerState.longPressTriggered
&& pointerState.docId === doc.id
) {
const expectedButton = typeof pointerState.pointerButton === 'number'
const expectedButton = Number.isFinite(pointerState?.pointerButton)
? pointerState.pointerButton
: 0;
const releasedButton = typeof event.button === 'number'
? event.button
: expectedButton;
const releasedButton = Number.isFinite(event?.button) ? event.button : expectedButton;
const isPrimaryRelease = expectedButton === 0 && releasedButton === 0;
const stillSelected = Array.isArray(selectedDocumentIds)
&& selectedDocumentIds.includes(doc.id);
@@ -401,11 +396,7 @@ export const useDeskPointer = ({
}
}
if (
typeof openOverlayForDoc === 'function'
&& Array.isArray(selectedDocumentIds)
&& selectedDocumentIds.length > 0
) {
if (openOverlayForDoc && Array.isArray(selectedDocumentIds) && selectedDocumentIds.length > 0) {
event.preventDefault();
const targetId = selectedDocumentIds[selectedDocumentIds.length - 1];
if (targetId) {
@@ -427,9 +418,7 @@ export const useDeskPointer = ({
handleShellKeyDown,
focusShell: () => {
const shell = containerRef.current;
if (shell && typeof shell.focus === 'function') {
shell.focus({ preventScroll: true });
}
shell?.focus?.({ preventScroll: true });
},
};
};
@@ -51,9 +51,6 @@ export const useDeskTagInteractions = ({
const removalCursorActiveRef = useRef(false);
const updateRemovalCursor = useCallback((active) => {
if (typeof document === 'undefined') {
return;
}
if (removalCursorActiveRef.current === active) {
return;
}
@@ -100,8 +97,9 @@ export const useDeskTagInteractions = ({
}
};
const scheduleShowNode = () => {
if (typeof window !== 'undefined' && typeof window.requestAnimationFrame === 'function') {
window.requestAnimationFrame(showNode);
const raf = window.requestAnimationFrame;
if (raf) {
raf(showNode);
} else {
setTimeout(showNode, 0);
}
+23 -22
View File
@@ -9,11 +9,15 @@ const DRAG_HYSTERESIS_SQUARED = DRAG_HYSTERESIS_PX * DRAG_HYSTERESIS_PX;
const EDGE_COLLISION_THRESHOLD = 0.5;
const getEventTargetElement = (event) => {
if (typeof Element === 'undefined' || !event) {
if (!event) {
return null;
}
const ElementCtor = window.Element;
if (!ElementCtor) {
return null;
}
const candidate = event.target || (event.nativeEvent ? event.nativeEvent.target : null);
return candidate instanceof Element ? candidate : null;
return candidate instanceof ElementCtor ? candidate : null;
};
const useDocumentDrag = (options = {}) => {
@@ -63,9 +67,7 @@ const useDocumentDrag = (options = {}) => {
openOverlayForDoc(data.docId, data.originInfo);
return;
}
if (typeof onInspectDocument === 'function') {
onInspectDocument(data.docId, event);
}
onInspectDocument?.(data.docId, event);
},
});
const dragStateRef = useRef(null);
@@ -83,7 +85,7 @@ const useDocumentDrag = (options = {}) => {
const clearDragTransforms = useCallback(() => {
const map = dragTransformsRef?.current;
if (!map || typeof map.clear !== 'function') {
if (!map?.clear) {
return;
}
map.clear();
@@ -118,7 +120,7 @@ const useDocumentDrag = (options = {}) => {
const state = dragStateRef.current;
if (state && state.pointerId === pointerId) {
const capturedTarget = state.capturedTarget;
if (capturedTarget && typeof capturedTarget.releasePointerCapture === 'function') {
if (capturedTarget?.releasePointerCapture) {
try {
capturedTarget.releasePointerCapture(pointerId);
} catch (error) {
@@ -141,7 +143,7 @@ const useDocumentDrag = (options = {}) => {
const handlePointerDown = useCallback(
(event, docIdInput, options = {}) => {
const targetElement = getEventTargetElement(event);
if (targetElement && typeof targetElement.closest === 'function' && targetElement.closest('[data-desk-tag-chip="true"]')) {
if (targetElement?.closest && targetElement.closest('[data-desk-tag-chip="true"]')) {
return;
}
preventAll(event);
@@ -167,9 +169,8 @@ const useDocumentDrag = (options = {}) => {
: null;
const stackSelectionAppliedInitial = Boolean(options?.stackSelectionApplied);
const wasSelectedAtPointerDown = Boolean(options?.wasSelected);
const pointerModifierActive = typeof options?.modifierActive === 'boolean'
? options.modifierActive
: Boolean(event.metaKey || event.ctrlKey || event.shiftKey || event.altKey);
const pointerModifierActive =
options?.modifierActive ?? Boolean(event.metaKey || event.ctrlKey || event.shiftKey || event.altKey);
const stackReplace = Boolean(options?.stackReplace);
let selectionIds = Array.isArray(selectedDocumentIds)
@@ -227,8 +228,8 @@ const useDocumentDrag = (options = {}) => {
const entry = layoutRef.current.get(docKey) || null;
const defaultCenterX = canvasPadding + docWidth / 2;
const defaultCenterY = canvasPadding + docHeight / 2;
const centerX = typeof entry?.centerX === 'number' ? entry.centerX : defaultCenterX;
const centerY = typeof entry?.centerY === 'number' ? entry.centerY : defaultCenterY;
const centerX = Number.isFinite(entry?.centerX) ? entry.centerX : defaultCenterX;
const centerY = Number.isFinite(entry?.centerY) ? entry.centerY : defaultCenterY;
const modifierPressed = pointerModifierActive;
if (!modifierPressed) {
@@ -255,7 +256,7 @@ const useDocumentDrag = (options = {}) => {
}
const capturedTarget = event.currentTarget instanceof HTMLElement ? event.currentTarget : null;
if (capturedTarget && typeof capturedTarget.setPointerCapture === 'function') {
if (capturedTarget?.setPointerCapture) {
try {
capturedTarget.setPointerCapture(event.pointerId);
} catch (error) {
@@ -286,9 +287,9 @@ const useDocumentDrag = (options = {}) => {
const itemHeight = itemSize.height || docHeight;
const itemEntry = layoutRef.current.get(id) || null;
const itemCenterX =
typeof itemEntry?.centerX === 'number' ? itemEntry.centerX : canvasPadding + itemWidth / 2;
Number.isFinite(itemEntry?.centerX) ? itemEntry.centerX : canvasPadding + itemWidth / 2;
const itemCenterY =
typeof itemEntry?.centerY === 'number' ? itemEntry.centerY : canvasPadding + itemHeight / 2;
Number.isFinite(itemEntry?.centerY) ? itemEntry.centerY : canvasPadding + itemHeight / 2;
const baseOffsetX = itemCenterX - centerX;
const baseOffsetY = itemCenterY - centerY;
const initialRotation = itemEntry?.rotation ?? 0;
@@ -310,9 +311,9 @@ const useDocumentDrag = (options = {}) => {
});
const eventTimestamp =
typeof event.timeStamp === 'number' && Number.isFinite(event.timeStamp)
(Number.isFinite(event?.timeStamp))
? event.timeStamp
: typeof performance !== 'undefined' && typeof performance.now === 'function'
: performance?.now
? performance.now()
: Date.now();
@@ -540,9 +541,9 @@ const useDocumentDrag = (options = {}) => {
state.lastClientX = event.clientX;
state.lastClientY = event.clientY;
state.lastTimestamp =
typeof event.timeStamp === 'number' && Number.isFinite(event.timeStamp)
(Number.isFinite(event?.timeStamp))
? event.timeStamp
: typeof performance !== 'undefined' && typeof performance.now === 'function'
: performance?.now
? performance.now()
: Date.now();
@@ -663,9 +664,9 @@ const useDocumentDrag = (options = {}) => {
Math.abs(pointerLocalX) <= halfWidth && Math.abs(pointerLocalY) <= halfHeight;
const currentTimestamp =
typeof event.timeStamp === 'number' && Number.isFinite(event.timeStamp)
(Number.isFinite(event?.timeStamp))
? event.timeStamp
: typeof performance !== 'undefined' && typeof performance.now === 'function'
: performance?.now
? performance.now()
: Date.now();
const previousTimestamp = state.lastTimestamp ?? currentTimestamp;
+18 -29
View File
@@ -688,25 +688,19 @@ export class WorkspaceEngine {
if (!key) {
return;
}
if (typeof window === 'undefined') {
this.inertiaAnimations.delete(key);
return;
}
const existing = this.inertiaAnimations.get(key);
if (existing && typeof window.cancelAnimationFrame === 'function') {
if (existing?.frameId != null) {
window.cancelAnimationFrame(existing.frameId);
}
this.inertiaAnimations.delete(key);
}
disposeInertiaAnimations() {
if (typeof window !== 'undefined' && typeof window.cancelAnimationFrame === 'function') {
this.inertiaAnimations.forEach((animation) => {
if (animation?.frameId != null) {
window.cancelAnimationFrame(animation.frameId);
}
});
}
this.inertiaAnimations.forEach((animation) => {
if (animation?.frameId != null) {
window.cancelAnimationFrame(animation.frameId);
}
});
this.inertiaAnimations.clear();
}
@@ -768,7 +762,8 @@ export class WorkspaceEngine {
}
startInertiaAnimation(docId, baseState) {
if (typeof window === 'undefined' || typeof window.requestAnimationFrame !== 'function') {
const raf = window.requestAnimationFrame;
if (!raf) {
return;
}
const key = docId != null ? String(docId) : null;
@@ -778,10 +773,7 @@ export class WorkspaceEngine {
this.cancelInertiaAnimation(key);
const now =
typeof performance !== 'undefined' && typeof performance.now === 'function'
? performance.now()
: Date.now();
const now = performance?.now ? performance.now() : Date.now();
const simulationState = {
...baseState,
@@ -807,10 +799,10 @@ export class WorkspaceEngine {
this.persistLayoutSnapshot();
return;
}
simulationState.frameId = window.requestAnimationFrame(step);
simulationState.frameId = raf(step);
};
simulationState.frameId = window.requestAnimationFrame(step);
simulationState.frameId = raf(step);
this.inertiaAnimations.set(key, simulationState);
}
@@ -885,14 +877,10 @@ export class WorkspaceEngine {
}
};
if (typeof window !== 'undefined' && typeof window.setTimeout === 'function') {
this.persistDebounceId = window.setTimeout(() => {
this.persistDebounceId = null;
void persistTask();
}, 100);
} else {
await persistTask();
}
this.persistDebounceId = window.setTimeout(() => {
this.persistDebounceId = null;
void persistTask();
}, 100);
}
ensureLayoutForItems() {
@@ -1223,8 +1211,9 @@ export const useWorkspaceSnapshot = (engine, useSyncExternalStoreHook) => {
};
/* istanbul ignore next */
if (typeof module !== 'undefined' && module && module.exports) {
module.exports = {
const commonJsModule = globalThis?.module;
if (commonJsModule?.exports) {
commonJsModule.exports = {
WorkspaceEngine,
DESK_CANVAS_PADDING,
DESK_ROTATION_RANGE,