@preference-sl/pref-viewer 2.2.0 → 2.3.1

package/src/index.js

@@ -1,328 +1,348 @@
-/**
- * =============================================================================
- * PrefViewer Web Component (JavaScript)
- * =============================================================================
- *
- * Overview
- * --------
- * `PrefViewer` is a self-contained Web Component built with Babylon.js that:
- *   • Inserts a <canvas> into its shadow DOM to render a glTF model.
- *   • Creates and manages a Babylon Engine, Scene, ArcRotateCamera, and basic lighting.
- *   • Listens for a `model` attribute to load different glTF files (defaults to "./models/window.gltf").
- *   • Automatically disposes previous meshes when switching models.
- *   • Dispatches “model-loaded” and “model-error” CustomEvents so host pages can react.
- *
- * Usage
- * -----
- * 1. **Import the script (module)**
- *      <script type="module" src="path/to/pref-viewer.js"></script>
- *
- * 2. **Place the custom element in your HTML**
- *      <pref-viewer
- *        model="https://example.com/models/myModel.gltf"
- *        style="width:800px; height:600px;">
- *      </pref-viewer>
- *
- * 3. **Listen for loading events (optional)**
- *      const viewer = document.querySelector("pref-viewer");
- *      viewer.addEventListener("model-loaded", (evt) => {
- *        console.log("Loaded meshes:", evt.detail.meshes);
- *      });
- *      viewer.addEventListener("model-error", (evt) => {
- *        console.error("Failed to load model:", evt.detail.error);
- *      });
- *
- * 4. **Change models at runtime**
- *      viewer.setAttribute("model", "https://example.com/models/anotherModel.glb");
- *
- * ----------------------------------------------------------------------------- 
- * Implementation code below with updated preprocessUrl 
- * ----------------------------------------------------------------------------- 
- */
-
-import {
-  Engine,
-  Scene,
-  ArcRotateCamera,
-  Vector3,
-  SceneLoader,
-  Color4,
-  HemisphericLight,
-  DirectionalLight
-} from "@babylonjs/core";
-import "@babylonjs/loaders";
-
-class PrefViewer extends HTMLElement {
-  constructor() {
-    super();
-    console.log("PrefViewer: constructor");
-    this.attachShadow({ mode: "open" });
-    this._createCanvas();
-    this._wrapCanvas();
-
-    // These will be set in _initializeBabylon()
-    this.engine = null;
-    this.scene = null;
-    this.camera = null;
-    this.hemiLight = null;
-    this.dirLight = null;
-    this._onWindowResize = null;
-
-    // modelUrl might be provided via attribute before connectedCallback
-    this.modelUrl = null;
-    this._hasInitialized = false;
-  }
-
-  static get observedAttributes() {
-    return ["model"];
-  }
-
-  attributeChangedCallback(name, _oldValue, newValue) {
-    console.log(`PrefViewer: attributeChangedCallback - ${name} -> ${newValue}`);
-    if (name === "model" && newValue) {
-      this.modelUrl = newValue;
-      console.log(`PrefViewer: modelUrl set to ${this.modelUrl}`);
-      // Only reload if initialization has already happened
-      if (this._hasInitialized) {
-        this._reloadModel();
-      }
-    }
-  }
-
-  connectedCallback() {
-    console.log("PrefViewer: connectedCallback");
-    // 1) Determine modelUrl now that element is connected
-    if (!this.hasAttribute("model")) {
-      this.modelUrl = new URL("./models/window.gltf", import.meta.url).href;
-      console.log(`PrefViewer: no model attribute, defaulting to ${this.modelUrl}`);
-    } else {
-      this.modelUrl = this.getAttribute("model");
-      console.log(`PrefViewer: model attribute present, using ${this.modelUrl}`);
-    }
-
-    // 2) Initialize Babylon (engine + scene + camera + lights + hooks)
-    this._initializeBabylon();
-
-    // 3) Mark that initialization is done
-    this._hasInitialized = true;
-
-    // 4) Load whatever modelUrl we have
-    this._reloadModel();
-  }
-
-  disconnectedCallback() {
-    console.log("PrefViewer: disconnectedCallback - disposing engine");
-    this._disposeEngine();
-    window.removeEventListener("resize", this._onWindowResize);
-  }
-
-  // ====== Private setup methods ======
-  _createCanvas() {
-    console.log("PrefViewer: _createCanvas");
-    this.canvas = document.createElement("canvas");
-    Object.assign(this.canvas.style, {
-      width: "100%",
-      height: "100%",
-      display: "block"
-    });
-  }
-
-  _wrapCanvas() {
-    console.log("PrefViewer: _wrapCanvas");
-    const wrapper = document.createElement("div");
-    Object.assign(wrapper.style, {
-      width: "100%",
-      height: "100%",
-      position: "relative"
-    });
-    wrapper.appendChild(this.canvas);
-    this.shadowRoot.append(wrapper);
-  }
-
-  _initializeBabylon() {
-    console.log("PrefViewer: _initializeBabylon - creating engine and scene");
-
-    // 1) Create the Babylon engine & scene
-    this.engine = new Engine(this.canvas, true, { alpha: true });
-    this.scene = new Scene(this.engine);
-    this.scene.clearColor = new Color4(1, 1, 1, 1);
-
-    // 2) Hook into Babylon’s GLTF loader so that any URIs starting with "blob:…"
-    //    get stripped off before we check for an absolute "https://".
-    console.log("PrefViewer: Adding preprocessUrl hook");
-    SceneLoader.OnPluginActivatedObservable.add((plugin) => {
-      console.log(`PrefViewer: Plugin activated - ${plugin.name}`);
-      if (plugin.name === "gltf" || plugin.name === "gltf2") {
-        plugin.preprocessUrl = (url) => {
-          // a) If the loader already prepended "blob:…", strip it out.
-          //    Regex explanation: ^blob:(?:file|https?|ftp):\/\/[^\/]+\/(.*)
-          //    basically removes the entire "blob:http://localhost:3000/" prefix.
-          const stripped = url.replace(
-            /^blob:(?:http|https|file):\/\/[^\/]+\/(.+)/i,
-            "$1"
-          );
-          // b) Normalize backslashes "\" → forward slashes "/"
-          const fixedSlashes = stripped.replace(/\\/g, "/");
-          console.log(
-            `PrefViewer: preprocessUrl received "${url}", stripped to "${stripped}", normalized to "${fixedSlashes}"`
-          );
-          // c) If it now starts with "http://" or "https://", return it as an absolute URL:
-          if (/^https?:\/\//i.test(fixedSlashes)) {
-            console.log(`PrefViewer: preprocessUrl returning absolute URL "${fixedSlashes}"`);
-            return fixedSlashes;
-          }
-          // d) Otherwise, return the relative path (Babylon will resolve it relative to the blob if needed)
-          console.log(`PrefViewer: preprocessUrl returning relative URL "${fixedSlashes}"`);
-          return fixedSlashes;
-        };
-      }
-    });
-
-    // 3) Create camera and lights
-    console.log("PrefViewer: _createCamera and _createLights");
-    this._createCamera();
-    this._createLights();
-
-    // 4) Hook up input/event handlers (e.g. wheel-to-zoom)
-    console.log("PrefViewer: _setupEventListeners");
-    this._setupEventListeners();
-
-    // 5) Start Babylon’s render loop
-    console.log("PrefViewer: Starting render loop");
-    this.engine.runRenderLoop(() => {
-      if (this.scene) {
-        this.scene.render();
-      }
-    });
-    this._onWindowResize = () => {
-      console.log("PrefViewer: Window resized - calling engine.resize()");
-      this.engine.resize();
-    };
-    window.addEventListener("resize", this._onWindowResize);
-  }
-
-  _createCamera() {
-    console.log("PrefViewer: _createCamera");
-    // ArcRotateCamera that orbits around origin
-    this.camera = new ArcRotateCamera(
-      "camera",
-      Math.PI / 2,
-      Math.PI / 3,
-      10,
-      Vector3.Zero(),
-      this.scene
-    );
-    this.camera.attachControl(this.canvas, true);
-  }
-
-  _createLights() {
-    console.log("PrefViewer: _createLights");
-    this.hemiLight = new HemisphericLight(
-      "hemiLight",
-      new Vector3(0, 1, 0),
-      this.scene
-    );
-    this.hemiLight.intensity = 0.6;
-
-    this.dirLight = new DirectionalLight(
-      "dirLight",
-      new Vector3(-0.5, -1, -0.5),
-      this.scene
-    );
-    this.dirLight.position = new Vector3(0, 5, 0);
-    this.dirLight.intensity = 0.8;
-  }
-
-  _setupEventListeners() {
-    console.log("PrefViewer: _setupEventListeners");
-    // Zoom toward point-of-interest on wheel scroll
-    this.canvas.addEventListener("wheel", (evt) => {
-      if (!this.scene || !this.camera) return;
-      const pickResult = this.scene.pick(
-        this.scene.pointerX,
-        this.scene.pointerY
-      );
-      const pivotPoint = pickResult.hit
-        ? pickResult.pickedPoint.clone()
-        : this.camera.target.clone();
-      this.camera.target = pivotPoint;
-      this.camera.inertialRadiusOffset +=
-        evt.deltaY * this.camera.wheelPrecision * 0.01;
-      evt.preventDefault();
-    });
-  }
-
-  // ====== Model loading / management ======
-  async _reloadModel() {
-    console.log(`PrefViewer: _reloadModel - loading ${this.modelUrl}`);
-    if (!this.scene || !this.modelUrl) {
-      console.warn("PrefViewer: _reloadModel aborted (scene or modelUrl missing)");
-      return;
-    }
-
-    // Dispose previous meshes so we don’t accumulate them
-    this._disposePreviousMeshes();
-
-    try {
-      console.log(`PrefViewer: ImportMeshAsync("${this.modelUrl}")`);
-      const result = await SceneLoader.ImportMeshAsync(
-        null,
-        "",
-        this.modelUrl,
-        this.scene,
-        undefined,
-        ".gltf"
-      );
-      console.log("PrefViewer: Model loaded, creating default camera/light if needed");
-      this.scene.createDefaultCameraOrLight(true, true, true);
-
-      console.log("PrefViewer: Dispatching model-loaded event");
-      this.dispatchEvent(
-        new CustomEvent("model-loaded", {
-          detail: {
-            meshes: result.meshes,
-            particleSystems: result.particleSystems
-          },
-          bubbles: true,
-          composed: true
-        })
-      );
-    } catch (err) {
-      console.error("PrefViewer: Error loading model:", err);
-      console.log("PrefViewer: Dispatching model-error event");
-      this.dispatchEvent(
-        new CustomEvent("model-error", {
-          detail: { error: err },
-          bubbles: true,
-          composed: true
-        })
-      );
-    }
-  }
-
-  _disposePreviousMeshes() {
-    console.log("PrefViewer: _disposePreviousMeshes");
-    if (!this.scene) return;
-    this.scene.meshes.slice().forEach((mesh) => {
-      if (mesh.getClassName() === "Mesh") {
-        console.log(`PrefViewer: Disposing mesh ${mesh.name}`);
-        mesh.dispose();
-      }
-    });
-  }
-
-  // ====== Cleanup ======
-  _disposeEngine() {
-    console.log("PrefViewer: _disposeEngine");
-    if (this.engine) {
-      this.engine.dispose();
-      this.engine = null;
-      this.scene = null;
-      this.camera = null;
-      this.hemiLight = null;
-      this.dirLight = null;
-    }
-  }
-}
-
+/**
+ * =============================================================================
+ * PrefViewer Web Component (JavaScript)
+ * =============================================================================
+ *
+ * Overview
+ * --------
+ * `PrefViewer` is a self-contained Web Component built with Babylon.js that:
+ *   • Inserts a <canvas> into its shadow DOM to render a glTF model.
+ *   • Creates and manages a Babylon Engine, Scene, ArcRotateCamera, and basic lighting.
+ *   • Listens for a `model` attribute to load different glTF files (defaults to "./models/window.gltf").
+ *   • Automatically disposes previous meshes when switching models.
+ *   • Dispatches “model-loaded” and “model-error” CustomEvents so host pages can react.
+ *
+ * Usage
+ * -----
+ * 1. **Import the script (module)**
+ *      <script type="module" src="path/to/pref-viewer.js"></script>
+ *
+ * 2. **Place the custom element in your HTML**
+ *      <pref-viewer
+ *        model="https://example.com/models/myModel.gltf"
+ *        style="width:800px; height:600px;">
+ *      </pref-viewer>
+ *
+ * 3. **Listen for loading events (optional)**
+ *      const viewer = document.querySelector("pref-viewer");
+ *      viewer.addEventListener("model-loaded", (evt) => {
+ *        console.log("Loaded meshes:", evt.detail.meshes);
+ *      });
+ *      viewer.addEventListener("model-error", (evt) => {
+ *        console.error("Failed to load model:", evt.detail.error);
+ *      });
+ *
+ * 4. **Change models at runtime**
+ *      viewer.setAttribute("model", "https://example.com/models/anotherModel.glb");
+ *
+ * ----------------------------------------------------------------------------- 
+ * Implementation code below with updated preprocessUrl 
+ * ----------------------------------------------------------------------------- 
+ */
+
+import {
+  Engine,
+  Scene,
+  ArcRotateCamera,
+  Vector3,
+  SceneLoader,
+  Color4,
+  HemisphericLight,
+  DirectionalLight
+} from "@babylonjs/core";
+import "@babylonjs/loaders";
+
+class PrefViewer extends HTMLElement {
+  constructor() {
+    super();
+    console.log("PrefViewer: constructor");
+    this.attachShadow({ mode: "open" });
+    this._createCanvas();
+    this._wrapCanvas();
+
+    // These will be set in _initializeBabylon()
+    this.engine = null;
+    this.scene = null;
+    this.camera = null;
+    this.hemiLight = null;
+    this.dirLight = null;
+    this._onWindowResize = null;
+
+    // modelUrl might be provided via attribute before connectedCallback
+    this.modelUrl = null;
+    this._hasInitialized = false;
+    this._pluginHookSetup = false; // Track if we've already set up the plugin hook
+  }
+
+  static get observedAttributes() {
+    return ["model"];
+  }
+
+  attributeChangedCallback(name, _oldValue, newValue) {
+    console.log(`PrefViewer: attributeChangedCallback - ${name} -> ${newValue}`);
+    if (name === "model" && newValue) {
+      this.modelUrl = newValue;
+      console.log(`PrefViewer: modelUrl set to ${this.modelUrl}`);
+      // Only reload if initialization has already happened
+      if (this._hasInitialized) {
+        this._reloadModel();
+      }
+    }
+  }
+
+  connectedCallback() {
+    console.log("PrefViewer: connectedCallback");
+    
+    // Set up the plugin hook ONCE globally before any other initialization
+    if (!this._pluginHookSetup) {
+      this._setupUrlPreprocessing();
+      this._pluginHookSetup = true;
+    }
+
+    // 1) Determine modelUrl now that element is connected
+    if (!this.hasAttribute("model")) {
+      this.modelUrl = new URL("./models/window.gltf", import.meta.url).href;
+      console.log(`PrefViewer: no model attribute, defaulting to ${this.modelUrl}`);
+    } else {
+      this.modelUrl = this.getAttribute("model");
+      console.log(`PrefViewer: model attribute present, using ${this.modelUrl}`);
+    }
+
+    // 2) Initialize Babylon (engine + scene + camera + lights + hooks)
+    this._initializeBabylon();
+
+    // 3) Mark that initialization is done
+    this._hasInitialized = true;
+
+    // 4) Load whatever modelUrl we have
+    this._reloadModel();
+  }
+
+  disconnectedCallback() {
+    console.log("PrefViewer: disconnectedCallback - disposing engine");
+    this._disposeEngine();
+    if (this._onWindowResize) {
+      window.removeEventListener("resize", this._onWindowResize);
+    }
+  }
+
+  // ====== URL Preprocessing Setup ======
+  _setupUrlPreprocessing() {
+    console.log("PrefViewer: Setting up URL preprocessing hook");
+    
+    const transformUrl = (url) => {
+      // a) If the loader already prepended "blob:…", strip it out.
+      const stripped = url.replace(
+        /^blob:(?:http|https|file):\/\/[^\/]+\/(.+)/i,
+        "$1"
+      );
+      // b) Normalize backslashes "\" → forward slashes "/"
+      const fixedSlashes = stripped.replace(/\\/g, "/");
+      console.log(
+        `PrefViewer: preprocessUrl received "${url}", stripped to "${stripped}", normalized to "${fixedSlashes}"`
+      );
+      // c) If it now starts with "http://" or "https://", return it as an absolute URL:
+      if (/^https?:\/\//i.test(fixedSlashes)) {
+        console.log(`PrefViewer: preprocessUrl returning absolute URL "${fixedSlashes}"`);
+        return fixedSlashes;
+      }
+      // d) Otherwise, return the relative path
+      console.log(`PrefViewer: preprocessUrl returning relative URL "${fixedSlashes}"`);
+      return fixedSlashes;
+    };
+
+    SceneLoader.OnPluginActivatedObservable.add((plugin) => {
+      console.log(`PrefViewer: Plugin activated - ${plugin.name}`);
+      if (plugin.name === "gltf" || plugin.name === "gltf2") {
+        // Support both sync and async preprocessing
+        plugin.preprocessUrl = transformUrl;
+        if (typeof plugin.preprocessUrlAsync === 'function' || plugin.preprocessUrlAsync === undefined) {
+          plugin.preprocessUrlAsync = (url) => Promise.resolve(transformUrl(url));
+        }
+        console.log("PrefViewer: URL preprocessing hooks set up for GLTF plugin");
+      }
+    });
+  }
+
+  // ====== Private setup methods ======
+  _createCanvas() {
+    console.log("PrefViewer: _createCanvas");
+    this.canvas = document.createElement("canvas");
+    Object.assign(this.canvas.style, {
+      width: "100%",
+      height: "100%",
+      display: "block"
+    });
+  }
+
+  _wrapCanvas() {
+    console.log("PrefViewer: _wrapCanvas");
+    const wrapper = document.createElement("div");
+    Object.assign(wrapper.style, {
+      width: "100%",
+      height: "100%",
+      position: "relative"
+    });
+    wrapper.appendChild(this.canvas);
+    this.shadowRoot.append(wrapper);
+  }
+
+  _initializeBabylon() {
+    console.log("PrefViewer: _initializeBabylon - creating engine and scene");
+
+    // 1) Create the Babylon engine & scene
+    this.engine = new Engine(this.canvas, true, { alpha: true });
+    this.scene = new Scene(this.engine);
+    this.scene.clearColor = new Color4(1, 1, 1, 1);
+
+    // 2) Create camera and lights
+    console.log("PrefViewer: _createCamera and _createLights");
+    this._createCamera();
+    this._createLights();
+
+    // 3) Hook up input/event handlers (e.g. wheel-to-zoom)
+    console.log("PrefViewer: _setupEventListeners");
+    this._setupEventListeners();
+
+    // 4) Start Babylon's render loop
+    console.log("PrefViewer: Starting render loop");
+    this.engine.runRenderLoop(() => {
+      if (this.scene) {
+        this.scene.render();
+      }
+    });
+    
+    this._onWindowResize = () => {
+      console.log("PrefViewer: Window resized - calling engine.resize()");
+      if (this.engine) {
+        this.engine.resize();
+      }
+    };
+    window.addEventListener("resize", this._onWindowResize);
+  }
+
+  _createCamera() {
+    console.log("PrefViewer: _createCamera");
+    // ArcRotateCamera that orbits around origin
+    this.camera = new ArcRotateCamera(
+      "camera",
+      Math.PI / 2,
+      Math.PI / 3,
+      10,
+      Vector3.Zero(),
+      this.scene
+    );
+    this.camera.attachControl(this.canvas, true);
+  }
+
+  _createLights() {
+    console.log("PrefViewer: _createLights");
+    this.hemiLight = new HemisphericLight(
+      "hemiLight",
+      new Vector3(0, 1, 0),
+      this.scene
+    );
+    this.hemiLight.intensity = 0.6;
+
+    this.dirLight = new DirectionalLight(
+      "dirLight",
+      new Vector3(-0.5, -1, -0.5),
+      this.scene
+    );
+    this.dirLight.position = new Vector3(0, 5, 0);
+    this.dirLight.intensity = 0.8;
+  }
+
+  _setupEventListeners() {
+    console.log("PrefViewer: _setupEventListeners");
+    // Zoom toward point-of-interest on wheel scroll
+    this.canvas.addEventListener("wheel", (evt) => {
+      if (!this.scene || !this.camera) return;
+      const pickResult = this.scene.pick(
+        this.scene.pointerX,
+        this.scene.pointerY
+      );
+      const pivotPoint = pickResult.hit
+        ? pickResult.pickedPoint.clone()
+        : this.camera.target.clone();
+      this.camera.target = pivotPoint;
+      this.camera.inertialRadiusOffset +=
+        evt.deltaY * this.camera.wheelPrecision * 0.01;
+      evt.preventDefault();
+    });
+  }
+
+  // ====== Model loading / management ======
+  async _reloadModel() {
+    console.log(`PrefViewer: _reloadModel - loading ${this.modelUrl}`);
+    if (!this.scene || !this.modelUrl) {
+      console.warn("PrefViewer: _reloadModel aborted (scene or modelUrl missing)");
+      return;
+    }
+
+    // Dispose previous meshes so we don't accumulate them
+    this._disposePreviousMeshes();
+
+    try {
+      console.log(`PrefViewer: ImportMeshAsync("${this.modelUrl}")`);
+      const result = await SceneLoader.ImportMeshAsync(
+        null,
+        "",
+        this.modelUrl,
+        this.scene,
+        undefined,
+        ".gltf"
+      );
+      console.log("PrefViewer: Model loaded, creating default camera/light if needed");
+      this.scene.createDefaultCameraOrLight(true, true, true);
+
+      console.log("PrefViewer: Dispatching model-loaded event");
+      this.dispatchEvent(
+        new CustomEvent("model-loaded", {
+          detail: {
+            meshes: result.meshes,
+            particleSystems: result.particleSystems
+          },
+          bubbles: true,
+          composed: true
+        })
+      );
+    } catch (err) {
+      console.error("PrefViewer: Error loading model:", err);
+      console.log("PrefViewer: Dispatching model-error event");
+      this.dispatchEvent(
+        new CustomEvent("model-error", {
+          detail: { error: err },
+          bubbles: true,
+          composed: true
+        })
+      );
+    }
+  }
+
+  _disposePreviousMeshes() {
+    console.log("PrefViewer: _disposePreviousMeshes");
+    if (!this.scene) return;
+    this.scene.meshes.slice().forEach((mesh) => {
+      if (mesh.getClassName() === "Mesh") {
+        console.log(`PrefViewer: Disposing mesh ${mesh.name}`);
+        mesh.dispose();
+      }
+    });
+  }
+
+  // ====== Cleanup ======
+  _disposeEngine() {
+    console.log("PrefViewer: _disposeEngine");
+    if (this.engine) {
+      this.engine.dispose();
+      this.engine = null;
+      this.scene = null;
+      this.camera = null;
+      this.hemiLight = null;
+      this.dirLight = null;
+    }
+  }
+}
+
 customElements.define("pref-viewer", PrefViewer);