Migration to React three fiber (#775)

* Add react three fiber and drei Signed-off-by: angatupyry <fierrofenix@gmail.com> * Use component property in Box material ui component to avoid three Box component noise Signed-off-by: angatupyry <fierrofenix@gmail.com> * Use component property in Box material ui component to avoid three Box component noise Signed-off-by: angatupyry <fierrofenix@gmail.com> * Use component property in Box material ui component to avoid three Box component noise Signed-off-by: angatupyry <fierrofenix@gmail.com> * Export function Signed-off-by: angatupyry <fierrofenix@gmail.com> * Add wall draw calculation Signed-off-by: angatupyry <fierrofenix@gmail.com> * Add reac three fiber logical Signed-off-by: angatupyry <fierrofenix@gmail.com> * Migrate to react three fiber Signed-off-by: angatupyry <fierrofenix@gmail.com> * Remove center state Signed-off-by: angatupyry <fierrofenix@gmail.com> * Remove map setting Signed-off-by: angatupyry <fierrofenix@gmail.com> * Make circle shape smaller Signed-off-by: angatupyry <fierrofenix@gmail.com> * Add zindex to for the text layers to appear on top Signed-off-by: angatupyry <fierrofenix@gmail.com> * Ensure that React doesn't attempt to create or update component Signed-off-by: angatupyry <fierrofenix@gmail.com> * Add text rendering Signed-off-by: angatupyry <fierrofenix@gmail.com> * Rendering labels Signed-off-by: angatupyry <fierrofenix@gmail.com> * Hover and zoom text Signed-off-by: angatupyry <fierrofenix@gmail.com> * Show labesl correctly Signed-off-by: angatupyry <fierrofenix@gmail.com> * Remove unused imports Signed-off-by: angatupyry <fierrofenix@gmail.com> * Implementing debounce to show labels with delay Signed-off-by: angatupyry <fierrofenix@gmail.com> * Small fixes to react-three-fiber migration (#788) * Disable walls Signed-off-by: Aaron Chong <aaronchongth@gmail.com> * Use useLoader with url only, catch CORS errors potentially due to timeout issues when images are large Signed-off-by: Aaron Chong <aaronchongth@gmail.com> --------- Signed-off-by: Aaron Chong <aaronchongth@gmail.com> * Add labels for elevator and door names Signed-off-by: angatupyry <fierrofenix@gmail.com> * Wrap checkboxes into a div and use select to choose levels Signed-off-by: angatupyry <fierrofenix@gmail.com> * Add zoom icon Signed-off-by: angatupyry <fierrofenix@gmail.com> * Add levelselect event to persits between tabs Signed-off-by: angatupyry <fierrofenix@gmail.com> * Using AppEvents to persits levels Signed-off-by: angatupyry <fierrofenix@gmail.com> * Camera control component has been added Signed-off-by: angatupyry <fierrofenix@gmail.com> * Zoom in and zoom out events Signed-off-by: angatupyry <fierrofenix@gmail.com> * Add camera control component Signed-off-by: angatupyry <fierrofenix@gmail.com> * Add a wheel function to test event Signed-off-by: angatupyry <fierrofenix@gmail.com> * Expose debounce function Signed-off-by: angatupyry <fierrofenix@gmail.com> * Add wheel function to get the zoom value Signed-off-by: angatupyry <fierrofenix@gmail.com> * Updating zoom properly Signed-off-by: angatupyry <fierrofenix@gmail.com> * Remove conditional useLoader Signed-off-by: angatupyry <fierrofenix@gmail.com> * Remove zoom icon Signed-off-by: angatupyry <fierrofenix@gmail.com> * Remove zoom implementation Signed-off-by: angatupyry <fierrofenix@gmail.com> * Fix lint Signed-off-by: angatupyry <fierrofenix@gmail.com> * Rewrite debounce functino Signed-off-by: angatupyry <fierrofenix@gmail.com> * Add layers for pickup and dropoff waypoints Signed-off-by: angatupyry <fierrofenix@gmail.com> * Fix dashboard CI for react-three-fiber migration (#795) * Set max heap size Signed-off-by: Aaron Chong <aaronchongth@gmail.com> * Stop producing sourcemap for CI Signed-off-by: Aaron Chong <aaronchongth@gmail.com> * max space to ci Signed-off-by: angatupyry <fierrofenix@gmail.com> * Try build without sourcemap for CI, alongside heap size increment Signed-off-by: Aaron Chong <aaronchongth@gmail.com> * Increasing heapsize on bootstrap step Signed-off-by: Aaron Chong <aaronchongth@gmail.com> * Use experimental support for ECMAScript modules Signed-off-by: Aaron Chong <aaronchongth@gmail.com> * Use react-components as a module instead Signed-off-by: Aaron Chong <aaronchongth@gmail.com> * Remove use of meshes for robot icons Signed-off-by: Aaron Chong <aaronchongth@gmail.com> * Revert module call Signed-off-by: Aaron Chong <aaronchongth@gmail.com> --------- Signed-off-by: Aaron Chong <aaronchongth@gmail.com> Signed-off-by: angatupyry <fierrofenix@gmail.com> Co-authored-by: angatupyry <fierrofenix@gmail.com> * Add spaces in layer names Signed-off-by: angatupyry <fierrofenix@gmail.com> --------- Signed-off-by: angatupyry <fierrofenix@gmail.com> Signed-off-by: Aaron Chong <aaronchongth@gmail.com> Co-authored-by: Aaron Chong <aaronchongth@gmail.com>
open-rmf · Oct 11, 2023 · 72b99d0 · 72b99d0
1 parent 99ecd31
commit 72b99d0
Show file tree

Hide file tree

Showing 38 changed files with 1,596 additions and 219 deletions.
diff --git a/.github/workflows/dashboard.yml b/.github/workflows/dashboard.yml
@@ -31,6 +31,8 @@ jobs:
       - name: setup python
         run: apt update && apt install -y python3-venv python-is-python3
       - name: bootstrap
+        env:
+          NODE_OPTIONS: '--max_old_space_size=4096'
         uses: ./.github/actions/bootstrap
         with:
           package: rmf-dashboard

diff --git a/packages/dashboard/package.json b/packages/dashboard/package.json
@@ -48,6 +48,8 @@
     "@mui/styles": "^5.8.3",
     "@mui/system": "^5.8.3",
     "@mui/x-date-pickers": "^5.0.20",
+    "@react-three/drei": "^9.84.0",
+    "@react-three/fiber": "^8.14.2",
     "@types/debug": "^4.1.5",
     "@types/leaflet": "^1.5.17",
     "@types/react": "^18.2.14",
@@ -56,6 +58,7 @@
     "@types/react-leaflet": "^2.5.2",
     "@types/react-router": "^5.1.20",
     "@types/react-router-dom": "^5.3.3",
+    "@types/three": "^0.156.0",
     "ajv": "^8.10.0",
     "api-client": "workspace:*",
     "axios": "^0.21.1",
@@ -75,7 +78,8 @@
     "react-router-dom": "^6.14.1",
     "rmf-auth": "workspace:*",
     "rmf-models": "workspace:*",
-    "rxjs": "^7.5.5"
+    "rxjs": "^7.5.5",
+    "three": "^0.156.1"
   },
   "devDependencies": {
     "@babel/core": "^7.18.6",

diff --git a/packages/dashboard/src/components/app-events.ts b/packages/dashboard/src/components/app-events.ts
@@ -3,6 +3,7 @@ import {
   Dispenser,
   Door,
   Ingestor,
+  Level,
   Lift,
   TaskState,
 } from 'api-client';
@@ -21,4 +22,5 @@ export const AppEvents = {
   disabledLayers: new ReplaySubject<Record<string, boolean>>(),
   zoom: new BehaviorSubject<number | null>(null),
   mapCenter: new BehaviorSubject<[number, number]>([0, 0]),
+  levelSelect: new BehaviorSubject<Level | null>(null),
 };