feat(view): add contextual layer controls

view/BottomControlsIsland.tsx

@@ -1,7 +1,9 @@
-import { Minus, CornersOut, Hand, Plus } from "@phosphor-icons/react";
-import { commandIds } from "@commands/ids";
 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 { ZoomControls } from "./bottom-controls/ZoomControls";
+import type { SelectionSummary } from "./selectionSummary";
 
 export type BottomControlsAction = "pan" | "zoom";
 
@@ -9,10 +11,12 @@ export type BottomControlsIslandProps = {
   viewport: ViewportState;
   visible: boolean;
   action: BottomControlsAction;
+  selection: SelectionSummary;
   dispatch: AppStore["dispatch"];
+  onOpenLayers: () => void;
 };
 
-export function BottomControlsIsland({ viewport, visible, action, dispatch }: BottomControlsIslandProps) {
+export function BottomControlsIsland({ viewport, visible, action, selection, dispatch, onOpenLayers }: BottomControlsIslandProps) {
   const zoomPercent = Math.round(viewport.zoom * 100);
   const x = Math.round(viewport.center.x);
   const y = Math.round(viewport.center.y);
@@ -24,61 +28,13 @@ export function BottomControlsIsland({ viewport, visible, action, dispatch }: Bo
         visible ? "pointer-events-auto translate-y-0 opacity-100" : "pointer-events-none translate-y-3 opacity-0"
       }`}
     >
-      {action === "pan" ? <PanControls x={x} y={y} /> : <ZoomControls zoom={viewport.zoom} zoomPercent={zoomPercent} dispatch={dispatch} />}
+      {selection.type !== "none" ? (
+        <SelectionControls selection={selection} onOpenLayers={onOpenLayers} />
+      ) : action === "pan" ? (
+        <PanControls x={x} y={y} />
+      ) : (
+        <ZoomControls zoom={viewport.zoom} zoomPercent={zoomPercent} dispatch={dispatch} />
+      )}
     </div>
   );
 }
-
-function PanControls({ x, y }: { x: number; y: number }) {
-  return (
-    <div className="flex w-full items-center justify-center gap-2 tabular-nums">
-      <span className={iconSlotClass()}>
-        <Hand size={16} weight="regular" />
-      </span>
-      <Divider />
-      <span className={labelClass()}>X</span>
-      <span className={valueClass()}>{x}</span>
-      <Divider />
-      <span className={labelClass()}>Y</span>
-      <span className={valueClass()}>{y}</span>
-    </div>
-  );
-}
-
-function ZoomControls({ zoom, zoomPercent, dispatch }: { zoom: number; zoomPercent: number; dispatch: AppStore["dispatch"] }) {
-  return (
-    <>
-      <button type="button" className={buttonClass()} aria-label="Zoom out" onClick={() => dispatch(commandIds.viewportSetZoom, { zoom: zoom / 1.2 })}>
-        <Minus size={16} weight="regular" />
-      </button>
-      <span className="min-w-14 text-center tabular-nums text-white">{zoomPercent}%</span>
-      <button type="button" className={buttonClass()} aria-label="Zoom in" onClick={() => dispatch(commandIds.viewportSetZoom, { zoom: zoom * 1.2 })}>
-        <Plus size={16} weight="regular" />
-      </button>
-      <Divider />
-      <button type="button" className={buttonClass()} aria-label="Fit artboard" title="Fit artboard" onClick={() => dispatch(commandIds.viewportFitArtboard, undefined)}>
-        <CornersOut size={16} weight="regular" />
-      </button>
-    </>
-  );
-}
-
-function Divider() {
-  return <div className="mx-1 h-4 w-px bg-white/15" />;
-}
-
-function labelClass() {
-  return "text-white/60";
-}
-
-function valueClass() {
-  return "min-w-10 text-center text-white";
-}
-
-function iconSlotClass() {
-  return "grid size-7 place-items-center rounded-full text-white/80";
-}
-
-function buttonClass() {
-  return `${iconSlotClass()} transition hover:bg-white/10 hover:text-white focus:outline-none focus-visible:outline-none`;
-}