windmill-components 1.60.3 → 1.83.1

package/components/apps/editor/AppEditor.svelte

@@ -1,5 +1,6 @@
 <script>import SplitPanesWrapper from '../../splitPanes/SplitPanesWrapper.svelte';
 import { onMount, setContext } from 'svelte';
+import { twMerge } from 'tailwind-merge';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
 import { writable } from 'svelte/store';
 import { buildWorld } from '../rx';
@@ -7,27 +8,33 @@ import AppEditorHeader from './AppEditorHeader.svelte';
 import GridEditor from './GridEditor.svelte';
 import Tabs from '../../common/tabs/Tabs.svelte';
 import TabContent from '../../common/tabs/TabContent.svelte';
-import { Alert, Button, Tab } from '../../common';
+import { Button, Tab } from '../../common';
 import ComponentList from './componentsPanel/ComponentList.svelte';
-import Icon from 'svelte-awesome';
-import { faPlus, faSliders } from '@fortawesome/free-solid-svg-icons';
+import { faPlus } from '@fortawesome/free-solid-svg-icons';
 import ContextPanel from './contextPanel/ContextPanel.svelte';
 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 { initHistory } from '../../../history';
+import ComponentNavigation from './component/ComponentNavigation.svelte';
+import ItemPicker from '../../ItemPicker.svelte';
+import VariableEditor from '../../VariableEditor.svelte';
+import { secondaryMenu, SecondaryMenu } from './settingsPanel/secondaryMenu';
+import { Component, Paintbrush, Plus } from 'lucide-svelte';
+import { findGridItem, findGridItemParentGrid } from './appUtils';
+import ConnectionInstructions from './ConnectionInstructions.svelte';
 export let app;
 export let path;
 export let initialMode = 'dnd';
 export let policy;
 export let summary;
+export let fromHub = false;
 const appStore = writable(app);
-const worldStore = writable(undefined);
-const staticOutputs = writable({});
 const selectedComponent = writable(undefined);
 const mode = writable(initialMode);
 const breakpoint = writable('lg');
@@ -37,25 +44,48 @@ const connectingInput = writable({
     input: undefined,
     hoveredComponent: undefined
 });
-const runnableComponents = writable({});
-setContext('AppEditorContext', {
-    worldStore,
-    staticOutputs,
+const history = initHistory(app);
+const errorByComponent = writable({});
+const focusedGrid = writable(undefined);
+const pickVariableCallback = writable(undefined);
+let context = {
+    email: $userStore?.email,
+    username: $userStore?.username,
+    query: Object.fromEntries($page.url.searchParams.entries()),
+    hash: $page.url.hash
+};
+setContext('AppViewerContext', {
+    worldStore: buildWorld(context),
     app: appStore,
-    lazyGrid: writable([]),
     summary: summaryStore,
     selectedComponent,
     mode,
     connectingInput,
     breakpoint,
-    runnableComponents,
+    runnableComponents: writable({}),
     appPath: path,
     workspace: $workspaceStore ?? '',
     onchange: () => saveDraft(),
     isEditor: true,
     jobs: writable([]),
     staticExporter: writable({}),
-    noBackend: false
+    noBackend: false,
+    errorByComponent,
+    openDebugRun: writable(undefined),
+    focusedGrid,
+    stateId: writable(0),
+    parentWidth: writable(0),
+    state: writable({}),
+    componentControl: writable({}),
+    hoverStore: writable(undefined),
+    allIdsInPath: writable([])
+});
+setContext('AppEditorContext', {
+    history,
+    pickVariableCallback,
+    ontextfocus: writable(undefined),
+    movingcomponents: writable(undefined),
+    selectedComponentInEditor: writable(undefined)
 });
 let timeout = undefined;
 $: $appStore && saveDraft();
@@ -74,134 +104,220 @@ let mounted = false;
 onMount(() => {
     mounted = true;
 });
-$: context = {
-    email: $userStore?.email,
-    username: $userStore?.username,
-    query: Object.fromEntries($page.url.searchParams.entries())
-};
-$: mounted && ($worldStore = buildWorld($staticOutputs, $worldStore, context));
+function hashchange(e) {
+    context.hash = e.newURL.split('#')[1];
+    context = context;
+}
 $: previewing = $mode === 'preview';
 $: width = $breakpoint === 'sm' ? 'min-w-[400px] max-w-[656px]' : 'min-w-[710px] w-full';
 let selectedTab = 'insert';
-$: if ($selectedComponent) {
+let befSelected = undefined;
+$: if ($selectedComponent?.[0] != befSelected) {
+    befSelected = $selectedComponent?.[0];
     selectedTab = 'settings';
+    console.log('focusedGrid1', befSelected);
+    if (befSelected) {
+        if (!['ctx', 'state'].includes(befSelected) && !befSelected?.startsWith('bg_')) {
+            let item = findGridItem($appStore, befSelected);
+            if (item?.data.type === 'containercomponent') {
+                $focusedGrid = {
+                    parentComponentId: befSelected,
+                    subGridIndex: 0
+                };
+            }
+            else {
+                console.log('focusedGrid2', befSelected);
+                let subgrid = findGridItemParentGrid($appStore, befSelected);
+                if (subgrid) {
+                    console.log('focusedGrid3', befSelected);
+                    try {
+                        $focusedGrid = {
+                            parentComponentId: subgrid.split('-')[0],
+                            subGridIndex: parseInt(subgrid.split('-')[1])
+                        };
+                    }
+                    catch { }
+                }
+                else {
+                    $focusedGrid = undefined;
+                }
+            }
+        }
+    }
+}
+let itemPicker = undefined;
+$: if ($pickVariableCallback) {
+    itemPicker?.openDrawer();
+}
+let variableEditor = undefined;
+setContext('ContextPanel', {
+    search: writable(''),
+    manuallyOpened: writable({}),
+    hasResult: writable({})
+});
+$: if ($connectingInput.opened) {
+    secondaryMenu.open(ConnectionInstructions, {}, () => {
+        $connectingInput.opened = false;
+    });
 }
 else {
-    selectedTab = 'insert';
+    secondaryMenu.close();
 }
 </script>
 
-{#if $connectingInput.opened}
-	<div
-		class="absolute  w-full h-screen bg-black border-2 bg-opacity-25 z-20 flex justify-center items-center"
-	/>
-{/if}
+<svelte:window on:hashchange={hashchange} />
+
 {#if !$userStore?.operator}
-	<UnsavedConfirmationModal />
-	{#if initialMode !== 'preview'}
-		<AppEditorHeader {policy} />
-	{/if}
+	{#if $appStore}
+		{#if initialMode !== 'preview'}
+			<AppEditorHeader {policy} {fromHub} />
+		{/if}
 
-	{#if previewing}
-		<AppPreview
-			workspace={$workspaceStore ?? ''}
-			summary={$summaryStore}
-			app={$appStore}
-			appPath={path}
-			{breakpoint}
-			{policy}
-			isEditor
-			{context}
-			noBackend={false}
-		/>
-	{: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="bg-gray-100 relative  w-full h-full overflow-auto {app.fullscreen
-										? ''
-										: 'max-w-6xl'}"
-								>
-									{#if $appStore.grid}
-										<div class={classNames('p-4 mx-auto', width)}>
-											<GridEditor {policy} />
-										</div>
-									{/if}
-								</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}>
-							<Tab value="insert" size="xs">
-								<div class="m-1 flex flex-row gap-2">
-									<Icon data={faPlus} />
-									<span>Insert</span>
-								</div>
-							</Tab>
-							<Tab value="settings" size="xs">
-								<div class="m-1 flex flex-row gap-2">
-									<Icon data={faSliders} />
-									<span>Settings</span>
-								</div>
-							</Tab>
-							<svelte:fragment slot="content">
-								<TabContent class="overflow-auto" value="settings">
-									{#if $selectedComponent !== undefined}
-										<SettingsPanel />
-									{:else}
-										<div class="p-2 min-w-[150px] text-sm">No component selected.</div>
-									{/if}
-								</TabContent>
-								<TabContent value="insert">
-									<ComponentList />
-								</TabContent>
-							</svelte:fragment>
-						</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>
+		{#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={63}>
+						<SplitPanesWrapper>
+							<Splitpanes horizontal>
+								<Pane size={$connectingInput?.opened ? 100 : 70}>
+									<div
+										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}
+									>
+										<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={twMerge(width, 'mx-auto')}>
+													<GridEditor {policy} />
+												</div>
+
+												<div id="app-editor-top-level-drawer" />
+											{/if}
 										</div>
 									</div>
-								</Alert>
-							</div>
-						{/if}
-					</div>
-				</Pane>
-			</Splitpanes>
-		</SplitPanesWrapper>
+								</Pane>
+								<Pane size={$connectingInput?.opened ? 0 : 30}>
+									<div class="relative h-full w-full">
+										<InlineScriptsPanel />
+									</div>
+								</Pane>
+							</Splitpanes>
+						</SplitPanesWrapper>
+					</Pane>
+					<Pane size={22} 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-1">
+										<Plus size={18} />
+									</div>
+								</Tab>
+								<Tab value="settings" size="xs">
+									<div class="m-1 center-center gap-1">
+										<Component size={18} />
+										<span>Component</span>
+									</div>
+								</Tab>
+								<Tab value="css" size="xs">
+									<div class="m-1 center-center gap-1">
+										<Paintbrush size={18} />
+									</div>
+								</Tab>
+								<div slot="content" class="h-full overflow-y-auto">
+									<TabContent class="overflow-auto h-full" value="settings">
+										{#if $selectedComponent !== undefined}
+											<SettingsPanel />
+											<SecondaryMenu />
+										{: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>
+						</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;
@@ -8,8 +8,11 @@ declare const __propDef: {
         initialMode?: EditorMode | undefined;
         policy: Policy;
         summary: string;
+        fromHub?: boolean | undefined;
     };
     events: {
+        pointerdown: PointerEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};