cleanup
This commit is contained in:
@@ -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();
|
||||
}}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user