windmill-components 1.448.50 → 1.472.2

package/package/components/apps/editor/RecomputeAllButton.svelte

@@ -1,8 +1,6 @@
 <script>import { Loader2, RefreshCw, TimerReset } from 'lucide-svelte';
 import Button from '../../common/button/Button.svelte';
-import ButtonDropdown from '../../common/button/ButtonDropdown.svelte';
-import { MenuItem } from '@rgossiaux/svelte-headlessui';
-import { classNames } from '../../../utils';
+import Dropdown from '../../DropdownV2.svelte';
 import { twMerge } from 'tailwind-merge';
 import Badge from '../../common/badge/Badge.svelte';
 import { createEventDispatcher } from 'svelte';
@@ -50,53 +48,22 @@ const items = [
 			</div>
 		</Button>
 
-		<ButtonDropdown hasPadding={false}>
-			<slot:fragment slot="buttonReplacement">
-				<div class="flex flex-row gap-2 text-xs hover:bg-surface-hover px-2 items-center h-7">
+		<Dropdown {items} class="w-fit h-auto">
+			<svelte:fragment slot="buttonReplacement">
+				<div
+					class="flex flex-row gap-2 text-xs bg-surface hover:bg-surface-hover px-2 items-center h-7"
+				>
 					{#if interval}
 						<Badge color="blue" small>
 							{interval ? `Every ${interval / 1000}s` : 'Once'}
 						</Badge>
 					{/if}
-
 					<div class="flex justify-center items-center">
 						<TimerReset size={14} />
 					</div>
 				</div>
-			</slot:fragment>
-			<svelte:fragment slot="label">
-				<span
-					class={twMerge('text-xs min-w-[2rem] ', interval ? 'text-blue-500' : 'text-tertiary')}
-				>
-					{interval ? `${interval / 1000}s` : 'Once'}
-				</span>
-			</svelte:fragment>
-			<svelte:fragment slot="items">
-				{#each items ?? [] as { }, index}
-					<MenuItem
-						on:click={() => {
-							if (index === 0) {
-								dispatch('setInter', undefined)
-							} else {
-								dispatch('setInter', index * 5000)
-							}
-						}}
-					>
-						<div
-							class={classNames(
-								'!text-tertiary text-left px-4 py-2 gap-2 cursor-pointer hover:bg-surface-hover !text-xs font-semibold'
-							)}
-						>
-							{#if index === 0}
-								Once
-							{:else}
-								{`Every ${index * 5} seconds`}
-							{/if}
-						</div>
-					</MenuItem>
-				{/each}
 			</svelte:fragment>
-		</ButtonDropdown>
+		</Dropdown>
 	</div>
 	{#if interval}
 		<div class="w-full bg-gray-200 rounded-full h-0.5 dark:bg-gray-700">

package/package/components/apps/editor/RecomputeAllComponents.svelte

@@ -1,5 +1,5 @@
 <script>import { getContext, onMount } from 'svelte';
-import { allItems } from '../utils';
+import { allItems, BG_PREFIX } from '../utils';
 import RecomputeAllButton from './RecomputeAllButton.svelte';
 const { runnableComponents, app, initialized, recomputeAllContext } = getContext('AppViewerContext');
 const appEditorContext = getContext('AppEditorContext');
@@ -8,14 +8,44 @@ let shouldRefresh = false;
 let firstLoad = false;
 let progressTimer = undefined;
 $: !firstLoad &&
-    $initialized.initializedComponents?.length ==
-        allItems($app.grid, $app.subgrids).length + ($app.hiddenInlineScripts?.length ?? 0) &&
-    refresh();
+    canInitializeAll($initialized?.initializedComponents, $app) &&
+    refresh('all initialized');
+// $: console.log('canInitializeAll', firstLoad, $initialized?.initializedComponents)
+function canInitializeAll(initialized, app) {
+    // console.log(
+    // 	'canInitializeAll',
+    // 	JSON.stringify(
+    // 		{
+    // 			initialized: initialized,
+    // 			items: allItems(app.grid, app.subgrids).map((x) => x.id),
+    // 			// missing1: allItems(app.grid, app.subgrids).filter((x) => !initialized?.includes(x.id)),
+    // 			missing2: initialized?.filter(
+    // 				(x) =>
+    // 					!allItems(app.grid, app.subgrids)
+    // 						.map((x) => x.id)
+    // 						.includes(x)
+    // 			)
+    // 		},
+    // 		null,
+    // 		2
+    // 	),
+    // 	initialized?.length ==
+    // 		allItems(app.grid, app.subgrids).length + (app.hiddenInlineScripts?.length ?? 0)
+    // )
+    if (app.lazyInitRequire == undefined) {
+        return (initialized?.length ==
+            allItems(app.grid, app.subgrids).length + (app.hiddenInlineScripts?.length ?? 0));
+    }
+    else {
+        return (app.hiddenInlineScripts?.every((x, i) => initialized?.includes(BG_PREFIX + i)) &&
+            app.lazyInitRequire?.every((x) => initialized?.includes(x)));
+    }
+}
 $: $recomputeAllContext.componentNumber =
     Object.values($runnableComponents).filter((x) => x.autoRefresh).length ?? 0;
 onMount(() => {
     if (appEditorContext) {
-        appEditorContext.refreshComponents.set(refresh);
+        appEditorContext.refreshComponents.set(() => refresh('onClick global'));
     }
     document.addEventListener('visibilitychange', visChange);
     // setTimeout(() => refresh(), 1000)
@@ -27,7 +57,7 @@ onMount(() => {
             clearInterval(progressTimer);
     };
 });
-function onClick(stopAfterClear = false) {
+function onClick(stopAfterClear, source) {
     if (timeout) {
         clearInterval(timeout);
         timeout = undefined;
@@ -39,10 +69,12 @@ function onClick(stopAfterClear = false) {
         if (stopAfterClear)
             return;
     }
-    refresh();
+    if (firstLoad) {
+        refresh('onClick ' + source);
+    }
     if ($recomputeAllContext.interval) {
         shouldRefresh = true;
-        timeout = setInterval(refresh, $recomputeAllContext.interval);
+        timeout = setInterval(() => refresh('onClick interval'), $recomputeAllContext.interval);
         startProgress();
     }
 }
@@ -60,21 +92,22 @@ function startProgress() {
         }
     }, 100);
 }
-function setInter(inter) {
+function setInter(inter, source) {
     $recomputeAllContext.interval = inter;
-    onClick(!inter);
+    onClick(!inter, 'setInter ' + source);
 }
 let refreshing = [];
-function refresh() {
+function refresh(reason) {
     let isFirstLoad = false;
-    if (!firstLoad) {
+    if (!firstLoad && reason == 'all initialized') {
+        console.log('refresh all first load', reason);
         $initialized.initialized = true;
         firstLoad = true;
         isFirstLoad = true;
     }
     $recomputeAllContext.loading = true;
     $recomputeAllContext.progress = 100;
-    console.log('refresh all');
+    console.log('refresh all', reason);
     refreshing = [];
     const promises = Object.keys($runnableComponents)
         .flatMap((id) => {
@@ -115,27 +148,27 @@ function visChange() {
         }
     }
     else if (shouldRefresh) {
-        timeout = setInterval(refresh, $recomputeAllContext.interval);
+        timeout = setInterval(() => refresh('onClick interval'), $recomputeAllContext.interval);
         startProgress();
     }
 }
 onMount(() => {
     $recomputeAllContext = {
-        onClick,
-        setInter
+        onClick: () => onClick(false, 'allContext'),
+        setInter: (n) => setInter(n, 'all context')
     };
 });
 </script>
 
 <RecomputeAllButton
-	on:click={() => onClick()}
+	on:click={() => onClick(false, 'button')}
 	interval={$recomputeAllContext.interval}
 	{refreshing}
 	componentNumber={$recomputeAllContext.componentNumber ?? 0}
 	loading={$recomputeAllContext.loading}
 	progress={$recomputeAllContext.progress}
 	on:setInter={(e) => {
-		setInter(e.detail)
-		onClick(false)
+		setInter(e.detail, 'button setInter')
+		onClick(false, 'button setInter')
 	}}
 />

package/package/components/apps/editor/RecomputeAllWrapper.svelte

@@ -1,20 +1,11 @@
 <script>import { getContext } from 'svelte';
-import { dfs } from './appUtils';
-import { deepEqual } from 'fast-equals';
 import { Loader2 } from 'lucide-svelte';
 import Popover from '../../Popover.svelte';
 import { twMerge } from 'tailwind-merge';
 import RecomputeAllButton from './RecomputeAllButton.svelte';
 export let containerClass = undefined;
 export let containerStyle = undefined;
-const { selectedComponent, app, connectingInput, allIdsInPath, bgRuns, recomputeAllContext } = getContext('AppViewerContext');
-let previousSelectedIds = undefined;
-$: if (!deepEqual(previousSelectedIds, $selectedComponent)) {
-    previousSelectedIds = $selectedComponent;
-    $allIdsInPath = ($selectedComponent ?? [])
-        .flatMap((id) => dfs($app.grid, id, $app.subgrids ?? {}))
-        .filter((x) => x != undefined);
-}
+const { connectingInput, bgRuns, recomputeAllContext } = getContext('AppViewerContext');
 </script>
 
 <div

package/package/components/apps/editor/SubGridEditor.svelte

@@ -2,7 +2,7 @@
 import { classNames } from '../../../utils';
 import { createEventDispatcher, getContext, onDestroy } from 'svelte';
 import { twMerge } from 'tailwind-merge';
-import { columnConfiguration, gridColumns, isFixed, toggleFixed } from '../gridUtils';
+import { gridColumns, isFixed, toggleFixed } from '../gridUtils';
 import Grid from '../svelte-grid/Grid.svelte';
 import { expandGriditem, findGridItem, findGridItemParentGrid, insertNewGridItem, isContainer, maxHeight, selectId, subGridIndexKey } from './appUtils';
 import Component from './component/Component.svelte';
@@ -25,6 +25,8 @@ const { app, connectingInput, selectedComponent, focusedGrid, mode, parentWidth,
 const editorContext = getContext('AppEditorContext');
 let isActive = false;
 let sber = editorContext?.componentActive?.subscribe((x) => (isActive = x));
+let everVisible = visible;
+$: visible && !everVisible && (everVisible = true);
 onDestroy(() => {
     sber?.();
 });
@@ -96,160 +98,160 @@ export function moveToRoot(componentId, position) {
 }
 </script>
 
-<div
-	class="translate-x-0 translate-y-0 w-full subgrid {visible
-		? 'visible'
-		: 'invisible h-0 overflow-hidden'}"
-	bind:this={container}
-	on:pointerdown={onpointerdown}
->
+{#if everVisible}
 	<div
-		class={twMerge(
-			$allIdsInPath.includes(id) && $mode == 'dnd' ? 'overflow-visible' : 'overflow-auto',
-			noYPadding ? '' : 'py-2',
-			classes ?? '',
-			noPadding ? 'px-0' : 'px-2'
-		)}
-		style="{containerHeight ? `height: ${containerHeight - 2}px;` : ''} {style ?? ''}"
+		class="translate-x-0 translate-y-0 w-full subgrid {visible
+			? 'visible'
+			: 'invisible h-0 overflow-hidden'}"
+		bind:this={container}
+		on:pointerdown={onpointerdown}
 	>
-		{#if $mode !== 'preview'}
-			<div
-				class={highlight
-					? `animate-border border-dashed border-2 min-h-full ${
-							isActive && !$selectedComponent?.includes(id)
-								? 'border-orange-600'
-								: 'dark:border-gray-600 border-gray-400'
-					  }`
-					: ''}
-			>
-				<Grid
-					allIdsInPath={$allIdsInPath}
-					items={$app.subgrids?.[subGridId] ?? []}
-					on:redraw={(e) => {
-						push(editorContext?.history, $app)
-						if ($app.subgrids) {
-							$app.subgrids[subGridId] = e.detail
-						}
-					}}
-					selectedIds={$selectedComponent}
-					let:dataItem
-					let:hidden
-					let:overlapped
-					let:moveMode
-					let:componentDraggedId
-					cols={columnConfiguration}
-					scroller={container}
-					parentWidth={$parentWidth - 17}
-					{containerWidth}
-					on:dropped={(e) => {
-						const { id, overlapped, x, y } = e.detail
-
-						if (!overlapped) {
-							moveToRoot(id, { x, y })
-						} else {
-							const overlappedComponent = findGridItem($app, overlapped)
-
-							if (overlappedComponent && !isContainer(overlappedComponent.data.type)) {
-								return
+		<div
+			class={twMerge(
+				$allIdsInPath.includes(id) && $mode == 'dnd' ? 'overflow-visible' : 'overflow-auto',
+				noYPadding ? '' : 'py-2',
+				classes ?? '',
+				noPadding ? 'px-0' : 'px-2'
+			)}
+			style="{containerHeight ? `height: ${containerHeight - 2}px;` : ''} {style ?? ''}"
+		>
+			{#if $mode !== 'preview'}
+				<div
+					class={highlight
+						? `outline !outline-dashed outline-2 min-h-full ${
+								isActive && !$selectedComponent?.includes(id)
+									? 'outline-orange-600'
+									: 'outline-gray-400 dark:outline-gray-600'
+						  }`
+						: ''}
+				>
+					<Grid
+						allIdsInPath={$allIdsInPath}
+						items={$app.subgrids?.[subGridId] ?? []}
+						on:redraw={(e) => {
+							push(editorContext?.history, $app)
+							if ($app.subgrids) {
+								$app.subgrids[subGridId] = e.detail
 							}
+						}}
+						selectedIds={$selectedComponent}
+						let:dataItem
+						let:overlapped
+						let:moveMode
+						let:componentDraggedId
+						scroller={container}
+						parentWidth={$parentWidth - 17}
+						{containerWidth}
+						on:dropped={(e) => {
+							const { id, overlapped, x, y } = e.detail
+
 							if (!overlapped) {
-								return
-							}
+								moveToRoot(id, { x, y })
+							} else {
+								const overlappedComponent = findGridItem($app, overlapped)
 
-							if (id === overlapped) {
-								return
-							}
+								if (overlappedComponent && !isContainer(overlappedComponent.data.type)) {
+									return
+								}
+								if (!overlapped) {
+									return
+								}
 
-							moveComponentBetweenSubgrids(
-								id,
-								overlapped,
-								subGridIndexKey(overlappedComponent?.data?.type, overlapped, $worldStore),
-								{ x, y }
-							)
-						}
-					}}
-					disableMove={!!$connectingInput.opened}
-				>
-					<ComponentWrapper
-						id={dataItem.id}
-						type={dataItem.data.type}
-						class={classNames(
-							'h-full w-full center-center',
-							$selectedComponent?.includes(dataItem.id) ? 'active-grid-item' : '',
-							'top-0'
-						)}
+								if (id === overlapped) {
+									return
+								}
+
+								moveComponentBetweenSubgrids(
+									id,
+									overlapped,
+									subGridIndexKey(overlappedComponent?.data?.type, overlapped, $worldStore),
+									{ x, y }
+								)
+							}
+						}}
+						disableMove={!!$connectingInput.opened}
 					>
-						<GridEditorMenu id={dataItem.id}>
-							<Component
-								{hidden}
-								{overlapped}
-								fullHeight={dataItem?.[$breakpoint === 'sm' ? 3 : 12]?.fullHeight}
-								render={visible}
-								component={dataItem.data}
-								selected={Boolean($selectedComponent?.includes(dataItem.id))}
-								locked={isFixed(dataItem)}
-								on:lock={() => lock(dataItem)}
-								on:expand={() => {
-									const parentGridItem = findGridItem($app, id)
+						<ComponentWrapper
+							id={dataItem.id}
+							type={dataItem.data.type}
+							class={classNames(
+								'h-full w-full center-center',
+								$selectedComponent?.includes(dataItem.id) ? 'active-grid-item' : '',
+								'top-0'
+							)}
+						>
+							<GridEditorMenu id={dataItem.id}>
+								<Component
+									{overlapped}
+									fullHeight={dataItem?.[$breakpoint === 'sm' ? 3 : 12]?.fullHeight}
+									render={visible}
+									component={dataItem.data}
+									selected={Boolean($selectedComponent?.includes(dataItem.id))}
+									locked={isFixed(dataItem)}
+									on:lock={() => lock(dataItem)}
+									on:expand={() => {
+										const parentGridItem = findGridItem($app, id)
 
-									if (!parentGridItem) {
-										return
-									}
+										if (!parentGridItem) {
+											return
+										}
 
-									$selectedComponent = [dataItem.id]
-									push(editorContext?.history, $app)
+										$selectedComponent = [dataItem.id]
+										push(editorContext?.history, $app)
 
-									expandGriditem(
-										$app.subgrids?.[subGridId] ?? [],
-										dataItem.id,
-										$breakpoint,
-										parentGridItem
-									)
-									$app = $app
-								}}
-								on:fillHeight={() => {
-									const gridItem = findGridItem($app, dataItem.id)
-									const b = $breakpoint === 'sm' ? 3 : 12
+										expandGriditem(
+											$app.subgrids?.[subGridId] ?? [],
+											dataItem.id,
+											$breakpoint,
+											parentGridItem
+										)
+										$app = $app
+									}}
+									on:fillHeight={() => {
+										const gridItem = findGridItem($app, dataItem.id)
+										const b = $breakpoint === 'sm' ? 3 : 12
 
-									if (gridItem?.[b]) {
-										gridItem[b].fullHeight = !gridItem[b].fullHeight
-									}
-									$app = $app
-								}}
-								{moveMode}
-								{componentDraggedId}
-							/>
-						</GridEditorMenu>
-					</ComponentWrapper>
-				</Grid>
-			</div>
-		{:else}
-			<GridViewer
-				allIdsInPath={$allIdsInPath}
-				items={$app.subgrids?.[subGridId] ?? []}
-				let:dataItem
-				let:hidden
-				cols={columnConfiguration}
-				breakpoint={$breakpoint}
-				parentWidth={$parentWidth - 17}
-				{containerWidth}
-				{maxRow}
-			>
-				<!-- svelte-ignore a11y-click-events-have-key-events -->
-				<div
-					on:pointerdown|stopPropagation={(e) => selectComponent(e, dataItem.id)}
-					class={classNames('h-full w-full center-center', 'top-0')}
-				>
-					<Component
-						fullHeight={dataItem?.[$breakpoint === 'sm' ? 3 : 12]?.fullHeight}
-						render={visible}
-						component={dataItem.data}
-						selected={Boolean($selectedComponent?.includes(dataItem.id))}
-						locked={isFixed(dataItem)}
-						{hidden}
-					/>
+										if (gridItem?.[b]) {
+											gridItem[b].fullHeight = !gridItem[b].fullHeight
+										}
+										$app = $app
+									}}
+									{moveMode}
+									{componentDraggedId}
+								/>
+							</GridEditorMenu>
+						</ComponentWrapper>
+					</Grid>
 				</div>
-			</GridViewer>
-		{/if}
+			{:else}
+				<GridViewer
+					allIdsInPath={$allIdsInPath}
+					items={$app.subgrids?.[subGridId] ?? []}
+					let:dataItem
+					breakpoint={$breakpoint}
+					parentWidth={$parentWidth - 17}
+					{containerWidth}
+					{maxRow}
+				>
+					<!-- svelte-ignore a11y-click-events-have-key-events -->
+					<div
+						on:pointerdown|stopPropagation={(e) => selectComponent(e, dataItem.id)}
+						class={classNames('h-full w-full center-center', 'top-0')}
+					>
+						<Component
+							fullHeight={dataItem?.[$breakpoint === 'sm' ? 3 : 12]?.fullHeight}
+							render={visible}
+							component={dataItem.data}
+							selected={Boolean($selectedComponent?.includes(dataItem.id))}
+							locked={isFixed(dataItem)}
+						/>
+					</div>
+				</GridViewer>
+			{/if}
+		</div>
 	</div>
-</div>
+{:else if $app.lazyInitRequire == undefined}
+	{#each $app?.subgrids?.[subGridId] ?? [] as item}
+		<Component selected={false} fullHeight={false} render={false} component={item.data} />
+	{/each}
+{/if}

package/package/components/apps/editor/TabsDebug.svelte

@@ -1,6 +1,5 @@
-<script>import ButtonDropdown from '../../common/button/ButtonDropdown.svelte';
+<script>import Dropdown from '../../DropdownV2.svelte';
 import { classNames } from '../../../utils';
-import { MenuItem } from '@rgossiaux/svelte-headlessui';
 import { createEventDispatcher, getContext } from 'svelte';
 import { Bug } from 'lucide-svelte';
 export let tabs = [];
@@ -11,22 +10,48 @@ const { componentControl } = getContext('AppViewerContext');
 const dispatch = createEventDispatcher();
 export let isManuallySelected = false;
 let selected = null;
+async function getItems() {
+    return [
+        ...tabs.map((_, index) => ({
+            displayName: index === tabs.length - 1
+                ? isConditionalDebugMode
+                    ? `Debug default condition`
+                    : `Debug tab ${index + 1}`
+                : `Debug ${isConditionalDebugMode ? 'condition' : 'tab'} ${index + 1}`,
+            action: () => {
+                $componentControl?.[id]?.setTab?.(index);
+                selected = index;
+                isManuallySelected = true;
+            },
+            type: 'action'
+        })),
+        {
+            displayName: 'Reset debug mode',
+            action: () => {
+                $componentControl?.[id]?.setTab?.(-1);
+                selected = null;
+                isManuallySelected = false;
+            },
+            type: 'delete'
+        }
+    ];
+}
 </script>
 
-<button
-	title={isConditionalDebugMode ? 'Debug conditions' : 'Debug tabs'}
-	class={classNames(
-		'text-2xs font-bold w-fit h-full cursor-pointer rounded',
-		isManuallySelected
-			? 'hover:bg-red-200 hover:text-red-800'
-			: 'text-blue-600 hover:bg-blue-300 hover:text-blue-800'
-	)}
-	on:click={() => dispatch('triggerInlineEditor')}
-	on:pointerdown|stopPropagation
->
-	<ButtonDropdown hasPadding={false}>
+{#key tabs}
+	<Dropdown items={getItems} class="w-fit h-auto" usePointerDownOutside>
 		<svelte:fragment slot="buttonReplacement">
-			<div class="px-1">
+			<button
+				title={isConditionalDebugMode ? 'Debug conditions' : 'Debug tabs'}
+				class={classNames(
+					'px-1 text-2xs font-bold w-fit h-full cursor-pointer rounded',
+					isManuallySelected
+						? 'hover:bg-red-200 hover:text-red-800'
+						: 'text-blue-600 hover:bg-blue-300 hover:text-blue-800'
+				)}
+				on:click={() => dispatch('triggerInlineEditor')}
+				on:pointerdown|stopPropagation
+			>
 				{#if isManuallySelected}
 					<div class="whitespace-nowrap">
 						{#if selected === tabs.length - 1}
@@ -45,45 +70,7 @@ let selected = null;
 				{:else if isSmall}<Bug size={11} />{:else}
 					{isConditionalDebugMode ? `Debug conditions` : `Debug tabs`}
 				{/if}
-			</div>
-		</svelte:fragment>
-		<svelte:fragment slot="items">
-			{#each tabs ?? [] as { }, index}
-				<MenuItem
-					on:click={() => {
-						$componentControl?.[id]?.setTab?.(index)
-						selected = index
-						isManuallySelected = true
-					}}
-				>
-					<div
-						class={classNames(
-							'!text-tertiary text-left px-4 py-2 gap-2 cursor-pointer hover:bg-surface-hover !text-xs font-semibold'
-						)}
-					>
-						{#if index === tabs.length - 1}
-							{isConditionalDebugMode ? `Debug default condition` : `Debug tab ${index + 1}`}
-						{:else}
-							{`Debug ${isConditionalDebugMode ? 'condition' : 'tab'} ${index + 1}`}
-						{/if}
-					</div>
-				</MenuItem>
-			{/each}
-			<MenuItem
-				on:click={() => {
-					$componentControl?.[id]?.setTab?.(-1)
-					selected = null
-					isManuallySelected = false
-				}}
-			>
-				<div
-					class={classNames(
-						'!text-red-600 dark:!text-red-400 text-left px-4 py-2 gap-2 cursor-pointer hover:bg-surface-hover !text-xs font-semibold'
-					)}
-				>
-					{`Reset debug mode`}
-				</div>
-			</MenuItem>
+			</button>
 		</svelte:fragment>
-	</ButtonDropdown>
-</button>
+	</Dropdown>
+{/key}