feat(graphing): Make link and link info text colors customizable

ogre-works · Mar 11, 2022 · 2057001 · 2057001
1 parent 8877020
commit 2057001
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 19 deletions.
diff --git a/...ndency-injection-container/__snapshots__/createContainer.dependency-graphing.test.js.snap b/...ndency-injection-container/__snapshots__/createContainer.dependency-graphing.test.js.snap
@@ -12,17 +12,17 @@ class \\"some-customizable-async-injectable\\" as someCustomizableAsyncInjectabl
 class \\"some-async-child-injectable\\" as someAsyncChildInjectable<Singleton\\\\nAsync> << (S,lightGreen) >> $some-async-child-injectable $some-parent-injectable #line:darkRed
 class \\"some-parent-injectable\\" as someParentInjectable<Singleton\\\\nAsync> << (S,lightGreen) >> $some-parent-injectable #line:darkRed
 class \\"some-keyed-injectable\\" as someKeyedInjectable<Keyed> << (K,pink) >> $some-keyed-injectable $some-parent-injectable #line:darkRed
-someInjectionToken --[#black,dashed,thickness=1]up* someTokenInjectable : Setup
-someInjectionToken --[#black,dashed,thickness=1]up* someCustomizableSyncInjectable : Setup\\\\nsome-custom-link-info
-someSyncChildInjectable --[#black,dashed,thickness=1]up* someInjectionToken : Setup
-someSetuppable --[#black,dashed,thickness=1]up* someSyncChildInjectable : Setup
-someSetuppable --[#black,dashed,thickness=1]up* someSetuppable : Setup
-someInjectionToken --[#black,plain,thickness=1]up* someTokenInjectable
-someInjectionToken --[#black,plain,thickness=1]up* someCustomizableSyncInjectable : some-custom-link-info
-someSyncChildInjectable --[#black,plain,thickness=1]up* someInjectionToken
-someParentInjectable --[#black,plain,thickness=1]up* someSyncChildInjectable
-someAsyncChildInjectable --[#black,plain,thickness=4]up* someCustomizableAsyncInjectable : Async\\\\nsome-custom-link-info
-someParentInjectable --[#black,plain,thickness=4]up* someAsyncChildInjectable : Async
-someParentInjectable --[#black,plain,thickness=1]up* someKeyedInjectable
+someInjectionToken --[#black,dashed,thickness=1]up* someTokenInjectable #text:black  : Setup 
+someInjectionToken --[#orange,dashed,thickness=1]up* someCustomizableSyncInjectable #text:orange  : Setup\\\\nsome-custom-link-info 
+someSyncChildInjectable --[#black,dashed,thickness=1]up* someInjectionToken #text:black  : Setup 
+someSetuppable --[#black,dashed,thickness=1]up* someSyncChildInjectable #text:black  : Setup 
+someSetuppable --[#black,dashed,thickness=1]up* someSetuppable #text:black  : Setup 
+someInjectionToken --[#black,plain,thickness=1]up* someTokenInjectable #text:black  
+someInjectionToken --[#orange,plain,thickness=1]up* someCustomizableSyncInjectable #text:orange  : some-custom-link-info 
+someSyncChildInjectable --[#black,plain,thickness=1]up* someInjectionToken #text:black  
+someParentInjectable --[#black,plain,thickness=1]up* someSyncChildInjectable #text:black  
+someAsyncChildInjectable --[#orange,plain,thickness=4]up* someCustomizableAsyncInjectable #text:orange  : Async\\\\nsome-custom-link-info 
+someParentInjectable --[#black,plain,thickness=4]up* someAsyncChildInjectable #text:black  : Async 
+someParentInjectable --[#black,plain,thickness=1]up* someKeyedInjectable #text:black  
 @enduml"
 `;
diff --git a/...injectable/src/dependency-injection-container/createContainer.dependency-graphing.test.js b/...injectable/src/dependency-injection-container/createContainer.dependency-graphing.test.js
@@ -72,8 +72,15 @@ describe('createContainer.dependency-graph', () => {
 
       instantiate: () => ({
         shouldCustomize: isEqual('some-customizable-instance'),
-        customizeLink: link => link.infos.add('some-custom-link-info'),
-        customizeNode: node => node.infos.add('some-custom-node-info'),
+
+        customizeLink: link => {
+          link.infos.add('some-custom-link-info');
+          link.color = 'orange';
+        },
+
+        customizeNode: node => {
+          node.infos.add('some-custom-node-info');
+        },
       }),
 
       decorable: false,

diff --git a/.../src/dependency-injection-container/extensions/dependency-graphing/dependency-graphing.js b/.../src/dependency-injection-container/extensions/dependency-graphing/dependency-graphing.js
@@ -180,16 +180,14 @@ const toPlantUmlLink = ({
   isRelatedToSetup,
   isAsync,
   infos,
+  color = 'black',
 }) => {
-  const lineColor = 'black';
   const lineType = isRelatedToSetup ? 'dashed' : 'plain';
   const lineThickness = isAsync ? 4 : 1;
-
-  const lineStyle = `[#${lineColor},${lineType},thickness=${lineThickness}]`;
-
+  const lineStyle = `[#${color},${lineType},thickness=${lineThickness}]`;
   const infosString = infos.size ? ` : ${[...infos.values()].join('\\n')}` : '';
 
-  return `${parentId} --${lineStyle}up* ${dependencyId}${infosString}`;
+  return `${parentId} --${lineStyle}up* ${dependencyId} #text:${color} ${infosString} `;
 };
 
 const tokenLifecycle = {