windmill-components 1.405.0 → 1.406.0

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>;

package/package/components/apps/editor/contextPanel/components/OutputHeader.svelte

@@ -222,7 +222,7 @@ function processRunnable(from, to, runnable) {
 					<IdEditor
 						{id}
 						on:selected={() => ($selectedComponent = [id])}
-						on:change={({ detail }) => renameId(detail)}
+						on:save={({ detail }) => renameId(detail)}
 					/></div
 				>
 			{/if}

package/package/components/apps/svelte-grid/Grid.svelte

@@ -1,10 +1,21 @@
-<script>import { getContainerHeight } from './utils/container';
+<script context="module">import { writable } from 'svelte/store';
+const componentDraggedIdStore = writable(undefined);
+const componentDraggedParentIdStore = writable(undefined);
+const overlappedStore = writable(undefined);
+const fakeShadowStore = writable(undefined);
+const isCtrlOrMetaPressedStore = writable(false);
+</script>
+
+<script>import gridHelp from './utils/helper';
+import { twMerge } from 'tailwind-merge';
+import { getContainerHeight } from './utils/container';
 import { moveItem, getItemById, specifyUndefinedColumns } from './utils/item';
-import { onMount, createEventDispatcher } from 'svelte';
+import { onMount, createEventDispatcher, getContext } from 'svelte';
 import { getColumn, throttle } from './utils/other';
 import MoveResize from './MoveResize.svelte';
-import { ROW_GAP_X, ROW_GAP_Y, ROW_HEIGHT, sortGridItemsPosition } from '../editor/appUtils';
+import { areShadowsTheSame, findGridItemParentGrid, getDeltaXByComponent, getDeltaYByComponent, isContainer, ROW_GAP_X, ROW_GAP_Y, ROW_HEIGHT, sortGridItemsPosition, subGridIndexKey } from '../editor/appUtils';
 const dispatch = createEventDispatcher();
+const { app, worldStore } = getContext('AppViewerContext');
 export let items;
 export let rowHeight = ROW_HEIGHT;
 export let cols;
@@ -16,6 +27,7 @@ export let allIdsInPath;
 export let containerWidth = undefined;
 export let scroller = undefined;
 export let sensor = 20;
+export let root = false;
 export let parentWidth = undefined;
 let getComputedCols;
 let container;
@@ -59,6 +71,16 @@ onMount(() => {
 });
 let sortedItems = [];
 $: sortedItems = JSON.parse(JSON.stringify(items)).sort((a, b) => a.id.localeCompare(b.id));
+let resizing = false;
+function handleKeyUp(event) {
+    if ((event.key === 'Control' || event.key === 'Meta') && $isCtrlOrMetaPressedStore) {
+        setTimeout(() => {
+            $isCtrlOrMetaPressedStore = false;
+            $fakeShadowStore = undefined;
+        }, 50);
+    }
+}
+const initialFixedStates = new Map();
 let initItems = undefined;
 const updateMatrix = ({ detail }) => {
     let isPointerUp = detail.isPointerUp;
@@ -93,9 +115,37 @@ const updateMatrix = ({ detail }) => {
                     ...shadows[id]
                 }
             };
-            let { items, overlap } = moveItem(activeItem, sortedItems, getComputedCols);
-            sortedItems = items;
-            overlapped = overlap ? id : undefined;
+            if ($isCtrlOrMetaPressedStore) {
+                if ($componentDraggedParentIdStore === $overlappedStore) {
+                    const fixedContainer = sortedItems.map((item) => {
+                        if (isContainer(item.data['type'])) {
+                            initialFixedStates.set(item.id, {
+                                item3Fixed: item[3].fixed,
+                                item12Fixed: item[12].fixed
+                            });
+                            item[3].fixed = true;
+                            item[12].fixed = true;
+                        }
+                        return item;
+                    });
+                    let { items } = moveItem(activeItem, fixedContainer, getComputedCols);
+                    items = items.map((item) => {
+                        if (initialFixedStates.has(item.id)) {
+                            const initialState = initialFixedStates.get(item.id);
+                            if (initialState) {
+                                item[3].fixed = initialState.item3Fixed;
+                                item[12].fixed = initialState.item12Fixed;
+                            }
+                        }
+                        return item;
+                    });
+                    sortedItems = items;
+                }
+            }
+            else {
+                let { items } = moveItem(activeItem, sortedItems, getComputedCols);
+                sortedItems = items;
+            }
         }
     }
     for (let id of nselectedIds ?? []) {
@@ -109,6 +159,7 @@ const updateMatrix = ({ detail }) => {
 };
 const throttleMatrix = throttle(updateMatrix, throttleResize);
 //let hiddenComponents = writable({})
+let lastDetail = undefined;
 const handleRepaint = ({ detail }) => {
     if (!detail.isPointerUp) {
         throttleMatrix({ detail });
@@ -125,6 +176,18 @@ const handleRepaint = ({ detail }) => {
     }, 0)
     */
 };
+function handleKeyDown(event) {
+    if ((event.key === 'Control' || event.key === 'Meta') && !$isCtrlOrMetaPressedStore) {
+        if (resizing) {
+            return;
+        }
+        $isCtrlOrMetaPressedStore = true;
+        if (lastDetail) {
+            throttleMatrix({ detail: lastDetail });
+            lastDetail = undefined;
+        }
+    }
+}
 let moveResizes = {};
 let shadows = {};
 export function handleMove({ detail }) {
@@ -133,31 +196,183 @@ export function handleMove({ detail }) {
             moveResize?.updateMove(JSON.parse(JSON.stringify(detail.cordDiff)), detail.eventY);
         }
     });
+    lastDetail = detail;
     throttleMatrix({ detail: { isPointerUp: false, activate: false } });
+    if (!$isCtrlOrMetaPressedStore) {
+        $overlappedStore = undefined;
+        return;
+    }
+    if (
+    // We don't display the fake shadow if the dragged component is a child of the overlapped component
+    $componentDraggedParentIdStore !== $overlappedStore &&
+        detail.shadow &&
+        // only update the fake shadow if the are different
+        !areShadowsTheSame($fakeShadowStore, detail.shadow)) {
+        const draggedItem = sortedItems.find((item) => item.id === $componentDraggedIdStore);
+        if (draggedItem) {
+            draggedItem[getComputedCols].x = detail.shadow.x;
+            draggedItem[getComputedCols].y = detail.shadow.y;
+        }
+        let items = [];
+        if ($overlappedStore) {
+            const div = document.getElementById(`component-${$overlappedStore}`);
+            const type = div?.getAttribute('data-componenttype');
+            if (!$app.subgrids) {
+                return;
+            }
+            const index = type ? subGridIndexKey(type, $overlappedStore, $worldStore) : 0;
+            items = $app.subgrids[`${$overlappedStore}-${index}`] ?? [];
+        }
+        else {
+            items = $app.grid ?? [];
+        }
+        if (!draggedItem) {
+            return;
+        }
+        const freeSpace = gridHelp.findSpace(draggedItem, items, getComputedCols);
+        $fakeShadowStore = {
+            x: freeSpace.x,
+            y: freeSpace.y,
+            xPerPx: detail.shadow.xPerPx,
+            yPerPx: detail.shadow.yPerPx,
+            w: detail.shadow.w,
+            h: detail.shadow.h
+        };
+    }
+    // When leaving the overlapped component, we clear the fake shadow
+    // to avoid rendering it with the wrong position at the next intersection
+    if (detail.intersectingElement !== $overlappedStore) {
+        $fakeShadowStore = undefined;
+    }
+    // Update the overlapped component
+    $overlappedStore = detail.intersectingElement;
 }
-export function handleInitMove({ detail }) {
+export function handleInitMove(id) {
+    $componentDraggedIdStore = id;
+    $componentDraggedParentIdStore = findGridItemParentGrid($app, id)?.split('-')[0] ?? undefined;
     Object.entries(moveResizes).forEach(([id, moveResize]) => {
         if (selectedIds?.includes(id)) {
             moveResize?.initmove();
         }
     });
 }
-let overlapped = undefined;
 </script>
 
-<div class="svlt-grid-container" style="height: {containerHeight}px" bind:this={container}>
+<svelte:window on:keydown={handleKeyDown} on:keyup={handleKeyUp} />
+
+<div
+	class="svlt-grid-container"
+	style="height: {containerHeight}px"
+	bind:this={container}
+	id={root ? 'root-grid' : undefined}
+	data-xperpx={xPerPx}
+>
+	<!-- ROOT SHADOW-->
+	{#if $isCtrlOrMetaPressedStore && root && $overlappedStore !== $componentDraggedParentIdStore}
+		<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',
+				$componentDraggedIdStore && $overlappedStore === undefined
+					? 'bg-draggedover dark:bg-draggedover-dark'
+					: ''
+			)}
+		/>
+		{#if $overlappedStore === undefined && $componentDraggedIdStore && $fakeShadowStore}
+			{@const columnGap = gapX}
+			<!-- gap between the columns in px -->
+			{@const containerBorder = 0.5 * 16}
+			<!-- 0.5rem converted to px (1rem = 16px) -->
+			{@const gridTotalWidth = containerWidth ? containerWidth - 2 * containerBorder : 0}
+			<!-- subtract borders -->
+			{@const availableWidth = gridTotalWidth - 11 * columnGap}
+			<!-- subtract gaps between the 12 columns (11 gaps) -->
+			{@const columnWidthPx = availableWidth / 12}
+			<!-- divide by the number of columns -->
+			{@const maxX = Math.floor(availableWidth / columnWidthPx) - $fakeShadowStore.w}
+
+			<div class="absolute inset-0">
+				<div class="relative h-full w-full">
+					<div
+						class="absolute bg-blue-300 transition-all"
+						style={`
+								left:${Math.min(maxX, $fakeShadowStore.x) * xPerPx + gapX}px ;
+								top: ${$fakeShadowStore.y * yPerPx + gapY}px;
+								width: ${$fakeShadowStore.w * xPerPx - gapX}px;
+								height: ${$fakeShadowStore.h * yPerPx - gapY}px;
+							`}
+					/>
+				</div>
+			</div>
+		{/if}
+	{/if}
+
 	{#each sortedItems as item (item.id)}
 		{#if item[getComputedCols] != undefined}
+			{#if $isCtrlOrMetaPressedStore && item.id === $overlappedStore && $componentDraggedIdStore && $componentDraggedParentIdStore !== item.id && $fakeShadowStore}
+				{@const columnGap = gapX}
+				<!-- gap between the columns in px -->
+				{@const containerBorder = 0.5 * 16}
+				<!-- 0.5rem converted to px (1rem = 16px) -->
+				{@const gridTotalWidth = containerWidth ? containerWidth - 2 * containerBorder : 0}
+				<!-- subtract borders -->
+				{@const availableWidth = gridTotalWidth - 11 * columnGap}
+				<!-- subtract gaps between the 12 columns (11 gaps) -->
+				{@const columnWidthPx = availableWidth / 12}
+				<!-- divide by the number of columns -->
+				{@const maxX = Math.floor(availableWidth / columnWidthPx) - $fakeShadowStore.w}
+
+				<div
+					class="absolute"
+					style={`
+						left: ${item[getComputedCols].x * xPerPx + gapX}px;
+						top: ${item[getComputedCols].y * yPerPx + gapY}px;
+					`}
+				>
+					<div class="relative h-full w-full">
+						<div
+							class={twMerge('absolute transition-all duration-[50ms] bg-blue-300')}
+							style={`
+								left: calc(${
+									Math.min($fakeShadowStore.x, maxX) * $fakeShadowStore.xPerPx + gapX
+								}px + 0.5rem + ${getDeltaXByComponent(item.data['type'])});
+								top: calc(${
+									$fakeShadowStore.y * $fakeShadowStore.yPerPx + gapY
+								}px + 0.5rem + ${getDeltaYByComponent(item.data['type'])});
+								width: ${$fakeShadowStore.w * $fakeShadowStore.xPerPx - gapX * 2}px;
+								height: ${$fakeShadowStore.h * $fakeShadowStore.yPerPx - gapY * 2}px;
+							`}
+						/>
+					</div>
+				</div>
+			{/if}
+
 			<MoveResize
-				on:initmove={handleInitMove}
+				on:initmove={() => handleInitMove(item.id)}
 				on:move={handleMove}
 				bind:shadow={shadows[item.id]}
 				bind:this={moveResizes[item.id]}
 				on:repaint={handleRepaint}
+				on:resizeStart={() => (resizing = true)}
+				on:resizeEnd={() => (resizing = false)}
 				onTop={Boolean(allIdsInPath?.includes(item.id))}
 				id={item.id}
 				{xPerPx}
 				{yPerPx}
+				fakeShadow={$fakeShadowStore}
+				on:dropped={(e) => {
+					$componentDraggedIdStore = undefined
+					$componentDraggedParentIdStore = undefined
+					$overlappedStore = undefined
+					$fakeShadowStore = undefined
+					lastDetail = undefined
+
+					if (!$isCtrlOrMetaPressedStore) {
+						return
+					}
+
+					dispatch('dropped', e.detail)
+				}}
 				width={xPerPx == 0
 					? 0
 					: Math.min(getComputedCols, item[getComputedCols] && item[getComputedCols].w) * xPerPx -
@@ -172,10 +387,18 @@ let overlapped = undefined;
 				{sensor}
 				container={scroller}
 				nativeContainer={container}
-				{overlapped}
+				overlapped={$overlappedStore}
+				moveMode={$isCtrlOrMetaPressedStore ? 'insert' : 'move'}
+				type={item.data['type']}
 			>
 				{#if item[getComputedCols]}
-					<slot dataItem={item} hidden={false} {overlapped} />
+					<slot
+						dataItem={item}
+						hidden={false}
+						overlapped={$overlappedStore}
+						moveMode={$isCtrlOrMetaPressedStore ? 'insert' : 'move'}
+						componentDraggedId={$componentDraggedIdStore}
+					/>
 				{/if}
 			</MoveResize>
 		{/if}

package/package/components/apps/svelte-grid/Grid.svelte.d.ts

@@ -13,15 +13,15 @@ declare class __sveltets_Render<T> {
         containerWidth?: number | undefined;
         scroller?: HTMLElement | undefined;
         sensor?: number | undefined;
+        root?: boolean | undefined;
         parentWidth?: number | undefined;
         handleMove?: (({ detail }: {
             detail: any;
         }) => void) | undefined;
-        handleInitMove?: (({ detail }: {
-            detail: any;
-        }) => void) | undefined;
+        handleInitMove?: ((id: string) => void) | undefined;
     };
     events(): {
+        dropped: CustomEvent<any>;
         resize: CustomEvent<any>;
         mount: CustomEvent<any>;
         redraw: CustomEvent<any>;
@@ -32,7 +32,9 @@ declare class __sveltets_Render<T> {
         default: {
             dataItem: FilledItem<T>;
             hidden: boolean;
-            overlapped: undefined;
+            overlapped: string | undefined;
+            moveMode: string;
+            componentDraggedId: string | undefined;
         };
     };
 }
@@ -43,8 +45,6 @@ export default class Grid<T> extends SvelteComponent<GridProps<T>, GridEvents<T>
     get handleMove(): ({ detail }: {
         detail: any;
     }) => void;
-    get handleInitMove(): ({ detail }: {
-        detail: any;
-    }) => void;
+    get handleInitMove(): (id: string) => void;
 }
 export {};

package/package/components/apps/svelte-grid/MoveResize.svelte

@@ -1,6 +1,8 @@
 <script>import { createEventDispatcher, getContext, onMount } from 'svelte';
 import { writable } from 'svelte/store';
 import { twMerge } from 'tailwind-merge';
+import { computePosition, findGridItemParentGrid, isContainer } from '../editor/appUtils';
+import { throttle } from './utils/other';
 const dispatch = createEventDispatcher();
 export let sensor;
 export let width;
@@ -19,8 +21,11 @@ export let nativeContainer;
 export let onTop;
 export let shadow = undefined;
 export let overlapped = undefined;
+export let moveMode = 'move';
+export let type = undefined;
+export let fakeShadow = undefined;
 const ctx = getContext('AppEditorContext');
-const { mode } = getContext('AppViewerContext');
+const { mode, app } = getContext('AppViewerContext');
 const scale = ctx ? ctx.scale : writable(100);
 const divId = `component-${id}`;
 let shadowElement;
@@ -128,7 +133,7 @@ function computeRect() {
     }
 }
 let dragClosure = undefined;
-const pointerdown = ({ clientX, clientY, pageX, pageY }) => {
+const pointerdown = ({ clientX, clientY }) => {
     dragClosure = () => {
         dragClosure = undefined;
         ctx.componentActive.set(true);
@@ -173,14 +178,35 @@ const update = () => {
         }
     }
 };
+// Shared state for the shadow position
+let currentShadowPosition = undefined;
+let currentIntersectingElementId = undefined;
+let moving = false;
 const pointermove = (event) => {
     dragClosure && dragClosure();
     event.preventDefault();
     event.stopPropagation();
     event.stopImmediatePropagation();
+    moving = true;
     const { clientX, clientY } = event;
     const cordDiff = { x: (clientX / $scale) * 100 - initX, y: (clientY / $scale) * 100 - initY };
-    dispatch('move', { cordDiff, clientY });
+    if (moveMode === 'move') {
+        dispatch('move', {
+            cordDiff,
+            clientY,
+            intersectingElement: undefined,
+            shadow: undefined
+        });
+        return;
+    }
+    throttledComputeShadow(clientX, clientY);
+    dispatch('move', {
+        cordDiff,
+        clientY,
+        intersectingElement: currentIntersectingElementId,
+        shadow: currentShadowPosition,
+        overlapped
+    });
 };
 export function updateMove(newCoordDiff, clientY) {
     if (!active) {
@@ -220,6 +246,37 @@ export function updateMove(newCoordDiff, clientY) {
         update();
     }
 }
+let element = undefined;
+function computeShadow(clientX, clientY) {
+    const elementsAtPoint = document.elementsFromPoint(clientX, clientY);
+    const intersectingElement = elementsAtPoint.find((el) => el.id !== divId &&
+        el.classList.contains('svlt-grid-item') &&
+        el.getAttribute('data-iscontainer') === 'true');
+    const newOverlapped = intersectingElement ? intersectingElement?.id.split('-')[1] : undefined;
+    const container = newOverlapped
+        ? intersectingElement?.querySelector('.svlt-grid-container')
+        : document.getElementById('root-grid');
+    const xPerPxComputed = Number(container?.getAttribute('data-xperpx')) ?? xPerPx;
+    const position = computePosition(clientX, clientY, xPerPxComputed, yPerPx, newOverlapped, element);
+    if (overlapped !== newOverlapped) {
+        currentShadowPosition = undefined;
+    }
+    else {
+        // Update shared state
+        currentShadowPosition = {
+            x: position.x,
+            y: position.y,
+            xPerPx: xPerPxComputed,
+            yPerPx,
+            h: item.h,
+            w: item.w
+        };
+    }
+    currentIntersectingElementId = newOverlapped;
+}
+const throttledComputeShadow = throttle((clientX, clientY) => {
+    computeShadow(clientX, clientY);
+}, 50);
 const pointerup = (e) => {
     ctx.componentActive.set(false);
     stopAutoscroll();
@@ -232,6 +289,19 @@ const pointerup = (e) => {
     else {
         dragClosure = undefined;
     }
+    if (!moving) {
+        return;
+    }
+    const parent = findGridItemParentGrid($app, id);
+    if (overlapped && (overlapped === parent || parent?.startsWith(overlapped))) {
+        return;
+    }
+    dispatch('dropped', {
+        id,
+        overlapped,
+        x: fakeShadow?.x,
+        y: fakeShadow?.y
+    });
 };
 let resizeInitPos = { x: 0, y: 0 };
 let initSize = { width: 0, height: 0 };
@@ -252,6 +322,7 @@ const resizePointerDown = (e, o) => {
     scrollElement = getScroller(container);
     window.addEventListener('pointermove', resizePointerMove);
     window.addEventListener('pointerup', resizePointerUp);
+    dispatch('resizeStart');
 };
 const resizePointerMove = ({ pageX, pageY }) => {
     if (shadow) {
@@ -281,15 +352,33 @@ const resizePointerUp = (e) => {
     repaint(true, true);
     window.removeEventListener('pointermove', resizePointerMove);
     window.removeEventListener('pointerup', resizePointerUp);
+    dispatch('resizeEnd');
 };
+function shouldDisplayShadow(moveMode, overlapped) {
+    if (moveMode === 'move') {
+        return true;
+    }
+    const parent = findGridItemParentGrid($app, id);
+    if (parent === undefined) {
+        return overlapped === undefined;
+    }
+    else if (overlapped) {
+        return parent.startsWith(overlapped);
+    }
+    return false;
+}
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
+	bind:this={element}
 	draggable="false"
 	on:pointerdown|stopPropagation|preventDefault={pointerdown}
 	id={divId}
 	class="svlt-grid-item"
+	data-iscontainer={type ? isContainer(type) : false}
+	data-componenttype={type}
 	class:svlt-grid-active={active || (trans && rect)}
 	style="width: {xPerPx == 0 ? 0 : active ? newSize.width : width}px; height:{xPerPx == 0
 		? 0
@@ -308,16 +397,24 @@ const resizePointerUp = (e) => {
 		  } transform: translate(${left}px, ${top}px); `} "
 >
 	<slot />
-	<div class="svlt-grid-resizer-bottom" on:pointerdown={(e) => resizePointerDown(e, 'vertical')} />
-	<div class="svlt-grid-resizer-side" on:pointerdown={(e) => resizePointerDown(e, 'horizontal')} />
-	<div class="svlt-grid-resizer" on:pointerdown={(e) => resizePointerDown(e, 'both')} />
+	{#if moveMode === 'move'}
+		<div
+			class="svlt-grid-resizer-bottom"
+			on:pointerdown={(e) => resizePointerDown(e, 'vertical')}
+		/>
+		<div
+			class="svlt-grid-resizer-side"
+			on:pointerdown={(e) => resizePointerDown(e, 'horizontal')}
+		/>
+		<div class="svlt-grid-resizer" on:pointerdown={(e) => resizePointerDown(e, 'both')} />
+	{/if}
 </div>
 
 {#if xPerPx > 0 && (active || trans) && shadow}
 	<div
 		class={twMerge(
 			'svlt-grid-shadow shadow-active',
-			overlapped ? 'svlte-grid-shadow-forbidden' : ''
+			shouldDisplayShadow(moveMode, overlapped) ? '' : 'hidden'
 		)}
 		style="width: {shadow.w * xPerPx - gapX * 2}px; height: {shadow.h * yPerPx -
 			gapY * 2}px; transform: translate({shadow.x * xPerPx + gapX}px, {shadow.y * yPerPx +
@@ -408,8 +505,4 @@ const resizePointerUp = (e) => {
 		backface-visibility: hidden;
 		-webkit-backface-visibility: hidden;
 		background: #93c4fdd0;
-	}
-
-	.svlte-grid-shadow-forbidden {
-		background: rgba(255, 99, 71, 0.2) !important;
 	}</style>