feat: Map側distance計算処理の追加

frontend/app/components/modules/map/map.tsx

@@ -17,7 +17,7 @@ import { ChairIcon } from "~/components/icon/chair";
 import { PinIcon } from "~/components/icon/pin";
 import { Button } from "~/components/primitives/button/button";
 import { Text } from "~/components/primitives/text/text";
-import type { Coordinate, DisplayPos, NearByChair } from "~/types";
+import type { Coordinate, DisplayPos, Distance, NearByChair } from "~/types";
 import { CityObjects, TownList } from "./map-data";
 
 const GridDistance = 20;
@@ -51,6 +51,15 @@ const centerPosFrom = (pos: DisplayPos, outerRect: DOMRect): DisplayPos => {
   };
 };
 
+const displaySizeToDistance = (rect: DOMRect): Distance => {
+  const startPos = posToCoordinate({ x: 0, y: 0 });
+  const endPos = posToCoordinate({ x: rect.right, y: rect.bottom });
+  return {
+    horizontalDistance: startPos.latitude - endPos.latitude,
+    verticalDistance: startPos.longitude - endPos.longitude,
+  };
+};
+
 const draw = (
   ctx: CanvasRenderingContext2D,
   option: { from?: Coordinate; to?: Coordinate },
@@ -334,6 +343,7 @@ const TownLayer = memo(function TownLayer() {
 
 type MapProps = ComponentProps<"div"> & {
   onMove?: (coordinate: Coordinate) => void;
+  onUpdateViewSize?: (distance: Distance) => void;
   selectable?: boolean;
   selectorPinColor?: `#${string}`;
   from?: Coordinate;
@@ -346,13 +356,15 @@ export const Map: FC<MapProps> = ({
   selectable,
   selectorPinColor,
   onMove,
+  onUpdateViewSize,
   from,
   to,
   chairs,
   initialCoordinate,
   className,
 }) => {
   const onMoveRef = useRef(onMove);
+  const onUpdateViewSizeRef = useRef(onUpdateViewSize);
   const outerRef = useRef<HTMLDivElement>(null);
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const [isDrag, setIsDrag] = useState(false);
@@ -387,6 +399,12 @@ export const Map: FC<MapProps> = ({
     }
   }, []);
 
+  useEffect(() => {
+    if (!outerRect) return;
+    const distance = displaySizeToDistance(outerRect);
+    onUpdateViewSizeRef.current?.(distance);
+  }, [outerRect]);
+
   useLayoutEffect(() => {
     updateViewLocation(initialCoordinate);
   }, [initialCoordinate, updateViewLocation]);