Aspect ratio constraints

1"use client";
2 
3import {
4  applySizeConstraints,
5  aspectRatio,
6  type ConstraintContext,
7  DndGrid,
8  defaultConstraints,
9  type Layout,
10  useContainerWidth,
11} from "@dnd-grid/react";
12import { useEffect, useState } from "react";
13 
14const COLS = 12;
15const ROW_HEIGHT = 50;
16const GRID_SPACING = 10;
17 
18const ratio16x9 = aspectRatio(16 / 9);
19const ratio1x1 = aspectRatio(1);
20 
21const baseLayout: Layout = [
22  { id: "16:9", x: 0, y: 0, w: 6, h: 3, constraints: [ratio16x9] },
23  { id: "1:1", x: 6, y: 0, w: 3, h: 3, constraints: [ratio1x1] },
24  { id: "free", x: 9, y: 0, w: 3, h: 2 },
25];
26 
27const createConstraintContext = (
28  layout: Layout,
29  containerWidth: number
30): ConstraintContext => ({
31  cols: COLS,
32  maxRows: Number.POSITIVE_INFINITY,
33  containerWidth,
34  containerHeight: 0,
35  rowHeight: ROW_HEIGHT,
36  gap: [GRID_SPACING, GRID_SPACING, GRID_SPACING, GRID_SPACING],
37  containerPadding: [GRID_SPACING, GRID_SPACING, GRID_SPACING, GRID_SPACING],
38  layout,
39});
40 
41const applyInitialConstraints = (
42  layout: Layout,
43  containerWidth: number
44): Layout => {
45  const context = createConstraintContext(layout, containerWidth);
46  return layout.map((item) => {
47    if (!item.constraints?.length) {
48      return item;
49    }
50    const size = applySizeConstraints(
51      defaultConstraints,
52      item,
53      item.w,
54      item.h,
55      "se",
56      context
57    );
58    if (size.w === item.w && size.h === item.h) {
59      return item;
60    }
61    return { ...item, ...size };
62  });
63};
64 
65export function AspectRatioConstraintsExample() {
66  const { width, containerRef, mounted } = useContainerWidth({
67    measureBeforeMount: true,
68  });
69  const [layout, setLayout] = useState<Layout>(baseLayout);
70  const [ready, setReady] = useState(false);
71 
72  useEffect(() => {
73    if (!mounted || width <= 0 || ready) {
74      return;
75    }
76    setLayout(applyInitialConstraints(baseLayout, width));
77    setReady(true);
78  }, [mounted, ready, width]);
79 
80  return (
81    <div ref={containerRef}>
82      {mounted && ready && (
83        <DndGrid
84          cols={COLS}
85          containerPadding={GRID_SPACING}
86          gap={GRID_SPACING}
87          layout={layout}
88          onLayoutChange={setLayout}
89          rowHeight={ROW_HEIGHT}
90          width={width}
91        >
92          {layout.map((item) => (
93            <div className="grid-item" key={item.id}>
94              {item.id}
95            </div>
96          ))}
97        </DndGrid>
98      )}
99    </div>
100  );
101}