nit app editor (#4752)

* Prevent resize when connecting

* simplify cursor selection in connection mode

* remove useless log

* Add connection popover to hover

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>

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>

frontend/src/lib/components/apps/editor/GridEditor.svelte

@@ -221,6 +221,7 @@
 						{ x, y }
 					)
 				}}
+				disableMove={!!$connectingInput.opened}
 			>
 				<ComponentWrapper
 					id={dataItem.id}

frontend/src/lib/components/apps/editor/SubGridEditor.svelte

@@ -245,6 +245,7 @@
 							)
 						}
 					}}
+					disableMove={!!$connectingInput.opened}
 				>
 					<ComponentWrapper
 						id={dataItem.id}

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' : ''
 	)}

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

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

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

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')}

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

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}

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
 			}