@d34dman/flowdrop 0.0.18 → 0.0.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +161 -400
- package/dist/api/enhanced-client.d.ts +2 -2
- package/dist/api/enhanced-client.js +5 -5
- package/dist/components/NotesNode.svelte +3 -3
- package/dist/components/NotesNode.svelte.d.ts +3 -3
- package/dist/components/SimpleNode.svelte +3 -3
- package/dist/components/SimpleNode.svelte.d.ts +3 -3
- package/dist/components/SquareNode.svelte +3 -3
- package/dist/components/SquareNode.svelte.d.ts +3 -3
- package/dist/components/TerminalNode.svelte +84 -66
- package/dist/components/TerminalNode.svelte.d.ts +3 -3
- package/dist/components/UniversalNode.svelte +7 -33
- package/dist/components/WorkflowEditor.svelte +1 -9
- package/dist/helpers/workflowEditorHelper.d.ts +3 -3
- package/dist/helpers/workflowEditorHelper.js +5 -7
- package/dist/index.d.ts +4 -7
- package/dist/index.js +2 -5
- package/dist/registry/builtinNodes.d.ts +2 -2
- package/dist/registry/builtinNodes.js +2 -2
- package/dist/services/api.d.ts +0 -5
- package/dist/services/api.js +0 -20
- package/dist/svelte-app.d.ts +0 -6
- package/dist/svelte-app.js +0 -8
- package/dist/types/auth.d.ts +0 -15
- package/dist/types/auth.js +0 -15
- package/dist/types/config.d.ts +11 -151
- package/dist/types/config.js +3 -0
- package/dist/types/index.d.ts +0 -6
- package/dist/utils/colors.d.ts +0 -5
- package/dist/utils/colors.js +3 -4
- package/dist/utils/config.d.ts +0 -8
- package/dist/utils/config.js +0 -14
- package/dist/utils/connections.d.ts +0 -5
- package/dist/utils/connections.js +10 -16
- package/dist/utils/icons.js +1 -1
- package/dist/utils/nodeTypes.d.ts +1 -1
- package/dist/utils/nodeTypes.js +3 -20
- package/package.json +149 -138
- package/dist/clients/ApiClient.d.ts +0 -199
- package/dist/clients/ApiClient.js +0 -214
- package/dist/config/apiConfig.d.ts +0 -34
- package/dist/config/apiConfig.js +0 -40
- package/dist/examples/adapter-usage.d.ts +0 -66
- package/dist/examples/adapter-usage.js +0 -133
- package/dist/examples/api-client-usage.d.ts +0 -32
- package/dist/examples/api-client-usage.js +0 -243
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
* @module api/enhanced-client
|
|
7
7
|
*/
|
|
8
8
|
import { buildEndpointUrl, getEndpointMethod, getEndpointHeaders } from '../config/endpoints.js';
|
|
9
|
-
import {
|
|
9
|
+
import { NoAuthProvider } from '../types/auth.js';
|
|
10
10
|
/**
|
|
11
11
|
* API error with additional context
|
|
12
12
|
*/
|
|
@@ -35,7 +35,7 @@ export class ApiError extends Error {
|
|
|
35
35
|
* // With AuthProvider
|
|
36
36
|
* const client = new EnhancedFlowDropApiClient(config, authProvider);
|
|
37
37
|
*
|
|
38
|
-
* //
|
|
38
|
+
* // Without authentication
|
|
39
39
|
* const client = new EnhancedFlowDropApiClient(config);
|
|
40
40
|
* ```
|
|
41
41
|
*/
|
|
@@ -46,12 +46,12 @@ export class EnhancedFlowDropApiClient {
|
|
|
46
46
|
* Create a new EnhancedFlowDropApiClient
|
|
47
47
|
*
|
|
48
48
|
* @param config - Endpoint configuration
|
|
49
|
-
* @param authProvider - Optional authentication provider (
|
|
49
|
+
* @param authProvider - Optional authentication provider (defaults to NoAuthProvider)
|
|
50
50
|
*/
|
|
51
51
|
constructor(config, authProvider) {
|
|
52
52
|
this.config = config;
|
|
53
|
-
// Use provided AuthProvider or
|
|
54
|
-
this.authProvider = authProvider ??
|
|
53
|
+
// Use provided AuthProvider or default to no authentication
|
|
54
|
+
this.authProvider = authProvider ?? new NoAuthProvider();
|
|
55
55
|
}
|
|
56
56
|
/**
|
|
57
57
|
* Make HTTP request with error handling, retry logic, and auth support
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
-
import type {
|
|
2
|
+
import type { ConfigValues, NodeMetadata } from '../types/index.js';
|
|
3
3
|
import Icon from '@iconify/svelte';
|
|
4
4
|
import { createEventDispatcher } from 'svelte';
|
|
5
5
|
import MarkdownDisplay from './MarkdownDisplay.svelte';
|
|
@@ -9,13 +9,13 @@
|
|
|
9
9
|
const props = $props<{
|
|
10
10
|
data: {
|
|
11
11
|
label: string;
|
|
12
|
-
config:
|
|
12
|
+
config: ConfigValues;
|
|
13
13
|
metadata: NodeMetadata;
|
|
14
14
|
nodeId?: string;
|
|
15
15
|
onConfigOpen?: (node: {
|
|
16
16
|
id: string;
|
|
17
17
|
type: string;
|
|
18
|
-
data: { label: string; config:
|
|
18
|
+
data: { label: string; config: ConfigValues; metadata: NodeMetadata };
|
|
19
19
|
}) => void;
|
|
20
20
|
};
|
|
21
21
|
selected?: boolean;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { ConfigValues, NodeMetadata } from '../types/index.js';
|
|
2
2
|
type $$ComponentProps = {
|
|
3
3
|
data: {
|
|
4
4
|
label: string;
|
|
5
|
-
config:
|
|
5
|
+
config: ConfigValues;
|
|
6
6
|
metadata: NodeMetadata;
|
|
7
7
|
nodeId?: string;
|
|
8
8
|
onConfigOpen?: (node: {
|
|
@@ -10,7 +10,7 @@ type $$ComponentProps = {
|
|
|
10
10
|
type: string;
|
|
11
11
|
data: {
|
|
12
12
|
label: string;
|
|
13
|
-
config:
|
|
13
|
+
config: ConfigValues;
|
|
14
14
|
metadata: NodeMetadata;
|
|
15
15
|
};
|
|
16
16
|
}) => void;
|
|
@@ -6,20 +6,20 @@
|
|
|
6
6
|
|
|
7
7
|
<script lang="ts">
|
|
8
8
|
import { Position, Handle } from '@xyflow/svelte';
|
|
9
|
-
import type {
|
|
9
|
+
import type { ConfigValues, NodeMetadata } from '../types/index.js';
|
|
10
10
|
import Icon from '@iconify/svelte';
|
|
11
11
|
import { getDataTypeColor } from '../utils/colors.js';
|
|
12
12
|
|
|
13
13
|
const props = $props<{
|
|
14
14
|
data: {
|
|
15
15
|
label: string;
|
|
16
|
-
config:
|
|
16
|
+
config: ConfigValues;
|
|
17
17
|
metadata: NodeMetadata;
|
|
18
18
|
nodeId?: string;
|
|
19
19
|
onConfigOpen?: (node: {
|
|
20
20
|
id: string;
|
|
21
21
|
type: string;
|
|
22
|
-
data: { label: string; config:
|
|
22
|
+
data: { label: string; config: ConfigValues; metadata: NodeMetadata };
|
|
23
23
|
}) => void;
|
|
24
24
|
};
|
|
25
25
|
selected?: boolean;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { ConfigValues, NodeMetadata } from '../types/index.js';
|
|
2
2
|
type $$ComponentProps = {
|
|
3
3
|
data: {
|
|
4
4
|
label: string;
|
|
5
|
-
config:
|
|
5
|
+
config: ConfigValues;
|
|
6
6
|
metadata: NodeMetadata;
|
|
7
7
|
nodeId?: string;
|
|
8
8
|
onConfigOpen?: (node: {
|
|
@@ -10,7 +10,7 @@ type $$ComponentProps = {
|
|
|
10
10
|
type: string;
|
|
11
11
|
data: {
|
|
12
12
|
label: string;
|
|
13
|
-
config:
|
|
13
|
+
config: ConfigValues;
|
|
14
14
|
metadata: NodeMetadata;
|
|
15
15
|
};
|
|
16
16
|
}) => void;
|
|
@@ -6,20 +6,20 @@
|
|
|
6
6
|
|
|
7
7
|
<script lang="ts">
|
|
8
8
|
import { Position, Handle } from '@xyflow/svelte';
|
|
9
|
-
import type {
|
|
9
|
+
import type { ConfigValues, NodeMetadata } from '../types/index.js';
|
|
10
10
|
import Icon from '@iconify/svelte';
|
|
11
11
|
import { getDataTypeColor } from '../utils/colors.js';
|
|
12
12
|
|
|
13
13
|
const props = $props<{
|
|
14
14
|
data: {
|
|
15
15
|
label: string;
|
|
16
|
-
config:
|
|
16
|
+
config: ConfigValues;
|
|
17
17
|
metadata: NodeMetadata;
|
|
18
18
|
nodeId?: string;
|
|
19
19
|
onConfigOpen?: (node: {
|
|
20
20
|
id: string;
|
|
21
21
|
type: string;
|
|
22
|
-
data: { label: string; config:
|
|
22
|
+
data: { label: string; config: ConfigValues; metadata: NodeMetadata };
|
|
23
23
|
}) => void;
|
|
24
24
|
};
|
|
25
25
|
selected?: boolean;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { ConfigValues, NodeMetadata } from '../types/index.js';
|
|
2
2
|
type $$ComponentProps = {
|
|
3
3
|
data: {
|
|
4
4
|
label: string;
|
|
5
|
-
config:
|
|
5
|
+
config: ConfigValues;
|
|
6
6
|
metadata: NodeMetadata;
|
|
7
7
|
nodeId?: string;
|
|
8
8
|
onConfigOpen?: (node: {
|
|
@@ -10,7 +10,7 @@ type $$ComponentProps = {
|
|
|
10
10
|
type: string;
|
|
11
11
|
data: {
|
|
12
12
|
label: string;
|
|
13
|
-
config:
|
|
13
|
+
config: ConfigValues;
|
|
14
14
|
metadata: NodeMetadata;
|
|
15
15
|
};
|
|
16
16
|
}) => void;
|
|
@@ -9,15 +9,15 @@
|
|
|
9
9
|
-->
|
|
10
10
|
|
|
11
11
|
<script lang="ts">
|
|
12
|
-
import { Position, Handle } from
|
|
13
|
-
import type {
|
|
14
|
-
import Icon from
|
|
15
|
-
import { getDataTypeColor } from
|
|
12
|
+
import { Position, Handle } from '@xyflow/svelte';
|
|
13
|
+
import type { ConfigValues, NodeMetadata } from '../types/index.js';
|
|
14
|
+
import Icon from '@iconify/svelte';
|
|
15
|
+
import { getDataTypeColor } from '../utils/colors.js';
|
|
16
16
|
|
|
17
17
|
/**
|
|
18
18
|
* Terminal node variant types
|
|
19
19
|
*/
|
|
20
|
-
type TerminalVariant =
|
|
20
|
+
type TerminalVariant = 'start' | 'end' | 'exit';
|
|
21
21
|
|
|
22
22
|
/**
|
|
23
23
|
* Configuration for each terminal variant
|
|
@@ -40,23 +40,23 @@
|
|
|
40
40
|
*/
|
|
41
41
|
const VARIANT_CONFIGS: Record<TerminalVariant, VariantConfig> = {
|
|
42
42
|
start: {
|
|
43
|
-
icon:
|
|
44
|
-
color:
|
|
45
|
-
label:
|
|
43
|
+
icon: 'mdi:play-circle',
|
|
44
|
+
color: '#10b981',
|
|
45
|
+
label: 'Start',
|
|
46
46
|
hasInputs: false,
|
|
47
47
|
hasOutputs: true
|
|
48
48
|
},
|
|
49
49
|
end: {
|
|
50
|
-
icon:
|
|
51
|
-
color:
|
|
52
|
-
label:
|
|
50
|
+
icon: 'mdi:stop-circle',
|
|
51
|
+
color: '#6b7280',
|
|
52
|
+
label: 'End',
|
|
53
53
|
hasInputs: true,
|
|
54
54
|
hasOutputs: false
|
|
55
55
|
},
|
|
56
56
|
exit: {
|
|
57
|
-
icon:
|
|
58
|
-
color:
|
|
59
|
-
label:
|
|
57
|
+
icon: 'mdi:close-circle',
|
|
58
|
+
color: '#ef4444',
|
|
59
|
+
label: 'Exit',
|
|
60
60
|
hasInputs: true,
|
|
61
61
|
hasOutputs: false
|
|
62
62
|
}
|
|
@@ -65,13 +65,13 @@
|
|
|
65
65
|
const props = $props<{
|
|
66
66
|
data: {
|
|
67
67
|
label: string;
|
|
68
|
-
config:
|
|
68
|
+
config: ConfigValues;
|
|
69
69
|
metadata: NodeMetadata;
|
|
70
70
|
nodeId?: string;
|
|
71
71
|
onConfigOpen?: (node: {
|
|
72
72
|
id: string;
|
|
73
73
|
type: string;
|
|
74
|
-
data: { label: string; config:
|
|
74
|
+
data: { label: string; config: ConfigValues; metadata: NodeMetadata };
|
|
75
75
|
}) => void;
|
|
76
76
|
};
|
|
77
77
|
selected?: boolean;
|
|
@@ -92,31 +92,36 @@
|
|
|
92
92
|
|
|
93
93
|
// Check metadata tags for variant hints
|
|
94
94
|
const tags = props.data.metadata?.tags || [];
|
|
95
|
-
if (tags.includes(
|
|
96
|
-
return
|
|
95
|
+
if (tags.includes('start') || tags.includes('entry')) {
|
|
96
|
+
return 'start';
|
|
97
97
|
}
|
|
98
|
-
if (tags.includes(
|
|
99
|
-
return
|
|
98
|
+
if (tags.includes('exit') || tags.includes('abort') || tags.includes('error')) {
|
|
99
|
+
return 'exit';
|
|
100
100
|
}
|
|
101
|
-
if (tags.includes(
|
|
102
|
-
return
|
|
101
|
+
if (tags.includes('end') || tags.includes('finish') || tags.includes('complete')) {
|
|
102
|
+
return 'end';
|
|
103
103
|
}
|
|
104
104
|
|
|
105
105
|
// Check metadata id/name for hints
|
|
106
|
-
const idLower = (props.data.metadata?.id ||
|
|
107
|
-
const nameLower = (props.data.metadata?.name ||
|
|
108
|
-
if (idLower.includes(
|
|
109
|
-
return
|
|
106
|
+
const idLower = (props.data.metadata?.id || '').toLowerCase();
|
|
107
|
+
const nameLower = (props.data.metadata?.name || '').toLowerCase();
|
|
108
|
+
if (idLower.includes('start') || nameLower.includes('start')) {
|
|
109
|
+
return 'start';
|
|
110
110
|
}
|
|
111
|
-
if (
|
|
112
|
-
|
|
111
|
+
if (
|
|
112
|
+
idLower.includes('exit') ||
|
|
113
|
+
idLower.includes('abort') ||
|
|
114
|
+
nameLower.includes('exit') ||
|
|
115
|
+
nameLower.includes('abort')
|
|
116
|
+
) {
|
|
117
|
+
return 'exit';
|
|
113
118
|
}
|
|
114
|
-
if (idLower.includes(
|
|
115
|
-
return
|
|
119
|
+
if (idLower.includes('end') || nameLower.includes('end')) {
|
|
120
|
+
return 'end';
|
|
116
121
|
}
|
|
117
122
|
|
|
118
123
|
// Default to start
|
|
119
|
-
return
|
|
124
|
+
return 'start';
|
|
120
125
|
}
|
|
121
126
|
|
|
122
127
|
let variant = $derived(getVariant());
|
|
@@ -131,8 +136,8 @@
|
|
|
131
136
|
*/
|
|
132
137
|
let terminalIcon = $derived(
|
|
133
138
|
(props.data.metadata?.icon as string) ||
|
|
134
|
-
|
|
135
|
-
|
|
139
|
+
(props.data.config?.icon as string) ||
|
|
140
|
+
variantConfig.icon
|
|
136
141
|
);
|
|
137
142
|
|
|
138
143
|
/**
|
|
@@ -140,18 +145,14 @@
|
|
|
140
145
|
*/
|
|
141
146
|
let terminalColor = $derived(
|
|
142
147
|
(props.data.metadata?.color as string) ||
|
|
143
|
-
|
|
144
|
-
|
|
148
|
+
(props.data.config?.color as string) ||
|
|
149
|
+
variantConfig.color
|
|
145
150
|
);
|
|
146
151
|
|
|
147
152
|
/**
|
|
148
153
|
* Get display label
|
|
149
154
|
*/
|
|
150
|
-
let displayLabel = $derived(
|
|
151
|
-
props.data.label ||
|
|
152
|
-
props.data.metadata?.name ||
|
|
153
|
-
variantConfig.label
|
|
154
|
-
);
|
|
155
|
+
let displayLabel = $derived(props.data.label || props.data.metadata?.name || variantConfig.label);
|
|
155
156
|
|
|
156
157
|
/**
|
|
157
158
|
* Check if metadata explicitly defines inputs (including empty array)
|
|
@@ -171,22 +172,22 @@
|
|
|
171
172
|
* Default trigger input port for end/exit nodes
|
|
172
173
|
*/
|
|
173
174
|
const DEFAULT_INPUT_PORT = {
|
|
174
|
-
id:
|
|
175
|
-
name:
|
|
176
|
-
type:
|
|
177
|
-
dataType:
|
|
178
|
-
description:
|
|
175
|
+
id: 'trigger',
|
|
176
|
+
name: 'Trigger',
|
|
177
|
+
type: 'input' as const,
|
|
178
|
+
dataType: 'trigger',
|
|
179
|
+
description: 'Workflow trigger input'
|
|
179
180
|
};
|
|
180
181
|
|
|
181
182
|
/**
|
|
182
183
|
* Default trigger output port for start nodes
|
|
183
184
|
*/
|
|
184
185
|
const DEFAULT_OUTPUT_PORT = {
|
|
185
|
-
id:
|
|
186
|
-
name:
|
|
187
|
-
type:
|
|
188
|
-
dataType:
|
|
189
|
-
description:
|
|
186
|
+
id: 'trigger',
|
|
187
|
+
name: 'Trigger',
|
|
188
|
+
type: 'output' as const,
|
|
189
|
+
dataType: 'trigger',
|
|
190
|
+
description: 'Workflow trigger output'
|
|
190
191
|
};
|
|
191
192
|
|
|
192
193
|
/**
|
|
@@ -233,8 +234,8 @@
|
|
|
233
234
|
function openConfigSidebar(): void {
|
|
234
235
|
if (props.data.onConfigOpen) {
|
|
235
236
|
const nodeForConfig = {
|
|
236
|
-
id: props.data.nodeId ||
|
|
237
|
-
type:
|
|
237
|
+
id: props.data.nodeId || 'unknown',
|
|
238
|
+
type: 'terminal',
|
|
238
239
|
data: props.data
|
|
239
240
|
};
|
|
240
241
|
props.data.onConfigOpen(nodeForConfig);
|
|
@@ -259,7 +260,7 @@
|
|
|
259
260
|
* Handle keyboard events for accessibility
|
|
260
261
|
*/
|
|
261
262
|
function handleKeydown(event: KeyboardEvent): void {
|
|
262
|
-
if (event.key ===
|
|
263
|
+
if (event.key === 'Enter' || event.key === ' ') {
|
|
263
264
|
event.preventDefault();
|
|
264
265
|
handleDoubleClick();
|
|
265
266
|
}
|
|
@@ -272,9 +273,9 @@
|
|
|
272
273
|
class:flowdrop-terminal-node--selected={props.selected}
|
|
273
274
|
class:flowdrop-terminal-node--processing={props.isProcessing}
|
|
274
275
|
class:flowdrop-terminal-node--error={props.isError}
|
|
275
|
-
class:flowdrop-terminal-node--start={variant ===
|
|
276
|
-
class:flowdrop-terminal-node--end={variant ===
|
|
277
|
-
class:flowdrop-terminal-node--exit={variant ===
|
|
276
|
+
class:flowdrop-terminal-node--start={variant === 'start'}
|
|
277
|
+
class:flowdrop-terminal-node--end={variant === 'end'}
|
|
278
|
+
class:flowdrop-terminal-node--exit={variant === 'exit'}
|
|
278
279
|
style="--terminal-color: {terminalColor};"
|
|
279
280
|
onclick={handleClick}
|
|
280
281
|
ondblclick={handleDoubleClick}
|
|
@@ -300,7 +301,9 @@
|
|
|
300
301
|
<Handle
|
|
301
302
|
type="target"
|
|
302
303
|
position={Position.Left}
|
|
303
|
-
style="background-color: {getDataTypeColor(
|
|
304
|
+
style="background-color: {getDataTypeColor(
|
|
305
|
+
port.dataType
|
|
306
|
+
)}; border-color: #ffffff; top: 50%; transform: translateY(-50%); z-index: 30;"
|
|
304
307
|
id={`${props.data.nodeId}-input-${port.id}`}
|
|
305
308
|
/>
|
|
306
309
|
{/each}
|
|
@@ -322,7 +325,9 @@
|
|
|
322
325
|
type="source"
|
|
323
326
|
position={Position.Right}
|
|
324
327
|
id={`${props.data.nodeId}-output-${port.id}`}
|
|
325
|
-
style="background-color: {getDataTypeColor(
|
|
328
|
+
style="background-color: {getDataTypeColor(
|
|
329
|
+
port.dataType
|
|
330
|
+
)}; border-color: #ffffff; top: 50%; transform: translateY(-50%); z-index: 30;"
|
|
326
331
|
/>
|
|
327
332
|
{/each}
|
|
328
333
|
{/if}
|
|
@@ -377,17 +382,23 @@
|
|
|
377
382
|
display: flex;
|
|
378
383
|
align-items: center;
|
|
379
384
|
justify-content: center;
|
|
380
|
-
box-shadow:
|
|
385
|
+
box-shadow:
|
|
386
|
+
0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
|
387
|
+
0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
381
388
|
transition: all 0.2s ease-in-out;
|
|
382
389
|
}
|
|
383
390
|
|
|
384
391
|
.flowdrop-terminal-node:hover .flowdrop-terminal-node__content {
|
|
385
|
-
box-shadow:
|
|
392
|
+
box-shadow:
|
|
393
|
+
0 10px 15px -3px rgba(0, 0, 0, 0.1),
|
|
394
|
+
0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
|
386
395
|
transform: scale(1.05);
|
|
387
396
|
}
|
|
388
397
|
|
|
389
398
|
.flowdrop-terminal-node--selected .flowdrop-terminal-node__content {
|
|
390
|
-
box-shadow:
|
|
399
|
+
box-shadow:
|
|
400
|
+
0 10px 15px -3px rgba(0, 0, 0, 0.1),
|
|
401
|
+
0 0 0 3px rgba(59, 130, 246, 0.5);
|
|
391
402
|
border-color: #3b82f6;
|
|
392
403
|
}
|
|
393
404
|
|
|
@@ -402,19 +413,27 @@
|
|
|
402
413
|
|
|
403
414
|
/* Variant-specific glow effects */
|
|
404
415
|
.flowdrop-terminal-node--start .flowdrop-terminal-node__content {
|
|
405
|
-
box-shadow:
|
|
416
|
+
box-shadow:
|
|
417
|
+
0 4px 6px -1px rgba(16, 185, 129, 0.2),
|
|
418
|
+
0 2px 4px -1px rgba(16, 185, 129, 0.1);
|
|
406
419
|
}
|
|
407
420
|
|
|
408
421
|
.flowdrop-terminal-node--start:hover .flowdrop-terminal-node__content {
|
|
409
|
-
box-shadow:
|
|
422
|
+
box-shadow:
|
|
423
|
+
0 10px 15px -3px rgba(16, 185, 129, 0.3),
|
|
424
|
+
0 4px 6px -2px rgba(16, 185, 129, 0.15);
|
|
410
425
|
}
|
|
411
426
|
|
|
412
427
|
.flowdrop-terminal-node--exit .flowdrop-terminal-node__content {
|
|
413
|
-
box-shadow:
|
|
428
|
+
box-shadow:
|
|
429
|
+
0 4px 6px -1px rgba(239, 68, 68, 0.2),
|
|
430
|
+
0 2px 4px -1px rgba(239, 68, 68, 0.1);
|
|
414
431
|
}
|
|
415
432
|
|
|
416
433
|
.flowdrop-terminal-node--exit:hover .flowdrop-terminal-node__content {
|
|
417
|
-
box-shadow:
|
|
434
|
+
box-shadow:
|
|
435
|
+
0 10px 15px -3px rgba(239, 68, 68, 0.3),
|
|
436
|
+
0 4px 6px -2px rgba(239, 68, 68, 0.15);
|
|
418
437
|
}
|
|
419
438
|
|
|
420
439
|
:global(.flowdrop-terminal-node__icon) {
|
|
@@ -562,4 +581,3 @@
|
|
|
562
581
|
outline-offset: 2px !important;
|
|
563
582
|
}
|
|
564
583
|
</style>
|
|
565
|
-
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { ConfigValues, NodeMetadata } from '../types/index.js';
|
|
2
2
|
type $$ComponentProps = {
|
|
3
3
|
data: {
|
|
4
4
|
label: string;
|
|
5
|
-
config:
|
|
5
|
+
config: ConfigValues;
|
|
6
6
|
metadata: NodeMetadata;
|
|
7
7
|
nodeId?: string;
|
|
8
8
|
onConfigOpen?: (node: {
|
|
@@ -10,7 +10,7 @@ type $$ComponentProps = {
|
|
|
10
10
|
type: string;
|
|
11
11
|
data: {
|
|
12
12
|
label: string;
|
|
13
|
-
config:
|
|
13
|
+
config: ConfigValues;
|
|
14
14
|
metadata: NodeMetadata;
|
|
15
15
|
};
|
|
16
16
|
}) => void;
|
|
@@ -15,15 +15,6 @@
|
|
|
15
15
|
import { shouldShowNodeStatus } from '../utils/nodeWrapper.js';
|
|
16
16
|
import { resolveComponentName } from '../utils/nodeTypes.js';
|
|
17
17
|
|
|
18
|
-
// Fallback components for when registry is not available
|
|
19
|
-
// These are only used as last-resort fallbacks
|
|
20
|
-
import WorkflowNodeComponent from './WorkflowNode.svelte';
|
|
21
|
-
import NotesNode from './NotesNode.svelte';
|
|
22
|
-
import SimpleNode from './SimpleNode.svelte';
|
|
23
|
-
import SquareNode from './SquareNode.svelte';
|
|
24
|
-
import ToolNode from './ToolNode.svelte';
|
|
25
|
-
import GatewayNode from './GatewayNode.svelte';
|
|
26
|
-
|
|
27
18
|
let {
|
|
28
19
|
data,
|
|
29
20
|
selected = false
|
|
@@ -52,7 +43,6 @@
|
|
|
52
43
|
|
|
53
44
|
/**
|
|
54
45
|
* Get the node component from the registry.
|
|
55
|
-
* Falls back to built-in components if registry lookup fails.
|
|
56
46
|
*/
|
|
57
47
|
let nodeComponent = $derived(getNodeComponent(resolvedComponentName));
|
|
58
48
|
|
|
@@ -70,8 +60,7 @@
|
|
|
70
60
|
);
|
|
71
61
|
|
|
72
62
|
/**
|
|
73
|
-
* Get the node component for the given type.
|
|
74
|
-
* First tries the registry, then falls back to hardcoded components.
|
|
63
|
+
* Get the node component for the given type from the registry.
|
|
75
64
|
*
|
|
76
65
|
* @param nodeType - The node type identifier
|
|
77
66
|
* @returns The Svelte component to render
|
|
@@ -80,29 +69,14 @@
|
|
|
80
69
|
// Resolve any aliases (e.g., "default" -> "workflowNode")
|
|
81
70
|
const resolvedType = resolveBuiltinAlias(nodeType);
|
|
82
71
|
|
|
83
|
-
//
|
|
84
|
-
const
|
|
85
|
-
if (
|
|
86
|
-
return
|
|
72
|
+
// Get component from registry (defaults to workflowNode if not found)
|
|
73
|
+
const component = nodeComponentRegistry.getComponent(resolvedType);
|
|
74
|
+
if (component) {
|
|
75
|
+
return component;
|
|
87
76
|
}
|
|
88
77
|
|
|
89
|
-
//
|
|
90
|
-
|
|
91
|
-
switch (resolvedType) {
|
|
92
|
-
case 'note':
|
|
93
|
-
return NotesNode;
|
|
94
|
-
case 'simple':
|
|
95
|
-
return SimpleNode;
|
|
96
|
-
case 'square':
|
|
97
|
-
return SquareNode;
|
|
98
|
-
case 'tool':
|
|
99
|
-
return ToolNode;
|
|
100
|
-
case 'gateway':
|
|
101
|
-
return GatewayNode;
|
|
102
|
-
case 'workflowNode':
|
|
103
|
-
default:
|
|
104
|
-
return WorkflowNodeComponent;
|
|
105
|
-
}
|
|
78
|
+
// Return the default component from registry
|
|
79
|
+
return nodeComponentRegistry.getComponent('workflowNode');
|
|
106
80
|
}
|
|
107
81
|
|
|
108
82
|
/**
|
|
@@ -244,16 +244,8 @@
|
|
|
244
244
|
|
|
245
245
|
// Node types for Svelte Flow - using UniversalNode for all node types
|
|
246
246
|
// All nodes use 'universalNode' type, and UniversalNode handles internal switching
|
|
247
|
-
// Include legacy types for backward compatibility with existing workflows
|
|
248
247
|
const nodeTypes = {
|
|
249
|
-
universalNode: UniversalNode
|
|
250
|
-
// Legacy types for backward compatibility
|
|
251
|
-
workflowNode: UniversalNode,
|
|
252
|
-
note: UniversalNode,
|
|
253
|
-
simple: UniversalNode,
|
|
254
|
-
square: UniversalNode,
|
|
255
|
-
tool: UniversalNode,
|
|
256
|
-
gateway: UniversalNode
|
|
248
|
+
universalNode: UniversalNode
|
|
257
249
|
};
|
|
258
250
|
|
|
259
251
|
// Handle arrows in our custom connection handler
|
|
@@ -24,10 +24,10 @@ export declare class EdgeStylingHelper {
|
|
|
24
24
|
/**
|
|
25
25
|
* Extract the port ID from a handle ID
|
|
26
26
|
* Supports two formats:
|
|
27
|
-
* 1.
|
|
28
|
-
* 2.
|
|
27
|
+
* 1. Standard format: "${nodeId}-output-${portId}" or "${nodeId}-input-${portId}"
|
|
28
|
+
* 2. Short format: just the portId (e.g., "text", "trigger")
|
|
29
29
|
* @param handleId - The handle ID string (e.g., "sample-node.1-output-trigger" or "trigger")
|
|
30
|
-
* @returns The port ID (e.g., "trigger") or the handleId itself for
|
|
30
|
+
* @returns The port ID (e.g., "trigger") or the handleId itself for short format
|
|
31
31
|
*/
|
|
32
32
|
static extractPortIdFromHandle(handleId: string | undefined): string | null;
|
|
33
33
|
/**
|
|
@@ -36,16 +36,16 @@ export class EdgeStylingHelper {
|
|
|
36
36
|
/**
|
|
37
37
|
* Extract the port ID from a handle ID
|
|
38
38
|
* Supports two formats:
|
|
39
|
-
* 1.
|
|
40
|
-
* 2.
|
|
39
|
+
* 1. Standard format: "${nodeId}-output-${portId}" or "${nodeId}-input-${portId}"
|
|
40
|
+
* 2. Short format: just the portId (e.g., "text", "trigger")
|
|
41
41
|
* @param handleId - The handle ID string (e.g., "sample-node.1-output-trigger" or "trigger")
|
|
42
|
-
* @returns The port ID (e.g., "trigger") or the handleId itself for
|
|
42
|
+
* @returns The port ID (e.g., "trigger") or the handleId itself for short format
|
|
43
43
|
*/
|
|
44
44
|
static extractPortIdFromHandle(handleId) {
|
|
45
45
|
if (!handleId) {
|
|
46
46
|
return null;
|
|
47
47
|
}
|
|
48
|
-
// Try
|
|
48
|
+
// Try standard format: "${nodeId}-output-${portId}" or "${nodeId}-input-${portId}"
|
|
49
49
|
// We need to find the last occurrence of "-output-" or "-input-" and get what follows
|
|
50
50
|
const outputMatch = handleId.lastIndexOf('-output-');
|
|
51
51
|
const inputMatch = handleId.lastIndexOf('-input-');
|
|
@@ -55,7 +55,7 @@ export class EdgeStylingHelper {
|
|
|
55
55
|
if (inputMatch !== -1) {
|
|
56
56
|
return handleId.substring(inputMatch + '-input-'.length);
|
|
57
57
|
}
|
|
58
|
-
//
|
|
58
|
+
// Short format: the handleId IS the port ID
|
|
59
59
|
return handleId;
|
|
60
60
|
}
|
|
61
61
|
/**
|
|
@@ -185,8 +185,6 @@ export class EdgeStylingHelper {
|
|
|
185
185
|
edgeType: edgeCategory,
|
|
186
186
|
sourcePortDataType: sourcePortDataType || undefined
|
|
187
187
|
},
|
|
188
|
-
// Keep legacy fields for backward compatibility
|
|
189
|
-
isToolConnection: edgeCategory === 'tool',
|
|
190
188
|
targetNodeType: targetNode.type,
|
|
191
189
|
targetCategory: targetNode.data.metadata.category
|
|
192
190
|
};
|
package/dist/index.d.ts
CHANGED
|
@@ -4,10 +4,10 @@
|
|
|
4
4
|
*/
|
|
5
5
|
import './styles/base.css';
|
|
6
6
|
import './registry/builtinNodes.js';
|
|
7
|
-
export type { NodeCategory, NodeDataType, NodePort, NodeMetadata,
|
|
8
|
-
export type { WorkflowEditorConfig, EditorFeatures, UIConfig, APIConfig, ExecutionConfig, StorageConfig
|
|
7
|
+
export type { NodeCategory, NodeDataType, NodePort, NodeMetadata, ConfigValues, WorkflowNode, WorkflowEdge, Workflow, ApiResponse, NodesResponse, WorkflowResponse, WorkflowsResponse, ExecutionStatus, ExecutionResult, FlowDropConfig, WorkflowEvents, BuiltinNodeType } from './types/index.js';
|
|
8
|
+
export type { WorkflowEditorConfig, EditorFeatures, UIConfig, APIConfig, ExecutionConfig, StorageConfig } from './types/config.js';
|
|
9
9
|
export type { AuthProvider, StaticAuthConfig, CallbackAuthConfig } from './types/auth.js';
|
|
10
|
-
export { StaticAuthProvider, CallbackAuthProvider, NoAuthProvider
|
|
10
|
+
export { StaticAuthProvider, CallbackAuthProvider, NoAuthProvider } from './types/auth.js';
|
|
11
11
|
export type { WorkflowChangeType, FlowDropEventHandlers, FlowDropFeatures } from './types/events.js';
|
|
12
12
|
export { DEFAULT_FEATURES, mergeFeatures } from './types/events.js';
|
|
13
13
|
export { FlowDropApiClient } from './api/client.js';
|
|
@@ -57,12 +57,9 @@ export { getDraftStorageKey, saveDraft, loadDraft, deleteDraft, hasDraft, getDra
|
|
|
57
57
|
export { EdgeStylingHelper, NodeOperationsHelper, WorkflowOperationsHelper, ConfigurationHelper } from './helpers/workflowEditorHelper.js';
|
|
58
58
|
export { workflowStore, workflowActions, workflowId, workflowName, workflowNodes, workflowEdges, workflowMetadata, workflowChanged, workflowValidation, workflowMetadataChanged, isDirtyStore, isDirty, markAsSaved, getWorkflow as getWorkflowFromStore, setOnDirtyStateChange, setOnWorkflowChange } from './stores/workflowStore.js';
|
|
59
59
|
export * from './config/endpoints.js';
|
|
60
|
-
export { defaultApiConfig, getEndpointUrl } from './config/apiConfig.js';
|
|
61
|
-
export type { ApiConfig } from './config/apiConfig.js';
|
|
62
60
|
export { DEFAULT_PORT_CONFIG } from './config/defaultPortConfig.js';
|
|
63
61
|
export * from './config/runtimeConfig.js';
|
|
64
62
|
export * from './adapters/WorkflowAdapter.js';
|
|
65
|
-
export
|
|
66
|
-
export { mountWorkflowEditor, unmountWorkflowEditor, mountFlowDropApp, unmountFlowDropApp } from './svelte-app.js';
|
|
63
|
+
export { mountWorkflowEditor, mountFlowDropApp, unmountFlowDropApp } from './svelte-app.js';
|
|
67
64
|
export type { FlowDropMountOptions, MountedFlowDropApp, NavbarAction } from './svelte-app.js';
|
|
68
65
|
export { ApiError } from './api/enhanced-client.js';
|