@vvfx/sdk 0.2.2-beta.1 → 0.2.2-beta.2

package/dist/index.js

@@ -3,7 +3,7 @@
  * Description: TODO
  * Author: Ant Group CO., Ltd.
  * Contributors: 赤芍,何即,不择,意绮
- * Version: v0.2.2-beta.1
+ * Version: v0.2.2-beta.2
  */
 
 import * as EFFECTS from '@galacean/effects';
@@ -25153,6 +25153,152 @@ var ItemOrderAction = /*#__PURE__*/ function(ItemOrderAction) {
     return _instanceof(obj, FrameItem);
 }
 
+/**
+ * @description 卡片元素 SDKItem 类
+ * @description 在 Player 中以 SpriteItem 形式渲染（透明占位，无图）
+ * @description 支持设置卡片类型（cardType）
+ */ var CardItem = /*#__PURE__*/ function(BaseItem) {
+    _inherits(CardItem, BaseItem);
+    function CardItem(options) {
+        var _this;
+        var _ref, _ref1, _ref2, _ref3, _ref4, _ref5;
+        var _options_property, _options_property1, _options_property2, _options_property3, _options_property4, _options_property5, _options_property6, _options_property7;
+        _this = BaseItem.call(this, options) || this, /**
+   * @description 元素类型
+   */ _this.type = SDKItemType.CARD;
+        // 初始化属性（包含 cardType）
+        _this.property = {
+            position: (_ref = (_options_property = options.property) == null ? void 0 : _options_property.position) != null ? _ref : [
+                0,
+                0
+            ],
+            rotation: (_ref1 = (_options_property1 = options.property) == null ? void 0 : _options_property1.rotation) != null ? _ref1 : [
+                0,
+                0,
+                0
+            ],
+            width: (_ref2 = (_options_property2 = options.property) == null ? void 0 : _options_property2.width) != null ? _ref2 : 0,
+            height: (_ref3 = (_options_property3 = options.property) == null ? void 0 : _options_property3.height) != null ? _ref3 : 0,
+            scale: (_ref4 = (_options_property4 = options.property) == null ? void 0 : _options_property4.scale) != null ? _ref4 : [
+                1,
+                1
+            ],
+            cardType: (_ref5 = (_options_property5 = options.property) == null ? void 0 : _options_property5.cardType) != null ? _ref5 : 'unknown',
+            autoHeight: (_options_property6 = options.property) == null ? void 0 : _options_property6.autoHeight,
+            autoScale: (_options_property7 = options.property) == null ? void 0 : _options_property7.autoScale
+        };
+        return _this;
+    }
+    var _proto = CardItem.prototype;
+    // ==================== 实现抽象方法 ====================
+    /**
+   * @description 转换为 CardCreateInfo
+   * @param withParent 是否包含父节点ID
+   */ _proto.toCreateInfo = function toCreateInfo(withParent) {
+        var extension = this.getAllExtension();
+        return {
+            type: SDKItemType.CARD,
+            id: this.id,
+            name: this.name,
+            parentId: withParent ? this.parentId : undefined,
+            extension: Object.keys(extension).length > 0 ? extension : undefined,
+            property: deepClone(this.property)
+        };
+    };
+    /**
+   * @description 克隆 SDKItem
+   */ _proto.clone = function clone() {
+        return new CardItem({
+            id: generateGUID(),
+            name: this.name,
+            parentId: this.parentId,
+            duration: this.duration,
+            delay: this.delay,
+            endBehavior: this.endBehavior,
+            isLocked: this.isLocked,
+            isCoreEditable: this.isCoreEditable,
+            property: deepClone(this.property),
+            extension: this.getAllExtension()
+        });
+    };
+    _create_class(CardItem, [
+        {
+            key: "cardType",
+            get: // ==================== cardType 访问器 ====================
+            /**
+   * @description 卡片类型
+   */ function get() {
+                return this.property.cardType;
+            },
+            set: function set(value) {
+                this.property.cardType = value;
+            }
+        },
+        {
+            key: "position",
+            get: // ==================== 便捷访问器 ====================
+            /**
+   * @description 位置
+   */ function get() {
+                return this.property.position;
+            },
+            set: function set(value) {
+                this.property.position = value;
+            }
+        },
+        {
+            key: "width",
+            get: /**
+   * @description 宽度
+   */ function get() {
+                return this.property.width;
+            },
+            set: function set(value) {
+                this.property.width = value;
+            }
+        },
+        {
+            key: "height",
+            get: /**
+   * @description 高度
+   */ function get() {
+                return this.property.height;
+            },
+            set: function set(value) {
+                this.property.height = value;
+            }
+        },
+        {
+            key: "rotation",
+            get: /**
+   * @description 旋转（二维旋转角度）
+   */ function get() {
+                return this.property.rotation[2];
+            },
+            set: function set(value) {
+                this.property.rotation[2] = value;
+            }
+        },
+        {
+            key: "fullRotation",
+            get: /**
+   * @description 完整旋转（包含 x, y, z）
+   */ function get() {
+                return this.property.rotation;
+            },
+            set: function set(value) {
+                this.property.rotation = value;
+            }
+        }
+    ]);
+    return CardItem;
+}(BaseItem);
+/**
+ * @description 类型守卫：检查是否是 CardItem
+ */ function isCardItem(obj) {
+    return _instanceof(obj, CardItem);
+}
+
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
     try {
         var info = gen[key](arg);
@@ -59630,12 +59776,6 @@ var MAX_ITEM_DISTANCE_THRESHOLD = 100000;
 /**
  * @description SDKItem position 属性的数字精度（保留小数位数）
  */ var POSITION_PRECISION = 4;
-function isCardHTMLContentValue(value) {
-    return (value == null ? void 0 : value.kind) === 'inline' || (value == null ? void 0 : value.kind) === 'dom' || (value == null ? void 0 : value.kind) === 'document';
-}
-function isCardHTMLValue(value) {
-    return isCardHTMLContentValue(value == null ? void 0 : value.content);
-}
 var PageDataUtils = /*#__PURE__*/ function() {
     function PageDataUtils(player, container, emitter, sdk) {
         this.player = player;
@@ -60453,11 +60593,10 @@ var PageDataUtils = /*#__PURE__*/ function() {
                 property: property
             }));
         } else if ((existingSDKItem == null ? void 0 : existingSDKItem.type) == SDKItemType.CARD) {
-            var cardType = existingSDKItem.cardType, html = existingSDKItem.html;
+            var cardType = existingSDKItem.cardType;
             sdkItem = new CardItem(_extends({}, baseOptions, {
                 property: _extends({}, property, {
-                    cardType: cardType,
-                    html: html
+                    cardType: cardType
                 })
             }));
         } else {
@@ -61041,40 +61180,35 @@ var PageDataUtils = /*#__PURE__*/ function() {
                                     3,
                                     31
                                 ];
-                            case 'html':
-                                return [
-                                    3,
-                                    32
-                                ];
                             case 'position':
                                 return [
                                     3,
-                                    33
+                                    32
                                 ];
                             case 'rotation':
                                 return [
                                     3,
-                                    34
+                                    33
                                 ];
                             case 'scale':
                                 return [
                                     3,
-                                    35
+                                    34
                                 ];
                             case 'layoutMode':
                                 return [
                                     3,
-                                    36
+                                    35
                                 ];
                             case 'visible':
                                 return [
                                     3,
-                                    37
+                                    36
                                 ];
                         }
                         return [
                             3,
-                            38
+                            37
                         ];
                     case 1:
                         {
@@ -61087,7 +61221,7 @@ var PageDataUtils = /*#__PURE__*/ function() {
                             }
                             return [
                                 3,
-                                39
+                                38
                             ];
                         }
                     case 2:
@@ -61098,7 +61232,7 @@ var PageDataUtils = /*#__PURE__*/ function() {
                             }
                             return [
                                 3,
-                                39
+                                38
                             ];
                         }
                     case 3:
@@ -61130,7 +61264,7 @@ var PageDataUtils = /*#__PURE__*/ function() {
                     case 5:
                         return [
                             3,
-                            39
+                            38
                         ];
                     case 6:
                         {
@@ -61147,7 +61281,7 @@ var PageDataUtils = /*#__PURE__*/ function() {
                             }
                             return [
                                 3,
-                                39
+                                38
                             ];
                         }
                     case 7:
@@ -61161,7 +61295,7 @@ var PageDataUtils = /*#__PURE__*/ function() {
                             }
                             return [
                                 3,
-                                39
+                                38
                             ];
                         }
                     case 8:
@@ -61174,7 +61308,7 @@ var PageDataUtils = /*#__PURE__*/ function() {
                             }
                             return [
                                 3,
-                                39
+                                38
                             ];
                         }
                     case 9:
@@ -61188,7 +61322,7 @@ var PageDataUtils = /*#__PURE__*/ function() {
                             }
                             return [
                                 3,
-                                39
+                                38
                             ];
                         }
                     case 10:
@@ -61201,7 +61335,7 @@ var PageDataUtils = /*#__PURE__*/ function() {
                             }
                             return [
                                 3,
-                                39
+                                38
                             ];
                         }
                     case 11:
@@ -61214,7 +61348,7 @@ var PageDataUtils = /*#__PURE__*/ function() {
                             }
                             return [
                                 3,
-                                39
+                                38
                             ];
                         }
                     case 12:
@@ -61234,7 +61368,7 @@ var PageDataUtils = /*#__PURE__*/ function() {
                             }
                             return [
                                 3,
-                                39
+                                38
                             ];
                         }
                     case 13:
@@ -61276,7 +61410,7 @@ var PageDataUtils = /*#__PURE__*/ function() {
                             }
                             return [
                                 3,
-                                39
+                                38
                             ];
                         }
                     case 14:
@@ -61311,7 +61445,7 @@ var PageDataUtils = /*#__PURE__*/ function() {
                             }
                             return [
                                 3,
-                                39
+                                38
                             ];
                         }
                     case 15:
@@ -61325,7 +61459,7 @@ var PageDataUtils = /*#__PURE__*/ function() {
                             }
                             return [
                                 3,
-                                39
+                                38
                             ];
                         }
                     case 16:
@@ -61357,7 +61491,7 @@ var PageDataUtils = /*#__PURE__*/ function() {
                     case 20:
                         return [
                             3,
-                            39
+                            38
                         ];
                     case 21:
                         if (!(typeof propertyValue === 'string' && playerItem.type === spec.ItemType.video)) return [
@@ -61388,7 +61522,7 @@ var PageDataUtils = /*#__PURE__*/ function() {
                     case 25:
                         return [
                             3,
-                            39
+                            38
                         ];
                     case 26:
                         if (!(playerItem.type === spec.ItemType.null)) return [
@@ -61433,7 +61567,7 @@ var PageDataUtils = /*#__PURE__*/ function() {
                     case 28:
                         return [
                             3,
-                            39
+                            38
                         ];
                     case 29:
                         {
@@ -61445,7 +61579,7 @@ var PageDataUtils = /*#__PURE__*/ function() {
                             }
                             return [
                                 3,
-                                39
+                                38
                             ];
                         }
                     case 30:
@@ -61458,7 +61592,7 @@ var PageDataUtils = /*#__PURE__*/ function() {
                             }
                             return [
                                 3,
-                                39
+                                38
                             ];
                         }
                     case 31:
@@ -61471,20 +61605,10 @@ var PageDataUtils = /*#__PURE__*/ function() {
                             }
                             return [
                                 3,
-                                39
+                                38
                             ];
                         }
                     case 32:
-                        {
-                            if (isCardItem(targetItem)) {
-                                targetItem.html = isCardHTMLValue(propertyValue) ? propertyValue : undefined;
-                            }
-                            return [
-                                3,
-                                39
-                            ];
-                        }
-                    case 33:
                         {
                             if (Array.isArray(propertyValue) && propertyValue.length === 2) {
                                 pixelTranslation = propertyValue.map(function(v, i) {
@@ -61497,10 +61621,10 @@ var PageDataUtils = /*#__PURE__*/ function() {
                             }
                             return [
                                 3,
-                                39
+                                38
                             ];
                         }
-                    case 34:
+                    case 33:
                         {
                             if (Array.isArray(propertyValue) && propertyValue.length === 3) {
                                 rotation = propertyValue.map(function(v, i) {
@@ -61511,10 +61635,10 @@ var PageDataUtils = /*#__PURE__*/ function() {
                             }
                             return [
                                 3,
-                                39
+                                38
                             ];
                         }
-                    case 35:
+                    case 34:
                         {
                             if (Array.isArray(propertyValue) && propertyValue.length === 2) {
                                 currentScale = targetItem.property.scale;
@@ -61528,10 +61652,10 @@ var PageDataUtils = /*#__PURE__*/ function() {
                             }
                             return [
                                 3,
-                                39
+                                38
                             ];
                         }
-                    case 36:
+                    case 35:
                         {
                             if (propertyValue === FrameLayoutMode.AUTO || propertyValue === FrameLayoutMode.FREE) {
                                 frameComponent = playerItem.getComponent(FrameComponent);
@@ -61541,10 +61665,10 @@ var PageDataUtils = /*#__PURE__*/ function() {
                             }
                             return [
                                 3,
-                                39
+                                38
                             ];
                         }
-                    case 37:
+                    case 36:
                         {
                             if (typeof propertyValue === 'boolean') {
                                 playerItem.setVisible(propertyValue);
@@ -61557,10 +61681,10 @@ var PageDataUtils = /*#__PURE__*/ function() {
                             }
                             return [
                                 3,
-                                39
+                                38
                             ];
                         }
-                    case 38:
+                    case 37:
                         {
                             console.log('ignore property name ', propertyName);
                             // 对于未明确处理的属性，尝试直接设置到 property 对象
@@ -61568,8 +61692,8 @@ var PageDataUtils = /*#__PURE__*/ function() {
                                 targetItem.property[propertyName] = propertyValue;
                             }
                         }
-                        _state.label = 39;
-                    case 39:
+                        _state.label = 38;
+                    case 38:
                         // 非位置属性需要刷新播放器
                         // template 模式下保持暂停态以避免播放器自动播放，editor 模式继续推进
                         if (![
@@ -63041,7 +63165,7 @@ var PageDataUtils = /*#__PURE__*/ function() {
         var _cardInfo_name = cardInfo.name, name = _cardInfo_name === void 0 ? '卡片' : _cardInfo_name, _cardInfo_property = cardInfo.property, width = _cardInfo_property.width, height = _cardInfo_property.height, _cardInfo_property_scale = _cardInfo_property.scale, scale = _cardInfo_property_scale === void 0 ? [
             1,
             1
-        ] : _cardInfo_property_scale, cardType = _cardInfo_property.cardType, tmp = _cardInfo_property.rotation, sourceRotation = tmp === void 0 ? 0 : tmp, sourcePosition = _cardInfo_property.position, autoHeight = _cardInfo_property.autoHeight, html = _cardInfo_property.html, parentId = cardInfo.parentId, _cardInfo_id = cardInfo.id, id = _cardInfo_id === void 0 ? generateGUID() : _cardInfo_id, extension = cardInfo.extension;
+        ] : _cardInfo_property_scale, cardType = _cardInfo_property.cardType, tmp = _cardInfo_property.rotation, sourceRotation = tmp === void 0 ? 0 : tmp, sourcePosition = _cardInfo_property.position, autoHeight = _cardInfo_property.autoHeight, autoScale = _cardInfo_property.autoScale, parentId = cardInfo.parentId, _cardInfo_id = cardInfo.id, id = _cardInfo_id === void 0 ? generateGUID() : _cardInfo_id, extension = cardInfo.extension;
         // 校验 cardType 是否已在配置中注册
         var registeredTypes = SDK.config.itemConfig.cardConfig.cardTypes.map(function(t) {
             return t.type;
@@ -63092,7 +63216,7 @@ var PageDataUtils = /*#__PURE__*/ function() {
                 scale: [].concat(scale),
                 cardType: cardType,
                 autoHeight: autoHeight,
-                html: html
+                autoScale: autoScale
             },
             extension: extension
         });
@@ -64474,8 +64598,7 @@ var PageDataUtils = /*#__PURE__*/ function() {
                                 scalar.y
                             ],
                             rotation: [].concat(rotation),
-                            position: [].concat(resultPosition),
-                            html: sdkItem.html
+                            position: [].concat(resultPosition)
                         },
                         extension: extension
                     };
@@ -65859,35 +65982,56 @@ var PageDataUtils = /*#__PURE__*/ function() {
     };
     _proto.asyncAddItemByCreateInfos = function asyncAddItemByCreateInfos(createInfos) {
         return _async_to_generator(function() {
-            var _this, createInfoWithIds, itemToTextureInfo, _iterator, _step, createInfo, id, type, url, textureId, toAddedCreateInfo, groupCreateInfos, frameCreateInfos, ids, composition, loadTexture;
+            var _loop, _this, createInfoWithIds, itemToTextureInfo, _iterator, _step, toAddedCreateInfo, groupCreateInfos, frameCreateInfos, ids, composition, loadTexture;
             return _ts_generator(this, function(_state) {
                 switch(_state.label){
                     case 0:
-                        _this = this;
-                        createInfoWithIds = createInfos.map(function(createInfo) {
-                            return Object.assign({}, createInfo, createInfo.id ? {} : {
-                                id: generateGUID()
-                            });
-                        });
-                        itemToTextureInfo = new Map();
-                        // 预处理所有 createInfo，分配 textureId
-                        for(_iterator = _create_for_of_iterator_helper_loose(createInfoWithIds); !(_step = _iterator()).done;){
-                            createInfo = _step.value;
-                            id = createInfo.id;
-                            type = createInfo.type;
-                            url = type === SDKItemType.SPRITE ? createInfo.property.image : type === SDKItemType.VIDEO ? createInfo.property.video : undefined;
-                            if ((type === SDKItemType.SPRITE || type === SDKItemType.VIDEO) && url) {
-                                textureId = generateGUID();
-                                itemToTextureInfo.set(id, {
+                        _loop = function() {
+                            var createInfo = _step.value;
+                            var _ref = function() {
+                                switch(createInfo.type){
+                                    case SDKItemType.SPRITE:
+                                        {
+                                            return {
+                                                url: createInfo.property.image,
+                                                type: 'image'
+                                            };
+                                        }
+                                    case SDKItemType.VIDEO:
+                                        {
+                                            return {
+                                                url: createInfo.property.video,
+                                                type: 'video'
+                                            };
+                                        }
+                                    default:
+                                        {
+                                            return {};
+                                        }
+                                }
+                            }(), url = _ref.url, type = _ref.type;
+                            if (url && type) {
+                                var textureId = generateGUID();
+                                itemToTextureInfo.set(createInfo.id, {
                                     id: textureId,
                                     url: url,
-                                    type: type === SDKItemType.SPRITE ? 'image' : 'video'
+                                    type: type
                                 });
                                 Object.assign(createInfo, {
                                     textureId: textureId
                                 });
                             }
-                        }
+                        };
+                        _this = this;
+                        createInfoWithIds = createInfos.map(function(createInfo) {
+                            var _createInfo_id;
+                            return Object.assign({}, createInfo, {
+                                id: (_createInfo_id = createInfo.id) != null ? _createInfo_id : generateGUID()
+                            });
+                        });
+                        itemToTextureInfo = new Map();
+                        // 预处理所有 createInfo，分配 textureId
+                        for(_iterator = _create_for_of_iterator_helper_loose(createInfoWithIds); !(_step = _iterator()).done;)_loop();
                         // 并行创建所有 item
                         toAddedCreateInfo = createInfoWithIds.filter(function(createInfo) {
                             return ![
@@ -83065,38 +83209,7 @@ var BaseConfig = {
                 0.6,
                 0.12
             ],
-            cardTypes: [
-                {
-                    type: 'character',
-                    label: '角色图',
-                    iconUrl: 'https://mdn.alipayobjects.com/huamei_ixsp8m/afts/img/A*F2wVS7x0MfIAAAAAQBAAAAgAev-aAQ/original'
-                },
-                {
-                    type: 'environment',
-                    label: '环境图',
-                    iconUrl: 'https://mdn.alipayobjects.com/huamei_ixsp8m/afts/img/A*F2wVS7x0MfIAAAAAQBAAAAgAev-aAQ/original'
-                },
-                {
-                    type: 'storyboard',
-                    label: '分镜图',
-                    iconUrl: 'https://mdn.alipayobjects.com/huamei_ixsp8m/afts/img/A*F2wVS7x0MfIAAAAAQBAAAAgAev-aAQ/original'
-                },
-                {
-                    type: 'scene-clip',
-                    label: '场景剪辑',
-                    iconUrl: 'https://mdn.alipayobjects.com/huamei_ixsp8m/afts/img/A*F2wVS7x0MfIAAAAAQBAAAAgAev-aAQ/original'
-                },
-                {
-                    type: 'video-compose',
-                    label: '视频合成',
-                    iconUrl: 'https://mdn.alipayobjects.com/huamei_ixsp8m/afts/img/A*F2wVS7x0MfIAAAAAQBAAAAgAev-aAQ/original'
-                },
-                {
-                    type: 'video-generate',
-                    label: '生成视频',
-                    iconUrl: 'https://mdn.alipayobjects.com/huamei_ixsp8m/afts/img/A*F2wVS7x0MfIAAAAAQBAAAAgAev-aAQ/original'
-                }
-            ]
+            cardTypes: []
         }
     }
 };
@@ -91425,11 +91538,18 @@ function isCardHTMLAutoHeightMessage(data, id) {
     var message = data;
     return message.source === 'vvfx-card-html-auto-height' && message.id === id && typeof message.height === 'number';
 }
+function requestCardHTMLAutoHeight(iframe, id) {
+    var _iframe_contentWindow;
+    (_iframe_contentWindow = iframe.contentWindow) == null ? void 0 : _iframe_contentWindow.postMessage({
+        source: 'vvfx-card-html-auto-height-request',
+        id: id
+    }, '*');
+}
 function withCardHTMLAutoHeightBridge(html, id) {
     if (!id) {
         return html;
     }
-    var script = "\n<script data-vvfx-card-html-auto-height>\n(() => {\n  const id = " + JSON.stringify(id) + ";\n  let frame = 0;\n  const getChildrenHeight = (element) => {\n    if (!element) return 0;\n    return Array.from(element.children).reduce((height, child) => {\n      const rect = child.getBoundingClientRect();\n      return Math.max(height, rect.bottom + window.scrollY);\n    }, 0);\n  };\n  const getHeight = () => {\n    const body = document.body;\n    const root = document.documentElement;\n    const childHeight = getChildrenHeight(body);\n    const scrollHeight = Math.max(root.scrollHeight, body ? body.scrollHeight : 0);\n    return Math.ceil(Math.max(childHeight, scrollHeight));\n  };\n  const postHeight = () => {\n    frame = 0;\n    window.parent.postMessage({\n      source: 'vvfx-card-html-auto-height',\n      id,\n      height: getHeight(),\n    }, '*');\n  };\n  const schedule = () => {\n    if (frame) return;\n    frame = requestAnimationFrame(postHeight);\n  };\n  window.addEventListener('load', schedule);\n  window.addEventListener('resize', schedule);\n  new ResizeObserver(schedule).observe(document.documentElement);\n  if (document.body) {\n    new ResizeObserver(schedule).observe(document.body);\n    new MutationObserver(schedule).observe(document.body, {\n      attributes: true,\n      childList: true,\n      subtree: true,\n      characterData: true,\n    });\n  }\n  schedule();\n})();\n</script>";
+    var script = "\n<script data-vvfx-card-html-auto-height>\n(() => {\n  const id = " + JSON.stringify(id) + ";\n  let frame = 0;\n  const getNodeHeight = (node) => {\n    if (node.nodeType === Node.ELEMENT_NODE) {\n      const rect = node.getBoundingClientRect();\n      return rect.bottom + window.scrollY;\n    }\n    if (node.nodeType === Node.TEXT_NODE && node.textContent.trim()) {\n      const range = document.createRange();\n      range.selectNodeContents(node);\n      const rects = Array.from(range.getClientRects());\n      range.detach();\n      return rects.reduce((height, rect) => Math.max(height, rect.bottom + window.scrollY), 0);\n    }\n\n    return 0;\n  };\n  const getContentHeight = (element) => {\n    if (!element) return 0;\n    return Array.from(element.childNodes).reduce((height, child) => {\n      return Math.max(height, getNodeHeight(child));\n    }, 0);\n  };\n  const getHeight = () => {\n    const body = document.body;\n    const root = document.documentElement;\n    const contentHeight = getContentHeight(body);\n    const scrollHeight = Math.max(root.scrollHeight, body ? body.scrollHeight : 0);\n    return Math.ceil(contentHeight > 0 ? contentHeight : scrollHeight);\n  };\n  const postHeight = () => {\n    frame = 0;\n    window.parent.postMessage({\n      source: 'vvfx-card-html-auto-height',\n      id,\n      height: getHeight(),\n    }, '*');\n  };\n  const schedule = () => {\n    if (frame) return;\n    frame = requestAnimationFrame(postHeight);\n  };\n  window.addEventListener('message', (event) => {\n    const message = event.data;\n    if (!message || message.source !== 'vvfx-card-html-auto-height-request' || message.id !== id) {\n      return;\n    }\n\n    schedule();\n  });\n  window.addEventListener('load', schedule);\n  window.addEventListener('resize', schedule);\n  new ResizeObserver(schedule).observe(document.documentElement);\n  if (document.body) {\n    new ResizeObserver(schedule).observe(document.body);\n    new MutationObserver(schedule).observe(document.body, {\n      attributes: true,\n      childList: true,\n      subtree: true,\n      characterData: true,\n    });\n  }\n  schedule();\n})();\n</script>";
     if (/<\/body>/i.test(html)) {
         return html.replace(/<\/body>/i, "" + script + "</body>");
     }
@@ -91702,30 +91822,39 @@ function syncElementStackOrder(_container, elements) {
     });
 }
 
-function getCardOverlayBoxStyle(box, width, height, offsetX, offsetY) {
+function getCardOverlayBoxStyle(box, width, height, offsetX, offsetY, autoScale) {
     if (offsetX === void 0) offsetX = 0;
     if (offsetY === void 0) offsetY = 0;
+    if (autoScale === void 0) autoScale = true;
     if (box.corners.length === 4 && width > 0 && height > 0) {
         var _box_corners = box.corners, rightTop = _box_corners[0], leftBottom = _box_corners[2], leftTop = _box_corners[3];
-        var a = (rightTop.x - leftTop.x) / width;
-        var b = (rightTop.y - leftTop.y) / width;
-        var c = (leftBottom.x - leftTop.x) / height;
-        var d = (leftBottom.y - leftTop.y) / height;
+        var contentWidth = autoScale ? width : rightTop.distanceTo(leftTop);
+        var contentHeight = autoScale ? height : leftBottom.distanceTo(leftTop);
+        var a = (rightTop.x - leftTop.x) / contentWidth;
+        var b = (rightTop.y - leftTop.y) / contentWidth;
+        var c = (leftBottom.x - leftTop.x) / contentHeight;
+        var d = (leftBottom.y - leftTop.y) / contentHeight;
         var e = leftTop.x - offsetX;
         var f = leftTop.y - offsetY;
         return {
             left: '0px',
             top: '0px',
-            width: "" + width + "px",
-            height: "" + height + "px",
+            width: "" + formatPixelNumber(contentWidth) + "px",
+            height: "" + formatPixelNumber(contentHeight) + "px",
+            contentWidth: contentWidth,
+            contentHeight: contentHeight,
             transform: "matrix(" + formatMatrixNumber(a) + ", " + formatMatrixNumber(b) + ", " + formatMatrixNumber(c) + ", " + formatMatrixNumber(d) + ", " + formatMatrixNumber(e) + ", " + formatMatrixNumber(f) + ")"
         };
     }
+    var contentWidth1 = box.max.x - box.min.x;
+    var contentHeight1 = box.max.y - box.min.y;
     return {
         left: "" + (box.min.x - offsetX) + "px",
         top: "" + (box.min.y - offsetY) + "px",
-        width: "" + (box.max.x - box.min.x) + "px",
-        height: "" + (box.max.y - box.min.y) + "px",
+        width: "" + contentWidth1 + "px",
+        height: "" + contentHeight1 + "px",
+        contentWidth: contentWidth1,
+        contentHeight: contentHeight1,
         transform: ''
     };
 }
@@ -91748,6 +91877,10 @@ function formatMatrixNumber(value) {
     var normalized = Object.is(value, -0) ? 0 : value;
     return Number(normalized.toFixed(6)).toString();
 }
+function formatPixelNumber(value) {
+    var normalized = Object.is(value, -0) ? 0 : value;
+    return Number(normalized.toFixed(6)).toString();
+}
 
 function mountHTMLShell(container, content, shell) {
     if (!shell) {
@@ -91785,6 +91918,7 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
             contentMountElements: new Map(),
             contents: new Map(),
             cleanups: new Map(),
+            autoHeightModes: new Map(),
             autoHeightCleanups: new Map(),
             autoHeightFrames: new Map()
         };
@@ -91873,6 +92007,7 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         this.state.contentMountElements.clear();
         this.state.contents.clear();
         this.state.cleanups.clear();
+        this.state.autoHeightModes.clear();
         this.state.autoHeightCleanups.forEach(function(cleanup) {
             cleanup();
         });
@@ -92035,7 +92170,11 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         var editingVisible = false;
         items.forEach(function(item) {
             var _this_state_editing;
-            if (!isCardItem(item) || !item.visible || item.html === undefined) {
+            if (!isCardItem(item) || !item.visible) {
+                return;
+            }
+            var html = _this.options.resolveCardHTML(item);
+            if (html === undefined) {
                 return;
             }
             var itemBox = _this.options.getViewBoxById(item.id);
@@ -92050,20 +92189,19 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
             var frameBox = frameId ? _this.options.getViewBoxById(frameId) : undefined;
             var overlay = _this.getOrCreateOverlay(item.id, parentOverlay, elements);
             var contentOverlay = _this.getOrCreateContentOverlay(item.id, overlay);
-            var html = item.html;
             if (html && _this.state.contents.get(item.id) !== html) {
                 _this.renderOverlayHTML(item.id, contentOverlay, html);
             }
             var offsetX = frameBox && !frameBox.isEmpty() ? frameBox.min.x : 0;
             var offsetY = frameBox && !frameBox.isEmpty() ? frameBox.min.y : 0;
-            var boxStyle = getCardOverlayBoxStyle(itemBox, item.property.width, item.property.height, offsetX, offsetY);
+            var boxStyle = getCardOverlayBoxStyle(itemBox, item.property.width, item.property.height, offsetX, offsetY, item.property.autoScale !== false);
             overlay.style.left = boxStyle.left;
             overlay.style.top = boxStyle.top;
             overlay.style.width = boxStyle.width;
             overlay.style.height = boxStyle.height;
             overlay.style.transform = boxStyle.transform;
             overlay.style.transformOrigin = '0 0';
-            _this.syncContentScale(item.id, item.property.width, item.property.height);
+            _this.syncContentScale(item.id, boxStyle.contentWidth, boxStyle.contentHeight);
             _this.syncAutoHeight(item.id, item.property.autoHeight === true);
             _this.syncContentInteraction(item.id);
         });
@@ -92191,7 +92329,7 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         var items = this.options.getItems();
         for(var i = items.length - 1; i >= 0; i--){
             var item = items[i];
-            if (!isCardItem(item) || !item.visible || item.html === undefined) {
+            if (!isCardItem(item) || !item.visible || this.options.resolveCardHTML(item) === undefined) {
                 continue;
             }
             var box = this.options.getViewBoxById(item.id);
@@ -92210,7 +92348,7 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         var items = this.options.getItems();
         for(var i = items.length - 1; i >= 0; i--){
             var item = items[i];
-            if (!isCardItem(item) || !item.visible || item.html === undefined) {
+            if (!isCardItem(item) || !item.visible || this.options.resolveCardHTML(item) === undefined) {
                 continue;
             }
             var box = this.options.getViewBoxById(item.id);
@@ -92283,11 +92421,22 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         if (!scaleOverlay || !contentOverlay || width <= 0 || height <= 0) {
             return;
         }
-        scaleOverlay.style.width = "" + width + "px";
-        scaleOverlay.style.height = "" + height + "px";
+        var nextWidth = "" + width + "px";
+        var nextHeight = "" + height + "px";
+        var sizeChanged = scaleOverlay.style.width !== nextWidth || scaleOverlay.style.height !== nextHeight;
+        scaleOverlay.style.width = nextWidth;
+        scaleOverlay.style.height = nextHeight;
         scaleOverlay.style.transform = 'none';
-        contentOverlay.style.width = "" + width + "px";
-        contentOverlay.style.height = "" + height + "px";
+        contentOverlay.style.width = nextWidth;
+        contentOverlay.style.height = nextHeight;
+        if (sizeChanged && this.state.autoHeightModes.get(id) === 'message') {
+            this.requestAutoHeightFromIframes(id, contentOverlay);
+        }
+    };
+    _proto.requestAutoHeightFromIframes = function requestAutoHeightFromIframes(id, contentOverlay) {
+        contentOverlay.querySelectorAll('iframe').forEach(function(iframe) {
+            requestCardHTMLAutoHeight(iframe, id);
+        });
     };
     _proto.syncContentInteraction = function syncContentInteraction(id) {
         var _this_state_editing;
@@ -92429,6 +92578,9 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         var _this = this;
         switch(content.kind){
             case 'inline':
+                if (options == null ? void 0 : options.autoHeight) {
+                    this.state.autoHeightModes.set(options.id, 'message');
+                }
                 return this.chainCleanups(function() {
                     return content.cleanup == null ? void 0 : content.cleanup.call(content, overlay);
                 }, renderDocumentContent(overlay, {
@@ -92445,6 +92597,9 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
                 }));
             case 'dom':
                 {
+                    if (options == null ? void 0 : options.autoHeight) {
+                        this.state.autoHeightModes.set(options.id, 'measure');
+                    }
                     if (content.target === 'iframe') {
                         return renderDOMContentInIframe(overlay, content.render, content.cleanup);
                     }
@@ -92454,6 +92609,9 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
                     } : undefined;
                 }
             case 'document':
+                if (options == null ? void 0 : options.autoHeight) {
+                    this.state.autoHeightModes.set(options.id, 'message');
+                }
                 return this.chainCleanups(function() {
                     return content.cleanup == null ? void 0 : content.cleanup.call(content, overlay);
                 }, renderDocumentContent(overlay, content, {
@@ -92488,6 +92646,7 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         }
         this.state.contents.delete(id);
         this.state.contentMountElements.delete(id);
+        this.state.autoHeightModes.delete(id);
         this.cleanupAutoHeight(id);
     };
     _proto.removeOverlay = function removeOverlay(id) {
@@ -92503,11 +92662,27 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
             this.cleanupAutoHeight(id);
             return;
         }
+        this.ensureAutoHeightMode(id);
+        if (this.state.autoHeightModes.get(id) === 'message') {
+            this.cleanupAutoHeight(id);
+            return;
+        }
         if (!this.state.autoHeightCleanups.has(id)) {
             this.state.autoHeightCleanups.set(id, this.createAutoHeightObserver(id));
         }
         this.scheduleAutoHeightMeasure(id);
     };
+    _proto.ensureAutoHeightMode = function ensureAutoHeightMode(id) {
+        var _this_state_contents_get;
+        if (this.state.autoHeightModes.has(id)) {
+            return;
+        }
+        var content = (_this_state_contents_get = this.state.contents.get(id)) == null ? void 0 : _this_state_contents_get.content;
+        if (!content) {
+            return;
+        }
+        this.state.autoHeightModes.set(id, content.kind === 'inline' || content.kind === 'document' ? 'message' : 'measure');
+    };
     _proto.createAutoHeightObserver = function createAutoHeightObserver(id) {
         var _this = this;
         var cleanupFns = [];
@@ -92614,7 +92789,9 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         }).filter(function(height) {
             return typeof height === 'number' && Number.isFinite(height) && height > 0;
         });
-        var childHeight = this.getChildrenNaturalHeight(element);
+        var childHeight = this.getChildrenNaturalHeight(element, {
+            includeIframes: iframeHeights.length === 0
+        });
         var naturalHeight = (_Math = Math).max.apply(_Math, [].concat([
             childHeight
         ], iframeHeights));
@@ -92634,10 +92811,29 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         }
         return Math.max(documentElement.scrollHeight, (_ref = body == null ? void 0 : body.scrollHeight) != null ? _ref : 0);
     };
-    _proto.getChildrenNaturalHeight = function getChildrenNaturalHeight(element) {
-        return Array.from(element.children).reduce(function(height, child) {
-            var childElement = child;
-            return Math.max(height, childElement.offsetTop + childElement.offsetHeight);
+    _proto.getChildrenNaturalHeight = function getChildrenNaturalHeight(element, options) {
+        var _ref;
+        var includeIframes = (_ref = options == null ? void 0 : options.includeIframes) != null ? _ref : true;
+        return Array.from(element.childNodes).reduce(function(height, child) {
+            var _child_textContent;
+            if (child.nodeType === Node.ELEMENT_NODE) {
+                var childElement = child;
+                if (!includeIframes && childElement.tagName === 'IFRAME') {
+                    return height;
+                }
+                return Math.max(height, childElement.offsetTop + childElement.offsetHeight);
+            }
+            if (child.nodeType === Node.TEXT_NODE && ((_child_textContent = child.textContent) == null ? void 0 : _child_textContent.trim())) {
+                var range = element.ownerDocument.createRange();
+                range.selectNodeContents(child);
+                var rects = Array.from(range.getClientRects());
+                // eslint-disable-next-line @typescript-eslint/no-deprecated
+                range.detach();
+                return rects.reduce(function(textHeight, rect) {
+                    return Math.max(textHeight, rect.bottom - element.getBoundingClientRect().top);
+                }, height);
+            }
+            return height;
         }, 0);
     };
     _proto.cleanupAutoHeight = function cleanupAutoHeight(id) {
@@ -92659,10 +92855,25 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         if (!isCardItem(item) || item.property.autoHeight !== true) {
             return;
         }
-        if (!Number.isFinite(height) || height <= 0 || Math.abs(height - item.property.height) <= AUTO_HEIGHT_EPSILON) {
+        if (!Number.isFinite(height) || height <= 0) {
+            return;
+        }
+        var nextHeight = Math.ceil(this.getAutoHeightItemHeight(item, height));
+        if (Math.abs(nextHeight - item.property.height) <= AUTO_HEIGHT_EPSILON) {
             return;
         }
-        this.options.setCardItemHeight(id, Math.ceil(height));
+        this.options.setCardItemHeight(id, nextHeight);
+    };
+    _proto.getAutoHeightItemHeight = function getAutoHeightItemHeight(item, contentHeight) {
+        if (!isCardItem(item) || item.property.autoScale !== false) {
+            return contentHeight;
+        }
+        var scaleOverlay = this.state.contentScaleElements.get(item.id);
+        var displayedHeight = scaleOverlay ? Number.parseFloat(scaleOverlay.style.height) : 0;
+        if (!Number.isFinite(displayedHeight) || displayedHeight <= 0 || item.property.height <= 0) {
+            return contentHeight;
+        }
+        return contentHeight / displayedHeight * item.property.height;
     };
     return HTMLOverlayManager;
 }();
@@ -93267,6 +93478,9 @@ var SDK = /*#__PURE__*/ function() {
                     propertyName: 'height',
                     propertyValue: height
                 });
+            },
+            resolveCardHTML: function resolveCardHTML(item) {
+                return isCardItem(item) ? _this.resolveCardHTML(item) : undefined;
             }
         });
         this._htmlOverlayManager.attach();
@@ -95405,6 +95619,17 @@ var SDK = /*#__PURE__*/ function() {
         });
     };
     /**
+   * @description 按 cardType 从注册表解析卡片的 HTML 渲染配置。
+   * @param item 卡片元素
+   * @returns HTML 渲染配置
+   */ _proto.resolveCardHTML = function resolveCardHTML(item) {
+        var _cardTypeConfig_html;
+        var cardTypeConfig = SDK.config.itemConfig.cardConfig.cardTypes.find(function(t) {
+            return t.type === item.cardType;
+        });
+        return cardTypeConfig == null ? void 0 : (_cardTypeConfig_html = cardTypeConfig.html) == null ? void 0 : _cardTypeConfig_html.call(cardTypeConfig, item);
+    };
+    /**
    * @description 创建卡片元素
    * @description 底层以透明 SpriteItem 形式渲染，支持 cardType 属性
    * @param createInfo 卡片创建信息
@@ -95691,166 +95916,5 @@ var SDK = /*#__PURE__*/ function() {
 }();
 SDK.config = BaseConfig;
 
-/**
- * @description 卡片元素 SDKItem 类
- * @description 在 Player 中以 SpriteItem 形式渲染（透明占位，无图）
- * @description 支持设置卡片类型（cardType）
- */ var CardItem = /*#__PURE__*/ function(BaseItem) {
-    _inherits(CardItem, BaseItem);
-    function CardItem(options) {
-        var _this;
-        var _ref, _ref1, _ref2, _ref3, _ref4, _ref5, _ref6;
-        var _options_property, _options_property1, _options_property2, _options_property3, _options_property4, _options_property5, _SDK_config_itemConfig_cardConfig_cardTypes_, _options_property6, _options_property7;
-        _this = BaseItem.call(this, options) || this, /**
-   * @description 元素类型
-   */ _this.type = SDKItemType.CARD;
-        // 初始化属性（包含 cardType）
-        _this.property = {
-            position: (_ref = (_options_property = options.property) == null ? void 0 : _options_property.position) != null ? _ref : [
-                0,
-                0
-            ],
-            rotation: (_ref1 = (_options_property1 = options.property) == null ? void 0 : _options_property1.rotation) != null ? _ref1 : [
-                0,
-                0,
-                0
-            ],
-            width: (_ref2 = (_options_property2 = options.property) == null ? void 0 : _options_property2.width) != null ? _ref2 : 0,
-            height: (_ref3 = (_options_property3 = options.property) == null ? void 0 : _options_property3.height) != null ? _ref3 : 0,
-            scale: (_ref4 = (_options_property4 = options.property) == null ? void 0 : _options_property4.scale) != null ? _ref4 : [
-                1,
-                1
-            ],
-            cardType: (_ref5 = (_ref6 = (_options_property5 = options.property) == null ? void 0 : _options_property5.cardType) != null ? _ref6 : (_SDK_config_itemConfig_cardConfig_cardTypes_ = SDK.config.itemConfig.cardConfig.cardTypes[0]) == null ? void 0 : _SDK_config_itemConfig_cardConfig_cardTypes_.type) != null ? _ref5 : '',
-            autoHeight: (_options_property6 = options.property) == null ? void 0 : _options_property6.autoHeight,
-            html: (_options_property7 = options.property) == null ? void 0 : _options_property7.html
-        };
-        return _this;
-    }
-    var _proto = CardItem.prototype;
-    // ==================== 实现抽象方法 ====================
-    /**
-   * @description 转换为 CardCreateInfo
-   * @param withParent 是否包含父节点ID
-   */ _proto.toCreateInfo = function toCreateInfo(withParent) {
-        var extension = this.getAllExtension();
-        var property = deepClone(this.property);
-        property.html = this.html;
-        return {
-            type: SDKItemType.CARD,
-            id: this.id,
-            name: this.name,
-            parentId: withParent ? this.parentId : undefined,
-            extension: Object.keys(extension).length > 0 ? extension : undefined,
-            property: property
-        };
-    };
-    /**
-   * @description 克隆 SDKItem
-   */ _proto.clone = function clone() {
-        var property = deepClone(this.property);
-        property.html = this.html;
-        return new CardItem({
-            id: generateGUID(),
-            name: this.name,
-            parentId: this.parentId,
-            duration: this.duration,
-            delay: this.delay,
-            endBehavior: this.endBehavior,
-            isLocked: this.isLocked,
-            isCoreEditable: this.isCoreEditable,
-            property: property,
-            extension: this.getAllExtension()
-        });
-    };
-    _create_class(CardItem, [
-        {
-            key: "cardType",
-            get: // ==================== cardType 访问器 ====================
-            /**
-   * @description 卡片类型
-   */ function get() {
-                return this.property.cardType;
-            },
-            set: function set(value) {
-                this.property.cardType = value;
-            }
-        },
-        {
-            key: "html",
-            get: /**
-   * @description HTML 覆盖层配置
-   */ function get() {
-                return this.property.html;
-            },
-            set: function set(value) {
-                this.property.html = value;
-            }
-        },
-        {
-            key: "position",
-            get: // ==================== 便捷访问器 ====================
-            /**
-   * @description 位置
-   */ function get() {
-                return this.property.position;
-            },
-            set: function set(value) {
-                this.property.position = value;
-            }
-        },
-        {
-            key: "width",
-            get: /**
-   * @description 宽度
-   */ function get() {
-                return this.property.width;
-            },
-            set: function set(value) {
-                this.property.width = value;
-            }
-        },
-        {
-            key: "height",
-            get: /**
-   * @description 高度
-   */ function get() {
-                return this.property.height;
-            },
-            set: function set(value) {
-                this.property.height = value;
-            }
-        },
-        {
-            key: "rotation",
-            get: /**
-   * @description 旋转（二维旋转角度）
-   */ function get() {
-                return this.property.rotation[2];
-            },
-            set: function set(value) {
-                this.property.rotation[2] = value;
-            }
-        },
-        {
-            key: "fullRotation",
-            get: /**
-   * @description 完整旋转（包含 x, y, z）
-   */ function get() {
-                return this.property.rotation;
-            },
-            set: function set(value) {
-                this.property.rotation = value;
-            }
-        }
-    ]);
-    return CardItem;
-}(BaseItem);
-/**
- * @description 类型守卫：检查是否是 CardItem
- */ function isCardItem(obj) {
-    return _instanceof(obj, CardItem);
-}
-
 export { BackgroundManager, BaseItem, Box2, CardItem, DefaultVFXItems, EffectsItem, FrameItem, GeneratorItem, GroupItem, InteractionUtils, ItemOrderAction, PageDataUtils, SDK, SDKItemType, SafeConstraint, SpriteItem, TextItem, VFXItemFactory, Vector2, VideoItem, addCompositionItemByComposition, addItemInfoToScene, adjustOtherElementsLayoutInfo, arrAdd, assertExist, asserts, autoLayout, calculateAutoLayoutIndicatorLine, calculateAutoLayoutPositionByMouse, calculateDisplacement, calculateInsertPositionFromLayout, calculateLayoutDisplacements, clearItemParentInfo, createCompositionItemJSON, createFrameCompositionScene, createNullItemJSON, createSpriteItemJSON, createTextItemJSON, createVideoGeneratorItemJSON, createVideoItemJSON, deepClone, deepEquals, deleteCompositionFromScene, deleteCompositionItemFromScene, deleteItemInfoFromScene, downloadBlob, extractSubCompositionToScene, fixStandardJSON, getBasicScene, getColorByNormalizeColor, getCompositionDataByRefCompositionItemId, getCompositionIdByRefCompositionItemId, getNormalizeColorByColor, getTextureUrlById, getTransformRatioByViewAndCamera, getUniqueName, globalAutoLayout, isBaseItem, isCardItem, isEffectsItem, isEqual, isFrameItem, isGeneratorItem, isGroupItem, isObj, isSpriteItem, isTextItem, isVideoItem, loadScriptAsync, logger, moveItemBetweenCompositions, removeItemInfoFromScene, resetSubCompositionItemId, setItemJSONParentId, setJSONItemName, updateItemLayoutInfo };
 //# sourceMappingURL=index.js.map