@flowuent-org/diagramming-core 1.3.8 → 1.3.9

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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flowuent-org/diagramming-core",
3
- "version": "1.3.8",
3
+ "version": "1.3.9",
4
4
  "license": "MIT",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -336,11 +336,13 @@ export const AutomationApiNode: React.FC<AutomationApiNodeProps> = ({ data, sele
336
336
  sx={{
337
337
  width: '32px',
338
338
  height: '32px',
339
+ minWidth: '32px',
339
340
  backgroundColor: '#1E3A8A',
340
341
  borderRadius: '50%',
341
342
  display: 'flex',
342
343
  alignItems: 'center',
343
344
  justifyContent: 'center',
345
+ flexShrink: 0,
344
346
  }}
345
347
  >
346
348
  <ApiNodeIcon/>
@@ -338,9 +338,25 @@ export const AutomationFormattingNode: React.FC<AutomationFormattingNodeProps> =
338
338
  {/* Title Section */}
339
339
  <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 2 }}>
340
340
  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
341
-
342
- <FormattingNodeIcon />
343
-
341
+ <Box
342
+ sx={{
343
+ width: '32px',
344
+ height: '32px',
345
+ minWidth: '32px',
346
+ backgroundColor: '#1E3A8A',
347
+ borderRadius: '50%',
348
+ display: 'flex',
349
+ alignItems: 'center',
350
+ justifyContent: 'center',
351
+ flexShrink: 0,
352
+ }}
353
+ >
354
+ {isArticleAnalyzer ? (
355
+ <ArticleAnalyzerIcon size={18} color="#FFFFFF" />
356
+ ) : (
357
+ <FormattingNodeIcon size={18} color="#FFFFFF" />
358
+ )}
359
+ </Box>
344
360
  <Typography variant="h6" sx={{ fontWeight: 600, fontSize: '16px' }}>
345
361
  {highlightText(data.label)}
346
362
  </Typography>
@@ -485,7 +485,7 @@ export const AutomationGoogleServicesNode: React.FC<AutomationGoogleServicesNode
485
485
  >
486
486
  {/* Top Header Section */}
487
487
  <Box sx={{
488
- backgroundColor: `${serviceConfig.color}15`,
488
+ backgroundColor: "rgba(67, 93, 132, 0.1)",
489
489
  padding: '8px 16px',
490
490
  borderRadius: '12px 12px 0 0'
491
491
  }}>
@@ -507,11 +507,13 @@ export const AutomationGoogleServicesNode: React.FC<AutomationGoogleServicesNode
507
507
  sx={{
508
508
  width: '32px',
509
509
  height: '32px',
510
+ minWidth: '32px',
510
511
  backgroundColor: '#1E3A8A',
511
512
  borderRadius: '50%',
512
513
  display: 'flex',
513
514
  alignItems: 'center',
514
515
  justifyContent: 'center',
516
+ flexShrink: 0,
515
517
  }}
516
518
  >
517
519
  <ServiceIcon sx={{ color: 'white', fontSize: '18px' }} />
@@ -425,7 +425,7 @@ export const AutomationInteractionNode: React.FC<AutomationInteractionNodeProps>
425
425
  >
426
426
  {/* Top Header Section */}
427
427
  <Box sx={{
428
- backgroundColor: `${interactionConfig.color}15`,
428
+ backgroundColor: "rgba(67, 93, 132, 0.1)",
429
429
  padding: '8px 16px',
430
430
  borderRadius: '12px 12px 0 0'
431
431
  }}>
@@ -447,11 +447,13 @@ export const AutomationInteractionNode: React.FC<AutomationInteractionNodeProps>
447
447
  sx={{
448
448
  width: '32px',
449
449
  height: '32px',
450
+ minWidth: '32px',
450
451
  backgroundColor: '#1E3A8A',
451
452
  borderRadius: '50%',
452
453
  display: 'flex',
453
454
  alignItems: 'center',
454
455
  justifyContent: 'center',
456
+ flexShrink: 0,
455
457
  }}
456
458
  >
457
459
  <InteractionIcon sx={{ color: 'white', fontSize: '18px' }} />
@@ -295,9 +295,21 @@ export const AutomationNavigationNode: React.FC<AutomationNavigationNodeProps> =
295
295
  {/* Title Section */}
296
296
  <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 2 }}>
297
297
  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
298
-
298
+ <Box
299
+ sx={{
300
+ width: '32px',
301
+ height: '32px',
302
+ minWidth: '32px',
303
+ backgroundColor: '#8b5cf6',
304
+ borderRadius: '50%',
305
+ display: 'flex',
306
+ alignItems: 'center',
307
+ justifyContent: 'center',
308
+ flexShrink: 0,
309
+ }}
310
+ >
299
311
  <NavigationIcon />
300
-
312
+ </Box>
301
313
  <Typography variant="h6" sx={{ fontWeight: 600, fontSize: '16px' }}>
302
314
  {highlightText(data.label)}
303
315
  </Typography>
@@ -746,6 +746,21 @@ Data: ${JSON.stringify(data, null, 2)}
746
746
  }}
747
747
  onClick={handleJsonClick}
748
748
  >
749
+ {/* Top Header Section */}
750
+ <Box sx={{
751
+ backgroundColor: "rgba(67, 93, 132, 0.1)",
752
+ padding: '8px 16px',
753
+ borderRadius: '12px 12px 0 0'
754
+ }}>
755
+ <Typography variant="body2" sx={{
756
+ color: '#ffffff',
757
+ fontSize: '12px',
758
+ fontWeight: 500
759
+ }}>
760
+ {data.description || 'Export data to Google Sheets'}
761
+ </Typography>
762
+ </Box>
763
+
749
764
  {/* Header */}
750
765
  <Box sx={{
751
766
  display: 'flex',
@@ -759,11 +774,13 @@ Data: ${JSON.stringify(data, null, 2)}
759
774
  sx={{
760
775
  width: '32px',
761
776
  height: '32px',
777
+ minWidth: '32px',
762
778
  backgroundColor: '#1E3A8A',
763
779
  borderRadius: '50%',
764
780
  display: 'flex',
765
781
  alignItems: 'center',
766
782
  justifyContent: 'center',
783
+ flexShrink: 0,
767
784
  }}
768
785
  >
769
786
  <IconComponent sx={{ color: 'white', fontSize: '18px' }} />
@@ -457,11 +457,26 @@ export const AutomationSlackNode: React.FC<AutomationSlackNodeProps> = ({
457
457
  }}
458
458
  />
459
459
 
460
+ {/* Top Header Section */}
461
+ <Box sx={{
462
+ backgroundColor: "rgba(67, 93, 132, 0.1)",
463
+ padding: '8px 16px',
464
+ borderRadius: '12px 12px 0 0'
465
+ }}>
466
+ <Typography variant="body2" sx={{
467
+ color: '#ffffff',
468
+ fontSize: '12px',
469
+ fontWeight: 500
470
+ }}>
471
+ {data.description || operationConfig.description}
472
+ </Typography>
473
+ </Box>
474
+
460
475
  {/* Header */}
461
476
  <Box
462
477
  sx={{
463
- bgcolor: `${operationConfig.color}15`,
464
- borderBottom: `1px solid ${operationConfig.color}30`,
478
+ bgcolor: "rgba(67, 93, 132, 0.1)",
479
+ borderBottom: `1px solid rgba(67, 93, 132, 0.2)`,
465
480
  px: 2,
466
481
  py: 1.5,
467
482
  display: 'flex',
@@ -474,11 +489,13 @@ export const AutomationSlackNode: React.FC<AutomationSlackNodeProps> = ({
474
489
  sx={{
475
490
  width: '32px',
476
491
  height: '32px',
492
+ minWidth: '32px',
477
493
  backgroundColor: '#1E3A8A',
478
494
  borderRadius: '50%',
479
495
  display: 'flex',
480
496
  alignItems: 'center',
481
497
  justifyContent: 'center',
498
+ flexShrink: 0,
482
499
  }}
483
500
  >
484
501
  <OperationIcon sx={{ fontSize: 18, color: '#fff' }} />
@@ -490,12 +507,6 @@ export const AutomationSlackNode: React.FC<AutomationSlackNodeProps> = ({
490
507
  >
491
508
  {highlightText(data.label || operationConfig.label)}
492
509
  </Typography>
493
- <Typography
494
- variant="caption"
495
- sx={{ color: '#9CA3AF', fontSize: 10 }}
496
- >
497
- {data.description || operationConfig.description}
498
- </Typography>
499
510
  </Box>
500
511
  </Box>
501
512
  {renderStatusBadge()}
@@ -450,11 +450,26 @@ export const AutomationTelegramNode: React.FC<AutomationTelegramNodeProps> = ({
450
450
  }}
451
451
  />
452
452
 
453
+ {/* Top Header Section */}
454
+ <Box sx={{
455
+ backgroundColor: "rgba(67, 93, 132, 0.1)",
456
+ padding: '8px 16px',
457
+ borderRadius: '12px 12px 0 0'
458
+ }}>
459
+ <Typography variant="body2" sx={{
460
+ color: '#ffffff',
461
+ fontSize: '12px',
462
+ fontWeight: 500
463
+ }}>
464
+ {data.description || operationConfig.description}
465
+ </Typography>
466
+ </Box>
467
+
453
468
  {/* Header */}
454
469
  <Box
455
470
  sx={{
456
- bgcolor: `${operationConfig.color}15`,
457
- borderBottom: `1px solid ${operationConfig.color}30`,
471
+ bgcolor: "rgba(67, 93, 132, 0.1)",
472
+ borderBottom: `1px solid rgba(67, 93, 132, 0.2)`,
458
473
  px: 2,
459
474
  py: 1.5,
460
475
  display: 'flex',
@@ -467,11 +482,13 @@ export const AutomationTelegramNode: React.FC<AutomationTelegramNodeProps> = ({
467
482
  sx={{
468
483
  width: '32px',
469
484
  height: '32px',
485
+ minWidth: '32px',
470
486
  backgroundColor: '#1E3A8A',
471
487
  borderRadius: '50%',
472
488
  display: 'flex',
473
489
  alignItems: 'center',
474
490
  justifyContent: 'center',
491
+ flexShrink: 0,
475
492
  }}
476
493
  >
477
494
  <OperationIcon sx={{ fontSize: 18, color: '#fff' }} />
@@ -483,12 +500,6 @@ export const AutomationTelegramNode: React.FC<AutomationTelegramNodeProps> = ({
483
500
  >
484
501
  {highlightText(data.label || operationConfig.label)}
485
502
  </Typography>
486
- <Typography
487
- variant="caption"
488
- sx={{ color: '#9CA3AF', fontSize: 10 }}
489
- >
490
- {data.description || operationConfig.description}
491
- </Typography>
492
503
  </Box>
493
504
  </Box>
494
505
  {renderStatusBadge()}
@@ -67,9 +67,9 @@ export const ArticleAnalyzerIcon: React.FC<SvgIconProps> = ({ size = 15, color =
67
67
  export const StartNodeIcon: React.FC<SvgIconProps> = ({ size, color, style }) => (
68
68
  <svg width="35" height="35" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
69
69
  <path d="M0 14C0 6.26801 6.26801 0 14 0C21.732 0 28 6.26801 28 14C28 21.732 21.732 28 14 28C6.26801 28 0 21.732 0 14Z" fill="#1E3A8A"/>
70
- <g clip-path="url(#clip0_8650_35616)">
71
- <path d="M14.0007 20.6663C17.6825 20.6663 20.6673 17.6816 20.6673 13.9997C20.6673 10.3178 17.6825 7.33301 14.0007 7.33301C10.3188 7.33301 7.33398 10.3178 7.33398 13.9997C7.33398 17.6816 10.3188 20.6663 14.0007 20.6663Z" stroke="#86EFAC" stroke-linecap="round" stroke-linejoin="round"/>
72
- <path d="M12.666 11.333L16.666 13.9997L12.666 16.6663V11.333Z" stroke="#86EFAC" stroke-linecap="round" stroke-linejoin="round"/>
70
+ <g clipPath="url(#clip0_8650_35616)">
71
+ <path d="M14.0007 20.6663C17.6825 20.6663 20.6673 17.6816 20.6673 13.9997C20.6673 10.3178 17.6825 7.33301 14.0007 7.33301C10.3188 7.33301 7.33398 10.3178 7.33398 13.9997C7.33398 17.6816 10.3188 20.6663 14.0007 20.6663Z" stroke="#86EFAC" strokeLinecap="round" strokeLinejoin="round"/>
72
+ <path d="M12.666 11.333L16.666 13.9997L12.666 16.6663V11.333Z" stroke="#86EFAC" strokeLinecap="round" strokeLinejoin="round"/>
73
73
  </g>
74
74
  <defs>
75
75
  <clipPath id="clip0_8650_35616">
@@ -85,10 +85,10 @@ export const StartNodeIcon: React.FC<SvgIconProps> = ({ size, color, style }) =>
85
85
  export const NavigationIcon: React.FC<SvgIconProps> = ({ size, color, style }) => (
86
86
  <svg width="35" height="35" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
87
87
  <path d="M0 14C0 6.26801 6.26801 0 14 0C21.732 0 28 6.26801 28 14C28 21.732 21.732 28 14 28C6.26801 28 0 21.732 0 14Z" fill="#1E3A8A"/>
88
- <g clip-path="url(#clip0_8650_35642)">
89
- <path d="M14.0007 20.6663C17.6825 20.6663 20.6673 17.6816 20.6673 13.9997C20.6673 10.3178 17.6825 7.33301 14.0007 7.33301C10.3188 7.33301 7.33398 10.3178 7.33398 13.9997C7.33398 17.6816 10.3188 20.6663 14.0007 20.6663Z" stroke="#93C5FD" stroke-linecap="round" stroke-linejoin="round"/>
90
- <path d="M14.0007 7.33301C12.2888 9.13044 11.334 11.5175 11.334 13.9997C11.334 16.4818 12.2888 18.8689 14.0007 20.6663C15.7125 18.8689 16.6673 16.4818 16.6673 13.9997C16.6673 11.5175 15.7125 9.13044 14.0007 7.33301Z" stroke="#93C5FD" stroke-linecap="round" stroke-linejoin="round"/>
91
- <path d="M7.33398 14H20.6673" stroke="#93C5FD" stroke-linecap="round" stroke-linejoin="round"/>
88
+ <g clipPath="url(#clip0_8650_35642)">
89
+ <path d="M14.0007 20.6663C17.6825 20.6663 20.6673 17.6816 20.6673 13.9997C20.6673 10.3178 17.6825 7.33301 14.0007 7.33301C10.3188 7.33301 7.33398 10.3178 7.33398 13.9997C7.33398 17.6816 10.3188 20.6663 14.0007 20.6663Z" stroke="#93C5FD" strokeLinecap="round" strokeLinejoin="round"/>
90
+ <path d="M14.0007 7.33301C12.2888 9.13044 11.334 11.5175 11.334 13.9997C11.334 16.4818 12.2888 18.8689 14.0007 20.6663C15.7125 18.8689 16.6673 16.4818 16.6673 13.9997C16.6673 11.5175 15.7125 9.13044 14.0007 7.33301Z" stroke="#93C5FD" strokeLinecap="round" strokeLinejoin="round"/>
91
+ <path d="M7.33398 14H20.6673" stroke="#93C5FD" strokeLinecap="round" strokeLinejoin="round"/>
92
92
  </g>
93
93
  <defs>
94
94
  <clipPath id="clip0_8650_35642">
@@ -269,7 +269,7 @@ export const EntityIcon: React.FC<SvgIconProps> = ({ size, color = '#86EFAC', st
269
269
  export const EndNodeIcon: React.FC<SvgIconProps> = ({ size, color , style }) => (
270
270
  <svg width="35" height="35" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
271
271
  <path d="M0 14C0 6.26801 6.26801 0 14 0C21.732 0 28 6.26801 28 14C28 21.732 21.732 28 14 28C6.26801 28 0 21.732 0 14Z" fill="#1E3A8A"/>
272
- <path d="M18.6667 8H9.33333C8.59695 8 8 8.59695 8 9.33333V18.6667C8 19.403 8.59695 20 9.33333 20H18.6667C19.403 20 20 19.403 20 18.6667V9.33333C20 8.59695 19.403 8 18.6667 8Z" stroke="#FCA5A5" stroke-linecap="round" stroke-linejoin="round"/>
272
+ <path d="M18.6667 8H9.33333C8.59695 8 8 8.59695 8 9.33333V18.6667C8 19.403 8.59695 20 9.33333 20H18.6667C19.403 20 20 19.403 20 18.6667V9.33333C20 8.59695 19.403 8 18.6667 8Z" stroke="#FCA5A5" strokeLinecap="round" strokeLinejoin="round"/>
273
273
  </svg>
274
274
 
275
275
  );
@@ -277,16 +277,16 @@ export const EndNodeIcon: React.FC<SvgIconProps> = ({ size, color , style }) =>
277
277
  export const FormattingNodeIcon: React.FC<SvgIconProps> = ({ size, color , style }) => (
278
278
  <svg width="35" height="35" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
279
279
  <path d="M0 14C0 6.26801 6.26801 0 14 0C21.732 0 28 6.26801 28 14C28 21.732 21.732 28 14 28C6.26801 28 0 21.732 0 14Z" fill="#1E3A8A"/>
280
- <path d="M15.9993 7.33301H9.99935C9.64573 7.33301 9.30659 7.47348 9.05654 7.72353C8.80649 7.97358 8.66602 8.31272 8.66602 8.66634V19.333C8.66602 19.6866 8.80649 20.0258 9.05654 20.2758C9.30659 20.5259 9.64573 20.6663 9.99935 20.6663H17.9993C18.353 20.6663 18.6921 20.5259 18.9422 20.2758C19.1922 20.0258 19.3327 19.6866 19.3327 19.333V10.6663L15.9993 7.33301Z" stroke="#D8B4FE" stroke-linecap="round" stroke-linejoin="round"/>
281
- <path d="M15.334 7.33301V9.99967C15.334 10.3533 15.4745 10.6924 15.7245 10.9425C15.9746 11.1925 16.3137 11.333 16.6673 11.333H19.334" stroke="#D8B4FE" stroke-linecap="round" stroke-linejoin="round"/>
282
- <path d="M12.6673 12H11.334" stroke="#D8B4FE" stroke-linecap="round" stroke-linejoin="round"/>
283
- <path d="M16.6673 14.667H11.334" stroke="#D8B4FE" stroke-linecap="round" stroke-linejoin="round"/>
284
- <path d="M16.6673 17.333H11.334" stroke="#D8B4FE" stroke-linecap="round" stroke-linejoin="round"/>
280
+ <path d="M15.9993 7.33301H9.99935C9.64573 7.33301 9.30659 7.47348 9.05654 7.72353C8.80649 7.97358 8.66602 8.31272 8.66602 8.66634V19.333C8.66602 19.6866 8.80649 20.0258 9.05654 20.2758C9.30659 20.5259 9.64573 20.6663 9.99935 20.6663H17.9993C18.353 20.6663 18.6921 20.5259 18.9422 20.2758C19.1922 20.0258 19.3327 19.6866 19.3327 19.333V10.6663L15.9993 7.33301Z" stroke="#D8B4FE" strokeLinecap="round" strokeLinejoin="round"/>
281
+ <path d="M15.334 7.33301V9.99967C15.334 10.3533 15.4745 10.6924 15.7245 10.9425C15.9746 11.1925 16.3137 11.333 16.6673 11.333H19.334" stroke="#D8B4FE" strokeLinecap="round" strokeLinejoin="round"/>
282
+ <path d="M12.6673 12H11.334" stroke="#D8B4FE" strokeLinecap="round" strokeLinejoin="round"/>
283
+ <path d="M16.6673 14.667H11.334" stroke="#D8B4FE" strokeLinecap="round" strokeLinejoin="round"/>
284
+ <path d="M16.6673 17.333H11.334" stroke="#D8B4FE" strokeLinecap="round" strokeLinejoin="round"/>
285
285
  </svg>
286
286
  );
287
287
 
288
288
  export const ApiNodeIcon: React.FC<SvgIconProps> = ({ size, color , style }) => (
289
289
  <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
290
- <path d="M3.89167 3.92167L2.66667 2.68583M10.4242 3.92167L11.6492 2.68583M2.66583 11.7525L3.89083 10.5158M7.1575 2.27417V0.625M2.2575 7.21917H0.625M12.1875 12.155L15.3658 10.9C15.4425 10.8693 15.5083 10.8164 15.5546 10.748C15.6009 10.6796 15.6256 10.5988 15.6256 10.5162C15.6256 10.4337 15.6009 10.3529 15.5546 10.2845C15.5083 10.2161 15.4425 10.1632 15.3658 10.1325L7.72833 7.12C7.65398 7.09123 7.57285 7.08475 7.49488 7.10138C7.4169 7.118 7.34547 7.157 7.28931 7.21359C7.23316 7.27019 7.19472 7.34193 7.17871 7.42003C7.1627 7.49813 7.16981 7.57921 7.19917 7.65333L10.1842 15.3625C10.3192 15.7125 10.8092 15.7125 10.9442 15.3625L12.1875 12.155Z" stroke="#FCFAFF" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
290
+ <path d="M3.89167 3.92167L2.66667 2.68583M10.4242 3.92167L11.6492 2.68583M2.66583 11.7525L3.89083 10.5158M7.1575 2.27417V0.625M2.2575 7.21917H0.625M12.1875 12.155L15.3658 10.9C15.4425 10.8693 15.5083 10.8164 15.5546 10.748C15.6009 10.6796 15.6256 10.5988 15.6256 10.5162C15.6256 10.4337 15.6009 10.3529 15.5546 10.2845C15.5083 10.2161 15.4425 10.1632 15.3658 10.1325L7.72833 7.12C7.65398 7.09123 7.57285 7.08475 7.49488 7.10138C7.4169 7.118 7.34547 7.157 7.28931 7.21359C7.23316 7.27019 7.19472 7.34193 7.17871 7.42003C7.1627 7.49813 7.16981 7.57921 7.19917 7.65333L10.1842 15.3625C10.3192 15.7125 10.8092 15.7125 10.9442 15.3625L12.1875 12.155Z" stroke="#FCFAFF" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round"/>
291
291
  </svg>
292
292
  );