feat(globe): migrate to custom globe implementation (#1236)

* chore: update to vite 4

* chore: update typescript 4 -> 5

* chore: update electron to 24.2.0

* chore: update node typings

* feat: initial working version of webgl-globe

* refactor: restructure react-hooks for globe

* feat(webgl-globe): add projection switcher

* feat(webgl-globe)!: remove cesium and related code

 - removes cesium dependency
 - remove old code referencing the cesium globe
 - replaced cesium specific GlobeView type with CameraView type from @ubilabs/esa-webgl-globe

* feat(webgl-globe): synchronized globes in compare-mode

* fix(webgl-globe): remove remnants of old GlobeView type

* feat(marker): add hover effect

* fix(globe): fix globe resize on compare

* fix(globe): update for marker click fix

* fix(globe): fix flyTo in story mode

* fix: update dependencies, triggering resize-events is no longer needed

* feat(webgl-globe): implement moveStart/moveEnd callbacks via timers

* chore: npm update

* fix: rewrite url parsing and serialization

* fix: use initial view-state when creating the globe instance.

* fix(layers): wait for layer-details before selecting layer

If we set the selected layer before the details are available, the globe will - for a few frames - render the default globe, which leads to flickering.

---------

Co-authored-by: Philipp Wambach <philippwambach@googlemail.com>

.eslintrc

@@ -1,12 +1,19 @@
 {
   "parser": "@typescript-eslint/parser",
-  "plugins": ["@typescript-eslint", "react-hooks"],
+  "plugins": ["@typescript-eslint", "react", "react-hooks"],
   "extends": [
     "plugin:@typescript-eslint/recommended",
     "plugin:react/recommended",
     "prettier"
   ],
-  "settings": {},
+  "settings": {
+    "react":{
+      "createClass": "createReactClass",
+      "pragma": "React",
+      "fragment": "Fragment",
+      "version": "detect"
+    }
+  },
   "env": {
     "browser": true,
     "es6": true,

.gitignore

@@ -1,10 +1,11 @@
-node_modules
-dist
-dist-electron
-dist-src-electron
+/node_modules
+/dist
+/dist-electron
+/dist-src-electron
 .vscode
-storage/**/*.zip
-download
+/storage/**/*.zip
+/storage/basemaps
+/download
 *.ipynb
 .DS_Store
 assets/legend-images/

NOTES.md

@@ -0,0 +1,55 @@
+# detailed cesium API usage
+
+## `components/globe.tsx`
+
+- create and configure globe
+- configure event-handling
+- toggle 2d/3d (via `props.projectionState`)
+- handle external view-state changes coming from other globe (sync)
+- setup basemap from `props.layerDetails`
+- trigger flyTo (via props.flyTo)
+- initiate automatic spinning (via `props.spinning`)
+- wait for tiles being loaded (react-state `firstTilesLoaded`)
+
+- calls `useGlobeLayer()`
+- calls `useMarkers()` (marker-data from props)
+
+- ATTN: defines viewport in 6DoF position (lla) and orientation, check if
+  something other than orientation towards center is needed.
+
+- knowledge of actual timestamp, available timestamps etc is (exclusively) outside the Globe component
+- incoming layers: props.imageLayer contains current url (pattern) with
+  the timestamp already inserted `props.imageLayer.url === '.../tiles/5/{z}/{x}/{reverseY}.png'`
+- basemap is essentially encoded in a single property
+  `props.layerDetails.basemap === 'land'`
+
+### usage
+
+## `hooks/use-globe-layer.ts`
+
+- exclusively called by the Globe component
+
+- creates imagery providers and layer from layer-specification
+- waits for layer to be ready and adds it to cesium viewer
+
+## `hooks/use-markers.ts`
+
+- exclusively called by the Globe component
+
+- waits for cesium viewer and tiles being loaded before adding / showing markers
+- uses create-marker.ts to actually create the markers.
+- This should be mostly obsolete with the new marker implementation.
+
+## `libs/create-marker.ts`
+
+- exclusively called by the useMarkers hook
+
+## `libs/download-screenshot.ts`
+
+- (only uses the `.cesium-viewer` css class to find canvas-elements)
+
+## `libs/get-globe-view.ts`
+
+- exclusively called by the Globe component
+
+- functions to convert between `GlobeView` (position/orientation) and cesium internal formats.