@d34dman/flowdrop 0.0.18 → 0.0.19
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 +0 -55
- 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 +144 -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
package/README.md
CHANGED
|
@@ -169,8 +169,6 @@ const workflow = app.getWorkflow();
|
|
|
169
169
|
app.destroy();
|
|
170
170
|
```
|
|
171
171
|
|
|
172
|
-
See the [Enterprise Integration Guide](./docs/enterprise-integration.md) for React, Vue, Angular, and Drupal examples.
|
|
173
|
-
|
|
174
172
|
#### 3. Integration with Backend Frameworks
|
|
175
173
|
|
|
176
174
|
##### Drupal Example
|
|
@@ -310,47 +308,6 @@ const endNode: NodeMetadata = {
|
|
|
310
308
|
};
|
|
311
309
|
```
|
|
312
310
|
|
|
313
|
-
Terminal variants are auto-detected from `id`, `name`, or `tags` containing: `start`, `end`, `exit`, `abort`, `entry`, `finish`, `complete`.
|
|
314
|
-
|
|
315
|
-
#### Custom Node Types
|
|
316
|
-
|
|
317
|
-
Define custom node types:
|
|
318
|
-
|
|
319
|
-
```typescript
|
|
320
|
-
const customNode: NodeMetadata = {
|
|
321
|
-
id: 'custom_processor',
|
|
322
|
-
name: 'Custom Processor',
|
|
323
|
-
category: 'data_processing',
|
|
324
|
-
description: 'Process data with custom logic',
|
|
325
|
-
icon: 'mdi:cog',
|
|
326
|
-
color: '#3b82f6',
|
|
327
|
-
inputs: [
|
|
328
|
-
{
|
|
329
|
-
id: 'input',
|
|
330
|
-
name: 'Input',
|
|
331
|
-
type: 'input',
|
|
332
|
-
dataType: 'mixed'
|
|
333
|
-
}
|
|
334
|
-
],
|
|
335
|
-
outputs: [
|
|
336
|
-
{
|
|
337
|
-
id: 'output',
|
|
338
|
-
name: 'Output',
|
|
339
|
-
type: 'output',
|
|
340
|
-
dataType: 'mixed'
|
|
341
|
-
}
|
|
342
|
-
],
|
|
343
|
-
configSchema: {
|
|
344
|
-
type: 'object',
|
|
345
|
-
properties: {
|
|
346
|
-
operation: {
|
|
347
|
-
type: 'string',
|
|
348
|
-
title: 'Operation'
|
|
349
|
-
}
|
|
350
|
-
}
|
|
351
|
-
}
|
|
352
|
-
};
|
|
353
|
-
```
|
|
354
311
|
|
|
355
312
|
## 🔌 Backend Integration
|
|
356
313
|
|
|
@@ -407,14 +364,6 @@ npm run format
|
|
|
407
364
|
|
|
408
365
|
- **API.md** - REST API specification
|
|
409
366
|
- **CHANGELOG.md** - Version history
|
|
410
|
-
- **Storybook** - Component documentation (run `npm run storybook`)
|
|
411
|
-
|
|
412
|
-
### Enterprise Features (v0.0.16+)
|
|
413
|
-
|
|
414
|
-
- **[Enterprise Integration Guide](./docs/enterprise-integration.md)** - Complete integration patterns for React, Vue, Angular, Drupal
|
|
415
|
-
- **[Authentication Guide](./docs/authentication-guide.md)** - OAuth, JWT, SSO, and custom auth providers
|
|
416
|
-
- **[Event Handlers](./docs/event-handlers.md)** - Workflow lifecycle events and hooks
|
|
417
|
-
- **[Features Configuration](./docs/features-configuration.md)** - Feature flags, draft auto-save, and customization
|
|
418
367
|
|
|
419
368
|
## 🤝 Contributing
|
|
420
369
|
|
|
@@ -457,10 +406,6 @@ docker-compose up -d
|
|
|
457
406
|
- `FLOWDROP_AUTH_TYPE` - Authentication type (none/bearer/api_key/custom)
|
|
458
407
|
- `FLOWDROP_AUTH_TOKEN` - Authentication token
|
|
459
408
|
|
|
460
|
-
**Development (Build-time):**
|
|
461
|
-
|
|
462
|
-
- `VITE_API_BASE_URL` - Dev API URL (used only during `npm run dev`)
|
|
463
|
-
|
|
464
409
|
### Build for Production
|
|
465
410
|
|
|
466
411
|
```bash
|
|
@@ -30,7 +30,7 @@ export declare class ApiError extends Error {
|
|
|
30
30
|
* // With AuthProvider
|
|
31
31
|
* const client = new EnhancedFlowDropApiClient(config, authProvider);
|
|
32
32
|
*
|
|
33
|
-
* //
|
|
33
|
+
* // Without authentication
|
|
34
34
|
* const client = new EnhancedFlowDropApiClient(config);
|
|
35
35
|
* ```
|
|
36
36
|
*/
|
|
@@ -41,7 +41,7 @@ export declare class EnhancedFlowDropApiClient {
|
|
|
41
41
|
* Create a new EnhancedFlowDropApiClient
|
|
42
42
|
*
|
|
43
43
|
* @param config - Endpoint configuration
|
|
44
|
-
* @param authProvider - Optional authentication provider (
|
|
44
|
+
* @param authProvider - Optional authentication provider (defaults to NoAuthProvider)
|
|
45
45
|
*/
|
|
46
46
|
constructor(config: EndpointConfig, authProvider?: AuthProvider);
|
|
47
47
|
/**
|
|
@@ -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
|
/**
|