@elementor/editor-canvas 3.33.0-221 → 3.33.0-222

package/dist/index.js

@@ -137,6 +137,7 @@ var import_react3 = require("react");
 var import_react4 = require("@floating-ui/react");
 function useFloatingOnElement({ element, isSelected }) {
   const [isOpen, setIsOpen] = (0, import_react3.useState)(false);
+  const sizeModifier = 2;
   const { refs, floatingStyles, context } = (0, import_react4.useFloating)({
     // Must be controlled for interactions (like hover) to work.
     open: isOpen || isSelected,
@@ -144,13 +145,15 @@ function useFloatingOnElement({ element, isSelected }) {
     whileElementsMounted: import_react4.autoUpdate,
     middleware: [
       // Match the floating element's size to the reference element.
-      (0, import_react4.size)({
-        apply({ elements, rects }) {
-          Object.assign(elements.floating.style, {
-            width: `${rects.reference.width + 2}px`,
-            height: `${rects.reference.height + 2}px`
-          });
-        }
+      (0, import_react4.size)(() => {
+        return {
+          apply({ elements, rects }) {
+            Object.assign(elements.floating.style, {
+              width: `${rects.reference.width + sizeModifier}px`,
+              height: `${rects.reference.height + sizeModifier}px`
+            });
+          }
+        };
       }),
       // Center the floating element on the reference element.
       (0, import_react4.offset)(({ rects }) => -rects.reference.height / 2 - rects.floating.height / 2)
@@ -170,6 +173,23 @@ function useFloatingOnElement({ element, isSelected }) {
   };
 }
 
+// src/hooks/use-has-overlapping.ts
+var possibleOverlappingSelectors = [".e-off-canvas"];
+var useHasOverlapping = () => {
+  const preview = window.elementor?.$preview?.[0];
+  if (!preview) {
+    return false;
+  }
+  const hasOverlapping = possibleOverlappingSelectors.map((selector) => Array.from(preview?.contentWindow?.document.body.querySelectorAll(selector) ?? [])).flat().some(
+    (elem) => elem.checkVisibility({
+      opacityProperty: true,
+      visibilityProperty: true,
+      contentVisibilityAuto: true
+    })
+  );
+  return hasOverlapping;
+};
+
 // src/components/element-overlay.tsx
 var CANVAS_WRAPPER_ID = "elementor-preview-responsive-wrapper";
 var OverlayBox = (0, import_ui.styled)(import_ui.Box, {
@@ -182,9 +202,10 @@ var OverlayBox = (0, import_ui.styled)(import_ui.Box, {
 function ElementOverlay({ element, isSelected, id }) {
   const { context, floating, isVisible } = useFloatingOnElement({ element, isSelected });
   const { getFloatingProps, getReferenceProps } = (0, import_react5.useInteractions)([(0, import_react5.useHover)(context)]);
+  const hasOverlapping = useHasOverlapping();
   useBindReactPropsToElement(element, getReferenceProps);
   const isSmallerOffset = element.offsetHeight <= 1;
-  return isVisible && /* @__PURE__ */ React.createElement(import_react5.FloatingPortal, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React.createElement(
+  return isVisible && !hasOverlapping && /* @__PURE__ */ React.createElement(import_react5.FloatingPortal, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React.createElement(
     OverlayBox,
     {
       ref: floating.setRef,

package/dist/index.mjs

@@ -97,6 +97,7 @@ import { useEffect as useEffect3, useState } from "react";
 import { autoUpdate, offset, size, useFloating } from "@floating-ui/react";
 function useFloatingOnElement({ element, isSelected }) {
   const [isOpen, setIsOpen] = useState(false);
+  const sizeModifier = 2;
   const { refs, floatingStyles, context } = useFloating({
     // Must be controlled for interactions (like hover) to work.
     open: isOpen || isSelected,
@@ -104,13 +105,15 @@ function useFloatingOnElement({ element, isSelected }) {
     whileElementsMounted: autoUpdate,
     middleware: [
       // Match the floating element's size to the reference element.
-      size({
-        apply({ elements, rects }) {
-          Object.assign(elements.floating.style, {
-            width: `${rects.reference.width + 2}px`,
-            height: `${rects.reference.height + 2}px`
-          });
-        }
+      size(() => {
+        return {
+          apply({ elements, rects }) {
+            Object.assign(elements.floating.style, {
+              width: `${rects.reference.width + sizeModifier}px`,
+              height: `${rects.reference.height + sizeModifier}px`
+            });
+          }
+        };
       }),
       // Center the floating element on the reference element.
       offset(({ rects }) => -rects.reference.height / 2 - rects.floating.height / 2)
@@ -130,6 +133,23 @@ function useFloatingOnElement({ element, isSelected }) {
   };
 }
 
+// src/hooks/use-has-overlapping.ts
+var possibleOverlappingSelectors = [".e-off-canvas"];
+var useHasOverlapping = () => {
+  const preview = window.elementor?.$preview?.[0];
+  if (!preview) {
+    return false;
+  }
+  const hasOverlapping = possibleOverlappingSelectors.map((selector) => Array.from(preview?.contentWindow?.document.body.querySelectorAll(selector) ?? [])).flat().some(
+    (elem) => elem.checkVisibility({
+      opacityProperty: true,
+      visibilityProperty: true,
+      contentVisibilityAuto: true
+    })
+  );
+  return hasOverlapping;
+};
+
 // src/components/element-overlay.tsx
 var CANVAS_WRAPPER_ID = "elementor-preview-responsive-wrapper";
 var OverlayBox = styled(Box, {
@@ -142,9 +162,10 @@ var OverlayBox = styled(Box, {
 function ElementOverlay({ element, isSelected, id }) {
   const { context, floating, isVisible } = useFloatingOnElement({ element, isSelected });
   const { getFloatingProps, getReferenceProps } = useInteractions([useHover(context)]);
+  const hasOverlapping = useHasOverlapping();
   useBindReactPropsToElement(element, getReferenceProps);
   const isSmallerOffset = element.offsetHeight <= 1;
-  return isVisible && /* @__PURE__ */ React.createElement(FloatingPortal, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React.createElement(
+  return isVisible && !hasOverlapping && /* @__PURE__ */ React.createElement(FloatingPortal, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React.createElement(
     OverlayBox,
     {
       ref: floating.setRef,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-canvas",
   "description": "Elementor Editor Canvas",
-  "version": "3.33.0-221",
+  "version": "3.33.0-222",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -37,19 +37,19 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@elementor/editor": "3.33.0-221",
-    "@elementor/editor-notifications": "3.33.0-221",
-    "@elementor/editor-documents": "3.33.0-221",
-    "@elementor/editor-elements": "3.33.0-221",
-    "@elementor/editor-props": "3.33.0-221",
-    "@elementor/editor-responsive": "3.33.0-221",
-    "@elementor/editor-styles": "3.33.0-221",
-    "@elementor/editor-styles-repository": "3.33.0-221",
-    "@elementor/editor-v1-adapters": "3.33.0-221",
-    "@elementor/twing": "3.33.0-221",
+    "@elementor/editor": "3.33.0-222",
+    "@elementor/editor-notifications": "3.33.0-222",
+    "@elementor/editor-documents": "3.33.0-222",
+    "@elementor/editor-elements": "3.33.0-222",
+    "@elementor/editor-props": "3.33.0-222",
+    "@elementor/editor-responsive": "3.33.0-222",
+    "@elementor/editor-styles": "3.33.0-222",
+    "@elementor/editor-styles-repository": "3.33.0-222",
+    "@elementor/editor-v1-adapters": "3.33.0-222",
+    "@elementor/twing": "3.33.0-222",
     "@elementor/ui": "1.36.12",
-    "@elementor/utils": "3.33.0-221",
-    "@elementor/wp-media": "3.33.0-221",
+    "@elementor/utils": "3.33.0-222",
+    "@elementor/wp-media": "3.33.0-222",
     "@floating-ui/react": "^0.27.5",
     "@wordpress/i18n": "^5.13.0"
   },

package/src/components/element-overlay.tsx

@@ -4,6 +4,7 @@ import { FloatingPortal, useHover, useInteractions } from '@floating-ui/react';
 
 import { useBindReactPropsToElement } from '../hooks/use-bind-react-props-to-element';
 import { useFloatingOnElement } from '../hooks/use-floating-on-element';
+import { useHasOverlapping } from '../hooks/use-has-overlapping';
 
 export const CANVAS_WRAPPER_ID = 'elementor-preview-responsive-wrapper';
 
@@ -25,12 +26,14 @@ const OverlayBox = styled( Box, {
 export function ElementOverlay( { element, isSelected, id }: Props ) {
 	const { context, floating, isVisible } = useFloatingOnElement( { element, isSelected } );
 	const { getFloatingProps, getReferenceProps } = useInteractions( [ useHover( context ) ] );
+	const hasOverlapping = useHasOverlapping();
 
 	useBindReactPropsToElement( element, getReferenceProps );
 	const isSmallerOffset = element.offsetHeight <= 1;
 
 	return (
-		isVisible && (
+		isVisible &&
+		! hasOverlapping && (
 			<FloatingPortal id={ CANVAS_WRAPPER_ID }>
 				<OverlayBox
 					ref={ floating.setRef }

package/src/hooks/__tests__/use-has-overlapping.test.ts

@@ -0,0 +1,187 @@
+import { createDOMElement } from 'test-utils';
+import { renderHook } from '@testing-library/react';
+
+import { type CanvasExtendedWindow } from '../../sync/types';
+import { useHasOverlapping } from '../use-has-overlapping';
+
+const OFF_CANVAS_CLASS = 'e-off-canvas';
+
+describe( 'useHasOverlapping', () => {
+	let mockPreviewFrame: HTMLIFrameElement;
+	let mockDocument: Document;
+
+	const setupPreviewFrame = ( hasOffCanvas: boolean, isVisible: boolean = true ) => {
+		// Arrange - Create mock iframe and document
+		mockPreviewFrame = createDOMElement( { tag: 'iframe' } ) as HTMLIFrameElement;
+		mockDocument = document.implementation.createHTMLDocument( 'Preview' );
+
+		if ( hasOffCanvas ) {
+			const offCanvasElement = createDOMElement( {
+				tag: 'div',
+				attrs: { class: OFF_CANVAS_CLASS },
+			} );
+
+			// Mock checkVisibility method
+			offCanvasElement.checkVisibility = jest.fn().mockReturnValue( isVisible );
+
+			mockDocument.body.appendChild( offCanvasElement );
+		}
+
+		// Setup the content window with the mock document
+		Object.defineProperty( mockPreviewFrame, 'contentWindow', {
+			value: {
+				document: mockDocument,
+			},
+			writable: true,
+		} );
+
+		// Setup window.elementor.$preview
+		( window as unknown as CanvasExtendedWindow ).elementor = {
+			$preview: [ mockPreviewFrame ],
+		};
+	};
+
+	const cleanupPreviewFrame = () => {
+		delete ( window as unknown as CanvasExtendedWindow ).elementor;
+	};
+
+	afterEach( () => {
+		cleanupPreviewFrame();
+	} );
+
+	it( 'should return false when preview frame is not available', () => {
+		// Arrange - No preview frame setup
+
+		// Act
+		const { result } = renderHook( () => useHasOverlapping() );
+
+		// Assert
+		expect( result.current ).toBe( false );
+	} );
+
+	it( 'should return false when off-canvas element does not exist', () => {
+		// Arrange
+		setupPreviewFrame( false );
+
+		// Act
+		const { result } = renderHook( () => useHasOverlapping() );
+
+		// Assert
+		expect( result.current ).toBe( false );
+	} );
+
+	it( 'should return true when off-canvas element exists and is visible', () => {
+		// Arrange
+		setupPreviewFrame( true, true );
+
+		// Act
+		const { result } = renderHook( () => useHasOverlapping() );
+
+		// Assert
+		expect( result.current ).toBe( true );
+	} );
+
+	it( 'should return false when off-canvas element exists but is not visible', () => {
+		// Arrange
+		setupPreviewFrame( true, false );
+
+		// Act
+		const { result } = renderHook( () => useHasOverlapping() );
+
+		// Assert
+		expect( result.current ).toBe( false );
+	} );
+
+	it( 'should check visibility with correct options', () => {
+		// Arrange
+		setupPreviewFrame( true, true );
+
+		// Act
+		renderHook( () => useHasOverlapping() );
+
+		// Assert
+		// eslint-disable-next-line testing-library/no-node-access
+		const offCanvasElement = mockDocument.querySelector( `.${ OFF_CANVAS_CLASS }` );
+		expect( offCanvasElement?.checkVisibility ).toHaveBeenCalledWith( {
+			opacityProperty: true,
+			visibilityProperty: true,
+			contentVisibilityAuto: true,
+		} );
+	} );
+
+	it( 'should return true when multiple off-canvas elements exist and at least one is visible', () => {
+		// Arrange
+		mockPreviewFrame = createDOMElement( { tag: 'iframe' } ) as HTMLIFrameElement;
+		mockDocument = document.implementation.createHTMLDocument( 'Preview' );
+
+		const offCanvasElement1 = createDOMElement( {
+			tag: 'div',
+			attrs: { class: OFF_CANVAS_CLASS },
+		} );
+		offCanvasElement1.checkVisibility = jest.fn().mockReturnValue( false );
+
+		const offCanvasElement2 = createDOMElement( {
+			tag: 'div',
+			attrs: { class: OFF_CANVAS_CLASS },
+		} );
+		offCanvasElement2.checkVisibility = jest.fn().mockReturnValue( true );
+
+		mockDocument.body.appendChild( offCanvasElement1 );
+		mockDocument.body.appendChild( offCanvasElement2 );
+
+		Object.defineProperty( mockPreviewFrame, 'contentWindow', {
+			value: {
+				document: mockDocument,
+			},
+			writable: true,
+		} );
+
+		( window as unknown as CanvasExtendedWindow ).elementor = {
+			$preview: [ mockPreviewFrame ],
+		};
+
+		// Act
+		const { result } = renderHook( () => useHasOverlapping() );
+
+		// Assert
+		expect( result.current ).toBe( true );
+	} );
+
+	it( 'should return false when multiple off-canvas elements exist but none are visible', () => {
+		// Arrange
+		mockPreviewFrame = createDOMElement( { tag: 'iframe' } ) as HTMLIFrameElement;
+		mockDocument = document.implementation.createHTMLDocument( 'Preview' );
+
+		const offCanvasElement1 = createDOMElement( {
+			tag: 'div',
+			attrs: { class: OFF_CANVAS_CLASS },
+		} );
+		offCanvasElement1.checkVisibility = jest.fn().mockReturnValue( false );
+
+		const offCanvasElement2 = createDOMElement( {
+			tag: 'div',
+			attrs: { class: OFF_CANVAS_CLASS },
+		} );
+		offCanvasElement2.checkVisibility = jest.fn().mockReturnValue( false );
+
+		mockDocument.body.appendChild( offCanvasElement1 );
+		mockDocument.body.appendChild( offCanvasElement2 );
+
+		Object.defineProperty( mockPreviewFrame, 'contentWindow', {
+			value: {
+				document: mockDocument,
+			},
+			writable: true,
+		} );
+
+		( window as unknown as CanvasExtendedWindow ).elementor = {
+			$preview: [ mockPreviewFrame ],
+		};
+
+		// Act
+		const { result } = renderHook( () => useHasOverlapping() );
+
+		// Assert
+		expect( result.current ).toBe( false );
+	} );
+} );

package/src/hooks/use-floating-on-element.ts

@@ -8,6 +8,7 @@ type Options = {
 
 export function useFloatingOnElement( { element, isSelected }: Options ) {
 	const [ isOpen, setIsOpen ] = useState( false );
+	const sizeModifier = 2;
 
 	const { refs, floatingStyles, context } = useFloating( {
 		// Must be controlled for interactions (like hover) to work.
@@ -18,15 +19,17 @@ export function useFloatingOnElement( { element, isSelected }: Options ) {
 
 		middleware: [
 			// Match the floating element's size to the reference element.
-			size( {
-				apply( { elements, rects } ) {
-					Object.assign( elements.floating.style, {
-						width: `${ rects.reference.width + 2 }px`,
-						height: `${ rects.reference.height + 2 }px`,
-					} );
-				},
-			} ),
 
+			size( () => {
+				return {
+					apply( { elements, rects } ) {
+						Object.assign( elements.floating.style, {
+							width: `${ rects.reference.width + sizeModifier }px`,
+							height: `${ rects.reference.height + sizeModifier }px`,
+						} );
+					},
+				};
+			} ),
 			// Center the floating element on the reference element.
 			offset( ( { rects } ) => -rects.reference.height / 2 - rects.floating.height / 2 ),
 		],

package/src/hooks/use-has-overlapping.ts

@@ -0,0 +1,21 @@
+import { type CanvasExtendedWindow } from '../sync/types';
+
+const possibleOverlappingSelectors = [ '.e-off-canvas' ]; // can add more selectors here if needed, make sure to loop through them to check classList
+
+export const useHasOverlapping = () => {
+	const preview = ( window as unknown as CanvasExtendedWindow ).elementor?.$preview?.[ 0 ];
+	if ( ! preview ) {
+		return false;
+	}
+	const hasOverlapping = possibleOverlappingSelectors
+		.map( ( selector ) => Array.from( preview?.contentWindow?.document.body.querySelectorAll( selector ) ?? [] ) )
+		.flat()
+		.some( ( elem ) =>
+			elem.checkVisibility( {
+				opacityProperty: true,
+				visibilityProperty: true,
+				contentVisibilityAuto: true,
+			} )
+		);
+	return hasOverlapping;
+};