fix: add onDragEnd to AssetsPanel to clear isDragging state
- Import endDrag from useUIStore
- Add handleItemDragEnd callback that calls endDrag()
- Add onDragEnd? prop to MediaThumbnail interface
- Wire onDragEnd={onDragEnd} to both draggable divs (list & grid views)
- Pass onDragEnd={handleItemDragEnd} when rendering MediaThumbnail
- Without this, isDragging was permanently stuck at true after every drag
This commit is contained in:
parent
aec55fea83
commit
18c4779f58
1 changed files with 11 additions and 1 deletions
|
|
@ -111,6 +111,7 @@ const MediaThumbnail: React.FC<{
|
||||||
onDelete: () => void;
|
onDelete: () => void;
|
||||||
onReplace: () => void;
|
onReplace: () => void;
|
||||||
onDragStart: (e: React.DragEvent) => void;
|
onDragStart: (e: React.DragEvent) => void;
|
||||||
|
onDragEnd?: (e: React.DragEvent) => void;
|
||||||
onAddToTimeline: () => void;
|
onAddToTimeline: () => void;
|
||||||
onKieAI?: () => void;
|
onKieAI?: () => void;
|
||||||
onRetryKieAI?: () => void;
|
onRetryKieAI?: () => void;
|
||||||
|
|
@ -122,6 +123,7 @@ const MediaThumbnail: React.FC<{
|
||||||
onDelete,
|
onDelete,
|
||||||
onReplace,
|
onReplace,
|
||||||
onDragStart,
|
onDragStart,
|
||||||
|
onDragEnd,
|
||||||
onAddToTimeline,
|
onAddToTimeline,
|
||||||
onKieAI,
|
onKieAI,
|
||||||
onRetryKieAI,
|
onRetryKieAI,
|
||||||
|
|
@ -242,6 +244,7 @@ const MediaThumbnail: React.FC<{
|
||||||
<div
|
<div
|
||||||
draggable
|
draggable
|
||||||
onDragStart={onDragStart}
|
onDragStart={onDragStart}
|
||||||
|
onDragEnd={onDragEnd}
|
||||||
onClick={onSelect}
|
onClick={onSelect}
|
||||||
onDoubleClick={(e) => { e.stopPropagation(); onAddToTimeline(); }}
|
onDoubleClick={(e) => { e.stopPropagation(); onAddToTimeline(); }}
|
||||||
onMouseEnter={() => setIsHovered(true)}
|
onMouseEnter={() => setIsHovered(true)}
|
||||||
|
|
@ -389,6 +392,7 @@ const MediaThumbnail: React.FC<{
|
||||||
<div
|
<div
|
||||||
draggable
|
draggable
|
||||||
onDragStart={onDragStart}
|
onDragStart={onDragStart}
|
||||||
|
onDragEnd={onDragEnd}
|
||||||
onClick={onSelect}
|
onClick={onSelect}
|
||||||
onDoubleClick={(e) => {
|
onDoubleClick={(e) => {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
|
|
@ -605,7 +609,7 @@ export const AssetsPanel: React.FC = () => {
|
||||||
const { retryTask } = useKieAIStore();
|
const { retryTask } = useKieAIStore();
|
||||||
|
|
||||||
// UI store
|
// UI store
|
||||||
const { select, isSelected, startDrag } = useUIStore();
|
const { select, isSelected, startDrag, endDrag } = useUIStore();
|
||||||
|
|
||||||
// Count missing assets
|
// Count missing assets
|
||||||
const missingAssetsCount = mediaItems.filter(
|
const missingAssetsCount = mediaItems.filter(
|
||||||
|
|
@ -811,6 +815,11 @@ export const AssetsPanel: React.FC = () => {
|
||||||
[startDrag],
|
[startDrag],
|
||||||
);
|
);
|
||||||
|
|
||||||
|
// Clear drag state when drag ends (prevents isDragging getting stuck at true)
|
||||||
|
const handleItemDragEnd = useCallback(() => {
|
||||||
|
endDrag();
|
||||||
|
}, [endDrag]);
|
||||||
|
|
||||||
const addMediaToTimeline = useCallback(async (item: MediaItem) => {
|
const addMediaToTimeline = useCallback(async (item: MediaItem) => {
|
||||||
const { addClipToNewTrack } = useProjectStore.getState();
|
const { addClipToNewTrack } = useProjectStore.getState();
|
||||||
await addClipToNewTrack(item.id);
|
await addClipToNewTrack(item.id);
|
||||||
|
|
@ -1019,6 +1028,7 @@ export const AssetsPanel: React.FC = () => {
|
||||||
onDelete={() => handleDeleteItem(item.id)}
|
onDelete={() => handleDeleteItem(item.id)}
|
||||||
onReplace={() => handleReplaceAsset(item.id)}
|
onReplace={() => handleReplaceAsset(item.id)}
|
||||||
onDragStart={(e) => handleItemDragStart(e, item)}
|
onDragStart={(e) => handleItemDragStart(e, item)}
|
||||||
|
onDragEnd={handleItemDragEnd}
|
||||||
onAddToTimeline={() => handleAddToTimeline(item)}
|
onAddToTimeline={() => handleAddToTimeline(item)}
|
||||||
onKieAI={item.type === "image" && !item.isPending && !item.kieaiError ? () => handleOpenKieAI(item) : undefined}
|
onKieAI={item.type === "image" && !item.isPending && !item.kieaiError ? () => handleOpenKieAI(item) : undefined}
|
||||||
onRetryKieAI={item.kieaiError && item.kieaiTaskId ? () => handleRetryKieAI(item) : undefined}
|
onRetryKieAI={item.kieaiError && item.kieaiTaskId ? () => handleRetryKieAI(item) : undefined}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue