@redvars/peacock 3.8.6 → 3.9.1

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.
Files changed (85) hide show
  1. package/dist/code-highlighter.js +1 -4
  2. package/dist/code-highlighter.js.map +1 -1
  3. package/dist/custom-elements-jsdocs.json +93 -213
  4. package/dist/custom-elements.json +488 -2149
  5. package/dist/elevation.js +55 -2
  6. package/dist/elevation.js.map +1 -1
  7. package/dist/flow.js +762 -0
  8. package/dist/flow.js.map +1 -0
  9. package/dist/index.js +3 -3
  10. package/dist/loader.js +10 -9
  11. package/dist/loader.js.map +1 -1
  12. package/dist/menu-item.js +144 -63
  13. package/dist/menu-item.js.map +1 -1
  14. package/dist/menu.js +161 -73
  15. package/dist/menu.js.map +1 -1
  16. package/dist/src/flow/flow.d.ts +102 -0
  17. package/dist/src/flow/index.d.ts +2 -0
  18. package/dist/src/index.d.ts +3 -4
  19. package/dist/src/menu/menu/menu.d.ts +10 -9
  20. package/dist/src/menu/menu-item/menu-item.d.ts +1 -3
  21. package/dist/src/timeline/index.d.ts +2 -0
  22. package/dist/src/timeline/timeline-item.d.ts +23 -0
  23. package/dist/src/timeline/timeline.d.ts +26 -0
  24. package/dist/sub-menu.js +28 -1
  25. package/dist/sub-menu.js.map +1 -1
  26. package/dist/timeline-item.js +163 -0
  27. package/dist/timeline-item.js.map +1 -0
  28. package/dist/timeline.js +52 -0
  29. package/dist/timeline.js.map +1 -0
  30. package/dist/tsconfig.tsbuildinfo +1 -1
  31. package/package.json +3 -2
  32. package/readme.md +2 -2
  33. package/src/code-highlighter/code-highlighter.scss +1 -7
  34. package/src/elevation/demo/index.html +52 -0
  35. package/src/elevation/elevation.scss +52 -5
  36. package/src/elevation/elevation.ts +8 -1
  37. package/src/flow/flow.scss +195 -0
  38. package/src/flow/flow.ts +683 -0
  39. package/src/flow/index.ts +2 -0
  40. package/src/index.ts +3 -16
  41. package/src/loader.ts +10 -9
  42. package/src/menu/menu/copy-component-files.mjs +47 -0
  43. package/src/menu/menu/menu.scss +55 -17
  44. package/src/menu/menu/menu.ts +155 -84
  45. package/src/menu/menu-item/menu-item-colors.scss +3 -3
  46. package/src/menu/menu-item/menu-item.scss +118 -24
  47. package/src/menu/menu-item/menu-item.ts +61 -55
  48. package/src/menu/sub-menu/sub-menu.scss +30 -1
  49. package/src/timeline/index.ts +2 -0
  50. package/src/timeline/timeline-item.scss +98 -0
  51. package/src/timeline/timeline-item.ts +63 -0
  52. package/src/timeline/timeline.scss +11 -0
  53. package/src/timeline/timeline.ts +41 -0
  54. package/dist/canvas.js +0 -385
  55. package/dist/canvas.js.map +0 -1
  56. package/dist/flow-designer-node-CGSm6cUH.js +0 -553
  57. package/dist/flow-designer-node-CGSm6cUH.js.map +0 -1
  58. package/dist/flow-designer-node.js +0 -4
  59. package/dist/flow-designer-node.js.map +0 -1
  60. package/dist/flow-designer.js +0 -1417
  61. package/dist/flow-designer.js.map +0 -1
  62. package/dist/src/canvas/canvas.d.ts +0 -92
  63. package/dist/src/canvas/index.d.ts +0 -2
  64. package/dist/src/flow-designer/commands.d.ts +0 -66
  65. package/dist/src/flow-designer/flow-designer-node.d.ts +0 -46
  66. package/dist/src/flow-designer/flow-designer.d.ts +0 -133
  67. package/dist/src/flow-designer/index.d.ts +0 -7
  68. package/dist/src/flow-designer/layout.d.ts +0 -30
  69. package/dist/src/flow-designer/types.d.ts +0 -142
  70. package/dist/src/flow-designer/validation.d.ts +0 -43
  71. package/dist/src/flow-designer/workflow-utils.d.ts +0 -40
  72. package/src/canvas/canvas.scss +0 -72
  73. package/src/canvas/canvas.ts +0 -413
  74. package/src/canvas/index.ts +0 -2
  75. package/src/flow-designer/DEMO.md +0 -239
  76. package/src/flow-designer/commands.ts +0 -278
  77. package/src/flow-designer/flow-designer-node.ts +0 -172
  78. package/src/flow-designer/flow-designer.scss +0 -457
  79. package/src/flow-designer/flow-designer.ts +0 -611
  80. package/src/flow-designer/index.ts +0 -41
  81. package/src/flow-designer/layout.ts +0 -357
  82. package/src/flow-designer/types.ts +0 -166
  83. package/src/flow-designer/validation.ts +0 -284
  84. package/src/flow-designer/workflow-utils.ts +0 -282
  85. /package/dist/test/{flow-designer.test.d.ts → elevation.test.d.ts} +0 -0
@@ -1,1417 +0,0 @@
1
- import { _ as __decorate, I as IndividualComponent, a as i, b, A } from './IndividualComponent-Bdwyrvd6.js';
2
- import { n } from './property-B49QQ8pS.js';
3
- import { r } from './state-DkTK9EGF.js';
4
- import { e } from './query-CHb9Ft_d.js';
5
- import './toolbar.js';
6
- import './icon-button.js';
7
- import './icon.js';
8
- import { c as css_248z } from './flow-designer-node-CGSm6cUH.js';
9
- import './base-Cl6v8-BZ.js';
10
- import './class-map-DG7CA1et.js';
11
- import './directive-ZPhl09Yt.js';
12
- import './if-defined-BXZpRQ4P.js';
13
- import './when-DEJm_QN9.js';
14
- import './is-link-Dk2OV3PM.js';
15
- import './dispatch-event-utils-CuEqjlPT.js';
16
- import './ButtonConstants-CahP2_NA.js';
17
- import './hyperlink-DLvb6MXE.js';
18
- import './throttle-C7ZAPqtu.js';
19
- import './element-internals-2CMts_0M.js';
20
- import './form-associated-BXADnjOB.js';
21
- import './datasource-B2eRh6Or.js';
22
- import './unsafe-html-Ct0N2_UU.js';
23
-
24
- /**
25
- * Workflow utility functions for tree traversal and manipulation
26
- */
27
- /**
28
- * Deep clone a workflow to ensure immutability
29
- */
30
- function cloneWorkflow(workflow) {
31
- return JSON.parse(JSON.stringify(workflow));
32
- }
33
- /**
34
- * Deep clone a workflow node
35
- */
36
- function cloneNode(node) {
37
- return JSON.parse(JSON.stringify(node));
38
- }
39
- /**
40
- * Find a node by ID anywhere in the workflow tree
41
- */
42
- function findNodeById(node, id) {
43
- if (node.id === id)
44
- return node;
45
- // Search children
46
- if (node.children) {
47
- for (const child of node.children) {
48
- const found = findNodeById(child, id);
49
- if (found)
50
- return found;
51
- }
52
- }
53
- // Search tasks
54
- if (node.tasks) {
55
- for (const task of node.tasks) {
56
- const found = findNodeById(task, id);
57
- if (found)
58
- return found;
59
- }
60
- }
61
- // Search branches
62
- if (node.branches) {
63
- for (const branchNodes of Object.values(node.branches)) {
64
- for (const branchNode of branchNodes) {
65
- const found = findNodeById(branchNode, id);
66
- if (found)
67
- return found;
68
- }
69
- }
70
- }
71
- // Search join
72
- if (node.join) {
73
- const found = findNodeById(node.join, id);
74
- if (found)
75
- return found;
76
- }
77
- return null;
78
- }
79
- /**
80
- * Remove a node by ID from the workflow tree
81
- */
82
- function removeNodeById(node, id) {
83
- const result = cloneNode(node);
84
- // Remove from children
85
- if (result.children) {
86
- result.children = result.children.filter((child) => {
87
- if (child.id === id)
88
- return false;
89
- removeNodeById(child, id);
90
- return true;
91
- });
92
- }
93
- // Remove from tasks
94
- if (result.tasks) {
95
- result.tasks = result.tasks.filter((task) => {
96
- if (task.id === id)
97
- return false;
98
- removeNodeById(task, id);
99
- return true;
100
- });
101
- }
102
- // Remove from branches
103
- if (result.branches) {
104
- for (const [branchKey, branchNodes] of Object.entries(result.branches)) {
105
- result.branches[branchKey] = branchNodes.filter((branchNode) => {
106
- if (branchNode.id === id)
107
- return false;
108
- removeNodeById(branchNode, id);
109
- return true;
110
- });
111
- }
112
- }
113
- // Recursively clean empty nodes
114
- for (const branchNode of result.children || []) {
115
- removeNodeById(branchNode, id);
116
- }
117
- for (const taskNode of result.tasks || []) {
118
- removeNodeById(taskNode, id);
119
- }
120
- for (const branchNodes of Object.values(result.branches || {})) {
121
- for (const branchNode of branchNodes) {
122
- removeNodeById(branchNode, id);
123
- }
124
- }
125
- return result;
126
- }
127
- /**
128
- * Insert a node into the workflow tree at a specific location
129
- */
130
- function insertNodeIntoWorkflow(parent, nodeToInsert, connectionType = 'child', branchKey) {
131
- switch (connectionType) {
132
- case 'child':
133
- if (!parent.children)
134
- parent.children = [];
135
- parent.children.push(cloneNode(nodeToInsert));
136
- break;
137
- case 'task':
138
- if (!parent.tasks)
139
- parent.tasks = [];
140
- parent.tasks.push(cloneNode(nodeToInsert));
141
- break;
142
- case 'branch':
143
- if (!parent.branches)
144
- parent.branches = {};
145
- if (!branchKey)
146
- branchKey = 'default';
147
- if (!parent.branches[branchKey])
148
- parent.branches[branchKey] = [];
149
- parent.branches[branchKey].push(cloneNode(nodeToInsert));
150
- break;
151
- }
152
- }
153
- /**
154
- * Collect all nodes in the workflow (depth-first)
155
- */
156
- function getAllNodes(node) {
157
- const result = [node];
158
- if (node.children) {
159
- for (const child of node.children) {
160
- result.push(...getAllNodes(child));
161
- }
162
- }
163
- if (node.tasks) {
164
- for (const task of node.tasks) {
165
- result.push(...getAllNodes(task));
166
- }
167
- }
168
- if (node.branches) {
169
- for (const branchNodes of Object.values(node.branches)) {
170
- for (const branchNode of branchNodes) {
171
- result.push(...getAllNodes(branchNode));
172
- }
173
- }
174
- }
175
- if (node.join) {
176
- result.push(...getAllNodes(node.join));
177
- }
178
- return result;
179
- }
180
- /**
181
- * Get all parent node IDs for a given node (path from root to node)
182
- */
183
- function getNodePath(rootNode, targetId) {
184
- const path = [];
185
- function traverse(node) {
186
- path.push(node.id);
187
- if (node.id === targetId)
188
- return true;
189
- // Search children
190
- if (node.children) {
191
- for (const child of node.children) {
192
- if (traverse(child))
193
- return true;
194
- }
195
- }
196
- // Search tasks
197
- if (node.tasks) {
198
- for (const task of node.tasks) {
199
- if (traverse(task))
200
- return true;
201
- }
202
- }
203
- // Search branches
204
- if (node.branches) {
205
- for (const branchNodes of Object.values(node.branches)) {
206
- for (const branchNode of branchNodes) {
207
- if (traverse(branchNode))
208
- return true;
209
- }
210
- }
211
- }
212
- // Search join
213
- if (node.join) {
214
- if (traverse(node.join))
215
- return true;
216
- }
217
- path.pop();
218
- return false;
219
- }
220
- traverse(rootNode);
221
- return path;
222
- }
223
- /**
224
- * Check if a node is a descendant of another node
225
- */
226
- function isDescendant(rootNode, potentialParentId, nodeId) {
227
- const path = getNodePath(rootNode, nodeId);
228
- return path.includes(potentialParentId);
229
- }
230
-
231
- /**
232
- * Add Node Command
233
- */
234
- class AddNodeCommand {
235
- constructor(nodeToAdd, parentNodeId, connectionType = 'child', branchKey) {
236
- this.nodeToAdd = nodeToAdd;
237
- this.parentNodeId = parentNodeId;
238
- this.connectionType = connectionType;
239
- this.branchKey = branchKey;
240
- this.description = 'Add node';
241
- }
242
- execute(workflow) {
243
- const result = cloneWorkflow(workflow);
244
- const parent = findNodeById(result.nodes, this.parentNodeId);
245
- if (!parent)
246
- return workflow; // Validation in parent component
247
- insertNodeIntoWorkflow(parent, this.nodeToAdd, this.connectionType, this.branchKey);
248
- return result;
249
- }
250
- undo(workflow) {
251
- const result = cloneWorkflow(workflow);
252
- removeNodeById(result.nodes, this.nodeToAdd.id);
253
- return result;
254
- }
255
- }
256
- /**
257
- * Delete Node Command
258
- */
259
- class DeleteNodeCommand {
260
- constructor(nodeId, workflow) {
261
- this.nodeId = nodeId;
262
- this.description = 'Delete node';
263
- this.deletedNode = null;
264
- this.parentReference = null;
265
- if (workflow) {
266
- this.captureNodeContext(workflow);
267
- }
268
- }
269
- captureNodeContext(workflow) {
270
- const node = findNodeById(workflow.nodes, this.nodeId);
271
- if (!node)
272
- return;
273
- this.deletedNode = cloneWorkflow({ workflow_id: '', nodes: node }).nodes;
274
- // Find parent reference
275
- this.findParentReference(workflow.nodes);
276
- }
277
- findParentReference(node) {
278
- if (node.children) {
279
- const idx = node.children.findIndex((n) => n.id === this.nodeId);
280
- if (idx !== -1) {
281
- this.parentReference = {
282
- parentId: node.id,
283
- connectionType: 'child',
284
- };
285
- return;
286
- }
287
- for (const child of node.children) {
288
- this.findParentReference(child);
289
- }
290
- }
291
- if (node.tasks) {
292
- const idx = node.tasks.findIndex((n) => n.id === this.nodeId);
293
- if (idx !== -1) {
294
- this.parentReference = {
295
- parentId: node.id,
296
- connectionType: 'task',
297
- };
298
- return;
299
- }
300
- for (const task of node.tasks) {
301
- this.findParentReference(task);
302
- }
303
- }
304
- if (node.branches) {
305
- for (const [branchKey, branchNodes] of Object.entries(node.branches)) {
306
- const idx = branchNodes.findIndex((n) => n.id === this.nodeId);
307
- if (idx !== -1) {
308
- this.parentReference = {
309
- parentId: node.id,
310
- connectionType: 'branch',
311
- branchKey,
312
- };
313
- return;
314
- }
315
- for (const branchNode of branchNodes) {
316
- this.findParentReference(branchNode);
317
- }
318
- }
319
- }
320
- }
321
- execute(workflow) {
322
- const result = cloneWorkflow(workflow);
323
- removeNodeById(result.nodes, this.nodeId);
324
- return result;
325
- }
326
- undo(workflow) {
327
- if (!this.deletedNode || !this.parentReference)
328
- return workflow;
329
- const result = cloneWorkflow(workflow);
330
- const parent = findNodeById(result.nodes, this.parentReference.parentId);
331
- if (!parent)
332
- return workflow;
333
- insertNodeIntoWorkflow(parent, this.deletedNode, this.parentReference.connectionType, this.parentReference.branchKey);
334
- return result;
335
- }
336
- }
337
- /**
338
- * Edit Node Command
339
- */
340
- class EditNodeCommand {
341
- constructor(nodeId, updates, workflow) {
342
- this.nodeId = nodeId;
343
- this.updates = updates;
344
- this.description = 'Edit node';
345
- this.previousState = {};
346
- if (workflow) {
347
- const node = findNodeById(workflow.nodes, nodeId);
348
- if (node) {
349
- // Store only edited fields
350
- Object.keys(updates).forEach((key) => {
351
- this.previousState[key] = node[key];
352
- });
353
- }
354
- }
355
- }
356
- execute(workflow) {
357
- const result = cloneWorkflow(workflow);
358
- const node = findNodeById(result.nodes, this.nodeId);
359
- if (!node)
360
- return workflow;
361
- Object.assign(node, this.updates);
362
- return result;
363
- }
364
- undo(workflow) {
365
- const result = cloneWorkflow(workflow);
366
- const node = findNodeById(result.nodes, this.nodeId);
367
- if (!node)
368
- return workflow;
369
- Object.assign(node, this.previousState);
370
- return result;
371
- }
372
- }
373
- /**
374
- * Move Node Command - reorder in array or change parent
375
- */
376
- class MoveNodeCommand {
377
- constructor(nodeId, newParentId, newIndex, newConnectionType = 'child', newBranchKey, workflow) {
378
- this.nodeId = nodeId;
379
- this.newParentId = newParentId;
380
- this.newIndex = newIndex;
381
- this.newConnectionType = newConnectionType;
382
- this.newBranchKey = newBranchKey;
383
- this.description = 'Move node';
384
- this.previousState = null;
385
- if (workflow) {
386
- this.captureCurrentPosition(workflow);
387
- }
388
- }
389
- captureCurrentPosition(workflow) {
390
- // Store current parent/position for undo
391
- // Implementation depends on finding current parent location
392
- }
393
- execute(workflow) {
394
- // Remove from old parent, insert at new parent
395
- let result = cloneWorkflow(workflow);
396
- result.nodes = removeNodeById(result.nodes, this.nodeId);
397
- const newParent = findNodeById(result.nodes, this.newParentId);
398
- if (!newParent)
399
- return workflow;
400
- const node = findNodeById(workflow.nodes, this.nodeId);
401
- if (!node)
402
- return workflow;
403
- insertNodeIntoWorkflow(newParent, node, this.newConnectionType, this.newBranchKey);
404
- return result;
405
- }
406
- undo(workflow) {
407
- // Restore to previous position
408
- if (!this.previousState)
409
- return workflow;
410
- let result = cloneWorkflow(workflow);
411
- result.nodes = removeNodeById(result.nodes, this.nodeId);
412
- const prevParent = findNodeById(result.nodes, this.previousState.parentId);
413
- if (!prevParent)
414
- return workflow;
415
- const node = findNodeById(workflow.nodes, this.nodeId);
416
- if (!node)
417
- return workflow;
418
- insertNodeIntoWorkflow(prevParent, node, this.previousState.connectionType, this.previousState.branchKey);
419
- return result;
420
- }
421
- }
422
-
423
- const NODE_WIDTH = 200;
424
- const NODE_HEIGHT = 100;
425
- const HORIZONTAL_GAP = 60; // Gap between depth levels (columns)
426
- const VERTICAL_GAP = 40; // Gap between lanes
427
- const LANE_HEIGHT = 140; // Height of each swimlane row
428
- const LANE_HEADER_HEIGHT = 84; // Top offset so first row is not clipped by floating UI
429
- class SwimlaneLayout {
430
- /**
431
- * Calculate layout positions for all nodes in a workflow
432
- */
433
- static calculateLayout(rootNode) {
434
- const layoutNodes = [];
435
- const lanes = new Map(); // lane -> nodes in that lane
436
- // First pass: assign lanes and depths
437
- this._traverseAndAssignLanes(rootNode, null, 'main', 0, layoutNodes, lanes);
438
- // Second pass: calculate positions
439
- const positionedNodes = [];
440
- const nodePositions = new Map();
441
- for (const layoutNode of layoutNodes) {
442
- const x = layoutNode.depth * (NODE_WIDTH + HORIZONTAL_GAP) + HORIZONTAL_GAP;
443
- const laneIndex = Array.from(lanes.keys()).indexOf(layoutNode.lane);
444
- const y = laneIndex * (LANE_HEIGHT + VERTICAL_GAP) + LANE_HEADER_HEIGHT;
445
- nodePositions.set(layoutNode.node.id, { x, y });
446
- const positioned = {
447
- node: layoutNode.node,
448
- x,
449
- y,
450
- width: NODE_WIDTH,
451
- height: NODE_HEIGHT,
452
- lane: layoutNode.lane,
453
- depth: layoutNode.depth,
454
- branchPath: layoutNode.branchPath,
455
- parentId: layoutNode.parent?.id,
456
- connectorPoints: [],
457
- };
458
- positionedNodes.push(positioned);
459
- }
460
- // Third pass: calculate connector points
461
- this._calculateConnectors(positionedNodes, nodePositions);
462
- return positionedNodes;
463
- }
464
- /**
465
- * Traverse workflow tree and assign lane/depth to each node
466
- */
467
- static _traverseAndAssignLanes(node, parent, baseLane, depth, layoutNodes, lanes) {
468
- const layoutNode = {
469
- node,
470
- parent,
471
- lane: baseLane,
472
- depth,
473
- width: NODE_WIDTH,
474
- height: NODE_HEIGHT,
475
- };
476
- // Add to layout nodes
477
- layoutNodes.push(layoutNode);
478
- // Register in lanes map
479
- if (!lanes.has(baseLane)) {
480
- lanes.set(baseLane, []);
481
- }
482
- lanes.get(baseLane).push(layoutNode);
483
- // Process children
484
- if (node.children && node.children.length > 0) {
485
- for (const child of node.children) {
486
- this._traverseAndAssignLanes(child, node, baseLane, depth + 1, layoutNodes, lanes);
487
- }
488
- }
489
- // Process decision branches into separate swimlanes
490
- if (node.branches) {
491
- let branchIndex = 0;
492
- for (const [branchKey, branchNodes] of Object.entries(node.branches)) {
493
- const branchLane = `${baseLane}_${branchKey}_${branchIndex}`;
494
- for (const branchNode of branchNodes) {
495
- this._traverseAndAssignLanes(branchNode, node, branchLane, depth + 1, layoutNodes, lanes);
496
- }
497
- branchIndex++;
498
- }
499
- }
500
- // Process fork into parallel lanes
501
- if (node.type === 'fork' && node.tasks) {
502
- let taskIndex = 0;
503
- for (const task of node.tasks) {
504
- const parallelLane = `${baseLane}_parallel_${taskIndex}`;
505
- this._traverseAndAssignLanes(task, node, parallelLane, depth + 1, layoutNodes, lanes);
506
- taskIndex++;
507
- }
508
- }
509
- // Process fork join node
510
- if (node.type === 'fork' && node.join) {
511
- // Join node goes back to main lane at next depth
512
- this._traverseAndAssignLanes(node.join, node, baseLane, depth + 2, layoutNodes, lanes);
513
- }
514
- // Process task nodes (used in forks)
515
- if (node.tasks && node.type !== 'fork') {
516
- for (const task of node.tasks) {
517
- this._traverseAndAssignLanes(task, node, baseLane, depth + 1, layoutNodes, lanes);
518
- }
519
- }
520
- }
521
- /**
522
- * Calculate SVG connector points between nodes
523
- */
524
- static _calculateConnectors(positionedNodes, nodePositions) {
525
- const nodeMap = new Map(positionedNodes.map((n) => [n.node.id, n]));
526
- for (const positioned of positionedNodes) {
527
- const connectors = [];
528
- const nodeMiddleRight = {
529
- x: positioned.x + positioned.width,
530
- y: positioned.y + positioned.height / 2,
531
- };
532
- // Connect to children (sequential)
533
- if (positioned.node.children && positioned.node.children.length > 0) {
534
- for (const child of positioned.node.children) {
535
- const childPos = nodeMap.get(child.id);
536
- if (childPos) {
537
- connectors.push({
538
- from: nodeMiddleRight,
539
- to: {
540
- x: childPos.x,
541
- y: childPos.y + childPos.height / 2,
542
- },
543
- type: 'straight',
544
- });
545
- }
546
- }
547
- }
548
- // Connect to branches (decision)
549
- if (positioned.node.branches) {
550
- for (const branchNodes of Object.values(positioned.node.branches)) {
551
- for (const branchNode of branchNodes) {
552
- const childPos = nodeMap.get(branchNode.id);
553
- if (childPos) {
554
- // Curved path to branch
555
- connectors.push({
556
- from: nodeMiddleRight,
557
- to: {
558
- x: childPos.x,
559
- y: childPos.y + childPos.height / 2,
560
- },
561
- type: 'branch',
562
- });
563
- }
564
- }
565
- }
566
- }
567
- // Connect fork to parallel tasks
568
- if (positioned.node.type === 'fork' && positioned.node.tasks) {
569
- for (const task of positioned.node.tasks) {
570
- const taskPos = nodeMap.get(task.id);
571
- if (taskPos) {
572
- connectors.push({
573
- from: nodeMiddleRight,
574
- to: {
575
- x: taskPos.x,
576
- y: taskPos.y + taskPos.height / 2,
577
- },
578
- type: 'fork',
579
- });
580
- }
581
- }
582
- }
583
- // Connect to join
584
- if (positioned.node.type === 'fork' && positioned.node.join) {
585
- const joinPos = nodeMap.get(positioned.node.join.id);
586
- if (joinPos) {
587
- connectors.push({
588
- from: nodeMiddleRight,
589
- to: {
590
- x: joinPos.x,
591
- y: joinPos.y + joinPos.height / 2,
592
- },
593
- type: 'join',
594
- });
595
- }
596
- }
597
- // Connect loop back
598
- if (positioned.node.type === 'loop_end' && positioned.node.target_id) {
599
- const targetPos = nodeMap.get(positioned.node.target_id);
600
- if (targetPos) {
601
- connectors.push({
602
- from: {
603
- x: positioned.x + positioned.width,
604
- y: positioned.y + positioned.height / 2,
605
- },
606
- to: {
607
- x: targetPos.x,
608
- y: targetPos.y + targetPos.height / 2,
609
- },
610
- type: 'curved',
611
- });
612
- }
613
- }
614
- positioned.connectorPoints = connectors;
615
- }
616
- }
617
- /**
618
- * Get swimlane configurations for rendering
619
- */
620
- static getSwimlanes(positionedNodes) {
621
- const swimlanesMap = new Map();
622
- for (const node of positionedNodes) {
623
- if (!swimlanesMap.has(node.lane)) {
624
- swimlanesMap.set(node.lane, []);
625
- }
626
- swimlanesMap.get(node.lane).push(node);
627
- }
628
- const swimlanes = [];
629
- for (const [laneId, nodes] of swimlanesMap.entries()) {
630
- const isParallel = laneId.includes('parallel');
631
- const name = this._getSwimlaneName(laneId);
632
- swimlanes.push({
633
- id: laneId,
634
- name,
635
- nodes,
636
- isParallel,
637
- });
638
- }
639
- return swimlanes;
640
- }
641
- /**
642
- * Generate human-readable swimlane name
643
- */
644
- static _getSwimlaneName(laneId) {
645
- if (laneId === 'main')
646
- return 'Main Flow';
647
- if (laneId.includes('yes'))
648
- return 'Yes Path';
649
- if (laneId.includes('no'))
650
- return 'No Path';
651
- if (laneId.includes('parallel')) {
652
- const match = laneId.match(/parallel_(\d+)/);
653
- if (match)
654
- return `Parallel Task ${parseInt(match[1]) + 1}`;
655
- }
656
- return laneId;
657
- }
658
- /**
659
- * Calculate canvas bounds for sizing
660
- */
661
- static getCanvasBounds(positionedNodes) {
662
- if (positionedNodes.length === 0) {
663
- return { width: 600, height: 400 };
664
- }
665
- let maxX = 0;
666
- let maxY = 0;
667
- for (const node of positionedNodes) {
668
- maxX = Math.max(maxX, node.x + node.width + HORIZONTAL_GAP);
669
- maxY = Math.max(maxY, node.y + node.height + VERTICAL_GAP);
670
- }
671
- return {
672
- width: Math.max(600, maxX),
673
- height: Math.max(400, maxY),
674
- };
675
- }
676
- }
677
-
678
- /**
679
- * Workflow validation - checks for common errors and inconsistencies
680
- */
681
- class WorkflowValidator {
682
- /**
683
- * Validate entire workflow
684
- */
685
- static validate(workflow) {
686
- const errors = [];
687
- // Check root node exists and is a trigger
688
- if (!workflow.nodes) {
689
- errors.push({
690
- nodeId: 'root',
691
- type: 'orphaned_node',
692
- message: 'Workflow has no root node',
693
- severity: 'error',
694
- });
695
- return errors;
696
- }
697
- // Validate all nodes
698
- const allNodes = getAllNodes(workflow.nodes);
699
- // Check for circular loops
700
- errors.push(...this._checkCircularLoops(workflow.nodes, allNodes));
701
- // Check for orphaned nodes
702
- errors.push(...this._checkOrphanedNodes(workflow.nodes, allNodes));
703
- // Check valid branches
704
- errors.push(...this._checkValidBranches(workflow.nodes, allNodes));
705
- // Check missing targets
706
- errors.push(...this._checkMissingTargets(workflow, allNodes));
707
- // Check invalid fork/join pairs
708
- errors.push(...this._checkForkJoinPairs(workflow.nodes, allNodes));
709
- return errors;
710
- }
711
- /**
712
- * Detect circular loop references
713
- * A loop_end cannot point to a node that is its own descendant (after the loop_start)
714
- */
715
- static _checkCircularLoops(rootNode, allNodes) {
716
- const errors = [];
717
- for (const node of allNodes) {
718
- // Only check loop_end nodes
719
- if (node.type !== 'loop_end')
720
- continue;
721
- const targetId = node.target_id;
722
- if (!targetId)
723
- continue;
724
- // Check if target exists
725
- const targetNode = findNodeById(rootNode, targetId);
726
- if (!targetNode)
727
- continue;
728
- // If loop_end is a descendant of its target, it's circular
729
- if (isDescendant(rootNode, targetId, node.id)) ;
730
- // However, if the loop_end's target is a descendant of the loop_end, that's circular
731
- if (isDescendant(rootNode, node.id, targetId)) {
732
- errors.push({
733
- nodeId: node.id,
734
- type: 'circular_loop',
735
- message: `Loop cannot point to a node (${targetId}) that executes after the loop_end`,
736
- severity: 'error',
737
- });
738
- }
739
- }
740
- return errors;
741
- }
742
- /**
743
- * Check for orphaned nodes (not reachable from root)
744
- */
745
- static _checkOrphanedNodes(rootNode, allNodes) {
746
- const errors = [];
747
- const paths = new Map();
748
- for (const node of allNodes) {
749
- const path = getNodePath(rootNode, node.id);
750
- if (path.length === 0 && node.id !== rootNode.id) {
751
- errors.push({
752
- nodeId: node.id,
753
- type: 'orphaned_node',
754
- message: `Node "${node.label}" is not reachable from the root trigger`,
755
- severity: 'error',
756
- });
757
- }
758
- paths.set(node.id, path);
759
- }
760
- // Check nodes in branches - all branch paths must be reachable
761
- // This is typically valid by structure, but warn if branch has no exit
762
- for (const node of allNodes) {
763
- if (!node.branches)
764
- continue;
765
- for (const [branchKey, branchNodes] of Object.entries(node.branches)) {
766
- if (branchNodes.length === 0) {
767
- errors.push({
768
- nodeId: node.id,
769
- type: 'invalid_branch',
770
- message: `Branch "${branchKey}" is empty - no nodes to execute`,
771
- severity: 'warning',
772
- });
773
- }
774
- }
775
- }
776
- return errors;
777
- }
778
- /**
779
- * Check that decision nodes have valid branches
780
- */
781
- static _checkValidBranches(rootNode, allNodes) {
782
- const errors = [];
783
- for (const node of allNodes) {
784
- if (node.type !== 'decision')
785
- continue;
786
- if (!node.branches) {
787
- errors.push({
788
- nodeId: node.id,
789
- type: 'invalid_branch',
790
- message: `Decision node "${node.label}" has no branches defined`,
791
- severity: 'error',
792
- });
793
- continue;
794
- }
795
- // Standard decision should have "yes" and "no"
796
- const branchKeys = Object.keys(node.branches);
797
- if (!branchKeys.includes('yes') || !branchKeys.includes('no')) {
798
- errors.push({
799
- nodeId: node.id,
800
- type: 'invalid_branch',
801
- message: `Decision node "${node.label}" should have "yes" and "no" branches`,
802
- severity: 'warning',
803
- });
804
- }
805
- // Check for empty branches
806
- for (const [branchKey, branchNodes] of Object.entries(node.branches)) {
807
- if (branchNodes.length === 0) {
808
- errors.push({
809
- nodeId: node.id,
810
- type: 'invalid_branch',
811
- message: `Decision branch "${branchKey}" is empty`,
812
- severity: 'warning',
813
- });
814
- }
815
- }
816
- }
817
- return errors;
818
- }
819
- /**
820
- * Check that loop_end nodes reference valid loop_start nodes
821
- */
822
- static _checkMissingTargets(workflow, allNodes) {
823
- const errors = [];
824
- for (const node of allNodes) {
825
- if (node.type === 'loop_end') {
826
- if (!node.target_id) {
827
- errors.push({
828
- nodeId: node.id,
829
- type: 'missing_target',
830
- message: `Loop end "${node.label}" does not specify a target loop_start`,
831
- severity: 'error',
832
- });
833
- }
834
- else {
835
- const target = findNodeById(workflow.nodes, node.target_id);
836
- if (!target || target.type !== 'loop_start') {
837
- errors.push({
838
- nodeId: node.id,
839
- type: 'missing_target',
840
- message: `Loop end "${node.label}" references non-existent or non-loop_start node "${node.target_id}"`,
841
- severity: 'error',
842
- });
843
- }
844
- }
845
- }
846
- }
847
- return errors;
848
- }
849
- /**
850
- * Check that fork nodes have corresponding join nodes
851
- */
852
- static _checkForkJoinPairs(rootNode, allNodes) {
853
- const errors = [];
854
- for (const node of allNodes) {
855
- if (node.type === 'fork') {
856
- if (!node.join) {
857
- errors.push({
858
- nodeId: node.id,
859
- type: 'invalid_fork_join',
860
- message: `Fork node "${node.label}" does not have a corresponding join node`,
861
- severity: 'error',
862
- });
863
- }
864
- else if (node.join.type !== 'join') {
865
- errors.push({
866
- nodeId: node.id,
867
- type: 'invalid_fork_join',
868
- message: `Fork node "${node.label}" join is not a join node`,
869
- severity: 'error',
870
- });
871
- }
872
- if (!node.tasks || node.tasks.length === 0) {
873
- errors.push({
874
- nodeId: node.id,
875
- type: 'invalid_fork_join',
876
- message: `Fork node "${node.label}" has no parallel tasks`,
877
- severity: 'warning',
878
- });
879
- }
880
- }
881
- }
882
- return errors;
883
- }
884
- /**
885
- * Check if workflow would create a valid execution path
886
- */
887
- static isExecutable(workflow) {
888
- const errors = this.validate(workflow);
889
- return errors.filter((e) => e.severity === 'error').length === 0;
890
- }
891
- /**
892
- * Get validation warnings only
893
- */
894
- static getWarnings(workflow) {
895
- const errors = this.validate(workflow);
896
- return errors.filter((e) => e.severity === 'warning');
897
- }
898
- /**
899
- * Get validation errors only
900
- */
901
- static getErrors(workflow) {
902
- const errors = this.validate(workflow);
903
- return errors.filter((e) => e.severity === 'error');
904
- }
905
- }
906
-
907
- /**
908
- * @label Flow Designer
909
- * @tag wc-flow-designer
910
- * @rawTag flow-designer
911
- * @summary Low-code business process flow designer with swimlane layout, undo/redo, and interactive editing.
912
- *
913
- * @cssprop --flow-designer-height - Height of the flow designer container. Defaults to 400px.
914
- * @cssprop --flow-designer-border-color - Border color of the flow designer. Defaults to outline-variant.
915
- * @cssprop --flow-designer-background - Background color of the designer. Defaults to surface.
916
- * @cssprop --flow-designer-border-radius - Corner radius. Defaults to medium shape.
917
- * @cssprop --flow-designer-action-bar-bg - Background color of the action bar. Defaults to surface-container.
918
- *
919
- * @example
920
- * ```html
921
- * <wc-flow-designer id="editor"></wc-flow-designer>
922
- * <script>
923
- * const workflow = {
924
- * workflow_id: "demo",
925
- * nodes: {
926
- * id: "node_1",
927
- * type: "trigger",
928
- * label: "Start"
929
- * }
930
- * };
931
- * document.querySelector('#editor').workflow = workflow;
932
- * </script>
933
- * ```
934
- */
935
- let FlowDesigner = class FlowDesigner extends i {
936
- constructor() {
937
- super(...arguments);
938
- /**
939
- * The workflow definition to display and edit
940
- */
941
- this.workflow = { workflow_id: '', nodes: { id: 'root', type: 'trigger', label: 'Start' } };
942
- /**
943
- * Whether the flow designer is in read-only mode
944
- */
945
- this.readonly = false;
946
- /**
947
- * Whether the flow designer is disabled
948
- */
949
- this.disabled = false;
950
- /**
951
- * Show validation errors/warnings
952
- */
953
- this.showValidation = false;
954
- this._editor = {
955
- selectedNodeId: null,
956
- isEditing: false,
957
- editingNode: null,
958
- hoveredNodeId: null,
959
- isDragging: false,
960
- draggedNodeId: null,
961
- zoom: 1,
962
- panX: 0,
963
- panY: 0,
964
- };
965
- this._positionedNodes = [];
966
- this._history = [];
967
- this._historyIndex = -1;
968
- this._isDragScrolling = false;
969
- this._dragStartX = 0;
970
- this._dragStartY = 0;
971
- this._scrollStartX = 0;
972
- this._scrollStartY = 0;
973
- this._handleKeyDown = (event) => {
974
- if (this.disabled || this.readonly)
975
- return;
976
- if (event.ctrlKey || event.metaKey) {
977
- if (event.key === 'z') {
978
- event.preventDefault();
979
- this.undo();
980
- }
981
- else if (event.key === 'y') {
982
- event.preventDefault();
983
- this.redo();
984
- }
985
- }
986
- if (event.key === 'Delete' && this._editor.selectedNodeId) {
987
- event.preventDefault();
988
- this.deleteNode(this._editor.selectedNodeId);
989
- }
990
- };
991
- this._handleMouseUp = () => {
992
- this._isDragScrolling = false;
993
- };
994
- this._handleCanvasMouseDown = (e) => {
995
- if (this.disabled)
996
- return;
997
- if (e.target === this.scrollElm || e.target.classList.contains('canvas-container')) {
998
- this._isDragScrolling = true;
999
- this._dragStartX = e.clientX;
1000
- this._dragStartY = e.clientY;
1001
- if (this.scrollElm) {
1002
- this._scrollStartX = this.scrollElm.scrollLeft;
1003
- this._scrollStartY = this.scrollElm.scrollTop;
1004
- }
1005
- }
1006
- };
1007
- this._handleCanvasMouseMove = (e) => {
1008
- if (!this._isDragScrolling || !this.scrollElm)
1009
- return;
1010
- const deltaX = e.clientX - this._dragStartX;
1011
- const deltaY = e.clientY - this._dragStartY;
1012
- this.scrollElm.scrollLeft = this._scrollStartX - deltaX;
1013
- this.scrollElm.scrollTop = this._scrollStartY - deltaY;
1014
- };
1015
- this._handleNodeClick = (e) => {
1016
- const nodeId = e.detail.nodeId;
1017
- this._editor.selectedNodeId = nodeId;
1018
- this.requestUpdate();
1019
- };
1020
- this._handleNodeDelete = (e) => {
1021
- const nodeId = e.detail.nodeId;
1022
- this.deleteNode(nodeId);
1023
- };
1024
- this._handleNodeEdit = (e) => {
1025
- const nodeId = e.detail.nodeId;
1026
- this._editor.selectedNodeId = nodeId;
1027
- this._editor.isEditing = true;
1028
- this.requestUpdate();
1029
- };
1030
- this._handleZoomIn = () => {
1031
- this._editor.zoom = Math.min(2, this._editor.zoom + 0.1);
1032
- this.requestUpdate();
1033
- };
1034
- this._handleZoomOut = () => {
1035
- this._editor.zoom = Math.max(0.5, this._editor.zoom - 0.1);
1036
- this.requestUpdate();
1037
- };
1038
- }
1039
- connectedCallback() {
1040
- super.connectedCallback();
1041
- window.addEventListener('mouseup', this._handleMouseUp);
1042
- window.addEventListener('keydown', this._handleKeyDown);
1043
- this._recalculateLayout();
1044
- }
1045
- disconnectedCallback() {
1046
- window.removeEventListener('mouseup', this._handleMouseUp);
1047
- window.removeEventListener('keydown', this._handleKeyDown);
1048
- super.disconnectedCallback();
1049
- }
1050
- willUpdate() {
1051
- this._recalculateLayout();
1052
- }
1053
- /**
1054
- * Recalculate layout when workflow changes
1055
- */
1056
- _recalculateLayout() {
1057
- if (!this.workflow?.nodes)
1058
- return;
1059
- this._positionedNodes = SwimlaneLayout.calculateLayout(this.workflow.nodes);
1060
- }
1061
- /**
1062
- * Add a new node
1063
- */
1064
- addNode(newNode, parentNodeId, connectionType = 'child', branchKey) {
1065
- const command = new AddNodeCommand(newNode, parentNodeId, connectionType, branchKey);
1066
- this._executeCommand(command);
1067
- }
1068
- /**
1069
- * Delete a node by ID
1070
- */
1071
- deleteNode(nodeId) {
1072
- const command = new DeleteNodeCommand(nodeId, this.workflow);
1073
- this._executeCommand(command);
1074
- }
1075
- /**
1076
- * Edit a node
1077
- */
1078
- editNode(nodeId, updates) {
1079
- const command = new EditNodeCommand(nodeId, updates, this.workflow);
1080
- this._executeCommand(command);
1081
- }
1082
- /**
1083
- * Move a node to a different parent/position
1084
- */
1085
- moveNode(nodeId, newParentId, newIndex, connectionType = 'child', branchKey) {
1086
- const command = new MoveNodeCommand(nodeId, newParentId, newIndex, connectionType, branchKey, this.workflow);
1087
- this._executeCommand(command);
1088
- }
1089
- /**
1090
- * Execute a command and add to history
1091
- */
1092
- _executeCommand(command) {
1093
- const newWorkflow = command.execute(this.workflow);
1094
- // Validate workflow after change
1095
- const errors = WorkflowValidator.validate(newWorkflow);
1096
- const hasErrors = errors.some((e) => e.severity === 'error');
1097
- if (hasErrors && !confirm('Workflow has errors. Continue anyway?')) {
1098
- return;
1099
- }
1100
- // Add to history
1101
- this._history = this._history.slice(0, this._historyIndex + 1);
1102
- this._history.push({
1103
- command,
1104
- workflow: newWorkflow,
1105
- timestamp: Date.now(),
1106
- });
1107
- this._historyIndex++;
1108
- // Update workflow
1109
- this.workflow = newWorkflow;
1110
- // Emit change event
1111
- this._emitWorkflowChange('node-edited', undefined);
1112
- }
1113
- /**
1114
- * Undo last operation
1115
- */
1116
- undo() {
1117
- if (this._historyIndex <= 0)
1118
- return;
1119
- this._historyIndex--;
1120
- const entry = this._history[this._historyIndex];
1121
- this.workflow = cloneWorkflow(entry.workflow);
1122
- this._emitWorkflowChange('undo', undefined);
1123
- }
1124
- /**
1125
- * Redo last undone operation
1126
- */
1127
- redo() {
1128
- if (this._historyIndex >= this._history.length - 1)
1129
- return;
1130
- this._historyIndex++;
1131
- const entry = this._history[this._historyIndex];
1132
- this.workflow = cloneWorkflow(entry.workflow);
1133
- this._emitWorkflowChange('redo', undefined);
1134
- }
1135
- /**
1136
- * Check if undo is available
1137
- */
1138
- canUndo() {
1139
- return this._historyIndex > 0;
1140
- }
1141
- /**
1142
- * Check if redo is available
1143
- */
1144
- canRedo() {
1145
- return this._historyIndex < this._history.length - 1;
1146
- }
1147
- /**
1148
- * Export current workflow as JSON
1149
- */
1150
- exportWorkflow() {
1151
- return JSON.stringify(this.workflow, null, 2);
1152
- }
1153
- /**
1154
- * Validate workflow
1155
- */
1156
- validate() {
1157
- const errors = WorkflowValidator.validate(this.workflow);
1158
- this.dispatchEvent(new CustomEvent('validation-result', {
1159
- detail: { errors },
1160
- bubbles: true,
1161
- composed: true,
1162
- }));
1163
- }
1164
- _emitWorkflowChange(type, nodeId) {
1165
- this.dispatchEvent(new CustomEvent('workflow-changed', {
1166
- detail: {
1167
- type,
1168
- nodeId,
1169
- workflow: this.workflow,
1170
- },
1171
- bubbles: true,
1172
- composed: true,
1173
- }));
1174
- }
1175
- render() {
1176
- if (!this.workflow?.nodes) {
1177
- return b `<div class="flow-designer-container">
1178
- <p class="empty-state">No workflow loaded</p>
1179
- </div>`;
1180
- }
1181
- const validationErrors = this.showValidation
1182
- ? WorkflowValidator.validate(this.workflow)
1183
- : [];
1184
- const canvasBounds = SwimlaneLayout.getCanvasBounds(this._positionedNodes);
1185
- return b `
1186
- <div class="flow-designer-container">
1187
- <wc-toolbar
1188
- class="editor-toolbar"
1189
- variant="floating"
1190
- orientation="horizontal"
1191
- elevated
1192
- >
1193
- <wc-icon-button
1194
- variant="text"
1195
- ?disabled=${this._editor.zoom <= 0.5}
1196
- @click=${this._handleZoomOut}
1197
- title="Zoom Out (Ctrl+-)"
1198
- >
1199
- <wc-icon name="remove"></wc-icon>
1200
- </wc-icon-button>
1201
- <span class="zoom-display">${Math.round(this._editor.zoom * 100)}%</span>
1202
- <wc-icon-button
1203
- variant="text"
1204
- ?disabled=${this._editor.zoom >= 2}
1205
- @click=${this._handleZoomIn}
1206
- title="Zoom In (Ctrl++)"
1207
- >
1208
- <wc-icon name="add"></wc-icon>
1209
- </wc-icon-button>
1210
- <wc-icon-button
1211
- variant="text"
1212
- ?disabled=${!this.canUndo()}
1213
- @click=${() => this.undo()}
1214
- title="Undo (Ctrl+Z)"
1215
- >
1216
- <wc-icon name="undo"></wc-icon>
1217
- </wc-icon-button>
1218
- <wc-icon-button
1219
- variant="text"
1220
- ?disabled=${!this.canRedo()}
1221
- @click=${() => this.redo()}
1222
- title="Redo (Ctrl+Y)"
1223
- >
1224
- <wc-icon name="redo"></wc-icon>
1225
- </wc-icon-button>
1226
- ${!this.readonly
1227
- ? b `
1228
- <wc-icon-button
1229
- variant="text"
1230
- @click=${() => this.validate()}
1231
- title="Validate Workflow"
1232
- >
1233
- <wc-icon name="check_circle"></wc-icon>
1234
- </wc-icon-button>
1235
- `
1236
- : A}
1237
- </wc-toolbar>
1238
-
1239
- <!-- Validation messages -->
1240
- ${validationErrors.length > 0
1241
- ? b `
1242
- <div class="validation-panel">
1243
- ${validationErrors.map((error) => b `
1244
- <div class="validation-item ${error.severity}">
1245
- <wc-icon
1246
- name=${error.severity === 'error' ? 'error' : 'warning'}
1247
- ></wc-icon>
1248
- <span>${error.message}</span>
1249
- </div>
1250
- `)}
1251
- </div>
1252
- `
1253
- : A}
1254
-
1255
- <!-- Flow canvas -->
1256
- <div
1257
- class="flow-designer"
1258
- @mousedown=${this._handleCanvasMouseDown}
1259
- @mousemove=${this._handleCanvasMouseMove}
1260
- >
1261
- <div
1262
- class="canvas-container"
1263
- style="
1264
- transform: scale(${this._editor.zoom});
1265
- width: ${canvasBounds.width}px;
1266
- height: ${canvasBounds.height}px;
1267
- "
1268
- >
1269
- <!-- SVG Connectors -->
1270
- <svg
1271
- class="connectors-layer"
1272
- width="${canvasBounds.width}"
1273
- height="${canvasBounds.height}"
1274
- viewBox="0 0 ${canvasBounds.width} ${canvasBounds.height}"
1275
- >
1276
- <defs>
1277
- <marker
1278
- id="arrowhead"
1279
- markerWidth="10"
1280
- markerHeight="10"
1281
- refX="9"
1282
- refY="3"
1283
- orient="auto"
1284
- >
1285
- <polygon points="0 0, 10 3, 0 6" fill="currentColor"></polygon>
1286
- </marker>
1287
- </defs>
1288
- ${this._renderConnectors()}
1289
- </svg>
1290
-
1291
- <!-- Swimlane backgrounds -->
1292
- <div class="swimlanes-container">
1293
- ${this._renderSwimlanes()}
1294
- </div>
1295
-
1296
- <!-- Positioned nodes -->
1297
- <div class="nodes-layer">
1298
- ${this._renderNodes()}
1299
- </div>
1300
- </div>
1301
- </div>
1302
- </div>
1303
- `;
1304
- }
1305
- _renderConnectors() {
1306
- return this._positionedNodes.flatMap((node) => {
1307
- if (!node.connectorPoints)
1308
- return [];
1309
- return node.connectorPoints.map((connector, idx) => {
1310
- const { from, to, type } = connector;
1311
- const isLoopback = type === 'curved';
1312
- if (isLoopback) {
1313
- // Render curved path for loop back
1314
- const midY = (from.y + to.y) / 2;
1315
- const d = `M ${from.x} ${from.y} ` +
1316
- `L ${from.x + 30} ${from.y} ` +
1317
- `Q ${from.x + 60} ${midY} ${to.x - 30} ${to.y} ` +
1318
- `L ${to.x} ${to.y}`;
1319
- return b `
1320
- <path
1321
- key=${`${node.node.id}-connector-${idx}`}
1322
- d=${d}
1323
- class="connector ${type}"
1324
- marker-end="url(#arrowhead)"
1325
- vector-effect="non-scaling-stroke"
1326
- ></path>
1327
- `;
1328
- }
1329
- // Render straight connector
1330
- const d = `M ${from.x} ${from.y} L ${to.x} ${to.y}`;
1331
- return b `
1332
- <path
1333
- key=${`${node.node.id}-connector-${idx}`}
1334
- d=${d}
1335
- class="connector ${type}"
1336
- marker-end="url(#arrowhead)"
1337
- vector-effect="non-scaling-stroke"
1338
- ></path>
1339
- `;
1340
- });
1341
- });
1342
- }
1343
- _renderSwimlanes() {
1344
- const swimlanes = SwimlaneLayout.getSwimlanes(this._positionedNodes);
1345
- return swimlanes.map((lane) => {
1346
- const laneTop = Math.min(...lane.nodes.map((n) => n.y)) - 14;
1347
- const laneBottom = Math.max(...lane.nodes.map((n) => n.y + n.height)) + 14;
1348
- const laneHeight = Math.max(120, laneBottom - laneTop);
1349
- return b `
1350
- <div
1351
- class="swimlane ${lane.isParallel ? 'parallel' : ''}"
1352
- style="top: ${laneTop}px; height: ${laneHeight}px;"
1353
- >
1354
- <div class="swimlane-header">${lane.name}</div>
1355
- </div>
1356
- `;
1357
- });
1358
- }
1359
- _renderNodes() {
1360
- return this._positionedNodes.map((posNode) => b `
1361
- <div
1362
- class="positioned-node"
1363
- style="
1364
- left: ${posNode.x}px;
1365
- top: ${posNode.y}px;
1366
- width: ${posNode.width}px;
1367
- height: ${posNode.height}px;
1368
- "
1369
- >
1370
- <wc-flow-designer-node
1371
- .node=${posNode.node}
1372
- ?selected=${posNode.node.id === this._editor.selectedNodeId}
1373
- ?editing=${this._editor.isEditing &&
1374
- posNode.node.id === this._editor.selectedNodeId}
1375
- ?disabled=${this.disabled}
1376
- @node-click=${this._handleNodeClick}
1377
- @node-delete=${this._handleNodeDelete}
1378
- @node-edit-start=${this._handleNodeEdit}
1379
- ></wc-flow-designer-node>
1380
- </div>
1381
- `);
1382
- }
1383
- };
1384
- FlowDesigner.styles = [css_248z];
1385
- __decorate([
1386
- n({ type: Object })
1387
- ], FlowDesigner.prototype, "workflow", void 0);
1388
- __decorate([
1389
- n({ type: Boolean, reflect: true, attribute: 'readonly' })
1390
- ], FlowDesigner.prototype, "readonly", void 0);
1391
- __decorate([
1392
- n({ type: Boolean, reflect: true })
1393
- ], FlowDesigner.prototype, "disabled", void 0);
1394
- __decorate([
1395
- n({ type: Boolean, attribute: 'show-validation' })
1396
- ], FlowDesigner.prototype, "showValidation", void 0);
1397
- __decorate([
1398
- r()
1399
- ], FlowDesigner.prototype, "_editor", void 0);
1400
- __decorate([
1401
- r()
1402
- ], FlowDesigner.prototype, "_positionedNodes", void 0);
1403
- __decorate([
1404
- r()
1405
- ], FlowDesigner.prototype, "_history", void 0);
1406
- __decorate([
1407
- r()
1408
- ], FlowDesigner.prototype, "_historyIndex", void 0);
1409
- __decorate([
1410
- e('.flow-designer')
1411
- ], FlowDesigner.prototype, "scrollElm", void 0);
1412
- FlowDesigner = __decorate([
1413
- IndividualComponent
1414
- ], FlowDesigner);
1415
-
1416
- export { FlowDesigner };
1417
- //# sourceMappingURL=flow-designer.js.map