windmill-components 1.522.0 → 1.531.1

package/package/components/apps/editor/component/componentCallbacks.svelte.js

@@ -5,6 +5,7 @@ import { sendUserToast } from '../../../../toast';
 import { gridColumns } from '../../gridUtils';
 import { copyToClipboard } from '../../../../utils';
 import { get } from 'svelte/store';
+import { processSubcomponents } from '../../utils';
 // const { app, selectedComponent, focusedGrid, componentControl } =
 // 	getContext<AppViewerContext>('AppViewerContext')
 // const { history, movingcomponents, jobsDrawerOpen } =
@@ -203,7 +204,13 @@ export async function handlePaste(event, ctx) {
                 app.grid = app.grid.filter((item) => item.id !== tempGridItem?.id);
             }
             const gridItem = tempGridItem;
-            insertNewGridItem(app, (id) => ({ ...gridItem.data, id }), focusedGrid, Object.fromEntries(gridColumns.map((column) => [column, gridItem[column]])), tempGridItem.id);
+            insertNewGridItem(app, (id) => {
+                let newComponent = { ...gridItem.data, id };
+                processSubcomponents(newComponent, (c) => {
+                    c.id = c.id.replace(tempGridItem.id + '_', id + '_');
+                });
+                return newComponent;
+            }, focusedGrid, Object.fromEntries(gridColumns.map((column) => [column, gridItem[column]])), tempGridItem.id);
         }
         copyGridItemsToClipboard(tempGridItems, ctx);
         ctx.selectedComponent.set(tempGridItems.map((x) => x.id));

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

@@ -1,5 +1,5 @@
 <script lang="ts">import { stopPropagation } from 'svelte/legacy';
-import { allItems } from '../../../utils';
+import { allItems, processSubcomponents } from '../../../utils';
 import { classNames } from '../../../../../utils';
 import { ChevronDown, ChevronUp, Pointer } from 'lucide-svelte';
 import { getContext } from 'svelte';
@@ -53,56 +53,19 @@ function renameId(oldId, newId) {
         });
     }
     propagateRename(oldId, newId);
-    if (item?.data.type == 'tablecomponent') {
-        for (let c of item.data.actionButtons) {
-            let old = c.id;
-            c.id = c.id.replace(oldId + '_', newId + '_');
-            propagateRename(old, c.id);
-        }
-    }
-    if (item?.data.type == 'aggridcomponent' ||
-        item?.data.type == 'aggridcomponentee' ||
-        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(oldId + '_', newId + '_');
-            propagateRename(old, c.id);
-        }
-    }
-    if (item?.data.type === 'menucomponent') {
-        for (let c of item.data.menuItems) {
-            let old = c.id;
-            c.id = c.id.replace(oldId + '_', newId + '_');
-            propagateRename(old, c.id);
-        }
-    }
+    processSubcomponents(item.data, (c) => {
+        let old = c.id;
+        c.id = c.id.replace(oldId + '_', newId + '_');
+        propagateRename(old, c.id);
+    });
     $app = $app;
     $selectedComponent = [newId];
     delete $worldStore.outputsById[id];
 }
 function renameComponent(from, to, data) {
-    if (data.type == 'tablecomponent') {
-        for (let c of data.actionButtons) {
-            renameComponent(from, to, c);
-        }
-    }
-    if ((data.type == 'aggridcomponent' ||
-        data.type == 'aggridcomponentee' ||
-        data.type == 'dbexplorercomponent' ||
-        data.type == 'aggridinfinitecomponent' ||
-        data.type == 'aggridinfinitecomponentee') &&
-        Array.isArray(data.actions)) {
-        for (let c of data.actions) {
-            renameComponent(from, to, c);
-        }
-    }
-    if (data.type === 'menucomponent') {
-        for (let c of data.menuItems) {
-            renameComponent(from, to, c);
-        }
-    }
+    processSubcomponents(data, (c) => {
+        renameComponent(from, to, c);
+    });
     let componentInput = data.componentInput;
     if (componentInput?.type == 'connected') {
         if (componentInput.connection?.componentId === from) {

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

@@ -1,12 +1,12 @@
 <script lang="ts">import { Alert, Button, Drawer, DrawerContent } from '../../../common';
-import { Network, Plus, Trash } from 'lucide-svelte';
+import { Network, Trash } from 'lucide-svelte';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
 import { getContext, setContext } from 'svelte';
 import InputsSpecEditor from './InputsSpecEditor.svelte';
 import Section from '../../../Section.svelte';
 import { writable } from 'svelte/store';
 import DecisionTreePreview from './decisionTree/DecisionTreePreview.svelte';
-import { addNewBranch, removeNode } from './decisionTree/utils';
+import { removeNode } from './decisionTree/utils';
 import Label from '../../../Label.svelte';
 import { debounce } from '../../../../utils';
 import Badge from '../../../common/badge/Badge.svelte';
@@ -23,14 +23,14 @@ const { debounced: debouncedNodes } = debounce(() => {
 }, 300);
 let selectedNode = $derived(nodes?.find((node) => node.id == $selectedNodeId));
 setContext('DecisionTreeEditor', { selectedNodeId });
-let sortedSelectedNextNodes = $derived([...(selectedNode?.next ?? [])].sort((n1, n2) => n1.id.localeCompare(n2.id)));
 </script>
 
-<Drawer bind:this={drawer} on:close={() => {}} on:open={() => {}} size="1200px">
+<Drawer bind:this={drawer} size="1800px" on:close={() => {}} on:open={() => {}}>
 	<DrawerContent
 		title="Decision tree"
 		on:close={drawer.closeDrawer}
 		noPadding
+		forceOverflowVisible
 		tooltip="Decision tree graph editor"
 	>
 		<Splitpanes>
@@ -96,8 +96,8 @@ let sortedSelectedNextNodes = $derived([...(selectedNode?.next ?? [])].sort((n1,
 								/>
 							</Label>
 
-							{#if selectedNode.next.length > 1 && sortedSelectedNextNodes}
-								{#each sortedSelectedNextNodes as subNode, index (subNode.id)}
+							{#if selectedNode.next.length > 1}
+								{#each selectedNode.next ?? [] as subNode, index (subNode.id)}
 									{#if subNode.condition}
 										<div class="flex flex-row gap-4 items-center w-full justify-center">
 											<div class="grow relative">
@@ -111,16 +111,22 @@ let sortedSelectedNextNodes = $derived([...(selectedNode?.next ?? [])].sort((n1,
 													userInputEnabled={false}
 													shouldCapitalize={true}
 													resourceOnly={false}
-													fieldType={subNode.condition?.['fieldType']}
-													subFieldType={subNode.condition?.['subFieldType']}
-													format={subNode.condition?.['format']}
-													selectOptions={subNode.condition?.['selectOptions']}
-													tooltip={subNode.condition?.['tooltip']}
-													fileUpload={subNode.condition?.['fileUpload']}
-													placeholder={subNode.condition?.['placeholder']}
+													fieldType={'boolean'}
+													subFieldType={undefined}
+													format={undefined}
+													selectOptions={undefined}
+													tooltip={undefined}
+													fileUpload={undefined}
+													placeholder={undefined}
 													displayType={false}
 													fixedOverflowWidgets={false}
 												/>
+												{#if index == selectedNode.next.length - 1}
+													<div class="text-xs text-secondary">
+														If no branch evaluates to true, clicking next will show an error toast.
+													</div>
+												{/if}
+
 												<div class="flex flex-row gap-1 mt-2">
 													<Badge>
 														{`Next node id: ${subNode.id}`}
@@ -133,7 +139,6 @@ let sortedSelectedNextNodes = $derived([...(selectedNode?.next ?? [])].sort((n1,
 										</div>
 									{/if}
 								{/each}
-
 								<Alert type="info" class="mt-4" title="Multiple branches" size="xs">
 									The conditions above are evaluated in order. The first condition that is met will
 									be the branch that is taken.
@@ -142,44 +147,25 @@ let sortedSelectedNextNodes = $derived([...(selectedNode?.next ?? [])].sort((n1,
 							{#key selectedNode.id}
 								{#if selectedNode.allowed}
 									<InputsSpecEditor
-										key={`Can proceed to next step if:`}
+										customTitle={`Can proceed to next step if:`}
+										key={`allowed-${selectedNode.id}`}
 										bind:componentInput={selectedNode.allowed}
-										id={'allowed'}
+										id={component.id}
 										userInputEnabled={false}
 										shouldCapitalize={true}
+										fieldType={'boolean'}
+										subFieldType={undefined}
+										format={undefined}
+										selectOptions={undefined}
+										tooltip={undefined}
+										fileUpload={undefined}
+										placeholder={undefined}
 										resourceOnly={false}
-										fieldType={selectedNode.allowed?.['fieldType']}
-										subFieldType={selectedNode.allowed?.['subFieldType']}
-										format={selectedNode.allowed?.['format']}
-										selectOptions={selectedNode.allowed?.['selectOptions']}
-										tooltip={selectedNode.allowed?.['tooltip']}
-										fileUpload={selectedNode.allowed?.['fileUpload']}
-										placeholder={selectedNode.allowed?.['placeholder']}
-										customTitle={selectedNode.allowed?.['customTitle']}
 										displayType={false}
 										fixedOverflowWidgets={false}
 									/>
 								{/if}
 							{/key}
-
-							{#if selectedNode?.next.length > 0}
-								<div>
-									<Button
-										startIcon={{ icon: Plus }}
-										color="light"
-										variant="border"
-										size="xs"
-										on:click={() => {
-											if (!selectedNode) return
-
-											nodes = addNewBranch(nodes, selectedNode)
-											renderCount++
-										}}
-									>
-										Add branch
-									</Button>
-								</div>
-							{/if}
 						</Section>
 					{/if}
 				</div>

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

@@ -15,7 +15,7 @@ import { fieldTypeToTsType } from '../../utils';
 import EvalV2InputEditor from './inputEditor/EvalV2InputEditor.svelte';
 import ConnectionButton from '../../../common/button/ConnectionButton.svelte';
 import Toggle from '../../../Toggle.svelte';
-let { id, componentInput = $bindable(), key, userInputEnabled = false, shouldCapitalize = true, resourceOnly = false, tooltip = undefined, fieldType, subFieldType, format, selectOptions, fileUpload = undefined, fileUploadS3 = undefined, placeholder, customTitle = undefined, displayType = false, allowTypeChange = true, shouldFormatExpression = false, fixedOverflowWidgets = true, loading = false, acceptSelf = false, recomputeOnInputChanged = true, showOnDemandOnlyToggle = true, documentationLink = undefined, markdownTooltip = undefined, securedContext = false } = $props();
+let { id, componentInput = $bindable(), key, userInputEnabled = false, shouldCapitalize = true, resourceOnly = false, tooltip = undefined, fieldType, subFieldType, format, selectOptions, fileUpload = undefined, fileUploadS3 = undefined, placeholder, customTitle = undefined, displayType = false, allowTypeChange = true, disabled = false, shouldFormatExpression = false, fixedOverflowWidgets = true, loading = false, acceptSelf = false, recomputeOnInputChanged = true, showOnDemandOnlyToggle = true, documentationLink = undefined, markdownTooltip = undefined, securedContext = false } = $props();
 $effect.pre(() => {
     if (componentInput == undefined) {
         //@ts-ignore
@@ -196,6 +196,7 @@ function openConnection() {
 				{recomputeOnInputChanged}
 				{showOnDemandOnlyToggle}
 				{securedContext}
+				{disabled}
 			/>
 		{:else if componentInput?.type === 'upload'}
 			<UploadInputEditor bind:componentInput {fileUpload} />

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

@@ -27,6 +27,7 @@ interface Props {
     documentationLink?: string | undefined;
     markdownTooltip?: string | undefined;
     securedContext?: boolean;
+    disabled?: boolean;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/package/components/apps/editor/settingsPanel/inputEditor/EvalV2InputEditor.svelte

@@ -8,7 +8,7 @@ import { Pane, Splitpanes } from 'svelte-splitpanes';
 import Toggle from '../../../../Toggle.svelte';
 import { zIndexes } from '../../../../../zIndexes';
 import Popover from '../../../../Popover.svelte';
-let { componentInput = $bindable(), id, field, fixedOverflowWidgets = true, acceptSelf = false, recomputeOnInputChanged = true, showOnDemandOnlyToggle = false, securedContext = false } = $props();
+let { componentInput = $bindable(), id, field, fixedOverflowWidgets = true, acceptSelf = false, recomputeOnInputChanged = true, showOnDemandOnlyToggle = false, securedContext = false, disabled = false } = $props();
 const { onchange, worldStore, state: stateStore, app } = getContext('AppViewerContext');
 const { evalPreview } = getContext('AppEditorContext');
 let editor = $state();
@@ -29,7 +29,6 @@ if (componentInput && componentInput.connections == undefined) {
     componentInput.connections = [];
 }
 function inferDepsFromCode(code) {
-    console.log('inferDepsFromCode', id);
     if (componentInput) {
         inferDeps(code, $worldStore.outputsById, componentInput, app);
     }
@@ -97,6 +96,7 @@ let focus = $state(false);
 				shouldBindKey={false}
 				{extraLib}
 				autoHeight
+				{disabled}
 				{fixedOverflowWidgets}
 				on:focus={() => {
 					focus = true

package/package/components/apps/editor/settingsPanel/inputEditor/EvalV2InputEditor.svelte.d.ts

@@ -8,6 +8,7 @@ interface Props {
     recomputeOnInputChanged?: boolean;
     showOnDemandOnlyToggle?: boolean;
     securedContext?: boolean;
+    disabled?: boolean;
 }
 declare const EvalV2InputEditor: import("svelte").Component<Props, {
     setCode: (code: string) => void;

package/package/components/apps/svelte-grid/Grid.svelte

@@ -10,23 +10,22 @@ import gridHelp from './utils/helper';
 import { twMerge } from 'tailwind-merge';
 import { getContainerHeight } from './utils/container';
 import { moveItem, getItemById, specifyUndefinedColumns } from './utils/item';
-import { onMount, createEventDispatcher, getContext } from 'svelte';
+import { onMount, getContext } from 'svelte';
 import { getColumn, throttle } from './utils/other';
 import MoveResize from './MoveResize.svelte';
 import { areShadowsTheSame, findGridItemParentGrid, getDeltaXByComponent, getDeltaYByComponent, isContainer, ROW_GAP_X, ROW_GAP_Y, ROW_HEIGHT, sortGridItemsPosition, subGridIndexKey } from '../editor/appUtils';
-const dispatch = createEventDispatcher();
 const { app, worldStore } = getContext('AppViewerContext');
-let { items, rowHeight = ROW_HEIGHT, gap = [ROW_GAP_X, ROW_GAP_Y], throttleUpdate = 100, throttleResize = 100, selectedIds, allIdsInPath, containerWidth = $bindable(undefined), scroller = undefined, sensor = 20, root = false, parentWidth = undefined, disableMove = false, children } = $props();
+let { items, rowHeight = ROW_HEIGHT, gap = [ROW_GAP_X, ROW_GAP_Y], throttleUpdate = 100, throttleResize = 100, selectedIds, allIdsInPath, containerWidth = $bindable(undefined), scroller = undefined, sensor = 20, root = false, parentWidth = undefined, disableMove = false, children, onDropped, onRedraw, onResize, onMounted } = $props();
 const cols = columnConfiguration;
 let getComputedCols = $state($app.mobileViewOnSmallerScreens == false ? WIDE_GRID_COLUMNS : undefined);
 let container = $state();
 let xPerPx = $state(0);
 let yPerPx = rowHeight;
-const onResize = throttle(() => {
+const onResizeThrottled = throttle(() => {
     if (!getComputedCols)
         return;
     sortedItems = specifyUndefinedColumns(sortedItems, getComputedCols, cols);
-    dispatch('resize', {
+    onResize?.({
         cols: getComputedCols,
         xPerPx,
         yPerPx,
@@ -51,14 +50,15 @@ onMount(() => {
             xPerPx = width / getComputedCols;
             if (!containerWidth && getComputedCols) {
                 sortedItems = specifyUndefinedColumns(sortedItems, getComputedCols, cols);
-                dispatch('mount', {
+                onMounted?.({
                     cols: getComputedCols,
                     xPerPx,
-                    yPerPx // same as rowHeight
+                    yPerPx,
+                    width
                 });
             }
             else {
-                onResize();
+                onResizeThrottled();
             }
             containerWidth = width;
             mounted = true;
@@ -89,8 +89,7 @@ function smartCopy(items) {
         })
         : [];
 }
-const updateMatrix = ({ detail }) => {
-    let isPointerUp = detail.isPointerUp;
+const updateMatrix = ({ isPointerUp, id, activate }) => {
     let citems;
     if (isPointerUp) {
         if (initItems == undefined) {
@@ -108,8 +107,8 @@ const updateMatrix = ({ detail }) => {
         citems = smartCopy(initItems);
     }
     let nselectedIds = selectedIds ?? [];
-    if (detail.id && !selectedIds?.includes(detail.id)) {
-        nselectedIds = [detail.id, ...(selectedIds ?? [])];
+    if (id && !selectedIds?.includes(id)) {
+        nselectedIds = [id, ...(selectedIds ?? [])];
     }
     for (let id of nselectedIds) {
         let activeItem = getItemById(id, citems);
@@ -155,23 +154,23 @@ const updateMatrix = ({ detail }) => {
         }
     }
     for (let id of nselectedIds ?? []) {
-        if (detail.activate) {
+        if (activate) {
             moveResizes?.[id]?.inActivate();
         }
     }
     if (isPointerUp && getComputedCols) {
-        dispatch('redraw', sortGridItemsPosition(smartCopy(sortedItems), getComputedCols));
+        onRedraw?.(sortGridItemsPosition(smartCopy(sortedItems), getComputedCols));
     }
 };
 const throttleMatrix = throttle(updateMatrix, throttleResize);
 //let hiddenComponents = writable({})
 let lastDetail = $state(undefined);
-const handleRepaint = ({ detail }) => {
-    if (!detail.isPointerUp) {
-        throttleMatrix({ detail });
+const handleRepaint = ({ isPointerUp, id, activate }) => {
+    if (!isPointerUp) {
+        throttleMatrix({ isPointerUp, id, activate });
     }
     else {
-        updateMatrix({ detail });
+        updateMatrix({ isPointerUp, id, activate });
     }
     /**
     setTimeout(() => {
@@ -367,19 +366,19 @@ $effect.pre(() => {
 				{/if}
 				<MoveResize
 					{mounted}
-					on:initmove={() => handleInitMove(item.id)}
+					onInitMove={() => handleInitMove(item.id)}
 					onMove={handleMove}
 					bind:shadow={shadows[item.id]}
 					bind:this={moveResizes[item.id]}
-					on:repaint={handleRepaint}
-					on:resizeStart={() => (resizing = true)}
-					on:resizeEnd={() => (resizing = false)}
+					onRepaint={handleRepaint}
+					onResizeStart={() => (resizing = true)}
+					onResizeEnd={() => (resizing = false)}
 					onTop={Boolean(allIdsInPath?.includes(item.id))}
 					id={item.id}
 					{xPerPx}
 					{yPerPx}
 					fakeShadow={$fakeShadowStore}
-					on:dropped={(e) => {
+					onDropped={({ id, overlapped, x, y }) => {
 						$componentDraggedIdStore = undefined
 						$componentDraggedParentIdStore = undefined
 						$overlappedStore = undefined
@@ -389,8 +388,7 @@ $effect.pre(() => {
 						if ($moveMode === 'move') {
 							return
 						}
-
-						dispatch('dropped', e.detail)
+						onDropped?.({ id, overlapped, x, y })
 					}}
 					width={xPerPx == 0
 						? 0

package/package/components/apps/svelte-grid/Grid.svelte.d.ts

@@ -16,13 +16,27 @@ declare class __sveltets_Render<T> {
         parentWidth?: number | undefined;
         disableMove?: boolean;
         children?: import("svelte").Snippet<[any]>;
+        onDropped?: ((e: {
+            id: string;
+            overlapped: string | undefined;
+            x: number;
+            y: number;
+        }) => void) | undefined;
+        onRedraw?: ((grid: FilledItem<T>[]) => void) | undefined;
+        onResize?: ((e: {
+            cols: number;
+            xPerPx: number;
+            yPerPx: number;
+            width: number | undefined;
+        }) => void) | undefined;
+        onMounted?: ((e: {
+            cols: number;
+            xPerPx: number;
+            yPerPx: number;
+            width: number | undefined;
+        }) => void) | undefined;
     };
-    events(): {
-        dropped: CustomEvent<any>;
-        resize: CustomEvent<any>;
-        mount: CustomEvent<any>;
-        redraw: CustomEvent<any>;
-    };
+    events(): {};
     slots(): {};
     bindings(): "containerWidth";
     exports(): {
@@ -43,9 +57,7 @@ interface $$IsomorphicComponent {
     new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
         $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
     } & ReturnType<__sveltets_Render<T>['exports']>;
-    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {
-        $$events?: ReturnType<__sveltets_Render<T>['events']>;
-    }): ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 declare const Grid: $$IsomorphicComponent;

package/package/components/apps/svelte-grid/MoveResize.svelte

@@ -1,15 +1,14 @@
-<script lang="ts">import { createEventDispatcher, getContext, onMount } from 'svelte';
+<script lang="ts">import { getContext, onMount } from 'svelte';
 import { writable } from 'svelte/store';
 import { twMerge } from 'tailwind-merge';
 import { computePosition, findGridItemParentGrid, isContainer } from '../editor/appUtils';
 import { throttle } from './utils/other';
 import { moveMode } from '../gridUtils';
-const dispatch = createEventDispatcher();
-let { sensor, width, height, left, top, id, container, xPerPx, yPerPx, gapX, gapY, item, cols, nativeContainer, onTop, shadow = $bindable(undefined), overlapped = undefined, type = undefined, fakeShadow = undefined, disableMove = true, mounted = false, onMove, children } = $props();
+let { sensor, width, height, left, top, id, container, xPerPx, yPerPx, gapX, gapY, item, cols, nativeContainer, onTop, shadow = $bindable(undefined), overlapped = undefined, type = undefined, fakeShadow = undefined, disableMove = true, mounted = false, onMove, onDropped, onInitMove, onResizeStart, onResizeEnd, onRepaint, children } = $props();
 const ctx = getContext('AppEditorContext');
 const { mode, app } = getContext('AppViewerContext');
 const scale = ctx ? ctx.scale : writable(100);
-const divId = `component-${id}`;
+const divId = `wm-component-${id}`;
 let shadowElement = $state();
 let active = $state(false);
 let initX, initY;
@@ -34,7 +33,7 @@ onMount(() => {
                 initY = (clientY / $scale) * 100;
                 window.addEventListener('pointermove', pointermove);
                 window.addEventListener('pointerup', pointerup);
-                dispatch('initmove');
+                onInitMove?.();
                 const cordDiff = {
                     x: (moveX / $scale) * 100 - initX,
                     y: (moveY / $scale) * 100 - initY
@@ -76,11 +75,7 @@ export function inActivate() {
     }
 }
 let repaint = (activate, isPointerUp) => {
-    dispatch('repaint', {
-        id,
-        isPointerUp,
-        activate
-    });
+    onRepaint?.({ id, isPointerUp, activate });
 };
 // Autoscroll
 let _scrollTop = 0;
@@ -123,7 +118,7 @@ const pointerdown = ({ clientX, clientY }) => {
         ctx.componentActive.set(true);
         initX = (clientX / $scale) * 100;
         initY = (clientY / $scale) * 100;
-        dispatch('initmove');
+        onInitMove?.();
     };
     window.addEventListener('pointermove', pointermove);
     window.addEventListener('pointerup', pointerup);
@@ -235,7 +230,7 @@ function computeShadow(clientX, clientY) {
     const intersectingElement = elementsAtPoint.find((el) => el.id !== divId &&
         el.classList.contains('svlt-grid-item') &&
         el.getAttribute('data-iscontainer') === 'true');
-    const newOverlapped = intersectingElement ? intersectingElement?.id.split('-')[1] : undefined;
+    const newOverlapped = intersectingElement ? intersectingElement?.id.split('-')[2] : undefined;
     const container = newOverlapped
         ? intersectingElement?.querySelector('.svlt-grid-container')
         : document.getElementById('root-grid');
@@ -272,6 +267,9 @@ const pointerup = (e) => {
     else {
         dragClosure = undefined;
     }
+    if (!fakeShadow) {
+        return;
+    }
     if (!moving) {
         return;
     }
@@ -279,7 +277,7 @@ const pointerup = (e) => {
     if (overlapped && (overlapped === parent || parent?.startsWith(overlapped))) {
         return;
     }
-    dispatch('dropped', {
+    onDropped?.({
         id,
         overlapped,
         x: fakeShadow?.x,
@@ -305,7 +303,7 @@ const resizePointerDown = (e, o) => {
     scrollElement = getScroller(container);
     window.addEventListener('pointermove', resizePointerMove);
     window.addEventListener('pointerup', resizePointerUp);
-    dispatch('resizeStart');
+    onResizeStart?.();
 };
 const resizePointerMove = ({ pageX, pageY }) => {
     if (shadow) {
@@ -335,7 +333,7 @@ const resizePointerUp = (e) => {
     repaint(true, true);
     window.removeEventListener('pointermove', resizePointerMove);
     window.removeEventListener('pointerup', resizePointerUp);
-    dispatch('resizeEnd');
+    onResizeEnd?.();
 };
 function shouldDisplayShadow(moveMode, overlapped) {
     if (moveMode === 'move') {

package/package/components/apps/svelte-grid/MoveResize.svelte.d.ts

@@ -34,35 +34,28 @@ interface Props {
         clientY: number;
         intersectingElement?: string | undefined;
         shadow?: GridShadow | undefined;
-        overlapped?: string | undefined;
+        overlapped?: string;
+    }) => void;
+    onDropped?: (e: {
+        id: string;
+        overlapped: string | undefined;
+        x: number;
+        y: number;
+    }) => void;
+    onInitMove?: () => void;
+    onResizeStart?: () => void;
+    onResizeEnd?: () => void;
+    onRepaint?: (e: {
+        id: string;
+        isPointerUp: boolean;
+        activate: boolean;
     }) => void;
     children?: import('svelte').Snippet;
 }
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const MoveResize: $$__sveltets_2_IsomorphicComponent<Props, {
-    initmove: CustomEvent<any>;
-    repaint: CustomEvent<any>;
-    dropped: CustomEvent<any>;
-    resizeStart: CustomEvent<any>;
-    resizeEnd: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {
+declare const MoveResize: import("svelte").Component<Props, {
     inActivate: () => void;
     initmove: () => void;
     updateMove: (newCoordDiff: any, clientY: any) => void;
 }, "shadow">;
-type MoveResize = InstanceType<typeof MoveResize>;
+type MoveResize = ReturnType<typeof MoveResize>;
 export default MoveResize;

package/package/components/apps/utils.d.ts

@@ -1,9 +1,11 @@
 import type { Schema } from '../../common';
+import { type AppComponent } from './editor/component';
 import type { AppInput, InputType, ResultAppInput, StaticAppInput } from './inputType';
 import type { Output } from './rx';
 import type { App, ComponentCssProperty, GridItem, HorizontalAlignment, VerticalAlignment } from './types';
 export declare const BG_PREFIX = "bg_";
 export declare function migrateApp(app: App): void;
+export declare function processSubcomponents(data: AppComponent, fn: (data: AppComponent) => void): void;
 export declare function allItems(grid: GridItem[], subgrids: Record<string, GridItem[]> | undefined): GridItem[];
 export declare function schemaToInputsSpec(schema: Schema, defaultUserInput: boolean): Record<string, StaticAppInput>;
 export declare function accessPropertyByPath<T>(object: T, path: string): any;

package/package/components/apps/utils.js

@@ -23,6 +23,28 @@ export function migrateApp(app) {
         });
     });
 }
+export function processSubcomponents(data, fn) {
+    if (data.type == 'tablecomponent' && Array.isArray(data.actionButtons)) {
+        for (let c of data.actionButtons) {
+            fn(c);
+        }
+    }
+    if ((data.type == 'aggridcomponent' ||
+        data.type == 'aggridcomponentee' ||
+        data.type == 'dbexplorercomponent' ||
+        data.type == 'aggridinfinitecomponent' ||
+        data.type == 'aggridinfinitecomponentee') &&
+        Array.isArray(data.actions)) {
+        for (let c of data.actions ?? []) {
+            fn(c);
+        }
+    }
+    if (data.type === 'menucomponent' && Array.isArray(data.menuItems)) {
+        for (let c of data.menuItems) {
+            fn(c);
+        }
+    }
+}
 export function allItems(grid, subgrids) {
     if (subgrids == undefined) {
         return grid ?? [];