From cfc19a42a2490b901a258aa2cc4b0fe86e04042c Mon Sep 17 00:00:00 2001
From: Huh Hyeongjun <hhj@devent.kr>
Date: Tue, 25 Feb 2025 11:55:15 +0900
Subject: [PATCH] feat: float detail box

---
 src/components/map/Processing.tsx |  25 +++++++-
 src/three/Space.tsx               | 101 ++++++++++++++++++++++++++----
 2 files changed, 112 insertions(+), 14 deletions(-)
diff --git a/src/components/map/Processing.tsx b/src/components/map/Processing.tsx
index b6c96a4..605e5da 100644
--- a/src/components/map/Processing.tsx
+++ b/src/components/map/Processing.tsx
@@ -13,7 +13,6 @@ export function BuildingHeights({ area }: { area: any }) {
   const appendAreas = useAreaStore((state) => state.appendAreas);
 
   const requestBuildings = () => {
-    console.log(area);
     const south = area[1].lat;
     const west = area[1].lng;
     const north = area[0].lat;
@@ -50,7 +49,29 @@ export function BuildingHeights({ area }: { area: any }) {
         position: "relative",
       })}
     >
-      <button onClick={requestBuildings}>request</button>
+      <button
+        css={css({
+          color: "#ffffff",
+
+          backgroundColor: "#007bffe8",
+          backdropFilter: "blur(8px)",
+          border: "none",
+          padding: "0.5rem 1rem",
+          borderRadius: "8px",
+          outline: "#086ad4c2 solid 0.1rem",
+          cursor: "pointer",
+          transition: "0.2s",
+          display: "flex",
+          alignItems: "center",
+          gap: "0.5rem",
+          ":hover": {
+            backgroundColor: "#085fbd",
+          },
+        })}
+        onClick={requestBuildings}
+      >
+        request
+      </button>
       <ul
         css={css({
           overflow: "scroll",
diff --git a/src/three/Space.tsx b/src/three/Space.tsx
index 78f76a5..50ba3c8 100644
--- a/src/three/Space.tsx
+++ b/src/three/Space.tsx
@@ -1,9 +1,76 @@
-import React, { useRef, useState } from "react";
+import React, { useState } from "react";
 import { Canvas } from "@react-three/fiber";
 import { useAreaStore } from "@/state/areaStore";
-import { OrbitControls } from "@react-three/drei";
+import { OrbitControls, Html } from "@react-three/drei";
 import * as THREE from "three";
 
+function Building({
+  shape,
+  extrudeSettings,
+  tags,
+}: {
+  shape: THREE.Shape;
+  extrudeSettings: any;
+  tags: any;
+}) {
+  const [hovered, setHovered] = useState(false);
+  const [clicked, setClicked] = useState(false);
+  const [hoverPos, setHoverPos] = useState<THREE.Vector3 | null>(null);
+
+  return (
+    <mesh
+      onPointerOver={(e) => {
+        setHovered(true);
+        e.stopPropagation();
+      }}
+      onPointerOut={(e) => {
+        setHovered(false);
+        e.stopPropagation();
+      }}
+      onPointerMove={(e) => {
+        setHoverPos(e.point.clone());
+        e.stopPropagation();
+      }}
+      onClick={(e) => {
+        setClicked(!clicked);
+        e.stopPropagation();
+      }}
+      rotation={[-Math.PI / 2, 0, 0]}
+    >
+      <extrudeGeometry args={[shape, extrudeSettings]} />
+      <meshStandardMaterial
+        color={hovered || clicked ? "#007bff" : "#9da0a3"}
+      />
+      {(hovered || clicked) && hoverPos && (
+        <Html
+          position={[
+            hoverPos.x,
+            hoverPos.y + extrudeSettings.depth + 0.5,
+            hoverPos.z,
+          ]}
+          center
+        >
+          <div
+            style={{
+              color: "#000000",
+              backgroundColor: "#ffffff96",
+              backdropFilter: "blur(8px)",
+              border: "none",
+              padding: "0.5rem 1rem",
+              borderRadius: "8px",
+              fontWeight: "300",
+              fontSize: "12px",
+              outline: "rgba(240, 240, 244, 0.51) solid 0.1rem",
+            }}
+          >
+            <div>{JSON.stringify(tags)}</div>
+          </div>
+        </Html>
+      )}
+    </mesh>
+  );
+}
+
 export function Space() {
   const areas = useAreaStore((state) => state.areas);
   const center = useAreaStore((state) => state.center);
@@ -18,8 +85,12 @@ export function Space() {
     return new THREE.Vector2(x, y);
   }
 
-  const areaMap = () => {
-    const result = [];
+  const areaData = () => {
+    const result: Array<{
+      shape: THREE.Shape;
+      extrudeSettings: any;
+      tags: any;
+    }> = [];
     areas.forEach((bld: any) => {
       if (!bld.geometry || bld.geometry.length < 3) return;
       const shapePoints = bld.geometry.map((pt: any) =>
@@ -30,20 +101,25 @@ export function Space() {
       }
       const shape = new THREE.Shape(shapePoints);
       let heightValue = parseFloat(bld.tags.height || "");
+      const heightLevels = parseFloat(bld.tags["building:levels"] || "");
       if (isNaN(heightValue)) {
         heightValue = 10;
       }
+      if (!isNaN(heightLevels)) {
+        heightValue = heightLevels * 2.2;
+      }
       const extrudeSettings = {
         steps: 1,
         depth: heightValue,
         bevelEnabled: false,
       };
-      result.push([shape, extrudeSettings]);
+      result.push({ shape, extrudeSettings, tags: bld.tags });
     });
-    console.log(result);
     return result;
   };
 
+  const buildingsData = areaData();
+
   return (
     <Canvas camera={{ fov: 90, near: 0.1, far: 4000 }}>
       <ambientLight intensity={Math.PI / 2} />
@@ -54,12 +130,13 @@ export function Space() {
         decay={0}
         intensity={Math.PI}
       />
-
-      {areaMap().map((item, index) => (
-        <mesh key={index} rotation={[-Math.PI / 2, 0, 0]}>
-          <extrudeGeometry args={[item[0], item[1]]} />
-          <meshStandardMaterial color="gray" />
-        </mesh>
+      {buildingsData.map((item, index) => (
+        <Building
+          key={index}
+          shape={item.shape}
+          extrudeSettings={item.extrudeSettings}
+          tags={item.tags}
+        />
       ))}
       <pointLight position={[-10, -10, -10]} decay={0} intensity={Math.PI} />
       <OrbitControls />
