feat: better graph layout algorithm + migrate to svelte 5 almost everywhere + xyflow 1.0

This commit is contained in:
Ruben Fiszel
2025-06-12 15:44:35 +02:00
committed by GitHub
parent d47c078bb5
commit 23920aee84
310 changed files with 15286 additions and 11439 deletions
@@ -21,7 +21,7 @@
on:error
on:skipAll
getSteps={(driver, options) => {
const index = options?.indexToInsertAt ?? $flowStore.value.modules.length
const index = options?.indexToInsertAt ?? flowStore.val.value.modules.length
const steps = [
{
@@ -23,8 +23,8 @@
on:error
on:skipAll
getSteps={(driver, options) => {
const id = nextId($flowStateStore, $flowStore)
const index = options?.indexToInsertAt ?? $flowStore.value.modules.length
const id = nextId($flowStateStore, flowStore.val)
const index = options?.indexToInsertAt ?? flowStore.val.value.modules.length
const steps = [
{
@@ -77,7 +77,7 @@
onNextClick: () => {
clickButtonBySelector('#flow-editor-edit-predicate')
updateFlowModuleById($flowStore, id, (module) => {
updateFlowModuleById(flowStore.val, id, (module) => {
if (module.value.type === 'branchone') {
module.value.branches[0].expr = "result.a === 'foo'"
}
@@ -27,7 +27,7 @@
title: 'Error handler tutorial',
description: 'Learn how to recover from an error. You can use arrow keys to navigate.',
onNextClick: () => {
$flowStore.value.modules = [
flowStore.val.value.modules = [
{
id: 'a',
value: {
@@ -26,8 +26,8 @@
on:error
on:skipAll
getSteps={(driver, options) => {
const id = nextId($flowStateStore, $flowStore)
const index = options?.indexToInsertAt ?? $flowStore.value.modules.length
const id = nextId($flowStateStore, flowStore.val)
const index = options?.indexToInsertAt ?? flowStore.val.value.modules.length
let tempId = ''
@@ -84,7 +84,7 @@
description:
'The iterator expression is a JavaScript expression that respresents the array to iterate on. Here we will iterate on the firstname input letter by letter',
onNextClick: () => {
updateFlowModuleById($flowStore, id, (module) => {
updateFlowModuleById(flowStore.val, id, (module) => {
if (module.value.type === 'forloopflow') {
if (module.value.iterator.type === 'javascript') {
module.value.iterator.expr = '[1,2,3]'
@@ -108,8 +108,8 @@
description:
'We can refer to the result of previous steps using the results object: results.a or use static values like [1,2,3] in this case.',
onNextClick: () => {
updateFlowModuleById($flowStore, id, (module) => {
const newId = nextId($flowStateStore, $flowStore)
updateFlowModuleById(flowStore.val, id, (module) => {
const newId = nextId($flowStateStore, flowStore.val)
tempId = newId
if (module.value.type === 'forloopflow') {
@@ -159,7 +159,6 @@
description: 'We added an action to the loop. Lets configure it',
onNextClick: () => {
$selectedId = tempId
$flowStore = $flowStore
dispatch('reload')
setTimeout(() => {
@@ -204,7 +203,7 @@
title: 'Connect',
description: 'As we did before, we can connect to the iterator of the loop',
onNextClick: () => {
updateFlowModuleById($flowStore, id, (module) => {
updateFlowModuleById(flowStore.val, id, (module) => {
if (
module.value.type === 'forloopflow' &&
module.value.modules[0].value.type === 'rawscript'
@@ -10,6 +10,7 @@
waitForElementLoading
} from './utils'
import Tutorial from './Tutorial.svelte'
import { refreshStateStore } from '$lib/svelte5Utils.svelte'
const { flowStore } = getContext<FlowEditorContext>('FlowEditorContext')
const dispatch = createEventDispatcher()
@@ -25,7 +26,7 @@
bind:this={tutorial}
index={0}
name="action"
tainted={isFlowTainted($flowStore)}
tainted={isFlowTainted(flowStore.val)}
on:error
on:skipAll
getSteps={(driver) => [
@@ -182,8 +183,8 @@
title: 'Connection mode',
description: 'Once you pressed the connect button, you can choose what to connect to.',
onNextClick: () => {
if ($flowStore.value.modules[0].value.type === 'rawscript') {
$flowStore.value.modules[0].value.input_transforms = {
if (flowStore.val.value.modules[0].value.type === 'rawscript') {
flowStore.val.value.modules[0].value.input_transforms = {
x: {
type: 'javascript',
expr: 'flow_input.firstname'
@@ -191,7 +192,7 @@
}
}
$flowStore = $flowStore
refreshStateStore(flowStore)
dispatch('reload')
setTimeout(() => {