Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 43 additions & 18 deletions code/core/src/viewport/components/Tool.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,24 +20,49 @@ const Dimensions = styled.div(({ theme }) => ({
}));

export const ViewportTool = () => {
const { name, value, isDefault, isLocked, options: viewportMap, reset, select } = useViewport();

const options = useMemo(
() =>
Object.entries(viewportMap).map(([k, value]) => ({
value: k,
title: value.name,
icon: iconsMap[value.type!],
right: (
<Dimensions>
<span>{value.styles.width.replace('px', '')}</span>
<span>&times;</span>
<span>{value.styles.height.replace('px', '')}</span>
</Dimensions>
),
})),
[viewportMap]
);
const {
name,
value,
isDefault,
isCustom,
isLocked,
options: viewportMap,
reset,
select,
} = useViewport();

const options = useMemo(() => {
const presetOptions = Object.entries(viewportMap).map(([k, value]) => ({
value: k,
title: value.name,
icon: iconsMap[value.type!],
right: (
<Dimensions>
<span>{value.styles.width.replace('px', '')}</span>
<span>&times;</span>
<span>{value.styles.height.replace('px', '')}</span>
</Dimensions>
),
}));

// When a custom viewport is active (user has manually set width/height), inject
// a synthetic option matching the current value. This ensures the Select component
// detects a selection and renders the toolbar button in its active (highlighted) state.
// Without this, isCustom viewports match no preset key and $hasSelection stays false.
if (isCustom && value) {
return [
...presetOptions,
{
value,
title: name,
icon: iconsMap.other,
right: null,
},
];
}

return presetOptions;
}, [viewportMap, isCustom, value, name]);

return (
<Select
Expand Down