Merge pull request #255 from tolzhabayev/master

This turns the whole background shape the same color as indicator for FlowChart diagram nodes
jdbranham · Mar 5, 2024 · ad7ed4b · ad7ed4b
2 parents 7901ab3 + 31aa289
commit ad7ed4b
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 2 deletions.
diff --git a/src/config/diagramDefaults.ts b/src/config/diagramDefaults.ts
@@ -7,6 +7,7 @@ export const defaultFlowChartConfig: FlowchartDiagramConfig & { useMaxWidth: boo
   curve: 'linear',
   htmlLabels: true,
   useMaxWidth: true,
+  padding: 40
 };
 
 export const defaultMermaidOptions: MermaidConfig = {

diff --git a/src/diagramStyleFormatter.ts b/src/diagramStyleFormatter.ts
@@ -2,6 +2,8 @@ function diagramStyleFormatter(customStyle: string, diagramId: string) {
   return `
 	#${diagramId} .badge, #${diagramId} .label {
 		text-shadow: none;
+		line-height: unset;
+		font-size: 0.75rem;
 	}
 
 	#${diagramId} foreignObject {

diff --git a/src/visualizers/updateDiagramStyle.ts b/src/visualizers/updateDiagramStyle.ts
@@ -12,7 +12,7 @@ type MetricIndicator = DisplayValue & {
 };
 
 const selectElementById = (container: HTMLElement, id: string): Selection<any, any, any, any> => {
-  return select(container.querySelector('#' + id));
+  return select(container.querySelector(`[data-id="${id}"]`));
 };
 
 const selectElementByEdgeLabel = (container: HTMLElement, id: string): Selection<any, any, any, any> => {
@@ -55,6 +55,16 @@ const selectTextElementContainingAlias = (container: HTMLElement, alias: string)
     });
 };
 
+const fetchParentsUntilShapeElementFound = (element: HTMLElement, selector: string): HTMLElement | null => {  
+  if (element.matches(selector)) {
+    return element;
+  }
+  if (element.parentElement) {
+    return fetchParentsUntilShapeElementFound(element.parentElement, selector);
+  }
+  return null;
+}
+
 const resizeGrouping = (element: Selection<any, any, any, any> | null | undefined, nodeSize: NodeSizeOptions) => {
   if (!element) {
     return;
@@ -113,7 +123,7 @@ const styleFlowChartEdgeLabel = (
   indicator: MetricIndicator,
   useBackground: boolean,
   nodeSize: NodeSizeOptions
-) => {
+) => {  
   const edgeParent = select(targetElement.node().parentNode);
   edgeParent.append('br');
   const v = edgeParent.append('span');
@@ -123,6 +133,8 @@ const styleFlowChartEdgeLabel = (
   if (indicator.color) {
     if (useBackground) {
       v.style('background-color', indicator.color);
+      const parentShapeElement = fetchParentsUntilShapeElementFound(targetElement.node(), '.node.flowchart-label');
+      parentShapeElement?.firstElementChild?.setAttribute('style', `fill: ${indicator.color}`);
     } else {
       v.style('color', indicator.color);
     }
@@ -292,6 +304,10 @@ export const updateDiagramStyle = (
     select(svg).style('max-width', '100%').style('max-height', '100%');
   }
 
+  if (svg.parentElement && !options.maxWidth) {
+    svg.parentElement.setAttribute('style', 'overflow-y: scroll');
+  }
+
   indicators.forEach((indicator) => {
     processDiagramSeriesModel(svg, indicator, options);
   });