From f972e4bb06e53ea6565c1147fa98fe294a159703 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Mon, 20 Mar 2023 10:58:20 +0100
Subject: [PATCH] improve drag for apps

---
 .../apps/components/buttons/AppForm.svelte    |  2 +-
 .../components/buttons/AppFormButton.svelte   |  2 +-
 .../apps/components/inputs/AppCheckbox.svelte |  2 +-
 .../apps/editor/AppEditorHeader.svelte        |  2 +-
 .../components/apps/editor/GridEditor.svelte  |  2 +-
 .../componentsPanel/ComponentList.svelte      | 16 +++++++++
 .../apps/svelte-grid/MoveResize.svelte        | 34 +++++++++----------
 7 files changed, 37 insertions(+), 23 deletions(-)

diff --git a/frontend/src/lib/components/apps/components/buttons/AppForm.svelte b/frontend/src/lib/components/apps/components/buttons/AppForm.svelte
index ba9463e62a..f5acf6eaa3 100644
--- a/frontend/src/lib/components/apps/components/buttons/AppForm.svelte
+++ b/frontend/src/lib/components/apps/components/buttons/AppForm.svelte
@@ -30,7 +30,7 @@
 		loading: Output<boolean>
 	}
 
-	let labelValue: string = 'Default label'
+	let labelValue: string = ''
 	let color: ButtonType.Color
 	let size: ButtonType.Size
 	let runnableComponent: RunnableComponent
diff --git a/frontend/src/lib/components/apps/components/buttons/AppFormButton.svelte b/frontend/src/lib/components/apps/components/buttons/AppFormButton.svelte
index a6b0494081..aea744b1ec 100644
--- a/frontend/src/lib/components/apps/components/buttons/AppFormButton.svelte
+++ b/frontend/src/lib/components/apps/components/buttons/AppFormButton.svelte
@@ -33,7 +33,7 @@
 		loading: Output<boolean>
 	}
 
-	let labelValue: string = 'Default label'
+	let labelValue: string = ''
 	let color: ButtonType.Color
 	let size: ButtonType.Size
 	let runnableComponent: RunnableComponent
diff --git a/frontend/src/lib/components/apps/components/inputs/AppCheckbox.svelte b/frontend/src/lib/components/apps/components/inputs/AppCheckbox.svelte
index 419443b712..a68b88193a 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppCheckbox.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppCheckbox.svelte
@@ -19,7 +19,7 @@
 	const { app, worldStore } = getContext<AppViewerContext>('AppViewerContext')
 
 	let defaultValue: boolean | undefined = undefined
-	let labelValue: string = 'Default label'
+	let labelValue: string = ''
 
 	// As the checkbox is a special case and has no input
 	// we need to manually set the output
diff --git a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
index 22a751de15..56b4826f5b 100644
--- a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
+++ b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
@@ -541,7 +541,7 @@
 		<div class="hidden lg:block">
 			<Badge color="indigo">
 				<div class="flex flex-row gap-2 justify-center items-center">
-					<div>{`Sub grid: ${$focusedGrid.parentComponentId} (${$focusedGrid.subGridIndex})`}</div>
+					<div>{`Subgrid: ${$focusedGrid.parentComponentId} (${$focusedGrid.subGridIndex})`}</div>
 					<button
 						on:click={() => {
 							$selectedComponent = undefined
diff --git a/frontend/src/lib/components/apps/editor/GridEditor.svelte b/frontend/src/lib/components/apps/editor/GridEditor.svelte
index bda9f4b822..e59530bf91 100644
--- a/frontend/src/lib/components/apps/editor/GridEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/GridEditor.svelte
@@ -93,7 +93,7 @@
 	<div
 		style={$app.css?.['app']?.['grid']?.style}
 		class={twMerge('px-4 pt-4 pb-2 overflow-visible', $app.css?.['app']?.['grid']?.class ?? '')}
-		on:click={() => {
+		on:pointerdown={() => {
 			$selectedComponent = undefined
 			$focusedGrid = undefined
 		}}
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte
index eb877a0c22..26c162daeb 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte
@@ -14,6 +14,7 @@
 	import { X } from 'lucide-svelte'
 	import { push } from '$lib/history'
 	import { flip } from 'svelte/animate'
+	import { Badge } from '$lib/components/common'
 
 	const { app, selectedComponent, focusedGrid, worldStore } =
 		getContext<AppViewerContext>('AppViewerContext')
@@ -63,6 +64,21 @@
 			</button>
 		{/if}
 	</div>
+	<!-- {#if $focusedGrid}
+		<Badge color="indigo" baseClass="w-full">
+			<div class="flex flex-row gap-2 justify-center items-center">
+				<div>{`Subgrid: ${$focusedGrid.parentComponentId} (${$focusedGrid.subGridIndex})`}</div>
+				<button
+					on:click={() => {
+						$selectedComponent = undefined
+						$focusedGrid = undefined
+					}}
+				>
+					<X size={14} />
+				</button>
+			</div>
+		</Badge>
+	{/if} -->
 </section>
 
 <div class="relative">
diff --git a/frontend/src/lib/components/apps/svelte-grid/MoveResize.svelte b/frontend/src/lib/components/apps/svelte-grid/MoveResize.svelte
index c32f87ab48..a398d2dfd5 100644
--- a/frontend/src/lib/components/apps/svelte-grid/MoveResize.svelte
+++ b/frontend/src/lib/components/apps/svelte-grid/MoveResize.svelte
@@ -143,27 +143,28 @@
 		}
 	}
 
-	let startDrag: NodeJS.Timeout | undefined = undefined
+	let dragClosure: (() => void) | undefined = undefined
 	const pointerdown = ({ clientX, clientY, target }) => {
-		initX = clientX
-		initY = clientY
+		dragClosure = () => {
+			dragClosure = undefined
 
-		capturePos = { x: left, y: top }
-		shadow = { x: item.x, y: item.y, w: item.w, h: item.h }
-		newSize = { width, height }
+			initX = clientX
+			initY = clientY
 
-		containerFrame = getContainerFrame(container)
-		scrollElement = getScroller(container)
+			capturePos = { x: left, y: top }
+			shadow = { x: item.x, y: item.y, w: item.w, h: item.h }
+			newSize = { width, height }
 
-		cordDiff = { x: 0, y: 0 }
+			containerFrame = getContainerFrame(container)
+			scrollElement = getScroller(container)
+
+			cordDiff = { x: 0, y: 0 }
 
-		startDrag = setTimeout(() => {
 			active = true
 			trans = false
 			computeRect(target)
-		}, 200)
-		_scrollTop = scrollElement.scrollTop
-
+			_scrollTop = scrollElement.scrollTop
+		}
 		window.addEventListener('pointermove', pointermove)
 		window.addEventListener('pointerup', pointerup)
 	}
@@ -196,6 +197,7 @@
 	}
 
 	const pointermove = (event) => {
+		dragClosure && dragClosure()
 		event.preventDefault()
 		event.stopPropagation()
 		event.stopImmediatePropagation()
@@ -231,6 +233,7 @@
 	}
 
 	const pointerup = (e) => {
+		dragClosure = undefined
 		stopAutoscroll()
 
 		window.removeEventListener('pointerdown', pointerdown)
@@ -280,8 +283,6 @@
 			// Limit bound
 			newSize.width = Math.min(newSize.width, maxWidth * xPerPx - gapX * 2)
 
-			newSize.height = newSize.height
-
 			// Limit col & row
 			shadow.w = Math.round((newSize.width + gapX * 2) / xPerPx)
 			shadow.h = Math.round((newSize.height + gapY * 2) / yPerPx)
@@ -303,9 +304,6 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
 	draggable="false"
-	on:click|stopPropagation={() => {
-		startDrag && clearTimeout(startDrag)
-	}}
 	on:pointerdown|stopPropagation|preventDefault={pointerdown}
 	class="svlt-grid-item"
 	class:svlt-grid-active={active || (trans && rect)}