fix(frontend): Small app fixes (#1331)

* fix(frontend): wip * fix(frontend): wip * fix(frontend): merge main * fix(frontend): fix build * fix(frontend): revert css * fix(frontend): fix alignement + remove id from if deleted * fix(frontend): fix connection height * fix(frontend): done
2026-08-19 08:01:25 +00:00 · 2023-03-27 11:50:40 +02:00
parent 781da7ec60
commit e8aafce789
22 changed files with 57 additions and 59 deletions
@@ -243,7 +243,7 @@
 											{#if $appStore.grid}
 												<ComponentNavigation />

-												<div on:pointerdown|stopPropagation class={width}>
+												<div on:pointerdown|stopPropagation class={twMerge(width, 'mx-auto')}>
 													<GridEditor {policy} />
 												</div>

@@ -4,7 +4,6 @@
 	import { buildWorld } from '../rx'
 	import type {
 		App,
-		AppEditorContext,
 		AppViewerContext,
 		ConnectingInput,
 		EditorBreakpoint,
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { getContext, afterUpdate } from 'svelte'
-	import type { App, AppEditorContext, AppViewerContext } from '../types'
+	import { getContext } from 'svelte'
+	import type { AppEditorContext, AppViewerContext } from '../types'
 	import { classNames } from '$lib/utils'
 	import { columnConfiguration, isFixed, toggleFixed } from '../gridUtils'
 	import { twMerge } from 'tailwind-merge'
@@ -22,7 +22,6 @@
 	export let parentWidth: number | undefined = undefined

 	let getComputedCols
-
 	let container

 	$: [gapX, gapY] = gap
@@ -17,7 +17,6 @@
 		.find(({ script, index }) => $selectedComponent?.includes(`bg_${index}`))

 	$: componentSettings = findComponentSettings($app, $selectedComponent?.[0])
-
 	$: tableActionSettings = findTableActionSettings($app, $selectedComponent?.[0])

 	function findTableActionSettings(app: App, id: string | undefined) {
@@ -36,7 +35,7 @@
 	}

 	function findComponentSettings(app: App, id: string | undefined) {
-		if (!id) return
+		if (!id) return undefined
 		if (app?.grid) {
 			const gridItem = app.grid.find((x) => x.data?.id === id)
 			if (gridItem) {
@@ -92,8 +92,10 @@
 				class="border p-0.5 text-xs"
 				on:click={() => {
 					$movingcomponents = undefined
-				}}>Cancel move</button
+				}}
 			>
+				Cancel move
+			</button>
 		</div>
 	{/if}
 	<div
@@ -1,4 +1,4 @@
-import { writable } from "svelte/store";
+import { writable } from 'svelte/store'

 const store = writable<IsOpenStoreItem>({})

@@ -10,12 +10,11 @@ export const isOpenStore = {
 	/** If an item is already set, it won't get updated. */
 	addItems: (items: IsOpenStoreItem[]) => {
 		let newItems = {}
-		items.forEach(item => newItems = { ...newItems, ...item })
-		store.update(last => ({ ...newItems, ...last }))
-
+		items.forEach((item) => (newItems = { ...newItems, ...item }))
+		store.update((last) => ({ ...newItems, ...last }))
 	},
 	toggle: (id: string) => {
-		store.update(last => ({ ...last, [id]: !last[id] }))
+		store.update((last) => ({ ...last, [id]: !last[id] }))
 	},
 	reset: () => store.set({})
 }
@@ -11,7 +11,7 @@
 	import BackgroundScriptsOutput from './components/BackgroundScriptsOutput.svelte'
 	import OutputHeader from './components/OutputHeader.svelte'

-	const { connectingInput, app, allIdsInPath } = getContext<AppViewerContext>('AppViewerContext')
+	const { connectingInput, app } = getContext<AppViewerContext>('AppViewerContext')

 	let search = writable<string>('')

@@ -22,11 +22,11 @@
 	})
 </script>

-<PanelSection noPadding titlePadding="px-4 pt-2 pb-0.5" title="Outputs">
-	<div class="bg-white w-full h-full z-30">
+<PanelSection noPadding titlePadding="px-1.5 pt-2" title="Outputs">
+	<div class="bg-white h-auto w-full z-30 ">
 		<div class="min-w-[150px]">
-			<div class="sticky z-10 top-0 left-0 w-full bg-white p-2">
-				<div class="relative">
+			<div class="sticky z-10 top-0 left-0 w-full bg-white p-1.5">
+				<div class="relative w-full">
 					<input
 						bind:value={$search}
 						class="px-2 pb-1 border border-gray-300 rounded-sm {search ? 'pr-8' : ''}"
@@ -12,20 +12,19 @@
 	import { Building, Globe2 } from 'lucide-svelte'
 	import { createEventDispatcher, getContext } from 'svelte'
 	import { fly } from 'svelte/transition'
-	import type { AppEditorContext, AppViewerContext } from '../../types'
+	import type { AppViewerContext } from '../../types'
 	import { defaultCode } from '../component'
 	import InlineScriptList from '../settingsPanel/mainInput/InlineScriptList.svelte'
 	import WorkspaceScriptList from '../settingsPanel/mainInput/WorkspaceScriptList.svelte'

 	export let name: string
-	export let id: string
+	export let componentType: string | undefined = undefined

 	let tab = 'inlinescripts'
 	let filter: string = ''
 	let picker: Drawer

 	const { appPath, app } = getContext<AppViewerContext>('AppViewerContext')
-
 	const dispatch = createEventDispatcher()

 	async function inferInlineScriptSchema(
@@ -47,8 +46,6 @@
 		path: string,
 		subkind: 'pgsql' | 'mysql' | undefined = undefined
 	) {
-		const componentType = $app.grid.find((c) => c.data.id === id)?.data?.type
-
 		const content =
 			defaultCode(componentType ?? '', language) ??
 			initialCode(language, Script.kind.SCRIPT, subkind ?? 'flow')
@@ -93,10 +90,6 @@
 	}

 	const langs = ['deno', 'python3', 'go', 'bash'] as Script.language[]
-
-	function loadSchemaFromTriggerable(path: string, arg1: string) {
-		throw new Error('Function not implemented.')
-	}
 </script>

 <Drawer bind:this={picker} size="1000px">
@@ -9,7 +9,7 @@
 	import type { Schema } from '$lib/common'
 	import Badge from '$lib/components/common/badge/Badge.svelte'
 	import Editor from '$lib/components/Editor.svelte'
-	import { emptySchema, scriptLangToEditorLang } from '$lib/utils'
+	import { emptySchema, isMac, scriptLangToEditorLang } from '$lib/utils'
 	import Popover from '../../../Popover.svelte'
 	import { computeFields } from './utils'
 	import { deepEqual } from 'fast-equals'
@@ -67,6 +67,7 @@
 			loadSchemaAndInputsByName()
 		}
 	})
+
 	const dispatch = createEventDispatcher()
 	let runLoading = false

@@ -82,8 +83,6 @@
 		}
 	}

-	let isMac = navigator.userAgent.indexOf('Mac OS X') !== -1
-
 	$: extraLib =
 		inlineScript?.language == 'frontend' && worldStore
 			? buildExtraLib($worldStore?.outputsById ?? {}, id, false, $state, true)
@@ -177,7 +176,7 @@
 						Format

 						<div class="flex flex-row items-center gap-1">
-							<Kbd>{isMac ? '⌘' : 'CTRL'}</Kbd>
+							<Kbd>{isMac() ? '⌘' : 'CTRL'}</Kbd>
 							<Kbd>S</Kbd>
 						</div>
 					</div>
@@ -199,7 +198,7 @@
 							Run

 							<div class="flex flex-row items-center gap-1">
-								<Kbd>{isMac ? '⌘' : 'CTRL'}</Kbd>
+								<Kbd>{isMac() ? '⌘' : 'CTRL'}</Kbd>
 								<Kbd>
 									<div class="h-4 flex items-center justify-center">
 										<CornerDownLeft size={10} />
@@ -248,15 +247,15 @@
 			{:else}
 				<SimpleEditor
 					bind:this={simpleEditor}
+					class="h-full"
+					{extraLib}
+					bind:code={inlineScript.content}
+					lang="javascript"
 					cmdEnterAction={async () => {
 						runLoading = true
 						await $runnableComponents[id]?.cb?.(!transformer ? inlineScript : undefined)
 						runLoading = false
 					}}
-					class="h-full"
-					{extraLib}
-					bind:code={inlineScript.content}
-					lang="javascript"
 					on:change={() => {
 						$app = $app
 					}}
@@ -2,7 +2,6 @@
 	import { Button, Drawer, DrawerContent } from '$lib/components/common'
 	import type Editor from '$lib/components/Editor.svelte'
 	import ScriptEditor from '$lib/components/ScriptEditor.svelte'
-	import type { Preview } from '$lib/gen'
 	import { faSave } from '@fortawesome/free-solid-svg-icons'
 	import type { InlineScript } from '../../types'

@@ -18,6 +18,7 @@

 	export let componentInput: AppInput | undefined
 	export let defaultUserInput = false
+	export let componentType: string
 	export let id: string
 	export let transformer: boolean

@@ -97,8 +98,8 @@
 			}}
 		/>
 	{:else}
-		<span class="px-2 text-gray-600"
-			>Selected editor component is a transformer but component has no transformer
+		<span class="px-2 text-gray-600">
+			Selected editor component is a transformer but component has no transformer
 		</span>
 	{/if}
 {:else if componentInput && componentInput.type == 'runnable'}
@@ -115,7 +116,7 @@
 			/>
 		{:else}
 			<EmptyInlineScript
-				{id}
+				{componentType}
 				name={componentInput.runnable.name}
 				on:delete={deleteInlineScript}
 				on:new={(e) => {
@@ -74,7 +74,6 @@
 						/>
 					{:else}
 						<EmptyInlineScript
-							id={`b_${hiddenInlineScript}`}
 							name={$app.hiddenInlineScripts[hiddenInlineScript].name}
 							on:delete={() => deleteBackgroundScript(hiddenInlineScript)}
 							on:new={(e) => {
@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { getContext } from 'svelte'
 	import type { AppEditorContext, GridItem } from '../../types'
-
 	import InlineScriptEditorPanel from './InlineScriptEditorPanel.svelte'

 	const { selectedComponentInEditor } = getContext<AppEditorContext>('AppEditorContext')
@@ -14,6 +13,7 @@
 		defaultUserInput={gridItem.data?.type == 'formcomponent' ||
 			gridItem?.data?.type == 'formbuttoncomponent'}
 		id={gridItem.data.id}
+		componentType={gridItem.data.type}
 		transformer={$selectedComponentInEditor?.endsWith('_transformer')}
 		bind:componentInput={gridItem.data.componentInput}
 	/>
@@ -23,6 +23,7 @@
 	{#each gridItem.data.actionButtons as actionButton, index (index)}
 		{#if actionButton?.id === $selectedComponentInEditor || actionButton?.id + '_transformer' === $selectedComponentInEditor}
 			<InlineScriptEditorPanel
+				componentType={actionButton.type}
 				id={actionButton.id}
 				transformer={$selectedComponentInEditor?.endsWith('_transformer')}
 				bind:componentInput={actionButton.componentInput}
@@ -1,10 +1,10 @@
 <script lang="ts">
 	import { Button } from '$lib/components/common'
-	import { faPlus, faTrashAlt } from '@fortawesome/free-solid-svg-icons'
+	import { faPlus } from '@fortawesome/free-solid-svg-icons'
 	import { X } from 'lucide-svelte'
 	import { createEventDispatcher } from 'svelte'
 	import { fade } from 'svelte/transition'
-	import type { InputType, StaticAppInput, StaticInput, StaticOptions } from '../../inputType'
+	import type { InputType, StaticInput, StaticOptions } from '../../inputType'
 	import SubTypeEditor from './SubTypeEditor.svelte'

 	export let componentInput: StaticInput<any[]>
@@ -50,7 +50,8 @@
 		jobs
 	} = getContext<AppViewerContext>('AppViewerContext')

-	const { history, ontextfocus } = getContext<AppEditorContext>('AppEditorContext')
+	const { history, ontextfocus, movingcomponents } =
+		getContext<AppEditorContext>('AppEditorContext')

 	$: editor && ($ontextfocus = () => editor?.focus())

@@ -60,7 +61,12 @@
 		if (componentSettings?.item.id) {
 			$errorByComponent = clearErrorByComponentId(componentSettings?.item.id, $errorByComponent)
 			$jobs = clearJobsByComponentId(componentSettings?.item.id, $jobs)
+
+			if ($movingcomponents?.includes(componentSettings?.item.id)) {
+				$movingcomponents = $movingcomponents.filter((id) => id !== componentSettings?.item.id)
+			}
 		}
+
 		$selectedComponent = undefined
 		$focusedGrid = undefined
 		if (componentSettings?.item && !noGrid) {
@@ -1,8 +1,7 @@
 <script lang="ts">
 	import Button from '$lib/components/common/button/Button.svelte'
 	import CloseButton from '$lib/components/common/CloseButton.svelte'
-	import { faPlus, faTrashAlt } from '@fortawesome/free-solid-svg-icons'
-	import { CrossIcon } from 'lucide-svelte'
+	import { faPlus } from '@fortawesome/free-solid-svg-icons'
 	import { getContext } from 'svelte'
 	import type { AppViewerContext } from '../../types'
 	import { deleteGridItem } from '../appUtils'
@@ -2,8 +2,7 @@
 	import Button from '$lib/components/common/button/Button.svelte'
 	import Toggle from '$lib/components/Toggle.svelte'
 	import Tooltip from '$lib/components/Tooltip.svelte'
-	import { faClose, faEdit } from '@fortawesome/free-solid-svg-icons'
-	import { includes } from 'lodash'
+	import { faClose } from '@fortawesome/free-solid-svg-icons'
 	import { getContext } from 'svelte'
 	import type { ResultAppInput } from '../../inputType'
 	import type { AppEditorContext, AppViewerContext } from '../../types'
@@ -12,8 +12,6 @@

 	const { onchange, worldStore, state } = getContext<AppViewerContext>('AppViewerContext')

-	$: componentInput && onchange?.()
-
 	$: extraLib =
 		componentInput?.expr && $worldStore
 			? buildExtraLib($worldStore?.outputsById ?? {}, id, hasRows, $state, false)
@@ -28,6 +26,11 @@
 			shouldBindKey={false}
 			{extraLib}
 			autoHeight
+			on:change={() => {
+				if (onchange) {
+					onchange()
+				}
+			}}
 		/>
 	</div>
 {/if}
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { AppInput, StaticInput } from '../../../inputType'
+	import type { StaticInput } from '../../../inputType'
 	import { Loader2, X } from 'lucide-svelte'
 	import { Popup } from '../../../../common'
 	import { fade } from 'svelte/transition'
@@ -45,8 +45,9 @@

 	function select(label: string) {
 		componentInput.value = label
-		if ((document.activeElement as HTMLElement)?.blur) {
-			;(document.activeElement as HTMLElement).blur()
+		const elem = document.activeElement as HTMLElement
+		if (elem.blur) {
+			elem.blur()
 		}
 	}
 </script>
@@ -4,11 +4,11 @@ import { deepEqual } from 'fast-equals'

 export interface Subscriber<T> {
 	id?: string
-	next(v: T)
+	next(v: T): void
 }

 export interface Observable<T> {
-	subscribe(x: Subscriber<T>)
+	subscribe(x: Subscriber<T>): void
 }
 export interface Output<T> extends Observable<T> {
 	set(x: T, force?: boolean): void
@@ -82,9 +82,9 @@
 	<div class="relative">
 		{#if moving == mod.id}
 			<div class="absolute z-10 right-20 top-0.5 center-center">
-				<Button color="dark" on:click={() => dispatch('move')} size="xs" variant="border"
-					>Cancel move</Button
-				>
+				<Button color="dark" on:click={() => dispatch('move')} size="xs" variant="border">
+					Cancel move
+				</Button>
 			</div>
 		{/if}