minor app fixes

2023-03-19 22:37:00 +01:00
parent b497c3463f
commit 874cf412a1
19 changed files with 122 additions and 170 deletions
--- a/frontend/src/lib/components/DisplayResult.svelte
+++ b/frontend/src/lib/components/DisplayResult.svelte
@@ -112,7 +112,7 @@
 			<div class="mb-2 text-gray-500 text-sm bg-gray-50/20">
 				as JSON&nbsp;<input class="windmillapp" type="checkbox" bind:checked={forceJson} /></div
 			>{/if}{#if typeof result == 'object' && Object.keys(result).length > 0}<div
-				class="mb-2 min-w-[400px] text-sm text-gray-700 relative"
+				class="mb-2 min-w-[360px] text-sm text-gray-700 relative"
 				>The result keys are: <b>{truncate(Object.keys(result).join(', '), 50)}</b>
 				<div class="text-gray-500 text-sm  absolute top-0 right-2">
 					<button on:click={jsonViewer.openDrawer}>Expand JSON</button>
--- a/frontend/src/lib/components/apps/components/buttons/AppButton.svelte
+++ b/frontend/src/lib/components/apps/components/buttons/AppButton.svelte
@@ -142,10 +142,6 @@
 			)}
 			style={[$app.css?.['buttoncomponent']?.['button']?.style, customCss?.button?.style].join(';')}
 			disabled={resolvedConfig.disabled}
-			on:pointerdown={(e) => {
-				e?.stopPropagation()
-				window.dispatchEvent(new Event('pointerup'))
-			}}
 			on:click={handleClick}
 			size={resolvedConfig.size}
 			color={resolvedConfig.color}
--- a/frontend/src/lib/components/apps/components/helpers/InputValue.svelte
+++ b/frontend/src/lib/components/apps/components/helpers/InputValue.svelte
@@ -65,13 +65,13 @@
 		debounce(async () => (value = await evalExpr(lastInput)))

 	async function handleConnection() {
-		if (lastInput.type === 'connected') {
+		if (lastInput?.type === 'connected') {
 			$worldStore?.connect<any>(lastInput, onValueChange, `${id}-${key}`)
-		} else if (lastInput.type === 'static' || lastInput.type == 'template') {
+		} else if (lastInput?.type === 'static' || lastInput?.type == 'template') {
 			value = await getValue(lastInput)
-		} else if (lastInput.type == 'eval') {
+		} else if (lastInput?.type == 'eval') {
 			value = await evalExpr(lastInput as EvalAppInput)
-		} else if (lastInput.type == 'upload') {
+		} else if (lastInput?.type == 'upload') {
 			value = (lastInput as UploadAppInput).value
 		} else {
 			value = undefined
--- a/frontend/src/lib/components/apps/components/inputs/AppNumberInput.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppNumberInput.svelte
@@ -46,7 +46,6 @@

 <AlignWrapper {render} {verticalAlignment}>
 	<input
-		on:pointerdown|stopPropagation
 		on:focus={() => ($selectedComponent = id)}
 		class={twMerge(
 			'windmillapp w-full py-1.5 text-sm focus:ring-indigo-100 px-2 mx-0.5',
--- a/frontend/src/lib/components/apps/components/inputs/AppTextInput.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppTextInput.svelte
@@ -50,7 +50,6 @@
 				css?.input?.class ?? ''
 			)}
 			style={css?.input?.style ?? ''}
-			on:pointerdown|stopPropagation
 			on:focus={() => ($selectedComponent = id)}
 			type="password"
 			bind:value
@@ -63,7 +62,6 @@
 				css?.input?.class ?? ''
 			)}
 			style={css?.input?.style ?? ''}
-			on:pointerdown|stopPropagation
 			on:focus={() => ($selectedComponent = id)}
 			type="text"
 			bind:value
@@ -76,7 +74,6 @@
 				css?.input?.class ?? ''
 			)}
 			style={css?.input?.style ?? ''}
-			on:pointerdown|stopPropagation
 			on:focus={() => ($selectedComponent = id)}
 			type="email"
 			bind:value
--- a/frontend/src/lib/components/apps/components/layout/AppContainer.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppContainer.svelte
@@ -35,7 +35,7 @@
 			{id}
 			class={css?.container?.class}
 			style={css?.container?.style}
-			bind:subGrid={$app.subgrids[`${id}-0`]}
+			subGridId={`${id}-0`}
 			containerHeight={componentContainerHeight}
 			on:focus={() => {
 				$selectedComponent = id
--- a/frontend/src/lib/components/apps/components/layout/AppDrawer.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppDrawer.svelte
@@ -86,7 +86,7 @@
 					{id}
 					class={css?.container?.class}
 					style={css?.container?.style}
-					bind:subGrid={$app.subgrids[`${id}-0`]}
+					subGridId={`${id}-0`}
 					containerHeight={1200}
 					on:focus={() => {
 						$selectedComponent = id
--- a/frontend/src/lib/components/apps/components/layout/AppSplitpanes.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppSplitpanes.svelte
@@ -66,28 +66,39 @@
 	}
 </script>

-<div class="h-full w-full border" on:pointerdown|stopPropagation>
+<div class="h-full w-full border" on:pointerdown={onFocus}>
 	<Splitpanes {horizontal}>
 		{#each sumedup as paneSize, index (index)}
 			<Pane size={paneSize} minSize={20}>
-				{#if $app.subgrids?.[`${id}-${index}`]}
-					<SubGridEditor
-						visible={render}
-						{id}
-						shouldHighlight={$focusedGrid?.subGridIndex === index}
-						class={css?.container?.class}
-						style={css?.container?.style}
-						bind:subGrid={$app.subgrids[`${id}-${index}`]}
-						containerHeight={horizontal ? undefined : componentContainerHeight - 8}
-						on:focus={() => {
-							$selectedComponent = id
-							$focusedGrid = {
-								parentComponentId: id,
-								subGridIndex: index
-							}
-						}}
-					/>
-				{/if}
+				<div
+					class="w-full h-full"
+					on:pointerdown|stopPropagation={() => {
+						$selectedComponent = id
+						$focusedGrid = {
+							parentComponentId: id,
+							subGridIndex: index
+						}
+					}}
+				>
+					{#if $app.subgrids?.[`${id}-${index}`]}
+						<SubGridEditor
+							visible={render}
+							{id}
+							shouldHighlight={$focusedGrid?.subGridIndex === index}
+							class={css?.container?.class}
+							style={css?.container?.style}
+							subGridId={`${id}-${index}`}
+							containerHeight={horizontal ? undefined : componentContainerHeight - 8}
+							on:focus={() => {
+								$selectedComponent = id
+								$focusedGrid = {
+									parentComponentId: id,
+									subGridIndex: index
+								}
+							}}
+						/>
+					{/if}
+				</div>
 			</Pane>
 		{/each}
 	</Splitpanes>
--- a/frontend/src/lib/components/apps/components/layout/AppTabs.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppTabs.svelte
@@ -46,8 +46,11 @@
 	$: $selectedComponent === id && focusGrid()

 	function focusGrid() {
+		console.log('focusGrid', id)
 		const selectedIndex = tabs?.indexOf(selected)
 		if ($focusedGrid?.parentComponentId != id || $focusedGrid?.subGridIndex != selectedIndex) {
+			console.log('set', id)
+
 			$focusedGrid = {
 				parentComponentId: id,
 				subGridIndex: selectedIndex
@@ -80,8 +83,6 @@
 	$: selected && handleTabSelection()
 	$: selectedIndex = tabs?.indexOf(selected) ?? -1
 	$: css = concatCustomCss($app.css?.tabscomponent, customCss)
-
-	let subgridWidth: number | undefined = undefined
 </script>

 <InputValue
@@ -125,13 +126,13 @@
 		</div>
 	{/if}

-	<div bind:clientWidth={subgridWidth} class="w-full">
+	<div class="w-full">
 		{#if $app.subgrids}
 			{#each tabs ?? [] as res, i}
 				<SubGridEditor
 					{id}
 					visible={render && i === selectedIndex}
-					bind:subGrid={$app.subgrids[`${id}-${i}`]}
+					subGridId={`${id}-${i}`}
 					class={css?.container?.class}
 					style={css?.container?.style}
 					containerHeight={componentContainerHeight - tabHeight}
--- a/frontend/src/lib/components/apps/editor/AppEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/AppEditor.svelte
@@ -137,6 +137,7 @@
 	$: width = $breakpoint === 'sm' ? 'min-w-[400px] max-w-[656px]' : 'min-w-[710px] w-full'

 	let selectedTab: 'insert' | 'settings' = 'insert'
+
 	$: if ($selectedComponent) {
 		selectedTab = 'settings'
 	} else {
--- a/frontend/src/lib/components/apps/editor/AppPreview.svelte
+++ b/frontend/src/lib/components/apps/editor/AppPreview.svelte
@@ -129,15 +129,9 @@
 					<!-- svelte-ignore a11y-click-events-have-key-events -->
 					<div
 						class={'h-full w-full center-center'}
-						on:pointerdown={() => ($selectedComponent = dataItem.data.id)}
+						on:pointerdown={() => ($selectedComponent = dataItem.id)}
 					>
-						<Component
-							render={true}
-							pointerdown={false}
-							component={dataItem.data}
-							selected={false}
-							locked={true}
-						/>
+						<Component render={true} component={dataItem.data} selected={false} locked={true} />
 					</div>
 				</GridViewer>
 			</div>
--- a/frontend/src/lib/components/apps/editor/ComponentHeader.svelte
+++ b/frontend/src/lib/components/apps/editor/ComponentHeader.svelte
@@ -11,7 +11,6 @@
 	export let component: AppComponent
 	export let selected: boolean
 	export let locked: boolean = false
-	export let pointerdown: boolean = false
 	export let hover: boolean = false

 	const dispatch = createEventDispatcher()
--- a/frontend/src/lib/components/apps/editor/GridEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/GridEditor.svelte
@@ -9,7 +9,6 @@
 	import type { Policy } from '$lib/gen'
 	import HiddenComponent from '../components/helpers/HiddenComponent.svelte'
 	import Component from './component/Component.svelte'
-	import { deepEqual } from 'fast-equals'
 	import { push } from '$lib/history'
 	import { expandGriditem, findGridItem } from './appUtils'
 	import Grid from '../svelte-grid/Grid.svelte'
@@ -66,44 +65,12 @@

 	function selectComponent(id: string) {
 		if (!$connectingInput.opened) {
-			if ($selectedComponent !== id) {
-				$selectedComponent = id
-			}
-
-			$focusedGrid = undefined
-		}
-	}
-
-	let pointerdown = false
-	let lastapp: App | undefined = undefined
-	const onpointerdown = () => {
-		if (history) {
-			lastapp = JSON.parse(JSON.stringify($app))
-			pointerdown = true
-		}
-	}
-	const onpointerup = () => {
-		if (history) {
-			pointerdown = false
-			if (!deepEqual(lastapp, $app)) {
-				push(history, lastapp, false, true)
+			$selectedComponent = id
+			if ($focusedGrid?.parentComponentId != id) {
+				$focusedGrid = undefined
 			}
 		}
 	}
-
-	afterUpdate(() => {
-		if ($selectedComponent) {
-			const parents = document.querySelectorAll<HTMLElement>('.svlt-grid-item')
-			parents.forEach((parent) => {
-				const hasActiveChild = !!parent.querySelector('.active-grid-item')
-				if (hasActiveChild) {
-					parent.style.setProperty('z-index', '100')
-				} else {
-					parent.style.removeProperty('z-index')
-				}
-			})
-		}
-	})
 </script>

 <div class="relative w-full z-20 overflow-visible">
@@ -126,9 +93,6 @@
 	<div
 		style={$app.css?.['app']?.['grid']?.style}
 		class={twMerge('px-4 pt-4 pb-2 overflow-visible', $app.css?.['app']?.['grid']?.class ?? '')}
-		on:pointerdown={onpointerdown}
-		on:pointerleave={onpointerup}
-		on:pointerup={onpointerup}
 		on:click={() => {
 			$selectedComponent = undefined
 			$focusedGrid = undefined
@@ -140,6 +104,7 @@
 				onTopId={$selectedComponent}
 				items={$app.grid}
 				on:redraw={(e) => {
+					console.log('redraw')
 					push(history, $app)
 					$app.grid = e.detail
 				}}
@@ -160,27 +125,25 @@
 						style="transform: translate(-50%, -50%);"
 						class="absolute w-fit justify-center bg-indigo-500/90 left-[50%] top-[50%] z-50 px-6 rounded border text-white py-2 text-5xl center-center"
 					>
-						{dataItem.data.id}
+						{dataItem.id}
 					</div>
 				{/if}
 				<!-- svelte-ignore a11y-click-events-have-key-events -->
 				<div
-					on:click|stopPropagation
-					on:pointerdown={() => selectComponent(dataItem.data.id)}
+					on:pointerdown={() => selectComponent(dataItem.id)}
 					class={classNames(
 						'h-full w-full center-center',
-						$selectedComponent === dataItem.data.id ? 'active-grid-item' : ''
+						$selectedComponent === dataItem.id ? 'active-grid-item' : ''
 					)}
 				>
 					<Component
 						render={true}
-						{pointerdown}
 						component={dataItem.data}
-						selected={$selectedComponent === dataItem.data.id}
+						selected={$selectedComponent === dataItem.id}
 						locked={isFixed(dataItem)}
 						on:delete={() => removeGridElement(dataItem.data)}
 						on:lock={() => {
-							const gridItem = findGridItem($app, dataItem.data.id)
+							const gridItem = findGridItem($app, dataItem.id)
 							if (gridItem) {
 								toggleFixed(gridItem)
 							}
@@ -188,8 +151,9 @@
 						}}
 						on:expand={() => {
 							push(history, $app)
-							$selectedComponent = dataItem.data.id
-							expandGriditem($app.grid, dataItem, $breakpoint)
+							$selectedComponent = dataItem.id
+							expandGriditem($app.grid, dataItem.id, $breakpoint)
+							console.log('expand')
 							$app = $app
 						}}
 					/>
--- a/frontend/src/lib/components/apps/editor/SubGridEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/SubGridEditor.svelte
@@ -17,7 +17,7 @@
 	export let style = ''
 	export let noPadding = false
 	export let noYPadding = false
-	export let subGrid: GridItem[] = []
+	export let subGridId: string
 	export let visible: boolean = true
 	export let id: string
 	export let shouldHighlight: boolean = true
@@ -31,41 +31,26 @@

 	$: highlight = id === $focusedGrid?.parentComponentId && shouldHighlight

-	let pointerdown = false
-	let onComponent: string | undefined = undefined
-
 	const onpointerdown = (e) => {
-		if (onComponent === undefined) {
-			dispatch('focus')
-		} else {
-			onComponent = undefined
-		}
-		pointerdown = true
-	}
-
-	const onpointerup = () => {
-		pointerdown = false
+		dispatch('focus')
 	}

 	function selectComponent(id: string) {
-		onComponent = id
 		if (!$connectingInput.opened) {
-			if (id !== $selectedComponent) {
-				$selectedComponent = id
-			}
+			dispatch('focus')
+			$selectedComponent = id
 		}
 	}

 	function lock(dataItem: GridItem) {
-		let fComponent = findGridItem($app, dataItem.data.id)
+		let fComponent = findGridItem($app, dataItem.id)
 		if (fComponent) {
 			fComponent = toggleFixed(fComponent)
 		}
 		$app = $app
 	}

-	// @ts-ignore
-	let container
+	let container: HTMLElement | undefined = undefined
 </script>

 <div
@@ -73,6 +58,7 @@
 		? 'visible'
 		: 'invisible h-0 overflow-hidden'} 	"
 	bind:this={container}
+	on:pointerdown={onpointerdown}
 >
 	<div
 		class={twMerge(
@@ -81,18 +67,17 @@
 			classes ?? '',
 			noPadding ? 'px-0' : 'px-2'
 		)}
-		on:pointerdown|stopPropagation={onpointerdown}
-		on:pointerleave={onpointerup}
-		on:pointerup={onpointerup}
 		style="height: {containerHeight}px; {style ?? ''}"
 	>
 		{#if $mode !== 'preview'}
 			<div class={highlight ? 'border-gray-400  border border-dashed min-h-full' : ''}>
 				<Grid
-					items={subGrid}
+					items={$app.subgrids?.[subGridId] ?? []}
 					on:redraw={(e) => {
 						push(history, $app)
-						subGrid = e.detail
+						if ($app.subgrids) {
+							$app.subgrids[subGridId] = e.detail
+						}
 					}}
 					let:dataItem
 					rowHeight={36}
@@ -106,7 +91,7 @@
 					<!-- svelte-ignore a11y-click-events-have-key-events -->
 					{#if $connectingInput.opened}
 						<div
-							on:pointerenter={() => ($connectingInput.hoveredComponent = dataItem.data.id)}
+							on:pointerenter={() => ($connectingInput.hoveredComponent = dataItem.id)}
 							on:pointerleave={() => ($connectingInput.hoveredComponent = undefined)}
 							class="absolute w-full h-full bg-black border-2 bg-opacity-25 z-20 flex justify-center items-center"
 						/>
@@ -114,24 +99,23 @@
 							style="transform: translate(-50%, -50%);"
 							class="absolute w-fit justify-center bg-indigo-500/90 left-[50%] top-[50%] z-50 px-6 rounded border text-white py-2 text-5xl center-center"
 						>
-							{dataItem.data.id}
+							{dataItem.id}
 						</div>
 					{/if}

 					<!-- svelte-ignore a11y-click-events-have-key-events -->
 					<div
-						on:pointerdown={() => selectComponent(dataItem.data.id)}
+						on:pointerdown={() => selectComponent(dataItem.id)}
 						class={classNames(
 							'h-full w-full center-center',
-							$selectedComponent === dataItem.data.id ? 'active-grid-item' : '',
+							$selectedComponent === dataItem.id ? 'active-grid-item' : '',
 							'top-0'
 						)}
 					>
 						<Component
 							render={visible}
-							{pointerdown}
 							component={dataItem.data}
-							selected={$selectedComponent === dataItem.data.id}
+							selected={$selectedComponent === dataItem.id}
 							locked={isFixed(dataItem)}
 							on:lock={() => lock(dataItem)}
 							on:expand={() => {
@@ -140,10 +124,15 @@
 								if (!parentGridItem) {
 									return
 								}
-								$selectedComponent = dataItem.data.id
+								$selectedComponent = dataItem.id
 								push(history, $app)

-								expandGriditem(subGrid, dataItem, $breakpoint, parentGridItem)
+								expandGriditem(
+									$app.subgrids?.[subGridId] ?? [],
+									dataItem.id,
+									$breakpoint,
+									parentGridItem
+								)
 								$app = $app
 							}}
 						/>
@@ -152,7 +141,7 @@
 			</div>
 		{:else}
 			<GridViewer
-				items={subGrid}
+				items={$app.subgrids?.[subGridId] ?? []}
 				let:dataItem
 				rowHeight={36}
 				cols={columnConfiguration}
@@ -162,14 +151,13 @@
 			>
 				<!-- svelte-ignore a11y-click-events-have-key-events -->
 				<div
-					on:pointerdown={() => selectComponent(dataItem.data.id)}
+					on:pointerdown={() => selectComponent(dataItem.id)}
 					class={classNames('h-full w-full center-center', 'top-0')}
 				>
 					<Component
 						render={visible}
-						{pointerdown}
 						component={dataItem.data}
-						selected={$selectedComponent === dataItem.data.id}
+						selected={$selectedComponent === dataItem.id}
 						locked={isFixed(dataItem)}
 					/>
 				</div>
--- a/frontend/src/lib/components/apps/editor/appUtils.ts
+++ b/frontend/src/lib/components/apps/editor/appUtils.ts
@@ -38,13 +38,13 @@ function findGridItemById(

 export function findGridItemParentGrid(app: App, id: string): string | undefined {
 	const gridItem = app.grid.find((x) => x.id === id)
-	if (gridItem) {
+	if (gridItem || app.subgrids === undefined) {
 		return undefined
 	} else {
-		for (const key in app.subgrids) {
+		for (const key of Object.keys(app.subgrids ?? {})) {
 			const subGrid = app.subgrids[key]
-			const gridItem = subGrid.find((x) => x.id === id)
-			if (gridItem) {
+			const gridItemIdx = subGrid.findIndex((x) => x.id === id)
+			if (gridItemIdx > -1) {
 				return key
 			}
 		}
@@ -88,6 +88,8 @@ export function getAllRecomputeIdsForComponent(app: App, id: string) {
 }

 export function createNewGridItem(grid: GridItem[], id: string, data: AppComponent): GridItem {
+	console.log('INSERT X')
+
 	const newComponent = {
 		fixed: false,
 		x: 0,
@@ -165,7 +167,7 @@ export function insertNewGridItem(
 	builddata: (id: string) => AppComponent,
 	focusedGrid: FocusedGrid | undefined,
 	keepId?: string
-) {
+): string {
 	const id = keepId ?? getNextGridItemId(app)

 	const data = builddata(id)
@@ -188,9 +190,6 @@ export function insertNewGridItem(
 	const newItem = createNewGridItem(grid, id, data)
 	grid.push(newItem)

-	if (focusedGrid) {
-		app.subgrids[key!] = grid
-	}
 	return id
 }

@@ -229,19 +228,12 @@ export function deleteGridItem(
 			delete app.subgrids![id]
 		})
 	}
-	if (!parent) {
-		let index = app.grid.findIndex((x) => x.id == component.id)
-		if (index > -1) {
-			app.grid.splice(index, 1)
-		}
+	if (parent) {
+		app.subgrids &&
+			(app.subgrids[parent] = app.subgrids[parent].filter((item) => item.id !== component?.id))
 	} else {
-		let grid = app.subgrids![parent]
-		let index = grid.findIndex((x) => x.id == component.id)
-		if (index > -1) {
-			grid.splice(index, 1)
-		}
+		app.grid = app.grid.filter((item) => item.id !== component?.id)
 	}
-
 	return components
 }

@@ -383,12 +375,13 @@ export function initConfig<T extends Record<string, StaticAppInput | EvalAppInpu

 export function expandGriditem(
 	grid: GridItem[],
-	gridComponent: GridItem,
+	id: string,
 	$breakpoint: EditorBreakpoint,
 	parentGridItem: GridItem | undefined = undefined
 ) {
+	const gridComponent = grid.find((item) => item.id === id)
+	if (!gridComponent) return
 	const availableSpace = findAvailableSpace(grid, gridComponent, $breakpoint, parentGridItem)
-
 	if (!availableSpace) {
 		return
 	}
--- a/frontend/src/lib/components/apps/editor/component/Component.svelte
+++ b/frontend/src/lib/components/apps/editor/component/Component.svelte
@@ -44,7 +44,6 @@
 	export let component: AppComponent
 	export let selected: boolean
 	export let locked: boolean = false
-	export let pointerdown: boolean = false
 	export let render: boolean

 	const { mode, app, errorByComponent, hoverStore } =
@@ -73,7 +72,6 @@
 	{#if $mode !== 'preview'}
 		<ComponentHeader
 			hover={$hoverStore === component.id}
-			{pointerdown}
 			{component}
 			{selected}
 			on:delete
@@ -341,7 +339,7 @@
 				customCss={component.customCss}
 				{render}
 			/>
-		{:else if component.type === 'tabscomponent'}
+		{:else if component.type === 'tabscomponent' && component.tabs}
 			<AppTabs
 				configuration={component.configuration}
 				id={component.id}
--- a/frontend/src/lib/components/apps/editor/component/ComponentNavigation.svelte
+++ b/frontend/src/lib/components/apps/editor/component/ComponentNavigation.svelte
@@ -160,22 +160,26 @@
 				sendUserToast('Cannot paste a component into itself', true)
 				return
 			}
-			let parentGrid = findGridItemParentGrid($app, tempGridItem.data.id)
-			const grid = parentGrid ? $app.subgrids![parentGrid] : $app.grid
-			let idx = grid.findIndex((item) => {
-				return item.id == tempGridItem!.data.id
-			})
-			if (idx > -1) {
-				grid.splice(idx, 1)
+			let parentGrid = findGridItemParentGrid($app, tempGridItem.id)
+			if (parentGrid) {
+				$app.subgrids &&
+					($app.subgrids[parentGrid] = $app.subgrids[parentGrid].filter(
+						(item) => item.id !== tempGridItem?.id
+					))
+			} else {
+				$app.grid = $app.grid.filter((item) => item.id !== tempGridItem?.id)
 			}

 			const gridItem = tempGridItem
 			insertNewGridItem($app, (id) => ({ ...gridItem.data, id }), $focusedGrid, tempGridItem.id)
+
 			copiedGridItem = tempGridItem
+			$selectedComponent = tempGridItem.id
+
 			tempGridItem = undefined
 		} else if (copiedGridItem) {
 			const gridItem = copiedGridItem
-			insertNewGridItem($app, (id) => ({ ...gridItem.data, id }), $focusedGrid)
+			$selectedComponent = insertNewGridItem($app, (id) => ({ ...gridItem.data, id }), $focusedGrid)
 		}

 		$worldStore = $worldStore
--- a/frontend/src/lib/components/apps/svelte-grid/Grid.svelte
+++ b/frontend/src/lib/components/apps/svelte-grid/Grid.svelte
@@ -21,7 +21,7 @@
 	export let onTopId: string | undefined = undefined
 	export let containerWidth: number | undefined = undefined

-	export let scroller = undefined
+	export let scroller: HTMLElement | undefined = undefined
 	export let sensor = 20

 	export let parentWidth: number | undefined = undefined
--- a/frontend/src/lib/components/apps/svelte-grid/MoveResize.svelte
+++ b/frontend/src/lib/components/apps/svelte-grid/MoveResize.svelte
@@ -143,6 +143,7 @@
 		}
 	}

+	let startDrag: NodeJS.Timeout | undefined = undefined
 	const pointerdown = ({ clientX, clientY, target }) => {
 		initX = clientX
 		initY = clientY
@@ -158,8 +159,10 @@

 		computeRect(target)

-		active = true
-		trans = false
+		startDrag = setTimeout(() => {
+			active = true
+			trans = false
+		}, 200)
 		_scrollTop = scrollElement.scrollTop

 		window.addEventListener('pointermove', pointermove)
@@ -298,9 +301,13 @@
 	}
 </script>

+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
-	draggable={false}
-	on:pointerdown={pointerdown}
+	draggable="false"
+	on:click|stopPropagation={() => {
+		startDrag && clearTimeout(startDrag)
+	}}
+	on:pointerdown|stopPropagation={pointerdown}
 	class="svlt-grid-item"
 	class:svlt-grid-active={active || (trans && rect)}
 	style="width: {active ? newSize.width : width}px; height:{active