@contentstack/live-preview-utils 2.0.4 → 3.0.0

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

@@ -0,0 +1,209 @@
+import "../../chunk-5WRI5ZAA.js";
+
+// src/visualBuilder/utils/updateFocussedState.ts
+import { VisualBuilder } from "../index.js";
+import { extractDetailsFromCslp } from "../../cslp/index.js";
+import { getAddInstanceButtons } from "../generators/generateAddInstanceButtons.js";
+import { addFocusOverlay } 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 getChildrenDirection from "./getChildrenDirection.js";
+import getStyleOfAnElement from "./getStyleOfAnElement.js";
+function positionToolbar({
+  focusedToolbar,
+  selectedElementDimension
+}) {
+  if (focusedToolbar) {
+    const targetElementRightEdgeOffset = window.scrollX + window.innerWidth - selectedElementDimension.left;
+    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);
+    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`;
+    } else if (focusedToolbar.style.justifyContent !== "flex-start" || focusedToolbar.style.left !== `${adjustedDistanceFromLeft}px`) {
+      focusedToolbar.style.justifyContent = "flex-start";
+      focusedToolbar.style.left = `${adjustedDistanceFromLeft}px`;
+    }
+    if (focusedToolbar.style.top !== `${adjustedDistanceFromTop}px`) {
+      focusedToolbar.style.top = `${adjustedDistanceFromTop}px`;
+    }
+  }
+}
+function updateFocussedState({
+  editableElement,
+  visualBuilderContainer,
+  overlayWrapper,
+  focusedToolbar,
+  resizeObserver
+}) {
+  const previousSelectedEditableDOM = VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM;
+  if (!visualBuilderContainer || !editableElement || !previousSelectedEditableDOM || !overlayWrapper) {
+    return;
+  }
+  hideHoverOutline(visualBuilderContainer);
+  addFocusOverlay(previousSelectedEditableDOM, overlayWrapper);
+  const psuedoEditableElement = visualBuilderContainer.querySelector(
+    ".visual-builder__pseudo-editable-element"
+  );
+  if (psuedoEditableElement) {
+    const styles = getStyleOfAnElement(editableElement);
+    const styleString = Object.entries(styles).reduce(
+      (acc, [key, value]) => {
+        return `${acc}${key}:${value};`;
+      },
+      ""
+    );
+    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;
+    positionToolbar({
+      focusedToolbar,
+      selectedElementDimension: selectedElement.getBoundingClientRect()
+    });
+  }
+  const buttons = getAddInstanceButtons(visualBuilderContainer);
+  const parentCslpValue = fieldMetadata.multipleFieldMetadata?.parentDetails?.parentCslpValue;
+  if (buttons && parentCslpValue && buttons.length > 1 && buttons[0] && buttons[1]) {
+    const [previousButton, nextButton] = buttons;
+    const direction = getChildrenDirection(
+      editableElement,
+      parentCslpValue
+    );
+    const targetDOMDimension = editableElement.getBoundingClientRect();
+    if (direction === "horizontal") {
+      const middleHeight = targetDOMDimension.top + (targetDOMDimension.bottom - targetDOMDimension.top) / 2 + window.scrollY;
+      previousButton.style.left = `${targetDOMDimension.left}px`;
+      previousButton.style.top = `${middleHeight}px`;
+      nextButton.style.left = `${targetDOMDimension.right}px`;
+      nextButton.style.top = `${middleHeight}px`;
+    } else if (direction === "vertical") {
+      const middleWidth = targetDOMDimension.left + (targetDOMDimension.right - targetDOMDimension.left) / 2;
+      previousButton.style.left = `${middleWidth}px`;
+      previousButton.style.top = `${targetDOMDimension.top + window.scrollY}px`;
+      nextButton.style.left = `${middleWidth}px`;
+      nextButton.style.top = `${targetDOMDimension.bottom + window.scrollY}px`;
+    }
+  }
+}
+function updateFocussedStateOnMutation(focusOverlayWrapper, focusedToolbar, visualBuilderContainer) {
+  if (!focusOverlayWrapper) return;
+  const selectedElement = VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM;
+  if (!selectedElement)
+    return;
+  const selectedElementDimension = selectedElement.getBoundingClientRect();
+  const focusOutline = focusOverlayWrapper.querySelector(
+    ".visual-builder__overlay--outline"
+  );
+  if (focusOutline) {
+    const focusOutlineDimension = focusOutline.getBoundingClientRect();
+    if (!isSameRect(selectedElementDimension, focusOutlineDimension)) {
+      focusOutline.style.top = `${selectedElementDimension.top + window.scrollY}px`;
+      focusOutline.style.left = `${selectedElementDimension.left}px`;
+      focusOutline.style.width = `${selectedElementDimension.width}px`;
+      focusOutline.style.height = `${selectedElementDimension.height}px`;
+    }
+  }
+  const focusedOverlayTop = focusOverlayWrapper.querySelector(
+    ".visual-builder__overlay--top"
+  );
+  const focusedOverlayBottom = focusOverlayWrapper.querySelector(
+    ".visual-builder__overlay--bottom"
+  );
+  const focusedOverlayLeft = focusOverlayWrapper.querySelector(
+    ".visual-builder__overlay--left"
+  );
+  const focusedOverlayRight = focusOverlayWrapper.querySelector(
+    ".visual-builder__overlay--right"
+  );
+  const distanceFromTop = selectedElementDimension.top + window.scrollY;
+  if (focusedOverlayTop) {
+    const dimension = focusedOverlayTop.getBoundingClientRect();
+    if (dimension.height !== distanceFromTop) {
+      focusedOverlayTop.style.height = `calc(${distanceFromTop}px)`;
+    }
+  }
+  if (focusedOverlayBottom) {
+    const dimension = focusedOverlayBottom.getBoundingClientRect();
+    if (dimension.top !== selectedElementDimension.bottom || dimension.height !== window.document.body.scrollHeight - selectedElementDimension.bottom - window.scrollY) {
+      focusedOverlayBottom.style.top = `${selectedElementDimension.bottom + window.scrollY}px`;
+      focusedOverlayBottom.style.height = `${window.document.body.scrollHeight - selectedElementDimension.bottom - window.scrollY}px`;
+    }
+  }
+  if (focusedOverlayLeft) {
+    const dimension = focusedOverlayLeft.getBoundingClientRect();
+    if (dimension.top + window.scrollY !== distanceFromTop || dimension.height !== selectedElementDimension.height || dimension.width !== selectedElementDimension.left) {
+      focusedOverlayLeft.style.top = `${distanceFromTop}px`;
+      focusedOverlayLeft.style.height = `${selectedElementDimension.height}px`;
+      focusedOverlayLeft.style.width = `${selectedElementDimension.left}px`;
+    }
+  }
+  if (focusedOverlayRight) {
+    const dimension = focusedOverlayRight.getBoundingClientRect();
+    if (dimension.left !== selectedElementDimension.right || dimension.top + window.scrollY !== distanceFromTop || dimension.height !== selectedElementDimension.height || dimension.width !== document.documentElement.clientWidth - selectedElementDimension.right) {
+      focusedOverlayRight.style.left = `${selectedElementDimension.right}px`;
+      focusedOverlayRight.style.top = `${distanceFromTop}px`;
+      focusedOverlayRight.style.height = `${selectedElementDimension.height}px`;
+      focusedOverlayRight.style.width = `${document.documentElement.clientWidth - selectedElementDimension.right}px`;
+    }
+  }
+  if (focusedToolbar) {
+    const targetElementRightEdgeOffset = window.scrollX + window.innerWidth - selectedElementDimension.left;
+    const distanceFromTop2 = selectedElementDimension.top + window.scrollY - TOOLBAR_EDGE_BUFFER;
+    const adjustedDistanceFromTop = selectedElementDimension.top + window.scrollY < TOP_EDGE_BUFFER ? distanceFromTop2 + selectedElementDimension.height + TOP_EDGE_BUFFER : distanceFromTop2;
+    const distanceFromLeft = selectedElementDimension.left - LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX;
+    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`;
+    } else if (focusedToolbar.style.justifyContent !== "flex-start" || focusedToolbar.style.left !== `${adjustedDistanceFromLeft}px`) {
+      focusedToolbar.style.justifyContent = "flex-start";
+      focusedToolbar.style.left = `${adjustedDistanceFromLeft}px`;
+    }
+    if (focusedToolbar.style.top !== `${adjustedDistanceFromTop}px`) {
+      focusedToolbar.style.top = `${adjustedDistanceFromTop}px`;
+    }
+  }
+  if (visualBuilderContainer) {
+    const psuedoEditableElement = visualBuilderContainer.querySelector(
+      ".visual-builder__pseudo-editable-element"
+    );
+    const editableElement = selectedElement;
+    const styles = getStyleOfAnElement(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`)) {
+      psuedoEditableElement.style.cssText = styleString;
+      psuedoEditableElement.style.visibility = "visible";
+      psuedoEditableElement.style.position = "absolute";
+      psuedoEditableElement.style.top = `${editableElement.offsetTop}px`;
+      psuedoEditableElement.style.left = `${editableElement.offsetLeft}px`;
+    }
+  }
+}
+function isSameRect(rect1, rect2) {
+  return rect1.top === rect2.top && rect1.left === rect2.left && rect1.width === rect2.width && rect1.height === rect2.height;
+}
+export {
+  updateFocussedState,
+  updateFocussedStateOnMutation
+};
+//# sourceMappingURL=updateFocussedState.js.map

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

@@ -0,0 +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"]}