feat: remove box

2025-02-24 16:20:28 +09:00 · 2025-02-24 16:20:28 +09:00 · 10c2716aeb
parent 9b8b3ff401
commit 10c2716aeb
5 changed files with 251 additions and 37 deletions
--- a/src/components/button/BottomButton.tsx
+++ b/src/components/button/BottomButton.tsx
@ -1,12 +1,15 @@
 import { css } from "@emotion/react";
 import { ButtonHTMLAttributes, DetailedHTMLProps } from "react";

-type ButtonProps = DetailedHTMLProps<
-  ButtonHTMLAttributes<HTMLButtonElement>,
-  HTMLButtonElement
->;
+interface ButtonProps
+  extends DetailedHTMLProps<
+    ButtonHTMLAttributes<HTMLButtonElement>,
+    HTMLButtonElement
+  > {
+  isShow?: boolean;
+}

-export function BottomButton(props: ButtonProps) {
+export function NextButton(props: ButtonProps) {
  return (
    <button
      css={css({
@ -25,6 +28,43 @@ export function BottomButton(props: ButtonProps) {
        outline: "rgba(240, 240, 244, 0.51) solid 0.1rem",
        cursor: "pointer",
        transition: "0.2s",
+        display: props.isShow ? "" : "none",
+        ":hover": {
+          backgroundColor: "#ebeef0c2",
+        },
+        ":disabled": {
+          backgroundColor: "#ebeef0c2",
+          cursor: "not-allowed",
+        },
+      })}
+      {...props}
+    >
+      {props.children}
+    </button>
+  );
+}
+
+export function PrevButton(props: ButtonProps) {
+  return (
+    <button
+      css={css({
+        position: "absolute",
+        zIndex: 9999,
+        left: "2rem",
+        bottom: "2rem",
+        color: "#000000",
+        backgroundColor: "#ffffff96",
+        backdropFilter: "blur(8px)",
+        border: "none",
+        padding: "0.75rem 1.25rem",
+        borderRadius: "8px",
+        fontWeight: "300",
+        fontSize: "14px",
+        outline: "rgba(240, 240, 244, 0.51) solid 0.1rem",
+        cursor: "pointer",
+        transition: "0.2s",
+        display: props.isShow ? "" : "none",
+
        ":hover": {
          backgroundColor: "#ebeef0c2",
        },
--- a/src/components/map/Processing.tsx
+++ b/src/components/map/Processing.tsx
@ -1,3 +1,81 @@
-export function ProcessingMap() {
-  return <p>processing</p>;
+import { css } from "@emotion/react";
+import React, { useState } from "react";
+
+interface Building {
+  id: number;
+  tags: { [key: string]: string | undefined };
+  geometry?: { lat: number; lng: number }[];
+}
+
+export function BuildingHeights({ area }: { area: any }) {
+  const [buildings, setBuildings] = useState<Building[]>([]);
+
+  const requestBuildings = () => {
+    console.log(area);
+    const south = area[1].lat;
+    const west = area[1].lng;
+    const north = area[0].lat;
+    const east = area[0].lng;
+    console.log(south, west, north, east);
+    const query = `[out:json][timeout:25];(way["building"]( ${south},${west},${north},${east} );relation["building"]( ${south},${west},${north},${east} ););out body geom;`;
+    fetch("https://overpass-api.de/api/interpreter", {
+      method: "POST",
+      body: query,
+      headers: { "Content-Type": "application/x-www-form-urlencoded" },
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        const blds: Building[] = data.elements.map((element) => ({
+          id: element.id,
+          tags: element.tags,
+          geometry: element.geometry
+            ? element.geometry.map((pt) => ({ lat: pt.lat, lng: pt.lon }))
+            : undefined,
+        }));
+        setBuildings(blds);
+        console.log("Building Data:", blds);
+      })
+      .catch((error) => {
+        console.error("Error fetching building data:", error);
+      });
+  };
+
+  return (
+    <div
+      css={css({
+        position: "relative",
+      })}
+    >
+      <button onClick={requestBuildings}>request</button>
+      <ul
+        css={css({
+          overflow: "scroll",
+          zIndex: 999,
+          position: "absolute",
+          top: "1rem",
+          height: "80vh",
+        })}
+      >
+        {buildings.map((b) => (
+          <li key={b.id}>
+            <div>Building {b.id}</div>
+            <div>Height: {b.tags.height || "No height info"}</div>
+            <div>Location/Shape:</div>
+            {b.geometry ? (
+              <ul>
+                {b.geometry.map((pt, index) => (
+                  <li key={index}>
+                    ({pt.lat.toFixed(5)}, {pt.lng.toFixed(5)})
+                  </li>
+                ))}
+              </ul>
+            ) : (
+              <div>No geometry info</div>
+            )}
+            <div>Other Tags: {JSON.stringify(b.tags)}</div>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
 }
--- a/src/components/map/SelectMap.tsx
+++ b/src/components/map/SelectMap.tsx
@ -11,12 +11,13 @@ import { css } from "@emotion/react";

 function RectangleSelector({
  isDrag = true,
+  bounds,
  onChange,
 }: {
  isDrag: boolean;
+  bounds: LatLngBounds | null;
  onChange: (LatLngBounds: LatLngBounds) => void;
 }) {
-  const [bounds, setBounds] = useState<LatLngBounds | null>(null);
  const [firstPoint, setFirstPoint] = useState<LatLng | null>(null);

  useEffect(() => {
@ -35,12 +36,11 @@ function RectangleSelector({
    },
    mousemove(e) {
      if (firstPoint) {
-        setBounds(new L.LatLngBounds(firstPoint, e.latlng));
+        onChange(new L.LatLngBounds(firstPoint, e.latlng));
      }
    },
    mouseup(e) {
      if (firstPoint) {
-        setBounds(new L.LatLngBounds(firstPoint, e.latlng));
        onChange(new L.LatLngBounds(firstPoint, e.latlng));
        setFirstPoint(null);
      }
@ -51,14 +51,28 @@ function RectangleSelector({
  ) : null;
 }

-export function MapComponent({ onDone }: { onDone: (e) => void }) {
+export function MapComponent({
+  onDone,
+  onRemove,
+}: {
+  onDone: (e) => void;
+  onRemove: () => void;
+}) {
  const [isDrag, setIsDrag] = useState(true);
+  const [bounds, setBounds] = useState<LatLngBounds | null>(null);

  const handleClickSwitchDrag = () => {
    setIsDrag(!isDrag);
  };

+  const handleClickRemoveBox = () => {
+    onRemove();
+    setBounds(null);
+    setIsDrag(true);
+  };
+
  const handleChangeDone = (e) => {
+    setBounds(e);
    onDone([e._northEast, e._southWest]);
  };

@ -68,40 +82,80 @@ export function MapComponent({ onDone }: { onDone: (e) => void }) {
        position: "relative",
      })}
    >
-      <button
+      <div
        css={css({
          position: "absolute",
          zIndex: 9999,
          right: "1rem",
          top: "1rem",
-          color: "#000000",
-          backgroundColor: "#ffffff96",
-          backdropFilter: "blur(8px)",
-          border: "none",
-          padding: "0.5rem 1rem",
-          borderRadius: "8px",
-          outline: "rgba(240, 240, 244, 0.51) solid 0.1rem",
-          cursor: "pointer",
-          transition: "0.2s",
-          ":hover": {
-            backgroundColor: "#ebeef0c2",
-          },
+          display: "flex",
+          justifyContent: "flex-end",
+          gap: "0.5rem",
        })}
-        onClick={handleClickSwitchDrag}
      >
-        {isDrag ? "Disable" : "Enable"} Drag
-      </button>
+        <button
+          css={css({
+            display: isDrag ? "none" : "",
+            color: "#ffffff",
+
+            backgroundColor: "#ef4444",
+            backdropFilter: "blur(8px)",
+            border: "none",
+            padding: "0.5rem 1rem",
+            borderRadius: "8px",
+            outline: "#ef4444c2 solid 0.1rem",
+            cursor: "pointer",
+            transition: "0.2s",
+            ":hover": {
+              backgroundColor: "#ef4444",
+            },
+          })}
+          onClick={handleClickRemoveBox}
+        >
+          Remove Box
+        </button>
+
+        <button
+          css={css({
+            color: isDrag ? "#ffffff" : "#000000",
+
+            backgroundColor: isDrag ? "#007bffe8" : "#ffffff96",
+            backdropFilter: "blur(8px)",
+            border: "none",
+            padding: "0.5rem 1rem",
+            borderRadius: "8px",
+            outline: isDrag
+              ? "#086ad4c2 solid 0.1rem"
+              : "rgba(240, 240, 244, 0.51) solid 0.1rem",
+            cursor: "pointer",
+            transition: "0.2s",
+            ":hover": {
+              backgroundColor: isDrag ? "#085fbd" : "#ebeef0c2",
+            },
+          })}
+          onClick={handleClickSwitchDrag}
+        >
+          {isDrag ? "Select Box" : "Back to Drag"}
+        </button>
+      </div>

      <MapContainer
        center={[36.48656, 127.29064]}
        zoom={13}
-        style={{ height: "70vh", width: "100%" }}
+        style={{
+          height: "70vh",
+          width: "100%",
+        }}
      >
        <TileLayer
          attribution='&copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
-        <RectangleSelector isDrag={isDrag} onChange={handleChangeDone} />
+        <RectangleSelector
+          bounds={bounds}
+          isDrag={isDrag}
+          onChange={handleChangeDone}
+        />
      </MapContainer>
    </div>
  );
--- a/src/index.css
+++ b/src/index.css
@ -14,6 +14,11 @@ body,
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
+  -ms-overflow-style: none;
+}
+
+::-webkit-scrollbar {
+  display: none;
 }

 * {
--- a/src/ui/App.tsx
+++ b/src/ui/App.tsx
@ -6,20 +6,36 @@ import { Description } from "@/components/text/Description";
 import { Column } from "@/components/flex/Column";
 import { MapComponent } from "@/components/map/SelectMap";
 import { useState } from "react";
-import { BottomButton } from "@/components/button/BottomButton";
+import { NextButton, PrevButton } from "@/components/button/BottomButton";
+import { BuildingHeights } from "@/components/map/Processing";

 function App() {
  const [isNextButtonDisabled, setIsNextButtonDisabled] = useState(true);
-  const handleDone = (e) => {
-    console.log(e);
+  const [areaData, setAreaData] = useState([]);
+  const [steps, setSteps] = useState(["front", "processing"]);
+  const [step, setStep] = useState(0);
+
+  const handleDone = (data) => {
+    setAreaData(data);
    setIsNextButtonDisabled(false);
  };

-  const handleClickNextStep = () => {};
+  const handleRemove = () => {
+    setAreaData([]);
+    setIsNextButtonDisabled(true);
+  };
+
+  const handleClickNextStep = () => {
+    setStep(step + 1);
+  };
+
+  const handleClickPrevStep = () => {
+    setStep(step - 1);
+  };

  return (
    <div css={css({ height: "100%", width: "100%" })}>
-      <FullscreenModal isOpen={true}>
+      <FullscreenModal isOpen={steps[step] == "front"}>
        <Column gap="1rem">
          <Column gap="0.5rem">
            <Title>Generate 3d map</Title>
@ -27,16 +43,37 @@ function App() {
              Tools to create 3D maps based on maps and export them in 3D format
            </Description>
          </Column>
-          <MapComponent onDone={handleDone}></MapComponent>
+          <MapComponent
+            onRemove={handleRemove}
+            onDone={handleDone}
+          ></MapComponent>
        </Column>
      </FullscreenModal>

-      <BottomButton
+      <FullscreenModal isOpen={steps[step] == "processing"}>
+        <Column gap="1rem">
+          <Column gap="0.5rem">
+            <Title>Processing</Title>
+            <Description>
+              Tools to create 3D maps based on maps and export them in 3D format
+            </Description>
+
+            <BuildingHeights area={areaData} />
+          </Column>
+        </Column>
+      </FullscreenModal>
+
+      <PrevButton isShow={step != 0} onClick={handleClickPrevStep}>
+        Prev Step
+      </PrevButton>
+
+      <NextButton
+        isShow={true}
        disabled={isNextButtonDisabled}
        onClick={handleClickNextStep}
      >
        Next Step
-      </BottomButton>
+      </NextButton>

      <Space />
    </div>