feat(view): show transform measurements

view/App.tsx

@@ -20,6 +20,9 @@ export function App({ app }: AppProps) {
   const viewportActivityIsland = useViewportActivityIsland(state.editor.viewport);
   const [layersOpen, setLayersOpen] = useState(false);
   const selectionSummary = getSelectionSummary(state.document, state.editor.selection);
+  const transformBounds = state.editor.transformSession?.target.type === "artboard"
+    ? state.document.artboards.find((artboard) => artboard.id === state.editor.transformSession?.target.id)?.bounds
+    : undefined;
 
   return (
     <main className="relative h-full overflow-hidden bg-background text-foreground">
@@ -41,9 +44,10 @@ export function App({ app }: AppProps) {
       <div className="absolute inset-x-0 bottom-4 z-10 flex justify-center">
         <BottomControlsIsland
           viewport={state.editor.viewport}
-          visible={selectionSummary.type !== "none" || viewportActivityIsland.visible}
+          visible={Boolean(transformBounds) || selectionSummary.type !== "none" || viewportActivityIsland.visible}
           action={viewportActivityIsland.action}
           selection={selectionSummary}
+          transformBounds={transformBounds}
           dispatch={app.store.dispatch}
           onOpenLayers={() => setLayersOpen(true)}
         />

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} />

view/bottom-controls/TransformControls.tsx

@@ -0,0 +1,28 @@
+import { BoundingBox } from "@phosphor-icons/react";
+import type { Rect } from "@core/geometry";
+import { BottomControlDivider } from "./Divider";
+import { bottomControlIconSlotClass, bottomControlLabelClass, bottomControlValueClass } from "./styles";
+
+export type TransformControlsProps = {
+  bounds: Rect;
+};
+
+export function TransformControls({ bounds }: TransformControlsProps) {
+  return (
+    <div className="flex w-full items-center justify-center gap-2 tabular-nums">
+      <span className={bottomControlIconSlotClass()}>
+        <BoundingBox size={16} weight="regular" />
+      </span>
+      <BottomControlDivider />
+      <span className={bottomControlLabelClass()}>X</span>
+      <span className={bottomControlValueClass()}>{Math.round(bounds.x)}</span>
+      <span className={bottomControlLabelClass()}>Y</span>
+      <span className={bottomControlValueClass()}>{Math.round(bounds.y)}</span>
+      <BottomControlDivider />
+      <span className={bottomControlLabelClass()}>W</span>
+      <span className={bottomControlValueClass()}>{Math.round(bounds.w)}</span>
+      <span className={bottomControlLabelClass()}>H</span>
+      <span className={bottomControlValueClass()}>{Math.round(bounds.h)}</span>
+    </div>
+  );
+}