File size: 3,185 Bytes
4cab1f1 5830d86 4cab1f1 5830d86 4cab1f1 5830d86 4cab1f1 5830d86 050873e 5830d86 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 |
import { Box } from "@mui/material";
import { LAYOUTS } from "./config";
import { groupSegmentsIntoLayouts } from "./utils";
import { useEffect, useRef } from "react";
import { Panel } from "./Panel";
// Component for displaying a page of panels
function ComicPage({ layout, layoutIndex }) {
// Calculer le nombre total d'images dans tous les segments de ce layout
const totalImages = layout.segments.reduce((total, segment) => {
return total + (segment.images?.length || 0);
}, 0);
return (
<Box
key={layoutIndex}
sx={{
display: "grid",
gridTemplateColumns: `repeat(${LAYOUTS[layout.type].gridCols}, 1fr)`,
gridTemplateRows: `repeat(${LAYOUTS[layout.type].gridRows}, 1fr)`,
gap: 2,
height: "100%",
aspectRatio: "0.7",
backgroundColor: "white",
boxShadow: "0 0 10px rgba(0,0,0,0.1)",
borderRadius: "4px",
p: 2,
flexShrink: 0,
}}
>
{LAYOUTS[layout.type].panels
.slice(0, totalImages)
.map((panel, panelIndex) => {
// Trouver le segment qui contient l'image pour ce panel
let currentImageIndex = 0;
let targetSegment = null;
let targetImageIndex = 0;
for (const segment of layout.segments) {
const segmentImageCount = segment.images?.length || 0;
if (currentImageIndex + segmentImageCount > panelIndex) {
targetSegment = segment;
targetImageIndex = panelIndex - currentImageIndex;
break;
}
currentImageIndex += segmentImageCount;
}
return (
<Panel
key={panelIndex}
panel={panel}
segment={targetSegment}
panelIndex={targetImageIndex}
/>
);
})}
</Box>
);
}
// Main comic layout component
export function ComicLayout({ segments }) {
const layouts = groupSegmentsIntoLayouts(segments);
const scrollContainerRef = useRef(null);
// Effect to scroll to the right when new layouts are added
useEffect(() => {
if (scrollContainerRef.current) {
scrollContainerRef.current.scrollTo({
left: scrollContainerRef.current.scrollWidth,
behavior: "smooth",
});
}
}, [layouts.length]); // Only run when the number of layouts changes
return (
<Box
ref={scrollContainerRef}
sx={{
display: "flex",
flexDirection: "row",
gap: 4,
height: "100%",
width: "100%",
px: layouts[0]?.type === "COVER" ? "calc(50% - (90vh * 0.5 * 0.5))" : 0,
overflowX: "auto",
overflowY: "hidden",
"&::-webkit-scrollbar": {
height: "0px",
},
"&::-webkit-scrollbar-track": {
backgroundColor: "grey.200",
},
"&::-webkit-scrollbar-thumb": {
backgroundColor: "grey.400",
borderRadius: "4px",
},
}}
>
{layouts.map((layout, layoutIndex) => (
<ComicPage
key={layoutIndex}
layout={layout}
layoutIndex={layoutIndex}
/>
))}
</Box>
);
}
|