mirror of
https://github.com/windmill-labs/windmill.git
synced 2026-10-28 00:02:42 +00:00
feat(frontend): Fix node position
This commit is contained in:
Faton Ramadani
@@ -2,6 +2,7 @@
|
||||
import Menu from '$lib/components/common/menu/MenuV2.svelte'
|
||||
import { createEventDispatcher } from 'svelte'
|
||||
import { ListFilter } from 'lucide-svelte'
|
||||
import { MenuItem } from '@rgossiaux/svelte-headlessui'
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
|
||||
@@ -42,29 +43,28 @@
|
||||
<ListFilter size={15} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="flow-editor-insert-module">
|
||||
<div class="font-mono divide-y text-xs w-full text-secondary max-h-[200px] overflow-auto">
|
||||
<input autofocus type="number" bind:value={filter} on:keydown={onKeydown} />
|
||||
{#each flowJobs ?? [] as id, idx (id)}
|
||||
{#if filter == undefined || (idx + 1).toString().includes(filter.toString())}
|
||||
<button
|
||||
class="w-full text-left py-1 pl-2 min-w-20 hover:bg-surface-hover whitespace-nowrap flex flex-row gap-2 items-center {flowJobsSuccess?.[
|
||||
idx
|
||||
] == false
|
||||
? 'text-red-400'
|
||||
: ''}"
|
||||
on:pointerdown={() => {
|
||||
close()
|
||||
dispatch('selectedIteration', { index: idx, id })
|
||||
}}
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
>
|
||||
#{idx + 1}
|
||||
</button>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
<MenuItem disabled>
|
||||
<input type="number" bind:value={filter} on:keydown={onKeydown} />
|
||||
</MenuItem>
|
||||
{#each flowJobs ?? [] as id, idx (id)}
|
||||
{#if filter == undefined || (idx + 1).toString().includes(filter.toString())}
|
||||
<MenuItem>
|
||||
<button
|
||||
class="text-primary text-xs w-full text-left py-1 pl-2 hover:bg-surface-hover whitespace-nowrap flex flex-row gap-2 items-center {flowJobsSuccess?.[
|
||||
idx
|
||||
] == false
|
||||
? 'text-red-400'
|
||||
: ''}"
|
||||
on:pointerdown={() => {
|
||||
//close()
|
||||
dispatch('selectedIteration', { index: idx, id })
|
||||
}}
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
>
|
||||
#{idx + 1}
|
||||
</button>
|
||||
</MenuItem>
|
||||
{/if}
|
||||
{/each}
|
||||
</Menu>
|
||||
|
||||
@@ -252,6 +252,7 @@
|
||||
connectionLineType={ConnectionLineType.SmoothStep}
|
||||
defaultEdgeOptions={{ type: 'smoothstep' }}
|
||||
preventScrolling={scroll}
|
||||
zoomOnDoubleClick={false}
|
||||
{proOptions}
|
||||
nodesDraggable={false}
|
||||
on:nodeclick={(e) => handleNodeClick(e)}
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
<script lang="ts">
|
||||
import VirtualItem from '$lib/components/flows/map/VirtualItem.svelte'
|
||||
import { NodeToolbar, Position } from '@xyflow/svelte'
|
||||
import { ExternalLink, Wand2 } from 'lucide-svelte'
|
||||
import NodeWrapper from './NodeWrapper.svelte'
|
||||
import Popover from '$lib/components/Popover.svelte'
|
||||
@@ -30,53 +29,52 @@
|
||||
}>('FlowGraphContext')
|
||||
</script>
|
||||
|
||||
{#if data.insertable && !data.disableAi}
|
||||
<NodeToolbar isVisible position={Position.Top}>
|
||||
<Popover>
|
||||
<div class={openNoCopilot ? 'z-10' : ''}>
|
||||
<Menu pointerDown noMinW placement="bottom-center" let:close bind:show={openNoCopilot}>
|
||||
<button
|
||||
title="AI Flow Builder"
|
||||
on:pointerdown={$copilotInfo.exists_openai_resource_path
|
||||
? (ev) => {
|
||||
ev.preventDefault()
|
||||
ev.stopPropagation()
|
||||
$copilotDrawerStore?.openDrawer()
|
||||
}
|
||||
: undefined}
|
||||
slot="trigger"
|
||||
type="button"
|
||||
class=" bg-surface text-violet-800 dark:text-violet-400 border mx-0.5 focus:outline-none hover:bg-surface-hover focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-8 h-8 flex items-center justify-center"
|
||||
>
|
||||
<Wand2 size={16} />
|
||||
</button>
|
||||
{#if !$copilotInfo.exists_openai_resource_path}
|
||||
<div class="text-primary p-4">
|
||||
<p class="text-sm w-80">
|
||||
Enable Windmill AI in the
|
||||
<a
|
||||
href="{base}/workspace_settings?tab=openai"
|
||||
target="_blank"
|
||||
class="inline-flex flex-row items-center gap-1"
|
||||
on:click={() => {
|
||||
close()
|
||||
}}
|
||||
>
|
||||
workspace settings
|
||||
<ExternalLink size={16} />
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
</Menu>
|
||||
</div>
|
||||
|
||||
<svelte:fragment slot="text">AI Flow builder</svelte:fragment>
|
||||
</Popover>
|
||||
</NodeToolbar>
|
||||
{/if}
|
||||
|
||||
<NodeWrapper enableTargetHandle={false} let:darkMode>
|
||||
{#if data.insertable && !data.disableAi}
|
||||
<div class="absolute -top-10 left-1/2 transform -translate-x-1/2 z-10">
|
||||
<Popover>
|
||||
<div class={openNoCopilot ? 'z-10' : ''}>
|
||||
<Menu pointerDown noMinW placement="bottom-center" let:close bind:show={openNoCopilot}>
|
||||
<button
|
||||
title="AI Flow Builder"
|
||||
on:pointerdown={$copilotInfo.exists_openai_resource_path
|
||||
? (ev) => {
|
||||
ev.preventDefault()
|
||||
ev.stopPropagation()
|
||||
$copilotDrawerStore?.openDrawer()
|
||||
}
|
||||
: undefined}
|
||||
slot="trigger"
|
||||
type="button"
|
||||
class=" bg-surface text-violet-800 dark:text-violet-400 border mx-0.5 focus:outline-none hover:bg-surface-hover focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-8 h-8 flex items-center justify-center"
|
||||
>
|
||||
<Wand2 size={16} />
|
||||
</button>
|
||||
{#if !$copilotInfo.exists_openai_resource_path}
|
||||
<div class="text-primary p-4">
|
||||
<p class="text-sm w-80">
|
||||
Enable Windmill AI in the
|
||||
<a
|
||||
href="{base}/workspace_settings?tab=openai"
|
||||
target="_blank"
|
||||
class="inline-flex flex-row items-center gap-1"
|
||||
on:click={() => {
|
||||
close()
|
||||
}}
|
||||
>
|
||||
workspace settings
|
||||
<ExternalLink size={16} />
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
</Menu>
|
||||
</div>
|
||||
|
||||
<svelte:fragment slot="text">AI Flow builder</svelte:fragment>
|
||||
</Popover>
|
||||
</div>
|
||||
{/if}
|
||||
<VirtualItem
|
||||
label="Input"
|
||||
modules={data.modules}
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
<script lang="ts">
|
||||
import { NodeToolbar, Position } from '@xyflow/svelte'
|
||||
import MapItem from '$lib/components/flows/map/MapItem.svelte'
|
||||
import type { FlowModule, FlowModuleValue } from '$lib/gen'
|
||||
import { GitBranchPlus } from 'lucide-svelte'
|
||||
@@ -82,17 +81,17 @@
|
||||
data.eventHandlers.selectedIteration(e.detail, data.module.id)
|
||||
}}
|
||||
/>
|
||||
</NodeWrapper>
|
||||
|
||||
<NodeToolbar isVisible position={Position.Bottom} align="center">
|
||||
{#if (data.value.type === 'branchall' || data.value.type === 'branchone') && data.insertable}
|
||||
<button
|
||||
class="rounded-full border hover:bg-surface-hover bg-surface p-1"
|
||||
on:click={() => {
|
||||
data?.eventHandlers?.newBranch(data.module)
|
||||
}}
|
||||
>
|
||||
<GitBranchPlus size={16} />
|
||||
</button>
|
||||
{/if}
|
||||
</NodeToolbar>
|
||||
<div class="absolute -bottom-10 left-1/2 transform -translate-x-1/2 z-10">
|
||||
{#if (data.value.type === 'branchall' || data.value.type === 'branchone') && data.insertable}
|
||||
<button
|
||||
class="rounded-full border hover:bg-surface-hover bg-surface p-1"
|
||||
on:click={() => {
|
||||
data?.eventHandlers?.newBranch(data.module)
|
||||
}}
|
||||
>
|
||||
<GitBranchPlus size={16} />
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</NodeWrapper>
|
||||
|
||||
Reference in New Issue
Block a user