Transformer Selection

ui/src/actions/clickOutside.ts

@@ -1,9 +1,3 @@
-/**
- * Executes the given callback once an outside click is recognized.
- * If the 'opening' click triggers the callback right away, try using 'on:click|stopPropagation'.
- * @param node
- * @param param1
- */
 export function clickOutside(node: HTMLElement, { enabled: initialEnabled, cb }) {
     const handleOutsideClick = ({ target }) => {
         if (!node.contains(target)) {

ui/src/components/Popup.svelte

@@ -11,12 +11,14 @@
     }
 </script>
 
-<span on:click|stopPropagation={toogle}>
+<span use:clickOutside={{ enabled: opened, cb: () => opened.set(false) }}>
-    <slot name="trigger" />
+    <span on:click={toogle}>
-</span>
+        <slot name="trigger" />
-
-{#if $opened}
-    <span use:clickOutside={{ enabled: opened, cb: () => opened.set(false) }}>
-        <slot name="content" />
     </span>
-{/if}
+
+    {#if $opened}
+        <span>
+            <slot name="content" />
+        </span>
+    {/if}
+</span>

ui/src/debug/DebugView.svelte

@@ -8,6 +8,7 @@
     import Popup from '../components/Popup.svelte';
     import PageSelectionPopup from './PageSelectionPopup.svelte';
     import ItemTable from './ItemTable.svelte';
+    import TransformerSelectionPopup from './TransformerSelectionPopup.svelte';
 
     export let debug: Debugger;
 
@@ -70,7 +71,19 @@
             <span on:click={() => canNext && currentStage++}>
                 <ArrowRight size="1x" class={canNext ? 'hover:text-green-700 cursor-pointer' : 'opacity-50'} />
             </span>
-            <div class="cursor-pointer hover:underline">{stageNames[currentStage]}</div>
+            <span>
+                <Popup>
+                    <span slot="trigger">
+                        <div class="cursor-pointer hover:underline">{stageNames[currentStage]}</div>
+                    </span>
+                    <span slot="content">
+                        <TransformerSelectionPopup
+                            {stageNames}
+                            {currentStage}
+                            on:selectTransformer={(e) => (currentStage = e.detail)} />
+                    </span>
+                </Popup>
+            </span>
         </div>
     </div>
 

ui/src/debug/PageSelectionPopup.svelte

@@ -1,7 +1,7 @@
 <script>
     import { slide } from 'svelte/transition';
-    import { createEventDispatcher } from 'svelte';
     import { getContext } from 'svelte';
+    import { createEventDispatcher } from 'svelte';
     import { Collection } from 'svelte-hero-icons';
     import type { Writable } from 'svelte/store';
 

ui/src/debug/TransformerSelectionPopup.svelte

@@ -0,0 +1,45 @@
+<script>
+    import { slide } from 'svelte/transition';
+    import { getContext } from 'svelte';
+    import { createEventDispatcher } from 'svelte';
+
+    import type { Writable } from 'svelte/store';
+
+    export let stageNames: string[];
+    export let currentStage: number;
+
+    const popupOpened: Writable<boolean> = getContext('popupOpened');
+    const dispatch = createEventDispatcher();
+
+    function selectTransformer(index: number) {
+        popupOpened.set(false);
+        dispatch('selectTransformer', index);
+    }
+</script>
+
+<div class="absolute -mt-6 p-2 bg-gray-200 shadow-lg rounded-sm overflow-auto max-h-96" transition:slide>
+    {#each stageNames as stageName, idx}
+        <div
+            on:click={() => selectTransformer(idx)}
+            class="px-2 "
+            class:selected={idx == currentStage}
+            class:selectable={idx != currentStage}>
+            {stageName}
+        </div>
+    {/each}
+</div>
+
+<style>
+    .selected {
+        @apply cursor-default;
+        @apply bg-gray-300;
+        /* @apply underline; */
+    }
+    .selectable {
+        @apply cursor-pointer;
+    }
+    .selectable:hover {
+        @apply bg-gray-400;
+        @apply text-green-700;
+    }
+</style>