starred/windmill
1
0
Fork 0
mirror of https://github.com/windmill-labs/windmill.git synced 2026-08-22 00:01:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: make graph rendering uniform across all rem (#2553)

Browse Source 
* graphfix

* fix graph rendering

* fix graph rendering
This commit is contained in:
Ruben Fiszel
2023-11-03 16:00:07 +01:00
committed by GitHub
parent c2d7db7243
commit 17f85b8f1a
6 changed files with 31 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte
+5 -4
View File
@@ -39,6 +39,7 @@
</script>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
class={classNames(
'w-full module flex rounded-sm cursor-pointer',
@@ -145,22 +146,22 @@
</div>
{#if deletable}
<button
class="absolute -top-2 -right-2 rounded-full h-4 w-4 trash center-center text-primary
class="absolute -top-[10px] -right-[10px] rounded-full h-[20px] w-[20px] trash center-center text-primary
border-[1.5px] border-gray-700 bg-surface duration-150 hover:bg-red-400 hover:text-white
hover:border-red-700 {selected ? '' : '!hidden'}"
on:click|preventDefault|stopPropagation={(event) =>
dispatch('delete', { event, id, type: modType })}
>
<X size={12} strokeWidth={2} />
<X class="mx-[3px]" size={14} strokeWidth={2} />
</button>
<button
class="absolute -top-2 right-10 rounded-full h-4 w-4 trash center-center text-primary
class="absolute -top-[10px] right-[35px] rounded-full h-[20px] w-[20px] trash center-center text-primary
border-[1.5px] border-gray-700 bg-surface duration-150 hover:bg-blue-400 hover:text-white
hover:border-blue-700 {selected ? '' : '!hidden'}"
on:click|preventDefault|stopPropagation={(event) => dispatch('move')}
>
<Move size={12} strokeWidth={2} />
<Move class="mx-[3px]" size={14} strokeWidth={2} />
</button>
{/if}
</div>
frontend/src/lib/components/flows/map/InsertModuleButton.svelte
+2 -2
View File
@@ -38,9 +38,9 @@
slot="trigger"
id={`flow-editor-add-step-${index}`}
type="button"
class="text-primary bg-surface border mx-0.5 focus:outline-none hover:bg-surface-hover focus:ring-4 focus:ring-surface-selected font-medium rounded-full text-sm w-6 h-6 flex items-center justify-center"
class="text-primary bg-surface border-[1px] mx-[1px] border-gray-300 dark:border-gray-500 focus:outline-none hover:bg-surface-hover focus:ring-4 focus:ring-surface-selected font-medium rounded-full text-sm w-[25px] h-[25px] flex items-center justify-center"
>
<Cross size={12} />
<Cross class="mx-[5px]" size={15} />
</button>
<div id="flow-editor-insert-module ">
{#if !disableAi}
frontend/src/lib/components/flows/map/InsertTriggerButton.svelte
+1 -1
View File
@@ -28,7 +28,7 @@
title="Add a Trigger"
slot="trigger"
type="button"
class="text-primary bg-surface border mx-0.5 rotate-180 focus:outline-none hover:bg-surface-hover focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-6 h-6 flex items-center justify-center"
class="text-primary bg-surface border-[1px] mx-[1px] border-gray-300 dark:border-gray-500 rotate-180 focus:outline-none hover:bg-surface-hover focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-[25px] h-[25px] flex items-center justify-center"
>
<Icon data={faBolt} scale={0.8} />
</button>
frontend/src/lib/components/flows/map/MapItem.svelte
+13 -9
View File
@@ -61,7 +61,9 @@
{#if mod}
{#if insertable}
<div
class="{openMenu ? 'z-20' : ''} w-7 absolute -top-9 left-[50%] right-[50%] -translate-x-1/2"
class="{openMenu
? 'z-20'
: ''} w-[27px] absolute -top-[35px] left-[50%] right-[50%] -translate-x-1/2"
>
{#if moving}
<button
@@ -70,9 +72,9 @@
dispatch('insert', { modules, index: idx, detail: 'move' })
}}
type="button"
class=" text-primary bg-surface border mx-0.5 border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-6 h-6 flex items-center justify-center"
class=" text-primary bg-surface border mx-[1px] border-gray-300 dark:border-gray-500 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-[25px] h-[25px] flex items-center justify-center"
>
<ClipboardCopy size={12} />
<ClipboardCopy class="m-[5px]" size={15} />
</button>
{:else}
<InsertModuleButton
@@ -203,7 +205,9 @@
</div>
{#if insertable && insertableEnd}
<div
class="{openMenu2 ? 'z-20' : ''} w-7 absolute top-11 left-[50%] right-[50%] -translate-x-1/2"
class="{openMenu2
? 'z-20'
: ''} w-[27px] absolute top-[49px] left-[50%] right-[50%] -translate-x-1/2"
>
{#if moving}
<button
@@ -212,9 +216,9 @@
dispatch('insert', { modules, index: idx + 1, detail: 'move' })
}}
type="button"
class=" text-primary bg-surface border mx-0.5 border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-6 h-6 flex items-center justify-center"
class=" text-primary bg-surface border mx-[1px] border-gray-300 dark:border-gray-500 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-[25px] h-[25px] flex items-center justify-center"
>
<ClipboardCopy size={12} />
<ClipboardCopy class="m-[5px]" size={15} />
</button>
{:else}
<InsertModuleButton
@@ -232,7 +236,7 @@
{/if}
{#if insertable && branchable}
<div class="w-7 absolute top-11 left-[60%] right-[40%] -translate-x-1/2">
<div class="w-[27px] absolute top-[45px] left-[60%] right-[40%] -translate-x-1/2">
<button
title="Add branch"
on:click={() => {
@@ -240,9 +244,9 @@
}}
type="button"
id="add-branch-button"
class=" text-primary bg-surface border mx-0.5 rotate-180 border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-6 h-6 flex items-center justify-center"
class=" text-primary bg-surface border mx-[1px] rotate-180 dark:border-gray-500 border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-[25px] h-[25px] flex items-center justify-center"
>
<GitBranchPlus size={12} />
<GitBranchPlus class="m-[5px]" size={15} />
</button>
</div>
{/if}
frontend/src/lib/components/flows/map/VirtualItem.svelte
+10 -11
View File
@@ -19,7 +19,6 @@
export let bgColor: string = ''
export let selected: boolean
export let selectable: boolean
export let whereInsert: 'before' | 'after' = 'after'
export let deleteBranch: { module: FlowModule; index: number } | undefined = undefined
export let id: string | undefined = undefined
export let moving: string | undefined = undefined
@@ -44,7 +43,7 @@
</script>
{#if insertable && deleteBranch}
<div class="w-7 absolute -top-10 left-[50%] right-[50%] -translate-x-1/2">
<div class="w-[27px] absolute -top-[40px] left-[50%] right-[50%] -translate-x-1/2">
<button
title="Delete branch"
on:click|stopPropagation={() => {
@@ -53,9 +52,9 @@
}
}}
type="button"
class="text-primary bg-surface border mx-0.5 border-gray-300 focus:outline-none hover:bg-surface-hover focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-6 h-6 flex items-center justify-center"
class="text-primary bg-surface border mx-[1px] border-gray-300 dark:border-gray-500 focus:outline-none hover:bg-surface-hover focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-[25px] h-[25px] flex items-center justify-center"
>
<X size={14} />
<X class="m-[5px]" size={15} />
</button>
</div>
{/if}
@@ -101,9 +100,9 @@
{#if insertable && modules && (label != 'Input' || modules.length == 0)}
<div
class="{openMenu ? 'z-20' : ''} w-7 absolute {whereInsert == 'after'
? 'top-12'
: '-top-10'} left-[50%] right-[50%] -translate-x-1/2"
class="{openMenu
? 'z-20'
: ''} w-[27px] absolute top-[49px] left-[50%] right-[50%] -translate-x-1/2"
>
{#if moving}
<button
@@ -118,7 +117,7 @@
}
}}
type="button"
class="text-primary bg-surface border mx-0.5 border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-6 h-6 flex items-center justify-center"
class="text-primary bg-surface border mx-[1px] border-gray-300 dark:border-gray-500 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-[25px] h-[25px] flex items-center justify-center"
>
<ClipboardCopy size={12} />
</button>
@@ -131,12 +130,12 @@
if (modules) {
dispatch('insert', {
modules,
index: whereInsert == 'after' ? index : index - 1,
index: index,
detail: e.detail
})
}
}}
index={whereInsert == 'after' ? index : index - 1}
{index}
modules={modules ?? []}
/>
{/if}
@@ -188,7 +187,7 @@
<div
class="{triggerOpenMenu
? 'z-10'
: ''} w-7 absolute top-12 left-[65%] right-[35%] -translate-x-1/2"
: ''} w-[27px] absolute top-[50px] left-[65%] right-[35%] -translate-x-1/2"
>
<InsertTriggerButton
{disableAi}
frontend/src/lib/components/graph/FlowGraph.svelte
-9
View File
@@ -106,7 +106,6 @@
getParentIds(),
'Input',
modules,
'after',
undefined,
undefined,
0,
@@ -134,7 +133,6 @@
getParentIds(),
'Result',
undefined,
'before',
undefined,
undefined,
0,
@@ -398,7 +396,6 @@
getParentIds(loop.items),
`Do one iteration`,
innerModules,
'after',
undefined,
1000,
loopDepth + 1,
@@ -425,7 +422,6 @@
getParentIds(loop.items),
`Collect result of each iteration`,
modules,
'after',
undefined,
1000,
loopDepth,
@@ -466,7 +462,6 @@
branchParent,
'No branches',
undefined,
'after',
undefined,
0,
loopDepth,
@@ -486,7 +481,6 @@
branchParent,
summary,
modules,
'after',
edgesLabel[i],
undefined,
loopDepth,
@@ -521,7 +515,6 @@
bitems.map((i) => getParentIds(i)).flat(),
branchall ? 'Collect result of each branch' : 'Result of the chosen branch',
modules,
'after',
undefined,
0,
loopDepth,
@@ -653,7 +646,6 @@
parentIds: string[],
label: string,
modules: FlowModule[] | undefined,
whereInsert: 'before' | 'after' | undefined,
edgeLabel: string | undefined,
offset: number | undefined,
loopDepth: number,
@@ -690,7 +682,6 @@
selected: $selectedId == label,
index,
selectable,
whereInsert,
deleteBranch,
id: mid,
moving,