Improve minimap

resources/openbim-components.js

@@ -12628,7 +12628,8 @@ class RangeInput extends SimpleUIComponent {
 class Canvas extends SimpleUIComponent {
     constructor(components) {
         const template = `
-    <canvas class="absolute w-80 h-40 right-3 bottom-3 bg-ifcjs-120 border-transparent border border-solid"></canvas> 
+        <canvas class="absolute w-80 h-40 right-8 bottom-8 bg-ifcjs-120 
+        border-transparent border border-solid rounded-lg"></canvas> 
     `;
         super(components, template);
         this.name = "SimpleUICard";
@@ -102671,13 +102672,21 @@ class MiniMap extends Component {
         this._camera.zoom = value;
         this._camera.updateProjectionMatrix();
     }
+    get enabled() {
+        return this._enabled;
+    }
+    set enabled(active) {
+        this._enabled = active;
+        this.uiElement.canvas.visible = active;
+    }
     constructor(components) {
         super();
         this.name = "MiniMap";
-        this.enabled = true;
         this.afterUpdate = new Event();
         this.beforeUpdate = new Event();
         this.overrideMaterial = new THREE$1.MeshDepthMaterial();
+        this.backgroundColor = new THREE$1.Color(0x06080a);
+        this._enabled = true;
         this._lockRotation = true;
         this._size = new THREE$1.Vector2(320, 160);
         this._tempPosition = new THREE$1.Vector3();
@@ -102710,6 +102719,8 @@ class MiniMap extends Component {
         return this._camera;
     }
     update() {
+        if (!this.enabled)
+            return;
         this.beforeUpdate.trigger();
         const scene = this._components.scene.get();
         const cameraComponent = this._components.camera;
@@ -102723,7 +102734,10 @@ class MiniMap extends Component {
             this._camera.rotation.z = angle + Math.PI;
         }
         this._plane.set(this.down, this._tempPosition.y);
+        const previousBackground = scene.background;
+        scene.background = this.backgroundColor;
         this._renderer.render(scene, this._camera);
+        scene.background = previousBackground;
         this.afterUpdate.trigger();
     }
     getSize() {

resources/styles.css

@@ -656,10 +656,6 @@ html {
   bottom: 0px;
 }
 
-.bottom-3{
-  bottom: 0.75rem;
-}
-
 .bottom-8{
   bottom: 2rem;
 }
@@ -684,10 +680,6 @@ html {
   right: 0px;
 }
 
-.right-3{
-  right: 0.75rem;
-}
-
 .right-8{
   right: 2rem;
 }

src/navigation/MiniMap/index.html

@@ -58,7 +58,7 @@
     ambientLight.intensity = 0.5;
     scene.add(ambientLight);
 
-    const grid = new OBC.SimpleGrid(components);
+    const grid = new OBC.SimpleGrid(components, new THREE.Color(0x666666));
     components.tools.add('grid', grid);
     const gridMesh = grid.get();
     renderer.postproduction.customEffects.excludedMeshes.push(gridMesh);
@@ -166,10 +166,12 @@
 
     const size = map.getSize();
 
+    gui.add(map, "enabled").name("Map enabled");
     gui.add(map, "lockRotation").name("Lock rotation");
     gui.add(map, "zoom").name("Zoom").min(0.01).max(0.5).step(0.01);
     gui.add(size, "x").name("Width").min(100).max(500).step(10).onChange(() => map.resize(size));
     gui.add(size, "y").name("Height").min(100).max(500).step(10).onChange(() => map.resize(size));
+    gui.addColor(map, "backgroundColor");
 
 </script>
 </body>

src/navigation/MiniMap/index.ts

@@ -10,13 +10,15 @@ export class MiniMap
   implements UI, Resizeable, Updateable
 {
   name = "MiniMap";
-  enabled = true;
   uiElement: { main: Button; canvas: Canvas };
   afterUpdate = new Event();
   beforeUpdate = new Event();
 
   overrideMaterial = new THREE.MeshDepthMaterial();
 
+  backgroundColor = new THREE.Color(0x06080a);
+
+  private _enabled = true;
   private _lockRotation = true;
   private _components: Components;
   private _camera: THREE.OrthographicCamera;
@@ -49,6 +51,15 @@ export class MiniMap
     this._camera.updateProjectionMatrix();
   }
 
+  get enabled() {
+    return this._enabled;
+  }
+
+  set enabled(active: boolean) {
+    this._enabled = active;
+    this.uiElement.canvas.visible = active;
+  }
+
   constructor(components: Components) {
     super();
 
@@ -92,6 +103,7 @@ export class MiniMap
   }
 
   update() {
+    if (!this.enabled) return;
     this.beforeUpdate.trigger();
     const scene = this._components.scene.get();
     const cameraComponent = this._components.camera as SimpleCamera;
@@ -110,7 +122,10 @@ export class MiniMap
     }
 
     this._plane.set(this.down, this._tempPosition.y);
+    const previousBackground = scene.background;
+    scene.background = this.backgroundColor;
     this._renderer.render(scene, this._camera);
+    scene.background = previousBackground;
     this.afterUpdate.trigger();
   }
 

src/ui/Canvas/index.ts

@@ -13,7 +13,8 @@ export class Canvas
 
   constructor(components: Components) {
     const template = `
-    <canvas class="absolute w-80 h-40 right-3 bottom-3 bg-ifcjs-120 border-transparent border border-solid"></canvas> 
+        <canvas class="absolute w-80 h-40 right-8 bottom-8 bg-ifcjs-120 
+        border-transparent border border-solid rounded-lg"></canvas> 
     `;
     super(components, template);
     this._canvas = this.get();