mage-engine 3.23.39 → 3.23.40

package/dist/mage.js

@@ -55522,6 +55522,7 @@ const BEFORE_UNLOAD = "beforeunload";
 const HASH_CHANGE = "hashchange";
 const TAGS = {
   HELPER: "TAGS.HELPER",
+  CAMERA_HELPER: "TAGS.CAMERA_HELPER",
   LIGHTS: {
     HOLDER: "TAGS.LIGHTS.HOLDER",
     HELPER: "TAGS.LIGHTS.HELPER",
@@ -55563,13 +55564,18 @@ const resolveSinglePath = path => {
   // If already a full URL or already contains the API path, return as-is
   if (isAlreadyResolved$2(path)) {
     return path;
+  } // Root-relative paths (starting with /) are served from the public folder
+  // and should not be modified with base URL
+
+
+  if (path && path.startsWith("/")) {
+    return path;
   }
 
   const baseUrl = env.MAGE_ASSETS_BASE_URL;
 
   if (baseUrl) {
-    const cleanPath = path.startsWith("/") ? path.slice(1) : path;
-    return `${baseUrl}/${cleanPath}`;
+    return `${baseUrl}/${path}`;
   } // Warn if path contains colon (could be mistaken for protocol) and no base URL is set
 
 
@@ -58139,7 +58145,7 @@ function applyMiddleware() {
 
 var thunk = createThunkMiddleware();
 thunk.withExtraArgument = createThunkMiddleware;var name = "mage-engine";
-var version$1 = "3.23.39";
+var version$1 = "3.23.40";
 var description = "A WebGL Javascript Game Engine, built on top of THREE.js and many other libraries.";
 var main = "dist/mage.js";
 var author$1 = {
@@ -62993,7 +62999,203 @@ let Element$1 = /*#__PURE__*/function (_Entity) {
   }]);
 
   return Element;
-}(Entity);let Camera = /*#__PURE__*/function (_Entity) {
+}(Entity);const validateAnisotropy = anisotropy => {
+  const max = Scene$1.getRenderer().capabilities.getMaxAnisotropy();
+  return cap(anisotropy, max);
+};
+
+let Sprite = /*#__PURE__*/function (_Element) {
+  _inherits(Sprite, _Element);
+
+  var _super = _createSuper(Sprite);
+
+  function Sprite() {
+    var _this;
+
+    let width = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 20;
+    let height = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 20;
+    let spriteTexture = arguments.length > 2 ? arguments[2] : undefined;
+    let options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+
+    _classCallCheck(this, Sprite);
+
+    _this = _super.call(this, {
+      width,
+      height,
+      spriteTexture,
+      ...options
+    });
+    const {
+      anisotropy = 1,
+      sizeAttenuation = true,
+      depthTest = true,
+      depthWrite = true,
+      ...rest
+    } = options;
+    const texture = Images$1.get(spriteTexture);
+
+    _this.recordTexture(spriteTexture, TEXTURES.MAP);
+
+    _this.width = width;
+    _this.height = height;
+    _this.spriteTexture = spriteTexture;
+    const material = new SpriteMaterial({
+      map: texture,
+      ...rest
+    });
+    const body = new Sprite$1(material);
+
+    _this.setBody({
+      body
+    });
+
+    _this.setAnisotropy(anisotropy);
+
+    _this.setWidth(width);
+
+    _this.setHeight(height);
+
+    _this.setSizeAttenuation(sizeAttenuation);
+
+    _this.setDepthTest(depthTest);
+
+    _this.setDepthWrite(depthWrite);
+
+    _this.setEntityType(ENTITY_TYPES.SPRITE.TYPE);
+
+    _this.setEntitySubtype(ENTITY_TYPES.SPRITE.SUBTYPES.DEFAULT);
+
+    return _this;
+  }
+
+  _createClass(Sprite, [{
+    key: "getRotation",
+    value: function getRotation() {
+      return this.getBody().material.rotation;
+    }
+  }, {
+    key: "setRotation",
+    value: function setRotation() {
+      let rotation = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.getRotation();
+      const numericRotation = Number(rotation) || 0;
+      this.setData("rotation", numericRotation);
+      this.getBody().material.rotation = numericRotation;
+    }
+  }, {
+    key: "setWidth",
+    value: function setWidth() {
+      let width = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.width;
+      const numericWidth = Number(width) || 1;
+      this.setData("width", numericWidth);
+      this.getBody().scale.x = numericWidth;
+    }
+  }, {
+    key: "setHeight",
+    value: function setHeight() {
+      let height = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.height;
+      const numericHeight = Number(height) || 1;
+      this.setData("height", numericHeight);
+      this.getBody().scale.y = numericHeight;
+    }
+  }, {
+    key: "setAnisotropy",
+    value: function setAnisotropy() {
+      let anisotropy = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+      const numericAnisotropy = Number(anisotropy) || 1;
+      this.setData("anisotropy", numericAnisotropy);
+      this.getTexture(TEXTURES.MAP).anisotropy = validateAnisotropy(numericAnisotropy);
+    }
+  }, {
+    key: "setSizeAttenuation",
+    value: function setSizeAttenuation() {
+      let attenuation = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+      this.setData("sizeAttenuation", attenuation);
+      this.getBody().material.sizeAttenuation = attenuation;
+    }
+  }, {
+    key: "setDepthTest",
+    value: function setDepthTest() {
+      let depthTest = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+      this.setData("depthTest", depthTest);
+      this.getBody().material.depthTest = depthTest;
+    }
+  }, {
+    key: "setDepthWrite",
+    value: function setDepthWrite() {
+      let depthWrite = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+      this.setData("depthWrite", depthWrite);
+      this.getBody().material.depthWrite = depthWrite;
+    }
+  }, {
+    key: "toJSON",
+    value: function toJSON() {
+      let parseJSON = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+
+      if (this.isSerializable()) {
+        return { ..._get(_getPrototypeOf(Sprite.prototype), "toJSON", this).call(this, parseJSON),
+          width: this.width,
+          height: this.height,
+          spriteTexture: this.spriteTexture,
+          anisotropy: this.getBody().material.anisotropy,
+          sizeAttenuation: this.getBody().material.sizeAttenuation,
+          depthTest: this.getBody().material.depthTest,
+          depthWrite: this.getBody().material.depthWrite
+        };
+      }
+    }
+  }], [{
+    key: "create",
+    value: function create() {
+      let data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      const {
+        width,
+        height,
+        spriteTexture,
+        options
+      } = data;
+      return new Sprite(width, height, spriteTexture, options);
+    }
+  }]);
+
+  return Sprite;
+}(Element$1);let HelperSprite = /*#__PURE__*/function (_Sprite) {
+  _inherits(HelperSprite, _Sprite);
+
+  var _super = _createSuper(HelperSprite);
+
+  function HelperSprite() {
+    var _this;
+
+    _classCallCheck(this, HelperSprite);
+
+    for (var _len = arguments.length, options = new Array(_len), _key = 0; _key < _len; _key++) {
+      options[_key] = arguments[_key];
+    }
+
+    _this = _super.call(this, ...options);
+    _this.helperTarget = undefined;
+
+    _this.setEntityType(ENTITY_TYPES.HELPER.TYPE);
+
+    _this.setEntitySubtype(ENTITY_TYPES.HELPER.SUBTYPES.HELPER_SPRITE);
+
+    return _this;
+  }
+
+  _createClass(HelperSprite, [{
+    key: "setHelperTarget",
+    value: function setHelperTarget(element) {
+      this.helperTarget = element;
+    }
+  }, {
+    key: "getHelperTarget",
+    value: function getHelperTarget() {
+      return this.helperTarget;
+    }
+  }]);
+
+  return HelperSprite;
+}(Sprite);let Camera = /*#__PURE__*/function (_Entity) {
   _inherits(Camera, _Entity);
 
   var _super = _createSuper(Camera);
@@ -63030,15 +63232,73 @@ let Element$1 = /*#__PURE__*/function (_Entity) {
 
     _this.setEntitySubtype(ENTITY_TYPES.CAMERA.SUBTYPES.MAIN);
 
-    _this.setName(name);
+    _this.setName(name); // Helper body for this camera
 
+
+    _this.isUsingHelper = false; // Holder body representing the camera (for selection in editor)
+
+    _this.holder = null; // THREE.js CameraHelper for visual feedback
+
+    _this.helper = null;
     return _this;
   }
 
   _createClass(Camera, [{
+    key: "hasHolder",
+    value: function hasHolder() {
+      return !!this.holder;
+    }
+  }, {
+    key: "usingHelper",
+    value: function usingHelper() {
+      return this.isUsingHelper;
+    }
+  }, {
+    key: "addHolder",
+    value: function addHolder() {
+      let name = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "cameraholder";
+      let size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.05;
+      const holderSprite = new HelperSprite(size, size, name, {
+        name
+      });
+
+      if (holderSprite) {
+        holderSprite.setSizeAttenuation(false);
+        holderSprite.setDepthTest(false);
+        holderSprite.setDepthWrite(false);
+        holderSprite.setSerializable(false);
+        holderSprite.setPosition(this.getPosition());
+        holderSprite.addTags([TAGS.HELPER, TAGS.CAMERA_HELPER, name]);
+        holderSprite.setHelperTarget(this);
+        this.holder = holderSprite;
+        return true;
+      }
+
+      console.warn("[Mage] Camera holder texture not found");
+      return false;
+    }
+  }, {
+    key: "addHelpers",
+    value: function addHelpers() {
+      let {
+        holderName = "cameraholder",
+        holderSize = 0.05
+      } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      // Add THREE.js CameraHelper for visual feedback
+      this.helper = new CameraHelper(this.getBody());
+      Scene$1.add(this.helper, null, false); // Add holder sprite for selection
+
+      this.addHolder(holderName, holderSize);
+      this.isUsingHelper = true;
+    }
+  }, {
     key: "getPosition",
     value: function getPosition() {
-      return this.body.position;
+      return {
+        x: this.body.position.x,
+        y: this.body.position.y,
+        z: this.body.position.z
+      };
     }
   }, {
     key: "getDirection",
@@ -63066,6 +63326,66 @@ let Element$1 = /*#__PURE__*/function (_Entity) {
       } = position;
       this.body.lookAt(x, y, z);
     }
+  }, {
+    key: "setPosition",
+    value: function setPosition(where) {
+      let {
+        updateHolder = true
+      } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      const currentPos = this.getPosition();
+      const position = {
+        x: currentPos.x,
+        y: currentPos.y,
+        z: currentPos.z,
+        ...where
+      };
+      const {
+        x,
+        y,
+        z
+      } = position;
+
+      if (this.hasBody()) {
+        this.body.position.set(x, y, z);
+      }
+
+      if (this.hasHolder() && updateHolder) {
+        this.holder.setPosition({
+          x,
+          y,
+          z
+        });
+      }
+    }
+  }, {
+    key: "update",
+    value: function update(dt) {
+      _get(_getPrototypeOf(Camera.prototype), "update", this) && _get(_getPrototypeOf(Camera.prototype), "update", this).call(this, dt); // Update the THREE.js CameraHelper
+
+      if (this.usingHelper() && this.helper) {
+        this.helper.update();
+      } // Sync camera position from holder (when user drags the holder)
+
+
+      if (this.hasHolder()) {
+        // Read directly from the holder's THREE.js body position
+        const holderBody = this.holder.getBody();
+        const holderPos = {
+          x: holderBody.position.x,
+          y: holderBody.position.y,
+          z: holderBody.position.z
+        };
+        const cameraPos = this.getPosition(); // Only update if positions differ significantly
+
+        const threshold = 0.001;
+
+        if (Math.abs(holderPos.x - cameraPos.x) > threshold || Math.abs(holderPos.y - cameraPos.y) > threshold || Math.abs(holderPos.z - cameraPos.z) > threshold) {
+          this.setPosition(holderPos, {
+            updateHolder: false
+          });
+        }
+      }
+    }
   }, {
     key: "getFov",
     value: function getFov() {
@@ -63838,203 +64158,7 @@ let Plane = /*#__PURE__*/function (_Element) {
   }]);
 
   return Box;
-}(Element$1);const validateAnisotropy = anisotropy => {
-  const max = Scene$1.getRenderer().capabilities.getMaxAnisotropy();
-  return cap(anisotropy, max);
-};
-
-let Sprite = /*#__PURE__*/function (_Element) {
-  _inherits(Sprite, _Element);
-
-  var _super = _createSuper(Sprite);
-
-  function Sprite() {
-    var _this;
-
-    let width = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 20;
-    let height = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 20;
-    let spriteTexture = arguments.length > 2 ? arguments[2] : undefined;
-    let options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
-
-    _classCallCheck(this, Sprite);
-
-    _this = _super.call(this, {
-      width,
-      height,
-      spriteTexture,
-      ...options
-    });
-    const {
-      anisotropy = 1,
-      sizeAttenuation = true,
-      depthTest = true,
-      depthWrite = true,
-      ...rest
-    } = options;
-    const texture = Images$1.get(spriteTexture);
-
-    _this.recordTexture(spriteTexture, TEXTURES.MAP);
-
-    _this.width = width;
-    _this.height = height;
-    _this.spriteTexture = spriteTexture;
-    const material = new SpriteMaterial({
-      map: texture,
-      ...rest
-    });
-    const body = new Sprite$1(material);
-
-    _this.setBody({
-      body
-    });
-
-    _this.setAnisotropy(anisotropy);
-
-    _this.setWidth(width);
-
-    _this.setHeight(height);
-
-    _this.setSizeAttenuation(sizeAttenuation);
-
-    _this.setDepthTest(depthTest);
-
-    _this.setDepthWrite(depthWrite);
-
-    _this.setEntityType(ENTITY_TYPES.SPRITE.TYPE);
-
-    _this.setEntitySubtype(ENTITY_TYPES.SPRITE.SUBTYPES.DEFAULT);
-
-    return _this;
-  }
-
-  _createClass(Sprite, [{
-    key: "getRotation",
-    value: function getRotation() {
-      return this.getBody().material.rotation;
-    }
-  }, {
-    key: "setRotation",
-    value: function setRotation() {
-      let rotation = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.getRotation();
-      const numericRotation = Number(rotation) || 0;
-      this.setData("rotation", numericRotation);
-      this.getBody().material.rotation = numericRotation;
-    }
-  }, {
-    key: "setWidth",
-    value: function setWidth() {
-      let width = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.width;
-      const numericWidth = Number(width) || 1;
-      this.setData("width", numericWidth);
-      this.getBody().scale.x = numericWidth;
-    }
-  }, {
-    key: "setHeight",
-    value: function setHeight() {
-      let height = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.height;
-      const numericHeight = Number(height) || 1;
-      this.setData("height", numericHeight);
-      this.getBody().scale.y = numericHeight;
-    }
-  }, {
-    key: "setAnisotropy",
-    value: function setAnisotropy() {
-      let anisotropy = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
-      const numericAnisotropy = Number(anisotropy) || 1;
-      this.setData("anisotropy", numericAnisotropy);
-      this.getTexture(TEXTURES.MAP).anisotropy = validateAnisotropy(numericAnisotropy);
-    }
-  }, {
-    key: "setSizeAttenuation",
-    value: function setSizeAttenuation() {
-      let attenuation = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
-      this.setData("sizeAttenuation", attenuation);
-      this.getBody().material.sizeAttenuation = attenuation;
-    }
-  }, {
-    key: "setDepthTest",
-    value: function setDepthTest() {
-      let depthTest = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
-      this.setData("depthTest", depthTest);
-      this.getBody().material.depthTest = depthTest;
-    }
-  }, {
-    key: "setDepthWrite",
-    value: function setDepthWrite() {
-      let depthWrite = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
-      this.setData("depthWrite", depthWrite);
-      this.getBody().material.depthWrite = depthWrite;
-    }
-  }, {
-    key: "toJSON",
-    value: function toJSON() {
-      let parseJSON = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-
-      if (this.isSerializable()) {
-        return { ..._get(_getPrototypeOf(Sprite.prototype), "toJSON", this).call(this, parseJSON),
-          width: this.width,
-          height: this.height,
-          spriteTexture: this.spriteTexture,
-          anisotropy: this.getBody().material.anisotropy,
-          sizeAttenuation: this.getBody().material.sizeAttenuation,
-          depthTest: this.getBody().material.depthTest,
-          depthWrite: this.getBody().material.depthWrite
-        };
-      }
-    }
-  }], [{
-    key: "create",
-    value: function create() {
-      let data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-      const {
-        width,
-        height,
-        spriteTexture,
-        options
-      } = data;
-      return new Sprite(width, height, spriteTexture, options);
-    }
-  }]);
-
-  return Sprite;
-}(Element$1);let HelperSprite = /*#__PURE__*/function (_Sprite) {
-  _inherits(HelperSprite, _Sprite);
-
-  var _super = _createSuper(HelperSprite);
-
-  function HelperSprite() {
-    var _this;
-
-    _classCallCheck(this, HelperSprite);
-
-    for (var _len = arguments.length, options = new Array(_len), _key = 0; _key < _len; _key++) {
-      options[_key] = arguments[_key];
-    }
-
-    _this = _super.call(this, ...options);
-    _this.helperTarget = undefined;
-
-    _this.setEntityType(ENTITY_TYPES.HELPER.TYPE);
-
-    _this.setEntitySubtype(ENTITY_TYPES.HELPER.SUBTYPES.HELPER_SPRITE);
-
-    return _this;
-  }
-
-  _createClass(HelperSprite, [{
-    key: "setHelperTarget",
-    value: function setHelperTarget(element) {
-      this.helperTarget = element;
-    }
-  }, {
-    key: "getHelperTarget",
-    value: function getHelperTarget() {
-      return this.helperTarget;
-    }
-  }]);
-
-  return HelperSprite;
-}(Sprite);var __awaiter$5 = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
+}(Element$1);var __awaiter$5 = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -70294,6 +70418,7 @@ const isAlreadyResolved$1 = path => {
 /**
  * Resolves an asset path to a full URL.
  * If path is already an absolute URL or contains the API path, returns it as-is.
+ * If path is root-relative (starts with /), returns it as-is (served from public folder).
  * If path is relative and MAGE_ASSETS_BASE_URL is set, prepends the base URL.
  * @param {string} path - The asset path (relative or absolute)
  * @returns {string} - The resolved full URL
@@ -70304,15 +70429,19 @@ const resolveAssetPath$1 = path => {
   // If already a full URL or already contains the API path, return as-is
   if (isAlreadyResolved$1(path)) {
     return path;
+  } // Root-relative paths (starting with /) are served from the public folder
+  // and should not be modified with base URL
+
+
+  if (path && path.startsWith("/")) {
+    return path;
   } // If MAGE_ASSETS_BASE_URL is set, prepend it to the relative path
 
 
   const baseUrl = env.MAGE_ASSETS_BASE_URL;
 
   if (baseUrl) {
-    // Remove leading slash from path if present to avoid double slashes
-    const cleanPath = path.startsWith("/") ? path.slice(1) : path;
-    return `${baseUrl}/${cleanPath}`;
+    return `${baseUrl}/${path}`;
   } // Warn if path contains colon (could be mistaken for protocol) and no base URL is set
 
 
@@ -80811,6 +80940,7 @@ const isAlreadyResolved = path => {
 /**
  * Resolves an asset path to a full URL.
  * If path is already an absolute URL or contains the API path, returns it as-is.
+ * If path is root-relative (starts with /), returns it as-is (served from public folder).
  * If path is relative and MAGE_ASSETS_BASE_URL is set, prepends the base URL.
  * @param {string} path - The asset path (relative or absolute)
  * @returns {string} - The resolved full URL
@@ -80821,15 +80951,19 @@ const resolveAssetPath = path => {
   // If already a full URL or already contains the API path, return as-is
   if (isAlreadyResolved(path)) {
     return path;
+  } // Root-relative paths (starting with /) are served from the public folder
+  // and should not be modified with base URL
+
+
+  if (path && path.startsWith("/")) {
+    return path;
   } // If MAGE_ASSETS_BASE_URL is set, prepend it to the relative path
 
 
   const baseUrl = env.MAGE_ASSETS_BASE_URL;
 
   if (baseUrl) {
-    // Remove leading slash from path if present to avoid double slashes
-    const cleanPath = path.startsWith("/") ? path.slice(1) : path;
-    return `${baseUrl}/${cleanPath}`;
+    return `${baseUrl}/${path}`;
   } // Warn if path contains colon (could be mistaken for protocol) and no base URL is set
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "mage-engine",
-    "version": "3.23.39",
+    "version": "3.23.40",
     "description": "A WebGL Javascript Game Engine, built on top of THREE.js and many other libraries.",
     "main": "dist/mage.js",
     "author": {