@contentful/experiences-visual-editor-react 3.0.0 → 3.1.0-beta.0

package/dist/index.js

@@ -2869,6 +2869,7 @@ const OUTGOING_EVENTS = {
     SDKFeatures: 'sdkFeatures',
     RequestEntities: 'REQUEST_ENTITIES',
     CanvasGeometryUpdated: 'canvasGeometryUpdated',
+    CanvasPan: 'canvasPan',
 };
 const INCOMING_EVENTS = {
     RequestEditorMode: 'requestEditorMode',
@@ -4813,7 +4814,6 @@ const EmptyCanvasMessage = () => {
  */
 const sendCanvasGeometryUpdatedMessage = async (tree, sourceEvent) => {
     const nodeToCoordinatesMap = {};
-    await waitForAllImagesToBeLoaded();
     collectNodeCoordinates(tree.root, nodeToCoordinatesMap);
     sendMessage(OUTGOING_EVENTS.CanvasGeometryUpdated, {
         size: {
@@ -4842,30 +4842,26 @@ const collectNodeCoordinates = (node, nodeToCoordinatesMap) => {
     }
     node.children.forEach((child) => collectNodeCoordinates(child, nodeToCoordinatesMap));
 };
-const waitForAllImagesToBeLoaded = () => {
-    // If the document contains an image, wait for this image to be loaded before collecting & sending all geometry data.
-    const allImageNodes = document.querySelectorAll('img');
-    return Promise.all(Array.from(allImageNodes).map((imageNode) => {
-        if (imageNode.complete) {
-            return Promise.resolve();
-        }
-        return new Promise((resolve, reject) => {
-            const handleImageLoad = (event) => {
-                imageNode.removeEventListener('load', handleImageLoad);
-                imageNode.removeEventListener('error', handleImageLoad);
-                if (event.type === 'error') {
-                    console.warn('Image failed to load:', imageNode);
-                    reject();
-                }
-                else {
-                    resolve();
-                }
-            };
-            imageNode.addEventListener('load', handleImageLoad);
-            imageNode.addEventListener('error', handleImageLoad);
-        });
-    }));
-};
+function waitForImageToBeLoaded(imageNode) {
+    if (imageNode.complete) {
+        return Promise.resolve();
+    }
+    return new Promise((resolve, reject) => {
+        const handleImageLoad = (event) => {
+            imageNode.removeEventListener('load', handleImageLoad);
+            imageNode.removeEventListener('error', handleImageLoad);
+            if (event.type === 'error') {
+                console.warn('Image failed to load:', imageNode);
+                reject();
+            }
+            else {
+                resolve();
+            }
+        };
+        imageNode.addEventListener('load', handleImageLoad);
+        imageNode.addEventListener('error', handleImageLoad);
+    });
+}
 
 const useCanvasGeometryUpdates = ({ tree }) => {
     const debouncedUpdateGeometry = useMemo(() => debounce((tree, sourceEvent) => {
@@ -4880,6 +4876,9 @@ const useCanvasGeometryUpdates = ({ tree }) => {
         // yet show the need for this. So we might be able to drop this later to boost performance.
         trailing: true,
     }), []);
+    const debouncedCollectImages = useMemo(() => debounce(() => {
+        return Array.from(document.querySelectorAll('img'));
+    }, 300, { leading: true, trailing: true }), []);
     // Store tree in a ref to avoid the need to deactivate & reactivate the mutation observer
     // when the tree changes. This is important to avoid missing out on some mutation events.
     const treeRef = useRef(tree);
@@ -4892,9 +4891,19 @@ const useCanvasGeometryUpdates = ({ tree }) => {
         window.addEventListener('resize', resizeEventListener);
         return () => window.removeEventListener('resize', resizeEventListener);
     }, [debouncedUpdateGeometry]);
+    const [{ allImages, loadedImages }, setImages] = useState(() => {
+        const allImages = debouncedCollectImages();
+        const loadedImages = new WeakSet();
+        return { allImages, loadedImages };
+    });
     // Handling DOM mutations
     useEffect(() => {
-        const observer = new MutationObserver(() => debouncedUpdateGeometry(treeRef.current, 'mutation'));
+        const observer = new MutationObserver(() => {
+            debouncedUpdateGeometry(treeRef.current, 'mutation');
+            // find all images on any DOM change
+            const allImages = debouncedCollectImages();
+            setImages((prevState) => ({ ...prevState, allImages }));
+        });
         // send initial geometry in case the tree is empty
         debouncedUpdateGeometry(treeRef.current, 'mutation');
         observer.observe(document.documentElement, {
@@ -4903,7 +4912,42 @@ const useCanvasGeometryUpdates = ({ tree }) => {
             attributes: true,
         });
         return () => observer.disconnect();
-    }, [debouncedUpdateGeometry]);
+    }, [debouncedCollectImages, debouncedUpdateGeometry]);
+    // Handling image loading separately,
+    // as each image can load at a different time, some might be hidden or lazy loaded
+    useEffect(() => {
+        let isCurrent = true;
+        allImages.forEach(async (imageNode) => {
+            if (loadedImages.has(imageNode)) {
+                return;
+            }
+            // update the geometry after each image is loaded, as it can shift the layout
+            await waitForImageToBeLoaded(imageNode);
+            if (isCurrent) {
+                loadedImages.add(imageNode);
+                debouncedUpdateGeometry(treeRef.current, 'imageLoad');
+            }
+        });
+        return () => {
+            isCurrent = false;
+        };
+    }, [allImages, loadedImages, debouncedUpdateGeometry]);
+    // Delegate scrolling to the canvas
+    useEffect(() => {
+        const onWheel = (e) => {
+            e.preventDefault();
+            sendMessage(OUTGOING_EVENTS.CanvasPan, {
+                ctrlKey: e.ctrlKey,
+                metaKey: e.metaKey,
+                clientX: e.clientX,
+                clientY: e.clientY,
+                deltaX: e.deltaX,
+                deltaY: e.deltaY,
+            });
+        };
+        document.addEventListener('wheel', onWheel, { passive: false });
+        return () => document.removeEventListener('wheel', onWheel);
+    }, []);
 };
 
 const RootRenderer = ({ inMemoryEntitiesStore }) => {