import { MediaTemplate } from "../../lib/templates" export const squareTemplates: MediaTemplate[] = [ // Шаблоны с 2 экранами { id: "split-vertical-square", split: "vertical", screens: 2, resizable: true, splitPosition: 50, // Позиция разделения в процентах (50% - посередине) render: () => (
1
2
), }, { id: "split-horizontal-square", split: "horizontal", screens: 2, resizable: true, splitPosition: 50, // Позиция разделения в процентах (50% - посередине) render: () => (
1
2
), }, // Диагональное разделение (горизонтальная ось) { id: "split-diagonal-square", split: "diagonal", screens: 2, resizable: true, splitPoints: [ { x: 0, y: 35 }, // Начальная точка (левый край, 35% от верха) { x: 100, y: 65 }, // Конечная точка (правый край, 65% от верха) ], render: () => (
{/* Первый экран (верхний) */}
1
{/* Линия разделения */}
{/* Второй экран (нижний) */}
2
), }, // Диагональное разделение (вертикальная ось) { id: "split-diagonal-vertical-square", split: "diagonal", screens: 2, resizable: true, splitPoints: [ { x: 65, y: 0 }, // Начальная точка (65% от левого края, верх) { x: 35, y: 100 }, // Конечная точка (35% от левого края, низ) ], render: () => (
{/* Первый экран (левый) */}
1
{/* Линия разделения */}
{/* Второй экран (правый) */}
2
), }, // Сетка 2x2 { id: "split-grid-2x2-square", split: "grid", screens: 4, resizable: true, splitPoints: [ { x: 50, y: 0 }, // Верхняя точка { x: 50, y: 100 }, // Нижняя точка { x: 0, y: 50 }, // Левая точка { x: 100, y: 50 }, // Правая точка ], render: () => (
{/* Верхний левый экран */}
1
{/* Верхний правый экран */}
2
{/* Нижний левый экран */}
3
{/* Нижний правый экран */}
4
{/* Горизонтальная линия разделения */}
{/* Вертикальная линия разделения */}
), }, // Шаблон с горизонтальным разделением сверху и вертикальным снизу { id: "split-mixed-1-square", split: "custom", screens: 3, resizable: true, render: () => (
{/* Верхняя секция */}
1
{/* Горизонтальная линия разделения */}
{/* Нижняя левая секция */}
2
{/* Вертикальная линия разделения */}
{/* Нижняя правая секция */}
3
), }, // Шаблон с вертикальным разделением слева и двумя секциями справа { id: "split-mixed-2-square", split: "custom", screens: 3, resizable: true, render: () => (
{/* Левая секция */}
1
{/* Вертикальная линия разделения */}
{/* Верхняя правая секция */}
2
{/* Горизонтальная линия разделения */}
{/* Нижняя правая секция */}
3
), }, // Шаблоны с 3 экранами { id: "split-vertical-3-square", split: "vertical", screens: 3, resizable: true, render: () => (
1
2
3
), }, { id: "split-horizontal-3-square", split: "horizontal", screens: 3, render: () => (
1
2
3
), }, // Шаблоны с 4 экранами { id: "split-vertical-4-square", split: "vertical", screens: 4, resizable: true, render: () => (
1
2
3
4
), }, { id: "split-horizontal-4-square", split: "horizontal", screens: 4, render: () => (
1
2
3
4
), }, { id: "split-1-3-square", split: "custom", screens: 4, resizable: true, render: () => (
{/* Левая большая секция */}
1
{/* Вертикальная линия разделения */}
{/* Верхняя правая секция */}
2
{/* Горизонтальная линия разделения 1 */}
{/* Средняя правая секция */}
3
{/* Горизонтальная линия разделения 2 */}
{/* Нижняя правая секция */}
4
), }, { id: "split-3-1-square", split: "custom", screens: 4, resizable: true, render: () => (
{/* Верхняя левая секция */}
1
{/* Вертикальная линия разделения 1 */}
{/* Верхняя средняя секция */}
2
{/* Вертикальная линия разделения 2 */}
{/* Верхняя правая секция */}
3
{/* Горизонтальная линия разделения */}
{/* Нижняя секция */}
4
), }, // 3 слева + 1 справа { id: "split-3-1-right-square", split: "custom", screens: 4, resizable: true, render: () => (
{/* Правая большая секция */}
4
{/* Вертикальная линия разделения */}
{/* Верхняя левая секция */}
1
{/* Горизонтальная линия разделения 1 */}
{/* Средняя левая секция */}
2
{/* Горизонтальная линия разделения 2 */}
{/* Нижняя левая секция */}
3
), }, { id: "split-1-3-bottom-square", split: "custom", screens: 4, resizable: true, render: () => (
{/* Верхняя секция */}
1
{/* Горизонтальная линия разделения */}
{/* Нижняя левая секция */}
2
{/* Вертикальная линия разделения 1 */}
{/* Нижняя средняя секция */}
3
{/* Вертикальная линия разделения 2 */}
{/* Нижняя правая секция */}
4
), }, // Шаблоны с 7 экранами - вариант 1 (1 большой экран справа внизу, 6 маленьких экранов слева и сверху) { id: "split-custom-7-1-square", split: "custom", screens: 7, resizable: true, render: () => (
{/* Большой экран (правый нижний) */}
3
{/* Верхний левый экран */}
1
{/* Верхний правый экран */}
2
{/* Нижний левый верхний экран */}
5
{/* Нижний левый нижний экран */}
4
{/* Нижний левый средний экран */}
6
{/* Нижний левый нижний средний экран */}
7
{/* Горизонтальные линии разделения */}
{/* Вертикальные линии разделения */}
), }, // Шаблоны с 7 экранами - вариант 2 (1 большой экран слева внизу, 6 маленьких экранов справа и сверху) { id: "split-custom-7-2-square", split: "custom", screens: 7, resizable: true, render: () => (
{/* Большой экран (левый нижний) */}
3
{/* Верхний левый экран */}
1
{/* Верхний правый экран */}
2
{/* Нижний правый верхний экран */}
5
{/* Нижний правый нижний экран */}
4
{/* Нижний правый средний экран */}
6
{/* Нижний правый нижний средний экран */}
7
{/* Горизонтальные линии разделения */}
{/* Вертикальные линии разделения */}
), }, // Шаблоны с 7 экранами - вариант 3 (1 большой экран слева вверху, 6 маленьких экранов справа и снизу) { id: "split-custom-7-3-square", split: "custom", screens: 7, resizable: true, render: () => (
{/* Большой экран (левый верхний) */}
3
{/* Нижний левый экран */}
1
{/* Нижний правый экран */}
2
{/* Верхний правый верхний экран */}
5
{/* Верхний правый нижний экран */}
4
{/* Верхний правый средний экран */}
6
{/* Верхний правый нижний средний экран */}
7
{/* Горизонтальные линии разделения */}
{/* Вертикальные линии разделения */}
), }, // Шаблоны с 7 экранами - вариант 4 (1 большой экран справа вверху, 6 маленьких экранов слева и снизу) { id: "split-custom-7-4-square", split: "custom", screens: 7, resizable: true, render: () => (
{/* Большой экран (правый верхний) */}
3
{/* Нижний левый экран */}
1
{/* Нижний правый экран */}
2
{/* Верхний левый верхний экран */}
5
{/* Верхний левый нижний экран */}
4
{/* Верхний левый средний экран */}
6
{/* Верхний левый нижний средний экран */}
7
{/* Горизонтальные линии разделения */}
{/* Вертикальные линии разделения */}
), }, // Шаблоны с 5 экранами - вариант 3 (средний на всю ширину, верхний и нижний ряды по 2 экрана) { id: "split-custom-5-3-square", split: "custom", screens: 5, resizable: true, render: () => (
{/* Верхний левый экран */}
1
{/* Верхний правый экран */}
2
{/* Средний экран на всю ширину */}
3
{/* Нижний левый экран */}
4
{/* Нижний правый экран */}
5
{/* Горизонтальные линии разделения */}
{/* Вертикальные линии разделения */}
), }, // Шаблоны с 5 экранами - вариант 4 (средняя колонка на всю высоту, левая и правая колонки по 2 экрана) { id: "split-custom-5-4-square", split: "custom", screens: 5, resizable: true, render: () => (
{/* Верхний левый экран */}
1
{/* Нижний левый экран */}
2
{/* Средний экран на всю высоту */}
3
{/* Верхний правый экран */}
4
{/* Нижний правый экран */}
5
{/* Горизонтальные линии разделения */}
{/* Вертикальные линии разделения */}
), }, // Шаблон с 6 экранами (3x2) - вариант 1 { id: "split-grid-3x2-square", split: "grid", screens: 6, resizable: true, render: () => (
{/* Верхний левый экран */}
1
{/* Верхний средний экран */}
2
{/* Верхний правый экран */}
3
{/* Нижний левый экран */}
4
{/* Нижний средний экран */}
5
{/* Нижний правый экран */}
6
{/* Горизонтальная линия разделения */}
{/* Вертикальная линия разделения 1 */}
{/* Вертикальная линия разделения 2 */}
), }, // Шаблон с 6 экранами (2x3) - вариант 2 { id: "split-grid-2x3-square", split: "grid", screens: 6, resizable: true, render: () => (
{/* Верхний левый экран */}
1
{/* Верхний правый экран */}
2
{/* Средний левый экран */}
3
{/* Средний правый экран */}
4
{/* Нижний левый экран */}
5
{/* Нижний правый экран */}
6
{/* Горизонтальная линия разделения 1 */}
{/* Горизонтальная линия разделения 2 */}
{/* Вертикальная линия разделения */}
), }, // Шаблон с 9 экранами (3x3) { id: "split-grid-3x3-square", split: "grid", screens: 9, resizable: true, render: () => (
{Array.from({ length: 9 }).map((_, index) => { const row = Math.floor(index / 3) const col = index % 3 const isEven = (row + col) % 2 === 0 return (
{index + 1}
) })}
{/* Вертикальные линии */} {[1, 2].map((i) => (
))} {/* Горизонтальные линии */} {[1, 2].map((i) => (
))}
), }, // Шаблон с 10 экранами (5x2) { id: "split-grid-5x2-square", split: "grid", screens: 10, resizable: true, render: () => (
{Array.from({ length: 10 }).map((_, index) => { const row = Math.floor(index / 5) const col = index % 5 const isEven = (row + col) % 2 === 0 return (
{index + 1}
) })}
{/* Вертикальные линии */} {[1, 2, 3, 4].map((i) => (
))} {/* Горизонтальная линия */}
), }, // Шаблон с 10 экранами (2x5) { id: "split-grid-2x5-square", split: "grid", screens: 10, resizable: true, render: () => (
{Array.from({ length: 10 }).map((_, index) => { const row = Math.floor(index / 2) const col = index % 2 const isEven = (row + col) % 2 === 0 return (
{index + 1}
) })}
{/* Вертикальная линия */}
{/* Горизонтальные линии */} {[1, 2, 3, 4].map((i) => (
))}
), }, // Шаблон с 12 экранами (4x3) { id: "split-grid-4x3-square", split: "grid", screens: 12, resizable: true, render: () => (
{Array.from({ length: 12 }).map((_, index) => { const row = Math.floor(index / 4) const col = index % 4 const isEven = (row + col) % 2 === 0 return (
{index + 1}
) })}
{/* Вертикальные линии */} {[1, 2, 3].map((i) => (
))} {/* Горизонтальные линии */} {[1, 2].map((i) => (
))}
), }, // Шаблон с 12 экранами (3x4) { id: "split-grid-3x4-square", split: "grid", screens: 12, resizable: true, render: () => (
{Array.from({ length: 12 }).map((_, index) => { const row = Math.floor(index / 3) const col = index % 3 const isEven = (row + col) % 2 === 0 return (
{index + 1}
) })}
{/* Вертикальные линии */} {[1, 2].map((i) => (
))} {/* Горизонтальные линии */} {[1, 2, 3].map((i) => (
))}
), }, // Шаблон с 16 экранами (4x4) { id: "split-grid-4x4-square", split: "grid", screens: 16, resizable: true, render: () => (
{Array.from({ length: 16 }).map((_, index) => { const row = Math.floor(index / 4) const col = index % 4 const isEven = (row + col) % 2 === 0 return (
{index + 1}
) })}
{/* Вертикальные линии */} {[1, 2, 3].map((i) => (
))} {/* Горизонтальные линии */} {[1, 2, 3].map((i) => (
))}
), }, // Шаблон "Сетка 5x5" (25 экранов) { id: "split-grid-5x5-square", split: "grid", screens: 25, resizable: true, render: () => (
{Array.from({ length: 25 }).map((_, index) => { const row = Math.floor(index / 5) const col = index % 5 const isEven = (row + col) % 2 === 0 return (
{index + 1}
) })}
{/* Вертикальные линии */} {[1, 2, 3, 4].map((i) => (
))} {/* Горизонтальные линии */} {[1, 2, 3, 4].map((i) => (
))}
), }, // Шаблон с 8 экранами (2x4) { id: "split-grid-2x4-square", split: "grid", screens: 8, resizable: true, render: () => (
{Array.from({ length: 8 }).map((_, index) => { const row = Math.floor(index / 2) const col = index % 2 const isEven = (row + col) % 2 === 0 return (
{index + 1}
) })}
{/* Вертикальная линия */}
{/* Горизонтальные линии */} {[1, 2, 3].map((i) => (
))}
), }, // Шаблон с 8 экранами (4x2) { id: "split-grid-4x2-square", split: "grid", screens: 8, resizable: true, render: () => (
{Array.from({ length: 8 }).map((_, index) => { const row = Math.floor(index / 4) const col = index % 4 const isEven = (row + col) % 2 === 0 return (
{index + 1}
) })}
{/* Вертикальные линии */} {[1, 2, 3].map((i) => (
))} {/* Горизонтальная линия */}
), }, ]