minerender 2.1.0-alpha.42 → 2.1.0-alpha.43

package/dist/bundle.js

@@ -81472,6 +81472,10 @@ ${key}` : key;
       this.setMatrixAt(index, new Matrix4());
       return reference;
     }
+    /** Returns the live reference for a raycast hit on this object's instance mesh. */
+    getInstanceReference(mesh, index) {
+      return mesh === this.instanceMesh ? this.instanceReferences.get(index) : void 0;
+    }
     isInstanceActive(index, reference) {
       return this.instanceReferences.get(index) === reference;
     }
@@ -81554,9 +81558,9 @@ ${key}` : key;
     }
     getRotationAt(index, euler = new Euler()) {
       if (!this.isInstanced) throw new MineRenderError("Object is not instanced");
-      const matrix = this.getMatrixAt(index);
-      euler.setFromRotationMatrix(matrix);
-      return euler;
+      const rotation = new Quaternion();
+      this.getMatrixAt(index).decompose(new Vector3(), rotation, new Vector3());
+      return euler.setFromQuaternion(rotation);
     }
     setScaleAt(index, scale) {
       if (!this.isInstanced) throw new MineRenderError("Object is not instanced");
@@ -81836,11 +81840,12 @@ ${key}` : key;
   init_buffer2();
   init_process2();
   var p10 = prefix("SceneInspector");
-  var help = "<span>Ctrl+Click to Select<br/></span><br/>";
+  var help = "<span>Ctrl/Cmd+Click to Select<br/></span><br/>";
   var SceneInspector = class {
     constructor(renderer) {
       this.renderer = renderer;
       this.mouse = new Vector2();
+      this.listeners = new AbortController();
       this.objectInfoContainer = document.createElement("div");
       this.objectControlsContainer = document.createElement("div");
       this.raycaster = new Raycaster();
@@ -81850,13 +81855,44 @@ ${key}` : key;
       this.objectInfoContainer.classList.add("minerender-inspector", "minerender-object-info");
       this.objectControlsContainer.classList.add("minerender-inspector", "minerender-object-controls");
       this.objectInfoContainer.innerHTML = help;
-      document.addEventListener("click", this.onClick.bind(this), {
-        passive: true
-      });
+      const canvas = this.renderer.renderer.domElement;
+      const options = { signal: this.listeners.signal };
+      canvas.addEventListener("pointerdown", (event) => {
+        this.pointer = event.button === 0 && (event.ctrlKey || event.metaKey) ? event : void 0;
+      }, options);
+      canvas.addEventListener("pointermove", (event) => {
+        if (this.pointer?.pointerId === event.pointerId && Math.hypot(event.clientX - this.pointer.clientX, event.clientY - this.pointer.clientY) > 5) {
+          this.pointer = void 0;
+        }
+      }, options);
+      canvas.addEventListener("pointerup", (event) => {
+        const start = this.pointer;
+        this.pointer = void 0;
+        if (start?.pointerId === event.pointerId && Math.hypot(event.clientX - start.clientX, event.clientY - start.clientY) <= 5) {
+          this.onClick(event);
+        }
+      }, options);
+      canvas.addEventListener("pointercancel", () => {
+        this.pointer = void 0;
+      }, options);
+      canvas.addEventListener("pointerleave", () => {
+        this.pointer = void 0;
+      }, options);
+      canvas.addEventListener("contextmenu", (event) => {
+        if (this.pointer?.ctrlKey) event.preventDefault();
+      }, options);
+    }
+    dispose() {
+      this.listeners.abort();
+      this.pointer = void 0;
+      this.selectedObject = void 0;
+      this.objectInfoContainer.remove();
+      this.objectControlsContainer.remove();
     }
     findMeshChildren(from, out = []) {
+      if (!from.visible) return out;
       for (let c4 of from.children) {
-        if (isMesh(c4)) {
+        if (c4.visible && isMesh(c4)) {
           out.push(c4);
         }
         this.findMeshChildren(c4, out);
@@ -81864,50 +81900,43 @@ ${key}` : key;
       return out;
     }
     onClick(event) {
-      if (event.target?.nodeName !== "CANVAS") return;
-      if (!event.ctrlKey) return;
-      setTimeout(() => {
-        this.mouse.x = event.clientX / window.innerWidth * 2 - 1;
-        this.mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
-        this.raycaster.setFromCamera(this.mouse, this.renderer.camera);
-        let start = Date.now();
-        let targets = this.findMeshChildren(this.renderer.scene);
-        const intersects = this.raycaster.intersectObjects(targets, false);
-        console.debug("Raycast took " + (Date.now() - start) + "ms for " + targets.length + " possible targets with " + intersects.length + " results");
-        if (intersects.length > 0) {
-          this.handleRaycasterObjects(intersects);
-        }
-      });
+      const canvas = this.renderer.renderer.domElement;
+      if (event.target !== canvas || event.button !== 0 || !(event.ctrlKey || event.metaKey)) return;
+      const rect = canvas.getBoundingClientRect();
+      const x4 = event.clientX - rect.left, y5 = event.clientY - rect.top;
+      if (rect.width <= 0 || rect.height <= 0 || x4 < 0 || y5 < 0 || x4 >= rect.width || y5 >= rect.height) return;
+      this.mouse.set(x4 / rect.width * 2 - 1, 1 - y5 / rect.height * 2);
+      this.renderer.camera.updateWorldMatrix(true, false);
+      this.renderer.scene.updateMatrixWorld(true);
+      this.raycaster.setFromCamera(this.mouse, this.renderer.camera);
+      this.handleRaycasterObjects(this.raycaster.intersectObjects(this.findMeshChildren(this.renderer.scene), false));
     }
     appendTo(el) {
       el.append(this.objectInfoContainer);
       el.append(this.objectControlsContainer);
     }
     handleRaycasterObjects(intersections) {
-      console.debug(intersections);
-      const firstIntersection = intersections[0];
-      if (firstIntersection && firstIntersection.object) {
-        const firstObject = firstIntersection.object;
-        let targetIntersection = void 0;
-        let targetObject = void 0;
-        const firstSceneObjectIntersection = intersections.find((i4) => i4.object && i4.object.parent && isSceneObject(i4.object.parent));
-        if (firstSceneObjectIntersection && firstSceneObjectIntersection.object) {
-          targetIntersection = firstSceneObjectIntersection;
-          targetObject = firstSceneObjectIntersection.object;
-        } else {
-          targetIntersection = firstIntersection;
-          targetObject = firstObject;
+      const hit = intersections[0];
+      if (!hit) return;
+      const instance = this.getIntersectionInstance(hit);
+      this.selectObject(instance?.instanceable ?? hit.object, hit, instance);
+    }
+    getIntersectionInstance(hit) {
+      if (hit?.instanceId === void 0) return void 0;
+      for (let parent = hit.object.parent; parent; parent = parent.parent) {
+        if (isSceneObject(parent)) {
+          const instance = parent.getInstanceReference(hit.object, hit.instanceId);
+          if (instance) return instance;
         }
-        if (!targetIntersection || !targetObject) return;
-        this.selectObject(targetObject, targetIntersection);
       }
+      return void 0;
     }
-    selectObject(targetObject, targetIntersection) {
+    selectObject(targetObject, targetIntersection, instance = this.getIntersectionInstance(targetIntersection)) {
       this.selectedObject = targetObject;
       console.log(p10, "selected", targetObject);
-      this.redraw(targetObject, targetIntersection);
+      this.redraw(targetObject, targetIntersection, instance);
     }
-    redraw(targetObject, targetIntersection) {
+    redraw(targetObject, targetIntersection, instance) {
       this.objectInfoContainer.innerHTML = help;
       if (targetIntersection) {
         this.addInfoLine("Distance", "D", targetIntersection.distance);
@@ -81920,8 +81949,8 @@ ${key}` : key;
         if (isSceneObject(targetObject.parent)) {
         }
       }
-      if ("atlas" in targetObject) {
-        const atlas = targetObject["atlas"];
+      const atlas = "atlas" in targetObject ? targetObject["atlas"] : void 0;
+      if (atlas?.image.canvas) {
         const img = atlas.image.canvas;
         img.style.width = "100px";
         img.style.height = "100px";
@@ -81930,28 +81959,31 @@ ${key}` : key;
         this.objectInfoContainer.prepend(img);
       }
       this.objectControlsContainer.innerHTML = "";
-      this.addControls(targetObject, targetIntersection);
+      this.addControls(targetObject, targetIntersection, instance);
     }
-    addControls(object, intersection) {
+    addControls(object, intersection, instance) {
       const container = document.createElement("div");
       container.append(this.separator("Select Parent/Child"));
       if (object.parent) {
         container.append(this.buttonControl("Select Parent " + object.parent.constructor.name + " " + object.parent.name, "P", () => {
-          this.selectObject(object.parent, intersection);
+          this.selectObject(object.parent, intersection, instance);
         }));
       }
       if (object.children.length > 0) {
         let i4 = 1;
         for (let child of object.children) {
           container.append(this.buttonControl("Select Child " + child.constructor.name + " " + child.name, "C" + i4++, () => {
-            this.selectObject(child, intersection);
+            this.selectObject(child, intersection, instance);
           }));
         }
       }
       container.append(this.separator());
-      container.append(this.toggleControl("Visibility", "V", object.visible, (v5) => object.visible = v5));
+      const selectedInstance = instance && (object === instance.instanceable || object === intersection?.object) ? instance : void 0;
+      if (!selectedInstance) {
+        container.append(this.toggleControl("Visibility", "V", object.visible, (v5) => object.visible = v5));
+      }
       container.append(this.separator("Mesh"));
-      this.addObjectControls(object, intersection, container);
+      this.addObjectControls(object, intersection, container, selectedInstance);
       container.append(this.separator());
       this.objectControlsContainer.append(container);
     }
@@ -81963,78 +81995,26 @@ ${key}` : key;
       this.objectInfoContainer.append(document.createElement("br"));
       return el;
     }
-    addObjectControls(target, intersection, container) {
+    addObjectControls(target, intersection, container, instance) {
       const posRange = 16 * 16;
       const rotRange = 360;
       const scaleRange = 4;
-      if (typeof intersection !== "undefined" && typeof intersection.instanceId !== "undefined" && isSceneObject(target) && target.isInstanced) {
-        const scObj = target;
-        container.append(this.separator("Position"));
-        let pos = scObj.getPositionAt(intersection.instanceId);
-        container.append(this.rangeControl("X Position", "X", -posRange + pos.x, posRange + pos.x, pos.x, 1, (v5) => {
-          pos = scObj.getPositionAt(intersection.instanceId);
-          pos.x = v5;
-          scObj.setPositionAt(intersection.instanceId, pos);
-        }));
-        container.append(this.rangeControl("Y Position", "Y", -posRange + pos.y, posRange + pos.y, pos.y, 1, (v5) => {
-          pos = scObj.getPositionAt(intersection.instanceId);
-          pos.y = v5;
-          scObj.setPositionAt(intersection.instanceId, pos);
-        }));
-        container.append(this.rangeControl("Z Position", "Z", -posRange + pos.z, posRange + pos.z, pos.z, 1, (v5) => {
-          pos = scObj.getPositionAt(intersection.instanceId);
-          pos.z = v5;
-          scObj.setPositionAt(intersection.instanceId, pos);
-        }));
-        container.append(this.separator("Rotation"));
-        let rot = scObj.getRotationAt(intersection.instanceId);
-        container.append(this.rangeControl("X Rotation", "X", 0, rotRange, Math.round(toDegrees(rot.x)), 1, (v5) => {
-          rot = scObj.getRotationAt(intersection.instanceId);
-          rot.x = toRadians(v5);
-          scObj.setRotationAt(intersection.instanceId, rot);
-        }));
-        container.append(this.rangeControl("Y Rotation", "Y", 0, rotRange, Math.round(toDegrees(rot.y)), 1, (v5) => {
-          rot = scObj.getRotationAt(intersection.instanceId);
-          rot.y = toRadians(v5);
-          scObj.setRotationAt(intersection.instanceId, rot);
-        }));
-        container.append(this.rangeControl("Z Rotation", "Z", 0, rotRange, Math.round(toDegrees(rot.z)), 1, (v5) => {
-          rot = scObj.getRotationAt(intersection.instanceId);
-          rot.z = toRadians(v5);
-          scObj.setRotationAt(intersection.instanceId, rot);
-        }));
-        container.append(this.separator("Scale"));
-        let scl = scObj.getScale();
-        container.append(this.rangeControl("X Scale", "X", 0, scaleRange, scl.x, 0.1, (v5) => {
-          scl = scObj.getScaleAt(intersection.instanceId);
-          scl.x = v5;
-          scObj.setScaleAt(intersection.instanceId, scl);
-        }));
-        container.append(this.rangeControl("Y Scale", "Y", 0, scaleRange, scl.y, 0.1, (v5) => {
-          scl = scObj.getScaleAt(intersection.instanceId);
-          scl.y = v5;
-          scObj.setScaleAt(intersection.instanceId, scl);
-        }));
-        container.append(this.rangeControl("Z Scale", "Z", 0, scaleRange, scl.z, 0.1, (v5) => {
-          scl = scObj.getScaleAt(intersection.instanceId);
-          scl.z = v5;
-          scObj.setScaleAt(intersection.instanceId, scl);
-        }));
-      } else if (isTransformable(target)) {
-        const parent = target;
+      const transform = instance ?? (isTransformable(target) ? target : void 0);
+      if (transform) {
+        const parent = transform;
         container.append(this.separator("Position"));
         let pos = parent.getPosition();
-        container.append(this.rangeControl("X Position", "X", -posRange, posRange, pos.x, 1, (v5) => {
+        container.append(this.rangeControl("X Position", "X", pos.x - posRange, pos.x + posRange, pos.x, 1, (v5) => {
           pos = parent.getPosition();
           pos.x = v5;
           parent.setPosition(pos);
         }));
-        container.append(this.rangeControl("Y Position", "Y", -posRange, posRange, pos.y, 1, (v5) => {
+        container.append(this.rangeControl("Y Position", "Y", pos.y - posRange, pos.y + posRange, pos.y, 1, (v5) => {
           pos = parent.getPosition();
           pos.y = v5;
           parent.setPosition(pos);
         }));
-        container.append(this.rangeControl("Z Position", "Z", -posRange, posRange, pos.z, 1, (v5) => {
+        container.append(this.rangeControl("Z Position", "Z", pos.z - posRange, pos.z + posRange, pos.z, 1, (v5) => {
           pos = parent.getPosition();
           pos.z = v5;
           parent.setPosition(pos);
@@ -82123,6 +82103,7 @@ ${key}` : key;
       toggle.checked = val;
       toggle.addEventListener("change", (e6) => {
         change(toggle.checked);
+        this.renderer.scene.dirty = true;
       });
       label.append(toggle);
       label.append(document.createElement("br"));
@@ -82135,7 +82116,6 @@ ${key}` : key;
       label.setAttribute("title", name2);
       labelText.style.width = "18%";
       labelText.style.display = "inline-block";
-      labelText.innerText = `${id} (${val})`;
       const range = document.createElement("input");
       range.setAttribute("type", "range");
       range.style.width = "80%";
@@ -82143,8 +82123,10 @@ ${key}` : key;
       range.min = `${min}`;
       range.step = `${step}`;
       range.value = `${val}`;
+      labelText.innerText = `${id} (${range.value})`;
       const onChange = () => {
         change(parseFloat(range.value));
+        this.renderer.scene.dirty = true;
         labelText.innerText = `${id} (${range.value})`;
       };
       range.addEventListener("input", onChange);