windmill-components 1.394.8 → 1.405.5

package/package/components/apps/editor/component/Component.svelte

@@ -77,14 +77,17 @@ import AppDisplayComponentByJobId from '../../components/display/AppRecomputeAll
 import AppRecomputeAll from '../../components/display/AppRecomputeAll.svelte';
 import AppUserResource from '../../components/inputs/AppUserResource.svelte';
 import { Anchor } from 'lucide-svelte';
+import { findGridItemParentGrid, isContainer } from '../appUtils';
 export let component;
 export let selected;
 export let locked = false;
 export let render;
 export let hidden;
 export let fullHeight;
-export let overlapped = false;
-const { mode, app, hoverStore, connectingInput, selectedComponent } = getContext('AppViewerContext');
+export let overlapped = undefined;
+export let moveMode = undefined;
+export let componentDraggedId = undefined;
+const { mode, app, hoverStore, connectingInput } = getContext('AppViewerContext');
 const editorContext = getContext('AppEditorContext');
 const componentActive = editorContext?.componentActive;
 const movingcomponents = editorContext?.movingcomponents;
@@ -108,6 +111,26 @@ function mouseOut() {
         }
     }, 50);
 }
+function componentDraggedIsNotChild(componentDraggedId, componentId) {
+    let parentGrid = findGridItemParentGrid($app, componentDraggedId);
+    return !parentGrid?.startsWith(`${componentId}-`);
+}
+function areOnTheSameSubgrid(componentDraggedId, componentId) {
+    return (findGridItemParentGrid($app, componentDraggedId) === findGridItemParentGrid($app, componentId));
+}
+let cachedComponentDraggedIsNotChild;
+let cachedAreOnTheSameSubgrid;
+function updateCache(componentDraggedId) {
+    if (componentDraggedId) {
+        cachedComponentDraggedIsNotChild = componentDraggedIsNotChild(componentDraggedId, component.id);
+        cachedAreOnTheSameSubgrid = areOnTheSameSubgrid(componentDraggedId, component.id);
+    }
+    else {
+        cachedComponentDraggedIsNotChild = undefined;
+        cachedAreOnTheSameSubgrid = undefined;
+    }
+}
+$: updateCache(componentDraggedId);
 </script>
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
@@ -126,18 +149,23 @@ function mouseOut() {
 		hidden && $mode === 'preview' ? 'hidden' : ''
 	)}
 >
-	{#if locked && componentActive && $componentActive && $selectedComponent?.[0] !== component.id && overlapped}
+	{#if locked && componentActive && $componentActive && moveMode === 'move' && componentDraggedId && componentDraggedId !== component.id && cachedAreOnTheSameSubgrid}
 		<div
-			class={twMerge(
-				'absolute inset-0 bg-locked center-center flex-col z-50',
-				overlapped ? 'bg-locked-hover' : ''
-			)}
+			class={twMerge('absolute inset-0 bg-locked center-center flex-col z-50', 'bg-locked-hover')}
 		>
 			<div class="bg-surface p-2 shadow-sm rounded-md flex center-center flex-col gap-2">
 				<Anchor size={24} class="text-primary " />
-				<div class="text-xs">Anchored: The component cannot be moved</div>
+				<div class="text-xs"> Anchored: The component cannot be moved. </div>
 			</div>
 		</div>
+	{:else if moveMode === 'insert' && isContainer(component.type) && componentDraggedId && componentDraggedId !== component.id && cachedComponentDraggedIsNotChild}
+		<div
+			class={twMerge(
+				'absolute inset-0  flex-col rounded-md bg-blue-100 dark:bg-gray-800 bg-opacity-50',
+				'outline-dashed outline-offset-2 outline-2 outline-blue-300 dark:outline-blue-700',
+				overlapped === component?.id ? 'bg-draggedover dark:bg-draggedover-dark' : ''
+			)}
+		/>
 	{/if}
 	{#if $mode !== 'preview'}
 		<ComponentHeader

package/package/components/apps/editor/component/Component.svelte.d.ts

@@ -8,7 +8,9 @@ declare const __propDef: {
         render: boolean;
         hidden: boolean;
         fullHeight: boolean;
-        overlapped?: boolean | undefined;
+        overlapped?: string | undefined;
+        moveMode?: string | undefined;
+        componentDraggedId?: string | undefined;
     };
     events: {
         lock: CustomEvent<any>;