paste geojson features

bdon · Sep 22, 2024 · b97c643 · b97c643
1 parent 60e77dc
commit b97c643
Showing 1 changed file with 40 additions and 25 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -224,9 +224,12 @@ function App() {
   const [maxCells, setMaxCells] = createSignal(200);
   const [drawMode, setDrawMode] = createSignal("");
   const [cellUnionText, setCellUnionText] = createSignal("");
+  const [geojsonText] = createSignal("");
   const [cellUnionLength, setCellUnionLength] = createSignal(0);
   const [loadError, setLoadError] = createSignal("");
+  const [geojsonLoadError, setGeoJsonLoadError] = createSignal("");
   let textArea: HTMLTextAreaElement | undefined;
+  let jsonArea: HTMLTextAreaElement | undefined;
 
   const computeCoveringForDraw = () => {
     const snapshot = draw!.getSnapshot() as Feature<Polygon>[];
@@ -274,6 +277,34 @@ function App() {
     }
   };
 
+  const loadGeoJsonFromText = () => {
+    let rect = s2.Rect.emptyRect();
+
+    draw.clear();
+    if (!jsonArea) return;
+
+    try {
+      const feature = JSON.parse(jsonArea.value);
+      if (feature?.type !== "Feature") throw new Error("Invalid Feature");
+
+      const covering = getCovering(regionCoverer, [feature]);
+      displayCovering(covering);
+
+      rect = covering.rectBound();
+      map.fitBounds(
+        [
+          [s1.angle.degrees(rect.lng.lo), s1.angle.degrees(rect.lat.lo)],
+          [s1.angle.degrees(rect.lng.hi), s1.angle.degrees(rect.lat.hi)],
+        ],
+        { padding: 50 },
+      );
+
+      setGeoJsonLoadError("");
+    } catch (e: any) {
+      setGeoJsonLoadError(e.message);
+    }
+  };
+
   createEffect(() => {
     regionCoverer = new geojson.RegionCoverer({
       minLevel: minLevel(),
@@ -443,31 +474,6 @@ function App() {
         );
       }
     });
-
-    // secret paste polygon from clipboard command
-    var keyMap: { [name: string]: boolean } = {};
-    window.onkeydown = window.onkeyup = async (e) => {
-      keyMap[e.code] = e.type == "keydown";
-      if (e.type != "keydown") return;
-
-      // cntrl + shift + v
-      if (!["ControlLeft", "ShiftLeft", "KeyV"].every((c) => keyMap[c])) return;
-
-      try {
-        console.error("secret keyboard shortcut activated!!");
-        if (!navigator?.clipboard) throw new Error("clipboard API unavailable");
-        const clip = await navigator.clipboard.readText();
-        const feature = JSON.parse(clip);
-        if (feature?.type !== "Feature") {
-          throw new Error("invalid feature");
-        }
-        const covering = getCovering(regionCoverer, [feature]);
-        displayCovering(covering);
-      } catch (e) {
-        console.error("clipboard paste failed");
-        console.error(e);
-      }
-    };
   });
 
   return (
@@ -540,6 +546,15 @@ function App() {
             )}
             <button onClick={loadCoveringFromText}>Load Text</button>
           </div>
+          <textarea ref={jsonArea} rows="5" value={geojsonText()}></textarea>
+          <div class="textarealabel">
+            {geojsonLoadError() ? (
+              <span>{geojsonLoadError()}</span>
+            ) : (
+              <span></span>
+            )}
+            <button onClick={loadGeoJsonFromText}>Load GeoJSON Feature</button>
+          </div>
         </div>
         <div class="text">
           <h1>s2js Demo</h1>