@vvfx/sdk 0.2.2-beta.6 → 0.2.2-beta.8

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,14 @@ export declare class HTMLOverlayManager {
     private syncActiveContentInteraction;
     private scheduleActiveContentInteractionSync;
     private setActiveContentInteraction;
-    private getContentInteractiveZoneByEvent;
+    private shouldKeepActiveContentInteractionForFocusedElement;
+    private resolveHTMLInteractionTarget;
+    private getActiveSubtreeInteractionAtEvent;
+    private resolveContentInteractionZone;
     private getContentInteractionZones;
     private getContentInteractiveSelector;
     private isContentInteractionDisabled;
+    private getContentInteractionZoneMode;
     private invalidateContentInteractionZones;
     private observeContentInteractionZoneResizes;
     private getLayerPoint;
@@ -93,6 +98,7 @@ export declare class HTMLOverlayManager {
     private requestAutoHeightFromIframes;
     private syncContentInteraction;
     private syncContentInteractionZones;
+    private clearContentInteractionState;
     private syncShellInteraction;
     private enterEditing;
     private exitEditing;

package/dist/index.js

@@ -3,7 +3,7 @@
  * Description: TODO
  * Author: Ant Group CO., Ltd.
  * Contributors: 赤芍,何即,不择,意绮
- * Version: v0.2.2-beta.6
+ * Version: v0.2.2-beta.8
  */
 
 import * as EFFECTS from '@galacean/effects';
@@ -91913,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])',
@@ -91930,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;
@@ -92004,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;
@@ -92245,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;
@@ -92540,8 +92553,11 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         return undefined;
     };
     _proto.syncActiveContentInteraction = function syncActiveContentInteraction(event) {
-        var zone = this.getContentInteractiveZoneByEvent(event);
-        this.setActiveContentInteraction(zone);
+        var decision = this.resolveHTMLInteractionTarget(event);
+        if (decision.kind === 'canvas' && this.shouldKeepActiveContentInteractionForFocusedElement()) {
+            return;
+        }
+        this.setActiveContentInteraction(decision.kind === 'html' ? decision.interaction : undefined);
     };
     _proto.scheduleActiveContentInteractionSync = function scheduleActiveContentInteractionSync(event) {
         var _this = this;
@@ -92565,7 +92581,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;
@@ -92580,22 +92596,77 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
             _this.syncContentInteraction(id);
         });
     };
-    _proto.getContentInteractiveZoneByEvent = function getContentInteractiveZoneByEvent(event) {
+    _proto.shouldKeepActiveContentInteractionForFocusedElement = function shouldKeepActiveContentInteractionForFocusedElement() {
+        var activeInteraction = this.state.activeContentInteraction;
+        if (!activeInteraction || typeof document === 'undefined') {
+            return false;
+        }
+        var activeElement = document.activeElement;
+        if (!activeElement || activeElement === document.body) {
+            return false;
+        }
+        var interactionElement = activeInteraction.element;
+        return interactionElement === activeElement || typeof interactionElement.contains === 'function' && interactionElement.contains(activeElement);
+    };
+    _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 activeSubtree = this.getActiveSubtreeInteractionAtEvent(id, event);
+        if (activeSubtree) {
+            return {
+                kind: 'html',
+                interaction: activeSubtree
+            };
         }
-        var zone = this.getContentInteractionZones(id, contentOverlay).find(function(zone) {
+        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;
@@ -92608,7 +92679,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);
@@ -92638,6 +92710,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;
@@ -92750,11 +92826,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';
@@ -92772,7 +92848,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';
@@ -92785,19 +92861,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;