move setTimeout upwards

This commit is contained in:
Diego Imbert
2025-04-16 16:26:44 +02:00
parent 82dd084e11
commit 80dd6e48f6
12 changed files with 24 additions and 32 deletions
@@ -204,12 +204,7 @@
style="width: 275px; height: 38px; background-color: {bgColor};"
on:mouseenter={() => (hover = true)}
on:mouseleave={() => (hover = false)}
on:pointerdown|preventDefault|stopPropagation={() =>
// setTimeout to avoid freezing event loop that handles css on pointerdown
// which makes the button feel reactive
setTimeout(() => {
dispatch('pointerdown')
})}
on:pointerdown|preventDefault|stopPropagation={() => dispatch('pointerdown')}
>
<div class="absolute text-sm right-12 -bottom-3 flex flex-row gap-1 z-10">
{#if retry}
@@ -122,7 +122,7 @@
on:changeId
on:move={() => dispatch('move')}
on:delete={onDelete}
on:pointerdown={() => dispatch('select', mod.id)}
on:pointerdown={() => setTimeout(() => dispatch('select', mod.id))}
on:updateMock={({ detail }) => {
mod.mock = detail
dispatch('updateMock')
@@ -148,7 +148,7 @@
on:changeId
on:delete={onDelete}
on:move={() => dispatch('move')}
on:pointerdown={() => dispatch('select', mod.id)}
on:pointerdown={() => setTimeout(() => dispatch('select', mod.id))}
{...itemProps}
id={mod.id}
label={mod.summary || 'Run one branch'}
@@ -165,7 +165,7 @@
on:changeId
on:delete={onDelete}
on:move={() => dispatch('move')}
on:pointerdown={() => dispatch('select', mod.id)}
on:pointerdown={() => setTimeout(() => dispatch('select', mod.id))}
id={mod.id}
{...itemProps}
label={mod.summary || `Run all branches${mod.value.parallel ? ' (parallel)' : ''}`}
@@ -180,7 +180,7 @@
{retries}
{editMode}
on:changeId
on:pointerdown={() => dispatch('select', mod.id)}
on:pointerdown={() => setTimeout(() => dispatch('select', mod.id))}
on:delete={onDelete}
on:move={() => dispatch('move')}
on:updateMock={({ detail }) => {
@@ -34,13 +34,9 @@
)}
style="width: 275px; max-height: 38px; background-color: {bgColor};"
on:pointerdown={() => {
// setTimeout to avoid freezing event loop that handles css on pointerdown
// which makes the button feel reactive
setTimeout(() => {
if (selectable) {
dispatch('select', id || label || '')
}
})
if (selectable) {
dispatch('select', id || label || '')
}
}}
on:mouseenter={() => {
hover = true
@@ -37,10 +37,10 @@
? getStateColor(borderStatus, darkMode) + (!darkMode ? '; border-width: 3px' : '')
: undefined}
on:select={() => {
data.eventHandlers.select(data.id)
setTimeout(() => data.eventHandlers.select(data.id))
}}
on:insert={(e) => {
data.eventHandlers.insert(e.detail)
setTimeout(() => data.eventHandlers.insert(e.detail))
}}
/>
{#if data.insertable}
@@ -26,7 +26,6 @@
'branchone',
data.flowModuleStates?.[data.id]
)
</script>
<NodeWrapper let:darkMode offset={data.offset}>
@@ -38,7 +37,7 @@
bgColor={getStateColor(undefined, darkMode)}
borderColor={borderStatus ? getStateColor(borderStatus, darkMode) : undefined}
on:select={() => {
data.eventHandlers.select(data.id)
setTimeout(() => data?.eventHandlers?.select(data.id))
}}
/>
{#if data.insertable}
@@ -26,7 +26,7 @@
bgColor={getStateColor(undefined, darkMode)}
borderColor={getStateColor(data.flowModuleStates?.[data.id]?.type, darkMode)}
on:select={(e) => {
data?.eventHandlers?.select(e.detail)
setTimeout(() => data?.eventHandlers?.select(e.detail))
}}
/>
{:else}
@@ -38,7 +38,7 @@
bgColor={getStateColor(undefined, darkMode)}
borderColor={getStateColor(data.flowModuleStates?.[data.id]?.type, darkMode)}
on:select={(e) => {
data?.eventHandlers?.select(e.detail)
setTimeout(() => data?.eventHandlers?.select(e.detail))
}}
/>
{/if}
@@ -38,9 +38,11 @@
return {}
}
function computeStatus(state: GraphModuleState | undefined): FlowStatusModule["type"] | undefined {
function computeStatus(
state: GraphModuleState | undefined
): FlowStatusModule['type'] | undefined {
if (state?.type == 'InProgress' || state?.type == 'Success' || state?.type == 'Failure') {
let r = state?.flow_jobs_success?.[state?.selectedForloopIndex ?? 0]
let r = state?.flow_jobs_success?.[state?.selectedForloopIndex ?? 0]
if (r == undefined) return 'InProgress'
return r ? 'Success' : 'InProgress'
}
@@ -79,7 +81,7 @@
bgColor={getStateColor(undefined, darkMode)}
borderColor={getStateColor(computeStatus(data.flowModuleStates?.[data.id]), darkMode)}
on:select={(e) => {
data?.eventHandlers?.select(e.detail)
setTimeout(() => data?.eventHandlers?.select(e.detail))
}}
inputJson={filteredInput}
prefix="flow_input"
@@ -74,10 +74,10 @@
selected={$selectedId === 'Input'}
bgColor={getStateColor(undefined, darkMode)}
on:insert={(e) => {
data.eventHandlers?.insert(e.detail)
setTimeout(() => data?.eventHandlers?.insert(e.detail))
}}
on:select={(e) => {
data.eventHandlers?.select(e.detail)
setTimeout(() => data?.eventHandlers?.select(e.detail))
}}
inputJson={topFlowInput}
prefix="flow_input"
@@ -33,7 +33,7 @@
bgColor={getStateColor(undefined, darkMode)}
borderColor={getStateColor(borderStatus, darkMode)}
on:select={(e) => {
data?.eventHandlers?.select(e.detail)
setTimeout(() => data?.eventHandlers?.select(e.detail))
}}
/>
</NodeWrapper>
@@ -30,7 +30,7 @@
darkMode
)}
on:select={(e) => {
data?.eventHandlers?.select(e.detail)
setTimeout(() => data?.eventHandlers?.select(e.detail))
}}
/>
</NodeWrapper>
@@ -30,7 +30,7 @@
bgColor={getStateColor(undefined, darkMode)}
borderColor={undefined}
on:select={() => {
data.eventHandlers.select(data.id)
setTimeout(() => data.eventHandlers?.select(data.id))
}}
/>
<button
@@ -23,7 +23,7 @@
bgColor={getStateColor(undefined, darkMode)}
borderColor={getStateColor(data?.flowModuleStates?.[data?.id]?.type, darkMode)}
on:select={(e) => {
data?.eventHandlers?.select(e.detail)
setTimeout(() => data?.eventHandlers?.select(e.detail))
}}
/>
</NodeWrapper>