@eventcatalog/core 2.25.0 → 2.25.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.
- package/dist/analytics/analytics.cjs +1 -1
- package/dist/analytics/analytics.js +2 -2
- package/dist/analytics/log-build.cjs +1 -1
- package/dist/analytics/log-build.js +3 -3
- package/dist/{chunk-H6PSWK2Z.js → chunk-DZIMF2ES.js} +1 -1
- package/dist/{chunk-JENKAK6L.js → chunk-O33THQNO.js} +1 -1
- package/dist/{chunk-7674GE3M.js → chunk-OZLFIB46.js} +1 -1
- package/dist/constants.cjs +1 -1
- package/dist/constants.js +1 -1
- package/dist/eventcatalog.cjs +1 -1
- package/dist/eventcatalog.js +3 -3
- package/eventcatalog/src/components/MDX/NodeGraph/Edges/FlowEdge.tsx +96 -0
- package/eventcatalog/src/components/MDX/NodeGraph/NodeGraph.tsx +7 -5
- package/eventcatalog/src/components/MDX/Tiles/Tile.astro +7 -1
- package/eventcatalog/src/pages/chat/index.astro +4 -1
- package/eventcatalog/src/utils/node-graphs/flows-node-graph.ts +3 -3
- package/package.json +5 -5
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import {
|
|
2
2
|
log_build_default
|
|
3
|
-
} from "../chunk-
|
|
4
|
-
import "../chunk-
|
|
5
|
-
import "../chunk-
|
|
3
|
+
} from "../chunk-OZLFIB46.js";
|
|
4
|
+
import "../chunk-O33THQNO.js";
|
|
5
|
+
import "../chunk-DZIMF2ES.js";
|
|
6
6
|
import "../chunk-E7TXTI7G.js";
|
|
7
7
|
export {
|
|
8
8
|
log_build_default as default
|
package/dist/constants.cjs
CHANGED
package/dist/constants.js
CHANGED
package/dist/eventcatalog.cjs
CHANGED
package/dist/eventcatalog.js
CHANGED
|
@@ -6,14 +6,14 @@ import {
|
|
|
6
6
|
} from "./chunk-OW2FQPYP.js";
|
|
7
7
|
import {
|
|
8
8
|
log_build_default
|
|
9
|
-
} from "./chunk-
|
|
10
|
-
import "./chunk-
|
|
9
|
+
} from "./chunk-OZLFIB46.js";
|
|
10
|
+
import "./chunk-O33THQNO.js";
|
|
11
11
|
import {
|
|
12
12
|
catalogToAstro
|
|
13
13
|
} from "./chunk-VCR3LHZR.js";
|
|
14
14
|
import {
|
|
15
15
|
VERSION
|
|
16
|
-
} from "./chunk-
|
|
16
|
+
} from "./chunk-DZIMF2ES.js";
|
|
17
17
|
import {
|
|
18
18
|
isBackstagePluginEnabled
|
|
19
19
|
} from "./chunk-XMDPVKIJ.js";
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
import { useMemo } from 'react';
|
|
2
|
+
import { BaseEdge, EdgeLabelRenderer, getBezierPath, type EdgeProps as XYFlowEdgeProps } from '@xyflow/react';
|
|
3
|
+
|
|
4
|
+
interface EdgeData {
|
|
5
|
+
message?: {
|
|
6
|
+
collection?: string;
|
|
7
|
+
};
|
|
8
|
+
opacity?: number;
|
|
9
|
+
animated?: boolean;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
interface CustomEdgeProps extends Omit<XYFlowEdgeProps, 'data'> {
|
|
13
|
+
data?: EdgeData;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
export default function CustomEdge({
|
|
17
|
+
id,
|
|
18
|
+
sourceX,
|
|
19
|
+
sourceY,
|
|
20
|
+
targetX,
|
|
21
|
+
targetY,
|
|
22
|
+
sourcePosition,
|
|
23
|
+
targetPosition,
|
|
24
|
+
style = {},
|
|
25
|
+
markerEnd,
|
|
26
|
+
label,
|
|
27
|
+
labelStyle,
|
|
28
|
+
data,
|
|
29
|
+
}: CustomEdgeProps) {
|
|
30
|
+
const [edgePath, labelX, labelY] = getBezierPath({
|
|
31
|
+
sourceX,
|
|
32
|
+
sourceY,
|
|
33
|
+
sourcePosition,
|
|
34
|
+
targetX,
|
|
35
|
+
targetY,
|
|
36
|
+
targetPosition,
|
|
37
|
+
});
|
|
38
|
+
|
|
39
|
+
const randomDelay = useMemo(() => Math.random() * 1, []);
|
|
40
|
+
const collection = data?.message?.collection;
|
|
41
|
+
const opacity = data?.opacity ?? 1;
|
|
42
|
+
|
|
43
|
+
const messageColor = useMemo(
|
|
44
|
+
() => (collection: string) => {
|
|
45
|
+
switch (collection) {
|
|
46
|
+
case 'events':
|
|
47
|
+
return 'orange';
|
|
48
|
+
case 'commands':
|
|
49
|
+
return 'blue';
|
|
50
|
+
case 'queries':
|
|
51
|
+
return 'green';
|
|
52
|
+
default:
|
|
53
|
+
return 'gray';
|
|
54
|
+
}
|
|
55
|
+
},
|
|
56
|
+
[]
|
|
57
|
+
);
|
|
58
|
+
|
|
59
|
+
return (
|
|
60
|
+
<>
|
|
61
|
+
<BaseEdge
|
|
62
|
+
path={edgePath}
|
|
63
|
+
markerEnd={markerEnd}
|
|
64
|
+
style={{
|
|
65
|
+
strokeWidth: 2,
|
|
66
|
+
stroke: '#fff',
|
|
67
|
+
...style,
|
|
68
|
+
}}
|
|
69
|
+
/>
|
|
70
|
+
{data?.animated && (
|
|
71
|
+
<g className={`z-30 ${opacity === 1 ? 'opacity-100' : 'opacity-10'}`}>
|
|
72
|
+
<circle cx="0" cy="0" r="7" fill={messageColor(collection || 'default')}>
|
|
73
|
+
<animateMotion dur="2s" repeatCount="indefinite" path={edgePath} rotate="auto" begin={`${randomDelay}s`}>
|
|
74
|
+
<mpath href={`#${id}`} />
|
|
75
|
+
</animateMotion>
|
|
76
|
+
</circle>
|
|
77
|
+
</g>
|
|
78
|
+
)}
|
|
79
|
+
{label && (
|
|
80
|
+
<EdgeLabelRenderer>
|
|
81
|
+
<div
|
|
82
|
+
style={{
|
|
83
|
+
position: 'absolute',
|
|
84
|
+
transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
|
|
85
|
+
zIndex: 1000,
|
|
86
|
+
...labelStyle,
|
|
87
|
+
}}
|
|
88
|
+
className="nodrag nopan max-w-[150px] text-xs bg-white px-2 py-1 rounded border border-gray-200 text-gray-600 font-medium shadow-sm"
|
|
89
|
+
>
|
|
90
|
+
{label}
|
|
91
|
+
</div>
|
|
92
|
+
</EdgeLabelRenderer>
|
|
93
|
+
)}
|
|
94
|
+
</>
|
|
95
|
+
);
|
|
96
|
+
}
|
|
@@ -24,6 +24,7 @@ import StepNode from './Nodes/Step';
|
|
|
24
24
|
import CommandNode from './Nodes/Command';
|
|
25
25
|
import ExternalSystemNode from './Nodes/ExternalSystem';
|
|
26
26
|
import AnimatedMessageEdge from './Edges/AnimatedMessageEdge';
|
|
27
|
+
import FlowEdge from './Edges/FlowEdge';
|
|
27
28
|
|
|
28
29
|
import type { CollectionEntry } from 'astro:content';
|
|
29
30
|
import { navigate } from 'astro:transitions/client';
|
|
@@ -75,6 +76,7 @@ const NodeGraphBuilder = ({
|
|
|
75
76
|
const edgeTypes = useMemo(
|
|
76
77
|
() => ({
|
|
77
78
|
animated: AnimatedMessageEdge,
|
|
79
|
+
'flow-edge': FlowEdge,
|
|
78
80
|
}),
|
|
79
81
|
[]
|
|
80
82
|
);
|
|
@@ -97,7 +99,7 @@ const NodeGraphBuilder = ({
|
|
|
97
99
|
eds.map((edge) => {
|
|
98
100
|
edge.style = { ...edge.style, opacity: 1 };
|
|
99
101
|
edge.labelStyle = { ...edge.labelStyle, opacity: 1 };
|
|
100
|
-
return { ...edge, data: { ...edge.data, opacity: 1 }, animated: animateMessages };
|
|
102
|
+
return { ...edge, data: { ...edge.data, opacity: 1, animated: animateMessages }, animated: animateMessages };
|
|
101
103
|
})
|
|
102
104
|
);
|
|
103
105
|
}, [setNodes, setEdges, animateMessages]);
|
|
@@ -125,7 +127,7 @@ const NodeGraphBuilder = ({
|
|
|
125
127
|
connectedNodeIds.add(edge.target);
|
|
126
128
|
return {
|
|
127
129
|
...edge,
|
|
128
|
-
data: { ...edge.data, opacity: 1 },
|
|
130
|
+
data: { ...edge.data, opacity: 1, animated: animateMessages },
|
|
129
131
|
style: { ...edge.style, opacity: 1 },
|
|
130
132
|
labelStyle: { ...edge.labelStyle, opacity: 1 },
|
|
131
133
|
animated: true,
|
|
@@ -133,7 +135,7 @@ const NodeGraphBuilder = ({
|
|
|
133
135
|
}
|
|
134
136
|
return {
|
|
135
137
|
...edge,
|
|
136
|
-
data: { ...edge.data, opacity: 0.1 },
|
|
138
|
+
data: { ...edge.data, opacity: 0.1, animated: animateMessages },
|
|
137
139
|
style: { ...edge.style, opacity: 0.1 },
|
|
138
140
|
labelStyle: { ...edge.labelStyle, opacity: 0.1 },
|
|
139
141
|
animated: animateMessages,
|
|
@@ -178,8 +180,8 @@ const NodeGraphBuilder = ({
|
|
|
178
180
|
eds.map((edge) => ({
|
|
179
181
|
...edge,
|
|
180
182
|
animated: animateMessages,
|
|
181
|
-
type: animateMessages ? 'animated' : 'default',
|
|
182
|
-
data: { ...edge.data, animateMessages },
|
|
183
|
+
type: edge.type === 'flow-edge' ? 'flow-edge' : animateMessages ? 'animated' : 'default',
|
|
184
|
+
data: { ...edge.data, animateMessages, animated: animateMessages },
|
|
183
185
|
}))
|
|
184
186
|
);
|
|
185
187
|
}, [animateMessages]);
|
|
@@ -14,10 +14,16 @@ interface Props {
|
|
|
14
14
|
const { href, icon, title, description, openWindow } = Astro.props;
|
|
15
15
|
|
|
16
16
|
const IconComponent: ComponentType<{ className?: string }> | undefined = Icons[icon];
|
|
17
|
+
|
|
18
|
+
function startsWithProtocol(str: string) {
|
|
19
|
+
// Regular expression to match common protocols (http, https, ftp, ws, etc.)
|
|
20
|
+
const regex = /^[a-zA-Z][a-zA-Z\d+\-.]*:\/\//;
|
|
21
|
+
return regex.test(str);
|
|
22
|
+
}
|
|
17
23
|
---
|
|
18
24
|
|
|
19
25
|
<a
|
|
20
|
-
href={buildUrl(href)}
|
|
26
|
+
href={startsWithProtocol(href) ? href : buildUrl(href)}
|
|
21
27
|
target={openWindow ? '_blank' : '_self'}
|
|
22
28
|
class="block bg-white border border-gray-200 rounded-lg p-6 transition-all duration-300 ease-in-out hover:shadow-md hover:border-primary focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-primary focus:ring-white"
|
|
23
29
|
>
|
|
@@ -107,7 +107,10 @@ const generatorConfig = `
|
|
|
107
107
|
<div class="bg-gray-700 rounded-lg p-4 md:p-6 mb-4">
|
|
108
108
|
<h3 class="text-lg text-white font-semibold mb-3">Quick Setup</h3>
|
|
109
109
|
<Code code={`npm install @eventcatalog/generator-ai`} lang="bash" frame="none" />
|
|
110
|
-
<a
|
|
110
|
+
<a
|
|
111
|
+
href="https://www.eventcatalog.dev/feature/ai-assistant"
|
|
112
|
+
class="inline-flex items-center text-sm text-white mt-4"
|
|
113
|
+
>
|
|
111
114
|
Learn more about setup →
|
|
112
115
|
</a>
|
|
113
116
|
</div>
|
|
@@ -118,18 +118,18 @@ export const getNodesAndEdges = async ({ id, defaultFlow, version, mode = 'simpl
|
|
|
118
118
|
id: `step-${step.id}-step-${path.id}`,
|
|
119
119
|
source: `step-${step.id}`,
|
|
120
120
|
target: `step-${path.id}`,
|
|
121
|
-
type: '
|
|
121
|
+
type: 'flow-edge',
|
|
122
122
|
label: path.label,
|
|
123
123
|
animated: true,
|
|
124
124
|
markerEnd: {
|
|
125
125
|
type: MarkerType.ArrowClosed,
|
|
126
126
|
width: 20,
|
|
127
127
|
height: 20,
|
|
128
|
-
color: '#
|
|
128
|
+
color: '#666',
|
|
129
129
|
},
|
|
130
130
|
style: {
|
|
131
131
|
strokeWidth: 2,
|
|
132
|
-
stroke: '#
|
|
132
|
+
stroke: '#ccc',
|
|
133
133
|
},
|
|
134
134
|
});
|
|
135
135
|
});
|
package/package.json
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
"url": "https://github.com/event-catalog/eventcatalog.git"
|
|
7
7
|
},
|
|
8
8
|
"type": "module",
|
|
9
|
-
"version": "2.25.
|
|
9
|
+
"version": "2.25.1",
|
|
10
10
|
"publishConfig": {
|
|
11
11
|
"access": "public"
|
|
12
12
|
},
|
|
@@ -21,9 +21,9 @@
|
|
|
21
21
|
"default-files-for-collections/"
|
|
22
22
|
],
|
|
23
23
|
"dependencies": {
|
|
24
|
-
"@astrojs/markdown-remark": "^6.
|
|
25
|
-
"@astrojs/mdx": "^4.0
|
|
26
|
-
"@astrojs/react": "^4.2.
|
|
24
|
+
"@astrojs/markdown-remark": "^6.2.0",
|
|
25
|
+
"@astrojs/mdx": "^4.1.0",
|
|
26
|
+
"@astrojs/react": "^4.2.1",
|
|
27
27
|
"@astrojs/rss": "^4.0.11",
|
|
28
28
|
"@astrojs/tailwind": "^6.0.0",
|
|
29
29
|
"@asyncapi/avro-schema-parser": "^3.0.24",
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
"@tailwindcss/typography": "^0.5.13",
|
|
44
44
|
"@tanstack/react-table": "^8.17.3",
|
|
45
45
|
"@xyflow/react": "^12.3.6",
|
|
46
|
-
"astro": "^5.
|
|
46
|
+
"astro": "^5.4.1",
|
|
47
47
|
"astro-expressive-code": "^0.40.1",
|
|
48
48
|
"astro-pagefind": "^1.6.0",
|
|
49
49
|
"astro-seo": "^0.8.4",
|