fix: drop target highlighting is moved when the Settings bar is open

raaymax · Mar 6, 2024 · 3fdecfb · 3fdecfb
1 parent 72a2f75
commit 3fdecfb
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 8 deletions.
diff --git a/ui/src/builder/BuilderApp.vue b/ui/src/builder/BuilderApp.vue
@@ -90,6 +90,7 @@
 				<BuilderInstanceTracker
 					:key="candidateInstancePath"
 					class="insertionOverlayTracker"
+					:ignore-settings-sidebar="true"
 					:is-off-bounds-allowed="true"
 					:instance-path="candidateInstancePath"
 					:match-size="true"
@@ -99,6 +100,7 @@
 				<BuilderInstanceTracker
 					:key="candidateInstancePath"
 					class="insertionLabelTracker"
+					:ignore-settings-sidebar="true"
 					:instance-path="candidateInstancePath"
 					:vertical-offset-pixels="-48"
 				>

diff --git a/ui/src/builder/BuilderInstanceTracker.vue b/ui/src/builder/BuilderInstanceTracker.vue
@@ -13,6 +13,7 @@ interface Props {
 	matchSize?: boolean;
 	verticalOffsetPixels?: number;
 	isOffBoundsAllowed?: boolean;
+	ignoreSettingsSidebar?: boolean;
 }
 const props = defineProps<Props>();
 const { instancePath, matchSize, verticalOffsetPixels, isOffBoundsAllowed } =
@@ -37,7 +38,10 @@ const trackElement = (el: HTMLElement) => {
 	const { clientWidth: rendererWidth } = rendererEl;
 	const { left: rendererX } = rendererEl.getBoundingClientRect();
 	const settingsEl = document.querySelector(".BuilderSettings");
+	const hiderTabEl = document.querySelector(".settingsHiderTab");
+	const hiderWidth = hiderTabEl?.clientWidth || 0;
 	const { clientWidth: settingsWidth } = settingsEl || { clientWidth: 0 };
+	const fullSettingsWidth = settingsWidth + hiderWidth;
 	const { left: settingsLeft } = settingsEl?.getBoundingClientRect() || {
 		left: Infinity,
 	};
@@ -60,15 +64,17 @@ const trackElement = (el: HTMLElement) => {
 		trackerY = Math.min(bodyHeight - contentsHeight, trackerY); // Bottom boundary
 	}
 
-	let correction = 0;
-	if (settingsLeft < rendererX + rendererWidth) {
-		const trackerEnd = trackerX + contentsWidth;
-		const rendererEnd = rendererX + rendererWidth;
-		const distanceToRight = Math.max(rendererEnd - trackerEnd, 0);
-		correction = Math.max(settingsWidth - distanceToRight, 0);
-	}
+	if (!props.ignoreSettingsSidebar) {
+		let correction = 0;
+		if (settingsLeft < rendererX + rendererWidth) {
+			const trackerEnd = trackerX + contentsWidth;
+			const rendererEnd = rendererX + rendererWidth;
+			const distanceToRight = Math.max(rendererEnd - trackerEnd, 0);
+			correction = Math.max(fullSettingsWidth - distanceToRight, 0);
+		}
 
-	trackerX -= correction;
+		trackerX -= correction;
+	}
 
 	rootStyle.value = {
 		top: `${trackerY}px`,