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

package/dist/index.js

@@ -3,7 +3,7 @@
  * Description: TODO
  * Author: Ant Group CO., Ltd.
  * Contributors: 赤芍,何即,不择,意绮
- * Version: v0.2.2-beta.4
+ * Version: v0.2.2-beta.5
  */
 
 import * as EFFECTS from '@galacean/effects';
@@ -47298,7 +47298,7 @@ var SelectorGizmo = /*#__PURE__*/ function(Gizmo) {
         var preSelectedItem = this.pageDataUtils.getPreSelectedItem();
         var preSelectedItemBox = this.pageDataUtils.getViewBoxById((_ref = preSelectedItem == null ? void 0 : preSelectedItem.id) != null ? _ref : '');
         var _SDK_config_gestureHandlerConfig_selectorGizmoConfig = SDK.config.gestureHandlerConfig.selectorGizmoConfig, regionBoxColor = _SDK_config_gestureHandlerConfig_selectorGizmoConfig.regionBoxColor, regionBoxAlpha = _SDK_config_gestureHandlerConfig_selectorGizmoConfig.regionBoxAlpha, preSelectedWidth = _SDK_config_gestureHandlerConfig_selectorGizmoConfig.preSelectedWidth, preSelectedColor = _SDK_config_gestureHandlerConfig_selectorGizmoConfig.preSelectedColor, regionWireframeWidth = _SDK_config_gestureHandlerConfig_selectorGizmoConfig.regionWireframeWidth, regionWireframeColor = _SDK_config_gestureHandlerConfig_selectorGizmoConfig.regionWireframeColor, regionWireframeAlpha = _SDK_config_gestureHandlerConfig_selectorGizmoConfig.regionWireframeAlpha;
-        if (!(preSelectedItemBox == null ? void 0 : preSelectedItemBox.isEmpty())) {
+        if (!(preSelectedItemBox == null ? void 0 : preSelectedItemBox.isEmpty()) && !isCardItem(preSelectedItem)) {
             this.graphics.lineStyle(preSelectedWidth, preSelectedColor);
             this.graphics.drawBox(preSelectedItemBox);
         }
@@ -55882,6 +55882,7 @@ var TransformGizmo = /*#__PURE__*/ function(Gizmo) {
         var selectedItems = this._pageDataUtils.getSelectedItems();
         var isTemplateMode = SDK.config.mode === 'template';
         var selectedItem = selectedItems.length === 1 ? selectedItems[0] : undefined;
+        var isSingleCardItem = isCardItem(selectedItem);
         var isGeneratorItem = (selectedItem == null ? void 0 : selectedItem.type) === SDKItemType.GENERATOR;
         var isAutoLayoutFrame = (selectedItem == null ? void 0 : selectedItem.type) === SDKItemType.FRAME && (selectedItem == null ? void 0 : selectedItem.layoutMode) === FrameLayoutMode.AUTO;
         var canScale = selectedItems.length === 1 && (selectedItem == null ? void 0 : selectedItem.type) !== SDKItemType.GROUP && !isAutoLayoutFrame && !isGeneratorItem;
@@ -55921,9 +55922,11 @@ var TransformGizmo = /*#__PURE__*/ function(Gizmo) {
         this.wireframe.totalBox.copyFrom(box).expandByScalar(totalBoxExpandScalar);
         // 根据box获取边缘线
         var corners = this.wireframe.box.corners;
-        corners.forEach(function(corner, i) {
-            _this.wireframe.edges.push(new Line2(new Vector2().copyFrom(corner), new Vector2().copyFrom(corners[(i + 1) % 4])));
-        });
+        if (!isSingleCardItem) {
+            corners.forEach(function(corner, i) {
+                _this.wireframe.edges.push(new Line2(new Vector2().copyFrom(corner), new Vector2().copyFrom(corners[(i + 1) % 4])));
+            });
+        }
         var _SDK_config_gestureHandlerConfig_transformGizmoConfig = SDK.config.gestureHandlerConfig.transformGizmoConfig, scaleCircleSize = _SDK_config_gestureHandlerConfig_transformGizmoConfig.scaleCircleSize, rotationCircleSize = _SDK_config_gestureHandlerConfig_transformGizmoConfig.rotationCircleSize;
         // 成组暂不支持缩放
         if (selectedItems.length === 1) {
@@ -63165,10 +63168,13 @@ var PageDataUtils = /*#__PURE__*/ function() {
             1
         ] : _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 cardTypeConfig = SDK.config.itemConfig.cardConfig.cardTypes.find(function(t) {
+            return t.type === cardType;
+        });
         var registeredTypes = SDK.config.itemConfig.cardConfig.cardTypes.map(function(t) {
             return t.type;
         });
-        if (!registeredTypes.includes(cardType)) {
+        if (!cardTypeConfig) {
             console.warn('CardItem cardType "' + cardType + '" is not registered. Registered types: ' + registeredTypes.join(', '));
             return;
         }
@@ -91897,6 +91903,27 @@ 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"]',
+    'a[href]',
+    'button:not([disabled])',
+    'input:not([disabled])',
+    'textarea:not([disabled])',
+    'select:not([disabled])',
+    'summary',
+    'video[controls]',
+    'audio[controls]',
+    '[contenteditable]:not([contenteditable="false"])',
+    '[role="button"]',
+    '[role="link"]',
+    '[role="textbox"]',
+    '[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;
 var EDITING_VIEWPORT_BOX_SCALE = 1.1;
 var AUTO_HEIGHT_EPSILON = 0.5;
@@ -91906,12 +91933,17 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         var _this = this;
         this.options = options;
         this.eventCleanups = [];
+        this.htmlRootConfigCleanups = new WeakMap();
         this.state = {
             frameElements: new Map(),
             elements: new Map(),
+            selectionElements: new Map(),
             contentScaleElements: new Map(),
             contentElements: new Map(),
             contentMountElements: new Map(),
+            contentInteractionZones: new Map(),
+            contentInteractionZoneCleanups: new Map(),
+            contentInteractionResizeCleanups: new Map(),
             contents: new Map(),
             cleanups: new Map(),
             autoHeightModes: new Map(),
@@ -91931,6 +91963,9 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
                 }
                 return;
             }
+            if (!_this.isEditableCard(targetId)) {
+                return;
+            }
             event.preventDefault();
             event.stopPropagation();
             _this.enterEditing(targetId);
@@ -91946,6 +91981,7 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
             _this.exitEditing();
         };
         this.handleContainerMouseMove = function(event) {
+            _this.scheduleActiveContentInteractionSync(event);
             var hoverShellInteractiveId = _this.getHoverShellInteractiveIdByEvent(event);
             if (_this.state.hoverShellInteractiveId === hoverShellInteractiveId) {
                 return;
@@ -91960,6 +91996,12 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
             }
         };
         this.handleContainerMouseLeave = function() {
+            if (_this.contentInteractionFrame !== undefined) {
+                cancelAnimationFrame(_this.contentInteractionFrame);
+                _this.contentInteractionFrame = undefined;
+            }
+            _this.pendingContentInteractionEvent = undefined;
+            _this.setActiveContentInteraction(undefined);
             var previousId = _this.state.hoverShellInteractiveId;
             if (!previousId) {
                 return;
@@ -91967,6 +92009,33 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
             _this.state.hoverShellInteractiveId = undefined;
             _this.syncContentInteraction(previousId);
         };
+        this.handleContainerContextMenu = function(event) {
+            var activeInteraction = _this.state.activeContentInteraction;
+            if (!activeInteraction || !_this.isEventInsideOverlay(activeInteraction.id, event) || _this.isHTMLContextMenuEvent(event)) {
+                return;
+            }
+            var canvas = _this.options.getCanvasEventTarget == null ? void 0 : _this.options.getCanvasEventTarget.call(_this.options);
+            if (!canvas) {
+                return;
+            }
+            event.preventDefault();
+            event.stopPropagation();
+            _this.setActiveContentInteraction(undefined);
+            canvas.dispatchEvent(new MouseEvent('contextmenu', {
+                bubbles: true,
+                cancelable: true,
+                clientX: event.clientX,
+                clientY: event.clientY,
+                screenX: event.screenX,
+                screenY: event.screenY,
+                button: event.button,
+                buttons: event.buttons,
+                ctrlKey: event.ctrlKey,
+                shiftKey: event.shiftKey,
+                altKey: event.altKey,
+                metaKey: event.metaKey
+            }));
+        };
         this.isAutoHeightMessage = isCardHTMLAutoHeightMessage;
     }
     var _proto = HTMLOverlayManager.prototype;
@@ -91980,7 +92049,6 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         layer.style.position = 'absolute';
         layer.style.inset = '0';
         layer.style.pointerEvents = 'none';
-        layer.style.zIndex = '1';
         container.appendChild(layer);
         this.state.layer = layer;
         this.initDOMEvents();
@@ -91993,14 +92061,29 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
             cancelAnimationFrame(this.state.updateFrame);
             this.state.updateFrame = undefined;
         }
+        if (this.contentInteractionFrame !== undefined) {
+            cancelAnimationFrame(this.contentInteractionFrame);
+            this.contentInteractionFrame = undefined;
+        }
+        this.pendingContentInteractionEvent = undefined;
         this.state.cleanups.forEach(function(cleanup) {
             cleanup();
         });
         this.state.frameElements.clear();
         this.state.elements.clear();
+        this.state.selectionElements.clear();
         this.state.contentScaleElements.clear();
         this.state.contentElements.clear();
         this.state.contentMountElements.clear();
+        this.state.contentInteractionZones.clear();
+        this.state.contentInteractionZoneCleanups.forEach(function(cleanup) {
+            cleanup();
+        });
+        this.state.contentInteractionZoneCleanups.clear();
+        this.state.contentInteractionResizeCleanups.forEach(function(cleanup) {
+            cleanup();
+        });
+        this.state.contentInteractionResizeCleanups.clear();
         this.state.contents.clear();
         this.state.cleanups.clear();
         this.state.autoHeightModes.clear();
@@ -92018,10 +92101,12 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         this.eventCleanups = [];
         (_this_state_layer = this.state.layer) == null ? void 0 : _this_state_layer.remove();
         this.state.layer = undefined;
+        this.state.selectionLayer = undefined;
         this.options.container.removeEventListener('dblclick', this.handleContainerDoubleClick, true);
         this.options.container.removeEventListener('mousedown', this.handleContainerMouseDown, true);
         this.options.container.removeEventListener('mousemove', this.handleContainerMouseMove, true);
         this.options.container.removeEventListener('mouseleave', this.handleContainerMouseLeave, true);
+        this.options.container.removeEventListener('contextmenu', this.handleContainerContextMenu, true);
     };
     _proto.scheduleRender = function scheduleRender() {
         var _this = this;
@@ -92035,6 +92120,7 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
     };
     _proto.invalidateCardHTML = function invalidateCardHTML(id) {
         this.cleanupOverlayContent(id);
+        this.invalidateContentInteractionZones(id);
     };
     _proto.rasterizeCard = function rasterizeCard(id, options) {
         return _async_to_generator(function() {
@@ -92128,6 +92214,7 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         var events = [
             'pageDataChange',
             'selectedItemChange',
+            'preSelectedItemChange',
             'itemPropertyChange',
             'viewportTransform',
             'viewRebuildFinish'
@@ -92137,6 +92224,7 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
                 if (event === 'viewportTransform') {
                     _this.handleViewportTransform();
                 }
+                _this.invalidateContentInteractionZones();
                 _this.scheduleRender();
             });
         });
@@ -92146,6 +92234,13 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         this.options.container.addEventListener('mousedown', this.handleContainerMouseDown, true);
         this.options.container.addEventListener('mousemove', this.handleContainerMouseMove, true);
         this.options.container.addEventListener('mouseleave', this.handleContainerMouseLeave, true);
+        this.options.container.addEventListener('contextmenu', this.handleContainerContextMenu, true);
+    };
+    _proto.isHTMLContextMenuEvent = function isHTMLContextMenuEvent(event) {
+        if (typeof Element !== 'function' || !_instanceof(event.target, Element)) {
+            return false;
+        }
+        return !!event.target.closest('[data-interaction-contextmenu="self"], [data-vvfx-html-contextmenu="self"]');
     };
     _proto.handleViewportTransform = function handleViewportTransform() {
         var editing = this.state.editing;
@@ -92165,6 +92260,7 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         }
         var items = this.options.getItems();
         var frameByChildId = this.renderFrameOverlays(items, layer);
+        var selectionLayer = this.getOrCreateSelectionLayer(layer);
         var visibleCardIds = new Set();
         var editingVisible = false;
         items.forEach(function(item) {
@@ -92188,9 +92284,11 @@ 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);
+            var selectionOverlay = _this.getOrCreateSelectionOverlay(item.id, selectionLayer);
             if (!_this.state.contents.has(item.id)) {
                 _this.renderOverlayHTML(item.id, contentOverlay, html);
             }
+            _this.applyHTMLRootConfig(overlay, 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, _this.isAutoScaleEnabled(item));
@@ -92200,6 +92298,15 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
             overlay.style.height = boxStyle.height;
             overlay.style.transform = boxStyle.transform;
             overlay.style.transformOrigin = '0 0';
+            var selectionBoxStyle = getCardOverlayBoxStyle(itemBox, item.property.width, item.property.height, 0, 0, _this.isAutoScaleEnabled(item));
+            selectionOverlay.style.left = selectionBoxStyle.left;
+            selectionOverlay.style.top = selectionBoxStyle.top;
+            selectionOverlay.style.width = selectionBoxStyle.width;
+            selectionOverlay.style.height = selectionBoxStyle.height;
+            selectionOverlay.style.transform = selectionBoxStyle.transform;
+            selectionOverlay.style.transformOrigin = '0 0';
+            _this.applyHTMLRootConfig(selectionOverlay, html);
+            _this.syncOverlaySelection(item.id, overlay, selectionOverlay);
             _this.syncContentScale(item.id, boxStyle.contentWidth, boxStyle.contentHeight);
             _this.syncAutoHeight(item.id, _this.isAutoHeightEnabled(item));
             _this.syncContentInteraction(item.id);
@@ -92240,6 +92347,9 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
             }
         }
         syncElementStackOrder(layer, rootElements);
+        if (this.state.selectionLayer) {
+            this.state.selectionLayer.style.zIndex = "" + (rootElements.length + 1);
+        }
         this.state.frameElements.forEach(function(frameOverlay, frameId) {
             var frameElements = [];
             for(var _iterator = _create_for_of_iterator_helper_loose(items), _step; !(_step = _iterator()).done;){
@@ -92255,6 +92365,28 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
             syncElementStackOrder(frameOverlay, frameElements);
         });
     };
+    _proto.getOrCreateSelectionLayer = function getOrCreateSelectionLayer(layer) {
+        var _layer_ownerDocument;
+        if (this.state.selectionLayer) {
+            if (this.state.selectionLayer.parentElement !== layer) {
+                layer.appendChild(this.state.selectionLayer);
+            }
+            return this.state.selectionLayer;
+        }
+        var ownerDocument = (_layer_ownerDocument = layer.ownerDocument) != null ? _layer_ownerDocument : typeof document === 'undefined' ? undefined : document;
+        if (!ownerDocument) {
+            return layer;
+        }
+        var selectionLayer = ownerDocument.createElement('div');
+        selectionLayer.className = 'vvfx-card-html-overlay-selection-layer';
+        selectionLayer.style.position = 'absolute';
+        selectionLayer.style.inset = '0';
+        selectionLayer.style.pointerEvents = 'none';
+        selectionLayer.style.zIndex = '1';
+        layer.appendChild(selectionLayer);
+        this.state.selectionLayer = selectionLayer;
+        return selectionLayer;
+    };
     _proto.renderFrameOverlays = function renderFrameOverlays(items, layer) {
         var _this = this;
         var visibleFrameIds = new Set();
@@ -92319,6 +92451,41 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         elements.set(id, overlay);
         return overlay;
     };
+    _proto.getOrCreateSelectionOverlay = function getOrCreateSelectionOverlay(id, parent) {
+        var selectionOverlay = this.state.selectionElements.get(id);
+        if (selectionOverlay) {
+            if (selectionOverlay.parentElement !== parent) {
+                parent.appendChild(selectionOverlay);
+            }
+            return selectionOverlay;
+        }
+        selectionOverlay = document.createElement('div');
+        selectionOverlay.className = 'vvfx-card-html-overlay-selection';
+        selectionOverlay.dataset.itemId = id;
+        selectionOverlay.style.position = 'absolute';
+        selectionOverlay.style.pointerEvents = 'none';
+        selectionOverlay.style.zIndex = '1';
+        parent.appendChild(selectionOverlay);
+        this.state.selectionElements.set(id, selectionOverlay);
+        return selectionOverlay;
+    };
+    _proto.syncOverlaySelection = function syncOverlaySelection(id, overlay, selectionOverlay) {
+        var isSelected = this.options.getSelectedItemIds().includes(id);
+        var isPreSelected = !isSelected && this.options.getPreSelectedItemId() === id;
+        overlay.dataset.selected = isSelected ? 'true' : 'false';
+        overlay.dataset.preSelected = isPreSelected ? 'true' : 'false';
+        selectionOverlay.dataset.selected = isSelected ? 'true' : 'false';
+        selectionOverlay.dataset.preSelected = isPreSelected ? 'true' : 'false';
+        selectionOverlay.style.boxShadow = isSelected ? this.getSelectionBoxShadow() : isPreSelected ? this.getPreSelectionBoxShadow() : '';
+    };
+    _proto.getSelectionBoxShadow = function getSelectionBoxShadow() {
+        var _this_options_getSelectionEdgeStyle = this.options.getSelectionEdgeStyle(), color = _this_options_getSelectionEdgeStyle.color, alpha = _this_options_getSelectionEdgeStyle.alpha, width = _this_options_getSelectionEdgeStyle.width;
+        return "inset 0 0 0 " + formatCssNumber(width) + "px " + formatCssColor(color, alpha);
+    };
+    _proto.getPreSelectionBoxShadow = function getPreSelectionBoxShadow() {
+        var _this_options_getPreSelectionEdgeStyle = this.options.getPreSelectionEdgeStyle(), color = _this_options_getPreSelectionEdgeStyle.color, alpha = _this_options_getPreSelectionEdgeStyle.alpha, width = _this_options_getPreSelectionEdgeStyle.width;
+        return "inset 0 0 0 " + formatCssNumber(width) + "px " + formatCssColor(color, alpha);
+    };
     _proto.getHTMLCardIdByEvent = function getHTMLCardIdByEvent(event) {
         var layer = this.state.layer;
         if (!layer) {
@@ -92357,13 +92524,143 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
             var contentOverlay = this.state.contentElements.get(item.id);
             var interactiveElements = contentOverlay ? Array.from(contentOverlay.querySelectorAll(SHELL_INTERACTIVE_SELECTOR)) : [];
             var isHoveringShellInteractive = interactiveElements.some(function(element) {
-                var rect = element.getBoundingClientRect();
-                return event.clientX >= rect.left && event.clientX <= rect.right && event.clientY >= rect.top && event.clientY <= rect.bottom;
+                return isMouseEventInsideRect(event, element.getBoundingClientRect());
             });
             return isHoveringShellInteractive ? item.id : undefined;
         }
         return undefined;
     };
+    _proto.syncActiveContentInteraction = function syncActiveContentInteraction(event) {
+        var zone = this.getContentInteractiveZoneByEvent(event);
+        this.setActiveContentInteraction(zone);
+    };
+    _proto.scheduleActiveContentInteractionSync = function scheduleActiveContentInteractionSync(event) {
+        var _this = this;
+        if (typeof requestAnimationFrame !== 'function') {
+            this.syncActiveContentInteraction(event);
+            return;
+        }
+        this.pendingContentInteractionEvent = event;
+        if (this.contentInteractionFrame !== undefined) {
+            return;
+        }
+        this.contentInteractionFrame = requestAnimationFrame(function() {
+            _this.contentInteractionFrame = undefined;
+            var pendingEvent = _this.pendingContentInteractionEvent;
+            _this.pendingContentInteractionEvent = undefined;
+            if (pendingEvent) {
+                _this.syncActiveContentInteraction(pendingEvent);
+            }
+        });
+    };
+    _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)) {
+            return;
+        }
+        this.state.activeContentInteraction = zone;
+        var changedIds = new Set();
+        if (previous) {
+            changedIds.add(previous.id);
+        }
+        if (zone) {
+            changedIds.add(zone.id);
+        }
+        changedIds.forEach(function(id) {
+            _this.syncContentInteraction(id);
+        });
+    };
+    _proto.getContentInteractiveZoneByEvent = function getContentInteractiveZoneByEvent(event) {
+        var id = this.getHTMLCardIdByEvent(event);
+        if (!id || this.isEditableCard(id)) {
+            return undefined;
+        }
+        var contentOverlay = this.state.contentElements.get(id);
+        if (!contentOverlay) {
+            return undefined;
+        }
+        var zone = this.getContentInteractionZones(id, contentOverlay).find(function(zone) {
+            return isMouseEventInsideRect(event, zone.rect);
+        });
+        return zone ? {
+            id: id,
+            element: zone.element
+        } : undefined;
+    };
+    _proto.getContentInteractionZones = function getContentInteractionZones(id, contentOverlay) {
+        var _this = this;
+        var cachedZones = this.state.contentInteractionZones.get(id);
+        if (cachedZones) {
+            return cachedZones;
+        }
+        var zones = Array.from(contentOverlay.querySelectorAll(this.getContentInteractiveSelector(id))).filter(function(element) {
+            return !_this.isContentInteractionDisabled(element);
+        }).map(function(element) {
+            return {
+                element: element,
+                rect: element.getBoundingClientRect()
+            };
+        });
+        this.state.contentInteractionZones.set(id, zones);
+        this.observeContentInteractionZoneResizes(id, zones);
+        return zones;
+    };
+    _proto.getContentInteractiveSelector = function getContentInteractiveSelector(id) {
+        var _ref;
+        var _this_options_resolveCardTypeConfig_htmlInteractionSelectors, _this_options_resolveCardTypeConfig;
+        var item = this.options.getItems().find(function(item) {
+            return item.id === id;
+        });
+        if (!item) {
+            return CONTENT_INTERACTIVE_SELECTOR;
+        }
+        var selectors = (_ref = (_this_options_resolveCardTypeConfig = this.options.resolveCardTypeConfig(item)) == null ? void 0 : (_this_options_resolveCardTypeConfig_htmlInteractionSelectors = _this_options_resolveCardTypeConfig.htmlInteractionSelectors) == null ? void 0 : _this_options_resolveCardTypeConfig_htmlInteractionSelectors.filter(Boolean)) != null ? _ref : [];
+        if (selectors.length === 0) {
+            return CONTENT_INTERACTIVE_SELECTOR;
+        }
+        return [].concat([
+            CONTENT_INTERACTIVE_SELECTOR
+        ], selectors).join(', ');
+    };
+    _proto.isContentInteractionDisabled = function isContentInteractionDisabled(element) {
+        if (typeof element.closest !== 'function') {
+            return false;
+        }
+        return !!element.closest(CONTENT_INTERACTION_NONE_SELECTOR);
+    };
+    _proto.invalidateContentInteractionZones = function invalidateContentInteractionZones(id) {
+        if (id) {
+            var _this_state_contentInteractionResizeCleanups_get;
+            this.state.contentInteractionZones.delete(id);
+            (_this_state_contentInteractionResizeCleanups_get = this.state.contentInteractionResizeCleanups.get(id)) == null ? void 0 : _this_state_contentInteractionResizeCleanups_get();
+            this.state.contentInteractionResizeCleanups.delete(id);
+            return;
+        }
+        this.state.contentInteractionZones.clear();
+        this.state.contentInteractionResizeCleanups.forEach(function(cleanup) {
+            cleanup();
+        });
+        this.state.contentInteractionResizeCleanups.clear();
+    };
+    _proto.observeContentInteractionZoneResizes = function observeContentInteractionZoneResizes(id, zones) {
+        var _this = this;
+        var _this_state_contentInteractionResizeCleanups_get;
+        (_this_state_contentInteractionResizeCleanups_get = this.state.contentInteractionResizeCleanups.get(id)) == null ? void 0 : _this_state_contentInteractionResizeCleanups_get();
+        this.state.contentInteractionResizeCleanups.delete(id);
+        if (zones.length === 0 || typeof ResizeObserver !== 'function') {
+            return;
+        }
+        var observer = new ResizeObserver(function() {
+            _this.invalidateContentInteractionZones(id);
+        });
+        zones.forEach(function(zone) {
+            observer.observe(zone.element);
+        });
+        this.state.contentInteractionResizeCleanups.set(id, function() {
+            observer.disconnect();
+        });
+    };
     _proto.getLayerPoint = function getLayerPoint(event) {
         var rect = this.options.container.getBoundingClientRect();
         return {
@@ -92431,6 +92728,9 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         if (sizeChanged && this.state.autoHeightModes.get(id) === 'message') {
             this.requestAutoHeightFromIframes(id, contentOverlay);
         }
+        if (sizeChanged) {
+            this.invalidateContentInteractionZones(id);
+        }
     };
     _proto.requestAutoHeightFromIframes = function requestAutoHeightFromIframes(id, contentOverlay) {
         contentOverlay.querySelectorAll('iframe').forEach(function(iframe) {
@@ -92438,8 +92738,10 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         });
     };
     _proto.syncContentInteraction = function syncContentInteraction(id) {
-        var _this_state_editing;
+        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);
@@ -92454,34 +92756,49 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         }
         if (contentOverlay) {
             contentOverlay.dataset.editing = isEditing ? 'true' : 'false';
-            contentOverlay.style.pointerEvents = 'none';
+            contentOverlay.style.pointerEvents = isInteractive ? 'auto' : 'none';
             contentOverlay.querySelectorAll('iframe').forEach(function(iframe) {
-                iframe.style.pointerEvents = isEditing ? 'auto' : 'none';
-                iframe.tabIndex = isEditing ? 0 : -1;
+                var isActiveIframe = isEditing || (activeInteraction == null ? void 0 : activeInteraction.element) === iframe;
+                iframe.style.pointerEvents = isActiveIframe ? 'auto' : 'none';
+                iframe.tabIndex = isActiveIframe ? 0 : -1;
             });
-            this.syncShellInteraction(id, contentOverlay, isEditing);
+            this.syncShellInteraction(id, contentOverlay, isInteractive);
+            this.syncContentInteractionZones(id, contentOverlay, activeInteraction == null ? void 0 : activeInteraction.element, isEditing, isInteractive);
         }
         if (contentMount) {
             contentMount.dataset.editing = isEditing ? 'true' : 'false';
-            contentMount.style.pointerEvents = isEditing ? 'auto' : 'none';
-            contentMount.inert = !isEditing;
-            if (isEditing) {
+            contentMount.style.pointerEvents = isInteractive ? 'auto' : 'none';
+            contentMount.inert = !isInteractive;
+            if (isInteractive) {
                 contentMount.removeAttribute('aria-hidden');
             } else {
                 contentMount.setAttribute('aria-hidden', 'true');
             }
         }
     };
-    _proto.syncShellInteraction = function syncShellInteraction(id, contentOverlay, isEditing) {
+    _proto.syncContentInteractionZones = function syncContentInteractionZones(id, contentOverlay, activeElement, isEditing, isInteractive) {
+        var _this = this;
+        contentOverlay.querySelectorAll(this.getContentInteractiveSelector(id)).forEach(function(element) {
+            if (!isInteractive || _this.isContentInteractionDisabled(element)) {
+                element.dataset.vvfxHtmlInteractionActive = 'false';
+                element.style.pointerEvents = 'none';
+                return;
+            }
+            var isElementInteractive = isEditing || activeElement === element;
+            element.dataset.vvfxHtmlInteractionActive = isElementInteractive ? 'true' : 'false';
+            element.style.pointerEvents = isElementInteractive ? 'auto' : 'none';
+        });
+    };
+    _proto.syncShellInteraction = function syncShellInteraction(id, contentOverlay, isInteractive) {
         var isHoveringShellInteractive = this.state.hoverShellInteractiveId === id;
-        var isShellInteractiveActive = isEditing || isHoveringShellInteractive;
+        var isShellInteractiveActive = isInteractive || isHoveringShellInteractive;
         contentOverlay.querySelectorAll(SHELL_INTERACTIVE_SELECTOR).forEach(function(element) {
             element.dataset.vvfxHtmlShellInteractiveHover = isHoveringShellInteractive ? 'true' : 'false';
             element.dataset.vvfxHtmlShellInteractiveActive = isShellInteractiveActive ? 'true' : 'false';
             element.style.pointerEvents = isShellInteractiveActive ? 'auto' : 'none';
         });
         contentOverlay.querySelectorAll(EDITING_INTERACTIVE_SELECTOR).forEach(function(element) {
-            element.style.pointerEvents = isEditing ? 'auto' : 'none';
+            element.style.pointerEvents = isInteractive ? 'auto' : 'none';
         });
     };
     _proto.enterEditing = function enterEditing(id) {
@@ -92489,6 +92806,9 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         if (((_this_state_editing = this.state.editing) == null ? void 0 : _this_state_editing.id) === id) {
             return;
         }
+        if (!this.isEditableCard(id)) {
+            return;
+        }
         var box = this.options.getViewBoxById(id);
         if (box.isEmpty()) {
             return;
@@ -92532,6 +92852,13 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         this.options.setViewport(editing.restoreViewport);
         this.scheduleRender();
     };
+    _proto.isEditableCard = function isEditableCard(id) {
+        var _this_options_resolveCardTypeConfig;
+        var item = this.options.getItems().find(function(item) {
+            return item.id === id;
+        });
+        return isCardItem(item) && ((_this_options_resolveCardTypeConfig = this.options.resolveCardTypeConfig(item)) == null ? void 0 : _this_options_resolveCardTypeConfig.editable) !== false;
+    };
     _proto.getEditingFitZoom = function getEditingFitZoom(box, currentZoom) {
         var viewportElement = this.options.container.parentElement;
         if (!viewportElement) {
@@ -92556,6 +92883,7 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
     };
     _proto.renderOverlayHTML = function renderOverlayHTML(id, overlay, html) {
         this.cleanupOverlayContent(id);
+        this.invalidateContentInteractionZones(id);
         overlay.innerHTML = '';
         var shell = mountHTMLShell(overlay, html.content, html.shell);
         var autoHeightMeasureElement = shell.contentContainer.isConnected ? shell.contentContainer : overlay;
@@ -92567,12 +92895,72 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
             id: id,
             autoHeight: this.isAutoHeightEnabled(item)
         });
+        this.observeContentInteractionZones(id, shell.contentContainer);
         this.state.cleanups.set(id, function() {
             contentCleanup == null ? void 0 : contentCleanup();
             shell.cleanup == null ? void 0 : shell.cleanup.call(shell);
         });
         this.state.contents.set(id, html);
     };
+    _proto.observeContentInteractionZones = function observeContentInteractionZones(id, contentContainer) {
+        var _this = this;
+        var _this_state_contentInteractionZoneCleanups_get;
+        (_this_state_contentInteractionZoneCleanups_get = this.state.contentInteractionZoneCleanups.get(id)) == null ? void 0 : _this_state_contentInteractionZoneCleanups_get();
+        this.state.contentInteractionZoneCleanups.delete(id);
+        if (typeof MutationObserver !== 'function') {
+            return;
+        }
+        var observer = new MutationObserver(function() {
+            _this.invalidateContentInteractionZones(id);
+        });
+        observer.observe(contentContainer, {
+            attributes: true,
+            childList: true,
+            subtree: true
+        });
+        this.state.contentInteractionZoneCleanups.set(id, function() {
+            observer.disconnect();
+        });
+    };
+    _proto.applyHTMLRootConfig = function applyHTMLRootConfig(root, html) {
+        var _ref, _config_style;
+        var _this_htmlRootConfigCleanups_get, _config_className;
+        (_this_htmlRootConfigCleanups_get = this.htmlRootConfigCleanups.get(root)) == null ? void 0 : _this_htmlRootConfigCleanups_get();
+        this.htmlRootConfigCleanups.delete(root);
+        var config = html.root;
+        if (!config) {
+            return;
+        }
+        var classNames = (_ref = (_config_className = config.className) == null ? void 0 : _config_className.split(/\s+/).filter(Boolean)) != null ? _ref : [];
+        var styleProperties = [];
+        classNames.forEach(function(className) {
+            root.classList.add(className);
+        });
+        Object.entries((_config_style = config.style) != null ? _config_style : {}).forEach(function(param) {
+            var property = param[0], value = param[1];
+            if (value === undefined) {
+                return;
+            }
+            styleProperties.push(property);
+            if (property.startsWith('--') || property.includes('-')) {
+                root.style.setProperty(property, String(value));
+                return;
+            }
+            root.style[property] = String(value);
+        });
+        this.htmlRootConfigCleanups.set(root, function() {
+            classNames.forEach(function(className) {
+                root.classList.remove(className);
+            });
+            styleProperties.forEach(function(property) {
+                if (property.startsWith('--') || property.includes('-')) {
+                    root.style.removeProperty(property);
+                    return;
+                }
+                root.style[property] = '';
+            });
+        });
+    };
     _proto.renderOverlayContent = function renderOverlayContent(overlay, content, options) {
         var _this = this;
         switch(content.kind){
@@ -92638,6 +93026,7 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         };
     };
     _proto.cleanupOverlayContent = function cleanupOverlayContent(id) {
+        var _this_state_contentInteractionZoneCleanups_get;
         var cleanup = this.state.cleanups.get(id);
         if (cleanup) {
             cleanup();
@@ -92646,13 +93035,18 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         this.state.contents.delete(id);
         this.state.contentMountElements.delete(id);
         this.state.autoHeightModes.delete(id);
+        this.invalidateContentInteractionZones(id);
+        (_this_state_contentInteractionZoneCleanups_get = this.state.contentInteractionZoneCleanups.get(id)) == null ? void 0 : _this_state_contentInteractionZoneCleanups_get();
+        this.state.contentInteractionZoneCleanups.delete(id);
         this.cleanupAutoHeight(id);
     };
     _proto.removeOverlay = function removeOverlay(id) {
-        var _this_state_elements_get;
+        var _this_state_elements_get, _this_state_selectionElements_get;
         this.cleanupOverlayContent(id);
         (_this_state_elements_get = this.state.elements.get(id)) == null ? void 0 : _this_state_elements_get.remove();
+        (_this_state_selectionElements_get = this.state.selectionElements.get(id)) == null ? void 0 : _this_state_selectionElements_get.remove();
         this.state.elements.delete(id);
+        this.state.selectionElements.delete(id);
         this.state.contentScaleElements.delete(id);
         this.state.contentElements.delete(id);
     };
@@ -92885,6 +93279,14 @@ var HTMLOverlayManager = /*#__PURE__*/ function() {
         }
         return ((_this_options_resolveCardTypeConfig = this.options.resolveCardTypeConfig(item)) == null ? void 0 : _this_options_resolveCardTypeConfig.autoScale) !== false;
     };
+    _create_class(HTMLOverlayManager, [
+        {
+            key: "layerElement",
+            get: function get() {
+                return this.state.layer;
+            }
+        }
+    ]);
     return HTMLOverlayManager;
 }();
 function waitForCardCaptureReady(root) {
@@ -92926,6 +93328,17 @@ function waitForCardCaptureReady(root) {
         });
     })();
 }
+function formatCssColor(color, alpha) {
+    var normalizedColor = Math.max(0, Math.min(0xFFFFFF, Math.round(color)));
+    var red = normalizedColor >> 16 & 0xFF;
+    var green = normalizedColor >> 8 & 0xFF;
+    var blue = normalizedColor & 0xFF;
+    return "rgba(" + red + ", " + green + ", " + blue + ", " + formatCssNumber(alpha) + ")";
+}
+function formatCssNumber(value) {
+    var normalized = Number.isFinite(value) ? value : 0;
+    return Number(normalized.toFixed(6)).toString();
+}
 function nextAnimationFrame() {
     return new Promise(function(resolve) {
         requestAnimationFrame(function() {
@@ -93344,6 +93757,9 @@ function createFlattenedContent(target, frameStyle, ownerDocument) {
     });
     return replacement;
 }
+function isMouseEventInsideRect(event, rect) {
+    return event.clientX >= rect.left && event.clientX <= rect.right && event.clientY >= rect.top && event.clientY <= rect.bottom;
+}
 function createFlattenedIframeContent(iframe) {
     var doc = iframe.contentDocument;
     if (!doc) {
@@ -93383,6 +93799,19 @@ function withTimeout(promise, timeout) {
     });
 }
 
+function orderSDKCanvasLayers(param) {
+    var container = param.container, playerContainer = param.playerContainer, htmlOverlayLayer = param.htmlOverlayLayer, gestureCanvas = param.gestureCanvas;
+    [
+        playerContainer,
+        htmlOverlayLayer,
+        gestureCanvas
+    ].forEach(function(layer) {
+        if ((layer == null ? void 0 : layer.parentElement) === container) {
+            container.appendChild(layer);
+        }
+    });
+}
+
 var HTML_CARD_EDITING_VIEWPORT_PADDING = 48;
 var SDK = /*#__PURE__*/ function() {
     function SDK(container, mode) {
@@ -93489,6 +93918,35 @@ var SDK = /*#__PURE__*/ function() {
                     propertyValue: height
                 });
             },
+            getSelectedItemIds: function getSelectedItemIds() {
+                var _ref;
+                var _this__pageData;
+                return (_ref = (_this__pageData = _this._pageData) == null ? void 0 : _this__pageData.activeData.selectedItems) != null ? _ref : [];
+            },
+            getPreSelectedItemId: function getPreSelectedItemId() {
+                var _this__pageData;
+                return (_this__pageData = _this._pageData) == null ? void 0 : _this__pageData.activeData.preSelectedItem;
+            },
+            getSelectionEdgeStyle: function getSelectionEdgeStyle() {
+                var _SDK_config_gestureHandlerConfig_transformGizmoConfig = SDK.config.gestureHandlerConfig.transformGizmoConfig, wireframeColor = _SDK_config_gestureHandlerConfig_transformGizmoConfig.wireframeColor, wireframeAlpha = _SDK_config_gestureHandlerConfig_transformGizmoConfig.wireframeAlpha, wireframeWidth = _SDK_config_gestureHandlerConfig_transformGizmoConfig.wireframeWidth;
+                return {
+                    color: wireframeColor,
+                    alpha: wireframeAlpha,
+                    width: wireframeWidth
+                };
+            },
+            getPreSelectionEdgeStyle: function getPreSelectionEdgeStyle() {
+                var _SDK_config_gestureHandlerConfig_selectorGizmoConfig = SDK.config.gestureHandlerConfig.selectorGizmoConfig, preSelectedColor = _SDK_config_gestureHandlerConfig_selectorGizmoConfig.preSelectedColor, preSelectedWidth = _SDK_config_gestureHandlerConfig_selectorGizmoConfig.preSelectedWidth;
+                return {
+                    color: preSelectedColor,
+                    alpha: 1,
+                    width: preSelectedWidth
+                };
+            },
+            getCanvasEventTarget: function getCanvasEventTarget() {
+                var _this__gestureHandler;
+                return (_this__gestureHandler = _this._gestureHandler) == null ? void 0 : _this__gestureHandler.wireframeApplication.view;
+            },
             resolveCardHTML: function resolveCardHTML(item) {
                 return isCardItem(item) ? _this.resolveCardHTML(item) : undefined;
             },
@@ -93497,6 +93955,7 @@ var SDK = /*#__PURE__*/ function() {
             }
         });
         this._htmlOverlayManager.attach();
+        this.syncCanvasLayerOrder();
     }
     var _proto = SDK.prototype;
     _proto.dispose = function dispose() {
@@ -93592,6 +94051,7 @@ var SDK = /*#__PURE__*/ function() {
                                 this.initPlayer(SDK.config.mode);
                                 this._pageDataUtils = new PageDataUtils(this.player, this._playerContainer, this._eventEmitter, this);
                                 this._gestureHandler = new GestureHandler(this._container);
+                                this.syncCanvasLayerOrder();
                                 return [
                                     4,
                                     this.runByPageData(this.pageData)
@@ -93641,6 +94101,16 @@ var SDK = /*#__PURE__*/ function() {
             env: 'editor'
         });
         this.player.resize();
+        this.syncCanvasLayerOrder();
+    };
+    _proto.syncCanvasLayerOrder = function syncCanvasLayerOrder() {
+        var _this__htmlOverlayManager, _this__gestureHandler;
+        orderSDKCanvasLayers({
+            container: this._container,
+            playerContainer: this._playerContainer,
+            htmlOverlayLayer: (_this__htmlOverlayManager = this._htmlOverlayManager) == null ? void 0 : _this__htmlOverlayManager.layerElement,
+            gestureCanvas: (_this__gestureHandler = this._gestureHandler) == null ? void 0 : _this__gestureHandler.wireframeApplication.view
+        });
     };
     _proto.getInitParam = function getInitParam(param) {
         return _async_to_generator(function() {