From 211ad52edb2fdcdeedeb01e13829cda0797704a6 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Mon, 20 Mar 2023 08:26:02 +0100
Subject: [PATCH] minor app improvements

---
 .../lib/components/apps/components/buttons/AppButton.svelte  | 1 +
 .../src/lib/components/apps/editor/ComponentHeader.svelte    | 4 +++-
 .../lib/components/apps/editor/component/Component.svelte    | 2 +-
 .../src/lib/components/apps/svelte-grid/MoveResize.svelte    | 5 ++---
 4 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/frontend/src/lib/components/apps/components/buttons/AppButton.svelte b/frontend/src/lib/components/apps/components/buttons/AppButton.svelte
index 44e589715d..e013680e1a 100644
--- a/frontend/src/lib/components/apps/components/buttons/AppButton.svelte
+++ b/frontend/src/lib/components/apps/components/buttons/AppButton.svelte
@@ -135,6 +135,7 @@
 			<div class="text-red-500 text-xs">{errorsMessage}</div>
 		{/if}
 		<Button
+			on:pointerdown={(e) => e.stopPropagation()}
 			btnClasses={twMerge(
 				$app.css?.['buttoncomponent']?.['button']?.class,
 				customCss?.button?.class,
diff --git a/frontend/src/lib/components/apps/editor/ComponentHeader.svelte b/frontend/src/lib/components/apps/editor/ComponentHeader.svelte
index 67981eb0ef..6dec1d4a1d 100644
--- a/frontend/src/lib/components/apps/editor/ComponentHeader.svelte
+++ b/frontend/src/lib/components/apps/editor/ComponentHeader.svelte
@@ -28,9 +28,10 @@
 
 {#if selected || hover}
 	<span
+		draggable="false"
 		title={`Id: ${component.id}`}
 		class={twMerge(
-			'px-2 text-2xs font-semibold w-fit absolute shadow -top-[9px] -left-[8px] border rounded-sm z-50',
+			'px-2 text-2xs font-semibold w-fit absolute shadow -top-[9px] -left-[8px] border rounded-sm z-50 cursor-move',
 			selected
 				? 'bg-indigo-500/90 border-indigo-600 text-white'
 				: 'bg-blue-500/90 border-blue-600 text-white'
@@ -69,6 +70,7 @@
 			{/if}
 		</button>
 		<span
+			draggable="false"
 			title="Move"
 			on:mousedown|stopPropagation|capture
 			class={classNames(
diff --git a/frontend/src/lib/components/apps/editor/component/Component.svelte b/frontend/src/lib/components/apps/editor/component/Component.svelte
index 5ce933cfd0..2202915c10 100644
--- a/frontend/src/lib/components/apps/editor/component/Component.svelte
+++ b/frontend/src/lib/components/apps/editor/component/Component.svelte
@@ -51,7 +51,7 @@
 
 	const editorContext = getContext<AppEditorContext>('AppEditorContext')
 	const movingcomponent = editorContext?.movingcomponent
-	$: ismoving = movingcomponent != undefined && $movingcomponent === component.id
+	$: ismoving = movingcomponent != undefined && $mode == 'dnd' && $movingcomponent === component.id
 
 	let initializing: boolean | undefined = undefined
 	let componentContainerHeight: number = 0
diff --git a/frontend/src/lib/components/apps/svelte-grid/MoveResize.svelte b/frontend/src/lib/components/apps/svelte-grid/MoveResize.svelte
index 2431d84bbb..c32f87ab48 100644
--- a/frontend/src/lib/components/apps/svelte-grid/MoveResize.svelte
+++ b/frontend/src/lib/components/apps/svelte-grid/MoveResize.svelte
@@ -157,11 +157,10 @@
 
 		cordDiff = { x: 0, y: 0 }
 
-		computeRect(target)
-
 		startDrag = setTimeout(() => {
 			active = true
 			trans = false
+			computeRect(target)
 		}, 200)
 		_scrollTop = scrollElement.scrollTop
 
@@ -307,7 +306,7 @@
 	on:click|stopPropagation={() => {
 		startDrag && clearTimeout(startDrag)
 	}}
-	on:pointerdown|stopPropagation={pointerdown}
+	on:pointerdown|stopPropagation|preventDefault={pointerdown}
 	class="svlt-grid-item"
 	class:svlt-grid-active={active || (trans && rect)}
 	style="width: {active ? newSize.width : width}px; height:{active