@vvfx/sdk 0.2.2-beta.11 → 0.2.2-beta.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/config.d.ts +5 -0
- package/dist/html-overlay/manager.d.ts +12 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.js +174 -41
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +174 -41
- package/dist/index.mjs.map +1 -1
- package/dist/sdk.d.ts +24 -0
- package/dist/types.d.ts +48 -0
- package/package.json +1 -1
package/dist/config.d.ts
CHANGED
|
@@ -4,6 +4,7 @@ import type { CardHTML } from './types';
|
|
|
4
4
|
import type { CardItem } from './sdk-item/card-item';
|
|
5
5
|
export type SDKMode = 'editor' | 'template';
|
|
6
6
|
export type CardTypeHTMLResolver = (item: CardItem) => CardHTML | undefined;
|
|
7
|
+
export type CardAutoHeightAnchor = 'top' | 'center';
|
|
7
8
|
/**
|
|
8
9
|
* @description SDK功能配置
|
|
9
10
|
*/
|
|
@@ -147,6 +148,10 @@ export type CardTypeConfig = {
|
|
|
147
148
|
* @description 是否根据 HTML 挂载内容的自然高度自动更新卡片高度
|
|
148
149
|
*/
|
|
149
150
|
autoHeight?: boolean;
|
|
151
|
+
/**
|
|
152
|
+
* @description autoHeight 更新卡片高度时的锚点。top 保持上边缘不动,center 保持中心点不动。未配置时默认 top。
|
|
153
|
+
*/
|
|
154
|
+
autoHeightAnchor?: CardAutoHeightAnchor;
|
|
150
155
|
/**
|
|
151
156
|
* @description HTML 内容是否跟随卡片 scale 缩放,关闭后 HTML 按最终显示尺寸重新布局
|
|
152
157
|
*/
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { Box2 } from '../math';
|
|
2
2
|
import { type SnapdomOptions } from '@zumer/snapdom';
|
|
3
|
-
import type { CardTypeConfig } from '../config';
|
|
3
|
+
import type { CardAutoHeightAnchor, CardTypeConfig } from '../config';
|
|
4
4
|
import type { EventEmitter } from '../shared';
|
|
5
5
|
import type { SDKEvents } from '../sdk';
|
|
6
6
|
import { type SDKItem } from '../sdk-item';
|
|
@@ -11,6 +11,10 @@ type CardRasterizeOptions = {
|
|
|
11
11
|
pixelRatio?: number;
|
|
12
12
|
snapdomOptions?: SnapdomOptions;
|
|
13
13
|
};
|
|
14
|
+
type SetCardItemHeightOptions = {
|
|
15
|
+
anchor: CardAutoHeightAnchor;
|
|
16
|
+
previousHeight: number;
|
|
17
|
+
};
|
|
14
18
|
type HTMLOverlayManagerOptions = {
|
|
15
19
|
container: HTMLElement;
|
|
16
20
|
emitter: EventEmitter<SDKEvents>;
|
|
@@ -25,7 +29,7 @@ type HTMLOverlayManagerOptions = {
|
|
|
25
29
|
translation: [number, number];
|
|
26
30
|
}) => void;
|
|
27
31
|
viewportFit: (box: Box2) => void;
|
|
28
|
-
setCardItemHeight: (id: string, height: number) => void;
|
|
32
|
+
setCardItemHeight: (id: string, height: number, options: SetCardItemHeightOptions) => void;
|
|
29
33
|
getSelectedItemIds: () => string[];
|
|
30
34
|
getPreSelectedItemId: () => string | undefined;
|
|
31
35
|
getSelectionEdgeStyle: () => {
|
|
@@ -55,6 +59,9 @@ export declare class HTMLOverlayManager {
|
|
|
55
59
|
dispose(): void;
|
|
56
60
|
scheduleRender(): void;
|
|
57
61
|
invalidateCardHTML(id: string): void;
|
|
62
|
+
getHtmlCardWindow(id: string): Window | null | undefined;
|
|
63
|
+
patchCardHTML(id: string, patch: unknown): boolean;
|
|
64
|
+
dispatchHtmlCardEvent(id: string, type: string, detail?: unknown): boolean;
|
|
58
65
|
rasterizeCard(id: string, options: CardRasterizeOptions): Promise<string | undefined>;
|
|
59
66
|
private initEvents;
|
|
60
67
|
private initDOMEvents;
|
|
@@ -106,8 +113,10 @@ export declare class HTMLOverlayManager {
|
|
|
106
113
|
private getEditingFitZoom;
|
|
107
114
|
private isEventInsideOverlay;
|
|
108
115
|
private renderOverlayHTML;
|
|
116
|
+
private createPatchContext;
|
|
109
117
|
private observeContentInteractionZones;
|
|
110
118
|
private applyHTMLRootConfig;
|
|
119
|
+
private makeSelectionOverlayTransparent;
|
|
111
120
|
private renderOverlayContent;
|
|
112
121
|
private chainCleanups;
|
|
113
122
|
private cleanupOverlayContent;
|
|
@@ -122,6 +131,7 @@ export declare class HTMLOverlayManager {
|
|
|
122
131
|
private getChildrenNaturalHeight;
|
|
123
132
|
private cleanupAutoHeight;
|
|
124
133
|
private applyAutoHeight;
|
|
134
|
+
private getAutoHeightAnchor;
|
|
125
135
|
private getAutoHeightItemHeight;
|
|
126
136
|
private isAutoHeightMessage;
|
|
127
137
|
private isAutoHeightEnabled;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
export type { SDKOptions, SDKInputParam, PageData, PageProperty, ViewProperty, ActiveData, ViewParam, BaseItemProperty, SpriteItemProperty, TextItemProperty, VideoItemProperty, GeneratorItemProperty, FrameItemProperty, FrameLayoutMode, SpriteCreateInfo, TextCreateInfo, GroupCreateInfo, VideoCreateInfo, GeneratorCreateInfo, EffectsCreateInfo, FrameCreateInfo, CardCreateInfo, CardItemProperty, CardItemTransformInfo, CardHTML, CardHTMLContent, CardHTMLInlineContent, CardHTMLDOMRendererContent, CardHTMLDocumentContent, CardHTMLDocumentMessage, CardHTMLShellContent, CardHTMLShellRenderer, CardHTMLShellRendererContext, CardHTMLShellRendererResult, CardHTMLDOMRenderer, CardHTMLContentCleanup, CardHTMLRenderCleanup, CardHTMLRootConfig, CardHTMLRootStyle, ItemCreateInfo, } from './types';
|
|
2
|
-
export type { SDKConfig, SDKMode, CardTypeConfig, CardConfig, CardTypeHTMLResolver, } from './config';
|
|
1
|
+
export type { SDKOptions, SDKInputParam, PageData, PageProperty, ViewProperty, ActiveData, ViewParam, BaseItemProperty, SpriteItemProperty, TextItemProperty, VideoItemProperty, GeneratorItemProperty, FrameItemProperty, FrameLayoutMode, SpriteCreateInfo, TextCreateInfo, GroupCreateInfo, VideoCreateInfo, GeneratorCreateInfo, EffectsCreateInfo, FrameCreateInfo, CardCreateInfo, CardItemProperty, CardItemTransformInfo, CardHTML, CardHTMLContent, CardHTMLInlineContent, CardHTMLDOMRendererContent, CardHTMLDocumentContent, CardHTMLDocumentMessage, CardHTMLShellContent, CardHTMLShellRenderer, CardHTMLShellRendererContext, CardHTMLShellRendererResult, CardHTMLDOMRenderer, CardHTMLContentCleanup, CardHTMLRenderCleanup, CardHTMLPatchContext, CardHTMLPatchHandler, CardHTMLWindowEventMessage, CardHTMLRootConfig, CardHTMLRootStyle, ItemCreateInfo, } from './types';
|
|
2
|
+
export type { SDKConfig, SDKMode, CardTypeConfig, CardConfig, CardAutoHeightAnchor, CardTypeHTMLResolver, } from './config';
|
|
3
3
|
export type { SDKItem } from './sdk-item';
|
|
4
4
|
export { BaseItem, SpriteItem, TextItem, VideoItem, GroupItem, GeneratorItem, EffectsItem, FrameItem, CardItem, isBaseItem, isSpriteItem, isTextItem, isVideoItem, isGroupItem, isGeneratorItem, isEffectsItem, isFrameItem, isCardItem, SDKItemType, } from './sdk-item';
|
|
5
5
|
export type { SDKItemOptions, SpriteItemOptions, TextItemOptions, VideoItemOptions, GroupItemOptions, GeneratorItemOptions, EffectsItemOptions, FrameItemOptions, CardItemOptions, } from './sdk-item';
|
package/dist/index.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
* Description: TODO
|
|
4
4
|
* Author: Ant Group CO., Ltd.
|
|
5
5
|
* Contributors: 赤芍,何即,不择,意绮
|
|
6
|
-
* Version: v0.2.2-beta.
|
|
6
|
+
* Version: v0.2.2-beta.13
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
9
|
import * as EFFECTS from '@galacean/effects';
|
|
@@ -55341,8 +55341,8 @@ var TransformGizmo = /*#__PURE__*/ function(Gizmo) {
|
|
|
55341
55341
|
}
|
|
55342
55342
|
var selectedItem = (_selectedItems_ = selectedItems[0]) != null ? _selectedItems_ : undefined;
|
|
55343
55343
|
// html卡片内容在非自动缩放的情况下,拖动的时候内容自适应,因此与智能画板一样,需要默认是自由缩放(即自由改大小)
|
|
55344
|
-
var
|
|
55345
|
-
var isShiftLockScale = selectedItem && selectedItems.length === 1 && (isFrameItem(selectedItem) ||
|
|
55344
|
+
var isSingleAutoFitContentCardItem = selectedItems.length === 1 && selectedItem && isCardItem(selectedItem) && !selectedItem.isAutoScale;
|
|
55345
|
+
var isShiftLockScale = selectedItem && selectedItems.length === 1 && (isFrameItem(selectedItem) || isSingleAutoFitContentCardItem) ? !this.isShiftDown : this.isShiftDown;
|
|
55346
55346
|
var farthestCorner = this.scaleParam.farthestCorner;
|
|
55347
55347
|
var isValidScale = (scaleCorner.x - farthestCorner.x) * (this.cursorPoint.x - farthestCorner.x) > 0 && (scaleCorner.y - farthestCorner.y) * (this.cursorPoint.y - farthestCorner.y) > 0;
|
|
55348
55348
|
if (!isValidScale && this.isLockScale && !this.isShiftDown) {
|
|
@@ -55416,7 +55416,7 @@ var TransformGizmo = /*#__PURE__*/ function(Gizmo) {
|
|
|
55416
55416
|
newWidth,
|
|
55417
55417
|
newHeight
|
|
55418
55418
|
], translation1);
|
|
55419
|
-
} else if (
|
|
55419
|
+
} else if (isSingleAutoFitContentCardItem && selectedItem && isCardItem(selectedItem)) {
|
|
55420
55420
|
var currentWidth1 = selectedItem.pixelWidth;
|
|
55421
55421
|
var currentHeight1 = selectedItem.pixelHeight;
|
|
55422
55422
|
var newWidth1 = currentWidth1 * resultScalar1.x;
|
|
@@ -55433,16 +55433,6 @@ var TransformGizmo = /*#__PURE__*/ function(Gizmo) {
|
|
|
55433
55433
|
height: newHeight1
|
|
55434
55434
|
}
|
|
55435
55435
|
});
|
|
55436
|
-
} else if (selectedItem && selectedItems.length === 1 && isCardItem(selectedItem)) {
|
|
55437
|
-
void this._pageDataUtils.setItemProperty({
|
|
55438
|
-
itemId: selectedItem.id,
|
|
55439
|
-
type: SDKItemType.CARD,
|
|
55440
|
-
property: {
|
|
55441
|
-
width: selectedItem.width * resultScalar1.x,
|
|
55442
|
-
height: selectedItem.height * resultScalar1.y
|
|
55443
|
-
}
|
|
55444
|
-
});
|
|
55445
|
-
this._pageDataUtils.moveItem(selectedItem.id, translation1);
|
|
55446
55436
|
} else {
|
|
55447
55437
|
// 普通元素的缩放逻辑
|
|
55448
55438
|
selectedItems.forEach(function(item) {
|
|
@@ -91877,6 +91867,30 @@ var EDITING_VIEWPORT_PADDING = 48;
|
|
|
91877
91867
|
var EDITING_VIEWPORT_BOX_SCALE = 1.1;
|
|
91878
91868
|
var AUTO_HEIGHT_EPSILON = 0.5;
|
|
91879
91869
|
var CARD_RASTERIZE_READY_TIMEOUT = 3000;
|
|
91870
|
+
var CARD_HTML_EVENT_MESSAGE_SOURCE = 'vvfx-card-html-event';
|
|
91871
|
+
var requestHTMLOverlayFrame = function requestHTMLOverlayFrame(callback) {
|
|
91872
|
+
if (typeof requestAnimationFrame === 'function') {
|
|
91873
|
+
try {
|
|
91874
|
+
return requestAnimationFrame(callback);
|
|
91875
|
+
} catch (unused) {
|
|
91876
|
+
// Some non-browser test runtimes install a RAF polyfill that depends on window.
|
|
91877
|
+
}
|
|
91878
|
+
}
|
|
91879
|
+
return setTimeout(function() {
|
|
91880
|
+
callback(Date.now());
|
|
91881
|
+
}, 16);
|
|
91882
|
+
};
|
|
91883
|
+
var cancelHTMLOverlayFrame = function cancelHTMLOverlayFrame(frame) {
|
|
91884
|
+
if (typeof cancelAnimationFrame === 'function') {
|
|
91885
|
+
try {
|
|
91886
|
+
cancelAnimationFrame(frame);
|
|
91887
|
+
return;
|
|
91888
|
+
} catch (unused) {
|
|
91889
|
+
// Fall back to clearTimeout for frames created by requestHTMLOverlayFrame.
|
|
91890
|
+
}
|
|
91891
|
+
}
|
|
91892
|
+
clearTimeout(frame);
|
|
91893
|
+
};
|
|
91880
91894
|
var HTMLOverlayManager = /*#__PURE__*/ function() {
|
|
91881
91895
|
function HTMLOverlayManager(options) {
|
|
91882
91896
|
var _this = this;
|
|
@@ -91949,7 +91963,7 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
|
|
|
91949
91963
|
return;
|
|
91950
91964
|
}
|
|
91951
91965
|
if (_this.contentInteractionFrame !== undefined) {
|
|
91952
|
-
|
|
91966
|
+
cancelHTMLOverlayFrame(_this.contentInteractionFrame);
|
|
91953
91967
|
_this.contentInteractionFrame = undefined;
|
|
91954
91968
|
}
|
|
91955
91969
|
_this.pendingContentInteractionEvent = undefined;
|
|
@@ -92010,11 +92024,11 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
|
|
|
92010
92024
|
_proto.dispose = function dispose() {
|
|
92011
92025
|
var _this_state_layer;
|
|
92012
92026
|
if (this.state.updateFrame !== undefined) {
|
|
92013
|
-
|
|
92027
|
+
cancelHTMLOverlayFrame(this.state.updateFrame);
|
|
92014
92028
|
this.state.updateFrame = undefined;
|
|
92015
92029
|
}
|
|
92016
92030
|
if (this.contentInteractionFrame !== undefined) {
|
|
92017
|
-
|
|
92031
|
+
cancelHTMLOverlayFrame(this.contentInteractionFrame);
|
|
92018
92032
|
this.contentInteractionFrame = undefined;
|
|
92019
92033
|
}
|
|
92020
92034
|
this.pendingContentInteractionEvent = undefined;
|
|
@@ -92044,7 +92058,7 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
|
|
|
92044
92058
|
});
|
|
92045
92059
|
this.state.autoHeightCleanups.clear();
|
|
92046
92060
|
this.state.autoHeightFrames.forEach(function(frame) {
|
|
92047
|
-
|
|
92061
|
+
cancelHTMLOverlayFrame(frame);
|
|
92048
92062
|
});
|
|
92049
92063
|
this.state.autoHeightFrames.clear();
|
|
92050
92064
|
this.eventCleanups.forEach(function(cleanup) {
|
|
@@ -92063,9 +92077,9 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
|
|
|
92063
92077
|
_proto.scheduleRender = function scheduleRender() {
|
|
92064
92078
|
var _this = this;
|
|
92065
92079
|
if (this.state.updateFrame !== undefined) {
|
|
92066
|
-
|
|
92080
|
+
cancelHTMLOverlayFrame(this.state.updateFrame);
|
|
92067
92081
|
}
|
|
92068
|
-
this.state.updateFrame =
|
|
92082
|
+
this.state.updateFrame = requestHTMLOverlayFrame(function() {
|
|
92069
92083
|
_this.state.updateFrame = undefined;
|
|
92070
92084
|
_this.render();
|
|
92071
92085
|
});
|
|
@@ -92074,6 +92088,40 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
|
|
|
92074
92088
|
this.cleanupOverlayContent(id);
|
|
92075
92089
|
this.invalidateContentInteractionZones(id);
|
|
92076
92090
|
};
|
|
92091
|
+
_proto.getHtmlCardWindow = function getHtmlCardWindow(id) {
|
|
92092
|
+
var contentOverlay = this.state.contentElements.get(id);
|
|
92093
|
+
var iframe = contentOverlay == null ? void 0 : contentOverlay.querySelector('iframe');
|
|
92094
|
+
return iframe == null ? void 0 : iframe.contentWindow;
|
|
92095
|
+
};
|
|
92096
|
+
_proto.patchCardHTML = function patchCardHTML(id, patch) {
|
|
92097
|
+
var html = this.state.contents.get(id);
|
|
92098
|
+
if (!html) {
|
|
92099
|
+
return false;
|
|
92100
|
+
}
|
|
92101
|
+
var patchHandler = html.content.patch;
|
|
92102
|
+
if (!patchHandler) {
|
|
92103
|
+
return false;
|
|
92104
|
+
}
|
|
92105
|
+
var context = this.createPatchContext(id, html);
|
|
92106
|
+
return patchHandler(patch, context) !== false;
|
|
92107
|
+
};
|
|
92108
|
+
_proto.dispatchHtmlCardEvent = function dispatchHtmlCardEvent(id, type, detail) {
|
|
92109
|
+
var targetWindow = this.getHtmlCardWindow(id);
|
|
92110
|
+
try {
|
|
92111
|
+
if (!targetWindow || typeof targetWindow.postMessage !== 'function') {
|
|
92112
|
+
return false;
|
|
92113
|
+
}
|
|
92114
|
+
targetWindow.postMessage({
|
|
92115
|
+
detail: detail,
|
|
92116
|
+
payload: detail,
|
|
92117
|
+
source: CARD_HTML_EVENT_MESSAGE_SOURCE,
|
|
92118
|
+
type: type
|
|
92119
|
+
}, '*');
|
|
92120
|
+
return true;
|
|
92121
|
+
} catch (unused) {
|
|
92122
|
+
return false;
|
|
92123
|
+
}
|
|
92124
|
+
};
|
|
92077
92125
|
_proto.rasterizeCard = function rasterizeCard(id, options) {
|
|
92078
92126
|
return _async_to_generator(function() {
|
|
92079
92127
|
var contentOverlay, capture, _ref, _options_pixelRatio, image, error;
|
|
@@ -92081,7 +92129,7 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
|
|
|
92081
92129
|
switch(_state.label){
|
|
92082
92130
|
case 0:
|
|
92083
92131
|
if (this.state.updateFrame !== undefined) {
|
|
92084
|
-
|
|
92132
|
+
cancelHTMLOverlayFrame(this.state.updateFrame);
|
|
92085
92133
|
this.state.updateFrame = undefined;
|
|
92086
92134
|
}
|
|
92087
92135
|
this.render();
|
|
@@ -92248,13 +92296,10 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
|
|
|
92248
92296
|
var overlay = _this.getOrCreateOverlay(item.id, parentOverlay, elements);
|
|
92249
92297
|
var contentOverlay = _this.getOrCreateContentOverlay(item.id, overlay);
|
|
92250
92298
|
var selectionOverlay = _this.getOrCreateSelectionOverlay(item.id, selectionLayer);
|
|
92251
|
-
if (!_this.state.contents.has(item.id)) {
|
|
92252
|
-
_this.renderOverlayHTML(item.id, contentOverlay, html);
|
|
92253
|
-
}
|
|
92254
|
-
_this.applyHTMLRootConfig(overlay, html);
|
|
92255
92299
|
var offsetX = frameBox && !frameBox.isEmpty() ? frameBox.min.x : 0;
|
|
92256
92300
|
var offsetY = frameBox && !frameBox.isEmpty() ? frameBox.min.y : 0;
|
|
92257
92301
|
var boxStyle = getCardOverlayBoxStyle(itemBox, item.property.width, item.property.height, offsetX, offsetY, _this.isAutoScaleEnabled(item));
|
|
92302
|
+
_this.applyHTMLRootConfig(overlay, html);
|
|
92258
92303
|
overlay.style.left = boxStyle.left;
|
|
92259
92304
|
overlay.style.top = boxStyle.top;
|
|
92260
92305
|
overlay.style.width = boxStyle.width;
|
|
@@ -92269,8 +92314,12 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
|
|
|
92269
92314
|
selectionOverlay.style.transform = selectionBoxStyle.transform;
|
|
92270
92315
|
selectionOverlay.style.transformOrigin = '0 0';
|
|
92271
92316
|
_this.applyHTMLRootConfig(selectionOverlay, html);
|
|
92317
|
+
_this.makeSelectionOverlayTransparent(selectionOverlay);
|
|
92272
92318
|
_this.syncOverlaySelection(item.id, overlay, selectionOverlay);
|
|
92273
92319
|
_this.syncContentScale(item.id, boxStyle.contentWidth, boxStyle.contentHeight);
|
|
92320
|
+
if (!_this.state.contents.has(item.id)) {
|
|
92321
|
+
_this.renderOverlayHTML(item.id, contentOverlay, html);
|
|
92322
|
+
}
|
|
92274
92323
|
_this.syncAutoHeight(item.id, _this.isAutoHeightEnabled(item));
|
|
92275
92324
|
_this.syncContentInteraction(item.id);
|
|
92276
92325
|
});
|
|
@@ -92510,14 +92559,20 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
|
|
|
92510
92559
|
if (this.contentInteractionFrame !== undefined) {
|
|
92511
92560
|
return;
|
|
92512
92561
|
}
|
|
92513
|
-
|
|
92514
|
-
|
|
92515
|
-
|
|
92516
|
-
|
|
92517
|
-
|
|
92518
|
-
|
|
92519
|
-
|
|
92520
|
-
|
|
92562
|
+
try {
|
|
92563
|
+
this.contentInteractionFrame = requestAnimationFrame(function() {
|
|
92564
|
+
_this.contentInteractionFrame = undefined;
|
|
92565
|
+
var pendingEvent = _this.pendingContentInteractionEvent;
|
|
92566
|
+
_this.pendingContentInteractionEvent = undefined;
|
|
92567
|
+
if (pendingEvent) {
|
|
92568
|
+
_this.syncActiveContentInteraction(pendingEvent);
|
|
92569
|
+
}
|
|
92570
|
+
});
|
|
92571
|
+
} catch (unused) {
|
|
92572
|
+
this.contentInteractionFrame = undefined;
|
|
92573
|
+
this.pendingContentInteractionEvent = undefined;
|
|
92574
|
+
this.syncActiveContentInteraction(event);
|
|
92575
|
+
}
|
|
92521
92576
|
};
|
|
92522
92577
|
_proto.setActiveContentInteraction = function setActiveContentInteraction(zone) {
|
|
92523
92578
|
var _this = this;
|
|
@@ -92941,6 +92996,20 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
|
|
|
92941
92996
|
});
|
|
92942
92997
|
this.state.contents.set(id, html);
|
|
92943
92998
|
};
|
|
92999
|
+
_proto.createPatchContext = function createPatchContext(id, html) {
|
|
93000
|
+
var _this = this;
|
|
93001
|
+
return {
|
|
93002
|
+
id: id,
|
|
93003
|
+
html: html,
|
|
93004
|
+
content: html.content,
|
|
93005
|
+
container: this.state.contentMountElements.get(id),
|
|
93006
|
+
contentWindow: this.getHtmlCardWindow(id),
|
|
93007
|
+
refresh: function refresh() {
|
|
93008
|
+
_this.invalidateCardHTML(id);
|
|
93009
|
+
_this.scheduleRender();
|
|
93010
|
+
}
|
|
93011
|
+
};
|
|
93012
|
+
};
|
|
92944
93013
|
_proto.observeContentInteractionZones = function observeContentInteractionZones(id, contentContainer) {
|
|
92945
93014
|
var _this = this;
|
|
92946
93015
|
var _this_state_contentInteractionZoneCleanups_get;
|
|
@@ -93000,6 +93069,10 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
|
|
|
93000
93069
|
});
|
|
93001
93070
|
});
|
|
93002
93071
|
};
|
|
93072
|
+
_proto.makeSelectionOverlayTransparent = function makeSelectionOverlayTransparent(selectionOverlay) {
|
|
93073
|
+
selectionOverlay.style.background = 'transparent';
|
|
93074
|
+
selectionOverlay.style.backgroundColor = 'transparent';
|
|
93075
|
+
};
|
|
93003
93076
|
_proto.renderOverlayContent = function renderOverlayContent(overlay, content, options) {
|
|
93004
93077
|
var _this = this;
|
|
93005
93078
|
switch(content.kind){
|
|
@@ -93192,7 +93265,7 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
|
|
|
93192
93265
|
if (this.state.autoHeightFrames.has(id)) {
|
|
93193
93266
|
return;
|
|
93194
93267
|
}
|
|
93195
|
-
var frame =
|
|
93268
|
+
var frame = requestHTMLOverlayFrame(function() {
|
|
93196
93269
|
_this.state.autoHeightFrames.delete(id);
|
|
93197
93270
|
_this.measureAutoHeight(id);
|
|
93198
93271
|
});
|
|
@@ -93276,7 +93349,7 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
|
|
|
93276
93349
|
}
|
|
93277
93350
|
var frame = this.state.autoHeightFrames.get(id);
|
|
93278
93351
|
if (frame !== undefined) {
|
|
93279
|
-
|
|
93352
|
+
cancelHTMLOverlayFrame(frame);
|
|
93280
93353
|
this.state.autoHeightFrames.delete(id);
|
|
93281
93354
|
}
|
|
93282
93355
|
};
|
|
@@ -93294,7 +93367,18 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
|
|
|
93294
93367
|
if (Math.abs(nextHeight - item.property.height) <= AUTO_HEIGHT_EPSILON) {
|
|
93295
93368
|
return;
|
|
93296
93369
|
}
|
|
93297
|
-
this.options.setCardItemHeight(id, nextHeight
|
|
93370
|
+
this.options.setCardItemHeight(id, nextHeight, {
|
|
93371
|
+
anchor: this.getAutoHeightAnchor(item),
|
|
93372
|
+
previousHeight: item.property.height
|
|
93373
|
+
});
|
|
93374
|
+
};
|
|
93375
|
+
_proto.getAutoHeightAnchor = function getAutoHeightAnchor(item) {
|
|
93376
|
+
var _ref;
|
|
93377
|
+
var _this_options_resolveCardTypeConfig;
|
|
93378
|
+
if (!isCardItem(item)) {
|
|
93379
|
+
return 'top';
|
|
93380
|
+
}
|
|
93381
|
+
return (_ref = (_this_options_resolveCardTypeConfig = this.options.resolveCardTypeConfig(item)) == null ? void 0 : _this_options_resolveCardTypeConfig.autoHeightAnchor) != null ? _ref : 'top';
|
|
93298
93382
|
};
|
|
93299
93383
|
_proto.getAutoHeightItemHeight = function getAutoHeightItemHeight(item, contentHeight) {
|
|
93300
93384
|
if (!isCardItem(item) || this.isAutoScaleEnabled(item)) {
|
|
@@ -93380,7 +93464,7 @@ function formatCssNumber(value) {
|
|
|
93380
93464
|
}
|
|
93381
93465
|
function nextAnimationFrame() {
|
|
93382
93466
|
return new Promise(function(resolve) {
|
|
93383
|
-
|
|
93467
|
+
requestHTMLOverlayFrame(function() {
|
|
93384
93468
|
resolve();
|
|
93385
93469
|
});
|
|
93386
93470
|
});
|
|
@@ -93949,12 +94033,29 @@ var SDK = /*#__PURE__*/ function() {
|
|
|
93949
94033
|
bottom: HTML_CARD_EDITING_VIEWPORT_PADDING
|
|
93950
94034
|
}, box);
|
|
93951
94035
|
},
|
|
93952
|
-
setCardItemHeight: function setCardItemHeight(id, height) {
|
|
94036
|
+
setCardItemHeight: function setCardItemHeight(id, height, options) {
|
|
94037
|
+
var item = _this.getSDKItem(id);
|
|
94038
|
+
if (!isCardItem(item) || options.anchor === 'center') {
|
|
94039
|
+
void _this.setItemProperty({
|
|
94040
|
+
itemId: id,
|
|
94041
|
+
type: SDKItemType.CARD,
|
|
94042
|
+
propertyName: 'height',
|
|
94043
|
+
propertyValue: height
|
|
94044
|
+
});
|
|
94045
|
+
return;
|
|
94046
|
+
}
|
|
94047
|
+
var _item_property_position = item.property.position, x = _item_property_position[0], y = _item_property_position[1];
|
|
94048
|
+
var deltaY = (height - options.previousHeight) / 2;
|
|
93953
94049
|
void _this.setItemProperty({
|
|
93954
94050
|
itemId: id,
|
|
93955
94051
|
type: SDKItemType.CARD,
|
|
93956
|
-
|
|
93957
|
-
|
|
94052
|
+
property: {
|
|
94053
|
+
height: height,
|
|
94054
|
+
position: [
|
|
94055
|
+
x,
|
|
94056
|
+
y + deltaY
|
|
94057
|
+
]
|
|
94058
|
+
}
|
|
93958
94059
|
});
|
|
93959
94060
|
},
|
|
93960
94061
|
getSelectedItemIds: function getSelectedItemIds() {
|
|
@@ -96178,6 +96279,38 @@ var SDK = /*#__PURE__*/ function() {
|
|
|
96178
96279
|
return true;
|
|
96179
96280
|
};
|
|
96180
96281
|
/**
|
|
96282
|
+
* @description 获取指定 HTML 卡片当前 iframe 的 window。
|
|
96283
|
+
* @description 仅 inline/document 或自行渲染 iframe 的 DOM 内容会返回 window。
|
|
96284
|
+
* @param id 卡片元素 ID
|
|
96285
|
+
* @returns HTML iframe window
|
|
96286
|
+
*/ _proto.getHtmlCardWindow = function getHtmlCardWindow(id) {
|
|
96287
|
+
var _this__htmlOverlayManager;
|
|
96288
|
+
return (_this__htmlOverlayManager = this._htmlOverlayManager) == null ? void 0 : _this__htmlOverlayManager.getHtmlCardWindow(id);
|
|
96289
|
+
};
|
|
96290
|
+
/**
|
|
96291
|
+
* @description 向指定 HTML 卡片发送增量 patch。
|
|
96292
|
+
* @description 当卡片内容配置了 CardHTMLPatchHandler 时,可用于局部更新 HTML,而不必整卡 refresh。
|
|
96293
|
+
* @param id 卡片元素 ID
|
|
96294
|
+
* @param patch patch 负载,由卡片内容自己的 patch handler 解释
|
|
96295
|
+
* @returns 是否被 patch handler 处理
|
|
96296
|
+
*/ _proto.patchCardHTML = function patchCardHTML(id, patch) {
|
|
96297
|
+
var _ref;
|
|
96298
|
+
var _this__htmlOverlayManager;
|
|
96299
|
+
return (_ref = (_this__htmlOverlayManager = this._htmlOverlayManager) == null ? void 0 : _this__htmlOverlayManager.patchCardHTML(id, patch)) != null ? _ref : false;
|
|
96300
|
+
};
|
|
96301
|
+
/**
|
|
96302
|
+
* @description 向指定 HTML 卡片 iframe 派发事件。
|
|
96303
|
+
* @description 通过 postMessage 投递事件,跨源/同源行为一致,消息 source 为 vvfx-card-html-event。
|
|
96304
|
+
* @param id 卡片元素 ID
|
|
96305
|
+
* @param type 事件名称
|
|
96306
|
+
* @param detail 事件 detail
|
|
96307
|
+
* @returns 是否成功派发或投递
|
|
96308
|
+
*/ _proto.dispatchHtmlCardEvent = function dispatchHtmlCardEvent(id, type, detail) {
|
|
96309
|
+
var _ref;
|
|
96310
|
+
var _this__htmlOverlayManager;
|
|
96311
|
+
return (_ref = (_this__htmlOverlayManager = this._htmlOverlayManager) == null ? void 0 : _this__htmlOverlayManager.dispatchHtmlCardEvent(id, type, detail)) != null ? _ref : false;
|
|
96312
|
+
};
|
|
96313
|
+
/**
|
|
96181
96314
|
* @description 创建卡片元素
|
|
96182
96315
|
* @description 底层以透明 SpriteItem 形式渲染,支持 cardType 属性
|
|
96183
96316
|
* @param createInfo 卡片创建信息
|
|
@@ -96562,7 +96695,7 @@ SDK.config = BaseConfig;
|
|
|
96562
96695
|
var config = SDK.config.itemConfig.cardConfig.cardTypes.find(function(t) {
|
|
96563
96696
|
return t.type === _this.cardType;
|
|
96564
96697
|
});
|
|
96565
|
-
return
|
|
96698
|
+
return (config == null ? void 0 : config.autoScale) !== false;
|
|
96566
96699
|
}
|
|
96567
96700
|
},
|
|
96568
96701
|
{
|