sepehr/Keep
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix(grid): repair muuri drag&drop and visual styles

Browse Source 
- Fix Muuri integration: add data-draggable and improve DOM sync
- Fix Drag Visuals: remove opacity/rotation/scale in NoteCard and CSS to prevent 'gray/crooked' look
- Feat(layout): switch to padding-based spacing strategy (16px gap)
- Fix(css): correct media queries to maintain consistent spacing
This commit is contained in:
sepehr
2026-01-24 17:53:40 +01:00
parent ddb67ba9e5
commit d59ec592eb
5 changed files with 203 additions and 255 deletions
Download Patch File Download Diff File Expand all files Collapse all files

254
keep-notes/components/masonry-grid.tsx
View File

@@ -9,7 +9,7 @@ import { useResizeObserver } from '@/hooks/use-resize-observer';
import { useNotebookDrag } from '@/context/notebook-drag-context';
import { useLanguage } from '@/lib/i18n';
import { DEFAULT_LAYOUT, calculateColumns, calculateItemWidth, isMobileViewport } from '@/config/masonry-layout';
import './masonry-grid.css';
import './masonry-grid.css'; // Force rebuild: Spacing update verification
interface MasonryGridProps {
notes: Note[];
@@ -22,9 +22,10 @@ interface MasonryItemProps {
onResize: () => void;
onDragStart?: (noteId: string) => void;
onDragEnd?: () => void;
isDragging?: boolean;
}
const MasonryItem = memo(function MasonryItem({ note, onEdit, onResize, onDragStart, onDragEnd }: MasonryItemProps) {
const MasonryItem = memo(function MasonryItem({ note, onEdit, onResize, onDragStart, onDragEnd, isDragging }: MasonryItemProps) {
const resizeRef = useResizeObserver(onResize);
return (
@@ -41,13 +42,14 @@ const MasonryItem = memo(function MasonryItem({ note, onEdit, onResize, onDragSt
onEdit={onEdit}
onDragStart={onDragStart}
onDragEnd={onDragEnd}
isDragging={isDragging}
/>
</div>
</div>
);
}, (prev, next) => {
// Custom comparison to avoid re-render on function prop changes if note data is same
return prev.note.id === next.note.id; // Removed isDragging comparison
return prev.note.id === next.note.id && prev.isDragging === next.isDragging;
});
export function MasonryGrid({ notes, onEdit }: MasonryGridProps) {
@@ -55,14 +57,7 @@ export function MasonryGrid({ notes, onEdit }: MasonryGridProps) {
const [editingNote, setEditingNote] = useState<{ note: Note; readOnly?: boolean } | null>(null);
const { startDrag, endDrag, draggedNoteId } = useNotebookDrag();
const lastDragEndTime = useRef<number>(0);
const handleEdit = useCallback((note: Note, readOnly?: boolean) => {
// Prevent opening note if it was just dragged (within 200ms)
if (Date.now() - lastDragEndTime.current < 200) {
return;
}
if (onEdit) {
onEdit(note, readOnly);
} else {
@@ -86,9 +81,6 @@ export function MasonryGrid({ notes, onEdit }: MasonryGridProps) {
);
const handleDragEnd = useCallback(async (grid: any) => {
// Record drag end time to prevent accidental clicks
lastDragEndTime.current = Date.now();
if (!grid) return;
const items = grid.getItems();
@@ -105,32 +97,21 @@ export function MasonryGrid({ notes, onEdit }: MasonryGridProps) {
}
}, []);
const layoutTimeoutRef = useRef<NodeJS.Timeout>();
const refreshLayout = useCallback((_?: any) => {
if (layoutTimeoutRef.current) {
clearTimeout(layoutTimeoutRef.current);
}
layoutTimeoutRef.current = setTimeout(() => {
requestAnimationFrame(() => {
if (pinnedMuuri.current) {
pinnedMuuri.current.refreshItems().layout();
}
if (othersMuuri.current) {
othersMuuri.current.refreshItems().layout();
}
});
}, 100); // 100ms debounce
const refreshLayout = useCallback(() => {
requestAnimationFrame(() => {
if (pinnedMuuri.current) {
pinnedMuuri.current.refreshItems().layout();
}
if (othersMuuri.current) {
othersMuuri.current.refreshItems().layout();
}
});
}, []);
// Ref for container to use with ResizeObserver
const containerRef = useRef<HTMLDivElement>(null);
// Centralized function to apply item dimensions based on container width
const applyItemDimensions = useCallback((grid: any, containerWidth: number) => {
if (!grid) return;
// Calculate columns and item width based on container width
const columns = calculateColumns(containerWidth);
const itemWidth = calculateItemWidth(containerWidth, columns);
@@ -139,11 +120,12 @@ export function MasonryGrid({ notes, onEdit }: MasonryGridProps) {
const el = item.getElement();
if (el) {
el.style.width = `${itemWidth}px`;
// Height is auto - determined by content (Google Keep style)
// Height is auto (determined by content) - Google Keep style
}
});
}, []);
// Initialize Muuri grids once on mount and sync when needed
useEffect(() => {
let isMounted = true;
let muuriInitialized = false;
@@ -172,34 +154,12 @@ export function MasonryGrid({ notes, onEdit }: MasonryGridProps) {
console.log(`[Masonry] Container width: ${containerWidth}px, Columns: ${columns}, Item width: ${itemWidth}px`);
// Calculate item dimensions based on note size
const getItemDimensions = (note: Note) => {
const baseWidth = itemWidth;
let baseHeight = 200; // Default medium height
switch (note.size) {
case 'small':
baseHeight = 150;
break;
case 'medium':
baseHeight = 200;
break;
case 'large':
baseHeight = 300;
break;
default:
baseHeight = 200;
}
return { width: baseWidth, height: baseHeight };
};
const layoutOptions = {
dragEnabled: true,
// Use drag handle for mobile devices to allow smooth scrolling
// On desktop, whole card is draggable (no handle needed)
dragHandle: isMobile ? '.muuri-drag-handle' : undefined,
// dragContainer: document.body, // REMOVED: Keep item in grid to prevent React conflict
dragContainer: document.body,
dragStartPredicate: {
distance: 10,
delay: 0,
@@ -208,10 +168,8 @@ export function MasonryGrid({ notes, onEdit }: MasonryGridProps) {
enabled: true,
createElement: (item: any) => {
const el = item.getElement().cloneNode(true);
el.style.opacity = '0.4';
el.style.transform = 'scale(1.05)';
el.style.boxShadow = '0 20px 40px rgba(0, 0, 0, 0.3)';
el.classList.add('muuri-item-placeholder');
// Styles are now handled purely by CSS (.muuri-item-placeholder)
// to avoid inline style conflicts and "grayed out/tilted" look
return el;
},
},
@@ -223,113 +181,35 @@ export function MasonryGrid({ notes, onEdit }: MasonryGridProps) {
threshold: 50, // Start auto-scroll earlier (50px from edge)
smoothStop: true, // Smooth deceleration
},
// IMPROVED: Configuration for drag release handling
dragRelease: {
duration: 300,
easing: 'cubic-bezier(0.25, 1, 0.5, 1)',
useDragContainer: false, // REMOVED: Keep item in grid
},
dragCssProps: {
touchAction: 'none',
userSelect: 'none',
userDrag: 'none',
tapHighlightColor: 'rgba(0, 0, 0, 0)',
touchCallout: 'none',
contentZooming: 'none',
},
// CRITICAL: Grid layout configuration for fixed width items
layoutDuration: 30, // Much faster layout for responsiveness
layoutEasing: 'ease-out',
// Use grid layout for better control over item placement
// LAYOUT OPTIONS - Configure masonry grid behavior
// These options are critical for proper masonry layout with different item sizes
layoutDuration: 300,
layoutEasing: 'cubic-bezier(0.25, 1, 0.5, 1)',
fillGaps: true,
horizontal: false,
alignRight: false,
alignBottom: false,
rounding: false,
// CRITICAL: Enable true masonry layout for different item sizes
layout: {
// Enable true masonry layout - items can be different heights
fillGaps: true,
horizontal: false,
alignRight: false,
alignBottom: false,
rounding: false,
// Set fixed width and let height be determined by content
// This creates a Google Keep-like masonry layout
itemPositioning: {
onLayout: true,
onResize: true,
onInit: true,
},
},
dragSort: true,
dragSortInterval: 50,
// Enable drag and drop with proper drag handling
dragSortHeuristics: {
sortInterval: 0, // Zero interval for immediate sorting
minDragDistance: 5,
minBounceBackAngle: 1,
},
// Grid configuration for responsive columns
visibleStyles: {
opacity: '1',
transform: 'scale(1)',
},
hiddenStyles: {
opacity: '0',
transform: 'scale(0.5)',
},
};
// Initialize pinned grid
if (pinnedGridRef.current && !pinnedMuuri.current) {
// Set container width explicitly
pinnedGridRef.current.style.width = '100%';
pinnedGridRef.current.style.position = 'relative';
// Get all items in the pinned grid and set their dimensions
const pinnedItems = Array.from(pinnedGridRef.current.children);
pinnedItems.forEach((item) => {
const noteId = item.getAttribute('data-id');
const note = pinnedNotes.find(n => n.id === noteId);
if (note) {
const dims = getItemDimensions(note);
(item as HTMLElement).style.width = `${dims.width}px`;
// Don't set height - let content determine it like Google Keep
}
});
pinnedMuuri.current = new MuuriClass(pinnedGridRef.current, layoutOptions)
.on('dragEnd', () => handleDragEnd(pinnedMuuri.current))
.on('dragStart', () => {
// Optional: visual feedback or state update
});
// Initial layout
requestAnimationFrame(() => {
pinnedMuuri.current?.refreshItems().layout();
});
.on('dragEnd', () => handleDragEnd(pinnedMuuri.current));
}
// Initialize others grid
if (othersGridRef.current && !othersMuuri.current) {
// Set container width explicitly
othersGridRef.current.style.width = '100%';
othersGridRef.current.style.position = 'relative';
// Get all items in the others grid and set their dimensions
const othersItems = Array.from(othersGridRef.current.children);
othersItems.forEach((item) => {
const noteId = item.getAttribute('data-id');
const note = othersNotes.find(n => n.id === noteId);
if (note) {
const dims = getItemDimensions(note);
(item as HTMLElement).style.width = `${dims.width}px`;
// Don't set height - let content determine it like Google Keep
}
});
othersMuuri.current = new MuuriClass(othersGridRef.current, layoutOptions)
.on('dragEnd', () => handleDragEnd(othersMuuri.current));
// Initial layout
requestAnimationFrame(() => {
othersMuuri.current?.refreshItems().layout();
});
}
};
@@ -346,16 +226,14 @@ export function MasonryGrid({ notes, onEdit }: MasonryGridProps) {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
// Synchronize items when notes change (e.g. searching, adding, removing)
// Container ref for ResizeObserver
const containerRef = useRef<HTMLDivElement>(null);
// Synchronize items when notes change (e.g. searching, adding)
useEffect(() => {
const syncGridItems = (
grid: any,
gridRef: React.RefObject<HTMLDivElement | null>,
notesArray: Note[]
) => {
const syncGridItems = (grid: any, gridRef: React.RefObject<HTMLDivElement | null>, notesArray: Note[]) => {
if (!grid || !gridRef.current) return;
// Get container width for dimension calculation
const containerWidth = containerRef.current?.getBoundingClientRect().width || window.innerWidth - 32;
const columns = calculateColumns(containerWidth);
const itemWidth = calculateItemWidth(containerWidth, columns);
@@ -363,94 +241,80 @@ export function MasonryGrid({ notes, onEdit }: MasonryGridProps) {
// Get current DOM elements and Muuri items
const domElements = Array.from(gridRef.current.children) as HTMLElement[];
const muuriItems = grid.getItems();
// Map Muuri items to their elements for comparison
const muuriElements = muuriItems.map((item: any) => item.getElement());
// Find new elements to add (in DOM but not in Muuri)
const newElements = domElements.filter(el => !muuriElements.includes(el));
// Find removed items (in Muuri but not in DOM)
// Find elements to remove (in Muuri but not in DOM)
const removedItems = muuriItems.filter((item: any) =>
!domElements.includes(item.getElement())
);
// Remove old items from Muuri
// Remove old items
if (removedItems.length > 0) {
console.log(`[Masonry Sync] Removing ${removedItems.length} items`);
grid.remove(removedItems, { layout: false });
}
// Add new items to Muuri with correct width
// Add new items with correct width
if (newElements.length > 0) {
console.log(`[Masonry Sync] Adding ${newElements.length} new items`);
newElements.forEach(el => {
el.style.width = `${itemWidth}px`;
});
grid.add(newElements, { layout: false });
}
// Update all existing item widths
// Update all item widths to ensure consistency
domElements.forEach(el => {
el.style.width = `${itemWidth}px`;
});
// Refresh and layout - CRITICAL: Always refresh items to catch content size changes
// Use requestAnimationFrame to ensure DOM has painted
requestAnimationFrame(() => {
grid.refreshItems().layout();
});
// Refresh and layout
grid.refreshItems().layout();
};
// Use setTimeout to ensure React has finished rendering DOM elements
const timeoutId = setTimeout(() => {
// Use requestAnimationFrame to ensure DOM is updated before syncing
requestAnimationFrame(() => {
syncGridItems(pinnedMuuri.current, pinnedGridRef, pinnedNotes);
syncGridItems(othersMuuri.current, othersGridRef, othersNotes);
}, 50); // Increased timeout slightly to ensure DOM stability
});
}, [pinnedNotes, othersNotes]); // Re-run when notes change
return () => clearTimeout(timeoutId);
}, [pinnedNotes, othersNotes]);
// Handle container resize with ResizeObserver for responsive layout
// Handle container resize to update responsive layout
useEffect(() => {
if (!containerRef.current) return;
if (!containerRef.current || (!pinnedMuuri.current && !othersMuuri.current)) return;
let resizeTimeout: NodeJS.Timeout;
const handleResize = (entries: ResizeObserverEntry[]) => {
clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(() => {
// Get precise width from ResizeObserver
const containerWidth = entries[0]?.contentRect.width || window.innerWidth - 32;
const columns = calculateColumns(containerWidth);
console.log(`[Masonry Resize] Width: ${containerWidth}px, Columns: ${columns}`);
// Apply dimensions to both grids using centralized function
// Apply dimensions to both grids
applyItemDimensions(pinnedMuuri.current, containerWidth);
applyItemDimensions(othersMuuri.current, containerWidth);
// Refresh both grids with new layout
// Refresh layouts
requestAnimationFrame(() => {
if (pinnedMuuri.current) {
pinnedMuuri.current.refreshItems().layout();
}
if (othersMuuri.current) {
othersMuuri.current.refreshItems().layout();
}
pinnedMuuri.current?.refreshItems().layout();
othersMuuri.current?.refreshItems().layout();
});
}, 150);
}, 150); // Debounce
};
const observer = new ResizeObserver(handleResize);
observer.observe(containerRef.current);
// Initial layout calculation
// Initial layout check
if (containerRef.current) {
const initialWidth = containerRef.current.getBoundingClientRect().width || window.innerWidth - 32;
applyItemDimensions(pinnedMuuri.current, initialWidth);
applyItemDimensions(othersMuuri.current, initialWidth);
requestAnimationFrame(() => {
pinnedMuuri.current?.refreshItems().layout();
othersMuuri.current?.refreshItems().layout();
});
handleResize([{ contentRect: containerRef.current.getBoundingClientRect() } as ResizeObserverEntry]);
}
return () => {
@@ -473,6 +337,7 @@ export function MasonryGrid({ notes, onEdit }: MasonryGridProps) {
onResize={refreshLayout}
onDragStart={startDrag}
onDragEnd={endDrag}
isDragging={draggedNoteId === note.id}
/>
))}
</div>
@@ -493,6 +358,7 @@ export function MasonryGrid({ notes, onEdit }: MasonryGridProps) {
onResize={refreshLayout}
onDragStart={startDrag}
onDragEnd={endDrag}
isDragging={draggedNoteId === note.id}
/>
))}
</div>