@contentstack/live-preview-utils 3.0.0 → 3.0.2

package/dist/modern/visualBuilder/utils/updateFocussedState.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/utils/updateFocussedState.ts"],"sourcesContent":["import { VisualBuilder } from \"..\";\nimport { extractDetailsFromCslp } from \"../../cslp\";\nimport { getAddInstanceButtons } from \"../generators/generateAddInstanceButtons\";\nimport { addFocusOverlay } from \"../generators/generateOverlay\";\nimport { hideHoverOutline } from \"../listeners/mouseHover\";\nimport { LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX, RIGHT_EDGE_BUFFER, TOOLBAR_EDGE_BUFFER, TOP_EDGE_BUFFER } from \"./constants\";\nimport getChildrenDirection from \"./getChildrenDirection\";\nimport getStyleOfAnElement from \"./getStyleOfAnElement\";\n\ninterface ToolbarPositionParams {\n    focusedToolbar: HTMLElement | null;\n    selectedElementDimension: DOMRect;\n}\n/**\n * Adjust the position of the field toolbar instead of clearing the innerhtml fo the focused toolbar.\n * By doing this, can avoid the re-rendering of the focus field toolbar.\n*/\nfunction positionToolbar({\n    focusedToolbar,\n    selectedElementDimension,\n}: ToolbarPositionParams): void {\n    if (focusedToolbar) {\n        const targetElementRightEdgeOffset = window.scrollX + window.innerWidth - selectedElementDimension.left;\n        const distanceFromTop = selectedElementDimension.top + window.scrollY - TOOLBAR_EDGE_BUFFER;\n\n        // Adjust top position based on the available space\n        const adjustedDistanceFromTop = \n            selectedElementDimension.top + window.scrollY < TOP_EDGE_BUFFER\n                ? distanceFromTop + selectedElementDimension.height + TOP_EDGE_BUFFER\n                : distanceFromTop;\n\n        const distanceFromLeft = selectedElementDimension.left - LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX;\n        const adjustedDistanceFromLeft = Math.max(distanceFromLeft, TOOLBAR_EDGE_BUFFER);\n\n        // Handle right-edge overflow\n        if (\n            targetElementRightEdgeOffset < RIGHT_EDGE_BUFFER &&\n            (focusedToolbar.style.justifyContent !== \"flex-end\" ||\n                focusedToolbar.style.left !== `${selectedElementDimension.right + LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX}px`)\n        ) {\n            focusedToolbar.style.justifyContent = \"flex-end\";\n            focusedToolbar.style.left = `${selectedElementDimension.right + LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX}px`;\n        } else if (\n            focusedToolbar.style.justifyContent !== \"flex-start\" ||\n            focusedToolbar.style.left !== `${adjustedDistanceFromLeft}px`\n        ) {\n            focusedToolbar.style.justifyContent = \"flex-start\"; // Default\n            focusedToolbar.style.left = `${adjustedDistanceFromLeft}px`;\n        }\n\n        // Adjust top position if necessary\n        if (focusedToolbar.style.top !== `${adjustedDistanceFromTop}px`) {\n            focusedToolbar.style.top = `${adjustedDistanceFromTop}px`;\n        }\n    }\n}\n\n/**\n * This function can be used to re-draw/update the focussed state of an element.\n * The focussed state includes the overlay, psuedo-editable, toolbar, and multiple\n * instance add buttons. It is similar to handleBuilderInteraction but it does not\n * create new elements, it just updates the existing ones whenever possible.\n * NOTE: breakdown this function into multiple functions when the need arises\n */\nexport function updateFocussedState({\n    editableElement,\n    visualBuilderContainer,\n    overlayWrapper,\n    focusedToolbar,\n    resizeObserver,\n}: {\n    editableElement: HTMLElement | null;\n    visualBuilderContainer: HTMLDivElement | null;\n    overlayWrapper: HTMLDivElement | null;\n    focusedToolbar: HTMLDivElement | null;\n    resizeObserver: ResizeObserver;\n}): void {\n    const previousSelectedEditableDOM =\n        VisualBuilder.VisualBuilderGlobalState.value\n            .previousSelectedEditableDOM;\n    if (\n        !visualBuilderContainer ||\n        !editableElement ||\n        !previousSelectedEditableDOM ||\n        !overlayWrapper\n    ) {\n        return;\n    }\n    hideHoverOutline(visualBuilderContainer);\n    addFocusOverlay(previousSelectedEditableDOM, overlayWrapper);\n\n    // update psuedo editable element if present\n    const psuedoEditableElement = visualBuilderContainer.querySelector(\n        \".visual-builder__pseudo-editable-element\"\n    ) as HTMLElement;\n    if (psuedoEditableElement) {\n        const styles = getStyleOfAnElement(editableElement);\n        const styleString = Object.entries(styles).reduce(\n            (acc, [key, value]) => {\n                return `${acc}${key}:${value};`;\n            },\n            \"\"\n        );\n        psuedoEditableElement.style.cssText = styleString;\n        psuedoEditableElement.style.visibility = \"visible\";\n        psuedoEditableElement.style.position = \"absolute\";\n        psuedoEditableElement.style.top = `${editableElement.offsetTop}px`;\n        psuedoEditableElement.style.left = `${editableElement.offsetLeft}px`;\n    }\n\n    const cslp = editableElement?.getAttribute(\"data-cslp\") || \"\";\n    const fieldMetadata = extractDetailsFromCslp(cslp);\n\n    const targetElementDimension = editableElement.getBoundingClientRect();\n    if (targetElementDimension.width && targetElementDimension.height) {\n        const selectedElement = VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM;\n\n        if(!selectedElement)\n            return;\n        // position the focused tool bar\n        positionToolbar({\n            focusedToolbar: focusedToolbar,\n            selectedElementDimension: selectedElement.getBoundingClientRect(),\n        });\n    }\n\n    // re-add multiple instance add buttons\n    const buttons = getAddInstanceButtons(visualBuilderContainer);\n    const parentCslpValue =\n        fieldMetadata.multipleFieldMetadata?.parentDetails?.parentCslpValue;\n    if (\n        buttons &&\n        parentCslpValue &&\n        buttons.length > 1 &&\n        buttons[0] &&\n        buttons[1]\n    ) {\n        const [previousButton, nextButton] = buttons;\n        const direction = getChildrenDirection(\n            editableElement,\n            parentCslpValue\n        );\n        const targetDOMDimension = editableElement.getBoundingClientRect();\n\n        if (direction === \"horizontal\") {\n            const middleHeight =\n                targetDOMDimension.top +\n                (targetDOMDimension.bottom - targetDOMDimension.top) / 2 +\n                window.scrollY;\n            previousButton.style.left = `${targetDOMDimension.left}px`;\n            previousButton.style.top = `${middleHeight}px`;\n\n            nextButton.style.left = `${targetDOMDimension.right}px`;\n            nextButton.style.top = `${middleHeight}px`;\n        } else if (direction === \"vertical\") {\n            const middleWidth =\n                targetDOMDimension.left +\n                (targetDOMDimension.right - targetDOMDimension.left) / 2;\n            previousButton.style.left = `${middleWidth}px`;\n            previousButton.style.top = `${\n                targetDOMDimension.top + window.scrollY\n            }px`;\n\n            nextButton.style.left = `${middleWidth}px`;\n            nextButton.style.top = `${\n                targetDOMDimension.bottom + window.scrollY\n            }px`;\n        }\n    }\n}\n\n/**\n * This function is used to resize/reposition focus overlay and toolbar due to a\n * mutation in the DOM or due to changes in a different field (other than the focussed field).\n */\nexport function updateFocussedStateOnMutation(\n    focusOverlayWrapper: HTMLDivElement | null,\n    focusedToolbar: HTMLDivElement | null,\n    visualBuilderContainer: HTMLDivElement | null,\n) {\n    \n    if (!focusOverlayWrapper) return;\n\n    const selectedElement = VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM;\n\n    if(!selectedElement)\n        return;\n\n    const selectedElementDimension = selectedElement.getBoundingClientRect();\n\n    /**\n     * Update the focus outline if it exists.\n     */\n    const focusOutline = focusOverlayWrapper.querySelector<HTMLDivElement>(\n        \".visual-builder__overlay--outline\"\n    );\n\n    if (focusOutline) {\n        const focusOutlineDimension = focusOutline.getBoundingClientRect();\n        if(!isSameRect(selectedElementDimension, focusOutlineDimension)){\n            focusOutline.style.top = `${selectedElementDimension.top + window.scrollY}px`;\n            focusOutline.style.left = `${selectedElementDimension.left}px`;\n            focusOutline.style.width = `${selectedElementDimension.width}px`;\n            focusOutline.style.height = `${selectedElementDimension.height}px`;\n        }\n    }\n\n    /**\n     * Update the focus overlays if they exists.\n     */\n\n    const focusedOverlayTop = focusOverlayWrapper.querySelector<HTMLDivElement>(\n        \".visual-builder__overlay--top\"\n    );\n    const focusedOverlayBottom = focusOverlayWrapper.querySelector<HTMLDivElement>(\n        \".visual-builder__overlay--bottom\"\n    );\n    const focusedOverlayLeft = focusOverlayWrapper.querySelector<HTMLDivElement>(\n        \".visual-builder__overlay--left\"\n    );\n    const focusedOverlayRight = focusOverlayWrapper.querySelector<HTMLDivElement>(\n        \".visual-builder__overlay--right\"\n    );\n\n    const distanceFromTop = selectedElementDimension.top + window.scrollY;\n\n    if (focusedOverlayTop) {\n        const dimension = focusedOverlayTop.getBoundingClientRect();\n        if(dimension.height !== distanceFromTop) {\n            focusedOverlayTop.style.height = `calc(${distanceFromTop}px)`;\n        }\n    }\n\n    if (focusedOverlayBottom) {\n        const dimension = focusedOverlayBottom.getBoundingClientRect();\n        if(dimension.top !== selectedElementDimension.bottom ||\n            dimension.height !== window.document.body.scrollHeight - selectedElementDimension.bottom - window.scrollY) {\n            focusedOverlayBottom.style.top = `${\n                selectedElementDimension.bottom + window.scrollY\n            }px`;\n            focusedOverlayBottom.style.height = `${\n                window.document.body.scrollHeight -\n                selectedElementDimension.bottom -\n                window.scrollY\n            }px`;\n        }\n    }\n\n    if (focusedOverlayLeft) {\n        const dimension = focusedOverlayLeft.getBoundingClientRect();\n        if(dimension.top + window.scrollY !== distanceFromTop ||\n            dimension.height !== selectedElementDimension.height ||\n            dimension.width !== selectedElementDimension.left) {\n            focusedOverlayLeft.style.top = `${distanceFromTop}px`;\n            focusedOverlayLeft.style.height = `${selectedElementDimension.height}px`;\n            focusedOverlayLeft.style.width = `${selectedElementDimension.left}px`;\n        }\n    }\n\n    if (focusedOverlayRight) {\n        const dimension = focusedOverlayRight.getBoundingClientRect();\n        if(dimension.left !== selectedElementDimension.right ||\n            dimension.top + window.scrollY !== distanceFromTop ||\n            dimension.height !== selectedElementDimension.height ||\n            dimension.width !== document.documentElement.clientWidth - selectedElementDimension.right) {\n                focusedOverlayRight.style.left = `${selectedElementDimension.right}px`;\n                focusedOverlayRight.style.top = `${distanceFromTop}px`;\n                focusedOverlayRight.style.height = `${selectedElementDimension.height}px`;\n                focusedOverlayRight.style.width = `${\n                    document.documentElement.clientWidth - selectedElementDimension.right\n                }px`;\n        }\n    }\n\n    /**\n     * Update the focus toolbar if it exists.\n     */\n\n    if (focusedToolbar) {\n        const targetElementRightEdgeOffset = window.scrollX + window.innerWidth - selectedElementDimension.left;\n        const distanceFromTop =\n            selectedElementDimension.top + window.scrollY - TOOLBAR_EDGE_BUFFER;\n        // Position the toolbar at the top unless there's insufficient space or scrolling up is not possible (topmost element targetted).\n        const adjustedDistanceFromTop =\n            selectedElementDimension.top + window.scrollY < TOP_EDGE_BUFFER\n                ? distanceFromTop + selectedElementDimension.height + TOP_EDGE_BUFFER\n                : distanceFromTop;\n\n        const distanceFromLeft =\n            selectedElementDimension.left - LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX;\n        const adjustedDistanceFromLeft = Math.max(\n            distanceFromLeft,\n            TOOLBAR_EDGE_BUFFER\n        );\n\n        if (targetElementRightEdgeOffset < RIGHT_EDGE_BUFFER &&\n            ( focusedToolbar.style.justifyContent !== \"flex-end\" ||\n            focusedToolbar.style.left !== `${\n                selectedElementDimension.right + LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX\n            }px` )\n        ) {\n            // Overflow / Cutoff on right edge\n            focusedToolbar.style.justifyContent = \"flex-end\";\n            focusedToolbar.style.left = `${\n                selectedElementDimension.right + LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX\n            }px`;\n        } else if (focusedToolbar.style.justifyContent !== \"flex-start\" ||\n            focusedToolbar.style.left !== `${adjustedDistanceFromLeft}px`\n        ) {\n            focusedToolbar.style.justifyContent = \"flex-start\"; // default\n            focusedToolbar.style.left = `${adjustedDistanceFromLeft}px`;\n        }\n\n        if(focusedToolbar.style.top !== `${adjustedDistanceFromTop}px`){\n            focusedToolbar.style.top = `${adjustedDistanceFromTop}px`;\n        }\n    }\n\n    /**\n     * Update the pseudo-editable if it exists.\n     */\n\n    if (visualBuilderContainer) {\n        const psuedoEditableElement = visualBuilderContainer.querySelector(\n            \".visual-builder__pseudo-editable-element\"\n        ) as HTMLElement;\n        const editableElement = selectedElement as HTMLElement;\n        const styles = getStyleOfAnElement(editableElement);\n        const styleString = Object.entries(styles).reduce(\n            (acc, [key, value]) => {\n                return `${acc}${key}:${value};`;\n            },\n            \"\"\n        );\n        if (psuedoEditableElement &&\n            (\n                psuedoEditableElement.style.cssText !== styleString ||\n                psuedoEditableElement.style.visibility !== \"visible\" ||\n                psuedoEditableElement.style.position !== \"absolute\" ||\n                psuedoEditableElement.style.top !== `${editableElement.offsetTop}px` ||\n                psuedoEditableElement.style.left !== `${editableElement.offsetLeft}px`\n            )\n        ) {\n            psuedoEditableElement.style.cssText = styleString;\n            psuedoEditableElement.style.visibility = \"visible\";\n            psuedoEditableElement.style.position = \"absolute\";\n            psuedoEditableElement.style.top = `${editableElement.offsetTop}px`;\n            psuedoEditableElement.style.left = `${editableElement.offsetLeft}px`;\n        }\n    }\n}\n\nfunction isSameRect(rect1: DOMRect, rect2: DOMRect) {\n    return (\n        rect1.top === rect2.top &&\n        rect1.left === rect2.left &&\n        rect1.width === rect2.width &&\n        rect1.height === rect2.height\n    );\n}"],"mappings":"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","names":["getStyleOfAnElement","getChildrenDirection","distanceFromTop"]}
+{"version":3,"sources":["../../../../src/visualBuilder/utils/updateFocussedState.ts"],"sourcesContent":["import { VisualBuilder } from \"..\";\nimport { extractDetailsFromCslp } from \"../../cslp\";\nimport { getAddInstanceButtons } from \"../generators/generateAddInstanceButtons\";\nimport {\n    addFocusOverlay,\n    hideFocusOverlay,\n} from \"../generators/generateOverlay\";\nimport { hideHoverOutline } from \"../listeners/mouseHover\";\nimport {\n    LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX,\n    RIGHT_EDGE_BUFFER,\n    TOOLBAR_EDGE_BUFFER,\n    TOP_EDGE_BUFFER,\n} from \"./constants\";\nimport getChildrenDirection from \"./getChildrenDirection\";\nimport { getPsuedoEditableElementStyles } from \"./getPsuedoEditableStylesElement\";\nimport getStyleOfAnElement from \"./getStyleOfAnElement\";\n\ninterface ToolbarPositionParams {\n    focusedToolbar: HTMLElement | null;\n    selectedElementDimension: DOMRect;\n}\n/**\n * Adjust the position of the field toolbar instead of clearing the innerhtml fo the focused toolbar.\n * By doing this, can avoid the re-rendering of the focus field toolbar.\n */\nfunction positionToolbar({\n    focusedToolbar,\n    selectedElementDimension,\n}: ToolbarPositionParams): void {\n    if (focusedToolbar) {\n        const targetElementRightEdgeOffset =\n            window.scrollX + window.innerWidth - selectedElementDimension.left;\n        const distanceFromTop =\n            selectedElementDimension.top + window.scrollY - TOOLBAR_EDGE_BUFFER;\n\n        // Adjust top position based on the available space\n        const adjustedDistanceFromTop =\n            selectedElementDimension.top + window.scrollY < TOP_EDGE_BUFFER\n                ? distanceFromTop +\n                  selectedElementDimension.height +\n                  TOP_EDGE_BUFFER\n                : distanceFromTop;\n\n        const distanceFromLeft =\n            selectedElementDimension.left - LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX;\n        const adjustedDistanceFromLeft = Math.max(\n            distanceFromLeft,\n            TOOLBAR_EDGE_BUFFER\n        );\n\n        // Handle right-edge overflow\n        if (\n            targetElementRightEdgeOffset < RIGHT_EDGE_BUFFER &&\n            (focusedToolbar.style.justifyContent !== \"flex-end\" ||\n                focusedToolbar.style.left !==\n                    `${selectedElementDimension.right + LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX}px`)\n        ) {\n            focusedToolbar.style.justifyContent = \"flex-end\";\n            focusedToolbar.style.left = `${selectedElementDimension.right + LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX}px`;\n        } else if (\n            focusedToolbar.style.justifyContent !== \"flex-start\" ||\n            focusedToolbar.style.left !== `${adjustedDistanceFromLeft}px`\n        ) {\n            focusedToolbar.style.justifyContent = \"flex-start\"; // Default\n            focusedToolbar.style.left = `${adjustedDistanceFromLeft}px`;\n        }\n\n        // Adjust top position if necessary\n        if (focusedToolbar.style.top !== `${adjustedDistanceFromTop}px`) {\n            focusedToolbar.style.top = `${adjustedDistanceFromTop}px`;\n        }\n    }\n}\n\n/**\n * This function can be used to re-draw/update the focussed state of an element.\n * The focussed state includes the overlay, psuedo-editable, toolbar, and multiple\n * instance add buttons. It is similar to handleBuilderInteraction but it does not\n * create new elements, it just updates the existing ones whenever possible.\n * NOTE: breakdown this function into multiple functions when the need arises\n */\nexport function updateFocussedState({\n    editableElement,\n    visualBuilderContainer,\n    overlayWrapper,\n    focusedToolbar,\n    resizeObserver,\n}: {\n    editableElement: HTMLElement | null;\n    visualBuilderContainer: HTMLDivElement | null;\n    overlayWrapper: HTMLDivElement | null;\n    focusedToolbar: HTMLDivElement | null;\n    resizeObserver: ResizeObserver | null;\n}): void {\n    let previousSelectedEditableDOM =\n        VisualBuilder.VisualBuilderGlobalState.value\n            .previousSelectedEditableDOM;\n    if (\n        !visualBuilderContainer ||\n        !editableElement ||\n        !previousSelectedEditableDOM ||\n        !overlayWrapper\n    ) {\n        return;\n    }\n\n    const previousSelectedElementCslp =\n        previousSelectedEditableDOM?.getAttribute(\"data-cslp\");\n    const newPreviousSelectedElement = document.querySelector(\n        `[data-cslp=\"${previousSelectedElementCslp}\"]`\n    );\n    if (!newPreviousSelectedElement && resizeObserver) {\n        hideFocusOverlay({\n            visualBuilderOverlayWrapper: overlayWrapper,\n            focusedToolbar,\n            visualBuilderContainer,\n            resizeObserver,\n            noTrigger: true,\n        });\n        return;\n    }\n    if (newPreviousSelectedElement !== previousSelectedEditableDOM) {\n        previousSelectedEditableDOM = newPreviousSelectedElement as HTMLElement;\n        VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM =\n            previousSelectedEditableDOM;\n    }\n\n    hideHoverOutline(visualBuilderContainer);\n    addFocusOverlay(previousSelectedEditableDOM, overlayWrapper);\n\n    // update psuedo editable element if present\n    const psuedoEditableElement = visualBuilderContainer.querySelector(\n        \".visual-builder__pseudo-editable-element\"\n    ) as HTMLElement;\n    if (psuedoEditableElement) {\n        const styles = getPsuedoEditableElementStyles(editableElement);\n        const styleString = Object.entries(styles).reduce(\n            (acc, [key, value]) => {\n                return `${acc}${key}:${value};`;\n            },\n            \"\"\n        );\n        psuedoEditableElement.style.cssText = styleString;\n        // since we are copying styles from the editableEl\n        // it will now have a visibility of hidden, which we added\n        // when creating the pseudo editable element, so make the psuedo visible\n        psuedoEditableElement.style.visibility = \"visible\";\n    }\n\n    const cslp = editableElement?.getAttribute(\"data-cslp\") || \"\";\n    const fieldMetadata = extractDetailsFromCslp(cslp);\n\n    const targetElementDimension = editableElement.getBoundingClientRect();\n    if (targetElementDimension.width && targetElementDimension.height) {\n        const selectedElement =\n            VisualBuilder.VisualBuilderGlobalState.value\n                .previousSelectedEditableDOM;\n\n        if (!selectedElement) return;\n        // position the focused tool bar\n        positionToolbar({\n            focusedToolbar: focusedToolbar,\n            selectedElementDimension: selectedElement.getBoundingClientRect(),\n        });\n    }\n\n    // re-add multiple instance add buttons\n    const buttons = getAddInstanceButtons(visualBuilderContainer);\n    const parentCslpValue =\n        fieldMetadata.multipleFieldMetadata?.parentDetails?.parentCslpValue;\n    if (\n        buttons &&\n        parentCslpValue &&\n        buttons.length > 1 &&\n        buttons[0] &&\n        buttons[1]\n    ) {\n        const [previousButton, nextButton] = buttons;\n        const direction = getChildrenDirection(\n            editableElement,\n            parentCslpValue\n        );\n        const targetDOMDimension = editableElement.getBoundingClientRect();\n\n        if (direction === \"horizontal\") {\n            const middleHeight =\n                targetDOMDimension.top +\n                (targetDOMDimension.bottom - targetDOMDimension.top) / 2 +\n                window.scrollY;\n            previousButton.style.left = `${targetDOMDimension.left}px`;\n            previousButton.style.top = `${middleHeight}px`;\n\n            nextButton.style.left = `${targetDOMDimension.right}px`;\n            nextButton.style.top = `${middleHeight}px`;\n        } else if (direction === \"vertical\") {\n            const middleWidth =\n                targetDOMDimension.left +\n                (targetDOMDimension.right - targetDOMDimension.left) / 2;\n            previousButton.style.left = `${middleWidth}px`;\n            previousButton.style.top = `${\n                targetDOMDimension.top + window.scrollY\n            }px`;\n\n            nextButton.style.left = `${middleWidth}px`;\n            nextButton.style.top = `${\n                targetDOMDimension.bottom + window.scrollY\n            }px`;\n        }\n    }\n}\n\n/**\n * This function is used to resize/reposition focus overlay and toolbar due to a\n * mutation in the DOM or due to changes in a different field (other than the focussed field).\n */\nexport function updateFocussedStateOnMutation(\n    focusOverlayWrapper: HTMLDivElement | null,\n    focusedToolbar: HTMLDivElement | null,\n    visualBuilderContainer: HTMLDivElement | null,\n    resizeObserver: ResizeObserver | null\n) {\n    if (!focusOverlayWrapper) return;\n\n    let selectedElement =\n        VisualBuilder.VisualBuilderGlobalState.value\n            .previousSelectedEditableDOM;\n    if (!selectedElement) return;\n\n    const selectedElementCslp = selectedElement?.getAttribute(\"data-cslp\");\n    const newSelectedElement = document.querySelector(\n        `[data-cslp=\"${selectedElementCslp}\"]`\n    );\n    if (!newSelectedElement && resizeObserver) {\n        hideFocusOverlay({\n            visualBuilderOverlayWrapper: focusOverlayWrapper,\n            focusedToolbar,\n            visualBuilderContainer,\n            resizeObserver,\n            noTrigger: true,\n        });\n        return;\n    }\n\n    if (newSelectedElement !== selectedElement) {\n        selectedElement = newSelectedElement as HTMLElement;\n        VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM =\n            selectedElement;\n    }\n\n    const selectedElementDimension = selectedElement.getBoundingClientRect();\n\n    /**\n     * Update the focus outline if it exists.\n     */\n    const focusOutline = focusOverlayWrapper.querySelector<HTMLDivElement>(\n        \".visual-builder__overlay--outline\"\n    );\n\n    if (focusOutline) {\n        const focusOutlineDimension = focusOutline.getBoundingClientRect();\n        if (!isSameRect(selectedElementDimension, focusOutlineDimension)) {\n            focusOutline.style.top = `${selectedElementDimension.top + window.scrollY}px`;\n            focusOutline.style.left = `${selectedElementDimension.left}px`;\n            focusOutline.style.width = `${selectedElementDimension.width}px`;\n            focusOutline.style.height = `${selectedElementDimension.height}px`;\n        }\n    }\n\n    /**\n     * Update the focus overlays if they exists.\n     */\n\n    const focusedOverlayTop = focusOverlayWrapper.querySelector<HTMLDivElement>(\n        \".visual-builder__overlay--top\"\n    );\n    const focusedOverlayBottom =\n        focusOverlayWrapper.querySelector<HTMLDivElement>(\n            \".visual-builder__overlay--bottom\"\n        );\n    const focusedOverlayLeft =\n        focusOverlayWrapper.querySelector<HTMLDivElement>(\n            \".visual-builder__overlay--left\"\n        );\n    const focusedOverlayRight =\n        focusOverlayWrapper.querySelector<HTMLDivElement>(\n            \".visual-builder__overlay--right\"\n        );\n\n    const distanceFromTop = selectedElementDimension.top + window.scrollY;\n\n    if (focusedOverlayTop) {\n        const dimension = focusedOverlayTop.getBoundingClientRect();\n        if (dimension.height !== distanceFromTop) {\n            focusedOverlayTop.style.height = `calc(${distanceFromTop}px)`;\n        }\n    }\n\n    if (focusedOverlayBottom) {\n        const dimension = focusedOverlayBottom.getBoundingClientRect();\n        if (\n            dimension.top !== selectedElementDimension.bottom ||\n            dimension.height !==\n                window.document.body.scrollHeight -\n                    selectedElementDimension.bottom -\n                    window.scrollY\n        ) {\n            focusedOverlayBottom.style.top = `${\n                selectedElementDimension.bottom + window.scrollY\n            }px`;\n            focusedOverlayBottom.style.height = `${\n                window.document.body.scrollHeight -\n                selectedElementDimension.bottom -\n                window.scrollY\n            }px`;\n        }\n    }\n\n    if (focusedOverlayLeft) {\n        const dimension = focusedOverlayLeft.getBoundingClientRect();\n        if (\n            dimension.top + window.scrollY !== distanceFromTop ||\n            dimension.height !== selectedElementDimension.height ||\n            dimension.width !== selectedElementDimension.left\n        ) {\n            focusedOverlayLeft.style.top = `${distanceFromTop}px`;\n            focusedOverlayLeft.style.height = `${selectedElementDimension.height}px`;\n            focusedOverlayLeft.style.width = `${selectedElementDimension.left}px`;\n        }\n    }\n\n    if (focusedOverlayRight) {\n        const dimension = focusedOverlayRight.getBoundingClientRect();\n        if (\n            dimension.left !== selectedElementDimension.right ||\n            dimension.top + window.scrollY !== distanceFromTop ||\n            dimension.height !== selectedElementDimension.height ||\n            dimension.width !==\n                document.documentElement.clientWidth -\n                    selectedElementDimension.right\n        ) {\n            focusedOverlayRight.style.left = `${selectedElementDimension.right}px`;\n            focusedOverlayRight.style.top = `${distanceFromTop}px`;\n            focusedOverlayRight.style.height = `${selectedElementDimension.height}px`;\n            focusedOverlayRight.style.width = `${\n                document.documentElement.clientWidth -\n                selectedElementDimension.right\n            }px`;\n        }\n    }\n\n    /**\n     * Update the focus toolbar if it exists.\n     */\n\n    if (focusedToolbar) {\n        const targetElementRightEdgeOffset =\n            window.scrollX + window.innerWidth - selectedElementDimension.left;\n        const distanceFromTop =\n            selectedElementDimension.top + window.scrollY - TOOLBAR_EDGE_BUFFER;\n        // Position the toolbar at the top unless there's insufficient space or scrolling up is not possible (topmost element targetted).\n        const adjustedDistanceFromTop =\n            selectedElementDimension.top + window.scrollY < TOP_EDGE_BUFFER\n                ? distanceFromTop +\n                  selectedElementDimension.height +\n                  TOP_EDGE_BUFFER\n                : distanceFromTop;\n\n        const distanceFromLeft =\n            selectedElementDimension.left - LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX;\n        const adjustedDistanceFromLeft = Math.max(\n            distanceFromLeft,\n            TOOLBAR_EDGE_BUFFER\n        );\n\n        if (\n            targetElementRightEdgeOffset < RIGHT_EDGE_BUFFER &&\n            (focusedToolbar.style.justifyContent !== \"flex-end\" ||\n                focusedToolbar.style.left !==\n                    `${\n                        selectedElementDimension.right +\n                        LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX\n                    }px`)\n        ) {\n            // Overflow / Cutoff on right edge\n            focusedToolbar.style.justifyContent = \"flex-end\";\n            focusedToolbar.style.left = `${\n                selectedElementDimension.right +\n                LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX\n            }px`;\n        } else if (\n            focusedToolbar.style.justifyContent !== \"flex-start\" ||\n            focusedToolbar.style.left !== `${adjustedDistanceFromLeft}px`\n        ) {\n            focusedToolbar.style.justifyContent = \"flex-start\"; // default\n            focusedToolbar.style.left = `${adjustedDistanceFromLeft}px`;\n        }\n\n        if (focusedToolbar.style.top !== `${adjustedDistanceFromTop}px`) {\n            focusedToolbar.style.top = `${adjustedDistanceFromTop}px`;\n        }\n    }\n\n    /**\n     * Update the pseudo-editable if it exists.\n     */\n\n    if (visualBuilderContainer) {\n        const psuedoEditableElement = visualBuilderContainer.querySelector(\n            \".visual-builder__pseudo-editable-element\"\n        ) as HTMLElement;\n        const editableElement = selectedElement as HTMLElement;\n        const styles = getPsuedoEditableElementStyles(editableElement);\n        const styleString = Object.entries(styles).reduce(\n            (acc, [key, value]) => {\n                return `${acc}${key}:${value};`;\n            },\n            \"\"\n        );\n        if (\n            psuedoEditableElement &&\n            (psuedoEditableElement.style.cssText !== styleString ||\n                psuedoEditableElement.style.visibility !== \"visible\")\n        ) {\n            psuedoEditableElement.style.cssText = styleString;\n            // since we are copying styles from the editableEl\n            // it will now have a visibility of hidden, which we added\n            // when creating the pseudo editable element, so make the psuedo visible\n            psuedoEditableElement.style.visibility = \"visible\";\n        }\n    }\n}\n\nfunction isSameRect(rect1: DOMRect, rect2: DOMRect) {\n    return (\n        rect1.top === rect2.top &&\n        rect1.left === rect2.left &&\n        rect1.width === rect2.width &&\n        rect1.height === rect2.height\n    );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAA8B;AAC9B,kBAAuC;AACvC,wCAAsC;AACtC,6BAGO;AACP,wBAAiC;AACjC,uBAKO;AACP,kCAAiC;AACjC,4CAA+C;AAW/C,SAAS,gBAAgB;AAAA,EACrB;AAAA,EACA;AACJ,GAAgC;AAC5B,MAAI,gBAAgB;AAChB,UAAM,+BACF,OAAO,UAAU,OAAO,aAAa,yBAAyB;AAClE,UAAM,kBACF,yBAAyB,MAAM,OAAO,UAAU;AAGpD,UAAM,0BACF,yBAAyB,MAAM,OAAO,UAAU,mCAC1C,kBACA,yBAAyB,SACzB,mCACA;AAEV,UAAM,mBACF,yBAAyB,OAAO;AACpC,UAAM,2BAA2B,KAAK;AAAA,MAClC;AAAA,MACA;AAAA,IACJ;AAGA,QACI,+BAA+B,uCAC9B,eAAe,MAAM,mBAAmB,cACrC,eAAe,MAAM,SACjB,GAAG,yBAAyB,QAAQ,iDAAgC,OAC9E;AACE,qBAAe,MAAM,iBAAiB;AACtC,qBAAe,MAAM,OAAO,GAAG,yBAAyB,QAAQ,iDAAgC;AAAA,IACpG,WACI,eAAe,MAAM,mBAAmB,gBACxC,eAAe,MAAM,SAAS,GAAG,wBAAwB,MAC3D;AACE,qBAAe,MAAM,iBAAiB;AACtC,qBAAe,MAAM,OAAO,GAAG,wBAAwB;AAAA,IAC3D;AAGA,QAAI,eAAe,MAAM,QAAQ,GAAG,uBAAuB,MAAM;AAC7D,qBAAe,MAAM,MAAM,GAAG,uBAAuB;AAAA,IACzD;AAAA,EACJ;AACJ;AASO,SAAS,oBAAoB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,GAMS;AACL,MAAI,8BACA,uBAAc,yBAAyB,MAClC;AACT,MACI,CAAC,0BACD,CAAC,mBACD,CAAC,+BACD,CAAC,gBACH;AACE;AAAA,EACJ;AAEA,QAAM,8BACF,6BAA6B,aAAa,WAAW;AACzD,QAAM,6BAA6B,SAAS;AAAA,IACxC,eAAe,2BAA2B;AAAA,EAC9C;AACA,MAAI,CAAC,8BAA8B,gBAAgB;AAC/C,iDAAiB;AAAA,MACb,6BAA6B;AAAA,MAC7B;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,IACf,CAAC;AACD;AAAA,EACJ;AACA,MAAI,+BAA+B,6BAA6B;AAC5D,kCAA8B;AAC9B,2BAAc,yBAAyB,MAAM,8BACzC;AAAA,EACR;AAEA,0CAAiB,sBAAsB;AACvC,8CAAgB,6BAA6B,cAAc;AAG3D,QAAM,wBAAwB,uBAAuB;AAAA,IACjD;AAAA,EACJ;AACA,MAAI,uBAAuB;AACvB,UAAM,aAAS,sEAA+B,eAAe;AAC7D,UAAM,cAAc,OAAO,QAAQ,MAAM,EAAE;AAAA,MACvC,CAAC,KAAK,CAAC,KAAK,KAAK,MAAM;AACnB,eAAO,GAAG,GAAG,GAAG,GAAG,IAAI,KAAK;AAAA,MAChC;AAAA,MACA;AAAA,IACJ;AACA,0BAAsB,MAAM,UAAU;AAItC,0BAAsB,MAAM,aAAa;AAAA,EAC7C;AAEA,QAAM,OAAO,iBAAiB,aAAa,WAAW,KAAK;AAC3D,QAAM,oBAAgB,oCAAuB,IAAI;AAEjD,QAAM,yBAAyB,gBAAgB,sBAAsB;AACrE,MAAI,uBAAuB,SAAS,uBAAuB,QAAQ;AAC/D,UAAM,kBACF,uBAAc,yBAAyB,MAClC;AAET,QAAI,CAAC,gBAAiB;AAEtB,oBAAgB;AAAA,MACZ;AAAA,MACA,0BAA0B,gBAAgB,sBAAsB;AAAA,IACpE,CAAC;AAAA,EACL;AAGA,QAAM,cAAU,yDAAsB,sBAAsB;AAC5D,QAAM,kBACF,cAAc,uBAAuB,eAAe;AACxD,MACI,WACA,mBACA,QAAQ,SAAS,KACjB,QAAQ,CAAC,KACT,QAAQ,CAAC,GACX;AACE,UAAM,CAAC,gBAAgB,UAAU,IAAI;AACrC,UAAM,gBAAY,4BAAAA;AAAA,MACd;AAAA,MACA;AAAA,IACJ;AACA,UAAM,qBAAqB,gBAAgB,sBAAsB;AAEjE,QAAI,cAAc,cAAc;AAC5B,YAAM,eACF,mBAAmB,OAClB,mBAAmB,SAAS,mBAAmB,OAAO,IACvD,OAAO;AACX,qBAAe,MAAM,OAAO,GAAG,mBAAmB,IAAI;AACtD,qBAAe,MAAM,MAAM,GAAG,YAAY;AAE1C,iBAAW,MAAM,OAAO,GAAG,mBAAmB,KAAK;AACnD,iBAAW,MAAM,MAAM,GAAG,YAAY;AAAA,IAC1C,WAAW,cAAc,YAAY;AACjC,YAAM,cACF,mBAAmB,QAClB,mBAAmB,QAAQ,mBAAmB,QAAQ;AAC3D,qBAAe,MAAM,OAAO,GAAG,WAAW;AAC1C,qBAAe,MAAM,MAAM,GACvB,mBAAmB,MAAM,OAAO,OACpC;AAEA,iBAAW,MAAM,OAAO,GAAG,WAAW;AACtC,iBAAW,MAAM,MAAM,GACnB,mBAAmB,SAAS,OAAO,OACvC;AAAA,IACJ;AAAA,EACJ;AACJ;AAMO,SAAS,8BACZ,qBACA,gBACA,wBACA,gBACF;AACE,MAAI,CAAC,oBAAqB;AAE1B,MAAI,kBACA,uBAAc,yBAAyB,MAClC;AACT,MAAI,CAAC,gBAAiB;AAEtB,QAAM,sBAAsB,iBAAiB,aAAa,WAAW;AACrE,QAAM,qBAAqB,SAAS;AAAA,IAChC,eAAe,mBAAmB;AAAA,EACtC;AACA,MAAI,CAAC,sBAAsB,gBAAgB;AACvC,iDAAiB;AAAA,MACb,6BAA6B;AAAA,MAC7B;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,IACf,CAAC;AACD;AAAA,EACJ;AAEA,MAAI,uBAAuB,iBAAiB;AACxC,sBAAkB;AAClB,2BAAc,yBAAyB,MAAM,8BACzC;AAAA,EACR;AAEA,QAAM,2BAA2B,gBAAgB,sBAAsB;AAKvE,QAAM,eAAe,oBAAoB;AAAA,IACrC;AAAA,EACJ;AAEA,MAAI,cAAc;AACd,UAAM,wBAAwB,aAAa,sBAAsB;AACjE,QAAI,CAAC,WAAW,0BAA0B,qBAAqB,GAAG;AAC9D,mBAAa,MAAM,MAAM,GAAG,yBAAyB,MAAM,OAAO,OAAO;AACzE,mBAAa,MAAM,OAAO,GAAG,yBAAyB,IAAI;AAC1D,mBAAa,MAAM,QAAQ,GAAG,yBAAyB,KAAK;AAC5D,mBAAa,MAAM,SAAS,GAAG,yBAAyB,MAAM;AAAA,IAClE;AAAA,EACJ;AAMA,QAAM,oBAAoB,oBAAoB;AAAA,IAC1C;AAAA,EACJ;AACA,QAAM,uBACF,oBAAoB;AAAA,IAChB;AAAA,EACJ;AACJ,QAAM,qBACF,oBAAoB;AAAA,IAChB;AAAA,EACJ;AACJ,QAAM,sBACF,oBAAoB;AAAA,IAChB;AAAA,EACJ;AAEJ,QAAM,kBAAkB,yBAAyB,MAAM,OAAO;AAE9D,MAAI,mBAAmB;AACnB,UAAM,YAAY,kBAAkB,sBAAsB;AAC1D,QAAI,UAAU,WAAW,iBAAiB;AACtC,wBAAkB,MAAM,SAAS,QAAQ,eAAe;AAAA,IAC5D;AAAA,EACJ;AAEA,MAAI,sBAAsB;AACtB,UAAM,YAAY,qBAAqB,sBAAsB;AAC7D,QACI,UAAU,QAAQ,yBAAyB,UAC3C,UAAU,WACN,OAAO,SAAS,KAAK,eACjB,yBAAyB,SACzB,OAAO,SACjB;AACE,2BAAqB,MAAM,MAAM,GAC7B,yBAAyB,SAAS,OAAO,OAC7C;AACA,2BAAqB,MAAM,SAAS,GAChC,OAAO,SAAS,KAAK,eACrB,yBAAyB,SACzB,OAAO,OACX;AAAA,IACJ;AAAA,EACJ;AAEA,MAAI,oBAAoB;AACpB,UAAM,YAAY,mBAAmB,sBAAsB;AAC3D,QACI,UAAU,MAAM,OAAO,YAAY,mBACnC,UAAU,WAAW,yBAAyB,UAC9C,UAAU,UAAU,yBAAyB,MAC/C;AACE,yBAAmB,MAAM,MAAM,GAAG,eAAe;AACjD,yBAAmB,MAAM,SAAS,GAAG,yBAAyB,MAAM;AACpE,yBAAmB,MAAM,QAAQ,GAAG,yBAAyB,IAAI;AAAA,IACrE;AAAA,EACJ;AAEA,MAAI,qBAAqB;AACrB,UAAM,YAAY,oBAAoB,sBAAsB;AAC5D,QACI,UAAU,SAAS,yBAAyB,SAC5C,UAAU,MAAM,OAAO,YAAY,mBACnC,UAAU,WAAW,yBAAyB,UAC9C,UAAU,UACN,SAAS,gBAAgB,cACrB,yBAAyB,OACnC;AACE,0BAAoB,MAAM,OAAO,GAAG,yBAAyB,KAAK;AAClE,0BAAoB,MAAM,MAAM,GAAG,eAAe;AAClD,0BAAoB,MAAM,SAAS,GAAG,yBAAyB,MAAM;AACrE,0BAAoB,MAAM,QAAQ,GAC9B,SAAS,gBAAgB,cACzB,yBAAyB,KAC7B;AAAA,IACJ;AAAA,EACJ;AAMA,MAAI,gBAAgB;AAChB,UAAM,+BACF,OAAO,UAAU,OAAO,aAAa,yBAAyB;AAClE,UAAMC,mBACF,yBAAyB,MAAM,OAAO,UAAU;AAEpD,UAAM,0BACF,yBAAyB,MAAM,OAAO,UAAU,mCAC1CA,mBACA,yBAAyB,SACzB,mCACAA;AAEV,UAAM,mBACF,yBAAyB,OAAO;AACpC,UAAM,2BAA2B,KAAK;AAAA,MAClC;AAAA,MACA;AAAA,IACJ;AAEA,QACI,+BAA+B,uCAC9B,eAAe,MAAM,mBAAmB,cACrC,eAAe,MAAM,SACjB,GACI,yBAAyB,QACzB,iDACJ,OACV;AAEE,qBAAe,MAAM,iBAAiB;AACtC,qBAAe,MAAM,OAAO,GACxB,yBAAyB,QACzB,iDACJ;AAAA,IACJ,WACI,eAAe,MAAM,mBAAmB,gBACxC,eAAe,MAAM,SAAS,GAAG,wBAAwB,MAC3D;AACE,qBAAe,MAAM,iBAAiB;AACtC,qBAAe,MAAM,OAAO,GAAG,wBAAwB;AAAA,IAC3D;AAEA,QAAI,eAAe,MAAM,QAAQ,GAAG,uBAAuB,MAAM;AAC7D,qBAAe,MAAM,MAAM,GAAG,uBAAuB;AAAA,IACzD;AAAA,EACJ;AAMA,MAAI,wBAAwB;AACxB,UAAM,wBAAwB,uBAAuB;AAAA,MACjD;AAAA,IACJ;AACA,UAAM,kBAAkB;AACxB,UAAM,aAAS,sEAA+B,eAAe;AAC7D,UAAM,cAAc,OAAO,QAAQ,MAAM,EAAE;AAAA,MACvC,CAAC,KAAK,CAAC,KAAK,KAAK,MAAM;AACnB,eAAO,GAAG,GAAG,GAAG,GAAG,IAAI,KAAK;AAAA,MAChC;AAAA,MACA;AAAA,IACJ;AACA,QACI,0BACC,sBAAsB,MAAM,YAAY,eACrC,sBAAsB,MAAM,eAAe,YACjD;AACE,4BAAsB,MAAM,UAAU;AAItC,4BAAsB,MAAM,aAAa;AAAA,IAC7C;AAAA,EACJ;AACJ;AAEA,SAAS,WAAW,OAAgB,OAAgB;AAChD,SACI,MAAM,QAAQ,MAAM,OACpB,MAAM,SAAS,MAAM,QACrB,MAAM,UAAU,MAAM,SACtB,MAAM,WAAW,MAAM;AAE/B;","names":["getChildrenDirection","distanceFromTop"]}

package/dist/modern/visualBuilder/utils/updateFocussedState.d.cts

@@ -10,12 +10,12 @@ declare function updateFocussedState({ editableElement, visualBuilderContainer,
     visualBuilderContainer: HTMLDivElement | null;
     overlayWrapper: HTMLDivElement | null;
     focusedToolbar: HTMLDivElement | null;
-    resizeObserver: ResizeObserver;
+    resizeObserver: ResizeObserver | null;
 }): void;
 /**
  * This function is used to resize/reposition focus overlay and toolbar due to a
  * mutation in the DOM or due to changes in a different field (other than the focussed field).
  */
-declare function updateFocussedStateOnMutation(focusOverlayWrapper: HTMLDivElement | null, focusedToolbar: HTMLDivElement | null, visualBuilderContainer: HTMLDivElement | null): void;
+declare function updateFocussedStateOnMutation(focusOverlayWrapper: HTMLDivElement | null, focusedToolbar: HTMLDivElement | null, visualBuilderContainer: HTMLDivElement | null, resizeObserver: ResizeObserver | null): void;
 
 export { updateFocussedState, updateFocussedStateOnMutation };

package/dist/modern/visualBuilder/utils/updateFocussedState.d.ts

@@ -10,12 +10,12 @@ declare function updateFocussedState({ editableElement, visualBuilderContainer,
     visualBuilderContainer: HTMLDivElement | null;
     overlayWrapper: HTMLDivElement | null;
     focusedToolbar: HTMLDivElement | null;
-    resizeObserver: ResizeObserver;
+    resizeObserver: ResizeObserver | null;
 }): void;
 /**
  * This function is used to resize/reposition focus overlay and toolbar due to a
  * mutation in the DOM or due to changes in a different field (other than the focussed field).
  */
-declare function updateFocussedStateOnMutation(focusOverlayWrapper: HTMLDivElement | null, focusedToolbar: HTMLDivElement | null, visualBuilderContainer: HTMLDivElement | null): void;
+declare function updateFocussedStateOnMutation(focusOverlayWrapper: HTMLDivElement | null, focusedToolbar: HTMLDivElement | null, visualBuilderContainer: HTMLDivElement | null, resizeObserver: ResizeObserver | null): void;
 
 export { updateFocussedState, updateFocussedStateOnMutation };

package/dist/modern/visualBuilder/utils/updateFocussedState.js

@@ -4,11 +4,19 @@ import "../../chunk-5WRI5ZAA.js";
 import { VisualBuilder } from "../index.js";
 import { extractDetailsFromCslp } from "../../cslp/index.js";
 import { getAddInstanceButtons } from "../generators/generateAddInstanceButtons.js";
-import { addFocusOverlay } from "../generators/generateOverlay.js";
+import {
+  addFocusOverlay,
+  hideFocusOverlay
+} from "../generators/generateOverlay.js";
 import { hideHoverOutline } from "../listeners/mouseHover.js";
-import { LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX, RIGHT_EDGE_BUFFER, TOOLBAR_EDGE_BUFFER, TOP_EDGE_BUFFER } from "./constants.js";
+import {
+  LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX,
+  RIGHT_EDGE_BUFFER,
+  TOOLBAR_EDGE_BUFFER,
+  TOP_EDGE_BUFFER
+} from "./constants.js";
 import getChildrenDirection from "./getChildrenDirection.js";
-import getStyleOfAnElement from "./getStyleOfAnElement.js";
+import { getPsuedoEditableElementStyles } from "./getPsuedoEditableStylesElement.js";
 function positionToolbar({
   focusedToolbar,
   selectedElementDimension
@@ -18,7 +26,10 @@ function positionToolbar({
     const distanceFromTop = selectedElementDimension.top + window.scrollY - TOOLBAR_EDGE_BUFFER;
     const adjustedDistanceFromTop = selectedElementDimension.top + window.scrollY < TOP_EDGE_BUFFER ? distanceFromTop + selectedElementDimension.height + TOP_EDGE_BUFFER : distanceFromTop;
     const distanceFromLeft = selectedElementDimension.left - LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX;
-    const adjustedDistanceFromLeft = Math.max(distanceFromLeft, TOOLBAR_EDGE_BUFFER);
+    const adjustedDistanceFromLeft = Math.max(
+      distanceFromLeft,
+      TOOLBAR_EDGE_BUFFER
+    );
     if (targetElementRightEdgeOffset < RIGHT_EDGE_BUFFER && (focusedToolbar.style.justifyContent !== "flex-end" || focusedToolbar.style.left !== `${selectedElementDimension.right + LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX}px`)) {
       focusedToolbar.style.justifyContent = "flex-end";
       focusedToolbar.style.left = `${selectedElementDimension.right + LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX}px`;
@@ -38,17 +49,35 @@ function updateFocussedState({
   focusedToolbar,
   resizeObserver
 }) {
-  const previousSelectedEditableDOM = VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM;
+  let previousSelectedEditableDOM = VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM;
   if (!visualBuilderContainer || !editableElement || !previousSelectedEditableDOM || !overlayWrapper) {
     return;
   }
+  const previousSelectedElementCslp = previousSelectedEditableDOM?.getAttribute("data-cslp");
+  const newPreviousSelectedElement = document.querySelector(
+    `[data-cslp="${previousSelectedElementCslp}"]`
+  );
+  if (!newPreviousSelectedElement && resizeObserver) {
+    hideFocusOverlay({
+      visualBuilderOverlayWrapper: overlayWrapper,
+      focusedToolbar,
+      visualBuilderContainer,
+      resizeObserver,
+      noTrigger: true
+    });
+    return;
+  }
+  if (newPreviousSelectedElement !== previousSelectedEditableDOM) {
+    previousSelectedEditableDOM = newPreviousSelectedElement;
+    VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = previousSelectedEditableDOM;
+  }
   hideHoverOutline(visualBuilderContainer);
   addFocusOverlay(previousSelectedEditableDOM, overlayWrapper);
   const psuedoEditableElement = visualBuilderContainer.querySelector(
     ".visual-builder__pseudo-editable-element"
   );
   if (psuedoEditableElement) {
-    const styles = getStyleOfAnElement(editableElement);
+    const styles = getPsuedoEditableElementStyles(editableElement);
     const styleString = Object.entries(styles).reduce(
       (acc, [key, value]) => {
         return `${acc}${key}:${value};`;
@@ -57,17 +86,13 @@ function updateFocussedState({
     );
     psuedoEditableElement.style.cssText = styleString;
     psuedoEditableElement.style.visibility = "visible";
-    psuedoEditableElement.style.position = "absolute";
-    psuedoEditableElement.style.top = `${editableElement.offsetTop}px`;
-    psuedoEditableElement.style.left = `${editableElement.offsetLeft}px`;
   }
   const cslp = editableElement?.getAttribute("data-cslp") || "";
   const fieldMetadata = extractDetailsFromCslp(cslp);
   const targetElementDimension = editableElement.getBoundingClientRect();
   if (targetElementDimension.width && targetElementDimension.height) {
     const selectedElement = VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM;
-    if (!selectedElement)
-      return;
+    if (!selectedElement) return;
     positionToolbar({
       focusedToolbar,
       selectedElementDimension: selectedElement.getBoundingClientRect()
@@ -97,11 +122,28 @@ function updateFocussedState({
     }
   }
 }
-function updateFocussedStateOnMutation(focusOverlayWrapper, focusedToolbar, visualBuilderContainer) {
+function updateFocussedStateOnMutation(focusOverlayWrapper, focusedToolbar, visualBuilderContainer, resizeObserver) {
   if (!focusOverlayWrapper) return;
-  const selectedElement = VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM;
-  if (!selectedElement)
+  let selectedElement = VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM;
+  if (!selectedElement) return;
+  const selectedElementCslp = selectedElement?.getAttribute("data-cslp");
+  const newSelectedElement = document.querySelector(
+    `[data-cslp="${selectedElementCslp}"]`
+  );
+  if (!newSelectedElement && resizeObserver) {
+    hideFocusOverlay({
+      visualBuilderOverlayWrapper: focusOverlayWrapper,
+      focusedToolbar,
+      visualBuilderContainer,
+      resizeObserver,
+      noTrigger: true
+    });
     return;
+  }
+  if (newSelectedElement !== selectedElement) {
+    selectedElement = newSelectedElement;
+    VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = selectedElement;
+  }
   const selectedElementDimension = selectedElement.getBoundingClientRect();
   const focusOutline = focusOverlayWrapper.querySelector(
     ".visual-builder__overlay--outline"
@@ -183,19 +225,16 @@ function updateFocussedStateOnMutation(focusOverlayWrapper, focusedToolbar, visu
       ".visual-builder__pseudo-editable-element"
     );
     const editableElement = selectedElement;
-    const styles = getStyleOfAnElement(editableElement);
+    const styles = getPsuedoEditableElementStyles(editableElement);
     const styleString = Object.entries(styles).reduce(
       (acc, [key, value]) => {
         return `${acc}${key}:${value};`;
       },
       ""
     );
-    if (psuedoEditableElement && (psuedoEditableElement.style.cssText !== styleString || psuedoEditableElement.style.visibility !== "visible" || psuedoEditableElement.style.position !== "absolute" || psuedoEditableElement.style.top !== `${editableElement.offsetTop}px` || psuedoEditableElement.style.left !== `${editableElement.offsetLeft}px`)) {
+    if (psuedoEditableElement && (psuedoEditableElement.style.cssText !== styleString || psuedoEditableElement.style.visibility !== "visible")) {
       psuedoEditableElement.style.cssText = styleString;
       psuedoEditableElement.style.visibility = "visible";
-      psuedoEditableElement.style.position = "absolute";
-      psuedoEditableElement.style.top = `${editableElement.offsetTop}px`;
-      psuedoEditableElement.style.left = `${editableElement.offsetLeft}px`;
     }
   }
 }

package/dist/modern/visualBuilder/utils/updateFocussedState.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/utils/updateFocussedState.ts"],"sourcesContent":["import { VisualBuilder } from \"..\";\nimport { extractDetailsFromCslp } from \"../../cslp\";\nimport { getAddInstanceButtons } from \"../generators/generateAddInstanceButtons\";\nimport { addFocusOverlay } from \"../generators/generateOverlay\";\nimport { hideHoverOutline } from \"../listeners/mouseHover\";\nimport { LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX, RIGHT_EDGE_BUFFER, TOOLBAR_EDGE_BUFFER, TOP_EDGE_BUFFER } from \"./constants\";\nimport getChildrenDirection from \"./getChildrenDirection\";\nimport getStyleOfAnElement from \"./getStyleOfAnElement\";\n\ninterface ToolbarPositionParams {\n    focusedToolbar: HTMLElement | null;\n    selectedElementDimension: DOMRect;\n}\n/**\n * Adjust the position of the field toolbar instead of clearing the innerhtml fo the focused toolbar.\n * By doing this, can avoid the re-rendering of the focus field toolbar.\n*/\nfunction positionToolbar({\n    focusedToolbar,\n    selectedElementDimension,\n}: ToolbarPositionParams): void {\n    if (focusedToolbar) {\n        const targetElementRightEdgeOffset = window.scrollX + window.innerWidth - selectedElementDimension.left;\n        const distanceFromTop = selectedElementDimension.top + window.scrollY - TOOLBAR_EDGE_BUFFER;\n\n        // Adjust top position based on the available space\n        const adjustedDistanceFromTop = \n            selectedElementDimension.top + window.scrollY < TOP_EDGE_BUFFER\n                ? distanceFromTop + selectedElementDimension.height + TOP_EDGE_BUFFER\n                : distanceFromTop;\n\n        const distanceFromLeft = selectedElementDimension.left - LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX;\n        const adjustedDistanceFromLeft = Math.max(distanceFromLeft, TOOLBAR_EDGE_BUFFER);\n\n        // Handle right-edge overflow\n        if (\n            targetElementRightEdgeOffset < RIGHT_EDGE_BUFFER &&\n            (focusedToolbar.style.justifyContent !== \"flex-end\" ||\n                focusedToolbar.style.left !== `${selectedElementDimension.right + LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX}px`)\n        ) {\n            focusedToolbar.style.justifyContent = \"flex-end\";\n            focusedToolbar.style.left = `${selectedElementDimension.right + LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX}px`;\n        } else if (\n            focusedToolbar.style.justifyContent !== \"flex-start\" ||\n            focusedToolbar.style.left !== `${adjustedDistanceFromLeft}px`\n        ) {\n            focusedToolbar.style.justifyContent = \"flex-start\"; // Default\n            focusedToolbar.style.left = `${adjustedDistanceFromLeft}px`;\n        }\n\n        // Adjust top position if necessary\n        if (focusedToolbar.style.top !== `${adjustedDistanceFromTop}px`) {\n            focusedToolbar.style.top = `${adjustedDistanceFromTop}px`;\n        }\n    }\n}\n\n/**\n * This function can be used to re-draw/update the focussed state of an element.\n * The focussed state includes the overlay, psuedo-editable, toolbar, and multiple\n * instance add buttons. It is similar to handleBuilderInteraction but it does not\n * create new elements, it just updates the existing ones whenever possible.\n * NOTE: breakdown this function into multiple functions when the need arises\n */\nexport function updateFocussedState({\n    editableElement,\n    visualBuilderContainer,\n    overlayWrapper,\n    focusedToolbar,\n    resizeObserver,\n}: {\n    editableElement: HTMLElement | null;\n    visualBuilderContainer: HTMLDivElement | null;\n    overlayWrapper: HTMLDivElement | null;\n    focusedToolbar: HTMLDivElement | null;\n    resizeObserver: ResizeObserver;\n}): void {\n    const previousSelectedEditableDOM =\n        VisualBuilder.VisualBuilderGlobalState.value\n            .previousSelectedEditableDOM;\n    if (\n        !visualBuilderContainer ||\n        !editableElement ||\n        !previousSelectedEditableDOM ||\n        !overlayWrapper\n    ) {\n        return;\n    }\n    hideHoverOutline(visualBuilderContainer);\n    addFocusOverlay(previousSelectedEditableDOM, overlayWrapper);\n\n    // update psuedo editable element if present\n    const psuedoEditableElement = visualBuilderContainer.querySelector(\n        \".visual-builder__pseudo-editable-element\"\n    ) as HTMLElement;\n    if (psuedoEditableElement) {\n        const styles = getStyleOfAnElement(editableElement);\n        const styleString = Object.entries(styles).reduce(\n            (acc, [key, value]) => {\n                return `${acc}${key}:${value};`;\n            },\n            \"\"\n        );\n        psuedoEditableElement.style.cssText = styleString;\n        psuedoEditableElement.style.visibility = \"visible\";\n        psuedoEditableElement.style.position = \"absolute\";\n        psuedoEditableElement.style.top = `${editableElement.offsetTop}px`;\n        psuedoEditableElement.style.left = `${editableElement.offsetLeft}px`;\n    }\n\n    const cslp = editableElement?.getAttribute(\"data-cslp\") || \"\";\n    const fieldMetadata = extractDetailsFromCslp(cslp);\n\n    const targetElementDimension = editableElement.getBoundingClientRect();\n    if (targetElementDimension.width && targetElementDimension.height) {\n        const selectedElement = VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM;\n\n        if(!selectedElement)\n            return;\n        // position the focused tool bar\n        positionToolbar({\n            focusedToolbar: focusedToolbar,\n            selectedElementDimension: selectedElement.getBoundingClientRect(),\n        });\n    }\n\n    // re-add multiple instance add buttons\n    const buttons = getAddInstanceButtons(visualBuilderContainer);\n    const parentCslpValue =\n        fieldMetadata.multipleFieldMetadata?.parentDetails?.parentCslpValue;\n    if (\n        buttons &&\n        parentCslpValue &&\n        buttons.length > 1 &&\n        buttons[0] &&\n        buttons[1]\n    ) {\n        const [previousButton, nextButton] = buttons;\n        const direction = getChildrenDirection(\n            editableElement,\n            parentCslpValue\n        );\n        const targetDOMDimension = editableElement.getBoundingClientRect();\n\n        if (direction === \"horizontal\") {\n            const middleHeight =\n                targetDOMDimension.top +\n                (targetDOMDimension.bottom - targetDOMDimension.top) / 2 +\n                window.scrollY;\n            previousButton.style.left = `${targetDOMDimension.left}px`;\n            previousButton.style.top = `${middleHeight}px`;\n\n            nextButton.style.left = `${targetDOMDimension.right}px`;\n            nextButton.style.top = `${middleHeight}px`;\n        } else if (direction === \"vertical\") {\n            const middleWidth =\n                targetDOMDimension.left +\n                (targetDOMDimension.right - targetDOMDimension.left) / 2;\n            previousButton.style.left = `${middleWidth}px`;\n            previousButton.style.top = `${\n                targetDOMDimension.top + window.scrollY\n            }px`;\n\n            nextButton.style.left = `${middleWidth}px`;\n            nextButton.style.top = `${\n                targetDOMDimension.bottom + window.scrollY\n            }px`;\n        }\n    }\n}\n\n/**\n * This function is used to resize/reposition focus overlay and toolbar due to a\n * mutation in the DOM or due to changes in a different field (other than the focussed field).\n */\nexport function updateFocussedStateOnMutation(\n    focusOverlayWrapper: HTMLDivElement | null,\n    focusedToolbar: HTMLDivElement | null,\n    visualBuilderContainer: HTMLDivElement | null,\n) {\n    \n    if (!focusOverlayWrapper) return;\n\n    const selectedElement = VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM;\n\n    if(!selectedElement)\n        return;\n\n    const selectedElementDimension = selectedElement.getBoundingClientRect();\n\n    /**\n     * Update the focus outline if it exists.\n     */\n    const focusOutline = focusOverlayWrapper.querySelector<HTMLDivElement>(\n        \".visual-builder__overlay--outline\"\n    );\n\n    if (focusOutline) {\n        const focusOutlineDimension = focusOutline.getBoundingClientRect();\n        if(!isSameRect(selectedElementDimension, focusOutlineDimension)){\n            focusOutline.style.top = `${selectedElementDimension.top + window.scrollY}px`;\n            focusOutline.style.left = `${selectedElementDimension.left}px`;\n            focusOutline.style.width = `${selectedElementDimension.width}px`;\n            focusOutline.style.height = `${selectedElementDimension.height}px`;\n        }\n    }\n\n    /**\n     * Update the focus overlays if they exists.\n     */\n\n    const focusedOverlayTop = focusOverlayWrapper.querySelector<HTMLDivElement>(\n        \".visual-builder__overlay--top\"\n    );\n    const focusedOverlayBottom = focusOverlayWrapper.querySelector<HTMLDivElement>(\n        \".visual-builder__overlay--bottom\"\n    );\n    const focusedOverlayLeft = focusOverlayWrapper.querySelector<HTMLDivElement>(\n        \".visual-builder__overlay--left\"\n    );\n    const focusedOverlayRight = focusOverlayWrapper.querySelector<HTMLDivElement>(\n        \".visual-builder__overlay--right\"\n    );\n\n    const distanceFromTop = selectedElementDimension.top + window.scrollY;\n\n    if (focusedOverlayTop) {\n        const dimension = focusedOverlayTop.getBoundingClientRect();\n        if(dimension.height !== distanceFromTop) {\n            focusedOverlayTop.style.height = `calc(${distanceFromTop}px)`;\n        }\n    }\n\n    if (focusedOverlayBottom) {\n        const dimension = focusedOverlayBottom.getBoundingClientRect();\n        if(dimension.top !== selectedElementDimension.bottom ||\n            dimension.height !== window.document.body.scrollHeight - selectedElementDimension.bottom - window.scrollY) {\n            focusedOverlayBottom.style.top = `${\n                selectedElementDimension.bottom + window.scrollY\n            }px`;\n            focusedOverlayBottom.style.height = `${\n                window.document.body.scrollHeight -\n                selectedElementDimension.bottom -\n                window.scrollY\n            }px`;\n        }\n    }\n\n    if (focusedOverlayLeft) {\n        const dimension = focusedOverlayLeft.getBoundingClientRect();\n        if(dimension.top + window.scrollY !== distanceFromTop ||\n            dimension.height !== selectedElementDimension.height ||\n            dimension.width !== selectedElementDimension.left) {\n            focusedOverlayLeft.style.top = `${distanceFromTop}px`;\n            focusedOverlayLeft.style.height = `${selectedElementDimension.height}px`;\n            focusedOverlayLeft.style.width = `${selectedElementDimension.left}px`;\n        }\n    }\n\n    if (focusedOverlayRight) {\n        const dimension = focusedOverlayRight.getBoundingClientRect();\n        if(dimension.left !== selectedElementDimension.right ||\n            dimension.top + window.scrollY !== distanceFromTop ||\n            dimension.height !== selectedElementDimension.height ||\n            dimension.width !== document.documentElement.clientWidth - selectedElementDimension.right) {\n                focusedOverlayRight.style.left = `${selectedElementDimension.right}px`;\n                focusedOverlayRight.style.top = `${distanceFromTop}px`;\n                focusedOverlayRight.style.height = `${selectedElementDimension.height}px`;\n                focusedOverlayRight.style.width = `${\n                    document.documentElement.clientWidth - selectedElementDimension.right\n                }px`;\n        }\n    }\n\n    /**\n     * Update the focus toolbar if it exists.\n     */\n\n    if (focusedToolbar) {\n        const targetElementRightEdgeOffset = window.scrollX + window.innerWidth - selectedElementDimension.left;\n        const distanceFromTop =\n            selectedElementDimension.top + window.scrollY - TOOLBAR_EDGE_BUFFER;\n        // Position the toolbar at the top unless there's insufficient space or scrolling up is not possible (topmost element targetted).\n        const adjustedDistanceFromTop =\n            selectedElementDimension.top + window.scrollY < TOP_EDGE_BUFFER\n                ? distanceFromTop + selectedElementDimension.height + TOP_EDGE_BUFFER\n                : distanceFromTop;\n\n        const distanceFromLeft =\n            selectedElementDimension.left - LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX;\n        const adjustedDistanceFromLeft = Math.max(\n            distanceFromLeft,\n            TOOLBAR_EDGE_BUFFER\n        );\n\n        if (targetElementRightEdgeOffset < RIGHT_EDGE_BUFFER &&\n            ( focusedToolbar.style.justifyContent !== \"flex-end\" ||\n            focusedToolbar.style.left !== `${\n                selectedElementDimension.right + LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX\n            }px` )\n        ) {\n            // Overflow / Cutoff on right edge\n            focusedToolbar.style.justifyContent = \"flex-end\";\n            focusedToolbar.style.left = `${\n                selectedElementDimension.right + LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX\n            }px`;\n        } else if (focusedToolbar.style.justifyContent !== \"flex-start\" ||\n            focusedToolbar.style.left !== `${adjustedDistanceFromLeft}px`\n        ) {\n            focusedToolbar.style.justifyContent = \"flex-start\"; // default\n            focusedToolbar.style.left = `${adjustedDistanceFromLeft}px`;\n        }\n\n        if(focusedToolbar.style.top !== `${adjustedDistanceFromTop}px`){\n            focusedToolbar.style.top = `${adjustedDistanceFromTop}px`;\n        }\n    }\n\n    /**\n     * Update the pseudo-editable if it exists.\n     */\n\n    if (visualBuilderContainer) {\n        const psuedoEditableElement = visualBuilderContainer.querySelector(\n            \".visual-builder__pseudo-editable-element\"\n        ) as HTMLElement;\n        const editableElement = selectedElement as HTMLElement;\n        const styles = getStyleOfAnElement(editableElement);\n        const styleString = Object.entries(styles).reduce(\n            (acc, [key, value]) => {\n                return `${acc}${key}:${value};`;\n            },\n            \"\"\n        );\n        if (psuedoEditableElement &&\n            (\n                psuedoEditableElement.style.cssText !== styleString ||\n                psuedoEditableElement.style.visibility !== \"visible\" ||\n                psuedoEditableElement.style.position !== \"absolute\" ||\n                psuedoEditableElement.style.top !== `${editableElement.offsetTop}px` ||\n                psuedoEditableElement.style.left !== `${editableElement.offsetLeft}px`\n            )\n        ) {\n            psuedoEditableElement.style.cssText = styleString;\n            psuedoEditableElement.style.visibility = \"visible\";\n            psuedoEditableElement.style.position = \"absolute\";\n            psuedoEditableElement.style.top = `${editableElement.offsetTop}px`;\n            psuedoEditableElement.style.left = `${editableElement.offsetLeft}px`;\n        }\n    }\n}\n\nfunction isSameRect(rect1: DOMRect, rect2: DOMRect) {\n    return (\n        rect1.top === rect2.top &&\n        rect1.left === rect2.left &&\n        rect1.width === rect2.width &&\n        rect1.height === rect2.height\n    );\n}"],"mappings":"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","names":["distanceFromTop"]}
+{"version":3,"sources":["../../../../src/visualBuilder/utils/updateFocussedState.ts"],"sourcesContent":["import { VisualBuilder } from \"..\";\nimport { extractDetailsFromCslp } from \"../../cslp\";\nimport { getAddInstanceButtons } from \"../generators/generateAddInstanceButtons\";\nimport {\n    addFocusOverlay,\n    hideFocusOverlay,\n} from \"../generators/generateOverlay\";\nimport { hideHoverOutline } from \"../listeners/mouseHover\";\nimport {\n    LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX,\n    RIGHT_EDGE_BUFFER,\n    TOOLBAR_EDGE_BUFFER,\n    TOP_EDGE_BUFFER,\n} from \"./constants\";\nimport getChildrenDirection from \"./getChildrenDirection\";\nimport { getPsuedoEditableElementStyles } from \"./getPsuedoEditableStylesElement\";\nimport getStyleOfAnElement from \"./getStyleOfAnElement\";\n\ninterface ToolbarPositionParams {\n    focusedToolbar: HTMLElement | null;\n    selectedElementDimension: DOMRect;\n}\n/**\n * Adjust the position of the field toolbar instead of clearing the innerhtml fo the focused toolbar.\n * By doing this, can avoid the re-rendering of the focus field toolbar.\n */\nfunction positionToolbar({\n    focusedToolbar,\n    selectedElementDimension,\n}: ToolbarPositionParams): void {\n    if (focusedToolbar) {\n        const targetElementRightEdgeOffset =\n            window.scrollX + window.innerWidth - selectedElementDimension.left;\n        const distanceFromTop =\n            selectedElementDimension.top + window.scrollY - TOOLBAR_EDGE_BUFFER;\n\n        // Adjust top position based on the available space\n        const adjustedDistanceFromTop =\n            selectedElementDimension.top + window.scrollY < TOP_EDGE_BUFFER\n                ? distanceFromTop +\n                  selectedElementDimension.height +\n                  TOP_EDGE_BUFFER\n                : distanceFromTop;\n\n        const distanceFromLeft =\n            selectedElementDimension.left - LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX;\n        const adjustedDistanceFromLeft = Math.max(\n            distanceFromLeft,\n            TOOLBAR_EDGE_BUFFER\n        );\n\n        // Handle right-edge overflow\n        if (\n            targetElementRightEdgeOffset < RIGHT_EDGE_BUFFER &&\n            (focusedToolbar.style.justifyContent !== \"flex-end\" ||\n                focusedToolbar.style.left !==\n                    `${selectedElementDimension.right + LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX}px`)\n        ) {\n            focusedToolbar.style.justifyContent = \"flex-end\";\n            focusedToolbar.style.left = `${selectedElementDimension.right + LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX}px`;\n        } else if (\n            focusedToolbar.style.justifyContent !== \"flex-start\" ||\n            focusedToolbar.style.left !== `${adjustedDistanceFromLeft}px`\n        ) {\n            focusedToolbar.style.justifyContent = \"flex-start\"; // Default\n            focusedToolbar.style.left = `${adjustedDistanceFromLeft}px`;\n        }\n\n        // Adjust top position if necessary\n        if (focusedToolbar.style.top !== `${adjustedDistanceFromTop}px`) {\n            focusedToolbar.style.top = `${adjustedDistanceFromTop}px`;\n        }\n    }\n}\n\n/**\n * This function can be used to re-draw/update the focussed state of an element.\n * The focussed state includes the overlay, psuedo-editable, toolbar, and multiple\n * instance add buttons. It is similar to handleBuilderInteraction but it does not\n * create new elements, it just updates the existing ones whenever possible.\n * NOTE: breakdown this function into multiple functions when the need arises\n */\nexport function updateFocussedState({\n    editableElement,\n    visualBuilderContainer,\n    overlayWrapper,\n    focusedToolbar,\n    resizeObserver,\n}: {\n    editableElement: HTMLElement | null;\n    visualBuilderContainer: HTMLDivElement | null;\n    overlayWrapper: HTMLDivElement | null;\n    focusedToolbar: HTMLDivElement | null;\n    resizeObserver: ResizeObserver | null;\n}): void {\n    let previousSelectedEditableDOM =\n        VisualBuilder.VisualBuilderGlobalState.value\n            .previousSelectedEditableDOM;\n    if (\n        !visualBuilderContainer ||\n        !editableElement ||\n        !previousSelectedEditableDOM ||\n        !overlayWrapper\n    ) {\n        return;\n    }\n\n    const previousSelectedElementCslp =\n        previousSelectedEditableDOM?.getAttribute(\"data-cslp\");\n    const newPreviousSelectedElement = document.querySelector(\n        `[data-cslp=\"${previousSelectedElementCslp}\"]`\n    );\n    if (!newPreviousSelectedElement && resizeObserver) {\n        hideFocusOverlay({\n            visualBuilderOverlayWrapper: overlayWrapper,\n            focusedToolbar,\n            visualBuilderContainer,\n            resizeObserver,\n            noTrigger: true,\n        });\n        return;\n    }\n    if (newPreviousSelectedElement !== previousSelectedEditableDOM) {\n        previousSelectedEditableDOM = newPreviousSelectedElement as HTMLElement;\n        VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM =\n            previousSelectedEditableDOM;\n    }\n\n    hideHoverOutline(visualBuilderContainer);\n    addFocusOverlay(previousSelectedEditableDOM, overlayWrapper);\n\n    // update psuedo editable element if present\n    const psuedoEditableElement = visualBuilderContainer.querySelector(\n        \".visual-builder__pseudo-editable-element\"\n    ) as HTMLElement;\n    if (psuedoEditableElement) {\n        const styles = getPsuedoEditableElementStyles(editableElement);\n        const styleString = Object.entries(styles).reduce(\n            (acc, [key, value]) => {\n                return `${acc}${key}:${value};`;\n            },\n            \"\"\n        );\n        psuedoEditableElement.style.cssText = styleString;\n        // since we are copying styles from the editableEl\n        // it will now have a visibility of hidden, which we added\n        // when creating the pseudo editable element, so make the psuedo visible\n        psuedoEditableElement.style.visibility = \"visible\";\n    }\n\n    const cslp = editableElement?.getAttribute(\"data-cslp\") || \"\";\n    const fieldMetadata = extractDetailsFromCslp(cslp);\n\n    const targetElementDimension = editableElement.getBoundingClientRect();\n    if (targetElementDimension.width && targetElementDimension.height) {\n        const selectedElement =\n            VisualBuilder.VisualBuilderGlobalState.value\n                .previousSelectedEditableDOM;\n\n        if (!selectedElement) return;\n        // position the focused tool bar\n        positionToolbar({\n            focusedToolbar: focusedToolbar,\n            selectedElementDimension: selectedElement.getBoundingClientRect(),\n        });\n    }\n\n    // re-add multiple instance add buttons\n    const buttons = getAddInstanceButtons(visualBuilderContainer);\n    const parentCslpValue =\n        fieldMetadata.multipleFieldMetadata?.parentDetails?.parentCslpValue;\n    if (\n        buttons &&\n        parentCslpValue &&\n        buttons.length > 1 &&\n        buttons[0] &&\n        buttons[1]\n    ) {\n        const [previousButton, nextButton] = buttons;\n        const direction = getChildrenDirection(\n            editableElement,\n            parentCslpValue\n        );\n        const targetDOMDimension = editableElement.getBoundingClientRect();\n\n        if (direction === \"horizontal\") {\n            const middleHeight =\n                targetDOMDimension.top +\n                (targetDOMDimension.bottom - targetDOMDimension.top) / 2 +\n                window.scrollY;\n            previousButton.style.left = `${targetDOMDimension.left}px`;\n            previousButton.style.top = `${middleHeight}px`;\n\n            nextButton.style.left = `${targetDOMDimension.right}px`;\n            nextButton.style.top = `${middleHeight}px`;\n        } else if (direction === \"vertical\") {\n            const middleWidth =\n                targetDOMDimension.left +\n                (targetDOMDimension.right - targetDOMDimension.left) / 2;\n            previousButton.style.left = `${middleWidth}px`;\n            previousButton.style.top = `${\n                targetDOMDimension.top + window.scrollY\n            }px`;\n\n            nextButton.style.left = `${middleWidth}px`;\n            nextButton.style.top = `${\n                targetDOMDimension.bottom + window.scrollY\n            }px`;\n        }\n    }\n}\n\n/**\n * This function is used to resize/reposition focus overlay and toolbar due to a\n * mutation in the DOM or due to changes in a different field (other than the focussed field).\n */\nexport function updateFocussedStateOnMutation(\n    focusOverlayWrapper: HTMLDivElement | null,\n    focusedToolbar: HTMLDivElement | null,\n    visualBuilderContainer: HTMLDivElement | null,\n    resizeObserver: ResizeObserver | null\n) {\n    if (!focusOverlayWrapper) return;\n\n    let selectedElement =\n        VisualBuilder.VisualBuilderGlobalState.value\n            .previousSelectedEditableDOM;\n    if (!selectedElement) return;\n\n    const selectedElementCslp = selectedElement?.getAttribute(\"data-cslp\");\n    const newSelectedElement = document.querySelector(\n        `[data-cslp=\"${selectedElementCslp}\"]`\n    );\n    if (!newSelectedElement && resizeObserver) {\n        hideFocusOverlay({\n            visualBuilderOverlayWrapper: focusOverlayWrapper,\n            focusedToolbar,\n            visualBuilderContainer,\n            resizeObserver,\n            noTrigger: true,\n        });\n        return;\n    }\n\n    if (newSelectedElement !== selectedElement) {\n        selectedElement = newSelectedElement as HTMLElement;\n        VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM =\n            selectedElement;\n    }\n\n    const selectedElementDimension = selectedElement.getBoundingClientRect();\n\n    /**\n     * Update the focus outline if it exists.\n     */\n    const focusOutline = focusOverlayWrapper.querySelector<HTMLDivElement>(\n        \".visual-builder__overlay--outline\"\n    );\n\n    if (focusOutline) {\n        const focusOutlineDimension = focusOutline.getBoundingClientRect();\n        if (!isSameRect(selectedElementDimension, focusOutlineDimension)) {\n            focusOutline.style.top = `${selectedElementDimension.top + window.scrollY}px`;\n            focusOutline.style.left = `${selectedElementDimension.left}px`;\n            focusOutline.style.width = `${selectedElementDimension.width}px`;\n            focusOutline.style.height = `${selectedElementDimension.height}px`;\n        }\n    }\n\n    /**\n     * Update the focus overlays if they exists.\n     */\n\n    const focusedOverlayTop = focusOverlayWrapper.querySelector<HTMLDivElement>(\n        \".visual-builder__overlay--top\"\n    );\n    const focusedOverlayBottom =\n        focusOverlayWrapper.querySelector<HTMLDivElement>(\n            \".visual-builder__overlay--bottom\"\n        );\n    const focusedOverlayLeft =\n        focusOverlayWrapper.querySelector<HTMLDivElement>(\n            \".visual-builder__overlay--left\"\n        );\n    const focusedOverlayRight =\n        focusOverlayWrapper.querySelector<HTMLDivElement>(\n            \".visual-builder__overlay--right\"\n        );\n\n    const distanceFromTop = selectedElementDimension.top + window.scrollY;\n\n    if (focusedOverlayTop) {\n        const dimension = focusedOverlayTop.getBoundingClientRect();\n        if (dimension.height !== distanceFromTop) {\n            focusedOverlayTop.style.height = `calc(${distanceFromTop}px)`;\n        }\n    }\n\n    if (focusedOverlayBottom) {\n        const dimension = focusedOverlayBottom.getBoundingClientRect();\n        if (\n            dimension.top !== selectedElementDimension.bottom ||\n            dimension.height !==\n                window.document.body.scrollHeight -\n                    selectedElementDimension.bottom -\n                    window.scrollY\n        ) {\n            focusedOverlayBottom.style.top = `${\n                selectedElementDimension.bottom + window.scrollY\n            }px`;\n            focusedOverlayBottom.style.height = `${\n                window.document.body.scrollHeight -\n                selectedElementDimension.bottom -\n                window.scrollY\n            }px`;\n        }\n    }\n\n    if (focusedOverlayLeft) {\n        const dimension = focusedOverlayLeft.getBoundingClientRect();\n        if (\n            dimension.top + window.scrollY !== distanceFromTop ||\n            dimension.height !== selectedElementDimension.height ||\n            dimension.width !== selectedElementDimension.left\n        ) {\n            focusedOverlayLeft.style.top = `${distanceFromTop}px`;\n            focusedOverlayLeft.style.height = `${selectedElementDimension.height}px`;\n            focusedOverlayLeft.style.width = `${selectedElementDimension.left}px`;\n        }\n    }\n\n    if (focusedOverlayRight) {\n        const dimension = focusedOverlayRight.getBoundingClientRect();\n        if (\n            dimension.left !== selectedElementDimension.right ||\n            dimension.top + window.scrollY !== distanceFromTop ||\n            dimension.height !== selectedElementDimension.height ||\n            dimension.width !==\n                document.documentElement.clientWidth -\n                    selectedElementDimension.right\n        ) {\n            focusedOverlayRight.style.left = `${selectedElementDimension.right}px`;\n            focusedOverlayRight.style.top = `${distanceFromTop}px`;\n            focusedOverlayRight.style.height = `${selectedElementDimension.height}px`;\n            focusedOverlayRight.style.width = `${\n                document.documentElement.clientWidth -\n                selectedElementDimension.right\n            }px`;\n        }\n    }\n\n    /**\n     * Update the focus toolbar if it exists.\n     */\n\n    if (focusedToolbar) {\n        const targetElementRightEdgeOffset =\n            window.scrollX + window.innerWidth - selectedElementDimension.left;\n        const distanceFromTop =\n            selectedElementDimension.top + window.scrollY - TOOLBAR_EDGE_BUFFER;\n        // Position the toolbar at the top unless there's insufficient space or scrolling up is not possible (topmost element targetted).\n        const adjustedDistanceFromTop =\n            selectedElementDimension.top + window.scrollY < TOP_EDGE_BUFFER\n                ? distanceFromTop +\n                  selectedElementDimension.height +\n                  TOP_EDGE_BUFFER\n                : distanceFromTop;\n\n        const distanceFromLeft =\n            selectedElementDimension.left - LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX;\n        const adjustedDistanceFromLeft = Math.max(\n            distanceFromLeft,\n            TOOLBAR_EDGE_BUFFER\n        );\n\n        if (\n            targetElementRightEdgeOffset < RIGHT_EDGE_BUFFER &&\n            (focusedToolbar.style.justifyContent !== \"flex-end\" ||\n                focusedToolbar.style.left !==\n                    `${\n                        selectedElementDimension.right +\n                        LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX\n                    }px`)\n        ) {\n            // Overflow / Cutoff on right edge\n            focusedToolbar.style.justifyContent = \"flex-end\";\n            focusedToolbar.style.left = `${\n                selectedElementDimension.right +\n                LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX\n            }px`;\n        } else if (\n            focusedToolbar.style.justifyContent !== \"flex-start\" ||\n            focusedToolbar.style.left !== `${adjustedDistanceFromLeft}px`\n        ) {\n            focusedToolbar.style.justifyContent = \"flex-start\"; // default\n            focusedToolbar.style.left = `${adjustedDistanceFromLeft}px`;\n        }\n\n        if (focusedToolbar.style.top !== `${adjustedDistanceFromTop}px`) {\n            focusedToolbar.style.top = `${adjustedDistanceFromTop}px`;\n        }\n    }\n\n    /**\n     * Update the pseudo-editable if it exists.\n     */\n\n    if (visualBuilderContainer) {\n        const psuedoEditableElement = visualBuilderContainer.querySelector(\n            \".visual-builder__pseudo-editable-element\"\n        ) as HTMLElement;\n        const editableElement = selectedElement as HTMLElement;\n        const styles = getPsuedoEditableElementStyles(editableElement);\n        const styleString = Object.entries(styles).reduce(\n            (acc, [key, value]) => {\n                return `${acc}${key}:${value};`;\n            },\n            \"\"\n        );\n        if (\n            psuedoEditableElement &&\n            (psuedoEditableElement.style.cssText !== styleString ||\n                psuedoEditableElement.style.visibility !== \"visible\")\n        ) {\n            psuedoEditableElement.style.cssText = styleString;\n            // since we are copying styles from the editableEl\n            // it will now have a visibility of hidden, which we added\n            // when creating the pseudo editable element, so make the psuedo visible\n            psuedoEditableElement.style.visibility = \"visible\";\n        }\n    }\n}\n\nfunction isSameRect(rect1: DOMRect, rect2: DOMRect) {\n    return (\n        rect1.top === rect2.top &&\n        rect1.left === rect2.left &&\n        rect1.width === rect2.width &&\n        rect1.height === rect2.height\n    );\n}\n"],"mappings":"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","names":["distanceFromTop"]}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@contentstack/live-preview-utils",
-    "version": "3.0.0",
+    "version": "3.0.2",
     "description": "Contentstack provides the Live Preview SDK to establish a communication channel between the various Contentstack SDKs and your website, transmitting  live changes to the preview pane.",
     "type": "module",
     "types": "dist/legacy/index.d.ts",