feat(core): add grids config

packages/core/src/core/Clipper/src/clipper-config.ts

@@ -1,4 +1,3 @@
-// eslint-disable-next-line max-classes-per-file
 import * as THREE from "three";
 import {
   BooleanSettingsControl,

packages/core/src/core/Grids/example.ts

@@ -19,7 +19,9 @@ In this tutorial, we will import:
 */
 
 import * as THREE from "three";
+import Stats from "stats.js";
 import * as OBC from "@thatopen/components";
+import * as BUI from "@thatopen/ui";
 
 /* MD
   ### 🌎 Setting up a simple scene
@@ -46,7 +48,10 @@ world.camera = new OBC.SimpleCamera(components);
 
 components.init();
 
-const cube = new THREE.Mesh(new THREE.BoxGeometry());
+const cube = new THREE.Mesh(
+  new THREE.BoxGeometry(),
+  new THREE.MeshBasicMaterial({ color: "red" }),
+);
 world.scene.three.add(cube);
 
 /* MD
@@ -69,6 +74,80 @@ const grids = components.get(OBC.Grids);
 const grid = grids.create(world);
 console.log(grid);
 
+/* MD
+  ### 🧩 Adding some UI
+  ---
+
+  We will use the `@thatopen/ui` library to add some simple and cool UI elements to our app. First, we need to call the `init` method of the `BUI.Manager` class to initialize the library:
+
+*/
+
+BUI.Manager.init();
+
+/* MD
+  Now we will create some UI elements and bind them to some of the controls of the clipper, like activation, visibility, size, color, etc. For more information about the UI library, you can check the specific documentation for it!
+*/
+
+const panel = BUI.Component.create<BUI.PanelSection>(() => {
+  return BUI.html`
+    <bim-panel label="Grids Tutorial" class="options-menu">
+
+      <bim-panel-section collapsed label="Controls"">
+          
+        <bim-checkbox label="Grid visible" checked 
+          @change="${({ target }: { target: BUI.Checkbox }) => {
+            grid.config.visible = target.value;
+          }}">
+        </bim-checkbox>
+      
+        <bim-color-input 
+          label="Grid Color" color="#bbbbbb" 
+          @input="${({ target }: { target: BUI.ColorInput }) => {
+            grid.config.color = new THREE.Color(target.color);
+          }}">
+        </bim-color-input>
+        
+        <bim-number-input 
+          slider step="0.1" label="Grid primary size" value="1" min="0" max="10"
+          @change="${({ target }: { target: BUI.NumberInput }) => {
+            grid.config.primarySize = target.value;
+          }}">
+        </bim-number-input>
+        
+        <bim-number-input 
+          slider step="0.1" label="Grid secondary size" value="10" min="0" max="20"
+          @change="${({ target }: { target: BUI.NumberInput }) => {
+            grid.config.secondarySize = target.value;
+          }}">
+        </bim-number-input>
+        
+      </bim-panel-section>
+    </bim-panel>
+    `;
+});
+
+document.body.append(panel);
+
+/* MD
+  And we will make some logic that adds a button to the screen when the user is visiting our app from their phone, allowing to show or hide the menu. Otherwise, the menu would make the app unusable.
+*/
+
+const button = BUI.Component.create<BUI.PanelSection>(() => {
+  return BUI.html`
+      <bim-button class="phone-menu-toggler" icon="solar:settings-bold"
+        @click="${() => {
+          if (panel.classList.contains("options-menu-visible")) {
+            panel.classList.remove("options-menu-visible");
+          } else {
+            panel.classList.add("options-menu-visible");
+          }
+        }}">
+      </bim-button>
+    `;
+});
+
+document.body.append(button);
+
 /* MD
   ### ⏱️ Measuring the performance (optional)
   ---

packages/core/src/core/Grids/index.ts

@@ -1,6 +1,5 @@
-import * as THREE from "three";
 import { Component, Disposable, World, Event } from "../Types";
-import { GridConfig, SimpleGrid } from "./src";
+import { SimpleGrid } from "./src";
 import { Components } from "../Components";
 
 export * from "./src";
@@ -20,16 +19,6 @@ export class Grids extends Component implements Disposable {
    */
   list = new Map<string, SimpleGrid>();
 
-  /**
-   * The default configuration for grid creation.
-   */
-  config: Required<GridConfig> = {
-    color: new THREE.Color(0xbbbbbb),
-    size1: 1,
-    size2: 10,
-    distance: 500,
-  };
-
   /** {@link Disposable.onDisposed} */
   readonly onDisposed = new Event();
 
@@ -54,7 +43,7 @@ export class Grids extends Component implements Disposable {
     if (this.list.has(world.uuid)) {
       throw new Error("This world already has a grid!");
     }
-    const grid = new SimpleGrid(this.components, world, this.config);
+    const grid = new SimpleGrid(this.components, world);
     this.list.set(world.uuid, grid);
     world.onDisposed.add(() => {
       this.delete(world);

packages/core/src/core/Grids/src/index.ts

@@ -1 +1,2 @@
 export * from "./simple-grid";
+export * from "./simple-grid-config";

packages/core/src/core/Grids/src/simple-grid-config.ts

@@ -0,0 +1,127 @@
+import * as THREE from "three";
+import {
+  BooleanSettingsControl,
+  ColorSettingsControl,
+  NumberSettingControl,
+} from "../../Types";
+import { Configurator } from "../../ConfigManager";
+import { SimpleGrid } from "./simple-grid";
+
+type SimpleGridConfigType = {
+  visible: BooleanSettingsControl;
+  color: ColorSettingsControl;
+  primarySize: NumberSettingControl;
+  secondarySize: NumberSettingControl;
+  distance: NumberSettingControl;
+};
+
+/**
+ * Configuration interface for the {@link SimpleGrid}.
+ */
+export interface SimpleGridConfig {
+  /**
+   * The color of the grid lines.
+   */
+  color: THREE.Color;
+
+  /**
+   * The size of the primary grid lines.
+   */
+  primarySize: number;
+
+  /**
+   * The size of the secondary grid lines.
+   */
+  secondarySize: number;
+
+  /**
+   * The distance at which the grid lines start to fade away.
+   */
+  distance: number;
+}
+
+export class SimpleGridConfigManager extends Configurator<
+  SimpleGrid,
+  SimpleGridConfigType
+> {
+  protected _config: SimpleGridConfigType = {
+    visible: {
+      value: true,
+      type: "Boolean" as const,
+    },
+    color: {
+      value: new THREE.Color() as THREE.Color,
+      type: "Color" as const,
+    },
+    primarySize: {
+      type: "Number" as const,
+      interpolable: true,
+      value: 1,
+      min: 0,
+      max: 1000,
+    },
+    secondarySize: {
+      type: "Number" as const,
+      interpolable: true,
+      value: 10,
+      min: 0,
+      max: 1000,
+    },
+    distance: {
+      type: "Number" as const,
+      interpolable: true,
+      value: 500,
+      min: 0,
+      max: 500,
+    },
+  };
+
+  get visible() {
+    return this._config.visible.value;
+  }
+
+  set visible(value: boolean) {
+    this._config.visible.value = value;
+    this._component.visible = value;
+  }
+
+  get color() {
+    return this._config.color.value;
+  }
+
+  set color(value: THREE.Color) {
+    this._config.color.value = value;
+    this._component.material.uniforms.uColor.value = value;
+    this._component.material.uniformsNeedUpdate = true;
+  }
+
+  get primarySize() {
+    return this._config.primarySize.value;
+  }
+
+  set primarySize(value: number) {
+    this._config.primarySize.value = value;
+    this._component.material.uniforms.uSize1.value = value;
+    this._component.material.uniformsNeedUpdate = true;
+  }
+
+  get secondarySize() {
+    return this._config.secondarySize.value;
+  }
+
+  set secondarySize(value: number) {
+    this._config.secondarySize.value = value;
+    this._component.material.uniforms.uSize2.value = value;
+    this._component.material.uniformsNeedUpdate = true;
+  }
+
+  get distance() {
+    return this._config.distance.value;
+  }
+
+  set distance(value: number) {
+    this._config.distance.value = value;
+    this._component.material.uniforms.uDistance.value = value;
+    this._component.material.uniformsNeedUpdate = true;
+  }
+}