windmill-components 1.70.0 → 1.77.0

package/components/apps/editor/AppEditor.svelte

@@ -13,16 +13,19 @@ import ComponentList from './componentsPanel/ComponentList.svelte';
 import Icon from 'svelte-awesome';
 import { faCode, faPlus, faSliders } from '@fortawesome/free-solid-svg-icons';
 import ContextPanel from './contextPanel/ContextPanel.svelte';
-import { encodeState } from '../../../utils';
+import { classNames, encodeState } from '../../../utils';
 import AppPreview from './AppPreview.svelte';
 import { userStore, workspaceStore } from '../../../stores';
 import InlineScriptsPanel from './inlineScriptsPanel/InlineScriptsPanel.svelte';
 import SettingsPanel from './SettingsPanel.svelte';
 import { fly } from 'svelte/transition';
-import UnsavedConfirmationModal from '../../common/confirmationModal/UnsavedConfirmationModal.svelte';
+import { VariableService } from '../../../gen';
 import { page } from '$app/stores';
 import CssSettings from './componentsPanel/CssSettings.svelte';
-import { findGridItem } from './appUtils';
+import { initHistory } from '../../../history';
+import ComponentNavigation from './component/ComponentNavigation.svelte';
+import ItemPicker from '../../ItemPicker.svelte';
+import VariableEditor from '../../VariableEditor.svelte';
 export let app;
 export let path;
 export let initialMode = 'dnd';
@@ -41,14 +44,15 @@ const connectingInput = writable({
     input: undefined,
     hoveredComponent: undefined
 });
+const history = initHistory(app);
 const runnableComponents = writable({});
 const errorByComponent = writable({});
 const focusedGrid = writable(undefined);
-setContext('AppEditorContext', {
+const pickVariableCallback = writable(undefined);
+setContext('AppViewerContext', {
     worldStore,
     staticOutputs,
     app: appStore,
-    lazyGrid: writable([]),
     summary: summaryStore,
     selectedComponent,
     mode,
@@ -64,7 +68,15 @@ setContext('AppEditorContext', {
     noBackend: false,
     errorByComponent,
     openDebugRun: writable(undefined),
-    focusedGrid
+    focusedGrid,
+    stateId: writable(0),
+    parentWidth: writable(0),
+    state: writable({}),
+    componentControl: writable({})
+});
+setContext('AppEditorContext', {
+    history,
+    pickVariableCallback
 });
 let timeout = undefined;
 $: $appStore && saveDraft();
@@ -83,11 +95,16 @@ let mounted = false;
 onMount(() => {
     mounted = true;
 });
-$: context = {
+let context = {
     email: $userStore?.email,
     username: $userStore?.username,
-    query: Object.fromEntries($page.url.searchParams.entries())
+    query: Object.fromEntries($page.url.searchParams.entries()),
+    hash: $page.url.hash
 };
+function hashchange(e) {
+    context.hash = e.newURL.split('#')[1];
+    context = context;
+}
 $: mounted && ($worldStore = buildWorld($staticOutputs, $worldStore, context));
 $: previewing = $mode === 'preview';
 $: width = $breakpoint === 'sm' ? 'min-w-[400px] max-w-[656px]' : 'min-w-[710px] w-full';
@@ -98,145 +115,197 @@ $: if ($selectedComponent) {
 else {
     selectedTab = 'insert';
 }
+let itemPicker = undefined;
+$: if ($pickVariableCallback) {
+    itemPicker?.openDrawer();
+}
+let variableEditor = undefined;
 </script>
 
+<svelte:window on:hashchange={hashchange} />
+
 {#if $connectingInput.opened}
 	<div
-		class="absolute  w-full h-screen bg-black border-2 bg-opacity-25 z-20 flex justify-center items-center"
+		class="absolute w-full h-screen bg-black border-2 bg-opacity-25 z-20 flex justify-center items-center"
 	/>
 {/if}
 {#if !$userStore?.operator}
-	<UnsavedConfirmationModal />
-	{#if initialMode !== 'preview'}
-		<AppEditorHeader {policy} {fromHub} />
-	{/if}
+	{#if $appStore}
+		{#if initialMode !== 'preview'}
+			<AppEditorHeader {policy} {fromHub} />
+		{/if}
 
-	{#if previewing}
-		<SplitPanesWrapper>
-			<div
-				class={twMerge('bg-gray-100 h-full w-full', $appStore.css?.['app']?.['viewer']?.class)}
-				style={$appStore.css?.['app']?.['viewer']?.style}
-			>
-				<AppPreview
-					workspace={$workspaceStore ?? ''}
-					summary={$summaryStore}
-					app={$appStore}
-					appPath={path}
-					{breakpoint}
-					{policy}
-					isEditor
-					{context}
-					noBackend={false}
-				/>
-			</div>
-		</SplitPanesWrapper>
-	{:else}
-		<SplitPanesWrapper>
-			<Splitpanes class="max-w-full overflow-hidden">
-				<Pane size={$connectingInput?.opened ? 40 : 15} minSize={5} maxSize={33}>
-					<ContextPanel />
-				</Pane>
-				<Pane size={64}>
-					<SplitPanesWrapper>
-						<Splitpanes horizontal>
-							<Pane size={$connectingInput?.opened ? 100 : 70}>
-								<div
-									class={twMerge(
-										'bg-gray-100 h-full w-full',
-										$appStore.css?.['app']?.['viewer']?.class
-									)}
-									style={$appStore.css?.['app']?.['viewer']?.style}
-								>
+		{#if previewing}
+			<SplitPanesWrapper>
+				<div
+					class={twMerge('h-full w-full', $appStore.css?.['app']?.['viewer']?.class)}
+					style={$appStore.css?.['app']?.['viewer']?.style}
+				>
+					<AppPreview
+						workspace={$workspaceStore ?? ''}
+						summary={$summaryStore}
+						app={$appStore}
+						appPath={path}
+						{breakpoint}
+						{policy}
+						isEditor
+						{context}
+						noBackend={false}
+					/>
+				</div>
+			</SplitPanesWrapper>
+		{:else}
+			<SplitPanesWrapper>
+				<Splitpanes class="max-w-full overflow-hidden">
+					<Pane size={15} minSize={5} maxSize={33}>
+						<ContextPanel />
+					</Pane>
+					<Pane size={64}>
+						<SplitPanesWrapper>
+							<Splitpanes horizontal>
+								<Pane size={70}>
 									<div
-										class="relative  mx-auto w-full h-full overflow-auto {app.fullscreen
-											? ''
-											: 'max-w-6xl'}"
+										on:pointerdown={(e) => {
+											$selectedComponent = undefined
+											$focusedGrid = undefined
+										}}
+										class={twMerge(
+											'bg-gray-100 h-full w-full',
+											$appStore.css?.['app']?.['viewer']?.class
+										)}
+										style={$appStore.css?.['app']?.['viewer']?.style}
 									>
-										{#if $appStore.grid}
-											<div class={width}>
-												<GridEditor {policy} />
+										<div
+											class={classNames(
+												'relative mx-auto w-full h-full overflow-auto',
+												app.fullscreen ? '' : 'max-w-6xl'
+											)}
+										>
+											{#if $appStore.grid}
+												<ComponentNavigation />
+
+												<div on:pointerdown|stopPropagation class={width}>
+													<GridEditor {policy} />
+												</div>
+
+												<div id="app-editor-top-level-drawer" />
+											{/if}
+										</div>
+									</div>
+								</Pane>
+								<Pane size={$connectingInput?.opened ? 0 : 30}>
+									<div class="relative h-full w-full">
+										<InlineScriptsPanel />
+									</div>
+								</Pane>
+							</Splitpanes>
+						</SplitPanesWrapper>
+					</Pane>
+					<Pane size={21} minSize={5} maxSize={33}>
+						<div class="relative flex flex-col h-full">
+							<Tabs bind:selected={selectedTab} wrapperClass="!h-[40px]" class="!h-full">
+								<Tab value="insert" size="xs">
+									<div class="m-1 center-center gap-2">
+										<Icon data={faPlus} />
+										<span>Insert</span>
+									</div>
+								</Tab>
+								<Tab value="settings" size="xs">
+									<div class="m-1 center-center gap-2">
+										<Icon data={faSliders} />
+										<span>Settings</span>
+									</div>
+								</Tab>
+								<Tab value="css" size="xs">
+									<div class="m-1 center-center gap-2">
+										<Icon data={faCode} />
+										<span>CSS</span>
+									</div>
+								</Tab>
+								<div slot="content" class="h-full overflow-y-auto pb-4">
+									<TabContent class="overflow-auto h-full" value="settings">
+										{#if $selectedComponent !== undefined}
+											<SettingsPanel />
+										{:else}
+											<div class="min-w-[150px] text-sm text-gray-500 text-center py-8 px-2">
+												Select a component to see the settings&nbsp;for&nbsp;it
 											</div>
 										{/if}
-									</div>
-								</div>
-							</Pane>
-							<Pane size={$connectingInput?.opened ? 0 : 30}>
-								<div class="relative h-full w-full">
-									<InlineScriptsPanel />
-								</div>
-							</Pane>
-						</Splitpanes>
-					</SplitPanesWrapper>
-				</Pane>
-				<Pane size={21} minSize={5} maxSize={33}>
-					<div class="relative flex flex-col h-full">
-						<Tabs bind:selected={selectedTab} class="!border-b-2 !border-gray-200">
-							<Tab value="insert" size="xs" class="grow">
-								<div class="m-1 center-center gap-2">
-									<Icon data={faPlus} />
-									<span>Insert</span>
+									</TabContent>
+									<TabContent value="insert">
+										<ComponentList />
+									</TabContent>
+									<TabContent value="css">
+										<CssSettings />
+									</TabContent>
 								</div>
-							</Tab>
-							<Tab value="settings" size="xs" class="grow">
-								<div class="m-1 center-center gap-2">
-									<Icon data={faSliders} />
-									<span>Settings</span>
-								</div>
-							</Tab>
-							<Tab value="css" size="xs" class="grow">
-								<div class="m-1 center-center gap-2">
-									<Icon data={faCode} />
-									<span>CSS</span>
-								</div>
-							</Tab>
-							<div slot="content" class="h-full overflow-y-auto pb-4">
-								<TabContent class="overflow-auto" value="settings">
-									{#if $selectedComponent !== undefined}
-										<SettingsPanel />
-									{:else}
-										<div class="min-w-[150px] text-sm text-gray-500 text-center py-8 px-2">
-											Select a component to see the settings&nbsp;for&nbsp;it
-										</div>
-									{/if}
-								</TabContent>
-								<TabContent value="insert">
-									<ComponentList />
-								</TabContent>
-								<TabContent value="css">
-									<CssSettings />
-								</TabContent>
-							</div>
-						</Tabs>
-						{#if $connectingInput.opened}
-							<div
-								class="fixed top-32  p-2 z-50 flex justify-center items-center"
-								transition:fly|local={{ duration: 100, y: -100 }}
-							>
-								<Alert title="Connecting" type="info">
-									<div class="flex gap-2 flex-col">
-										Click on the output of the component you want to connect to on the left panel.
-										<div>
-											<Button
-												color="blue"
-												variant="border"
-												size="xs"
-												on:click={() => {
-													$connectingInput.opened = false
-													$connectingInput.input = undefined
-												}}
-											>
-												Stop connecting
-											</Button>
+							</Tabs>
+							{#if $connectingInput.opened}
+								<div
+									class="fixed top-32  p-2 z-50 flex justify-center items-center"
+									transition:fly|local={{ duration: 100, y: -100 }}
+								>
+									<Alert title="Connecting" type="info">
+										<div class="flex gap-2 flex-col">
+											Click on the output of the component you want to connect to on the left panel.
+											<div>
+												<Button
+													color="blue"
+													variant="border"
+													size="xs"
+													on:click={() => {
+														$connectingInput.opened = false
+														$connectingInput.input = undefined
+													}}
+												>
+													Stop connecting
+												</Button>
+											</div>
 										</div>
-									</div>
-								</Alert>
-							</div>
-						{/if}
-					</div>
-				</Pane>
-			</Splitpanes>
-		</SplitPanesWrapper>
+									</Alert>
+								</div>
+							{/if}
+						</div>
+					</Pane>
+				</Splitpanes>
+			</SplitPanesWrapper>
+		{/if}
+	{:else}
+		App is null
 	{/if}
 {:else}
 	App editor not available to operators
 {/if}
+
+<ItemPicker
+	bind:this={itemPicker}
+	pickCallback={(path, _) => {
+		$pickVariableCallback?.(path)
+	}}
+	itemName="Variable"
+	extraField="path"
+	loadItems={async () =>
+		(await VariableService.listVariable({ workspace: $workspaceStore ?? '' })).map((x) => ({
+			name: x.path,
+			...x
+		}))}
+>
+	<div
+		slot="submission"
+		class="flex flex-row-reverse w-full bg-white border-t border-gray-200 rounded-bl-lg rounded-br-lg"
+	>
+		<Button
+			variant="border"
+			color="blue"
+			size="sm"
+			startIcon={{ icon: faPlus }}
+			on:click={() => {
+				variableEditor?.initNew?.()
+			}}
+		>
+			New variable
+		</Button>
+	</div>
+</ItemPicker>
+
+<VariableEditor bind:this={variableEditor} />

package/components/apps/editor/AppEditor.svelte.d.ts

@@ -1,6 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 import type { App, EditorMode } from '../types';
-import type { Policy } from '../../../gen';
+import { type Policy } from '../../../gen';
 declare const __propDef: {
     props: {
         app: App;
@@ -11,6 +11,8 @@ declare const __propDef: {
         fromHub?: boolean | undefined;
     };
     events: {
+        pointerdown: PointerEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};