@vvfx/sdk 0.2.2-beta.5 → 0.2.2-beta.7

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

@@ -62,6 +62,7 @@ export declare class HTMLOverlayManager {
     private handleContainerMouseDown;
     private handleContainerMouseMove;
     private handleContainerMouseLeave;
+    private isMouseLeaveWithinContainer;
     private handleContainerContextMenu;
     private isHTMLContextMenuEvent;
     private handleViewportTransform;
@@ -80,10 +81,13 @@ export declare class HTMLOverlayManager {
     private syncActiveContentInteraction;
     private scheduleActiveContentInteractionSync;
     private setActiveContentInteraction;
-    private getContentInteractiveZoneByEvent;
+    private resolveHTMLInteractionTarget;
+    private getActiveSubtreeInteractionAtEvent;
+    private resolveContentInteractionZone;
     private getContentInteractionZones;
     private getContentInteractiveSelector;
     private isContentInteractionDisabled;
+    private getContentInteractionZoneMode;
     private invalidateContentInteractionZones;
     private observeContentInteractionZoneResizes;
     private getLayerPoint;
@@ -93,6 +97,7 @@ export declare class HTMLOverlayManager {
     private requestAutoHeightFromIframes;
     private syncContentInteraction;
     private syncContentInteractionZones;
+    private clearContentInteractionState;
     private syncShellInteraction;
     private enterEditing;
     private exitEditing;

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

@@ -8,7 +8,7 @@ export type CardOverlayBoxStyle = {
     contentHeight: number;
     transform: string;
 };
-export declare function getCardOverlayBoxStyle(box: Box2, width: number, height: number, offsetX?: number, offsetY?: number, autoScale?: boolean): 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/index.js

@@ -3,7 +3,7 @@
  * Description: TODO
  * Author: Ant Group CO., Ltd.
  * Contributors: 赤芍,何即,不择,意绮
- * Version: v0.2.2-beta.5
+ * Version: v0.2.2-beta.7
  */
 
 import * as EFFECTS from '@galacean/effects';
@@ -55558,6 +55558,16 @@ var TransformGizmo = /*#__PURE__*/ function(Gizmo) {
                                 newWidth,
                                 newHeight
                             ], translation1);
+                        } else if (selectedItem && selectedItems.length === 1 && isCardItem(selectedItem)) {
+                            void this._pageDataUtils.setItemProperty({
+                                itemId: selectedItem.id,
+                                type: SDKItemType.CARD,
+                                property: {
+                                    width: selectedItem.width * resultScalar1.x,
+                                    height: selectedItem.height * resultScalar1.y
+                                }
+                            });
+                            this._pageDataUtils.moveItem(selectedItem.id, translation1);
                         } else {
                             // 普通元素的缩放逻辑
                             selectedItems.forEach(function(item) {
@@ -91824,14 +91834,13 @@ function syncElementStackOrder(_container, elements) {
     });
 }
 
-function getCardOverlayBoxStyle(box, width, height, offsetX, offsetY, autoScale) {
+function getCardOverlayBoxStyle(box, width, height, offsetX, offsetY, _autoScale) {
     if (offsetX === void 0) offsetX = 0;
     if (offsetY === void 0) offsetY = 0;
-    if (autoScale === void 0) autoScale = true;
     if (box.corners.length === 4 && width > 0 && height > 0) {
         var _box_corners = box.corners, rightTop = _box_corners[0], leftBottom = _box_corners[2], leftTop = _box_corners[3];
-        var contentWidth = autoScale ? width : rightTop.distanceTo(leftTop);
-        var contentHeight = autoScale ? height : leftBottom.distanceTo(leftTop);
+        var contentWidth = width;
+        var contentHeight = height;
         var a = (rightTop.x - leftTop.x) / contentWidth;
         var b = (rightTop.y - leftTop.y) / contentWidth;
         var c = (leftBottom.x - leftTop.x) / contentHeight;
@@ -91904,8 +91913,8 @@ function mountHTMLShell(container, content, shell) {
 var SHELL_INTERACTIVE_SELECTOR = '[data-vvfx-html-shell-interactive="true"]';
 var EDITING_INTERACTIVE_SELECTOR = '[data-vvfx-html-editing-interactive="true"]';
 var CONTENT_INTERACTIVE_SELECTOR = [
-    '[data-interaction-zone="self"]',
     '[data-vvfx-html-interaction-zone="self"]',
+    '[data-vvfx-html-interaction-zone="subtree"]',
     'a[href]',
     'button:not([disabled])',
     'input:not([disabled])',
@@ -91921,7 +91930,6 @@ var CONTENT_INTERACTIVE_SELECTOR = [
     '[tabindex]:not([tabindex="-1"])'
 ].join(', ');
 var CONTENT_INTERACTION_NONE_SELECTOR = [
-    '[data-interaction-zone="none"]',
     '[data-vvfx-html-interaction-zone="none"]'
 ].join(', ');
 var EDITING_VIEWPORT_PADDING = 48;
@@ -91995,7 +92003,10 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
                 _this.syncContentInteraction(hoverShellInteractiveId);
             }
         };
-        this.handleContainerMouseLeave = function() {
+        this.handleContainerMouseLeave = function(event) {
+            if (_this.isMouseLeaveWithinContainer(event)) {
+                return;
+            }
             if (_this.contentInteractionFrame !== undefined) {
                 cancelAnimationFrame(_this.contentInteractionFrame);
                 _this.contentInteractionFrame = undefined;
@@ -92236,6 +92247,17 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         this.options.container.addEventListener('mouseleave', this.handleContainerMouseLeave, true);
         this.options.container.addEventListener('contextmenu', this.handleContainerContextMenu, true);
     };
+    _proto.isMouseLeaveWithinContainer = function isMouseLeaveWithinContainer(event) {
+        var relatedTarget = event.relatedTarget;
+        if (!relatedTarget) {
+            return false;
+        }
+        try {
+            return this.options.container.contains(relatedTarget);
+        } catch (unused) {
+            return false;
+        }
+    };
     _proto.isHTMLContextMenuEvent = function isHTMLContextMenuEvent(event) {
         if (typeof Element !== 'function' || !_instanceof(event.target, Element)) {
             return false;
@@ -92531,8 +92553,8 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         return undefined;
     };
     _proto.syncActiveContentInteraction = function syncActiveContentInteraction(event) {
-        var zone = this.getContentInteractiveZoneByEvent(event);
-        this.setActiveContentInteraction(zone);
+        var decision = this.resolveHTMLInteractionTarget(event);
+        this.setActiveContentInteraction(decision.kind === 'html' ? decision.interaction : undefined);
     };
     _proto.scheduleActiveContentInteractionSync = function scheduleActiveContentInteractionSync(event) {
         var _this = this;
@@ -92556,7 +92578,7 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
     _proto.setActiveContentInteraction = function setActiveContentInteraction(zone) {
         var _this = this;
         var previous = this.state.activeContentInteraction;
-        if ((previous == null ? void 0 : previous.id) === (zone == null ? void 0 : zone.id) && (previous == null ? void 0 : previous.element) === (zone == null ? void 0 : zone.element)) {
+        if ((previous == null ? void 0 : previous.id) === (zone == null ? void 0 : zone.id) && (previous == null ? void 0 : previous.element) === (zone == null ? void 0 : zone.element) && (previous == null ? void 0 : previous.zone) === (zone == null ? void 0 : zone.zone)) {
             return;
         }
         this.state.activeContentInteraction = zone;
@@ -92571,22 +92593,65 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
             _this.syncContentInteraction(id);
         });
     };
-    _proto.getContentInteractiveZoneByEvent = function getContentInteractiveZoneByEvent(event) {
+    _proto.resolveHTMLInteractionTarget = function resolveHTMLInteractionTarget(event) {
         var id = this.getHTMLCardIdByEvent(event);
         if (!id || this.isEditableCard(id)) {
-            return undefined;
+            return {
+                kind: 'canvas',
+                id: id
+            };
         }
         var contentOverlay = this.state.contentElements.get(id);
         if (!contentOverlay) {
-            return undefined;
+            return {
+                kind: 'canvas',
+                id: id
+            };
         }
-        var zone = this.getContentInteractionZones(id, contentOverlay).find(function(zone) {
+        var activeSubtree = this.getActiveSubtreeInteractionAtEvent(id, event);
+        if (activeSubtree) {
+            return {
+                kind: 'html',
+                interaction: activeSubtree
+            };
+        }
+        var matchedZones = this.getContentInteractionZones(id, contentOverlay).filter(function(zone) {
             return isMouseEventInsideRect(event, zone.rect);
         });
-        return zone ? {
-            id: id,
-            element: zone.element
-        } : undefined;
+        var zone = this.resolveContentInteractionZone(matchedZones);
+        if (zone) {
+            return {
+                kind: 'html',
+                interaction: {
+                    id: id,
+                    element: zone.element,
+                    zone: zone.zone
+                }
+            };
+        }
+        return {
+            kind: 'canvas',
+            id: id
+        };
+    };
+    _proto.getActiveSubtreeInteractionAtEvent = function getActiveSubtreeInteractionAtEvent(id, event) {
+        var activeInteraction = this.state.activeContentInteraction;
+        if ((activeInteraction == null ? void 0 : activeInteraction.id) !== id || activeInteraction.zone !== 'subtree') {
+            return undefined;
+        }
+        var rect = activeInteraction.element.getBoundingClientRect();
+        return isMouseEventInsideRect(event, rect) ? activeInteraction : undefined;
+    };
+    _proto.resolveContentInteractionZone = function resolveContentInteractionZone(zones) {
+        if (zones.length <= 1) {
+            return zones[0];
+        }
+        var subtreeRoot = zones.find(function(candidate) {
+            return candidate.zone === 'subtree' && typeof candidate.element.contains === 'function' && zones.some(function(zone) {
+                return zone.element !== candidate.element && candidate.element.contains(zone.element);
+            });
+        });
+        return subtreeRoot != null ? subtreeRoot : zones[0];
     };
     _proto.getContentInteractionZones = function getContentInteractionZones(id, contentOverlay) {
         var _this = this;
@@ -92599,7 +92664,8 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         }).map(function(element) {
             return {
                 element: element,
-                rect: element.getBoundingClientRect()
+                rect: element.getBoundingClientRect(),
+                zone: _this.getContentInteractionZoneMode(element)
             };
         });
         this.state.contentInteractionZones.set(id, zones);
@@ -92629,6 +92695,10 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         }
         return !!element.closest(CONTENT_INTERACTION_NONE_SELECTOR);
     };
+    _proto.getContentInteractionZoneMode = function getContentInteractionZoneMode(element) {
+        var zone = element.dataset.vvfxHtmlInteractionZone;
+        return zone === 'subtree' ? 'subtree' : 'self';
+    };
     _proto.invalidateContentInteractionZones = function invalidateContentInteractionZones(id) {
         if (id) {
             var _this_state_contentInteractionResizeCleanups_get;
@@ -92741,11 +92811,11 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         var _this_state_editing, _this_state_activeContentInteraction;
         var isEditing = ((_this_state_editing = this.state.editing) == null ? void 0 : _this_state_editing.id) === id;
         var activeInteraction = ((_this_state_activeContentInteraction = this.state.activeContentInteraction) == null ? void 0 : _this_state_activeContentInteraction.id) === id ? this.state.activeContentInteraction : undefined;
-        var isInteractive = isEditing || !!activeInteraction;
         var overlay = this.state.elements.get(id);
         var scaleOverlay = this.state.contentScaleElements.get(id);
         var contentOverlay = this.state.contentElements.get(id);
         var contentMount = this.state.contentMountElements.get(id);
+        var isInteractive = isEditing || !!activeInteraction;
         if (overlay) {
             overlay.dataset.editing = isEditing ? 'true' : 'false';
             overlay.style.pointerEvents = 'none';
@@ -92763,7 +92833,7 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
                 iframe.tabIndex = isActiveIframe ? 0 : -1;
             });
             this.syncShellInteraction(id, contentOverlay, isInteractive);
-            this.syncContentInteractionZones(id, contentOverlay, activeInteraction == null ? void 0 : activeInteraction.element, isEditing, isInteractive);
+            this.syncContentInteractionZones(id, contentOverlay, activeInteraction, isEditing, isInteractive);
         }
         if (contentMount) {
             contentMount.dataset.editing = isEditing ? 'true' : 'false';
@@ -92776,19 +92846,32 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
             }
         }
     };
-    _proto.syncContentInteractionZones = function syncContentInteractionZones(id, contentOverlay, activeElement, isEditing, isInteractive) {
+    _proto.syncContentInteractionZones = function syncContentInteractionZones(id, contentOverlay, activeInteraction, isEditing, isInteractive) {
         var _this = this;
+        var activeElement = activeInteraction == null ? void 0 : activeInteraction.element;
         contentOverlay.querySelectorAll(this.getContentInteractiveSelector(id)).forEach(function(element) {
-            if (!isInteractive || _this.isContentInteractionDisabled(element)) {
+            if ((activeInteraction == null ? void 0 : activeInteraction.zone) === 'subtree' && activeElement && element !== activeElement && typeof activeElement.contains === 'function' && activeElement.contains(element)) {
+                _this.clearContentInteractionState(element);
+                return;
+            }
+            if (!isInteractive) {
+                _this.clearContentInteractionState(element);
+                return;
+            }
+            if (_this.isContentInteractionDisabled(element)) {
                 element.dataset.vvfxHtmlInteractionActive = 'false';
                 element.style.pointerEvents = 'none';
                 return;
             }
-            var isElementInteractive = isEditing || activeElement === element;
+            var isElementInteractive = isEditing || activeElement === element || (activeInteraction == null ? void 0 : activeInteraction.zone) === 'subtree' && typeof (activeElement == null ? void 0 : activeElement.contains) === 'function' && activeElement.contains(element);
             element.dataset.vvfxHtmlInteractionActive = isElementInteractive ? 'true' : 'false';
             element.style.pointerEvents = isElementInteractive ? 'auto' : 'none';
         });
     };
+    _proto.clearContentInteractionState = function clearContentInteractionState(element) {
+        delete element.dataset.vvfxHtmlInteractionActive;
+        element.style.pointerEvents = '';
+    };
     _proto.syncShellInteraction = function syncShellInteraction(id, contentOverlay, isInteractive) {
         var isHoveringShellInteractive = this.state.hoverShellInteractiveId === id;
         var isShellInteractiveActive = isInteractive || isHoveringShellInteractive;
@@ -95205,8 +95288,7 @@ var SDK = /*#__PURE__*/ function() {
    * @param ignoreClamp 是否忽视约束
    */ _proto.setPageZoom = function setPageZoom(zoom, center, ignoreClamp) {
         assertExist$1(this._pageData);
-        this._pageData.property.zoom = zoom;
-        this._pageDataUtils.setPageZoom(this._pageData.property.zoom, center, ignoreClamp);
+        this._pageDataUtils.setPageZoom(zoom, center, ignoreClamp);
         this._gestureHandler.render();
     };
     /**