@anov/3d-ability 0.0.142 → 0.0.144

package/dist/business/Poi/panel/index.js

@@ -1,6 +1,23 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 /*
  * @Descripttion: 
  * @version: 
@@ -34,7 +51,7 @@ import { clampAlign, parseWeight, parseStyle, num, color, sanitizeUrl, arr2, arr
  * - billboard: 看板模式（'none'|'yaw'|'full'）
  * - anchor: 面板锚点（'top'|'center'|'bottom'）
  */
-const defaults = {
+var defaults = {
   text: {
     value: '',
     fontSize: 16,
@@ -100,13 +117,18 @@ const defaults = {
  * });
  * panel.updateDynamicScale(camera);
  */
-export default class InfoPanel extends ObjectLayer {
+var InfoPanel = /*#__PURE__*/function (_ObjectLayer) {
+  _inherits(InfoPanel, _ObjectLayer);
+  var _super = _createSuper(InfoPanel);
   /**
    * 构造函数
    * @param cfg 外部配置对象；仅识别本组件支持的字段，其他字段会忽略
    */
-  constructor(cfg = {}) {
-    super();
+  function InfoPanel() {
+    var _this;
+    var cfg = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    _classCallCheck(this, InfoPanel);
+    _this = _super.call(this);
     // 新增字段声明，修复类型报错
     /**
      * 内部状态与元素引用
@@ -117,37 +139,38 @@ export default class InfoPanel extends ObjectLayer {
      * - innerWrap: 内部包裹，用于实现锚点与偏移
      * - _cssObject: three.js CSS3DObject（加入到 scene graph）
      */
-    _defineProperty(this, "config", void 0);
-    _defineProperty(this, "container", void 0);
-    _defineProperty(this, "titleEl", void 0);
-    _defineProperty(this, "contentEl", void 0);
-    _defineProperty(this, "innerWrap", void 0);
-    _defineProperty(this, "_cssObject", void 0);
+    _defineProperty(_assertThisInitialized(_this), "config", void 0);
+    _defineProperty(_assertThisInitialized(_this), "container", void 0);
+    _defineProperty(_assertThisInitialized(_this), "titleEl", void 0);
+    _defineProperty(_assertThisInitialized(_this), "contentEl", void 0);
+    _defineProperty(_assertThisInitialized(_this), "innerWrap", void 0);
+    _defineProperty(_assertThisInitialized(_this), "_cssObject", void 0);
     // 复用的临时向量，避免频繁创建对象
-    _defineProperty(this, "_tmpObjPos", new Vector3());
-    _defineProperty(this, "_tmpCamPos", new Vector3());
-    _defineProperty(this, "_tmpCamDir", new Vector3());
-    this.config = JSON.parse(JSON.stringify(defaults));
-    this.updateConfig(cfg);
-    this.container = document.createElement('div');
-    this.titleEl = document.createElement('div');
-    this.contentEl = document.createElement('div');
-    this.innerWrap = document.createElement('div');
+    _defineProperty(_assertThisInitialized(_this), "_tmpObjPos", new Vector3());
+    _defineProperty(_assertThisInitialized(_this), "_tmpCamPos", new Vector3());
+    _defineProperty(_assertThisInitialized(_this), "_tmpCamDir", new Vector3());
+    _this.config = JSON.parse(JSON.stringify(defaults));
+    _this.updateConfig(cfg);
+    _this.container = document.createElement('div');
+    _this.titleEl = document.createElement('div');
+    _this.contentEl = document.createElement('div');
+    _this.innerWrap = document.createElement('div');
     // 内层包裹用于布局，默认采用容器左上角为参考点
-    setStyles(this.innerWrap, {
+    setStyles(_this.innerWrap, {
       position: 'relative',
       left: '0',
       top: '0',
       transform: 'none',
       pointerEvents: 'auto'
     });
-    this.innerWrap.appendChild(this.titleEl);
-    this.innerWrap.appendChild(this.contentEl);
-    this.container.appendChild(this.innerWrap);
+    _this.innerWrap.appendChild(_this.titleEl);
+    _this.innerWrap.appendChild(_this.contentEl);
+    _this.container.appendChild(_this.innerWrap);
     // 将 CSS3DObject 作为子节点添加，而非赋值到 this.object3D
-    this._cssObject = new CSS3DObject(this.container);
-    this.add(this._cssObject);
-    this.applyStyle();
+    _this._cssObject = new CSS3DObject(_this.container);
+    _this.add(_this._cssObject);
+    _this.applyStyle();
+    return _this;
   }
 
   /**
@@ -158,188 +181,215 @@ export default class InfoPanel extends ObjectLayer {
    * - `anchor`: 面板锚点。
    * @param cfg 配置对象
    */
-  updateConfig(cfg = {}) {
-    const t = cfg.text || {};
-    const c = cfg.content || {};
-    this.config.text.value = typeof t.value === 'string' ? t.value : this.config.text.value;
-    this.config.text.fontSize = num(t.fontSize, this.config.text.fontSize);
-    this.config.text.color = color(t.color, this.config.text.color);
-    this.config.text.fontWeight = parseWeight(t.fontWeight || this.config.text.fontWeight);
-    this.config.text.fontStyle = parseStyle(t.fontStyle || this.config.text.fontStyle);
-    this.config.text.offset = arr2(t.offset, this.config.text.offset);
-    this.config.text.align = clampAlign(t.align || this.config.text.align);
-    this.config.text.spacing = num(t.spacing, this.config.text.spacing);
-    this.config.text.bgUrl = typeof t.bgUrl === 'string' ? sanitizeUrl(t.bgUrl) : this.config.text.bgUrl;
-    this.config.text.hsl = arr3(t.hsl, this.config.text.hsl).slice(0, 3);
-    const ns = t.bgNineSlice || {};
-    this.config.text.bgNineSlice.enabled = typeof ns.enabled === 'boolean' ? ns.enabled : this.config.text.bgNineSlice.enabled;
-    this.config.text.bgNineSlice.slice = arr4(ns.slice || t.bgSlice, this.config.text.bgNineSlice.slice);
-    this.config.text.bgNineSlice.width = arr4(ns.width || t.bgSlice, this.config.text.bgNineSlice.width);
-    this.config.text.bgNineSlice.repeat = rep(ns.repeat || this.config.text.bgNineSlice.repeat);
-    this.config.text.bgNineSlice.fill = typeof ns.fill === 'boolean' ? ns.fill : this.config.text.bgNineSlice.fill;
-    this.config.text.bgNineSlice.radius = num(ns.radius, this.config.text.bgNineSlice.radius);
-    this.config.content.visible = typeof c.visible === 'boolean' ? c.visible : this.config.content.visible;
-    this.config.content.value = typeof c.value === 'string' ? c.value : this.config.content.value;
-    this.config.content.fontSize = num(c.fontSize, this.config.content.fontSize);
-    this.config.content.color = color(c.color, this.config.content.color);
-    this.config.content.fontWeight = parseWeight(c.fontWeight || this.config.content.fontWeight);
-    this.config.content.fontStyle = parseStyle(c.fontStyle || this.config.content.fontStyle);
-    this.config.content.align = clampAlign(c.align || this.config.content.align);
-    this.config.content.offset = arr2(c.offset, this.config.content.offset);
-    this.config.content.spacing = num(c.spacing, this.config.content.spacing);
-    // 支持数值或数组。数值作为统一倍数，数组作为非均匀倍数
-    if (Array.isArray(cfg.scale) && cfg.scale.length === 3) {
-      const sx = num(cfg.scale[0], this.config.userScale3[0]);
-      const sy = num(cfg.scale[1], this.config.userScale3[1]);
-      const sz = num(cfg.scale[2], this.config.userScale3[2]);
-      this.config.userScale3 = [sx, sy, sz];
-    } else {
-      const s = num(cfg.scale, this.config.scale);
-      // 用户缩放因子：仅作为乘数，不参与单位换算
-      this.config.scale = s > 0 ? s : this.config.scale;
+  _createClass(InfoPanel, [{
+    key: "updateConfig",
+    value: function updateConfig() {
+      var cfg = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      var t = cfg.text || {};
+      var c = cfg.content || {};
+      this.config.text.value = typeof t.value === 'string' ? t.value : this.config.text.value;
+      this.config.text.fontSize = num(t.fontSize, this.config.text.fontSize);
+      this.config.text.color = color(t.color, this.config.text.color);
+      this.config.text.fontWeight = parseWeight(t.fontWeight || this.config.text.fontWeight);
+      this.config.text.fontStyle = parseStyle(t.fontStyle || this.config.text.fontStyle);
+      this.config.text.offset = arr2(t.offset, this.config.text.offset);
+      this.config.text.align = clampAlign(t.align || this.config.text.align);
+      this.config.text.spacing = num(t.spacing, this.config.text.spacing);
+      this.config.text.bgUrl = typeof t.bgUrl === 'string' ? sanitizeUrl(t.bgUrl) : this.config.text.bgUrl;
+      this.config.text.hsl = arr3(t.hsl, this.config.text.hsl).slice(0, 3);
+      var ns = t.bgNineSlice || {};
+      this.config.text.bgNineSlice.enabled = typeof ns.enabled === 'boolean' ? ns.enabled : this.config.text.bgNineSlice.enabled;
+      this.config.text.bgNineSlice.slice = arr4(ns.slice || t.bgSlice, this.config.text.bgNineSlice.slice);
+      this.config.text.bgNineSlice.width = arr4(ns.width || t.bgSlice, this.config.text.bgNineSlice.width);
+      this.config.text.bgNineSlice.repeat = rep(ns.repeat || this.config.text.bgNineSlice.repeat);
+      this.config.text.bgNineSlice.fill = typeof ns.fill === 'boolean' ? ns.fill : this.config.text.bgNineSlice.fill;
+      this.config.text.bgNineSlice.radius = num(ns.radius, this.config.text.bgNineSlice.radius);
+      this.config.content.visible = typeof c.visible === 'boolean' ? c.visible : this.config.content.visible;
+      this.config.content.value = typeof c.value === 'string' ? c.value : this.config.content.value;
+      this.config.content.fontSize = num(c.fontSize, this.config.content.fontSize);
+      this.config.content.color = color(c.color, this.config.content.color);
+      this.config.content.fontWeight = parseWeight(c.fontWeight || this.config.content.fontWeight);
+      this.config.content.fontStyle = parseStyle(c.fontStyle || this.config.content.fontStyle);
+      this.config.content.align = clampAlign(c.align || this.config.content.align);
+      this.config.content.offset = arr2(c.offset, this.config.content.offset);
+      this.config.content.spacing = num(c.spacing, this.config.content.spacing);
+      // 支持数值或数组。数值作为统一倍数，数组作为非均匀倍数
+      if (Array.isArray(cfg.scale) && cfg.scale.length === 3) {
+        var sx = num(cfg.scale[0], this.config.userScale3[0]);
+        var sy = num(cfg.scale[1], this.config.userScale3[1]);
+        var sz = num(cfg.scale[2], this.config.userScale3[2]);
+        this.config.userScale3 = [sx, sy, sz];
+      } else {
+        var s = num(cfg.scale, this.config.scale);
+        // 用户缩放因子：仅作为乘数，不参与单位换算
+        this.config.scale = s > 0 ? s : this.config.scale;
+      }
+      var bb = cfg.billboard || this.config.billboard;
+      this.config.billboard = bb === 'yaw' || bb === 'full' ? bb : 'none';
+      // 面板尺寸可通过 cfg.size 指定，否则使用默认尺寸
+      this.config.size = arr2(cfg.size, this.config.size);
+      // 屏幕像素锁定
+      this.config.pixelLock = !!(typeof cfg.pixelLock === 'boolean' ? cfg.pixelLock : this.config.pixelLock);
+      // 面板锚点
+      var ac = cfg.anchor || this.config.anchor;
+      this.config.anchor = ac === 'top' || ac === 'center' || ac === 'bottom' ? ac : 'bottom';
     }
-    const bb = cfg.billboard || this.config.billboard;
-    this.config.billboard = bb === 'yaw' || bb === 'full' ? bb : 'none';
-    // 面板尺寸可通过 cfg.size 指定，否则使用默认尺寸
-    this.config.size = arr2(cfg.size, this.config.size);
-    // 屏幕像素锁定
-    this.config.pixelLock = !!(typeof cfg.pixelLock === 'boolean' ? cfg.pixelLock : this.config.pixelLock);
-    // 面板锚点
-    const ac = cfg.anchor || this.config.anchor;
-    this.config.anchor = ac === 'top' || ac === 'center' || ac === 'bottom' ? ac : 'bottom';
-  }
 
-  /**
-   * 设置面板世界坐标（应用到 CSS3DObject）。
-   */
-  setPosition(x, y, z) {
-    this._cssObject.position.set(x, y, z);
-  }
-
-  /**
-   * 设置面板世界旋转（欧拉角，单位：弧度）。
-   */
-  setRotation(x, y, z) {
-    this._cssObject.rotation.set(x, y, z);
-  }
+    /**
+     * 设置面板世界坐标（应用到 CSS3DObject）。
+     */
+  }, {
+    key: "setPosition",
+    value: function setPosition(x, y, z) {
+      this._cssObject.position.set(x, y, z);
+    }
 
-  /**
-   * 设置统一缩放因子（立即应用到 CSS3DObject）。
-   * 注意：若使用 `updateDynamicScale`，每帧会覆盖此值。
-   */
-  setScale(s) {
-    this._cssObject.scale.setScalar(s);
-  }
+    /**
+     * 设置面板世界旋转（欧拉角，单位：弧度）。
+     */
+  }, {
+    key: "setRotation",
+    value: function setRotation(x, y, z) {
+      this._cssObject.rotation.set(x, y, z);
+    }
 
-  /**
-   * 设置看板模式。
-   * @param mode 'none' | 'yaw' | 'full'
-   */
-  setBillboard(mode) {
-    const m = mode === 'yaw' || mode === 'full' ? mode : 'none';
-    this.config.billboard = m;
-  }
+    /**
+     * 设置统一缩放因子（立即应用到 CSS3DObject）。
+     * 注意：若使用 `updateDynamicScale`，每帧会覆盖此值。
+     */
+  }, {
+    key: "setScale",
+    value: function setScale(s) {
+      this._cssObject.scale.setScalar(s);
+    }
 
-  /**
-   * 设置可见性。
-   * @param v 是否可见
-   */
-  setVisible(v) {
-    this._cssObject.visible = !!v;
-  }
+    /**
+     * 设置看板模式。
+     * @param mode 'none' | 'yaw' | 'full'
+     */
+  }, {
+    key: "setBillboard",
+    value: function setBillboard(mode) {
+      var m = mode === 'yaw' || mode === 'full' ? mode : 'none';
+      this.config.billboard = m;
+    }
 
-  /**
-   * 应用所有样式与文本到 DOM。
-   * 仅影响面板的排版与外观，不涉及 3D 变换。
-   */
-  applyStyle() {
-    const t = this.config.text;
-    const c = this.config.content;
-    // 基础容器样式，确保可见尺寸与居中锚点
-    setStyles(this.container, {
-      display: 'inline-block',
-      boxSizing: 'border-box',
-      transformOrigin: 'center center',
-      backgroundRepeat: 'no-repeat',
-      backgroundPosition: 'center',
-      backfaceVisibility: 'hidden',
-      padding: '8px'
-    });
-    // 最小像素尺寸（默认 320x180，可通过 cfg.size 覆盖），容器尺寸随内容自适应
-    const [pxW, pxH] = this.config.size;
-    setStyles(this.container, {
-      width: '',
-      height: '',
-      minWidth: `${pxW}px`,
-      minHeight: `${pxH}px`
-    });
-    // 根据锚点设置内部包裹的定位与偏移（默认 top：以左上角为参考）
-    if (this.config.anchor === 'top') {
-      this.innerWrap.style.left = '0';
-      this.innerWrap.style.top = '0';
-      this.innerWrap.style.bottom = 'auto';
-      this.innerWrap.style.transform = 'none';
-    } else if (this.config.anchor === 'center') {
-      this.innerWrap.style.left = '50%';
-      this.innerWrap.style.top = '50%';
-      this.innerWrap.style.bottom = 'auto';
-      this.innerWrap.style.transform = 'translate(-50%, -50%)';
-    } else {
-      // bottom
-      this.innerWrap.style.left = '0';
-      this.innerWrap.style.top = 'auto';
-      this.innerWrap.style.bottom = '0';
-      this.innerWrap.style.transform = 'none';
+    /**
+     * 设置可见性。
+     * @param v 是否可见
+     */
+  }, {
+    key: "setVisible",
+    value: function setVisible(v) {
+      this._cssObject.visible = !!v;
     }
-    this.titleEl.textContent = t.value || '';
-    setStyles(this.titleEl, {
-      fontSize: `${t.fontSize}px`,
-      color: t.color,
-      fontWeight: t.fontWeight,
-      fontStyle: t.fontStyle,
-      textAlign: t.align,
-      letterSpacing: `${num(t.spacing)}px`,
-      whiteSpace: 'nowrap',
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-      marginLeft: `${num(t.offset[0])}px`,
-      marginTop: `${num(t.offset[1])}px`
-    });
-    this.contentEl.style.display = c.visible ? 'block' : 'none';
-    this.contentEl.textContent = c.value || '';
-    setStyles(this.contentEl, {
-      fontSize: `${c.fontSize}px`,
-      color: c.color,
-      fontWeight: c.fontWeight,
-      fontStyle: c.fontStyle,
-      textAlign: c.align,
-      letterSpacing: `${num(c.spacing)}px`,
-      whiteSpace: 'pre-wrap',
-      wordBreak: 'break-word',
-      overflow: 'visible',
-      textOverflow: 'clip',
-      marginLeft: `${num(c.offset[0])}px`,
-      marginTop: `${num(c.offset[1])}px`
-    });
-    const hasBgUrl = typeof t.bgUrl === 'string' && t.bgUrl.length > 0;
-    if (hasBgUrl) {
-      if (t.bgNineSlice && t.bgNineSlice.enabled) {
-        const s = t.bgNineSlice.slice;
-        const w = t.bgNineSlice.width;
-        // 厚度限制，避免边框厚度超过容器尺寸导致异常视觉放大
-        const wClamped = [Math.min(w[0], pxH * 0.5), Math.min(w[1], pxW * 0.5), Math.min(w[2], pxH * 0.5), Math.min(w[3], pxW * 0.5)];
-        setStyles(this.container, {
-          borderStyle: 'solid',
-          borderWidth: `${wClamped[0]}px ${wClamped[1]}px ${wClamped[2]}px ${wClamped[3]}px`,
-          borderImageSource: `url(${t.bgUrl})`,
-          borderImageSlice: `${s[0]} ${s[1]} ${s[2]} ${s[3]}${t.bgNineSlice.fill ? ' fill' : ''}`,
-          borderImageRepeat: t.bgNineSlice.repeat,
-          backgroundImage: 'none',
-          borderRadius: `${num(t.bgNineSlice.radius, 0)}px`
-        });
+
+    /**
+     * 应用所有样式与文本到 DOM。
+     * 仅影响面板的排版与外观，不涉及 3D 变换。
+     */
+  }, {
+    key: "applyStyle",
+    value: function applyStyle() {
+      var t = this.config.text;
+      var c = this.config.content;
+      // 基础容器样式，确保可见尺寸与居中锚点
+      setStyles(this.container, {
+        display: 'inline-block',
+        boxSizing: 'border-box',
+        transformOrigin: 'center center',
+        backgroundRepeat: 'no-repeat',
+        backgroundPosition: 'center',
+        backfaceVisibility: 'hidden',
+        padding: '8px'
+      });
+      // 最小像素尺寸（默认 320x180，可通过 cfg.size 覆盖），容器尺寸随内容自适应
+      var _this$config$size = _slicedToArray(this.config.size, 2),
+        pxW = _this$config$size[0],
+        pxH = _this$config$size[1];
+      setStyles(this.container, {
+        width: '',
+        height: '',
+        minWidth: "".concat(pxW, "px"),
+        minHeight: "".concat(pxH, "px")
+      });
+      // 根据锚点设置内部包裹的定位与偏移（默认 top：以左上角为参考）
+      if (this.config.anchor === 'top') {
+        this.innerWrap.style.left = '0';
+        this.innerWrap.style.top = '0';
+        this.innerWrap.style.bottom = 'auto';
+        this.innerWrap.style.transform = 'none';
+      } else if (this.config.anchor === 'center') {
+        this.innerWrap.style.left = '50%';
+        this.innerWrap.style.top = '50%';
+        this.innerWrap.style.bottom = 'auto';
+        this.innerWrap.style.transform = 'translate(-50%, -50%)';
+      } else {
+        // bottom
+        this.innerWrap.style.left = '0';
+        this.innerWrap.style.top = 'auto';
+        this.innerWrap.style.bottom = '0';
+        this.innerWrap.style.transform = 'none';
+      }
+      this.titleEl.textContent = t.value || '';
+      setStyles(this.titleEl, {
+        fontSize: "".concat(t.fontSize, "px"),
+        color: t.color,
+        fontWeight: t.fontWeight,
+        fontStyle: t.fontStyle,
+        textAlign: t.align,
+        letterSpacing: "".concat(num(t.spacing), "px"),
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        marginLeft: "".concat(num(t.offset[0]), "px"),
+        marginTop: "".concat(num(t.offset[1]), "px")
+      });
+      this.contentEl.style.display = c.visible ? 'block' : 'none';
+      this.contentEl.textContent = c.value || '';
+      setStyles(this.contentEl, {
+        fontSize: "".concat(c.fontSize, "px"),
+        color: c.color,
+        fontWeight: c.fontWeight,
+        fontStyle: c.fontStyle,
+        textAlign: c.align,
+        letterSpacing: "".concat(num(c.spacing), "px"),
+        whiteSpace: 'pre-wrap',
+        wordBreak: 'break-word',
+        overflow: 'visible',
+        textOverflow: 'clip',
+        marginLeft: "".concat(num(c.offset[0]), "px"),
+        marginTop: "".concat(num(c.offset[1]), "px")
+      });
+      var hasBgUrl = typeof t.bgUrl === 'string' && t.bgUrl.length > 0;
+      if (hasBgUrl) {
+        if (t.bgNineSlice && t.bgNineSlice.enabled) {
+          var s = t.bgNineSlice.slice;
+          var w = t.bgNineSlice.width;
+          // 厚度限制，避免边框厚度超过容器尺寸导致异常视觉放大
+          var wClamped = [Math.min(w[0], pxH * 0.5), Math.min(w[1], pxW * 0.5), Math.min(w[2], pxH * 0.5), Math.min(w[3], pxW * 0.5)];
+          setStyles(this.container, {
+            borderStyle: 'solid',
+            borderWidth: "".concat(wClamped[0], "px ").concat(wClamped[1], "px ").concat(wClamped[2], "px ").concat(wClamped[3], "px"),
+            borderImageSource: "url(".concat(t.bgUrl, ")"),
+            borderImageSlice: "".concat(s[0], " ").concat(s[1], " ").concat(s[2], " ").concat(s[3]).concat(t.bgNineSlice.fill ? ' fill' : ''),
+            borderImageRepeat: t.bgNineSlice.repeat,
+            backgroundImage: 'none',
+            borderRadius: "".concat(num(t.bgNineSlice.radius, 0), "px")
+          });
+        } else {
+          setStyles(this.container, {
+            backgroundImage: "url(".concat(t.bgUrl, ")"),
+            borderImageSource: 'none',
+            borderImageSlice: '',
+            borderImageRepeat: '',
+            borderStyle: 'none',
+            borderWidth: '0px'
+          });
+        }
       } else {
         setStyles(this.container, {
-          backgroundImage: `url(${t.bgUrl})`,
+          backgroundImage: 'none',
           borderImageSource: 'none',
           borderImageSlice: '',
           borderImageRepeat: '',
@@ -347,128 +397,136 @@ export default class InfoPanel extends ObjectLayer {
           borderWidth: '0px'
         });
       }
-    } else {
+      // 背景填充整个容器尺寸
       setStyles(this.container, {
-        backgroundImage: 'none',
-        borderImageSource: 'none',
-        borderImageSlice: '',
-        borderImageRepeat: '',
-        borderStyle: 'none',
-        borderWidth: '0px'
+        backgroundSize: '100% 100%',
+        textAlign: t.align,
+        pointerEvents: 'auto',
+        filter: "hue-rotate(".concat(num(t.hsl[0], 0), "deg) saturate(").concat(num(t.hsl[1], 0), "%) brightness(").concat(num(t.hsl[2], 0), "%)")
       });
     }
-    // 背景填充整个容器尺寸
-    setStyles(this.container, {
-      backgroundSize: '100% 100%',
-      textAlign: t.align,
-      pointerEvents: 'auto',
-      filter: `hue-rotate(${num(t.hsl[0], 0)}deg) saturate(${num(t.hsl[1], 0)}%) brightness(${num(t.hsl[2], 0)}%)`
-    });
-  }
 
-  /**
-   * 更新配置并立即重新应用到 DOM。
-   * @param cfg 新配置
-   */
-  update(cfg = {}) {
-    this.updateConfig(cfg);
-    this.applyStyle();
-  }
+    /**
+     * 更新配置并立即重新应用到 DOM。
+     * @param cfg 新配置
+     */
+  }, {
+    key: "update",
+    value: function update() {
+      var cfg = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      this.updateConfig(cfg);
+      this.applyStyle();
+    }
 
-  /**
-   * 根据看板模式使面板朝向相机。
-   * - 'full'：使用 `lookAt` 全方位朝向相机。
-   * - 'yaw'：仅绕 Y 轴旋转，保持水平面朝向相机。
-   * - 'none'：不处理朝向。
-   * @param camera three.js 相机
-   */
-  updateFacing(camera) {
-    const mode = this.config.billboard;
-    if (mode === 'none') return;
-    const objPos = this._tmpObjPos;
-    const camPos = this._tmpCamPos;
-    this._cssObject.getWorldPosition(objPos);
-    camera.getWorldPosition(camPos);
-    if (mode === 'full') {
-      this._cssObject.lookAt(camPos);
-    } else if (mode === 'yaw') {
-      const dx = camPos.x - objPos.x;
-      const dz = camPos.z - objPos.z;
-      const yaw = Math.atan2(dx, dz);
-      this._cssObject.rotation.set(0, yaw, 0);
+    /**
+     * 根据看板模式使面板朝向相机。
+     * - 'full'：使用 `lookAt` 全方位朝向相机。
+     * - 'yaw'：仅绕 Y 轴旋转，保持水平面朝向相机。
+     * - 'none'：不处理朝向。
+     * @param camera three.js 相机
+     */
+  }, {
+    key: "updateFacing",
+    value: function updateFacing(camera) {
+      var mode = this.config.billboard;
+      if (mode === 'none') return;
+      var objPos = this._tmpObjPos;
+      var camPos = this._tmpCamPos;
+      this._cssObject.getWorldPosition(objPos);
+      camera.getWorldPosition(camPos);
+      if (mode === 'full') {
+        this._cssObject.lookAt(camPos);
+      } else if (mode === 'yaw') {
+        var dx = camPos.x - objPos.x;
+        var dz = camPos.z - objPos.z;
+        var yaw = Math.atan2(dx, dz);
+        this._cssObject.rotation.set(0, yaw, 0);
+      }
     }
-  }
 
-  /**
-   * 动态缩放：根据相机 FOV、沿相机前向的距离 d、视口尺寸，
-   * 计算“每像素对应的世界单位”，并结合用户缩放得到最终缩放。
-   * - pixelLock: s = worldPerPixelX * userScale
-   * - 非锁定: s = userScale
-   * - 最终各轴缩放: [sx, sy, sz] = s * userScale3
-   */
-  updateDynamicScale(camera, viewportWidth = window.innerWidth, viewportHeight = window.innerHeight) {
-    if (!camera) return;
-    const objPos = this._tmpObjPos;
-    const camPos = this._tmpCamPos;
-    const camDir = this._tmpCamDir;
-    this._cssObject.getWorldPosition(objPos);
-    camera.getWorldPosition(camPos);
-    camera.getWorldDirection(camDir);
-    const d = objPos.clone().sub(camPos).dot(camDir);
-    const fovRad = MathUtils.degToRad(camera.fov);
-    const worldPerPixelY = 2 * d * Math.tan(fovRad / 2) / viewportHeight;
-    const worldPerPixelX = worldPerPixelY * camera.aspect;
-    const userScale = this.config.scale;
-    const userScale3 = this.config.userScale3 || [1, 1, 1];
-    // pixel-lock：保持屏幕像素尺寸恒定；非锁定：使用统一用户系数
-    let s = this.config.pixelLock ? worldPerPixelX * (userScale > 0 ? userScale : 1) : userScale > 0 ? userScale : 1;
-    if (!Number.isFinite(s) || s <= 0) return;
-    // 简单限幅，避免极端相机参数造成缩放异常
-    const MAX_S = 1e3;
-    const MIN_S = 1e-6;
-    s = Math.max(Math.min(s, MAX_S), MIN_S);
-    const sx = s * (userScale3[0] || 1);
-    const sy = s * (userScale3[1] || 1);
-    const sz = s * (userScale3[2] || 1);
-    this._cssObject.scale.set(sx, sy, sz);
-  }
+    /**
+     * 动态缩放：根据相机 FOV、沿相机前向的距离 d、视口尺寸，
+     * 计算“每像素对应的世界单位”，并结合用户缩放得到最终缩放。
+     * - pixelLock: s = worldPerPixelX * userScale
+     * - 非锁定: s = userScale
+     * - 最终各轴缩放: [sx, sy, sz] = s * userScale3
+     */
+  }, {
+    key: "updateDynamicScale",
+    value: function updateDynamicScale(camera) {
+      var viewportWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : window.innerWidth;
+      var viewportHeight = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : window.innerHeight;
+      if (!camera) return;
+      var objPos = this._tmpObjPos;
+      var camPos = this._tmpCamPos;
+      var camDir = this._tmpCamDir;
+      this._cssObject.getWorldPosition(objPos);
+      camera.getWorldPosition(camPos);
+      camera.getWorldDirection(camDir);
+      var d = objPos.clone().sub(camPos).dot(camDir);
+      var fovRad = MathUtils.degToRad(camera.fov);
+      var worldPerPixelY = 2 * d * Math.tan(fovRad / 2) / viewportHeight;
+      var worldPerPixelX = worldPerPixelY * camera.aspect;
+      var userScale = this.config.scale;
+      var userScale3 = this.config.userScale3 || [1, 1, 1];
+      // pixel-lock：保持屏幕像素尺寸恒定；非锁定：使用统一用户系数
+      var s = this.config.pixelLock ? worldPerPixelX * (userScale > 0 ? userScale : 1) : userScale > 0 ? userScale : 1;
+      if (!Number.isFinite(s) || s <= 0) return;
+      // 简单限幅，避免极端相机参数造成缩放异常
+      var MAX_S = 1e3;
+      var MIN_S = 1e-6;
+      s = Math.max(Math.min(s, MAX_S), MIN_S);
+      var sx = s * (userScale3[0] || 1);
+      var sy = s * (userScale3[1] || 1);
+      var sz = s * (userScale3[2] || 1);
+      this._cssObject.scale.set(sx, sy, sz);
+    }
 
-  // 移除父级缩放抵消，面板可响应外部实体缩放（含非均匀）
+    // 移除父级缩放抵消，面板可响应外部实体缩放（含非均匀）
 
-  /**
-   * 释放面板：从场景移除 CSS3DObject，并清理 DOM。
-   */
-  dispose() {
-    if (this._cssObject.parent) this._cssObject.parent.remove(this._cssObject);
-    this.container.remove();
-  }
+    /**
+     * 释放面板：从场景移除 CSS3DObject，并清理 DOM。
+     */
+  }, {
+    key: "dispose",
+    value: function dispose() {
+      if (this._cssObject.parent) this._cssObject.parent.remove(this._cssObject);
+      this.container.remove();
+    }
 
-  /**
-   * 获取当前面板在世界坐标中的宽高（单位：世界单位）。
-   * 注意：结果受相机参数、面板到相机的距离以及当前 `_cssObject.scale` 影响。
-   * @param camera three.js 相机
-   * @param viewportWidth 视口宽度（像素）
-   * @param viewportHeight 视口高度（像素）
-   * @returns `{ width, height }` 世界单位
-   */
-  getWorldSize(camera, viewportWidth = window.innerWidth, viewportHeight = window.innerHeight) {
-    const objPos = this._tmpObjPos;
-    const camPos = this._tmpCamPos;
-    const camDir = this._tmpCamDir;
-    this._cssObject.getWorldPosition(objPos);
-    camera.getWorldPosition(camPos);
-    camera.getWorldDirection(camDir);
-    const d = objPos.clone().sub(camPos).dot(camDir);
-    const fovRad = MathUtils.degToRad(camera.fov);
-    const worldPerPixelY = 2 * d * Math.tan(fovRad / 2) / viewportHeight;
-    const worldPerPixelX = worldPerPixelY * camera.aspect;
-    const wpx = this.container.offsetWidth || 0;
-    const hpx = this.container.offsetHeight || 0;
-    const s = this._cssObject.scale.x;
-    return {
-      width: wpx * worldPerPixelX * s,
-      height: hpx * worldPerPixelY * s
-    };
-  }
-}
+    /**
+     * 获取当前面板在世界坐标中的宽高（单位：世界单位）。
+     * 注意：结果受相机参数、面板到相机的距离以及当前 `_cssObject.scale` 影响。
+     * @param camera three.js 相机
+     * @param viewportWidth 视口宽度（像素）
+     * @param viewportHeight 视口高度（像素）
+     * @returns `{ width, height }` 世界单位
+     */
+  }, {
+    key: "getWorldSize",
+    value: function getWorldSize(camera) {
+      var viewportWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : window.innerWidth;
+      var viewportHeight = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : window.innerHeight;
+      var objPos = this._tmpObjPos;
+      var camPos = this._tmpCamPos;
+      var camDir = this._tmpCamDir;
+      this._cssObject.getWorldPosition(objPos);
+      camera.getWorldPosition(camPos);
+      camera.getWorldDirection(camDir);
+      var d = objPos.clone().sub(camPos).dot(camDir);
+      var fovRad = MathUtils.degToRad(camera.fov);
+      var worldPerPixelY = 2 * d * Math.tan(fovRad / 2) / viewportHeight;
+      var worldPerPixelX = worldPerPixelY * camera.aspect;
+      var wpx = this.container.offsetWidth || 0;
+      var hpx = this.container.offsetHeight || 0;
+      var s = this._cssObject.scale.x;
+      return {
+        width: wpx * worldPerPixelX * s,
+        height: hpx * worldPerPixelY * s
+      };
+    }
+  }]);
+  return InfoPanel;
+}(ObjectLayer);
+export { InfoPanel as default };
 //# sourceMappingURL=index.js.map