Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

card button resizing issue fixed #265

Merged
merged 1 commit into from
Oct 16, 2024
Merged

card button resizing issue fixed #265

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 58 additions & 13 deletions src/visualBuilder/utils/updateFocussedState.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,58 @@ import { VisualBuilder } from "..";
import { extractDetailsFromCslp } from "../../cslp";
import { getAddInstanceButtons } from "../generators/generateAddInstanceButtons";
import { addFocusOverlay } from "../generators/generateOverlay";
import { appendFocusedToolbar } from "../generators/generateToolbar";
import { hideHoverOutline } from "../listeners/mouseHover";
import getChildrenDirection from "./getChildrenDirection";
import getStyleOfAnElement from "./getStyleOfAnElement";
import { LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX, RIGHT_EDGE_BUFFER, TOOLBAR_EDGE_BUFFER, TOP_EDGE_BUFFER } from "./constants";

interface ToolbarPositionParams {
focusedToolbar: HTMLElement | null;
selectedElementDimension: DOMRect;
}
/**
* Adjust the position of the field toolbar instead of clearing the innerhtml fo the focused toolbar.
* By doing this, can avoid the re-rendering of the focus field toolbar.
*/
function positionToolbar({
focusedToolbar,
selectedElementDimension,
}: ToolbarPositionParams): void {
if (focusedToolbar) {
const targetElementRightEdgeOffset = window.scrollX + window.innerWidth - selectedElementDimension.left;
const distanceFromTop = selectedElementDimension.top + window.scrollY - TOOLBAR_EDGE_BUFFER;

// Adjust top position based on the available space
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);

// Handle right-edge overflow
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"; // Default
focusedToolbar.style.left = `${adjustedDistanceFromLeft}px`;
}

// Adjust top position if necessary
if (focusedToolbar.style.top !== `${adjustedDistanceFromTop}px`) {
focusedToolbar.style.top = `${adjustedDistanceFromTop}px`;
}
}
}

/**
* This function can be used to re-draw/update the focussed state of an element.
Expand Down Expand Up @@ -65,18 +113,15 @@ export function updateFocussedState({

const targetElementDimension = editableElement.getBoundingClientRect();
if (targetElementDimension.width && targetElementDimension.height) {
// re-add focussed toolbar
if (focusedToolbar) {
focusedToolbar.innerHTML = "";
}
appendFocusedToolbar(
{
editableElement: editableElement as HTMLElement,
cslpData: cslp,
fieldMetadata,
},
focusedToolbar as HTMLDivElement
);
const selectedElement = VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM;

if(!selectedElement)
return;
// position the focused tool bar
positionToolbar({
focusedToolbar: focusedToolbar,
selectedElementDimension: selectedElement.getBoundingClientRect(),
});
}

// re-add multiple instance add buttons
Expand Down
Loading