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

package/dist/{src/config.d.ts → config.d.ts}

@@ -143,6 +143,14 @@ export type CardTypeConfig = {
      * @description 卡片类型对应的运行时 HTML 渲染配置；函数不会进入序列化数据，恢复时由 cardType 动态解析。
      */
     html?: CardTypeHTMLResolver;
+    /**
+     * @description 是否根据 HTML 挂载内容的自然高度自动更新卡片高度
+     */
+    autoHeight?: boolean;
+    /**
+     * @description HTML 内容是否跟随卡片 scale 缩放，关闭后 HTML 按最终显示尺寸重新布局
+     */
+    autoScale?: boolean;
 };
 /**
  * @description 卡片元素参数配置

package/dist/{src/html-overlay → html-overlay}/manager.d.ts

@@ -1,5 +1,6 @@
 import type { Box2 } from '../math';
 import { type SnapdomOptions } from '@zumer/snapdom';
+import type { CardTypeConfig } from '../config';
 import type { EventEmitter } from '../shared';
 import type { SDKEvents } from '../sdk';
 import { type SDKItem } from '../sdk-item';
@@ -26,6 +27,7 @@ type HTMLOverlayManagerOptions = {
     viewportFit: (box: Box2) => void;
     setCardItemHeight: (id: string, height: number) => void;
     resolveCardHTML: (item: SDKItem) => CardHTML | undefined;
+    resolveCardTypeConfig: (item: SDKItem) => CardTypeConfig | undefined;
 };
 export declare class HTMLOverlayManager {
     private options;
@@ -35,6 +37,7 @@ export declare class HTMLOverlayManager {
     attach(): void;
     dispose(): void;
     scheduleRender(): void;
+    invalidateCardHTML(id: string): void;
     rasterizeCard(id: string, options: CardRasterizeOptions): Promise<string | undefined>;
     private initEvents;
     private initDOMEvents;
@@ -78,5 +81,7 @@ export declare class HTMLOverlayManager {
     private applyAutoHeight;
     private getAutoHeightItemHeight;
     private isAutoHeightMessage;
+    private isAutoHeightEnabled;
+    private isAutoScaleEnabled;
 }
 export {};

package/dist/index.js

@@ -3,7 +3,7 @@
  * Description: TODO
  * Author: Ant Group CO., Ltd.
  * Contributors: 赤芍,何即,不择,意绮
- * Version: v0.2.2-beta.2
+ * Version: v0.2.2-beta.4
  */
 
 import * as EFFECTS from '@galacean/effects';
@@ -25162,7 +25162,7 @@ var ItemOrderAction = /*#__PURE__*/ function(ItemOrderAction) {
     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;
+        var _options_property, _options_property1, _options_property2, _options_property3, _options_property4, _options_property5;
         _this = BaseItem.call(this, options) || this, /**
    * @description 元素类型
    */ _this.type = SDKItemType.CARD;
@@ -25183,9 +25183,7 @@ var ItemOrderAction = /*#__PURE__*/ function(ItemOrderAction) {
                 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
+            cardType: (_ref5 = (_options_property5 = options.property) == null ? void 0 : _options_property5.cardType) != null ? _ref5 : 'unknown'
         };
         return _this;
     }
@@ -63165,7 +63163,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, autoScale = _cardInfo_property.autoScale, 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, 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;
@@ -63214,9 +63212,7 @@ var PageDataUtils = /*#__PURE__*/ function() {
                 width: width,
                 height: height,
                 scale: [].concat(scale),
-                cardType: cardType,
-                autoHeight: autoHeight,
-                autoScale: autoScale
+                cardType: cardType
             },
             extension: extension
         });
@@ -83204,10 +83200,10 @@ var BaseConfig = {
         },
         cardConfig: {
             backgroundColor: [
-                0.6,
-                0.6,
-                0.6,
-                0.12
+                1,
+                1,
+                1,
+                0
             ],
             cardTypes: []
         }
@@ -92037,6 +92033,9 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
             _this.render();
         });
     };
+    _proto.invalidateCardHTML = function invalidateCardHTML(id) {
+        this.cleanupOverlayContent(id);
+    };
     _proto.rasterizeCard = function rasterizeCard(id, options) {
         return _async_to_generator(function() {
             var contentOverlay, capture, _ref, _options_pixelRatio, image, error;
@@ -92189,12 +92188,12 @@ 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);
-            if (html && _this.state.contents.get(item.id) !== html) {
+            if (!_this.state.contents.has(item.id)) {
                 _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, item.property.autoScale !== false);
+            var boxStyle = getCardOverlayBoxStyle(itemBox, item.property.width, item.property.height, offsetX, offsetY, _this.isAutoScaleEnabled(item));
             overlay.style.left = boxStyle.left;
             overlay.style.top = boxStyle.top;
             overlay.style.width = boxStyle.width;
@@ -92202,7 +92201,7 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
             overlay.style.transform = boxStyle.transform;
             overlay.style.transformOrigin = '0 0';
             _this.syncContentScale(item.id, boxStyle.contentWidth, boxStyle.contentHeight);
-            _this.syncAutoHeight(item.id, item.property.autoHeight === true);
+            _this.syncAutoHeight(item.id, _this.isAutoHeightEnabled(item));
             _this.syncContentInteraction(item.id);
         });
         elements.forEach(function(_overlay, id) {
@@ -92566,7 +92565,7 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         });
         var contentCleanup = this.renderOverlayContent(shell.contentContainer, html.content, {
             id: id,
-            autoHeight: isCardItem(item) && item.property.autoHeight === true
+            autoHeight: this.isAutoHeightEnabled(item)
         });
         this.state.cleanups.set(id, function() {
             contentCleanup == null ? void 0 : contentCleanup();
@@ -92770,7 +92769,7 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         var item = this.options.getItems().find(function(candidate) {
             return candidate.id === id;
         });
-        if (!isCardItem(item) || item.property.autoHeight !== true) {
+        if (!this.isAutoHeightEnabled(item)) {
             this.cleanupAutoHeight(id);
             return;
         }
@@ -92852,7 +92851,7 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         var item = this.options.getItems().find(function(candidate) {
             return candidate.id === id;
         });
-        if (!isCardItem(item) || item.property.autoHeight !== true) {
+        if (!isCardItem(item) || !this.isAutoHeightEnabled(item)) {
             return;
         }
         if (!Number.isFinite(height) || height <= 0) {
@@ -92865,7 +92864,7 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         this.options.setCardItemHeight(id, nextHeight);
     };
     _proto.getAutoHeightItemHeight = function getAutoHeightItemHeight(item, contentHeight) {
-        if (!isCardItem(item) || item.property.autoScale !== false) {
+        if (!isCardItem(item) || this.isAutoScaleEnabled(item)) {
             return contentHeight;
         }
         var scaleOverlay = this.state.contentScaleElements.get(item.id);
@@ -92875,6 +92874,17 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         }
         return contentHeight / displayedHeight * item.property.height;
     };
+    _proto.isAutoHeightEnabled = function isAutoHeightEnabled(item) {
+        var _this_options_resolveCardTypeConfig;
+        return isCardItem(item) && ((_this_options_resolveCardTypeConfig = this.options.resolveCardTypeConfig(item)) == null ? void 0 : _this_options_resolveCardTypeConfig.autoHeight) === true;
+    };
+    _proto.isAutoScaleEnabled = function isAutoScaleEnabled(item) {
+        var _this_options_resolveCardTypeConfig;
+        if (!isCardItem(item)) {
+            return true;
+        }
+        return ((_this_options_resolveCardTypeConfig = this.options.resolveCardTypeConfig(item)) == null ? void 0 : _this_options_resolveCardTypeConfig.autoScale) !== false;
+    };
     return HTMLOverlayManager;
 }();
 function waitForCardCaptureReady(root) {
@@ -93481,6 +93491,9 @@ var SDK = /*#__PURE__*/ function() {
             },
             resolveCardHTML: function resolveCardHTML(item) {
                 return isCardItem(item) ? _this.resolveCardHTML(item) : undefined;
+            },
+            resolveCardTypeConfig: function resolveCardTypeConfig(item) {
+                return isCardItem(item) ? _this.resolveCardTypeConfig(item) : undefined;
             }
         });
         this._htmlOverlayManager.attach();
@@ -95624,10 +95637,37 @@ var SDK = /*#__PURE__*/ function() {
    * @returns HTML 渲染配置
    */ _proto.resolveCardHTML = function resolveCardHTML(item) {
         var _cardTypeConfig_html;
-        var cardTypeConfig = SDK.config.itemConfig.cardConfig.cardTypes.find(function(t) {
+        var cardTypeConfig = this.resolveCardTypeConfig(item);
+        return cardTypeConfig == null ? void 0 : (_cardTypeConfig_html = cardTypeConfig.html) == null ? void 0 : _cardTypeConfig_html.call(cardTypeConfig, item);
+    };
+    /**
+   * @description 按 cardType 从注册表解析卡片类型配置。
+   * @param item 卡片元素
+   * @returns 卡片类型配置
+   */ _proto.resolveCardTypeConfig = function resolveCardTypeConfig(item) {
+        return 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 重新解析并挂载指定卡片的 HTML 内容。
+   * @description 当 inline/document 内容依赖 extension 或外部状态变化时，可调用此方法刷新 DOM。
+   * @param id 卡片元素 ID
+   * @returns 是否成功触发刷新
+   */ _proto.refreshCardHTML = function refreshCardHTML(id) {
+        var _this__htmlOverlayManager, _this__htmlOverlayManager1;
+        var item = this.getSDKItem(id);
+        if (!isCardItem(item)) {
+            console.warn('CardItem "' + id + '" not found.');
+            return false;
+        }
+        if (!this.resolveCardHTML(item)) {
+            console.warn('CardItem "' + id + '" has no registered HTML renderer.');
+            return false;
+        }
+        (_this__htmlOverlayManager = this._htmlOverlayManager) == null ? void 0 : _this__htmlOverlayManager.invalidateCardHTML(id);
+        (_this__htmlOverlayManager1 = this._htmlOverlayManager) == null ? void 0 : _this__htmlOverlayManager1.scheduleRender();
+        return true;
     };
     /**
    * @description 创建卡片元素