windmill-components 1.408.2 → 1.430.3

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

@@ -19,13 +19,12 @@ import ItemPicker from '../../ItemPicker.svelte';
 import VariableEditor from '../../VariableEditor.svelte';
 import { VariableService } from '../../../gen';
 import { initHistory } from '../../../history';
-import { Component, Minus, Paintbrush, Plus, Smartphone } from 'lucide-svelte';
+import { Component, Minus, Paintbrush, Plus, Smartphone, Scan, Hand, Grab } from 'lucide-svelte';
 import { findGridItem, findGridItemParentGrid } from './appUtils';
 import ComponentNavigation from './component/ComponentNavigation.svelte';
 import CssSettings from './componentsPanel/CssSettings.svelte';
-import ConnectionInstructions from './ConnectionInstructions.svelte';
 import SettingsPanel from './SettingsPanel.svelte';
-import { SecondaryMenu, secondaryMenuLeft, secondaryMenuLeftStore, secondaryMenuRight, secondaryMenuRightStore } from './settingsPanel/secondaryMenu';
+import { SecondaryMenu, secondaryMenuLeft, secondaryMenuLeftStore, secondaryMenuRightStore } from './settingsPanel/secondaryMenu';
 import Popover from '../../Popover.svelte';
 import { BG_PREFIX, migrateApp } from '../utils';
 import DarkModeObserver from '../../DarkModeObserver.svelte';
@@ -35,6 +34,7 @@ import RunnableJobPanel from './RunnableJobPanel.svelte';
 import { goto, replaceState } from '$app/navigation';
 import HideButton from './settingsPanel/HideButton.svelte';
 import AppEditorBottomPanel from './AppEditorBottomPanel.svelte';
+import panzoom from 'panzoom';
 export let app;
 export let path;
 export let policy;
@@ -80,6 +80,7 @@ const darkMode = writable(document.documentElement.classList.contains('dark'));
 const worldStore = buildWorld(context);
 const previewTheme = writable(undefined);
 const initialized = writable({ initialized: false, initializedComponents: [] });
+const panzoomActive = writable(false);
 $secondaryMenuRightStore.isOpen = false;
 $secondaryMenuLeftStore.isOpen = false;
 setContext('AppViewerContext', {
@@ -121,7 +122,8 @@ setContext('AppViewerContext', {
         componentNumber: 0,
         refreshing: [],
         progress: 100
-    })
+    }),
+    panzoomActive
 });
 let scale = writable(100);
 const componentActive = writable(false);
@@ -163,7 +165,7 @@ $: context.mode = $mode == 'dnd' ? 'editor' : 'viewer';
 $: width =
     $breakpoint === 'sm' && $appStore?.mobileViewOnSmallerScreens !== false
         ? 'min-w-[400px] max-w-[656px]'
-        : 'min-w-[710px] w-full';
+        : `min-w-[710px] ${$appStore.fullscreen ? 'w-full' : 'max-w-7xl'}`;
 let selectedTab = 'insert';
 let befSelected = undefined;
 $: if ($selectedComponent?.[0] != befSelected) {
@@ -224,15 +226,6 @@ setContext('ContextPanel', {
     manuallyOpened: writable({}),
     hasResult: writable({})
 });
-$: if ($connectingInput.opened) {
-    secondaryMenuRight.open(ConnectionInstructions, {}, () => {
-        $connectingInput.opened = false;
-    });
-    secondaryMenuLeft.close();
-}
-else {
-    secondaryMenuRight.close();
-}
 function onThemeChange() {
     $darkMode = document.documentElement.classList.contains('dark');
 }
@@ -248,20 +241,6 @@ let tmpCenterPanelSize = -1;
 let tmpRightPanelSize = -1;
 let toggled = false;
 let cssToggled = false;
-$: if ($connectingInput.opened && !toggled) {
-    tmpRunnablePanelSize = runnablePanelSize;
-    tmpGridPanelSize = gridPanelSize;
-    animateTo(runnablePanelSize, 0, (newValue) => (runnablePanelSize = newValue));
-    animateTo(gridPanelSize, 100, (newValue) => (gridPanelSize = newValue));
-    toggled = true;
-}
-else if (!$connectingInput.opened && toggled) {
-    animateTo(runnablePanelSize, tmpRunnablePanelSize, (newValue) => (runnablePanelSize = newValue));
-    animateTo(gridPanelSize, tmpGridPanelSize, (newValue) => (gridPanelSize = newValue));
-    tmpRunnablePanelSize = -1;
-    tmpGridPanelSize = -1;
-    toggled = false;
-}
 // Animation logic for cssInput
 $: animateCssInput($cssEditorOpen);
 $: $cssEditorOpen &&
@@ -412,24 +391,53 @@ let storedLeftPanelSize = 0;
 let storedRightPanelSize = 0;
 let storedBottomPanelSize = 0;
 let centerPanelWidth = 0;
-function hideLeftPanel() {
+function hideLeftPanel(animate = false) {
     storedLeftPanelSize = leftPanelSize;
-    leftPanelSize = 0;
+    if (animate) {
+        animateTo(leftPanelSize, 0, (newValue) => (leftPanelSize = newValue));
+    }
+    else {
+        leftPanelSize = 0;
+    }
     centerPanelSize = centerPanelSize + storedLeftPanelSize;
+    if ($connectingInput.opened) {
+        $connectingInput.opened = false;
+    }
 }
 function hideRightPanel() {
     storedRightPanelSize = rightPanelSize;
     rightPanelSize = 0;
     centerPanelSize = centerPanelSize + storedRightPanelSize;
+    if ($connectingInput.opened) {
+        $connectingInput.opened = false;
+    }
 }
-function hideBottomPanel() {
+function hideBottomPanel(animate = false) {
+    if (runnablePanelSize === 0) {
+        return;
+    }
     storedBottomPanelSize = runnablePanelSize;
-    gridPanelSize = 99;
-    runnablePanelSize = 0;
+    if (animate) {
+        tmpRunnablePanelSize = runnablePanelSize;
+        tmpGridPanelSize = gridPanelSize;
+        animateTo(runnablePanelSize, 0, (newValue) => (runnablePanelSize = newValue));
+        animateTo(gridPanelSize, 100, (newValue) => (gridPanelSize = newValue));
+    }
+    else {
+        runnablePanelSize = 0;
+        gridPanelSize = 99;
+    }
 }
-function showLeftPanel() {
-    leftPanelSize = storedLeftPanelSize;
-    centerPanelSize = centerPanelSize - storedLeftPanelSize;
+function showLeftPanel(animate = false) {
+    if (leftPanelSize !== 0) {
+        return;
+    }
+    if (animate) {
+        animateTo(leftPanelSize, storedLeftPanelSize, (newValue) => (leftPanelSize = newValue));
+    }
+    else {
+        leftPanelSize = storedLeftPanelSize;
+    }
     storedLeftPanelSize = 0;
 }
 function showRightPanel() {
@@ -437,9 +445,18 @@ function showRightPanel() {
     centerPanelSize = centerPanelSize - storedRightPanelSize;
     storedRightPanelSize = 0;
 }
-function showBottomPanel() {
-    runnablePanelSize = storedBottomPanelSize;
-    gridPanelSize = gridPanelSize - storedBottomPanelSize;
+function showBottomPanel(animate = false) {
+    if (runnablePanelSize !== 0) {
+        return;
+    }
+    if (animate) {
+        animateTo(runnablePanelSize, storedBottomPanelSize, (newValue) => (runnablePanelSize = newValue));
+        animateTo(gridPanelSize, gridPanelSize - storedBottomPanelSize, (newValue) => (gridPanelSize = newValue));
+    }
+    else {
+        runnablePanelSize = storedBottomPanelSize;
+        gridPanelSize = gridPanelSize - storedBottomPanelSize;
+    }
     storedBottomPanelSize = 0;
 }
 function keydown(event) {
@@ -448,6 +465,7 @@ function keydown(event) {
         ['INPUT', 'TEXTAREA'].includes(document.activeElement?.tagName)) {
         return;
     }
+    isModifierKeyPressed = event.ctrlKey || event.metaKey;
     switch (event.key) {
         case 'b': {
             if (event.ctrlKey || event.metaKey) {
@@ -485,10 +503,134 @@ function keydown(event) {
             }
             break;
         }
+        case 'Escape': {
+            if ($connectingInput.opened) {
+                $connectingInput.opened = false;
+            }
+            if (handMode) {
+                handMode = false;
+            }
+            break;
+        }
+    }
+}
+let previousLeftPanelHidden = false;
+let previousBottomPanelHidden = false;
+async function updatePannelInConnecting() {
+    if ($connectingInput.opened && !toggled) {
+        previousLeftPanelHidden = leftPanelSize === 0;
+        previousBottomPanelHidden = runnablePanelSize === 0;
+        if (previousLeftPanelHidden) {
+            showLeftPanel(true);
+        }
+        if (!previousBottomPanelHidden) {
+            hideBottomPanel(true);
+        }
+        secondaryMenuLeft.close();
+        toggled = true;
+    }
+    else if (!$connectingInput.opened && toggled) {
+        if (previousLeftPanelHidden) {
+            hideLeftPanel(true);
+        }
+        if (!previousBottomPanelHidden) {
+            showBottomPanel(true);
+        }
+        toggled = false;
     }
 }
+$: $connectingInput.opened, updatePannelInConnecting();
 let testJob = undefined;
 let jobToWatch = undefined;
+$: updateCursorStyle(!!$connectingInput.opened && !$panzoomActive);
+function updateCursorStyle(disabled) {
+    if (disabled) {
+        // Select all elements that don't have data-connection-button and aren't children of elements with data-connection-button
+        const elements = document.querySelectorAll(':not([data-connection-button]):not([data-connection-button] *)');
+        elements.forEach((element) => {
+            ;
+            element.style.cursor = 'not-allowed';
+        });
+    }
+    else {
+        // Reset cursor style for all elements
+        const elements = document.querySelectorAll('*');
+        elements.forEach((element) => {
+            ;
+            element.style.removeProperty('cursor');
+        });
+    }
+}
+let instance;
+let isModifierKeyPressed = false;
+function resetView() {
+    if (instance && box) {
+        instance.moveTo(0.5, 0);
+        instance.zoomAbs(0.5, 0, 1);
+        box.scrollTop = 0;
+    }
+}
+function zoomTo(x, y, scale) {
+    if (instance) {
+        instance.zoomAbs(x, y, scale);
+    }
+}
+function initPanzoom(node) {
+    instance = panzoom(node, {
+        bounds: true,
+        boundsPadding: 0.1,
+        maxZoom: 1.5,
+        minZoom: 0.3,
+        zoomDoubleClickSpeed: 1,
+        smoothScroll: false,
+        initialZoom: $scale / 100.0,
+        beforeMouseDown: (e) => {
+            if (e.ctrlKey || e.metaKey || handMode) {
+                // Prevent event propagation to children when panning
+                e.stopPropagation();
+                return false;
+            }
+            return true;
+        },
+        beforeWheel: (e) => {
+            if (e.ctrlKey || e.metaKey || handMode) {
+                // Prevent event propagation to children when zooming
+                e.stopPropagation();
+                return false;
+            }
+            return true;
+        }
+    });
+    // Handle pointerdown when connecting
+    node.addEventListener('pointerdown_connecting', (e) => {
+        instance.handleDown(e);
+    });
+    // Update scale store when zoom changes
+    instance.on('zoom', (e) => {
+        const currentScale = e.getTransform().scale * 100;
+        if (currentScale !== $scale) {
+            $scale = currentScale;
+        }
+    });
+    return {
+        destroy() {
+            instance.dispose();
+            node.removeEventListener('pointerdown_connecting', instance.handleDown);
+        }
+    };
+}
+function handleKeyUp(e) {
+    isModifierKeyPressed = false;
+}
+let mouseOverGridView = false;
+let handMode = false;
+let forceDeactivatePanzoom = false;
+$: $panzoomActive =
+    (isModifierKeyPressed || handMode) &&
+        !forceDeactivatePanzoom &&
+        !$componentActive &&
+        mouseOverGridView;
+$: forceDeactivatePanzoom = isModifierKeyPressed && handMode;
 </script>
 
 <svelte:head>
@@ -497,7 +639,16 @@ let jobToWatch = undefined;
 
 <DarkModeObserver on:change={onThemeChange} />
 
-<svelte:window on:hashchange={hashchange} on:keydown={keydown} />
+<svelte:window
+	on:hashchange={hashchange}
+	on:keydown={keydown}
+	on:keyup={handleKeyUp}
+	on:focus={() => {
+		if (isModifierKeyPressed) {
+			isModifierKeyPressed = false
+		}
+	}}
+/>
 
 {#if !$userStore?.operator}
 	{#if $appStore}
@@ -559,6 +710,12 @@ let jobToWatch = undefined;
 				</div>
 			{/if}
 
+			{#if $connectingInput.opened}
+				<div class="absolute z-50 inset-0 w-min h-min whitespace-nowrap mx-auto pt-0.5">
+					<Alert title="Press Esc to exit connection mode." size="xs" class="h-10 py-1" />
+				</div>
+			{/if}
+
 			<SplitPanesWrapper>
 				<Splitpanes id="o1" class="max-w-full overflow-hidden">
 					<Pane bind:size={leftPanelSize} minSize={5} maxSize={33}>
@@ -585,7 +742,8 @@ let jobToWatch = undefined;
 									class={twMerge(
 										'bg-surface-secondary h-full w-full relative',
 										$appStore.css?.['app']?.['viewer']?.class,
-										'wm-app-viewer h-full overflow-visible'
+										'wm-app-viewer h-full overflow-visible',
+										$panzoomActive ? 'cursor-grab' : ''
 									)}
 									style={$appStore.css?.['app']?.['viewer']?.style}
 									bind:clientWidth={centerPanelWidth}
@@ -594,7 +752,7 @@ let jobToWatch = undefined;
 										<div class="absolute top-0.5 left-0.5 z-50">
 											<HideButton
 												on:click={() => showLeftPanel()}
-												direction="right"
+												direction="left"
 												hidden
 												btnClasses="border bg-surface"
 											/>
@@ -604,7 +762,7 @@ let jobToWatch = undefined;
 										<div class="absolute top-0.5 right-0.5 z-50">
 											<HideButton
 												on:click={() => showRightPanel()}
-												direction="left"
+												direction="right"
 												hidden
 												btnClasses="border bg-surface"
 											/>
@@ -621,56 +779,115 @@ let jobToWatch = undefined;
 										</div>
 									{/if}
 
-									<div class="absolute bottom-2 left-2 z-50 border bg-surface">
+									<div
+										class="absolute bottom-2 left-2 z-50 border bg-surface"
+										data-connection-button
+										on:pointerdown|stopPropagation
+									>
 										<div class="flex flex-row gap-2 text-xs items-center h-8 px-1">
 											<Button
 												color="light"
 												size="xs2"
 												disabled={$scale <= 30}
 												on:click={() => {
-													$scale -= 10
+													zoomTo(0.5, 0, Math.round(($scale - 10) / 10) / 10)
 												}}
 											>
 												<Minus size={14} />
 											</Button>
 											<div class="w-8 flex justify-center text-2xs h-full items-center">
-												{$scale}%
+												{Math.round($scale)}%
 											</div>
 											<Button
 												color="light"
 												size="xs2"
-												disabled={$scale >= 100}
+												disabled={$scale >= 150}
 												on:click={() => {
-													$scale += 10
+													zoomTo(0.5, 0, Math.round(($scale + 10) / 10) / 10)
 												}}
 											>
 												<Plus size={14} />
 											</Button>
+											<Button color="light" size="xs2" disabled={false} on:click={resetView}>
+												<Scan size={14} />
+											</Button>
+											<Popover disappearTimeout={0} notClickable placement="bottom">
+												<svelte:fragment slot="text">
+													<div class="flex flex-row gap-2">
+														<div class="flex-1">
+															Hand Mode
+															<br />
+															<span class="ml-2">Pan</span>
+															<br />
+															<span class="ml-2">Zoom</span>
+
+															<br />
+															<span class="ml-2">Exit</span>
+														</div>
+														<div>
+															<span class="float-left text-tertiary-inverse"
+																>hold {getModifierKey()}</span
+															>
+															<br />
+															<span class="float-left text-tertiary-inverse">click & drag</span>
+															<br />
+															<span class="float-left text-tertiary-inverse">scroll</span>
+															<br />
+															<span class="float-left text-tertiary-inverse">esc</span>
+														</div>
+													</div>
+												</svelte:fragment>
+												<Button
+													color="light"
+													size="xs2"
+													disabled={false}
+													on:click={() => (handMode = !handMode)}
+													btnClasses={handMode ? 'bg-surface-hover' : ''}
+												>
+													{#if $panzoomActive}
+														<Grab size={14} />
+													{:else}
+														<Hand size={14} />
+													{/if}
+												</Button>
+											</Popover>
 										</div>
 									</div>
 
 									<div id="app-editor-top-level-drawer" />
 									<div
-										class="absolute inset-0 h-full w-full surface-secondary bg-[radial-gradient(#dbdbdb_1px,transparent_1px)] dark:bg-[radial-gradient(#666666_1px,transparent_1px)] [background-size:16px_16px]"
+										class="absolute pointer-events-none inset-0 h-full w-full surface-secondary bg-[radial-gradient(#dbdbdb_1px,transparent_1px)] dark:bg-[radial-gradient(#666666_1px,transparent_1px)] [background-size:16px_16px]"
 									/>
 
 									<!-- svelte-ignore a11y-no-static-element-interactions -->
 									<div
 										bind:this={box}
 										on:scroll={parseScroll}
+										on:mouseenter={() => {
+											mouseOverGridView = true
+										}}
+										on:mouseleave={() => {
+											mouseOverGridView = false
+										}}
 										class={classNames(
 											'mx-auto w-full h-full z-50',
-											$appStore.fullscreen ? '' : 'max-w-7xl',
 											$componentActive ? 'absolute right-0 left-0' : 'overflow-auto'
 										)}
 										style={$componentActive ? `top: -${$yTop}px;` : ''}
 									>
 										{#if $appStore.grid}
-											<ComponentNavigation />
+											{#if !$connectingInput?.opened}
+												<ComponentNavigation />
+											{/if}
 
 											<div
-												on:pointerdown|stopPropagation
-												class={twMerge(width, 'mx-auto', 'z-10000')}
+												class={twMerge(
+													width,
+													'mx-auto',
+													'z-10000',
+													$panzoomActive ? 'pointer-events-none' : ''
+												)}
+												use:initPanzoom
 											>
 												<GridEditor {policy} />
 											</div>
@@ -803,14 +1020,7 @@ let jobToWatch = undefined;
 										</Tab>
 									</Popover>
 									<div class="h-full w-full flex justify-end px-1">
-										<HideButton
-											on:click={() => {
-												storedRightPanelSize = rightPanelSize
-												rightPanelSize = 0
-												centerPanelSize = centerPanelSize + storedRightPanelSize
-											}}
-											direction="right"
-										/>
+										<HideButton on:click={() => hideRightPanel()} direction="right" />
 									</div>
 									<div slot="content" class="h-full overflow-y-auto">
 										<TabContent class="overflow-auto h-full" value="settings">