feat(view): show transform measurements

view/BottomControlsIsland.tsx

@@ -2,7 +2,9 @@ import type { AppStore } from "@editor/store";
 import type { ViewportState } from "@editor/state";
 import { PanControls } from "./bottom-controls/PanControls";
 import { SelectionControls } from "./bottom-controls/SelectionControls";
+import { TransformControls } from "./bottom-controls/TransformControls";
 import { ZoomControls } from "./bottom-controls/ZoomControls";
+import type { Rect } from "@core/geometry";
 import type { SelectionSummary } from "./selectionSummary";
 
 export type BottomControlsAction = "pan" | "zoom";
@@ -12,11 +14,12 @@ export type BottomControlsIslandProps = {
   visible: boolean;
   action: BottomControlsAction;
   selection: SelectionSummary;
+  transformBounds?: Rect;
   dispatch: AppStore["dispatch"];
   onOpenLayers: () => void;
 };
 
-export function BottomControlsIsland({ viewport, visible, action, selection, dispatch, onOpenLayers }: BottomControlsIslandProps) {
+export function BottomControlsIsland({ viewport, visible, action, selection, transformBounds, dispatch, onOpenLayers }: BottomControlsIslandProps) {
   const zoomPercent = Math.round(viewport.zoom * 100);
   const x = Math.round(viewport.center.x);
   const y = Math.round(viewport.center.y);
@@ -28,7 +31,9 @@ export function BottomControlsIsland({ viewport, visible, action, selection, dis
         visible ? "pointer-events-auto translate-y-0 opacity-100" : "pointer-events-none translate-y-3 opacity-0"
       }`}
     >
-      {selection.type !== "none" ? (
+      {transformBounds ? (
+        <TransformControls bounds={transformBounds} />
+      ) : selection.type !== "none" ? (
         <SelectionControls selection={selection} onOpenLayers={onOpenLayers} />
       ) : action === "pan" ? (
         <PanControls x={x} y={y} />