@vvfx/sdk 0.2.1 → 0.2.2-beta.2

package/dist/src/card-type-registry.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/config.d.ts

@@ -1,6 +1,9 @@
 import { ExportMediaInitOptions } from './exporter';
 import { GlobalLayoutMode } from './utils';
+import type { CardHTML } from './types';
+import type { CardItem } from './sdk-item/card-item';
 export type SDKMode = 'editor' | 'template';
+export type CardTypeHTMLResolver = (item: CardItem) => CardHTML | undefined;
 /**
  * @description SDK功能配置
  */
@@ -136,6 +139,10 @@ export type CardTypeConfig = {
      * @description TransformGizmo 左上角展示的 icon URL
      */
     iconUrl: string;
+    /**
+     * @description 卡片类型对应的运行时 HTML 渲染配置；函数不会进入序列化数据，恢复时由 cardType 动态解析。
+     */
+    html?: CardTypeHTMLResolver;
 };
 /**
  * @description 卡片元素参数配置
@@ -146,7 +153,7 @@ export type CardConfig = {
      */
     backgroundColor: [number, number, number, number];
     /**
-     * @description 注册的卡片类型列表，支持动态配置
+     * @description 注册的卡片类型列表，支持通过 registerCardType/registerCardTypes 动态配置
      * 每个条目包含 type 标识、显示名称和图标 URL
      */
     cardTypes: CardTypeConfig[];

package/dist/src/html-overlay/auto-height-runtime.d.ts

@@ -4,10 +4,15 @@ export type CardHTMLAutoHeightMessage = {
     id: string;
     height: number;
 };
+export type CardHTMLAutoHeightRequest = {
+    source: 'vvfx-card-html-auto-height-request';
+    id: string;
+};
 export type CardHTMLAutoHeightOptions = {
     autoHeightId?: string;
     onAutoHeight?: (height: number) => void;
 };
 export declare function createAutoHeightMessageListener(iframe: HTMLIFrameElement, options?: CardHTMLAutoHeightOptions): CardHTMLRenderCleanup;
 export declare function isCardHTMLAutoHeightMessage(data: unknown, id: string): data is CardHTMLAutoHeightMessage;
+export declare function requestCardHTMLAutoHeight(iframe: HTMLIFrameElement, id: string): void;
 export declare function withCardHTMLAutoHeightBridge(html: string, id?: string): string;

package/dist/src/html-overlay/auto-height-runtime.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/html-overlay/manager.d.ts

@@ -3,6 +3,7 @@ import { type SnapdomOptions } from '@zumer/snapdom';
 import type { EventEmitter } from '../shared';
 import type { SDKEvents } from '../sdk';
 import { type SDKItem } from '../sdk-item';
+import type { CardHTML } from '../types';
 type CardRasterizeOptions = {
     width: number;
     height: number;
@@ -24,6 +25,7 @@ type HTMLOverlayManagerOptions = {
     }) => void;
     viewportFit: (box: Box2) => void;
     setCardItemHeight: (id: string, height: number) => void;
+    resolveCardHTML: (item: SDKItem) => CardHTML | undefined;
 };
 export declare class HTMLOverlayManager {
     private options;
@@ -52,6 +54,7 @@ export declare class HTMLOverlayManager {
     private getOrCreateContentOverlay;
     private createContentScaleOverlay;
     private syncContentScale;
+    private requestAutoHeightFromIframes;
     private syncContentInteraction;
     private syncShellInteraction;
     private enterEditing;
@@ -64,6 +67,7 @@ export declare class HTMLOverlayManager {
     private cleanupOverlayContent;
     private removeOverlay;
     private syncAutoHeight;
+    private ensureAutoHeightMode;
     private createAutoHeightObserver;
     private scheduleAutoHeightMeasure;
     private measureAutoHeight;
@@ -72,6 +76,7 @@ export declare class HTMLOverlayManager {
     private getChildrenNaturalHeight;
     private cleanupAutoHeight;
     private applyAutoHeight;
+    private getAutoHeightItemHeight;
     private isAutoHeightMessage;
 }
 export {};

package/dist/src/html-overlay/manager.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/html-overlay/overlay-transform.d.ts

@@ -4,9 +4,11 @@ export type CardOverlayBoxStyle = {
     top: string;
     width: string;
     height: string;
+    contentWidth: number;
+    contentHeight: number;
     transform: string;
 };
-export declare function getCardOverlayBoxStyle(box: Box2, width: number, height: number, offsetX?: number, offsetY?: number): CardOverlayBoxStyle;
+export declare function getCardOverlayBoxStyle(box: Box2, width: number, height: number, offsetX?: number, offsetY?: number, autoScale?: boolean): CardOverlayBoxStyle;
 export declare function isPointInCardOverlayBox(box: Box2, point: {
     x: number;
     y: number;

package/dist/src/html-overlay/overlay-transform.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/sdk-item/card-item.d.ts

@@ -1,4 +1,4 @@
-import type { CardItemProperty, CardCreateInfo, CardHTML } from '../types';
+import type { CardItemProperty, CardCreateInfo } from '../types';
 import { SDKItemType, type CardItemOptions } from './types';
 import { BaseItem } from './base-item';
 /**
@@ -21,11 +21,6 @@ export declare class CardItem extends BaseItem {
      */
     get cardType(): string;
     set cardType(value: string);
-    /**
-     * @description HTML 覆盖层配置
-     */
-    get html(): CardHTML | undefined;
-    set html(value: CardHTML | undefined);
     /**
      * @description 位置
      */

package/dist/src/sdk.d.ts

@@ -1,5 +1,5 @@
 import { Player, spec } from './shared';
-import type { SDKInputParam, PageConfig, PageData, SetItemPropertyParam, ViewProperty, ViewParam, ExportParam, SDKBackgroundType, SpriteCreateInfo, GroupCreateInfo, ItemCreateInfo, TextCreateInfo, ViewportFitShiftParam, SceneCreaetInfo, VideoCreateInfo, GeneratorCreateInfo, GeneratorResource, VideoGeneratorResource, SpriteGeneratorResource, EffectsCreateInfo, FrameCreateInfo, CardCreateInfo, CardItemTransformInfo, PageAutoLayoutParam } from './types';
+import type { SDKInputParam, PageConfig, PageData, SetItemPropertyParam, ViewProperty, ViewParam, ExportParam, SDKBackgroundType, SpriteCreateInfo, GroupCreateInfo, ItemCreateInfo, TextCreateInfo, ViewportFitShiftParam, SceneCreaetInfo, VideoCreateInfo, GeneratorCreateInfo, GeneratorResource, VideoGeneratorResource, SpriteGeneratorResource, EffectsCreateInfo, FrameCreateInfo, CardCreateInfo, CardHTML, CardItemTransformInfo, PageAutoLayoutParam } from './types';
 import { SDKItemType } from './sdk-item/types';
 import type { CardTypeConfig } from './config';
 import { ItemOrderAction } from './types';
@@ -10,7 +10,7 @@ import { Box2, Vector2 } from './math';
 import { GizmoOperation, Operation, UndoRedo } from './service/UndoRedo';
 import { GestureHandlerInteractType, GizmoType, ItemCreateType, SpriteTextInitParam } from './gesture-handler/gizmo';
 import { AlignType, DistributeType } from './utils/types';
-import { SDKItem } from './sdk-item';
+import { SDKItem, type CardItem } from './sdk-item';
 import type { LoadingGizmoItemOptions, LoadingGizmoTip } from './gesture-handler/gizmo/loading-gizmo';
 import type { MaskUndoRedoData } from './gesture-handler/gizmo/mask-gizmo';
 import type { PictureCutUndoRedoData } from './gesture-handler/gizmo/picture-cut-gizmo';
@@ -507,6 +507,12 @@ export declare class SDK {
      * @returns 是否已注册
      */
     isCardTypeRegistered(type: string): boolean;
+    /**
+     * @description 按 cardType 从注册表解析卡片的 HTML 渲染配置。
+     * @param item 卡片元素
+     * @returns HTML 渲染配置
+     */
+    resolveCardHTML(item: CardItem): CardHTML | undefined;
     /**
      * @description 创建卡片元素
      * @description 底层以透明 SpriteItem 形式渲染，支持 cardType 属性

package/dist/src/types.d.ts

@@ -222,7 +222,7 @@ export type CardHTML = {
  */
 export type CardItemProperty = BaseItemProperty & {
     /**
-     * @description 卡片类型（动态配置，需在 SDK.config.itemConfig.cardConfig.cardTypes 中注册）
+     * @description 卡片类型（动态配置，需通过 SDK.registerCardType/registerCardTypes 注册）
      */
     cardType: string;
     /**
@@ -230,9 +230,9 @@ export type CardItemProperty = BaseItemProperty & {
      */
     autoHeight?: boolean;
     /**
-     * @description HTML 覆盖层配置；存在该字段时由 DOM overlay 渲染
+     * @description HTML 内容是否跟随卡片 scale 缩放，关闭后 HTML 按最终显示尺寸重新布局
      */
-    html?: CardHTML;
+    autoScale?: boolean;
 };
 /**
  * @description Frame 画板元素布局模式
@@ -927,7 +927,7 @@ export type CardItemTransformInfo = {
     size: [number, number];
 };
 /**
- * @description 卡片类型（动态配置，需在 SDK.config.itemConfig.cardConfig.cardTypes 中注册）
+ * @description 卡片类型（动态配置，需通过 SDK.registerCardType/registerCardTypes 注册）
  */
 export type CardType = string;
 /**
@@ -974,6 +974,10 @@ export type CardCreateInfo = {
          * @description 是否根据 HTML 挂载内容的自然高度自动更新卡片高度
          */
         autoHeight?: boolean;
+        /**
+         * @description HTML 内容是否跟随卡片 scale 缩放，关闭后 HTML 按最终显示尺寸重新布局
+         */
+        autoScale?: boolean;
         /**
          * @description 卡片元素位置
          */
@@ -986,10 +990,6 @@ export type CardCreateInfo = {
          * @description 卡片元素缩放
          */
         scale?: [number, number];
-        /**
-         * @description HTML 覆盖层配置；存在该字段时由 DOM overlay 渲染
-         */
-        html?: CardHTML;
     };
 };
 /**

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vvfx/sdk",
   "description": "TODO",
-  "version": "0.2.1",
+  "version": "0.2.2-beta.2",
   "main": "./dist/index.mjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -15,15 +15,6 @@
       "require": "./dist/index.mjs"
     }
   },
-  "scripts": {
-    "prebuild": "pnpm clean",
-    "build": "pnpm build:declaration && pnpm build:module",
-    "build:module": "rollup -c --bundleConfigAsCjs",
-    "build:declaration": "tsc -d --emitDeclarationOnly",
-    "clean": "rimraf dist *.tsbuildinfo",
-    "test": "vitest run",
-    "prepublishOnly": "pnpm build"
-  },
   "dependencies": {
     "@ffmpeg/ffmpeg": "0.12.15",
     "@ffmpeg/util": "0.12.2",
@@ -72,5 +63,13 @@
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org"
+  },
+  "scripts": {
+    "prebuild": "pnpm clean",
+    "build": "pnpm build:declaration && pnpm build:module",
+    "build:module": "rollup -c --bundleConfigAsCjs",
+    "build:declaration": "tsc -d --emitDeclarationOnly",
+    "clean": "rimraf dist *.tsbuildinfo",
+    "test": "vitest run"
   }
-}
+}