diff --git a/CHANGELOG.md b/CHANGELOG.md index ef01543..6ef7a43 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/src/components/SvgUpdater.tsx b/src/components/SvgUpdater.tsx index 6d4b9fa..64ab3dc 100644 --- a/src/components/SvgUpdater.tsx +++ b/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) {