mirror of
https://github.com/OpenCut-app/OpenCut.git
synced 2026-07-13 21:52:53 +02:00
chore: normalize line endings
This commit is contained in:
Maze Winther
+209
-209
@@ -1,209 +1,209 @@
|
||||
import { useCallback, useEffect, useMemo } from "react";
|
||||
import { useAssetsPanelStore } from "@/stores/assets-panel-store";
|
||||
|
||||
function mergeUniqueIds({ ids }: { ids: string[] }) {
|
||||
return [...new Set(ids)];
|
||||
}
|
||||
|
||||
function getRangeIds({
|
||||
orderedIds,
|
||||
anchorId,
|
||||
targetId,
|
||||
}: {
|
||||
orderedIds: string[];
|
||||
anchorId: string;
|
||||
targetId: string;
|
||||
}) {
|
||||
const anchorIndex = orderedIds.indexOf(anchorId);
|
||||
const targetIndex = orderedIds.indexOf(targetId);
|
||||
|
||||
if (anchorIndex === -1 || targetIndex === -1) {
|
||||
return [targetId];
|
||||
}
|
||||
|
||||
const rangeStart = Math.min(anchorIndex, targetIndex);
|
||||
const rangeEnd = Math.max(anchorIndex, targetIndex);
|
||||
return orderedIds.slice(rangeStart, rangeEnd + 1);
|
||||
}
|
||||
|
||||
export function useAssetsSelection({
|
||||
orderedIds,
|
||||
}: {
|
||||
orderedIds: string[];
|
||||
}) {
|
||||
const {
|
||||
selectedMediaIds,
|
||||
selectionAnchorId,
|
||||
setMediaSelection,
|
||||
clearMediaSelection,
|
||||
} = useAssetsPanelStore();
|
||||
const selectedIdSet = useMemo(() => {
|
||||
return new Set(selectedMediaIds);
|
||||
}, [selectedMediaIds]);
|
||||
|
||||
useEffect(() => {
|
||||
const validIds = new Set(orderedIds);
|
||||
const nextSelectedIds = selectedMediaIds.filter((id) => validIds.has(id));
|
||||
const nextAnchorId =
|
||||
selectionAnchorId && validIds.has(selectionAnchorId)
|
||||
? selectionAnchorId
|
||||
: nextSelectedIds[nextSelectedIds.length - 1] ?? null;
|
||||
const isSelectionUnchanged =
|
||||
nextSelectedIds.length === selectedMediaIds.length &&
|
||||
nextAnchorId === selectionAnchorId;
|
||||
|
||||
if (isSelectionUnchanged) {
|
||||
return;
|
||||
}
|
||||
|
||||
setMediaSelection({
|
||||
ids: nextSelectedIds,
|
||||
anchorId: nextAnchorId,
|
||||
});
|
||||
}, [orderedIds, selectedMediaIds, selectionAnchorId, setMediaSelection]);
|
||||
|
||||
const replaceSelection = useCallback(
|
||||
(ids: string[], anchorId?: string | null) => {
|
||||
setMediaSelection({
|
||||
ids: mergeUniqueIds({ ids }),
|
||||
anchorId,
|
||||
});
|
||||
},
|
||||
[setMediaSelection],
|
||||
);
|
||||
|
||||
const isSelected = useCallback(
|
||||
(id: string) => {
|
||||
return selectedIdSet.has(id);
|
||||
},
|
||||
[selectedIdSet],
|
||||
);
|
||||
|
||||
const toggleSelection = useCallback(
|
||||
(id: string) => {
|
||||
if (selectedIdSet.has(id)) {
|
||||
const nextSelectedIds = selectedMediaIds.filter(
|
||||
(selectedId) => selectedId !== id,
|
||||
);
|
||||
const nextAnchorId =
|
||||
selectionAnchorId === id
|
||||
? nextSelectedIds[nextSelectedIds.length - 1] ?? null
|
||||
: selectionAnchorId;
|
||||
replaceSelection(nextSelectedIds, nextAnchorId);
|
||||
return;
|
||||
}
|
||||
|
||||
replaceSelection([...selectedMediaIds, id], id);
|
||||
},
|
||||
[
|
||||
selectedIdSet,
|
||||
selectedMediaIds,
|
||||
selectionAnchorId,
|
||||
replaceSelection,
|
||||
],
|
||||
);
|
||||
|
||||
const selectRange = useCallback(
|
||||
({
|
||||
targetId,
|
||||
isAdditive,
|
||||
}: {
|
||||
targetId: string;
|
||||
isAdditive: boolean;
|
||||
}) => {
|
||||
const anchorId =
|
||||
selectionAnchorId ??
|
||||
selectedMediaIds[selectedMediaIds.length - 1] ??
|
||||
targetId;
|
||||
const rangeIds = getRangeIds({
|
||||
orderedIds,
|
||||
anchorId,
|
||||
targetId,
|
||||
});
|
||||
const nextSelectedIds = isAdditive
|
||||
? mergeUniqueIds({
|
||||
ids: [...selectedMediaIds, ...rangeIds],
|
||||
})
|
||||
: rangeIds;
|
||||
|
||||
replaceSelection(nextSelectedIds, anchorId);
|
||||
},
|
||||
[orderedIds, replaceSelection, selectedMediaIds, selectionAnchorId],
|
||||
);
|
||||
|
||||
const handleItemClick = useCallback(
|
||||
({
|
||||
event,
|
||||
id,
|
||||
}: {
|
||||
event: React.MouseEvent;
|
||||
id: string;
|
||||
}) => {
|
||||
const isToggleSelection = event.ctrlKey || event.metaKey;
|
||||
|
||||
if (event.shiftKey) {
|
||||
selectRange({
|
||||
targetId: id,
|
||||
isAdditive: isToggleSelection,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (isToggleSelection) {
|
||||
toggleSelection(id);
|
||||
return;
|
||||
}
|
||||
|
||||
replaceSelection([id], id);
|
||||
},
|
||||
[replaceSelection, selectRange, toggleSelection],
|
||||
);
|
||||
|
||||
const handleItemContextMenu = useCallback(
|
||||
(id: string) => {
|
||||
if (selectedIdSet.has(id)) {
|
||||
return;
|
||||
}
|
||||
|
||||
replaceSelection([id], id);
|
||||
},
|
||||
[selectedIdSet, replaceSelection],
|
||||
);
|
||||
|
||||
const applyBoxSelection = useCallback(
|
||||
({
|
||||
intersectedIds,
|
||||
initialSelectedIds,
|
||||
initialAnchorId,
|
||||
isAdditive,
|
||||
}: {
|
||||
intersectedIds: string[];
|
||||
initialSelectedIds: string[];
|
||||
initialAnchorId: string | null;
|
||||
isAdditive: boolean;
|
||||
}) => {
|
||||
const nextSelectedIds = isAdditive
|
||||
? mergeUniqueIds({
|
||||
ids: [...initialSelectedIds, ...intersectedIds],
|
||||
})
|
||||
: intersectedIds;
|
||||
const nextAnchorId = isAdditive
|
||||
? initialAnchorId ?? intersectedIds[intersectedIds.length - 1] ?? null
|
||||
: intersectedIds[intersectedIds.length - 1] ?? null;
|
||||
|
||||
replaceSelection(nextSelectedIds, nextAnchorId);
|
||||
},
|
||||
[replaceSelection],
|
||||
);
|
||||
|
||||
return {
|
||||
selectedMediaIds,
|
||||
selectionAnchorId,
|
||||
isSelected,
|
||||
replaceSelection,
|
||||
clearSelection: clearMediaSelection,
|
||||
handleItemClick,
|
||||
handleItemContextMenu,
|
||||
applyBoxSelection,
|
||||
};
|
||||
}
|
||||
import { useCallback, useEffect, useMemo } from "react";
|
||||
import { useAssetsPanelStore } from "@/stores/assets-panel-store";
|
||||
|
||||
function mergeUniqueIds({ ids }: { ids: string[] }) {
|
||||
return [...new Set(ids)];
|
||||
}
|
||||
|
||||
function getRangeIds({
|
||||
orderedIds,
|
||||
anchorId,
|
||||
targetId,
|
||||
}: {
|
||||
orderedIds: string[];
|
||||
anchorId: string;
|
||||
targetId: string;
|
||||
}) {
|
||||
const anchorIndex = orderedIds.indexOf(anchorId);
|
||||
const targetIndex = orderedIds.indexOf(targetId);
|
||||
|
||||
if (anchorIndex === -1 || targetIndex === -1) {
|
||||
return [targetId];
|
||||
}
|
||||
|
||||
const rangeStart = Math.min(anchorIndex, targetIndex);
|
||||
const rangeEnd = Math.max(anchorIndex, targetIndex);
|
||||
return orderedIds.slice(rangeStart, rangeEnd + 1);
|
||||
}
|
||||
|
||||
export function useAssetsSelection({
|
||||
orderedIds,
|
||||
}: {
|
||||
orderedIds: string[];
|
||||
}) {
|
||||
const {
|
||||
selectedMediaIds,
|
||||
selectionAnchorId,
|
||||
setMediaSelection,
|
||||
clearMediaSelection,
|
||||
} = useAssetsPanelStore();
|
||||
const selectedIdSet = useMemo(() => {
|
||||
return new Set(selectedMediaIds);
|
||||
}, [selectedMediaIds]);
|
||||
|
||||
useEffect(() => {
|
||||
const validIds = new Set(orderedIds);
|
||||
const nextSelectedIds = selectedMediaIds.filter((id) => validIds.has(id));
|
||||
const nextAnchorId =
|
||||
selectionAnchorId && validIds.has(selectionAnchorId)
|
||||
? selectionAnchorId
|
||||
: nextSelectedIds[nextSelectedIds.length - 1] ?? null;
|
||||
const isSelectionUnchanged =
|
||||
nextSelectedIds.length === selectedMediaIds.length &&
|
||||
nextAnchorId === selectionAnchorId;
|
||||
|
||||
if (isSelectionUnchanged) {
|
||||
return;
|
||||
}
|
||||
|
||||
setMediaSelection({
|
||||
ids: nextSelectedIds,
|
||||
anchorId: nextAnchorId,
|
||||
});
|
||||
}, [orderedIds, selectedMediaIds, selectionAnchorId, setMediaSelection]);
|
||||
|
||||
const replaceSelection = useCallback(
|
||||
(ids: string[], anchorId?: string | null) => {
|
||||
setMediaSelection({
|
||||
ids: mergeUniqueIds({ ids }),
|
||||
anchorId,
|
||||
});
|
||||
},
|
||||
[setMediaSelection],
|
||||
);
|
||||
|
||||
const isSelected = useCallback(
|
||||
(id: string) => {
|
||||
return selectedIdSet.has(id);
|
||||
},
|
||||
[selectedIdSet],
|
||||
);
|
||||
|
||||
const toggleSelection = useCallback(
|
||||
(id: string) => {
|
||||
if (selectedIdSet.has(id)) {
|
||||
const nextSelectedIds = selectedMediaIds.filter(
|
||||
(selectedId) => selectedId !== id,
|
||||
);
|
||||
const nextAnchorId =
|
||||
selectionAnchorId === id
|
||||
? nextSelectedIds[nextSelectedIds.length - 1] ?? null
|
||||
: selectionAnchorId;
|
||||
replaceSelection(nextSelectedIds, nextAnchorId);
|
||||
return;
|
||||
}
|
||||
|
||||
replaceSelection([...selectedMediaIds, id], id);
|
||||
},
|
||||
[
|
||||
selectedIdSet,
|
||||
selectedMediaIds,
|
||||
selectionAnchorId,
|
||||
replaceSelection,
|
||||
],
|
||||
);
|
||||
|
||||
const selectRange = useCallback(
|
||||
({
|
||||
targetId,
|
||||
isAdditive,
|
||||
}: {
|
||||
targetId: string;
|
||||
isAdditive: boolean;
|
||||
}) => {
|
||||
const anchorId =
|
||||
selectionAnchorId ??
|
||||
selectedMediaIds[selectedMediaIds.length - 1] ??
|
||||
targetId;
|
||||
const rangeIds = getRangeIds({
|
||||
orderedIds,
|
||||
anchorId,
|
||||
targetId,
|
||||
});
|
||||
const nextSelectedIds = isAdditive
|
||||
? mergeUniqueIds({
|
||||
ids: [...selectedMediaIds, ...rangeIds],
|
||||
})
|
||||
: rangeIds;
|
||||
|
||||
replaceSelection(nextSelectedIds, anchorId);
|
||||
},
|
||||
[orderedIds, replaceSelection, selectedMediaIds, selectionAnchorId],
|
||||
);
|
||||
|
||||
const handleItemClick = useCallback(
|
||||
({
|
||||
event,
|
||||
id,
|
||||
}: {
|
||||
event: React.MouseEvent;
|
||||
id: string;
|
||||
}) => {
|
||||
const isToggleSelection = event.ctrlKey || event.metaKey;
|
||||
|
||||
if (event.shiftKey) {
|
||||
selectRange({
|
||||
targetId: id,
|
||||
isAdditive: isToggleSelection,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (isToggleSelection) {
|
||||
toggleSelection(id);
|
||||
return;
|
||||
}
|
||||
|
||||
replaceSelection([id], id);
|
||||
},
|
||||
[replaceSelection, selectRange, toggleSelection],
|
||||
);
|
||||
|
||||
const handleItemContextMenu = useCallback(
|
||||
(id: string) => {
|
||||
if (selectedIdSet.has(id)) {
|
||||
return;
|
||||
}
|
||||
|
||||
replaceSelection([id], id);
|
||||
},
|
||||
[selectedIdSet, replaceSelection],
|
||||
);
|
||||
|
||||
const applyBoxSelection = useCallback(
|
||||
({
|
||||
intersectedIds,
|
||||
initialSelectedIds,
|
||||
initialAnchorId,
|
||||
isAdditive,
|
||||
}: {
|
||||
intersectedIds: string[];
|
||||
initialSelectedIds: string[];
|
||||
initialAnchorId: string | null;
|
||||
isAdditive: boolean;
|
||||
}) => {
|
||||
const nextSelectedIds = isAdditive
|
||||
? mergeUniqueIds({
|
||||
ids: [...initialSelectedIds, ...intersectedIds],
|
||||
})
|
||||
: intersectedIds;
|
||||
const nextAnchorId = isAdditive
|
||||
? initialAnchorId ?? intersectedIds[intersectedIds.length - 1] ?? null
|
||||
: intersectedIds[intersectedIds.length - 1] ?? null;
|
||||
|
||||
replaceSelection(nextSelectedIds, nextAnchorId);
|
||||
},
|
||||
[replaceSelection],
|
||||
);
|
||||
|
||||
return {
|
||||
selectedMediaIds,
|
||||
selectionAnchorId,
|
||||
isSelected,
|
||||
replaceSelection,
|
||||
clearSelection: clearMediaSelection,
|
||||
handleItemClick,
|
||||
handleItemContextMenu,
|
||||
applyBoxSelection,
|
||||
};
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user