From 7f8f6ef84fd1cb50da35236bf1c8720dcb7a4bd9 Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Wed, 20 Nov 2024 09:46:37 +0100
Subject: [PATCH] nit app editor (#4752)

* Prevent resize when connecting

* simplify cursor selection in connection mode

* remove useless log

* Add connection popover to hover
---
 .../components/apps/editor/AppEditor.svelte   | 23 ++++++++++---------
 .../apps/editor/ComponentHeader.svelte        | 14 +++++++----
 .../components/apps/editor/GridEditor.svelte  |  1 +
 .../apps/editor/SubGridEditor.svelte          |  1 +
 .../apps/editor/component/Component.svelte    |  2 +-
 .../contextPanel/ComponentOutputViewer.svelte |  2 +-
 .../editor/contextPanel/ContextPanel.svelte   |  2 +-
 .../components/apps/svelte-grid/Grid.svelte   |  3 ++-
 .../apps/svelte-grid/MoveResize.svelte        |  3 ++-
 .../common/button/ConnectionButton.svelte     |  1 -
 .../lib/components/common/popup/Popup.svelte  | 14 ++++++++++-
 frontend/src/lib/utils.ts                     |  1 -
 12 files changed, 44 insertions(+), 23 deletions(-)

diff --git a/frontend/src/lib/components/apps/editor/AppEditor.svelte b/frontend/src/lib/components/apps/editor/AppEditor.svelte
index 435942a7e3..5a533ffc5a 100644
--- a/frontend/src/lib/components/apps/editor/AppEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/AppEditor.svelte
@@ -689,9 +689,19 @@
 
 	function updateCursorStyle(disabled: boolean) {
 		if (disabled) {
-			document.documentElement.style.setProperty('--global-cursor', 'not-allowed', 'important')
+			// Select all elements that don't have data-connection-button and aren't children of elements with data-connection-button
+			const elements = document.querySelectorAll(
+				':not([data-connection-button]):not([data-connection-button] *)'
+			)
+			elements.forEach((element) => {
+				;(element as HTMLElement).style.cursor = 'not-allowed'
+			})
 		} else {
-			document.documentElement.style.removeProperty('--global-cursor')
+			// Reset cursor style for all elements
+			const elements = document.querySelectorAll('*')
+			elements.forEach((element) => {
+				;(element as HTMLElement).style.removeProperty('cursor')
+			})
 		}
 	}
 </script>
@@ -1095,13 +1105,4 @@
 	#o2 > .splitpanes__pane {
 		overflow: visible !important;
 	}
-
-	/* Conditionally apply the disabled cursor globally */
-	:global(*) {
-		cursor: var(--element-cursor, var(--global-cursor, auto));
-	}
-
-	:global(.connection-access) {
-		--element-cursor: auto;
-	}
 </style>
diff --git a/frontend/src/lib/components/apps/editor/ComponentHeader.svelte b/frontend/src/lib/components/apps/editor/ComponentHeader.svelte
index 1c1bd885b5..4c26a56818 100644
--- a/frontend/src/lib/components/apps/editor/ComponentHeader.svelte
+++ b/frontend/src/lib/components/apps/editor/ComponentHeader.svelte
@@ -58,15 +58,21 @@
 
 		return Object.values(componentOptions).some((value) => value)
 	}
+
+	let connectingPopupHover = false
+	$: connectingPopupHover && dispatch('mouseover')
 </script>
 
 {#if connecting}
 	<div
-		class="absolute z-50 overflow-auto -top-[18px] connection-access"
+		class="absolute z-50 overflow-auto -top-[18px]"
 		style="left: {id_width}px;"
 		data-connection-button
 	>
-		<Popup floatingConfig={{ strategy: 'fixed', placement: 'bottom-start' }}>
+		<Popup
+			floatingConfig={{ strategy: 'fixed', placement: 'bottom-start' }}
+			bind:popupHover={connectingPopupHover}
+		>
 			<svelte:fragment slot="button">
 				<AnimatedButton
 					animate={true}
@@ -75,11 +81,11 @@
 					marginWidth="2px"
 					animationDuration="3s"
 				>
-					<button
+					<div
 						id={`connect-output-${component.id}`}
 						class="h-[20px] w-[20px] bg-surface rounded-full center-center text-primary"
 						title="Outputs"
-						aria-label="Open output"><Plug size={12} /></button
+						aria-label="Open output"><Plug size={12} /></div
 					>
 				</AnimatedButton>
 			</svelte:fragment>
diff --git a/frontend/src/lib/components/apps/editor/GridEditor.svelte b/frontend/src/lib/components/apps/editor/GridEditor.svelte
index c7e93d55dc..d024998ca6 100644
--- a/frontend/src/lib/components/apps/editor/GridEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/GridEditor.svelte
@@ -221,6 +221,7 @@
 						{ x, y }
 					)
 				}}
+				disableMove={!!$connectingInput.opened}
 			>
 				<ComponentWrapper
 					id={dataItem.id}
diff --git a/frontend/src/lib/components/apps/editor/SubGridEditor.svelte b/frontend/src/lib/components/apps/editor/SubGridEditor.svelte
index 5e16b51a3f..76cd8167eb 100644
--- a/frontend/src/lib/components/apps/editor/SubGridEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/SubGridEditor.svelte
@@ -245,6 +245,7 @@
 							)
 						}
 					}}
+					disableMove={!!$connectingInput.opened}
 				>
 					<ComponentWrapper
 						id={dataItem.id}
diff --git a/frontend/src/lib/components/apps/editor/component/Component.svelte b/frontend/src/lib/components/apps/editor/component/Component.svelte
index 3ba27484fa..264da8082d 100644
--- a/frontend/src/lib/components/apps/editor/component/Component.svelte
+++ b/frontend/src/lib/components/apps/editor/component/Component.svelte
@@ -166,7 +166,7 @@
 	}}
 	on:mouseout|stopPropagation={mouseOut}
 	class={twMerge(
-		'h-full flex flex-col w-full component relative connection-access',
+		'h-full flex flex-col w-full component relative',
 		initializing ? 'overflow-hidden h-0' : '',
 		hidden && $mode === 'preview' ? 'hidden' : ''
 	)}
diff --git a/frontend/src/lib/components/apps/editor/contextPanel/ComponentOutputViewer.svelte b/frontend/src/lib/components/apps/editor/contextPanel/ComponentOutputViewer.svelte
index 61a6382c86..e7ef0d9ccb 100644
--- a/frontend/src/lib/components/apps/editor/contextPanel/ComponentOutputViewer.svelte
+++ b/frontend/src/lib/components/apps/editor/contextPanel/ComponentOutputViewer.svelte
@@ -41,7 +41,7 @@
 
 {#if object != undefined && Object.keys(object).length > 0}
 	{#if $hasResult[componentId] || $search == ''}
-		<div class="pl-2 !cursor-pointer connection-access" data-connection-button>
+		<div class="pl-2 !cursor-pointer" data-connection-button>
 			<ObjectViewer
 				json={filtered}
 				on:select
diff --git a/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte b/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte
index 6f32b182eb..b77b86a837 100644
--- a/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte
@@ -43,7 +43,7 @@
 	>
 		<div
 			class={twMerge(
-				'bg-surface w-full h-full z-30 overflow-auto connection-access',
+				'bg-surface w-full h-full z-30 overflow-auto',
 				$connectingInput.opened ? 'z-50 dark:bg-frost-900' : ''
 			)}
 			data-connection-button
diff --git a/frontend/src/lib/components/apps/svelte-grid/Grid.svelte b/frontend/src/lib/components/apps/svelte-grid/Grid.svelte
index 1dd3518e7e..6a4d0da8d1 100644
--- a/frontend/src/lib/components/apps/svelte-grid/Grid.svelte
+++ b/frontend/src/lib/components/apps/svelte-grid/Grid.svelte
@@ -52,7 +52,7 @@
 	export let sensor = 20
 	export let root: boolean = false
 	export let parentWidth: number | undefined = undefined
-
+	export let disableMove: boolean = false
 	let getComputedCols
 	let container
 
@@ -475,6 +475,7 @@
 				overlapped={$overlappedStore}
 				moveMode={$isCtrlOrMetaPressedStore ? 'insert' : 'move'}
 				type={item.data['type']}
+				{disableMove}
 			>
 				{#if item[getComputedCols]}
 					<slot
diff --git a/frontend/src/lib/components/apps/svelte-grid/MoveResize.svelte b/frontend/src/lib/components/apps/svelte-grid/MoveResize.svelte
index c7fcc94d04..a12e717236 100644
--- a/frontend/src/lib/components/apps/svelte-grid/MoveResize.svelte
+++ b/frontend/src/lib/components/apps/svelte-grid/MoveResize.svelte
@@ -38,6 +38,7 @@
 	export let moveMode: 'move' | 'insert' = 'move'
 	export let type: string | undefined = undefined
 	export let fakeShadow: GridShadow | undefined = undefined
+	export let disableMove: boolean = true
 
 	const ctx = getContext<AppEditorContext>('AppEditorContext')
 	const { mode, app } = getContext<AppViewerContext>('AppViewerContext')
@@ -507,7 +508,7 @@
 		  } transform: translate(${left}px, ${top}px); `} "
 >
 	<slot />
-	{#if moveMode === 'move'}
+	{#if moveMode === 'move' && !disableMove}
 		<div
 			class="svlt-grid-resizer-bottom"
 			on:pointerdown={(e) => resizePointerDown(e, 'vertical')}
diff --git a/frontend/src/lib/components/common/button/ConnectionButton.svelte b/frontend/src/lib/components/common/button/ConnectionButton.svelte
index 3ecb71a450..f4f97b68e0 100644
--- a/frontend/src/lib/components/common/button/ConnectionButton.svelte
+++ b/frontend/src/lib/components/common/button/ConnectionButton.svelte
@@ -52,7 +52,6 @@
 	on:keydown|preventDefault|stopPropagation={(e) => e.key === 'Escape' && handleConnect()}
 	on:pointerdown_outside={deactivateConnection}
 	on:click_outside={deactivateConnection}
-	class="connection-access"
 	data-connection-button
 >
 	<AnimatedButton
diff --git a/frontend/src/lib/components/common/popup/Popup.svelte b/frontend/src/lib/components/common/popup/Popup.svelte
index aac6b4c2c8..5f209b4e50 100644
--- a/frontend/src/lib/components/common/popup/Popup.svelte
+++ b/frontend/src/lib/components/common/popup/Popup.svelte
@@ -16,6 +16,7 @@
 	export let shouldUsePortal: boolean = true
 	export let target: string | HTMLElement | undefined = undefined
 	export let noTransition = false
+	export let popupHover = false
 </script>
 
 <Popover on:close class="leading-none">
@@ -25,7 +26,18 @@
 		</div>
 	</PopoverButton>
 	<ConditionalPortal condition={shouldUsePortal} {target}>
-		<div use:floatingContent class={`z5000 ${floatingClasses}`}>
+		<!-- svelte-ignore a11y-no-static-element-interactions -->
+		<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+		<div
+			use:floatingContent
+			class={`z5000 ${floatingClasses}`}
+			on:mouseenter={() => {
+				popupHover = true
+			}}
+			on:mouseleave={() => {
+				popupHover = false
+			}}
+		>
 			{#if !noTransition}
 				<Transition
 					show={blockOpen || undefined}
diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts
index 11cb8fa6e6..54fa7fea27 100644
--- a/frontend/src/lib/utils.ts
+++ b/frontend/src/lib/utils.ts
@@ -256,7 +256,6 @@ export function pointerDownOutside(
 				if (options?.stopPropagation) {
 					event.stopPropagation()
 				}
-				console.log('dbg pointerdown_outside')
 				node.dispatchEvent(new CustomEvent<PointerEvent>('pointerdown_outside', { detail: event }))
 				return false
 			}