windmill-components 1.309.7 → 1.352.0

package/package/components/apps/editor/componentsPanel/cssUtils.js

@@ -570,7 +570,7 @@ export const customisationByComponent = [
         variables: []
     },
     {
-        components: ['multiselectcomponent'],
+        components: ['multiselectcomponent', 'multiselectcomponentv2'],
         selectors: [
             {
                 selector: '.multiselect',

package/package/components/apps/editor/componentsPanel/quickStyleProperties.js

@@ -518,6 +518,8 @@ export const quickStyleProperties = {
     },
     aggridcomponent: {},
     aggridcomponentee: {},
+    aggridinfinitecomponent: {},
+    aggridinfinitecomponentee: {},
     buttoncomponent: {
         button: buttonDefaultProps,
         container: containerDefaultProps
@@ -639,6 +641,9 @@ export const quickStyleProperties = {
     multiselectcomponent: {
         input: inputDefaultProps
     },
+    multiselectcomponentv2: {
+        input: inputDefaultProps
+    },
     numberinputcomponent: {
         input: inputDefaultProps
     },

package/package/components/apps/editor/contextPanel/components/OutputHeader.svelte

@@ -27,11 +27,11 @@ const hoverColor = {
 };
 const openBackground = {
     blue: 'bg-blue-50 dark:bg-frost-800',
-    indigo: 'bg-indigo-50 dark:bg-indigo-800'
+    indigo: 'bg-indigo-50 dark:bg-indigo-700/50'
 };
 const manuallyOpenColor = {
-    blue: 'text-primary bg-gray-300 rounded-sm',
-    indigo: 'text-primary bg-gray-300 rounded-sm'
+    blue: 'text-primary dark:text-gray-50 bg-gray-300 rounded-sm dark:bg-gray-600',
+    indigo: 'text-primary bg-gray-300 dark:text-gray-50 rounded-sm dark:bg-gray-600'
 };
 const idClass = {
     blue: 'bg-blue-500 text-white',
@@ -69,7 +69,9 @@ function renameId(newId) {
     }
     if (item?.data.type == 'aggridcomponent' ||
         item?.data.type == 'aggridcomponentee' ||
-        item?.data.type == 'dbexplorercomponent') {
+        item?.data.type == 'dbexplorercomponent' ||
+        item?.data.type == 'aggridinfinitecomponent' ||
+        item?.data.type == 'aggridinfinitecomponentee') {
         for (let c of item.data.actions ?? []) {
             let old = c.id;
             c.id = c.id.replace(id + '_', newId + '_');
@@ -95,7 +97,9 @@ function renameComponent(from, to, data) {
     }
     if ((data.type == 'aggridcomponent' ||
         data.type == 'aggridcomponentee' ||
-        data.type == 'dbexplorercomponent') &&
+        data.type == 'dbexplorercomponent' ||
+        data.type == 'aggridinfinitecomponent' ||
+        data.type == 'aggridinfinitecomponentee') &&
         Array.isArray(data.actions)) {
         for (let c of data.actions) {
             renameComponent(from, to, c);

package/package/components/apps/editor/contextPanel/components/TableActionsOutput.svelte

@@ -10,7 +10,7 @@ export let gridItem;
 			{/each}
 		</div>
 	{/if}
-	{#if (gridItem.data.type === 'aggridcomponent' || gridItem.data.type === 'aggridcomponentee' || gridItem.data.type === 'dbexplorercomponent') && gridItem.data.actions?.length > 0}
+	{#if (gridItem.data.type === 'aggridcomponent' || gridItem.data.type === 'aggridcomponentee' || gridItem.data.type === 'dbexplorercomponent' || gridItem.data.type === 'aggridinfinitecomponent' || gridItem.data.type === 'aggridinfinitecomponentee') && gridItem.data.actions?.length > 0}
 		<div class="ml-2 border-l">
 			{#each gridItem.data.actions as action, index}
 				<Output id={action.id} first={index === 0} label="Table action" />

package/package/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte

@@ -65,16 +65,55 @@ function preConnect(newFields) {
         const componentOutputs = $worldStore?.outputsById[id];
         if (componentOutputs.currentStepIndex) {
             newFields['stepIndex'] = {
-                type: 'connected',
-                connection: {
-                    componentId: id,
-                    path: 'currentStepIndex'
-                },
-                value: componentOutputs.currentStepIndex.peak(),
+                type: 'evalv2',
+                expr: `${id}.currentStepIndex`,
                 fieldType: 'number'
             };
         }
     }
+    else if (componentType === 'aggridinfinitecomponent' ||
+        componentType === 'aggridinfinitecomponentee') {
+        newFields['offset'] = {
+            type: 'evalv2',
+            expr: `${id}.params.offset`,
+            fieldType: 'number'
+        };
+        newFields['limit'] = {
+            type: 'evalv2',
+            expr: `${id}.params.limit`,
+            fieldType: 'number'
+        };
+        newFields['orderBy'] = {
+            type: 'evalv2',
+            expr: `${id}.params.orderBy`,
+            fieldType: 'string'
+        };
+        newFields['isDesc'] = {
+            type: 'evalv2',
+            expr: `${id}.params.isDesc`,
+            fieldType: 'boolean'
+        };
+        newFields['search'] = {
+            type: 'evalv2',
+            expr: `${id}.params.search`,
+            fieldType: 'string'
+        };
+    }
+}
+function assertConnections(newFields) {
+    if (componentType === 'aggridinfinitecomponent' ||
+        componentType === 'aggridinfinitecomponentee') {
+        const fields = ['offset', 'limit', 'orderBy', 'isDesc', 'search'];
+        fields.forEach((field) => {
+            if (newFields[field]?.type !== 'evalv2') {
+                newFields[field] = {
+                    type: 'evalv2',
+                    expr: `${id}.params.${field}`,
+                    fieldType: newFields[field]?.fieldType ?? 'string'
+                };
+            }
+        });
+    }
 }
 async function loadSchemaAndInputsByName() {
     if (syncFields && inlineScript) {
@@ -85,6 +124,7 @@ async function loadSchemaAndInputsByName() {
         if (!hadPreviousFields && Object.keys(newFields).length > 0) {
             preConnect(newFields);
         }
+        assertConnections(newFields);
         if (!deepEqual(newFields, fields)) {
             fields = newFields;
             $stateId++;

package/package/components/apps/editor/inlineScriptsPanel/InlineScriptRunnableByPath.svelte

@@ -203,7 +203,7 @@ $: refresh(runnable);
 			class="!text-xs !rounded-xs"
 		/>
 	</div>
-	<div class="w-full">
+	<div class="w-full grow overflow-y-auto">
 		{#key $stateId}
 			{#if notFound}
 				<div class="text-red-400"

package/package/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelWithTable.svelte

@@ -30,7 +30,7 @@ export let gridItem;
 	{/each}
 {/if}
 
-{#if (gridItem?.data?.type === 'aggridcomponent' || gridItem?.data?.type === 'aggridcomponentee' || gridItem?.data?.type === 'dbexplorercomponent') && Array.isArray(gridItem.data.actions)}
+{#if (gridItem?.data?.type === 'aggridcomponent' || gridItem?.data?.type === 'aggridcomponentee' || gridItem?.data?.type === 'dbexplorercomponent' || gridItem?.data?.type === 'aggridinfinitecomponent' || gridItem?.data?.type === 'aggridinfinitecomponentee') && Array.isArray(gridItem.data.actions)}
 	{#each gridItem.data.actions as actionButton, index (index)}
 		{#if actionButton?.id === $selectedComponentInEditor || actionButton?.id + '_transformer' === $selectedComponentInEditor}
 			<InlineScriptEditorPanel

package/package/components/apps/editor/inlineScriptsPanel/utils.js

@@ -48,7 +48,9 @@ function processGridItemRunnable(gridItem, list) {
         }
         if (component.type === 'aggridcomponent' ||
             component.type === 'aggridcomponentee' ||
-            component.type === 'dbexplorercomponent') {
+            component.type === 'dbexplorercomponent' ||
+            component.type === 'aggridinfinitecomponent' ||
+            component.type === 'aggridinfinitecomponentee') {
             component.actions?.forEach((actionButton) => {
                 if (actionButton.componentInput?.type !== 'runnable') {
                     return;

package/package/components/apps/editor/settingsPanel/AlignmentEditor.svelte

@@ -12,7 +12,7 @@ export let component;
 		{#if component.horizontalAlignment}
 			<ToggleButtonGroup
 				noWFull
-				on:selected={() => (component = component)}
+				on:selected={() => ($app = $app)}
 				bind:selected={component.horizontalAlignment}
 			>
 				<ToggleButton value="left" icon={AlignStartVertical} />

package/package/components/apps/editor/settingsPanel/ArrayStaticInputEditor.svelte

@@ -2,7 +2,7 @@
 import { GripVertical, Loader2, Plus, X } from 'lucide-svelte';
 import { createEventDispatcher } from 'svelte';
 import SubTypeEditor from './SubTypeEditor.svelte';
-import { dndzone, SOURCES, TRIGGERS } from 'svelte-dnd-action';
+import { dragHandle, dragHandleZone } from '@windmill-labs/svelte-dnd-action';
 import { generateRandomString, pluralize } from '../../../../utils';
 import Toggle from '../../../Toggle.svelte';
 import QuickAddColumn from './QuickAddColumn.svelte';
@@ -181,36 +181,15 @@ function deleteElementByType(index) {
         dispatch('deleteArrayItem', { index });
     }
 }
-let dragDisabled = true;
-let dragging = false;
 function handleConsider(e) {
-    const { items: newItems, info: { source, trigger } } = e.detail;
+    const { items: newItems } = e.detail;
     items = newItems;
-    // Ensure dragging is stopped on drag finish via keyboard
-    if (source === SOURCES.KEYBOARD && trigger === TRIGGERS.DRAG_STOPPED) {
-        dragDisabled = true;
-    }
 }
 function handleFinalize(e) {
-    const { items: newItems, info: { source } } = e.detail;
+    const { items: newItems } = e.detail;
     items = newItems;
-    // Ensure dragging is stopped on drag finish via pointer (mouse, touch)
-    if (source === SOURCES.POINTER) {
-        dragDisabled = true;
-    }
     const reorderedValues = items.map((item) => item.value);
     componentInput.value = reorderedValues;
-    dragging = false;
-}
-function startDrag(e) {
-    dragging = true;
-    // preventing default to prevent lag on touch devices (because of the browser checking for screen scrolling)
-    e.preventDefault();
-    dragDisabled = false;
-}
-function handleKeyDown(e) {
-    if ((e.key === 'Enter' || e.key === ' ') && dragDisabled)
-        dragDisabled = false;
 }
 let items = (Array.isArray(componentInput.value) ? componentInput.value : [])
     .filter((x) => x != undefined)
@@ -256,9 +235,8 @@ let raw = false;
 			{/if}
 		</div>
 		<section
-			use:dndzone={{
+			use:dragHandleZone={{
 				items,
-				dragDisabled,
 				flipDurationMs,
 				dropTargetStyle: {}
 			}}
@@ -277,19 +255,12 @@ let raw = false;
 								bind:componentInput
 								bind:value={item.value}
 								on:remove={() => deleteElementByType(index)}
-								{dragging}
 							/>
 						</div>
 
 						<div class="flex justify-between flex-col items-center">
 							<!-- svelte-ignore a11y-no-static-element-interactions -->
-							<div
-								tabindex={dragDisabled ? 0 : -1}
-								class="w-4 h-4 cursor-move"
-								on:mousedown={startDrag}
-								on:touchstart={startDrag}
-								on:keydown={handleKeyDown}
-							>
+							<div class="w-4 h-4 cursor-move handle" use:dragHandle>
 								<GripVertical size={16} />
 							</div>
 							{#if subFieldType !== 'db-explorer'}

package/package/components/apps/editor/settingsPanel/ComponentControl.svelte

@@ -25,7 +25,7 @@ let collapsed = true;
 		</div>
 
 		{#if collapsed}
-			<div class="flex flex-row gap-1">
+			<div class="flex flex-row gap-1 flex-wrap">
 				{#each componentControls as control}
 					<span class="inline-flex items-center rounded-md px-2 py-0.5 text-xs font-medium border">
 						{control.title}

package/package/components/apps/editor/settingsPanel/ComponentInputTypeEditor.svelte

@@ -20,12 +20,15 @@ function applyConnection(connection) {
         ...componentInput,
         type: 'evalv2',
         expr: expr,
-        connections: [{ componentId: connection.componentId, id: connection.path.split('.')[0].split('[')[0] }]
+        connections: [
+            { componentId: connection.componentId, id: connection.path.split('.')[0].split('[')[0] }
+        ]
     };
     evalV2editor?.setCode(expr);
     $app = $app;
 }
 let clientWidth;
+const iconOnlyThreshold = 300;
 </script>
 
 {#if componentInput.fieldType !== 'any'}
@@ -61,7 +64,7 @@ let clientWidth;
 						label="Static"
 						value="static"
 						disabled={disableStatic}
-						iconOnly={clientWidth < 250}
+						iconOnly={clientWidth < iconOnlyThreshold}
 						icon={Pen}
 					/>
 				{/if}
@@ -69,21 +72,21 @@ let clientWidth;
 					<ToggleButton
 						value="connected"
 						icon={Plug2}
-						iconOnly={clientWidth < 250}
+						iconOnly={clientWidth < iconOnlyThreshold}
 						label="Connect"
 					/>
 				{/if}
 				<ToggleButton
 					value="evalv2"
 					icon={FunctionSquare}
-					iconOnly={clientWidth < 250}
+					iconOnly={clientWidth < iconOnlyThreshold}
 					label="Eval"
 				/>
 
 				<ToggleButton
 					value="runnable"
 					icon={Code}
-					iconOnly={clientWidth < 250}
+					iconOnly={clientWidth < iconOnlyThreshold}
 					label="Compute"
 					id="data-source-compute"
 				/>

package/package/components/apps/editor/settingsPanel/ComponentPanel.svelte

@@ -5,9 +5,8 @@ import InputsSpecsEditor from './InputsSpecsEditor.svelte';
 import TableActions from './TableActions.svelte';
 import StaticInputEditor from './inputEditor/StaticInputEditor.svelte';
 import ConnectedInputEditor from './inputEditor/ConnectedInputEditor.svelte';
-import { classNames, getModifierKey } from '../../../../utils';
+import { classNames, getModifierKey, isMac } from '../../../../utils';
 import { buildExtraLib } from '../../utils';
-import Recompute from './Recompute.svelte';
 import Tooltip from '../../../Tooltip.svelte';
 import ComponentInputTypeEditor from './ComponentInputTypeEditor.svelte';
 import AlignmentEditor from './AlignmentEditor.svelte';
@@ -34,6 +33,9 @@ import ComponentPanelDataSource from './ComponentPanelDataSource.svelte';
 import MenuItems from './MenuItems.svelte';
 import DecisionTreeGraphEditor from './DecisionTreeGraphEditor.svelte';
 import GridAgChartsLicenseKe from './GridAgChartsLicenseKe.svelte';
+import Toggle from '../../../Toggle.svelte';
+import ContextVariables from './ContextVariables.svelte';
+import EventHandlers from './EventHandlers.svelte';
 export let componentSettings = undefined;
 export let onDelete = undefined;
 export let noGrid = false;
@@ -127,9 +129,6 @@ function transformToFrontend() {
         componentSettings.item.data.componentInput = appInput;
     }
 }
-function isMac() {
-    return navigator.platform.toUpperCase().indexOf('MAC') >= 0;
-}
 </script>
 
 <svelte:window on:keydown={keydown} />
@@ -251,6 +250,8 @@ function isMac() {
 							{/if}
 						</div>
 					{/if}
+					<ContextVariables type={component.type} />
+
 					{#key $stateId}
 						{#if componentSettings.item.data.componentInput?.type === 'runnable'}
 							{#if Object.keys(componentSettings.item.data.componentInput.fields ?? {}).length > 0}
@@ -274,6 +275,13 @@ function isMac() {
 										recomputeOnInputChanged={componentSettings.item.data.componentInput
 											.recomputeOnInputChanged}
 										showOnDemandOnlyToggle
+										acceptSelf={component.type === 'aggridinfinitecomponent' ||
+											component.type === 'aggridinfinitecomponentee' ||
+											component.type === 'steppercomponent'}
+										overridenByComponent={component.type === 'aggridinfinitecomponent' ||
+										component.type === 'aggridinfinitecomponentee'
+											? ['offset', 'limit', 'orderBy', 'isDesc', 'search']
+											: []}
 									/>
 								</div>
 							{/if}
@@ -326,6 +334,11 @@ function isMac() {
 			/>
 		{:else if componentSettings.item.data.type === 'aggridcomponent'}
 			<TableActions id={component.id} bind:components={componentSettings.item.data.actions} />
+		{:else if componentSettings.item.data.type === 'aggridinfinitecomponent'}
+			<TableActions id={component.id} bind:components={componentSettings.item.data.actions} />
+		{:else if componentSettings.item.data.type === 'aggridinfinitecomponentee'}
+			<GridAgGridLicenseKey bind:license={componentSettings.item.data.license} />
+			<TableActions id={component.id} bind:components={componentSettings.item.data.actions} />
 		{:else if componentSettings.item.data.type === 'dbexplorercomponent'}
 			<TableActions id={component.id} bind:components={componentSettings.item.data.actions} />
 		{:else if componentSettings.item.data.type === 'tablecomponent' && Array.isArray(componentSettings.item.data.actionButtons)}
@@ -349,30 +362,8 @@ function isMac() {
 				{ccomponents[component.type].name} has no configuration
 			</div>
 		{/if}
-		{#if (`recomputeIds` in componentSettings.item.data && Array.isArray(componentSettings.item.data.recomputeIds)) || componentSettings.item.data.type === 'buttoncomponent' || componentSettings.item.data.type === 'formcomponent' || componentSettings.item.data.type === 'formbuttoncomponent' || componentSettings.item.data.type === 'checkboxcomponent'}
-			<Recompute
-				bind:recomputeIds={componentSettings.item.data.recomputeIds}
-				ownId={component.id}
-			/>
-		{/if}
-		{#if componentSettings.item.data.type === 'checkboxcomponent'}
-			<Recompute
-				title="Recompute on toggle"
-				tooltip={'Contrary to onSuccess, this will only trigger recompute when a human toggle the change, not if it set by a default value or by setValue'}
-				documentationLink={undefined}
-				bind:recomputeIds={componentSettings.item.data.onToggle}
-				ownId={component.id}
-			/>
-		{/if}
-		{#if componentSettings.item.data.type === 'resourceselectcomponent' || componentSettings.item.data.type === 'selectcomponent'}
-			<Recompute
-				title="Recompute on select"
-				tooltip={'Contrary to onSuccess, this will only trigger recompute when a human select an item, not if it set by a default value or by setValue'}
-				documentationLink={undefined}
-				bind:recomputeIds={componentSettings.item.data.onSelect}
-				ownId={component.id}
-			/>
-		{/if}
+
+		<EventHandlers bind:item={componentSettings.item} ownId={component.id} />
 
 		<div class="grow shrink" />
 
@@ -389,6 +380,27 @@ function isMac() {
 						Show
 					</Button>
 				</div>
+				<div class="flex gap-2 items-center">
+					<div class="!text-2xs">Full height</div>
+					{#if componentSettings?.item?.[12]?.fullHeight !== undefined}
+						<Toggle
+							bind:checked={componentSettings.item[12].fullHeight}
+							size="xs"
+							options={{
+								right: 'Desktop'
+							}}
+						/>
+					{/if}
+					{#if componentSettings?.item?.[3]?.fullHeight !== undefined}
+						<Toggle
+							bind:checked={componentSettings.item[3].fullHeight}
+							size="xs"
+							options={{
+								right: 'Mobile'
+							}}
+						/>
+					{/if}
+				</div>
 				<AlignmentEditor bind:component={componentSettings.item.data} />
 				{#if viewCssOptions}
 					<div transition:slide|local class="w-full">

package/package/components/apps/editor/settingsPanel/ContextVariables.svelte

@@ -0,0 +1,61 @@
+<script>import Popover from '../../../Popover.svelte';
+import Tooltip from '../../../Tooltip.svelte';
+export let type;
+const tables = [
+    'aggridcomponent',
+    'aggridcomponentee',
+    'dbexplorercomponent',
+    'aggridinfinitecomponent',
+    'aggridinfinitecomponentee'
+];
+const contextVariables = [];
+if (tables.includes(type)) {
+    contextVariables.push({
+        label: 'row',
+        description: 'The current row of a table. Row is an object with keys index and value.'
+    });
+}
+else if (type === 's3fileinputcomponent' || type === 'fileinputcomponent') {
+    contextVariables.push({
+        label: 'file',
+        description: 'The current file being processed.'
+    });
+}
+else if (type === 'containercomponent') {
+    contextVariables.push({
+        label: 'group',
+        description: 'The group name of the container.'
+    });
+}
+else if (type === 'listcomponent') {
+    contextVariables.push({
+        label: 'iter',
+        description: 'The current iteration of the list. Iter is an object with keys index and value.'
+    });
+}
+</script>
+
+{#if contextVariables.length > 0}
+	<div class="my-2">
+		<div class="text-xs font-semibold flex flex-row gap-1 items-center">
+			<div class="mb-1"> Context </div>
+			<Tooltip small light>
+				Context are variables available in any expressions of config and runnable inputs that are
+				specific to this particular component. Hover over the variables to see their descriptions.
+			</Tooltip>
+		</div>
+		<div class="flex flex-row gap-1">
+			{#each contextVariables as contextVariable}
+				<Popover>
+					<svelte:fragment slot="text">
+						{contextVariable.description}
+					</svelte:fragment>
+
+					<span class="inline-flex items-center rounded-md px-2 py-0.5 text-xs font-medium border">
+						{contextVariable.label}
+					</span>
+				</Popover>
+			{/each}
+		</div>
+	</div>
+{/if}

package/package/components/apps/editor/settingsPanel/ContextVariables.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        type: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ContextVariablesProps = typeof __propDef.props;
+export type ContextVariablesEvents = typeof __propDef.events;
+export type ContextVariablesSlots = typeof __propDef.slots;
+export default class ContextVariables extends SvelteComponent<ContextVariablesProps, ContextVariablesEvents, ContextVariablesSlots> {
+}
+export {};

package/package/components/apps/editor/settingsPanel/DecisionTreeGraphEditor.svelte

@@ -31,16 +31,18 @@ setContext('DecisionTreeEditor', { selectedNodeId });
 		<Splitpanes>
 			<Pane size={60}>
 				<div class="w-full h-full" bind:clientWidth={paneWidth} bind:clientHeight={paneHeight}>
-					<DecisionTreePreview
-						bind:nodes
-						bind:component
-						{rebuildOnChange}
-						{paneHeight}
-						{paneWidth}
-						on:render={() => {
-							renderCount++
-						}}
-					/>
+					{#if paneWidth && paneHeight}
+						<DecisionTreePreview
+							bind:nodes
+							bind:component
+							{rebuildOnChange}
+							{paneHeight}
+							{paneWidth}
+							on:render={() => {
+								renderCount++
+							}}
+						/>
+					{/if}
 				</div>
 			</Pane>
 			<Pane size={40}>

package/package/components/apps/editor/settingsPanel/DeleteComponent.svelte

@@ -1,44 +1,41 @@
 <script>import { getContext } from 'svelte';
-import { deleteGridItem } from '../appUtils';
+import { deleteGridItem, findComponentSettings } from '../appUtils';
 import { push } from '../../../../history';
-export let componentSettings = [];
 export let onDelete = undefined;
 export let noGrid = false;
 const { app, runnableComponents, selectedComponent, worldStore, focusedGrid, errorByComponent, componentControl } = getContext('AppViewerContext');
 const { history, movingcomponents } = getContext('AppEditorContext');
 export function removeGridElement() {
+    const id = $selectedComponent?.[0];
+    const componentSetting = findComponentSettings($app, id);
     push(history, $app);
-    componentSettings?.forEach((componentSetting) => {
-        const id = componentSetting?.item?.id;
-        const onDeleteComponentControl = id ? $componentControl[id]?.onDelete : undefined;
-        if (onDeleteComponentControl) {
-            onDeleteComponentControl();
+    const onDeleteComponentControl = id ? $componentControl[id]?.onDelete : undefined;
+    if (onDeleteComponentControl) {
+        onDeleteComponentControl();
+    }
+    if (onDelete) {
+        onDelete();
+    }
+    if (id) {
+        delete $worldStore.outputsById[id];
+        delete $errorByComponent[id];
+        if ($movingcomponents?.includes(id)) {
+            $movingcomponents = $movingcomponents.filter((_id) => _id !== id);
         }
-        if (onDelete) {
-            onDelete();
+    }
+    $selectedComponent = undefined;
+    $focusedGrid = undefined;
+    if (componentSetting?.item && !noGrid) {
+        let ids = deleteGridItem($app, componentSetting?.item.data, componentSetting?.parent);
+        for (const key of ids) {
+            delete $runnableComponents[key];
         }
-        let cId = componentSetting?.item.id;
-        if (cId) {
-            delete $worldStore.outputsById[cId];
-            delete $errorByComponent[cId];
-            if ($movingcomponents?.includes(cId)) {
-                $movingcomponents = $movingcomponents.filter((id) => id !== cId);
-            }
-        }
-        $selectedComponent = undefined;
-        $focusedGrid = undefined;
-        if (componentSetting?.item && !noGrid) {
-            let ids = deleteGridItem($app, componentSetting?.item.data, componentSetting?.parent);
-            for (const key of ids) {
-                delete $runnableComponents[key];
-            }
-        }
-        if (componentSetting?.item?.data?.id) {
-            delete $runnableComponents[componentSetting?.item?.data?.id];
-        }
-        $app = $app;
-        $runnableComponents = $runnableComponents;
-        onDelete?.();
-    });
+    }
+    if (componentSetting?.item?.data?.id) {
+        delete $runnableComponents[componentSetting?.item?.data?.id];
+    }
+    $app = $app;
+    $runnableComponents = $runnableComponents;
+    onDelete?.();
 }
 </script>

package/package/components/apps/editor/settingsPanel/DeleteComponent.svelte.d.ts

@@ -1,11 +1,6 @@
 import { SvelteComponent } from "svelte";
-import type { GridItem } from '../../types';
 declare const __propDef: {
     props: {
-        componentSettings?: {
-            item: GridItem;
-            parent: string;
-        }[] | any;
         onDelete?: (() => void) | undefined;
         noGrid?: boolean | undefined;
         removeGridElement?: (() => void) | undefined;