Merge pull request #112 from andymchugh/format

fix label positioning on formatted SVGs

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 ## 1.16.x
 
+SVG formatting support improvements
+-----------------------------------
+Formatting of diagrams edited in the latest draw.io (v24.7.8) caused label layout problems; especially
+if the labels were multi-word. This should now be fixed by removing multi-spaces from labels at initialization
+and further limiting the application of whitespace style 'pre'.
+
 TimeSlider label
 ----------------
 Improvements made to the timeSlider timezone application and label positioning to remove artifacts
@@ -27,7 +33,7 @@ New config terms in panelConfig:
 
 SVG formating support
 ---------------------
-Using SVGs post formatting for better readabilitycould cause label positions to shift.
+Using SVGs post formatting for better readability could cause label positions to shift.
 This is now fixed by limiting the scope of how style->whitespace is applied dynamically to labels.
 
 ## 1.16.2

src/components/SvgUpdater.tsx

@@ -68,7 +68,12 @@ export type BespokeStateHolder = {
 }
 
 function generateLabelPreamble(label: string | null, separator: LabelSeparator | null) {
-  label = (label || '').trim();
+
+  // label space stripping is needed when the svg has been formatted to allow us to change
+  // the whitespace style to 'pre'.
+  label = (label || '').replace(/\s+/g, ' ');
+  label = label.trim();
+
   if (separator === 'cr') {
     return label + '\n';
   }
@@ -106,9 +111,29 @@ function dimensionCoherence(doc: Document) {
   }
 }
 
+function innerMostDiv(el: HTMLElement) {
+  if (el.nodeName === 'div') {
+    if (el.hasChildNodes()) {
+      for (const child of el.childNodes) {
+        const childNode = child as HTMLElement;
+        if (childNode.nodeName === 'div') {
+          return false;
+        }
+      }
+    }
+    return true;
+  }
+  return false;
+}
+
 function recurseElements(el: HTMLElement, cellData: SvgCell, cellIdMaker: CellIdMaker, additions: HTMLElement[], bespokeStateHolder: BespokeStateHolder): boolean {
   const setAttributes = function(el: HTMLElement) {
-    if ((el.nodeName === 'div') || (el.nodeName === 'text')) {
+
+    // 'pre' is needed to honour the CRs we embed in the label whilst also ensuring text doesn't
+    // wrap if the label extends beyond the bounding box. It's needed on the innermost div and text
+    // elements but if applied on outer divs can result in a right-shifting of the label when the svg
+    // has been formatted.
+    if (cellData.cellProps.label && (innerMostDiv(el) || (el.nodeName === 'text'))) {
       el.style.whiteSpace = 'pre';
     }
     if (cellData.cellProps.link) {