{t('properties.stand')}
@@ -1462,12 +1531,10 @@ interface BookcaseControlsProps {
function BookcaseControls({ item, onUpdate }: BookcaseControlsProps) {
const { t, i18n } = useTranslation();
- const rowsLabel = i18n.exists('properties.shelfRows')
- ? t('properties.shelfRows')
- : 'Shelf rows';
- const backPanelLabel = i18n.exists('properties.hasBackPanel')
- ? t('properties.hasBackPanel')
- : 'Back panel';
+ const rowsLabel = tf(i18n, t, 'properties.shelfRows', 'Shelf rows');
+ const columnsLabel = tf(i18n, t, 'properties.shelfColumns', 'Shelf columns');
+ const backPanelLabel = tf(i18n, t, 'properties.hasBackPanel', 'Back panel');
+ const drawersLabel = tf(i18n, t, 'properties.drawerCells', 'Drawers');
const metadataRows = item.metadata?.['shelfRows'];
const currentRows =
@@ -1475,9 +1542,21 @@ function BookcaseControls({ item, onUpdate }: BookcaseControlsProps) {
? Math.round(metadataRows)
: Math.max(2, Math.round(item.height / 0.35));
+ const metadataColumns = item.metadata?.['shelfColumns'];
+ const currentColumns =
+ typeof metadataColumns === 'number' && metadataColumns >= 1
+ ? Math.round(metadataColumns)
+ : 1;
+
const metadataHasBack = item.metadata?.['hasBackPanel'];
const hasBack = typeof metadataHasBack === 'boolean' ? metadataHasBack : true;
+ const metadataDrawers = item.metadata?.['drawerCells'];
+ const drawerCells: Record
=
+ metadataDrawers && typeof metadataDrawers === 'object' && !Array.isArray(metadataDrawers)
+ ? (metadataDrawers as Record)
+ : {};
+
const updateMetadata = useCallback(
(patch: Record) => {
const next = { ...(item.metadata ?? {}), ...patch };
@@ -1486,6 +1565,30 @@ function BookcaseControls({ item, onUpdate }: BookcaseControlsProps) {
[item, onUpdate],
);
+ /**
+ * When the grid shrinks, drop any `drawerCells` keys that no longer
+ * refer to a visible cell so a subsequent grow doesn't bring back
+ * ghost drawers the user doesn't see in the editor.
+ */
+ const applyGridChange = useCallback(
+ (patch: { shelfRows?: number; shelfColumns?: number }) => {
+ const nextRows = patch.shelfRows ?? currentRows;
+ const nextCols = patch.shelfColumns ?? currentColumns;
+ const pruned: Record = {};
+ for (const [key, value] of Object.entries(drawerCells)) {
+ if (value !== true) continue;
+ const [rStr, cStr] = key.split('_');
+ const r = parseInt(rStr ?? '', 10);
+ const c = parseInt(cStr ?? '', 10);
+ if (Number.isFinite(r) && Number.isFinite(c) && r < nextRows && c < nextCols) {
+ pruned[key] = true;
+ }
+ }
+ updateMetadata({ ...patch, drawerCells: pruned });
+ },
+ [currentRows, currentColumns, drawerCells, updateMetadata],
+ );
+
return (
<>
{
const n = parseInt(v, 10);
if (!isNaN(n) && n >= 1 && n <= 12) {
- updateMetadata({ shelfRows: n });
+ applyGridChange({ shelfRows: n });
+ }
+ }}
+ />
+ {
+ const n = parseInt(v, 10);
+ if (!isNaN(n) && n >= 1 && n <= 12) {
+ applyGridChange({ shelfColumns: n });
}
}}
/>
{backPanelLabel}
-
+
+
{drawersLabel}
+
+ {Array.from({ length: currentRows })
+ .flatMap((_, rFromTop) => {
+ // Display top row first, but store with row 0 = bottom to
+ // match the 3D mesh's y-axis indexing.
+ const r = currentRows - 1 - rFromTop;
+ return Array.from({ length: currentColumns }).map((__, c) => {
+ const key = `${r}_${c}`;
+ const checked = drawerCells[key] === true;
+ return (
+ {
+ const next = { ...drawerCells };
+ if (e.target.checked) {
+ next[key] = true;
+ } else {
+ delete next[key];
+ }
+ updateMetadata({ drawerCells: next });
+ }}
+ style={{ width: 18, height: 18, margin: 0, cursor: 'pointer' }}
+ />
+ );
+ });
+ })}
+
+