|
|
|
@ -9,22 +9,15 @@ interface Props {
|
|
|
|
listMode?: boolean;
|
|
|
|
listMode?: boolean;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
interface LocalState {
|
|
|
|
|
|
|
|
columns: number;
|
|
|
|
|
|
|
|
itemHeights: Map<string, number>;
|
|
|
|
|
|
|
|
columnHeights: number[];
|
|
|
|
|
|
|
|
distribution: number[][];
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
interface MemoItemProps {
|
|
|
|
interface MemoItemProps {
|
|
|
|
memo: Memo;
|
|
|
|
memo: Memo;
|
|
|
|
renderer: (memo: Memo) => JSX.Element;
|
|
|
|
renderer: (memo: Memo) => JSX.Element;
|
|
|
|
onHeightChange: (memoName: string, height: number) => void;
|
|
|
|
onHeightChange: (memoName: string, height: number) => void;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Minimum width required to show more than one column
|
|
|
|
const MINIMUM_MEMO_VIEWPORT_WIDTH = 512;
|
|
|
|
const MINIMUM_MEMO_VIEWPORT_WIDTH = 512;
|
|
|
|
|
|
|
|
|
|
|
|
// Component to wrap each memo and measure its height
|
|
|
|
|
|
|
|
const MemoItem = ({ memo, renderer, onHeightChange }: MemoItemProps) => {
|
|
|
|
const MemoItem = ({ memo, renderer, onHeightChange }: MemoItemProps) => {
|
|
|
|
const itemRef = useRef<HTMLDivElement>(null);
|
|
|
|
const itemRef = useRef<HTMLDivElement>(null);
|
|
|
|
const resizeObserverRef = useRef<ResizeObserver | null>(null);
|
|
|
|
const resizeObserverRef = useRef<ResizeObserver | null>(null);
|
|
|
|
@ -39,41 +32,40 @@ const MemoItem = ({ memo, renderer, onHeightChange }: MemoItemProps) => {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// Initial measurement
|
|
|
|
|
|
|
|
measureHeight();
|
|
|
|
measureHeight();
|
|
|
|
|
|
|
|
|
|
|
|
// Set up ResizeObserver for dynamic content changes
|
|
|
|
// Set up ResizeObserver to track dynamic content changes (images, expanded text, etc.)
|
|
|
|
resizeObserverRef.current = new ResizeObserver(() => {
|
|
|
|
resizeObserverRef.current = new ResizeObserver(measureHeight);
|
|
|
|
measureHeight();
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
resizeObserverRef.current.observe(itemRef.current);
|
|
|
|
resizeObserverRef.current.observe(itemRef.current);
|
|
|
|
|
|
|
|
|
|
|
|
return () => {
|
|
|
|
return () => {
|
|
|
|
if (resizeObserverRef.current) {
|
|
|
|
resizeObserverRef.current?.disconnect();
|
|
|
|
resizeObserverRef.current.disconnect();
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
};
|
|
|
|
};
|
|
|
|
}, [memo.name, onHeightChange]);
|
|
|
|
}, [memo.name, onHeightChange]);
|
|
|
|
|
|
|
|
|
|
|
|
return <div ref={itemRef}>{renderer(memo)}</div>;
|
|
|
|
return <div ref={itemRef}>{renderer(memo)}</div>;
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// Algorithm to distribute memos into columns based on height
|
|
|
|
/**
|
|
|
|
|
|
|
|
* Algorithm to distribute memos into columns based on height for balanced layout
|
|
|
|
|
|
|
|
* Uses greedy approach: always place next memo in the shortest column
|
|
|
|
|
|
|
|
*/
|
|
|
|
const distributeMemosToColumns = (
|
|
|
|
const distributeMemosToColumns = (
|
|
|
|
memos: Memo[],
|
|
|
|
memos: Memo[],
|
|
|
|
columns: number,
|
|
|
|
columns: number,
|
|
|
|
itemHeights: Map<string, number>,
|
|
|
|
itemHeights: Map<string, number>,
|
|
|
|
prefixElementHeight: number = 0,
|
|
|
|
prefixElementHeight: number = 0,
|
|
|
|
): { distribution: number[][]; columnHeights: number[] } => {
|
|
|
|
): { distribution: number[][]; columnHeights: number[] } => {
|
|
|
|
|
|
|
|
// List mode: all memos in single column
|
|
|
|
if (columns === 1) {
|
|
|
|
if (columns === 1) {
|
|
|
|
// List mode - all memos in single column
|
|
|
|
const totalHeight = memos.reduce((sum, memo) => sum + (itemHeights.get(memo.name) || 0), prefixElementHeight);
|
|
|
|
return {
|
|
|
|
return {
|
|
|
|
distribution: [Array.from(Array(memos.length).keys())],
|
|
|
|
distribution: [Array.from({ length: memos.length }, (_, i) => i)],
|
|
|
|
columnHeights: [memos.reduce((sum, memo) => sum + (itemHeights.get(memo.name) || 0), prefixElementHeight)],
|
|
|
|
columnHeights: [totalHeight],
|
|
|
|
};
|
|
|
|
};
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Initialize columns and heights
|
|
|
|
const distribution: number[][] = Array.from({ length: columns }, () => []);
|
|
|
|
const distribution: number[][] = Array.from({ length: columns }, () => []);
|
|
|
|
const columnHeights: number[] = Array(columns).fill(0);
|
|
|
|
const columnHeights: number[] = Array(columns).fill(0);
|
|
|
|
|
|
|
|
|
|
|
|
@ -82,15 +74,12 @@ const distributeMemosToColumns = (
|
|
|
|
columnHeights[0] = prefixElementHeight;
|
|
|
|
columnHeights[0] = prefixElementHeight;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// Distribute memos to the shortest column each time
|
|
|
|
// Distribute each memo to the shortest column
|
|
|
|
memos.forEach((memo, index) => {
|
|
|
|
memos.forEach((memo, index) => {
|
|
|
|
const height = itemHeights.get(memo.name) || 0;
|
|
|
|
const height = itemHeights.get(memo.name) || 0;
|
|
|
|
|
|
|
|
|
|
|
|
// Find the shortest column
|
|
|
|
// Find column with minimum height
|
|
|
|
const shortestColumnIndex = columnHeights.reduce(
|
|
|
|
const shortestColumnIndex = columnHeights.indexOf(Math.min(...columnHeights));
|
|
|
|
(minIndex, currentHeight, currentIndex) => (currentHeight < columnHeights[minIndex] ? currentIndex : minIndex),
|
|
|
|
|
|
|
|
0,
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
distribution[shortestColumnIndex].push(index);
|
|
|
|
distribution[shortestColumnIndex].push(index);
|
|
|
|
columnHeights[shortestColumnIndex] += height;
|
|
|
|
columnHeights[shortestColumnIndex] += height;
|
|
|
|
@ -100,97 +89,82 @@ const distributeMemosToColumns = (
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const MasonryView = (props: Props) => {
|
|
|
|
const MasonryView = (props: Props) => {
|
|
|
|
const [state, setState] = useState<LocalState>({
|
|
|
|
const [columns, setColumns] = useState(1);
|
|
|
|
columns: 1,
|
|
|
|
const [itemHeights, setItemHeights] = useState<Map<string, number>>(new Map());
|
|
|
|
itemHeights: new Map(),
|
|
|
|
const [distribution, setDistribution] = useState<number[][]>([[]]);
|
|
|
|
columnHeights: [0],
|
|
|
|
|
|
|
|
distribution: [[]],
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
|
|
const prefixElementRef = useRef<HTMLDivElement>(null);
|
|
|
|
const prefixElementRef = useRef<HTMLDivElement>(null);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Calculate optimal number of columns based on container width
|
|
|
|
|
|
|
|
const calculateColumns = useCallback(() => {
|
|
|
|
|
|
|
|
if (!containerRef.current || props.listMode) return 1;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const containerWidth = containerRef.current.offsetWidth;
|
|
|
|
|
|
|
|
const scale = containerWidth / MINIMUM_MEMO_VIEWPORT_WIDTH;
|
|
|
|
|
|
|
|
return scale >= 2 ? Math.round(scale) : 1;
|
|
|
|
|
|
|
|
}, [props.listMode]);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Recalculate memo distribution when layout changes
|
|
|
|
|
|
|
|
const redistributeMemos = useCallback(() => {
|
|
|
|
|
|
|
|
const prefixHeight = prefixElementRef.current?.offsetHeight || 0;
|
|
|
|
|
|
|
|
const { distribution: newDistribution } = distributeMemosToColumns(props.memoList, columns, itemHeights, prefixHeight);
|
|
|
|
|
|
|
|
setDistribution(newDistribution);
|
|
|
|
|
|
|
|
}, [props.memoList, columns, itemHeights]);
|
|
|
|
|
|
|
|
|
|
|
|
// Handle height changes from individual memo items
|
|
|
|
// Handle height changes from individual memo items
|
|
|
|
const handleHeightChange = useCallback(
|
|
|
|
const handleHeightChange = useCallback(
|
|
|
|
(memoName: string, height: number) => {
|
|
|
|
(memoName: string, height: number) => {
|
|
|
|
setState((prevState) => {
|
|
|
|
setItemHeights((prevHeights) => {
|
|
|
|
const newItemHeights = new Map(prevState.itemHeights);
|
|
|
|
const newItemHeights = new Map(prevHeights);
|
|
|
|
newItemHeights.set(memoName, height);
|
|
|
|
newItemHeights.set(memoName, height);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Recalculate distribution with new heights
|
|
|
|
const prefixHeight = prefixElementRef.current?.offsetHeight || 0;
|
|
|
|
const prefixHeight = prefixElementRef.current?.offsetHeight || 0;
|
|
|
|
const { distribution, columnHeights } = distributeMemosToColumns(props.memoList, prevState.columns, newItemHeights, prefixHeight);
|
|
|
|
const { distribution: newDistribution } = distributeMemosToColumns(props.memoList, columns, newItemHeights, prefixHeight);
|
|
|
|
|
|
|
|
setDistribution(newDistribution);
|
|
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
return newItemHeights;
|
|
|
|
...prevState,
|
|
|
|
|
|
|
|
itemHeights: newItemHeights,
|
|
|
|
|
|
|
|
distribution,
|
|
|
|
|
|
|
|
columnHeights,
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
});
|
|
|
|
});
|
|
|
|
},
|
|
|
|
},
|
|
|
|
[props.memoList],
|
|
|
|
[props.memoList, columns],
|
|
|
|
);
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
|
|
// Handle window resize and column count changes
|
|
|
|
// Handle window resize and calculate new column count
|
|
|
|
useEffect(() => {
|
|
|
|
useEffect(() => {
|
|
|
|
const handleResize = () => {
|
|
|
|
const handleResize = () => {
|
|
|
|
if (!containerRef.current) {
|
|
|
|
if (!containerRef.current) return;
|
|
|
|
return;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const newColumns = props.listMode
|
|
|
|
const newColumns = calculateColumns();
|
|
|
|
? 1
|
|
|
|
if (newColumns !== columns) {
|
|
|
|
: (() => {
|
|
|
|
setColumns(newColumns);
|
|
|
|
const containerWidth = containerRef.current!.offsetWidth;
|
|
|
|
|
|
|
|
const scale = containerWidth / MINIMUM_MEMO_VIEWPORT_WIDTH;
|
|
|
|
|
|
|
|
return scale >= 2 ? Math.round(scale) : 1;
|
|
|
|
|
|
|
|
})();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (newColumns !== state.columns) {
|
|
|
|
|
|
|
|
const prefixHeight = prefixElementRef.current?.offsetHeight || 0;
|
|
|
|
|
|
|
|
const { distribution, columnHeights } = distributeMemosToColumns(props.memoList, newColumns, state.itemHeights, prefixHeight);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
setState((prevState) => ({
|
|
|
|
|
|
|
|
...prevState,
|
|
|
|
|
|
|
|
columns: newColumns,
|
|
|
|
|
|
|
|
distribution,
|
|
|
|
|
|
|
|
columnHeights,
|
|
|
|
|
|
|
|
}));
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
handleResize();
|
|
|
|
handleResize();
|
|
|
|
window.addEventListener("resize", handleResize);
|
|
|
|
window.addEventListener("resize", handleResize);
|
|
|
|
return () => window.removeEventListener("resize", handleResize);
|
|
|
|
return () => window.removeEventListener("resize", handleResize);
|
|
|
|
}, [props.listMode, state.columns, state.itemHeights, props.memoList]);
|
|
|
|
}, [calculateColumns, columns]);
|
|
|
|
|
|
|
|
|
|
|
|
// Redistribute when memo list changes
|
|
|
|
// Redistribute memos when columns, memo list, or heights change
|
|
|
|
useEffect(() => {
|
|
|
|
useEffect(() => {
|
|
|
|
const prefixHeight = prefixElementRef.current?.offsetHeight || 0;
|
|
|
|
redistributeMemos();
|
|
|
|
const { distribution, columnHeights } = distributeMemosToColumns(props.memoList, state.columns, state.itemHeights, prefixHeight);
|
|
|
|
}, [redistributeMemos]);
|
|
|
|
|
|
|
|
|
|
|
|
setState((prevState) => ({
|
|
|
|
|
|
|
|
...prevState,
|
|
|
|
|
|
|
|
distribution,
|
|
|
|
|
|
|
|
columnHeights,
|
|
|
|
|
|
|
|
}));
|
|
|
|
|
|
|
|
}, [props.memoList, state.columns, state.itemHeights]);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<div
|
|
|
|
<div
|
|
|
|
ref={containerRef}
|
|
|
|
ref={containerRef}
|
|
|
|
className={cn("w-full grid gap-2")}
|
|
|
|
className={cn("w-full grid gap-2")}
|
|
|
|
style={{
|
|
|
|
style={{
|
|
|
|
gridTemplateColumns: `repeat(${state.columns}, 1fr)`,
|
|
|
|
gridTemplateColumns: `repeat(${columns}, 1fr)`,
|
|
|
|
}}
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
>
|
|
|
|
{Array.from({ length: state.columns }).map((_, columnIndex) => (
|
|
|
|
{Array.from({ length: columns }).map((_, columnIndex) => (
|
|
|
|
<div key={columnIndex} className="min-w-0 mx-auto w-full max-w-2xl">
|
|
|
|
<div key={columnIndex} className="min-w-0 mx-auto w-full max-w-2xl">
|
|
|
|
{props.prefixElement && columnIndex === 0 && (
|
|
|
|
{/* Prefix element (like memo editor) goes in first column */}
|
|
|
|
<div ref={prefixElementRef} className="mb-2">
|
|
|
|
{props.prefixElement && columnIndex === 0 && <div ref={prefixElementRef}>{props.prefixElement}</div>}
|
|
|
|
{props.prefixElement}
|
|
|
|
|
|
|
|
</div>
|
|
|
|
{distribution[columnIndex]?.map((memoIndex) => {
|
|
|
|
)}
|
|
|
|
|
|
|
|
{state.distribution[columnIndex]?.map((memoIndex) => {
|
|
|
|
|
|
|
|
const memo = props.memoList[memoIndex];
|
|
|
|
const memo = props.memoList[memoIndex];
|
|
|
|
return memo ? (
|
|
|
|
return memo ? (
|
|
|
|
<MemoItem
|
|
|
|
<MemoItem
|
|
|
|
|
Johnny
3 months ago
committed by
GitHub