@vvfx/sdk 0.2.2-beta.13 → 0.2.2-beta.16

package/dist/index.mjs

@@ -3,7 +3,7 @@
  * Description: TODO
  * Author: Ant Group CO., Ltd.
  * Contributors: 赤芍,何即,不择,意绮
- * Version: v0.2.2-beta.13
+ * Version: v0.2.2-beta.16
  */
 
 'use strict';
@@ -60433,6 +60433,8 @@ var PageDataUtils = /*#__PURE__*/ function() {
                 }
         }
         var isLocked = (_this_getSDKItem = this.getSDKItem(playerItem.getInstanceId())) == null ? void 0 : _this_getSDKItem.isLocked;
+        // 优先通过 ID 查找现有 SDKItem，获取其 SDKItemType
+        var existingSDKItem = this.getSDKItem(playerItem.getInstanceId());
         // 创建基础选项
         var baseOptions = {
             id: playerItem.getInstanceId(),
@@ -60444,12 +60446,11 @@ var PageDataUtils = /*#__PURE__*/ function() {
             endBehavior: playerItem.endBehavior,
             visible: isVisible,
             isLocked: isLocked,
-            isCoreEditable: isCoreEditable
+            isCoreEditable: isCoreEditable,
+            extension: existingSDKItem == null ? void 0 : existingSDKItem.extension
         };
         // 根据类型创建对应的 SDKItem 类实例
         var sdkItem;
-        // 优先通过 ID 查找现有 SDKItem，获取其 SDKItemType
-        var existingSDKItem = this.getSDKItem(playerItem.getInstanceId());
         // 如果找到了现有 SDKItem，根据 SDKItemType 创建
         // 将类型转换为 string 进行比较
         if ((existingSDKItem == null ? void 0 : existingSDKItem.type) === SDKItemType.GENERATOR) {
@@ -91886,30 +91887,6 @@ var EDITING_VIEWPORT_PADDING = 48;
 var EDITING_VIEWPORT_BOX_SCALE = 1.1;
 var AUTO_HEIGHT_EPSILON = 0.5;
 var CARD_RASTERIZE_READY_TIMEOUT = 3000;
-var CARD_HTML_EVENT_MESSAGE_SOURCE = 'vvfx-card-html-event';
-var requestHTMLOverlayFrame = function requestHTMLOverlayFrame(callback) {
-    if (typeof requestAnimationFrame === 'function') {
-        try {
-            return requestAnimationFrame(callback);
-        } catch (unused) {
-        // Some non-browser test runtimes install a RAF polyfill that depends on window.
-        }
-    }
-    return setTimeout(function() {
-        callback(Date.now());
-    }, 16);
-};
-var cancelHTMLOverlayFrame = function cancelHTMLOverlayFrame(frame) {
-    if (typeof cancelAnimationFrame === 'function') {
-        try {
-            cancelAnimationFrame(frame);
-            return;
-        } catch (unused) {
-        // Fall back to clearTimeout for frames created by requestHTMLOverlayFrame.
-        }
-    }
-    clearTimeout(frame);
-};
 var HTMLOverlayManager = /*#__PURE__*/ function() {
     function HTMLOverlayManager(options) {
         var _this = this;
@@ -91982,7 +91959,7 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
                 return;
             }
             if (_this.contentInteractionFrame !== undefined) {
-                cancelHTMLOverlayFrame(_this.contentInteractionFrame);
+                cancelAnimationFrame(_this.contentInteractionFrame);
                 _this.contentInteractionFrame = undefined;
             }
             _this.pendingContentInteractionEvent = undefined;
@@ -92043,11 +92020,11 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
     _proto.dispose = function dispose() {
         var _this_state_layer;
         if (this.state.updateFrame !== undefined) {
-            cancelHTMLOverlayFrame(this.state.updateFrame);
+            cancelAnimationFrame(this.state.updateFrame);
             this.state.updateFrame = undefined;
         }
         if (this.contentInteractionFrame !== undefined) {
-            cancelHTMLOverlayFrame(this.contentInteractionFrame);
+            cancelAnimationFrame(this.contentInteractionFrame);
             this.contentInteractionFrame = undefined;
         }
         this.pendingContentInteractionEvent = undefined;
@@ -92077,7 +92054,7 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         });
         this.state.autoHeightCleanups.clear();
         this.state.autoHeightFrames.forEach(function(frame) {
-            cancelHTMLOverlayFrame(frame);
+            cancelAnimationFrame(frame);
         });
         this.state.autoHeightFrames.clear();
         this.eventCleanups.forEach(function(cleanup) {
@@ -92096,9 +92073,9 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
     _proto.scheduleRender = function scheduleRender() {
         var _this = this;
         if (this.state.updateFrame !== undefined) {
-            cancelHTMLOverlayFrame(this.state.updateFrame);
+            cancelAnimationFrame(this.state.updateFrame);
         }
-        this.state.updateFrame = requestHTMLOverlayFrame(function() {
+        this.state.updateFrame = requestAnimationFrame(function() {
             _this.state.updateFrame = undefined;
             _this.render();
         });
@@ -92107,40 +92084,6 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         this.cleanupOverlayContent(id);
         this.invalidateContentInteractionZones(id);
     };
-    _proto.getHtmlCardWindow = function getHtmlCardWindow(id) {
-        var contentOverlay = this.state.contentElements.get(id);
-        var iframe = contentOverlay == null ? void 0 : contentOverlay.querySelector('iframe');
-        return iframe == null ? void 0 : iframe.contentWindow;
-    };
-    _proto.patchCardHTML = function patchCardHTML(id, patch) {
-        var html = this.state.contents.get(id);
-        if (!html) {
-            return false;
-        }
-        var patchHandler = html.content.patch;
-        if (!patchHandler) {
-            return false;
-        }
-        var context = this.createPatchContext(id, html);
-        return patchHandler(patch, context) !== false;
-    };
-    _proto.dispatchHtmlCardEvent = function dispatchHtmlCardEvent(id, type, detail) {
-        var targetWindow = this.getHtmlCardWindow(id);
-        try {
-            if (!targetWindow || typeof targetWindow.postMessage !== 'function') {
-                return false;
-            }
-            targetWindow.postMessage({
-                detail: detail,
-                payload: detail,
-                source: CARD_HTML_EVENT_MESSAGE_SOURCE,
-                type: type
-            }, '*');
-            return true;
-        } catch (unused) {
-            return false;
-        }
-    };
     _proto.rasterizeCard = function rasterizeCard(id, options) {
         return _async_to_generator(function() {
             var contentOverlay, capture, _ref, _options_pixelRatio, image, error;
@@ -92148,7 +92091,7 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
                 switch(_state.label){
                     case 0:
                         if (this.state.updateFrame !== undefined) {
-                            cancelHTMLOverlayFrame(this.state.updateFrame);
+                            cancelAnimationFrame(this.state.updateFrame);
                             this.state.updateFrame = undefined;
                         }
                         this.render();
@@ -92315,10 +92258,13 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
             var overlay = _this.getOrCreateOverlay(item.id, parentOverlay, elements);
             var contentOverlay = _this.getOrCreateContentOverlay(item.id, overlay);
             var selectionOverlay = _this.getOrCreateSelectionOverlay(item.id, selectionLayer);
+            if (!_this.state.contents.has(item.id)) {
+                _this.renderOverlayHTML(item.id, contentOverlay, html);
+            }
+            _this.applyHTMLRootConfig(overlay, 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, _this.isAutoScaleEnabled(item));
-            _this.applyHTMLRootConfig(overlay, html);
             overlay.style.left = boxStyle.left;
             overlay.style.top = boxStyle.top;
             overlay.style.width = boxStyle.width;
@@ -92333,12 +92279,8 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
             selectionOverlay.style.transform = selectionBoxStyle.transform;
             selectionOverlay.style.transformOrigin = '0 0';
             _this.applyHTMLRootConfig(selectionOverlay, html);
-            _this.makeSelectionOverlayTransparent(selectionOverlay);
             _this.syncOverlaySelection(item.id, overlay, selectionOverlay);
             _this.syncContentScale(item.id, boxStyle.contentWidth, boxStyle.contentHeight);
-            if (!_this.state.contents.has(item.id)) {
-                _this.renderOverlayHTML(item.id, contentOverlay, html);
-            }
             _this.syncAutoHeight(item.id, _this.isAutoHeightEnabled(item));
             _this.syncContentInteraction(item.id);
         });
@@ -92578,20 +92520,14 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         if (this.contentInteractionFrame !== undefined) {
             return;
         }
-        try {
-            this.contentInteractionFrame = requestAnimationFrame(function() {
-                _this.contentInteractionFrame = undefined;
-                var pendingEvent = _this.pendingContentInteractionEvent;
-                _this.pendingContentInteractionEvent = undefined;
-                if (pendingEvent) {
-                    _this.syncActiveContentInteraction(pendingEvent);
-                }
-            });
-        } catch (unused) {
-            this.contentInteractionFrame = undefined;
-            this.pendingContentInteractionEvent = undefined;
-            this.syncActiveContentInteraction(event);
-        }
+        this.contentInteractionFrame = requestAnimationFrame(function() {
+            _this.contentInteractionFrame = undefined;
+            var pendingEvent = _this.pendingContentInteractionEvent;
+            _this.pendingContentInteractionEvent = undefined;
+            if (pendingEvent) {
+                _this.syncActiveContentInteraction(pendingEvent);
+            }
+        });
     };
     _proto.setActiveContentInteraction = function setActiveContentInteraction(zone) {
         var _this = this;
@@ -93015,20 +92951,6 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         });
         this.state.contents.set(id, html);
     };
-    _proto.createPatchContext = function createPatchContext(id, html) {
-        var _this = this;
-        return {
-            id: id,
-            html: html,
-            content: html.content,
-            container: this.state.contentMountElements.get(id),
-            contentWindow: this.getHtmlCardWindow(id),
-            refresh: function refresh() {
-                _this.invalidateCardHTML(id);
-                _this.scheduleRender();
-            }
-        };
-    };
     _proto.observeContentInteractionZones = function observeContentInteractionZones(id, contentContainer) {
         var _this = this;
         var _this_state_contentInteractionZoneCleanups_get;
@@ -93088,10 +93010,6 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
             });
         });
     };
-    _proto.makeSelectionOverlayTransparent = function makeSelectionOverlayTransparent(selectionOverlay) {
-        selectionOverlay.style.background = 'transparent';
-        selectionOverlay.style.backgroundColor = 'transparent';
-    };
     _proto.renderOverlayContent = function renderOverlayContent(overlay, content, options) {
         var _this = this;
         switch(content.kind){
@@ -93284,7 +93202,7 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         if (this.state.autoHeightFrames.has(id)) {
             return;
         }
-        var frame = requestHTMLOverlayFrame(function() {
+        var frame = requestAnimationFrame(function() {
             _this.state.autoHeightFrames.delete(id);
             _this.measureAutoHeight(id);
         });
@@ -93368,7 +93286,7 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         }
         var frame = this.state.autoHeightFrames.get(id);
         if (frame !== undefined) {
-            cancelHTMLOverlayFrame(frame);
+            cancelAnimationFrame(frame);
             this.state.autoHeightFrames.delete(id);
         }
     };
@@ -93386,18 +93304,7 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         if (Math.abs(nextHeight - item.property.height) <= AUTO_HEIGHT_EPSILON) {
             return;
         }
-        this.options.setCardItemHeight(id, nextHeight, {
-            anchor: this.getAutoHeightAnchor(item),
-            previousHeight: item.property.height
-        });
-    };
-    _proto.getAutoHeightAnchor = function getAutoHeightAnchor(item) {
-        var _ref;
-        var _this_options_resolveCardTypeConfig;
-        if (!isCardItem(item)) {
-            return 'top';
-        }
-        return (_ref = (_this_options_resolveCardTypeConfig = this.options.resolveCardTypeConfig(item)) == null ? void 0 : _this_options_resolveCardTypeConfig.autoHeightAnchor) != null ? _ref : 'top';
+        this.options.setCardItemHeight(id, nextHeight);
     };
     _proto.getAutoHeightItemHeight = function getAutoHeightItemHeight(item, contentHeight) {
         if (!isCardItem(item) || this.isAutoScaleEnabled(item)) {
@@ -93483,7 +93390,7 @@ function formatCssNumber(value) {
 }
 function nextAnimationFrame() {
     return new Promise(function(resolve) {
-        requestHTMLOverlayFrame(function() {
+        requestAnimationFrame(function() {
             resolve();
         });
     });
@@ -94052,29 +93959,12 @@ var SDK = /*#__PURE__*/ function() {
                     bottom: HTML_CARD_EDITING_VIEWPORT_PADDING
                 }, box);
             },
-            setCardItemHeight: function setCardItemHeight(id, height, options) {
-                var item = _this.getSDKItem(id);
-                if (!isCardItem(item) || options.anchor === 'center') {
-                    void _this.setItemProperty({
-                        itemId: id,
-                        type: SDKItemType.CARD,
-                        propertyName: 'height',
-                        propertyValue: height
-                    });
-                    return;
-                }
-                var _item_property_position = item.property.position, x = _item_property_position[0], y = _item_property_position[1];
-                var deltaY = (height - options.previousHeight) / 2;
+            setCardItemHeight: function setCardItemHeight(id, height) {
                 void _this.setItemProperty({
                     itemId: id,
                     type: SDKItemType.CARD,
-                    property: {
-                        height: height,
-                        position: [
-                            x,
-                            y + deltaY
-                        ]
-                    }
+                    propertyName: 'height',
+                    propertyValue: height
                 });
             },
             getSelectedItemIds: function getSelectedItemIds() {
@@ -94134,18 +94024,22 @@ var SDK = /*#__PURE__*/ function() {
     _proto.initPlayer = function initPlayer(mode) {
         var _this = this;
         var playerContainer = document.createElement('div');
-        var _ref = mode === 'editor' ? [
-            this._container.clientWidth,
-            this._container.clientHeight
-        ] : [
+        var _ref = mode === 'template' ? [
             this._container.offsetWidth,
             this._container.offsetHeight
+        ] : [
+            document.documentElement.clientWidth,
+            document.documentElement.clientHeight
         ], width = _ref[0], height = _ref[1];
         this._playerContainer = playerContainer;
         this._playerContainer.id = 'player-container';
         this._playerContainer.style.position = 'absolute';
         this._playerContainer.style.width = "" + width + "px";
         this._playerContainer.style.height = "" + height + "px";
+        if (mode === 'editor') {
+            this._playerContainer.style.left = '0px';
+            this._playerContainer.style.top = '0px';
+        }
         this._container.appendChild(playerContainer);
         this.player = new EFFECTS.Player({
             container: this._playerContainer,
@@ -94204,6 +94098,7 @@ var SDK = /*#__PURE__*/ function() {
             _this._gestureHandler.dispose();
             setTimeout(function() {
                 return _async_to_generator(function() {
+                    var _this_pageData, _this_pageData1, itemExtension;
                     return _ts_generator(this, function(_state) {
                         switch(_state.label){
                             case 0:
@@ -94211,12 +94106,22 @@ var SDK = /*#__PURE__*/ function() {
                                 this._pageDataUtils = new PageDataUtils(this.player, this._playerContainer, this._eventEmitter, this);
                                 this._gestureHandler = new GestureHandler(this._container);
                                 this.syncCanvasLayerOrder();
+                                itemExtension = {};
+                                (_this_pageData = this.pageData) == null ? void 0 : _this_pageData.items.forEach(function(item) {
+                                    itemExtension[item.id] = item.getAllExtension();
+                                });
                                 return [
                                     4,
                                     this.runByPageData(this.pageData)
                                 ];
                             case 1:
                                 _state.sent();
+                                (_this_pageData1 = this.pageData) == null ? void 0 : _this_pageData1.items.forEach(function(item) {
+                                    var extension = itemExtension[item.id];
+                                    if (extension) {
+                                        item.setExtensions(extension);
+                                    }
+                                });
                                 this._eventEmitter.emit('viewRebuildFinish');
                                 return [
                                     2
@@ -96298,38 +96203,6 @@ var SDK = /*#__PURE__*/ function() {
         return true;
     };
     /**
-   * @description 获取指定 HTML 卡片当前 iframe 的 window。
-   * @description 仅 inline/document 或自行渲染 iframe 的 DOM 内容会返回 window。
-   * @param id 卡片元素 ID
-   * @returns HTML iframe window
-   */ _proto.getHtmlCardWindow = function getHtmlCardWindow(id) {
-        var _this__htmlOverlayManager;
-        return (_this__htmlOverlayManager = this._htmlOverlayManager) == null ? void 0 : _this__htmlOverlayManager.getHtmlCardWindow(id);
-    };
-    /**
-   * @description 向指定 HTML 卡片发送增量 patch。
-   * @description 当卡片内容配置了 CardHTMLPatchHandler 时，可用于局部更新 HTML，而不必整卡 refresh。
-   * @param id 卡片元素 ID
-   * @param patch patch 负载，由卡片内容自己的 patch handler 解释
-   * @returns 是否被 patch handler 处理
-   */ _proto.patchCardHTML = function patchCardHTML(id, patch) {
-        var _ref;
-        var _this__htmlOverlayManager;
-        return (_ref = (_this__htmlOverlayManager = this._htmlOverlayManager) == null ? void 0 : _this__htmlOverlayManager.patchCardHTML(id, patch)) != null ? _ref : false;
-    };
-    /**
-   * @description 向指定 HTML 卡片 iframe 派发事件。
-   * @description 通过 postMessage 投递事件，跨源/同源行为一致，消息 source 为 vvfx-card-html-event。
-   * @param id 卡片元素 ID
-   * @param type 事件名称
-   * @param detail 事件 detail
-   * @returns 是否成功派发或投递
-   */ _proto.dispatchHtmlCardEvent = function dispatchHtmlCardEvent(id, type, detail) {
-        var _ref;
-        var _this__htmlOverlayManager;
-        return (_ref = (_this__htmlOverlayManager = this._htmlOverlayManager) == null ? void 0 : _this__htmlOverlayManager.dispatchHtmlCardEvent(id, type, detail)) != null ? _ref : false;
-    };
-    /**
    * @description 创建卡片元素
    * @description 底层以透明 SpriteItem 形式渲染，支持 cardType 属性
    * @param createInfo 卡片创建信息