From d700998f11dafe2bf829a40b65490c1e71b6e516 Mon Sep 17 00:00:00 2001
From: nickmcdowall <nicholas.mcdowall@gmail.com>
Date: Wed, 23 Mar 2022 17:35:36 +0000
Subject: [PATCH] fix: Hide svg elements when fully zoomed out

#60 Some spacing was left over due to the <pre> tag which was preserving the empty space event even when an element was hidden.
Also adding display:block styling to the svg elements to prevent multiple diagrams on the same line when they are being shrunk
---
 src/main/resources/static/custom.js                  |  2 +-
 src/main/resources/templates/html-report.hbs         |  2 +-
 ...createsReportWithScenariosAndEvents.approved.html | 12 ++++++------
 ...tTest.diagramIsSplitOnNewPageEvents.approved.html |  4 ++--
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/main/resources/static/custom.js b/src/main/resources/static/custom.js
index b39262a..fad313d 100644
--- a/src/main/resources/static/custom.js
+++ b/src/main/resources/static/custom.js
@@ -33,7 +33,7 @@ function adjustSvgZoom(originalWidth, originalHeight, svg) {
             let newHeight = originalHeight / sliderValue;
             let newViewBox = '0 0 ' + newWidth + ' ' + newHeight;
             svg.attr("viewBox", newViewBox)
-            svg.attr("style", "") // remove inline styling which overrides height and width
+            svg.attr("style", "display:block;") // also removes inline styling of height and width
             svg.attr("width", originalWidth * sliderValue)
             svg.attr("height", originalHeight * sliderValue)
         }
diff --git a/src/main/resources/templates/html-report.hbs b/src/main/resources/templates/html-report.hbs
index 3a1d831..eb075e2 100644
--- a/src/main/resources/templates/html-report.hbs
+++ b/src/main/resources/templates/html-report.hbs
@@ -46,7 +46,7 @@
         {{#if sequenceDiagram}}
         <section class="sequence diagram svg {{ status }}">
             <h3 class="{{ status }}">Sequence Diagram</h3>
-            <pre>{{{ sequenceDiagram.svg  }}}</pre>
+            <figure>{{{ sequenceDiagram.svg  }}}</figure>
             <div onclick="location.href='#!';" id="{{sequenceDiagram.id}}" class="overlay">
                 <div class="popup" onclick="event.stopPropagation();">
                     <h2>PlantUml markup</h2>
diff --git a/src/test/java/com/lsd/report/approval/LsdContextTest.createsReportWithScenariosAndEvents.approved.html b/src/test/java/com/lsd/report/approval/LsdContextTest.createsReportWithScenariosAndEvents.approved.html
index d10fee4..8ede561 100644
--- a/src/test/java/com/lsd/report/approval/LsdContextTest.createsReportWithScenariosAndEvents.approved.html
+++ b/src/test/java/com/lsd/report/approval/LsdContextTest.createsReportWithScenariosAndEvents.approved.html
@@ -34,7 +34,7 @@ <h3 class="success">Description</h3>
         
         <section class="sequence diagram svg success">
             <h3 class="success">Sequence Diagram</h3>
-            <pre><?xml version="1.0" encoding="UTF-8"?>
+            <figure><?xml version="1.0" encoding="UTF-8"?>
 
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentScriptType="application/ecmascript" contentStyleType="text/css" height="350px" preserveAspectRatio="none" style="width:595px;height:350px;background:#00000000;" version="1.1" viewBox="0 0 595 350" width="595px" zoomAndPan="magnify">
   <defs/>
@@ -95,7 +95,7 @@ <h3 class="success">Sequence Diagram</h3>
     </a>
   </g>
 </svg>
-</pre>
+</figure>
             <div onclick="location.href='#!';" id="11" class="overlay">
                 <div class="popup" onclick="event.stopPropagation();">
                     <h2>PlantUml markup</h2>
@@ -304,7 +304,7 @@ <h3>Key Facts</h3>
         
         <section class="sequence diagram svg warn">
             <h3 class="warn">Sequence Diagram</h3>
-            <pre><?xml version="1.0" encoding="UTF-8"?>
+            <figure><?xml version="1.0" encoding="UTF-8"?>
 
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentScriptType="application/ecmascript" contentStyleType="text/css" height="301px" preserveAspectRatio="none" style="width:297px;height:301px;background:#00000000;" version="1.1" viewBox="0 0 297 301" width="297px" zoomAndPan="magnify">
   <defs/>
@@ -349,7 +349,7 @@ <h3 class="warn">Sequence Diagram</h3>
     <image height="19" width="19" x="69" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAIAAAD9MqGbAAAA6klEQVR4Xp2SQQqCYBSElYR24sKV0AE8h+DaQwRewm3rFkIgrl20EjyAHaBb5NJ1pBS+nv+f9TdqgcOsZuZTlKfRUmkY3O+YSDUNBArpeWQYpGlkmhSGn3y77RPO12vyfXo8ZCzI240sq+9U2zZdr+Q4mLMFLMggwE56tcJEmt/8Isfdb/MTu24Rya7rpWTbCnKzweK3XXf4zstl9mdMuqoGknU+Yz3n00kSyiWUJek67sDH43v+fX1FgVPVea5uR3ebZQhIHw4wHJGsNEUsSXAzTbL2+w8WRdgKzZCs3a7H4hjzQfPkPy0nn8DR2HKC9FpXAAAAAElFTkSuQmCC" y="166.2293"/>
   </g>
 </svg>
-</pre>
+</figure>
             <div onclick="location.href='#!';" id="14" class="overlay">
                 <div class="popup" onclick="event.stopPropagation();">
                     <h2>PlantUml markup</h2>
@@ -503,7 +503,7 @@ <h3>Key Facts</h3>
         
         <section class="sequence diagram svg error">
             <h3 class="error">Sequence Diagram</h3>
-            <pre><?xml version="1.0" encoding="UTF-8"?>
+            <figure><?xml version="1.0" encoding="UTF-8"?>
 
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentScriptType="application/ecmascript" contentStyleType="text/css" height="152px" preserveAspectRatio="none" style="width:268px;height:152px;background:#00000000;" version="1.1" viewBox="0 0 268 152" width="268px" zoomAndPan="magnify">
   <defs/>
@@ -531,7 +531,7 @@ <h3 class="error">Sequence Diagram</h3>
     </a>
   </g>
 </svg>
-</pre>
+</figure>
             <div onclick="location.href='#!';" id="17" class="overlay">
                 <div class="popup" onclick="event.stopPropagation();">
                     <h2>PlantUml markup</h2>
diff --git a/src/test/java/com/lsd/report/approval/LsdContextTest.diagramIsSplitOnNewPageEvents.approved.html b/src/test/java/com/lsd/report/approval/LsdContextTest.diagramIsSplitOnNewPageEvents.approved.html
index 9063b0b..8f61075 100644
--- a/src/test/java/com/lsd/report/approval/LsdContextTest.diagramIsSplitOnNewPageEvents.approved.html
+++ b/src/test/java/com/lsd/report/approval/LsdContextTest.diagramIsSplitOnNewPageEvents.approved.html
@@ -30,7 +30,7 @@ <h3 class="success">Description</h3>
         
         <section class="sequence diagram svg success">
             <h3 class="success">Sequence Diagram</h3>
-            <pre><?xml version="1.0" encoding="UTF-8"?>
+            <figure><?xml version="1.0" encoding="UTF-8"?>
 
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentScriptType="application/ecmascript" contentStyleType="text/css" height="262px" preserveAspectRatio="none" style="width:109px;height:262px;background:#00000000;" version="1.1" viewBox="0 0 109 262" width="109px" zoomAndPan="magnify">
   <defs/>
@@ -99,7 +99,7 @@ <h3 class="success">Sequence Diagram</h3>
     </a>
   </g>
 </svg>
-</pre>
+</figure>
             <div onclick="location.href='#!';" id="5" class="overlay">
                 <div class="popup" onclick="event.stopPropagation();">
                     <h2>PlantUml markup</h2>