🚸 Add animated particles to highlighted relationship edges

[junkisai]

Summary

Drawing multiple strokes with stroke-dasharray specified causes performance degradation, especially in Safari browser.

Therefore, I stopped using stroke-dasharray.
Additionally, since stroke-dasharray is also used when 'animated' is set to true in Edge, I made sure that 'animated' is always set to false.

Furthermore, since setting 'animated' to false made it difficult to visually distinguish the flow of Edges, I used animateMotion instead to express Edge animations.

Before	After
2024-12-24.17.42.36.mov	2024-12-24.17.41.49.mov

[sasamuku]

LGTM!!
looks more like a universe image 🪐
(I also love stroke-dasharray, so look forward to View control )

[hoshinotsuyoshi]

Sorry for the late comment! This diff will pass the test suite. We might be able to remove this code. I'd like to tackle this the next time we edit!

diff

diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/highlightNodesAndEdges.test.ts b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/highlightNodesAndEdges.test.ts
index 17673cd2..132c2062 100644
--- a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/highlightNodesAndEdges.test.ts
+++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/highlightNodesAndEdges.test.ts
@@ -36,7 +36,6 @@ const anEdge = (
   sourceHandle,
   target,
   targetHandle,
-  animated: false,
   zIndex: zIndex.edgeDefault,
   data: { isHighlighted: false, ...override?.data },
   ...override,
@@ -181,12 +180,10 @@ describe(highlightNodesAndEdges, () => {
 
       expect(updatedEdges).toEqual([
         anEdge('users', 'posts', 'users-id', 'posts-user_id', {
-          animated: false,
           zIndex: zIndex.edgeHighlighted,
           data: { isHighlighted: true },
         }),
         anEdge('users', 'comment_users', 'users-id', 'comment_users-user_id', {
-          animated: false,
           zIndex: zIndex.edgeHighlighted,
           data: { isHighlighted: true },
         }),
@@ -228,12 +225,10 @@ describe(highlightNodesAndEdges, () => {
 
       expect(updatedEdges).toEqual([
         anEdge('users', 'posts', 'users-id', 'posts-user_id', {
-          animated: false,
           zIndex: zIndex.edgeHighlighted,
           data: { isHighlighted: true },
         }),
         anEdge('users', 'comment_users', 'users-id', 'comment_users-user_id', {
-          animated: false,
           zIndex: zIndex.edgeHighlighted,
           data: { isHighlighted: true },
         }),
@@ -253,12 +248,10 @@ describe(highlightNodesAndEdges, () => {
 
       expect(updatedEdges).toEqual([
         anEdge('users', 'posts', 'users-id', 'posts-user_id', {
-          animated: false,
           zIndex: zIndex.edgeHighlighted,
           data: { isHighlighted: true },
         }),
         anEdge('users', 'comment_users', 'users-id', 'comment_users-user_id', {
-          animated: false,
           zIndex: zIndex.edgeHighlighted,
           data: { isHighlighted: true },
         }),
@@ -268,7 +261,6 @@ describe(highlightNodesAndEdges, () => {
           'comments-id',
           'comment_users-comment_id',
           {
-            animated: false,
             zIndex: zIndex.edgeHighlighted,
             data: { isHighlighted: true },
           },
diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/highlightNodesAndEdges.ts b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/highlightNodesAndEdges.ts
index 30fa9a88..33e1ecd4 100644
--- a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/highlightNodesAndEdges.ts
+++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/highlightNodesAndEdges.ts
@@ -66,14 +66,12 @@ const unhighlightNode = (node: TableNodeType): TableNodeType => ({
 
 const highlightEdge = (edge: Edge): Edge => ({
   ...edge,
-  animated: false,
   zIndex: zIndex.edgeHighlighted,
   data: { ...edge.data, isHighlighted: true },
 })
 
 const unhighlightEdge = (edge: Edge): Edge => ({
   ...edge,
-  animated: false,
   zIndex: zIndex.edgeDefault,
   data: { ...edge.data, isHighlighted: false },
 })

[hoshinotsuyoshi]

awesome work!!