@contentstack/live-preview-utils 2.0.4 → 3.0.0

package/dist/legacy/visualBuilder/utils/types/postMessage.types.js

@@ -0,0 +1,43 @@
+import "../../../chunk-5WRI5ZAA.js";
+
+// src/visualBuilder/utils/types/postMessage.types.ts
+var VisualBuilderPostMessageEvents = /* @__PURE__ */ ((VisualBuilderPostMessageEvents2) => {
+  VisualBuilderPostMessageEvents2["INIT"] = "init";
+  VisualBuilderPostMessageEvents2["ADD_INSTANCE"] = "add-instance";
+  VisualBuilderPostMessageEvents2["UPDATE_FIELD"] = "update-field";
+  VisualBuilderPostMessageEvents2["SYNC_FIELD"] = "sync-field";
+  VisualBuilderPostMessageEvents2["OPEN_ASSET_MODAL"] = "open-asset-modal";
+  VisualBuilderPostMessageEvents2["OPEN_REFERENCE_MODAL"] = "open-reference-modal";
+  VisualBuilderPostMessageEvents2["OPEN_QUICK_FORM"] = "open-quick-form";
+  VisualBuilderPostMessageEvents2["TOGGLE_FORM"] = "toggle-quick-form";
+  VisualBuilderPostMessageEvents2["GET_FIELD_SCHEMA"] = "get-field-schema";
+  VisualBuilderPostMessageEvents2["GET_FIELD_DATA"] = "get-field-data";
+  VisualBuilderPostMessageEvents2["GET_FIELD_PATH_WITH_UID"] = "get-field-path-with-uid";
+  VisualBuilderPostMessageEvents2["GET_FIELD_DISPLAY_NAMES"] = "get-field-display-names";
+  VisualBuilderPostMessageEvents2["MOUSE_CLICK"] = "mouse-click";
+  VisualBuilderPostMessageEvents2["FOCUS_FIELD"] = "focus-field";
+  VisualBuilderPostMessageEvents2["OPEN_FIELD_EDIT_MODAL"] = "open-field-edit-modal";
+  VisualBuilderPostMessageEvents2["DELETE_INSTANCE"] = "delete-instance";
+  VisualBuilderPostMessageEvents2["MOVE_INSTANCE"] = "move-instance";
+  VisualBuilderPostMessageEvents2["GET_DISCUSSION_ID"] = "get-discussion-id-for-comment-modal";
+  VisualBuilderPostMessageEvents2["OPEN_FIELD_COMMENT_MODAL"] = "open-field-comment-modal";
+  VisualBuilderPostMessageEvents2["GET_ALL_ENTRIES_IN_CURRENT_PAGE"] = "get-entries-in-current-page";
+  VisualBuilderPostMessageEvents2["HIDE_FOCUS_OVERLAY"] = "hide-focus-overlay";
+  VisualBuilderPostMessageEvents2["SHOW_DRAFT_FIELDS"] = "show-draft-fields";
+  VisualBuilderPostMessageEvents2["REMOVE_DRAFT_FIELDS"] = "remove-draft-fields";
+  VisualBuilderPostMessageEvents2["SHOW_VARIANT_FIELDS"] = "show-variant-fields";
+  VisualBuilderPostMessageEvents2["REMOVE_VARIANT_FIELDS"] = "remove-variant-fields";
+  VisualBuilderPostMessageEvents2["SET_AUDIENCE_MODE"] = "set-audience-mode";
+  VisualBuilderPostMessageEvents2["UPDATE_DISCUSSION_ID"] = "update-discussion-id-for-focus-field";
+  VisualBuilderPostMessageEvents2["SCROLL_TO_FIELD"] = "scroll-to-view-field-by-cslp-value";
+  VisualBuilderPostMessageEvents2["HIGHLIGHT_ACTIVE_COMMENTS"] = "highlight-active-comments-by-data-cs";
+  VisualBuilderPostMessageEvents2["REMOVE_HIGHLIGHTED_COMMENTS"] = "remove-highlighted-comments";
+  VisualBuilderPostMessageEvents2["GET_VARIANT_ID"] = "get-variant-id";
+  VisualBuilderPostMessageEvents2["GET_LOCALE"] = "get-locale";
+  VisualBuilderPostMessageEvents2["SEND_VARIANT_AND_LOCALE"] = "send-variant-and-locale";
+  return VisualBuilderPostMessageEvents2;
+})(VisualBuilderPostMessageEvents || {});
+export {
+  VisualBuilderPostMessageEvents
+};
+//# sourceMappingURL=postMessage.types.js.map

package/dist/legacy/visualBuilder/utils/types/postMessage.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/visualBuilder/utils/types/postMessage.types.ts"],"sourcesContent":["export enum VisualBuilderPostMessageEvents {\n    INIT = \"init\",\n    ADD_INSTANCE = \"add-instance\",\n    UPDATE_FIELD = \"update-field\",\n    SYNC_FIELD = 'sync-field',\n    OPEN_ASSET_MODAL = \"open-asset-modal\",\n    OPEN_REFERENCE_MODAL = \"open-reference-modal\",\n    OPEN_QUICK_FORM = \"open-quick-form\",\n    TOGGLE_FORM = \"toggle-quick-form\",\n    GET_FIELD_SCHEMA = \"get-field-schema\",\n    GET_FIELD_DATA = \"get-field-data\",\n    GET_FIELD_PATH_WITH_UID = \"get-field-path-with-uid\",\n    GET_FIELD_DISPLAY_NAMES = \"get-field-display-names\",\n    MOUSE_CLICK = \"mouse-click\",\n    FOCUS_FIELD = \"focus-field\",\n    OPEN_FIELD_EDIT_MODAL = \"open-field-edit-modal\",\n    DELETE_INSTANCE = \"delete-instance\",\n    MOVE_INSTANCE = \"move-instance\",\n    GET_DISCUSSION_ID = \"get-discussion-id-for-comment-modal\",\n    OPEN_FIELD_COMMENT_MODAL = \"open-field-comment-modal\",\n    // FROM visual builder\n    GET_ALL_ENTRIES_IN_CURRENT_PAGE = \"get-entries-in-current-page\",\n    HIDE_FOCUS_OVERLAY = \"hide-focus-overlay\",\n    SHOW_DRAFT_FIELDS = \"show-draft-fields\",\n    REMOVE_DRAFT_FIELDS = \"remove-draft-fields\",\n    SHOW_VARIANT_FIELDS = \"show-variant-fields\",\n    REMOVE_VARIANT_FIELDS = \"remove-variant-fields\",\n    SET_AUDIENCE_MODE = \"set-audience-mode\",\n    UPDATE_DISCUSSION_ID = \"update-discussion-id-for-focus-field\",\n    SCROLL_TO_FIELD = \"scroll-to-view-field-by-cslp-value\",\n    HIGHLIGHT_ACTIVE_COMMENTS = \"highlight-active-comments-by-data-cs\",\n    REMOVE_HIGHLIGHTED_COMMENTS = \"remove-highlighted-comments\",\n    GET_VARIANT_ID = \"get-variant-id\",\n    GET_LOCALE = \"get-locale\",\n    SEND_VARIANT_AND_LOCALE = \"send-variant-and-locale\",\n}\n"],"mappings":";;;AAAO,IAAK,iCAAL,kBAAKA,oCAAL;AACH,EAAAA,gCAAA,UAAO;AACP,EAAAA,gCAAA,kBAAe;AACf,EAAAA,gCAAA,kBAAe;AACf,EAAAA,gCAAA,gBAAa;AACb,EAAAA,gCAAA,sBAAmB;AACnB,EAAAA,gCAAA,0BAAuB;AACvB,EAAAA,gCAAA,qBAAkB;AAClB,EAAAA,gCAAA,iBAAc;AACd,EAAAA,gCAAA,sBAAmB;AACnB,EAAAA,gCAAA,oBAAiB;AACjB,EAAAA,gCAAA,6BAA0B;AAC1B,EAAAA,gCAAA,6BAA0B;AAC1B,EAAAA,gCAAA,iBAAc;AACd,EAAAA,gCAAA,iBAAc;AACd,EAAAA,gCAAA,2BAAwB;AACxB,EAAAA,gCAAA,qBAAkB;AAClB,EAAAA,gCAAA,mBAAgB;AAChB,EAAAA,gCAAA,uBAAoB;AACpB,EAAAA,gCAAA,8BAA2B;AAE3B,EAAAA,gCAAA,qCAAkC;AAClC,EAAAA,gCAAA,wBAAqB;AACrB,EAAAA,gCAAA,uBAAoB;AACpB,EAAAA,gCAAA,yBAAsB;AACtB,EAAAA,gCAAA,yBAAsB;AACtB,EAAAA,gCAAA,2BAAwB;AACxB,EAAAA,gCAAA,uBAAoB;AACpB,EAAAA,gCAAA,0BAAuB;AACvB,EAAAA,gCAAA,qBAAkB;AAClB,EAAAA,gCAAA,+BAA4B;AAC5B,EAAAA,gCAAA,iCAA8B;AAC9B,EAAAA,gCAAA,oBAAiB;AACjB,EAAAA,gCAAA,gBAAa;AACb,EAAAA,gCAAA,6BAA0B;AAlClB,SAAAA;AAAA,GAAA;","names":["VisualBuilderPostMessageEvents"]}

package/dist/legacy/visualBuilder/utils/updateFocussedState.cjs

@@ -0,0 +1,244 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/visualBuilder/utils/updateFocussedState.ts
+var updateFocussedState_exports = {};
+__export(updateFocussedState_exports, {
+  updateFocussedState: () => updateFocussedState,
+  updateFocussedStateOnMutation: () => updateFocussedStateOnMutation
+});
+module.exports = __toCommonJS(updateFocussedState_exports);
+var import__ = require("../index.cjs");
+var import_cslp = require("../../cslp/index.cjs");
+var import_generateAddInstanceButtons = require("../generators/generateAddInstanceButtons.cjs");
+var import_generateOverlay = require("../generators/generateOverlay.cjs");
+var import_mouseHover = require("../listeners/mouseHover.cjs");
+var import_constants = require("./constants.cjs");
+var import_getChildrenDirection = __toESM(require("./getChildrenDirection.cjs"), 1);
+var import_getStyleOfAnElement = __toESM(require("./getStyleOfAnElement.cjs"), 1);
+function positionToolbar({
+  focusedToolbar,
+  selectedElementDimension
+}) {
+  if (focusedToolbar) {
+    const targetElementRightEdgeOffset = window.scrollX + window.innerWidth - selectedElementDimension.left;
+    const distanceFromTop = selectedElementDimension.top + window.scrollY - import_constants.TOOLBAR_EDGE_BUFFER;
+    const adjustedDistanceFromTop = selectedElementDimension.top + window.scrollY < import_constants.TOP_EDGE_BUFFER ? distanceFromTop + selectedElementDimension.height + import_constants.TOP_EDGE_BUFFER : distanceFromTop;
+    const distanceFromLeft = selectedElementDimension.left - import_constants.LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX;
+    const adjustedDistanceFromLeft = Math.max(distanceFromLeft, import_constants.TOOLBAR_EDGE_BUFFER);
+    if (targetElementRightEdgeOffset < import_constants.RIGHT_EDGE_BUFFER && (focusedToolbar.style.justifyContent !== "flex-end" || focusedToolbar.style.left !== `${selectedElementDimension.right + import_constants.LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX}px`)) {
+      focusedToolbar.style.justifyContent = "flex-end";
+      focusedToolbar.style.left = `${selectedElementDimension.right + import_constants.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
+}) {
+  var _a, _b;
+  const previousSelectedEditableDOM = import__.VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM;
+  if (!visualBuilderContainer || !editableElement || !previousSelectedEditableDOM || !overlayWrapper) {
+    return;
+  }
+  (0, import_mouseHover.hideHoverOutline)(visualBuilderContainer);
+  (0, import_generateOverlay.addFocusOverlay)(previousSelectedEditableDOM, overlayWrapper);
+  const psuedoEditableElement = visualBuilderContainer.querySelector(
+    ".visual-builder__pseudo-editable-element"
+  );
+  if (psuedoEditableElement) {
+    const styles = (0, import_getStyleOfAnElement.default)(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 == null ? void 0 : editableElement.getAttribute("data-cslp")) || "";
+  const fieldMetadata = (0, import_cslp.extractDetailsFromCslp)(cslp);
+  const targetElementDimension = editableElement.getBoundingClientRect();
+  if (targetElementDimension.width && targetElementDimension.height) {
+    const selectedElement = import__.VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM;
+    if (!selectedElement)
+      return;
+    positionToolbar({
+      focusedToolbar,
+      selectedElementDimension: selectedElement.getBoundingClientRect()
+    });
+  }
+  const buttons = (0, import_generateAddInstanceButtons.getAddInstanceButtons)(visualBuilderContainer);
+  const parentCslpValue = (_b = (_a = fieldMetadata.multipleFieldMetadata) == null ? void 0 : _a.parentDetails) == null ? void 0 : _b.parentCslpValue;
+  if (buttons && parentCslpValue && buttons.length > 1 && buttons[0] && buttons[1]) {
+    const [previousButton, nextButton] = buttons;
+    const direction = (0, import_getChildrenDirection.default)(
+      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 = import__.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 - import_constants.TOOLBAR_EDGE_BUFFER;
+    const adjustedDistanceFromTop = selectedElementDimension.top + window.scrollY < import_constants.TOP_EDGE_BUFFER ? distanceFromTop2 + selectedElementDimension.height + import_constants.TOP_EDGE_BUFFER : distanceFromTop2;
+    const distanceFromLeft = selectedElementDimension.left - import_constants.LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX;
+    const adjustedDistanceFromLeft = Math.max(
+      distanceFromLeft,
+      import_constants.TOOLBAR_EDGE_BUFFER
+    );
+    if (targetElementRightEdgeOffset < import_constants.RIGHT_EDGE_BUFFER && (focusedToolbar.style.justifyContent !== "flex-end" || focusedToolbar.style.left !== `${selectedElementDimension.right + import_constants.LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX}px`)) {
+      focusedToolbar.style.justifyContent = "flex-end";
+      focusedToolbar.style.left = `${selectedElementDimension.right + import_constants.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 = (0, import_getStyleOfAnElement.default)(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;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  updateFocussedState,
+  updateFocussedStateOnMutation
+});
+//# sourceMappingURL=updateFocussedState.cjs.map

package/dist/legacy/visualBuilder/utils/updateFocussedState.cjs.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":["getStyleOfAnElement","getChildrenDirection","distanceFromTop"]}

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

@@ -0,0 +1,21 @@
+/**
+ * This function can be used to re-draw/update the focussed state of an element.
+ * The focussed state includes the overlay, psuedo-editable, toolbar, and multiple
+ * instance add buttons. It is similar to handleBuilderInteraction but it does not
+ * create new elements, it just updates the existing ones whenever possible.
+ * NOTE: breakdown this function into multiple functions when the need arises
+ */
+declare function updateFocussedState({ editableElement, visualBuilderContainer, overlayWrapper, focusedToolbar, resizeObserver, }: {
+    editableElement: HTMLElement | null;
+    visualBuilderContainer: HTMLDivElement | null;
+    overlayWrapper: HTMLDivElement | null;
+    focusedToolbar: HTMLDivElement | null;
+    resizeObserver: ResizeObserver;
+}): 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;
+
+export { updateFocussedState, updateFocussedStateOnMutation };

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

@@ -0,0 +1,21 @@
+/**
+ * This function can be used to re-draw/update the focussed state of an element.
+ * The focussed state includes the overlay, psuedo-editable, toolbar, and multiple
+ * instance add buttons. It is similar to handleBuilderInteraction but it does not
+ * create new elements, it just updates the existing ones whenever possible.
+ * NOTE: breakdown this function into multiple functions when the need arises
+ */
+declare function updateFocussedState({ editableElement, visualBuilderContainer, overlayWrapper, focusedToolbar, resizeObserver, }: {
+    editableElement: HTMLElement | null;
+    visualBuilderContainer: HTMLDivElement | null;
+    overlayWrapper: HTMLDivElement | null;
+    focusedToolbar: HTMLDivElement | null;
+    resizeObserver: ResizeObserver;
+}): 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;
+
+export { updateFocussedState, updateFocussedStateOnMutation };

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

@@ -0,0 +1,210 @@
+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
+}) {
+  var _a, _b;
+  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 == null ? void 0 : 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 = (_b = (_a = fieldMetadata.multipleFieldMetadata) == null ? void 0 : _a.parentDetails) == null ? void 0 : _b.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