From 1392bebf87b89007ff826d9548bd78bc7bb7d609 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Sun, 19 Mar 2023 23:10:33 +0100
Subject: [PATCH] improve move animation

---
 .../apps/components/helpers/InputValue.svelte |  2 ++
 .../helpers/RunnableComponent.svelte          |  1 +
 .../apps/components/layout/AppTabs.svelte     |  3 ---
 .../components/apps/editor/AppEditor.svelte   |  1 +
 .../components/apps/editor/AppPreview.svelte  |  7 -------
 .../components/apps/editor/GridEditor.svelte  |  1 -
 .../apps/editor/SubGridEditor.svelte          |  8 ++++----
 .../apps/editor/component/Component.svelte    | 20 +++++++++++++++++--
 .../component/ComponentNavigation.svelte      |  5 +++--
 .../EmptyInlineScript.svelte                  |  5 +++--
 .../inputEditor/RunnableInputEditor.svelte    |  2 +-
 .../mainInput/RunnableSelector.svelte         |  9 ++++++++-
 frontend/src/lib/components/apps/types.ts     |  1 +
 13 files changed, 42 insertions(+), 23 deletions(-)

diff --git a/frontend/src/lib/components/apps/components/helpers/InputValue.svelte b/frontend/src/lib/components/apps/components/helpers/InputValue.svelte
index 748e4037a7..6d32c8e1e1 100644
--- a/frontend/src/lib/components/apps/components/helpers/InputValue.svelte
+++ b/frontend/src/lib/components/apps/components/helpers/InputValue.svelte
@@ -50,6 +50,7 @@
 	}
 
 	$: lastInput && $worldStore && debounce(handleConnection)
+
 	$: lastInput &&
 		lastInput.type == 'template' &&
 		$stateId &&
@@ -58,6 +59,7 @@
 			value = await getValue(lastInput)
 			dispatch('done')
 		})
+
 	$: lastInput &&
 		lastInput.type == 'eval' &&
 		$stateId &&
diff --git a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte b/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte
index b35da2331a..ccd7d2fa63 100644
--- a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte
+++ b/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte
@@ -237,6 +237,7 @@
 
 	async function setResult(res: any) {
 		if (transformer) {
+			$worldStore.newOutput(id, 'raw', res)
 			res = await eval_like(
 				transformer.content,
 				computeGlobalContext($worldStore, id, { result: res }),
diff --git a/frontend/src/lib/components/apps/components/layout/AppTabs.svelte b/frontend/src/lib/components/apps/components/layout/AppTabs.svelte
index 298230d404..b7648e3906 100644
--- a/frontend/src/lib/components/apps/components/layout/AppTabs.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppTabs.svelte
@@ -46,11 +46,8 @@
 	$: $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
diff --git a/frontend/src/lib/components/apps/editor/AppEditor.svelte b/frontend/src/lib/components/apps/editor/AppEditor.svelte
index cc644539ad..1fcf6d1f1e 100644
--- a/frontend/src/lib/components/apps/editor/AppEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/AppEditor.svelte
@@ -104,6 +104,7 @@
 		history,
 		pickVariableCallback,
 		ontextfocus: writable(undefined),
+		movingcomponent: writable(undefined),
 		selectedComponentInEditor: writable(undefined)
 	})
 
diff --git a/frontend/src/lib/components/apps/editor/AppPreview.svelte b/frontend/src/lib/components/apps/editor/AppPreview.svelte
index 9003149ee5..bb581c61c4 100644
--- a/frontend/src/lib/components/apps/editor/AppPreview.svelte
+++ b/frontend/src/lib/components/apps/editor/AppPreview.svelte
@@ -71,13 +71,6 @@
 		hoverStore: writable(undefined)
 	})
 
-	setContext<AppEditorContext>('AppEditorContext', {
-		history: undefined,
-		pickVariableCallback: writable(undefined),
-		ontextfocus: writable(undefined),
-		selectedComponentInEditor: writable(undefined)
-	})
-
 	let ncontext = context
 
 	function hashchange(e: HashChangeEvent) {
diff --git a/frontend/src/lib/components/apps/editor/GridEditor.svelte b/frontend/src/lib/components/apps/editor/GridEditor.svelte
index 3169534c61..bda9f4b822 100644
--- a/frontend/src/lib/components/apps/editor/GridEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/GridEditor.svelte
@@ -104,7 +104,6 @@
 				onTopId={$selectedComponent}
 				items={$app.grid}
 				on:redraw={(e) => {
-					console.log('redraw')
 					push(history, $app)
 					$app.grid = e.detail
 				}}
diff --git a/frontend/src/lib/components/apps/editor/SubGridEditor.svelte b/frontend/src/lib/components/apps/editor/SubGridEditor.svelte
index 078d0fab34..0bc293620a 100644
--- a/frontend/src/lib/components/apps/editor/SubGridEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/SubGridEditor.svelte
@@ -5,7 +5,7 @@
 	import { columnConfiguration, isFixed, toggleFixed } from '../gridUtils'
 	import type { AppEditorContext, AppViewerContext, GridItem } from '../types'
 	import Component from './component/Component.svelte'
-	import { expandGriditem, findGridItem, sortGridItemsPosition } from './appUtils'
+	import { expandGriditem, findGridItem } from './appUtils'
 	import { push } from '$lib/history'
 	import Grid from '../svelte-grid/Grid.svelte'
 	import GridViewer from './GridViewer.svelte'
@@ -27,7 +27,7 @@
 	const { app, connectingInput, selectedComponent, focusedGrid, mode, parentWidth, breakpoint } =
 		getContext<AppViewerContext>('AppViewerContext')
 
-	const { history } = getContext<AppEditorContext>('AppEditorContext')
+	const editorContext = getContext<AppEditorContext>('AppEditorContext')
 
 	$: highlight = id === $focusedGrid?.parentComponentId && shouldHighlight
 
@@ -74,7 +74,7 @@
 				<Grid
 					items={$app.subgrids?.[subGridId] ?? []}
 					on:redraw={(e) => {
-						push(history, $app)
+						push(editorContext?.history, $app)
 						if ($app.subgrids) {
 							$app.subgrids[subGridId] = e.detail
 						}
@@ -125,7 +125,7 @@
 									return
 								}
 								$selectedComponent = dataItem.id
-								push(history, $app)
+								push(editorContext?.history, $app)
 
 								expandGriditem(
 									$app.subgrids?.[subGridId] ?? [],
diff --git a/frontend/src/lib/components/apps/editor/component/Component.svelte b/frontend/src/lib/components/apps/editor/component/Component.svelte
index ea12a16e8b..5ce933cfd0 100644
--- a/frontend/src/lib/components/apps/editor/component/Component.svelte
+++ b/frontend/src/lib/components/apps/editor/component/Component.svelte
@@ -2,7 +2,7 @@
 	import { getContext } from 'svelte'
 	import { Loader2 } from 'lucide-svelte'
 	import { twMerge } from 'tailwind-merge'
-	import type { AppViewerContext } from '../../types'
+	import type { AppEditorContext, AppViewerContext } from '../../types'
 	import ComponentHeader from '../ComponentHeader.svelte'
 	import { ccomponents, components, type AppComponent } from './components'
 	import {
@@ -48,6 +48,11 @@
 
 	const { mode, app, errorByComponent, hoverStore } =
 		getContext<AppViewerContext>('AppViewerContext')
+
+	const editorContext = getContext<AppEditorContext>('AppEditorContext')
+	const movingcomponent = editorContext?.movingcomponent
+	$: ismoving = movingcomponent != undefined && $movingcomponent === component.id
+
 	let initializing: boolean | undefined = undefined
 	let componentContainerHeight: number = 0
 
@@ -81,6 +86,16 @@
 		/>
 	{/if}
 
+	{#if ismoving}
+		<div class="absolute -top-8 w-40 ">
+			<button
+				class="border p-0.5 text-xs"
+				on:click={() => {
+					$movingcomponent = undefined
+				}}>Cancel move</button
+			>
+		</div>
+	{/if}
 	<div
 		class={twMerge(
 			'h-full bg-white/40 outline-1',
@@ -89,7 +104,8 @@
 			ccomponents[component.type].softWrap || hasError ? '' : 'overflow-auto',
 			$mode != 'preview' ? 'cursor-pointer' : '',
 			'relative z-auto',
-			$app.css?.['app']?.['component']?.class
+			$app.css?.['app']?.['component']?.class,
+			ismoving ? 'animate-pulse' : ''
 		)}
 		style={$app.css?.['app']?.['component']?.style}
 		bind:clientHeight={componentContainerHeight}
diff --git a/frontend/src/lib/components/apps/editor/component/ComponentNavigation.svelte b/frontend/src/lib/components/apps/editor/component/ComponentNavigation.svelte
index 791808afb6..788e07447e 100644
--- a/frontend/src/lib/components/apps/editor/component/ComponentNavigation.svelte
+++ b/frontend/src/lib/components/apps/editor/component/ComponentNavigation.svelte
@@ -13,7 +13,7 @@
 	const { app, selectedComponent, worldStore, focusedGrid, componentControl } =
 		getContext<AppViewerContext>('AppViewerContext')
 
-	const { history } = getContext<AppEditorContext>('AppEditorContext')
+	const { history, movingcomponent } = getContext<AppEditorContext>('AppEditorContext')
 
 	let tempGridItem: GridItem | undefined = undefined
 	let copiedGridItem: GridItem | undefined = undefined
@@ -134,6 +134,7 @@
 		if (!$selectedComponent) {
 			return
 		}
+		$movingcomponent = $selectedComponent
 		push(history, $app)
 
 		const gridItem = findGridItem($app, $selectedComponent)
@@ -149,7 +150,7 @@
 
 	function handlePaste(event: KeyboardEvent) {
 		push(history, $app)
-
+		$movingcomponent = undefined
 		if (tempGridItem != undefined) {
 			if (
 				$focusedGrid &&
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte
index 358a6cc0f4..af32468fd5 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte
@@ -8,11 +8,11 @@
 	import { inferArgs } from '$lib/infer'
 	import { initialCode } from '$lib/script_helpers'
 	import { capitalize, emptySchema, getScriptByPath } from '$lib/utils'
-	import { faCodeBranch, faTrash } from '@fortawesome/free-solid-svg-icons'
+	import { faCodeBranch } from '@fortawesome/free-solid-svg-icons'
 	import { Building, Globe2 } from 'lucide-svelte'
 	import { createEventDispatcher, getContext } from 'svelte'
 	import { fly } from 'svelte/transition'
-	import type { AppViewerContext } from '../../types'
+	import type { AppEditorContext, AppViewerContext } from '../../types'
 	import { defaultCode } from '../component'
 	import InlineScriptList from '../settingsPanel/mainInput/InlineScriptList.svelte'
 	import WorkspaceScriptList from '../settingsPanel/mainInput/WorkspaceScriptList.svelte'
@@ -25,6 +25,7 @@
 	let picker: Drawer
 
 	const { appPath, app } = getContext<AppViewerContext>('AppViewerContext')
+
 	const dispatch = createEventDispatcher()
 
 	async function inferInlineScriptSchema(
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/RunnableInputEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/RunnableInputEditor.svelte
index cd77aa4331..6ac8fd5a2a 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/RunnableInputEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/RunnableInputEditor.svelte
@@ -15,5 +15,5 @@
 {#if isRunnableSelected}
 	<SelectedRunnable {appComponent} bind:appInput />
 {:else}
-	<RunnableSelector {defaultUserInput} bind:appInput />
+	<RunnableSelector id={appComponent.id} {defaultUserInput} bind:appInput />
 {/if}
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte
index 57e6c7a9a3..ec084e884a 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte
@@ -7,7 +7,7 @@
 	import type { ResultAppInput } from '$lib/components/apps/inputType'
 	import WorkspaceScriptList from './WorkspaceScriptList.svelte'
 	import WorkspaceFlowList from './WorkspaceFlowList.svelte'
-	import type { AppViewerContext } from '$lib/components/apps/types'
+	import type { AppEditorContext, AppViewerContext } from '$lib/components/apps/types'
 	import { getContext } from 'svelte'
 	import type { Schema } from '$lib/common'
 	import { getAllScriptNames, loadSchema, schemaToInputsSpec } from '$lib/components/apps/utils'
@@ -17,12 +17,14 @@
 
 	export let appInput: ResultAppInput
 	export let defaultUserInput = false
+	export let id: string
 
 	let tab: Tab = 'inlinescripts'
 	let filter: string = ''
 	let picker: Drawer
 
 	const { app, workspace } = getContext<AppViewerContext>('AppViewerContext')
+	const { selectedComponentInEditor } = getContext<AppEditorContext>('AppEditorContext')
 
 	async function loadSchemaFromTriggerable(
 		path: string,
@@ -42,6 +44,7 @@
 				schema
 			}
 			appInput.fields = fields
+			$selectedComponentInEditor = id
 		}
 	}
 
@@ -56,6 +59,7 @@
 				schema
 			}
 			appInput.fields = fields
+			$selectedComponentInEditor = id
 		}
 	}
 
@@ -70,6 +74,7 @@
 				schema
 			}
 			appInput.fields = fields
+			$selectedComponentInEditor = id
 		}
 	}
 
@@ -87,6 +92,7 @@
 
 			$app.unusedInlineScripts.splice(unusedInlineScriptIndex, 1)
 		}
+		$selectedComponentInEditor = id
 		$app = $app
 	}
 
@@ -108,6 +114,7 @@
 		}
 
 		appInput = appInput
+		$selectedComponentInEditor = id
 
 		return newScriptPath
 	}
diff --git a/frontend/src/lib/components/apps/types.ts b/frontend/src/lib/components/apps/types.ts
index ee7355f3b8..0b7672d046 100644
--- a/frontend/src/lib/components/apps/types.ts
+++ b/frontend/src/lib/components/apps/types.ts
@@ -164,6 +164,7 @@ export type AppEditorContext = {
 	pickVariableCallback: Writable<((path: string) => void) | undefined>
 	ontextfocus: Writable<(() => void) | undefined>
 	selectedComponentInEditor: Writable<string | undefined>
+	movingcomponent: Writable<string | undefined>
 }
 
 export type FocusedGrid = { parentComponentId: string; subGridIndex: number }