File size: 5,416 Bytes
5830d86 4ce1ecd 050873e 5830d86 050873e 5830d86 4ce1ecd 5830d86 050873e 5830d86 4ce1ecd 5830d86 050873e 5830d86 4ce1ecd 5830d86 050873e 5830d86 4cab1f1 5830d86 050873e 4cab1f1 050873e 4ce1ecd 050873e 4cab1f1 050873e 5830d86 4cab1f1 5830d86 4cab1f1 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 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 |
// Layout settings for different types
// export const LAYOUTS = {
// COVER: {
// gridCols: 1,
// gridRows: 1,
// panels: [
// { width: 512, height: 1024, gridColumn: "1", gridRow: "1" }, // Format pleine page (1:1 ratio)
// ],
// },
// LAYOUT_1: {
// gridCols: 1,
// gridRows: 1,
// panels: [
// { width: 512, height: 1024, gridColumn: "1", gridRow: "1" }, // Format pleine page (1:1 ratio)
// ],
// },
// LAYOUT_2: {
// gridCols: 1,
// gridRows: 1,
// panels: [
// { width: 512, height: 1024, gridColumn: "1", gridRow: "1" }, // Format pleine page (1:1 ratio)
// ],
// },
// LAYOUT_3: {
// gridCols: 1,
// gridRows: 1,
// panels: [
// { width: 512, height: 1024, gridColumn: "1", gridRow: "1" }, // Format pleine page (1:1 ratio)
// ],
// },
// LAYOUT_4: {
// gridCols: 1,
// gridRows: 1,
// panels: [
// { width: 512, height: 1024, gridColumn: "1", gridRow: "1" }, // Format pleine page (1:1 ratio)
// ],
// },
// };
// Panel size constants
const PANEL_SIZES = {
PORTRAIT: { width: 512, height: 1024 },
PORTRAIT_MEDIUM: { width: 768, height: 1024 },
LANDSCAPE: { width: 1024, height: 768 },
SQUARE: { width: 512, height: 512 },
SQUARE_LARGE: { width: 1024, height: 1024 },
PANORAMIC: { width: 1024, height: 512 },
COVER_SIZE: { width: 512, height: 768 },
};
// Grid span helpers
const GRID = {
FULL_WIDTH: "1 / span 3",
TWO_THIRDS: "1 / span 2",
FULL_HEIGHT: "1 / span 2",
FULL_HEIGHT_FROM_2: "2 / span 2", // Pour les éléments qui commencent à partir de la ligne 2
};
export const LAYOUTS = {
COVER: {
gridCols: 1,
gridRows: 1,
panels: [
{ ...PANEL_SIZES.COVER_SIZE, gridColumn: "1", gridRow: "1" }, // Format portrait
],
},
LAYOUT_1: {
gridCols: 2,
gridRows: 2,
panels: [
{ ...PANEL_SIZES.LANDSCAPE, gridColumn: "1", gridRow: "1" }, // Landscape top left
{ ...PANEL_SIZES.PORTRAIT_MEDIUM, gridColumn: "2", gridRow: "1" }, // Portrait top right
{ ...PANEL_SIZES.LANDSCAPE, gridColumn: "1", gridRow: "2" }, // Landscape middle left
{ ...PANEL_SIZES.PORTRAIT_MEDIUM, gridColumn: "2", gridRow: "2" }, // Portrait right
],
},
LAYOUT_2: {
gridCols: 3,
gridRows: 2,
panels: [
{
...PANEL_SIZES.SQUARE_LARGE,
gridColumn: GRID.TWO_THIRDS,
gridRow: "1",
}, // Large square top left
{ ...PANEL_SIZES.PORTRAIT, gridColumn: "3", gridRow: "1" }, // Portrait top right
{ ...PANEL_SIZES.LANDSCAPE, gridColumn: GRID.FULL_WIDTH, gridRow: "2" }, // Full width landscape bottom
],
},
LAYOUT_3: {
gridCols: 3,
gridRows: 2,
panels: [
{ ...PANEL_SIZES.LANDSCAPE, gridColumn: GRID.TWO_THIRDS, gridRow: "1" }, // Wide landscape top left
{ ...PANEL_SIZES.PORTRAIT, gridColumn: "3", gridRow: "1" }, // Portrait top right
{ ...PANEL_SIZES.PORTRAIT, gridColumn: "1", gridRow: "2" }, // Portrait bottom left
{ ...PANEL_SIZES.LANDSCAPE, gridColumn: "2 / span 2", gridRow: "2" }, // Wide landscape bottom right
],
},
LAYOUT_4: {
gridCols: 2,
gridRows: 3,
panels: [
{ ...PANEL_SIZES.PANORAMIC, gridColumn: "1 / span 2", gridRow: "1" }, // Wide panoramic top
{
...PANEL_SIZES.PORTRAIT,
gridColumn: "1",
gridRow: GRID.FULL_HEIGHT_FROM_2,
}, // Tall portrait left
{ ...PANEL_SIZES.SQUARE, gridColumn: "2", gridRow: "2" }, // Square middle right
{ ...PANEL_SIZES.SQUARE, gridColumn: "2", gridRow: "3" }, // Square bottom right
],
},
LAYOUT_5: {
gridCols: 3,
gridRows: 3,
panels: [
{ ...PANEL_SIZES.PANORAMIC, gridColumn: GRID.FULL_WIDTH, gridRow: "1" }, // Wide panoramic top
{ ...PANEL_SIZES.PORTRAIT, gridColumn: "1", gridRow: "2 / span 2" }, // Tall portrait left
{
...PANEL_SIZES.SQUARE_LARGE,
gridColumn: "2 / span 2",
gridRow: "2 / span 2",
}, // Large square right
],
},
LAYOUT_6: {
gridCols: 3,
gridRows: 2,
panels: [
{ ...PANEL_SIZES.PORTRAIT, gridColumn: "1", gridRow: GRID.FULL_HEIGHT }, // Tall portrait left
{ ...PANEL_SIZES.SQUARE, gridColumn: "2", gridRow: "1" }, // Square top middle
{ ...PANEL_SIZES.PORTRAIT, gridColumn: "3", gridRow: GRID.FULL_HEIGHT }, // Tall portrait right
{ ...PANEL_SIZES.SQUARE, gridColumn: "2", gridRow: "2" }, // Square bottom middle
],
},
};
export const defaultLayout = "LAYOUT_1";
export const nonRandomLayouts = Object.keys(LAYOUTS).filter(
(layout) => layout !== "COVER"
);
// Helper functions for layout configuration
export const getNextLayoutType = (currentLayoutCount) => {
// Get all available layouts except COVER
const availableLayouts = Object.keys(LAYOUTS).filter(
(layout) => layout !== "COVER"
);
// Use a pseudo-random selection based on the current count
// but avoid repeating the same layout twice in a row
const previousLayout = `LAYOUT_${
(currentLayoutCount % availableLayouts.length) + 1
}`;
let nextLayout;
do {
const randomIndex =
Math.floor(Math.random() * (availableLayouts.length - 1)) + 1;
nextLayout = `LAYOUT_${randomIndex}`;
} while (nextLayout === previousLayout);
return nextLayout;
};
export const getLayoutDimensions = (layoutType, panelIndex) =>
LAYOUTS[layoutType]?.panels[panelIndex];
|