refactor: use components

sagewall · Oct 17, 2024 · 24df728 · 24df728
1 parent 0a520fa
commit 24df728
Show file tree

Hide file tree

Showing 8 changed files with 809 additions and 780 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,29 +11,30 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@arcgis/core": "^4.30.0",
-    "@esri/calcite-components-react": "2.8.5",
+    "@arcgis/map-components-react": "^4.31.0-next.129",
+    "@esri/calcite-components-react": "^2.13.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^6.23.1"
+    "react-router-dom": "^6.27.0"
   },
   "devDependencies": {
-    "@eslint/js": "^9.5.0",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
+    "@eslint/js": "^9.12.0",
+    "@types/node": "^22.7.6",
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "^18.3.1",
     "@typescript-eslint/eslint-plugin": "^7.13.1",
     "@typescript-eslint/parser": "^7.13.1",
-    "@vitejs/plugin-react": "^4.3.1",
+    "@vitejs/plugin-react": "^4.3.2",
     "eslint": "^8.57.0",
-    "eslint-plugin-react": "^7.34.3",
+    "eslint-plugin-react": "^7.37.1",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.7",
-    "globals": "^15.6.0",
-    "prettier": "^3.3.2",
-    "rollup-plugin-bundle-stats": "^4.13.3",
+    "globals": "^15.11.0",
+    "prettier": "^3.3.3",
+    "rollup-plugin-bundle-stats": "^4.16.0",
     "rollup-plugin-visualizer": "^5.12.0",
-    "typescript": "^5.4.0",
+    "typescript": "^5.6.3",
     "typescript-eslint": "^7.13.1",
-    "vite": "^5.3.1"
+    "vite": "^5.4.9"
   }
 }
diff --git a/src/components/MapView.tsx b/src/components/MapView.tsx
@@ -1,6 +1,9 @@
 import type Graphic from "@arcgis/core/Graphic";
 import type Collection from "@arcgis/core/core/Collection";
-import type ArcMapView from "@arcgis/core/views/MapView";
+import Point from "@arcgis/core/geometry/Point";
+import type { ArcgisMapCustomEvent } from "@arcgis/map-components";
+import { ArcgisMap, ArcgisPlacement } from "@arcgis/map-components-react";
+import { CalciteAction } from "@esri/calcite-components-react";
 import React, { useEffect, useRef, useState } from "react";
 
 const viewStyles = {
@@ -13,42 +16,45 @@ interface MapViewProps {
 }
 
 const MapView = ({ graphics }: MapViewProps) => {
-  const viewDivRef = useRef<HTMLDivElement>(null);
-
   const [mounted, setMounted] = useState(true);
-  const [view, setView] = useState<ArcMapView | null>(null);
 
-  useEffect(() => {
-    if (viewDivRef.current) {
-      const loadMapView = async () => {
-        const { createMapView } = await import("./lib/mapview");
-        setView(await createMapView(viewDivRef.current as HTMLDivElement, graphics));
-      };
-      loadMapView();
-
-      return () => {
-        view && view.destroy();
-      };
-    }
-  }, []);
+  const arcgisMap = useRef<HTMLArcgisMapElement>(null);
 
   useEffect(() => {
     setMounted(true);
-  }, [view]);
+  }, []);
 
-  useEffect(() => {
-    if (view) {
-      const loadGraphics = async () => {
-        if (graphics) {
-          view.graphics = graphics;
-        }
-      };
-      loadGraphics();
-    }
-  }, [view, graphics]);
+  const handleArcgisViewReadyChange = (event: ArcgisMapCustomEvent<void>) => {
+    event.target.center = new Point({ longitude: -117.1957098, latitude: 34.0564505 });
+    event.target.zoom = 18;
+  };
 
   return (
-    <React.Fragment>{mounted && <div style={viewStyles} ref={viewDivRef}></div>}</React.Fragment>
+    <React.Fragment>
+      {mounted && (
+        <ArcgisMap
+          basemap="gray-vector"
+          graphics={graphics}
+          onArcgisViewReadyChange={(event) => {
+            handleArcgisViewReadyChange(event);
+          }}
+          ref={arcgisMap}
+          style={viewStyles}
+        >
+          <ArcgisPlacement position="top-right">
+            <CalciteAction
+              icon="zoom-to-object"
+              scale="s"
+              text="Zoom to Graphics"
+              textEnabled
+              onClick={() => {
+                arcgisMap.current?.goTo(arcgisMap.current.graphics);
+              }}
+            ></CalciteAction>
+          </ArcgisPlacement>
+        </ArcgisMap>
+      )}
+    </React.Fragment>
   );
 };
 

diff --git a/src/components/SceneView.tsx b/src/components/SceneView.tsx
@@ -1,6 +1,9 @@
 import type Graphic from "@arcgis/core/Graphic";
 import type Collection from "@arcgis/core/core/Collection";
-import type ArcSceneView from "@arcgis/core/views/SceneView";
+import Point from "@arcgis/core/geometry/Point";
+import type { ArcgisSceneCustomEvent } from "@arcgis/map-components";
+import { ArcgisPlacement, ArcgisScene } from "@arcgis/map-components-react";
+import { CalciteAction } from "@esri/calcite-components-react";
 import React, { useEffect, useRef, useState } from "react";
 
 const viewStyles = {
@@ -13,42 +16,45 @@ interface SceneViewProps {
 }
 
 const SceneView = ({ graphics }: SceneViewProps) => {
-  const viewDivRef = useRef<HTMLDivElement>(null);
-
   const [mounted, setMounted] = useState(true);
-  const [view, setView] = useState<ArcSceneView | null>(null);
 
-  useEffect(() => {
-    if (viewDivRef.current) {
-      const loadSceneView = async () => {
-        const { createSceneView } = await import("./lib/sceneview");
-        setView(await createSceneView(viewDivRef.current as HTMLDivElement, graphics));
-      };
-      loadSceneView();
-
-      return () => {
-        view && view.destroy();
-      };
-    }
-  }, []);
+  const arcgisScene = useRef<HTMLArcgisSceneElement>(null);
 
   useEffect(() => {
     setMounted(true);
-  }, [view]);
+  }, []);
 
-  useEffect(() => {
-    if (view) {
-      const loadGraphics = async () => {
-        if (graphics) {
-          view.graphics = graphics;
-        }
-      };
-      loadGraphics();
-    }
-  }, [view, graphics]);
+  const handleArcgisViewReadyChange = (event: ArcgisSceneCustomEvent<void>) => {
+    event.target.center = new Point({ longitude: -117.1957098, latitude: 34.0564505 });
+    event.target.view.zoom = 17;
+  };
 
   return (
-    <React.Fragment>{mounted && <div style={viewStyles} ref={viewDivRef}></div>}</React.Fragment>
+    <React.Fragment>
+      {mounted && (
+        <ArcgisScene
+          basemap="gray-vector"
+          graphics={graphics}
+          onArcgisViewReadyChange={(event) => {
+            handleArcgisViewReadyChange(event);
+          }}
+          ref={arcgisScene}
+          style={viewStyles}
+        >
+          <ArcgisPlacement position="top-right">
+            <CalciteAction
+              icon="zoom-to-object"
+              scale="s"
+              text="Zoom to Graphics"
+              textEnabled
+              onClick={() => {
+                arcgisScene.current?.goTo(arcgisScene.current.graphics);
+              }}
+            ></CalciteAction>
+          </ArcgisPlacement>
+        </ArcgisScene>
+      )}
+    </React.Fragment>
   );
 };
 

diff --git a/src/components/lib/mapview.ts b/src/components/lib/mapview.ts
diff --git a/src/components/lib/sceneview.ts b/src/components/lib/sceneview.ts
diff --git a/src/main.tsx b/src/main.tsx
@@ -1,4 +1,7 @@
 import "@arcgis/core/assets/esri/themes/light/main.css";
+import "@arcgis/map-components/dist/components/arcgis-map";
+import "@arcgis/map-components/dist/components/arcgis-placement";
+import "@arcgis/map-components/dist/components/arcgis-scene";
 import "@esri/calcite-components/dist/calcite/calcite.css";
 import { setAssetPath } from "@esri/calcite-components/dist/components";
 import "@esri/calcite-components/dist/components/calcite-action";
@@ -48,7 +51,7 @@ import SimpleMarkerSymbolPage from "./pages/simple-marker-symbol";
 import TextSymbolPage from "./pages/text-symbol";
 import WebStyleSymbolPage from "./pages/web-style-symbol";
 
-setAssetPath("https://js.arcgis.com/calcite-components/2.8.5/assets");
+setAssetPath("https://js.arcgis.com/calcite-components/2.13.1/assets");
 
 const router = createBrowserRouter(
   [

diff --git a/vite.config.ts b/vite.config.ts
@@ -8,7 +8,7 @@ export default defineConfig(({ mode }) => {
   return {
     base: env.VITE_BASE_NAME,
     build: {
-      chunkSizeWarningLimit: 2500
+      chunkSizeWarningLimit: 2600
     },
     plugins: [
       bundleStats({