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

package/dist/index.mjs

@@ -3,7 +3,7 @@
  * Description: TODO
  * Author: Ant Group CO., Ltd.
  * Contributors: 赤芍,何即,不择,意绮
- * Version: v0.2.2-beta.12
+ * Version: v0.2.2-beta.13
  */
 
 'use strict';
@@ -91886,6 +91886,30 @@ 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;
@@ -91958,7 +91982,7 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
                 return;
             }
             if (_this.contentInteractionFrame !== undefined) {
-                cancelAnimationFrame(_this.contentInteractionFrame);
+                cancelHTMLOverlayFrame(_this.contentInteractionFrame);
                 _this.contentInteractionFrame = undefined;
             }
             _this.pendingContentInteractionEvent = undefined;
@@ -92019,11 +92043,11 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
     _proto.dispose = function dispose() {
         var _this_state_layer;
         if (this.state.updateFrame !== undefined) {
-            cancelAnimationFrame(this.state.updateFrame);
+            cancelHTMLOverlayFrame(this.state.updateFrame);
             this.state.updateFrame = undefined;
         }
         if (this.contentInteractionFrame !== undefined) {
-            cancelAnimationFrame(this.contentInteractionFrame);
+            cancelHTMLOverlayFrame(this.contentInteractionFrame);
             this.contentInteractionFrame = undefined;
         }
         this.pendingContentInteractionEvent = undefined;
@@ -92053,7 +92077,7 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         });
         this.state.autoHeightCleanups.clear();
         this.state.autoHeightFrames.forEach(function(frame) {
-            cancelAnimationFrame(frame);
+            cancelHTMLOverlayFrame(frame);
         });
         this.state.autoHeightFrames.clear();
         this.eventCleanups.forEach(function(cleanup) {
@@ -92072,9 +92096,9 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
     _proto.scheduleRender = function scheduleRender() {
         var _this = this;
         if (this.state.updateFrame !== undefined) {
-            cancelAnimationFrame(this.state.updateFrame);
+            cancelHTMLOverlayFrame(this.state.updateFrame);
         }
-        this.state.updateFrame = requestAnimationFrame(function() {
+        this.state.updateFrame = requestHTMLOverlayFrame(function() {
             _this.state.updateFrame = undefined;
             _this.render();
         });
@@ -92083,6 +92107,40 @@ 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;
@@ -92090,7 +92148,7 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
                 switch(_state.label){
                     case 0:
                         if (this.state.updateFrame !== undefined) {
-                            cancelAnimationFrame(this.state.updateFrame);
+                            cancelHTMLOverlayFrame(this.state.updateFrame);
                             this.state.updateFrame = undefined;
                         }
                         this.render();
@@ -92257,13 +92315,10 @@ 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;
@@ -92278,8 +92333,12 @@ 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);
         });
@@ -92519,14 +92578,20 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         if (this.contentInteractionFrame !== undefined) {
             return;
         }
-        this.contentInteractionFrame = requestAnimationFrame(function() {
-            _this.contentInteractionFrame = undefined;
-            var pendingEvent = _this.pendingContentInteractionEvent;
-            _this.pendingContentInteractionEvent = undefined;
-            if (pendingEvent) {
-                _this.syncActiveContentInteraction(pendingEvent);
-            }
-        });
+        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);
+        }
     };
     _proto.setActiveContentInteraction = function setActiveContentInteraction(zone) {
         var _this = this;
@@ -92950,6 +93015,20 @@ 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;
@@ -93009,6 +93088,10 @@ 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){
@@ -93201,7 +93284,7 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         if (this.state.autoHeightFrames.has(id)) {
             return;
         }
-        var frame = requestAnimationFrame(function() {
+        var frame = requestHTMLOverlayFrame(function() {
             _this.state.autoHeightFrames.delete(id);
             _this.measureAutoHeight(id);
         });
@@ -93285,7 +93368,7 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         }
         var frame = this.state.autoHeightFrames.get(id);
         if (frame !== undefined) {
-            cancelAnimationFrame(frame);
+            cancelHTMLOverlayFrame(frame);
             this.state.autoHeightFrames.delete(id);
         }
     };
@@ -93303,7 +93386,18 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         if (Math.abs(nextHeight - item.property.height) <= AUTO_HEIGHT_EPSILON) {
             return;
         }
-        this.options.setCardItemHeight(id, nextHeight);
+        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';
     };
     _proto.getAutoHeightItemHeight = function getAutoHeightItemHeight(item, contentHeight) {
         if (!isCardItem(item) || this.isAutoScaleEnabled(item)) {
@@ -93389,7 +93483,7 @@ function formatCssNumber(value) {
 }
 function nextAnimationFrame() {
     return new Promise(function(resolve) {
-        requestAnimationFrame(function() {
+        requestHTMLOverlayFrame(function() {
             resolve();
         });
     });
@@ -93958,12 +94052,29 @@ var SDK = /*#__PURE__*/ function() {
                     bottom: HTML_CARD_EDITING_VIEWPORT_PADDING
                 }, box);
             },
-            setCardItemHeight: function setCardItemHeight(id, height) {
+            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;
                 void _this.setItemProperty({
                     itemId: id,
                     type: SDKItemType.CARD,
-                    propertyName: 'height',
-                    propertyValue: height
+                    property: {
+                        height: height,
+                        position: [
+                            x,
+                            y + deltaY
+                        ]
+                    }
                 });
             },
             getSelectedItemIds: function getSelectedItemIds() {
@@ -96187,6 +96298,38 @@ 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 卡片创建信息