From 9d50235fe934fe02feddc6eaf19ace4fd6c90e06 Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Thu, 29 Aug 2024 20:05:31 +0200
Subject: [PATCH] Fr/anchored subgrid indicator (#4303)

* fix(frontend): fix anchored indicator for subgrids

* fix(frontend): fix anchored indicator for subgrids
---
 .../src/lib/components/apps/editor/SubGridEditor.svelte     | 2 ++
 .../lib/components/apps/editor/component/Component.svelte   | 6 +++---
 frontend/src/lib/components/apps/svelte-grid/utils/item.ts  | 2 +-
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/frontend/src/lib/components/apps/editor/SubGridEditor.svelte b/frontend/src/lib/components/apps/editor/SubGridEditor.svelte
index b1a6f282a8..30b5d76b86 100644
--- a/frontend/src/lib/components/apps/editor/SubGridEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/SubGridEditor.svelte
@@ -108,6 +108,7 @@
 					selectedIds={$selectedComponent}
 					let:dataItem
 					let:hidden
+					let:overlapped
 					cols={columnConfiguration}
 					scroller={container}
 					parentWidth={$parentWidth - 17}
@@ -125,6 +126,7 @@
 						<GridEditorMenu id={dataItem.id}>
 							<Component
 								{hidden}
+								{overlapped}
 								fullHeight={dataItem?.[$breakpoint === 'sm' ? 3 : 12]?.fullHeight}
 								render={visible}
 								component={dataItem.data}
diff --git a/frontend/src/lib/components/apps/editor/component/Component.svelte b/frontend/src/lib/components/apps/editor/component/Component.svelte
index fdb2cee4be..86596354a0 100644
--- a/frontend/src/lib/components/apps/editor/component/Component.svelte
+++ b/frontend/src/lib/components/apps/editor/component/Component.svelte
@@ -94,12 +94,12 @@
 		getContext<AppViewerContext>('AppViewerContext')
 
 	const editorContext = getContext<AppEditorContext>('AppEditorContext')
+	const componentActive = editorContext?.componentActive
+
 	const movingcomponents = editorContext?.movingcomponents
 	$: ismoving =
 		movingcomponents != undefined && $mode == 'dnd' && $movingcomponents?.includes(component.id)
 
-	const componentActive = editorContext?.componentActive
-
 	let initializing: boolean | undefined = undefined
 	let errorHandledByComponent: boolean = false
 	let componentContainerHeight: number = 0
@@ -139,7 +139,7 @@
 		hidden && $mode === 'preview' ? 'hidden' : ''
 	)}
 >
-	{#if locked && componentActive && $componentActive && $selectedComponent?.[0] !== component.id}
+	{#if locked && componentActive && $componentActive && $selectedComponent?.[0] !== component.id && overlapped}
 		<div
 			class={twMerge(
 				'absolute inset-0 bg-locked center-center flex-col z-50',
diff --git a/frontend/src/lib/components/apps/svelte-grid/utils/item.ts b/frontend/src/lib/components/apps/svelte-grid/utils/item.ts
index 8cb691d3e5..9d6d591151 100644
--- a/frontend/src/lib/components/apps/svelte-grid/utils/item.ts
+++ b/frontend/src/lib/components/apps/svelte-grid/utils/item.ts
@@ -136,7 +136,7 @@ export function moveItem(active, items, cols) {
 	if (fixed) {
 		return {
 			items: items,
-			overlap: true
+			overlap: closeBlocks.length > 0
 		}
 	}