From f5d0af42e55ad20c24cb5dd6283ed0d1feab707b Mon Sep 17 00:00:00 2001
From: Masanari Hamada <narirou.github@gmail.com>
Date: Sat, 7 Dec 2024 20:06:35 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20Map=E5=81=B4distance=E8=A8=88=E7=AE=97?=
 =?UTF-8?q?=E5=87=A6=E7=90=86=E3=81=AE=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/app/components/modules/map/map.tsx | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/frontend/app/components/modules/map/map.tsx b/frontend/app/components/modules/map/map.tsx
index f74f2606..82aeb4fd 100644
--- a/frontend/app/components/modules/map/map.tsx
+++ b/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,6 +356,7 @@ export const Map: FC<MapProps> = ({
   selectable,
   selectorPinColor,
   onMove,
+  onUpdateViewSize,
   from,
   to,
   chairs,
@@ -353,6 +364,7 @@ export const Map: FC<MapProps> = ({
   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]);