From f8c59e617139e88c8567034748f7adf86d9178fd Mon Sep 17 00:00:00 2001
From: Stephen Abello <stephen.abello@combodo.com>
Date: Mon, 25 Oct 2021 15:34:52 +0200
Subject: [PATCH] =?UTF-8?q?N=C2=B03911=20Allow=20datamodel=20viewer=20grap?=
 =?UTF-8?q?h=20to=20be=20horizontally=20scrolled=20when=20overflowing=20ou?=
 =?UTF-8?q?t=20of=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/schema.php | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/pages/schema.php b/pages/schema.php
index 306352ca9..c799b43ee 100644
--- a/pages/schema.php
+++ b/pages/schema.php
@@ -811,7 +811,27 @@ field.filter(function(d) {
 	.attr("height", 36)
     .attr("xlink:href", function(d, i) { return d.icon })
 	.attr("transform", "translate(-12, -24)");
-			
+
+// When the schema is visible for the first time, initialize SVG viewbox based on content height/width
+
+let oSvgElement = document.getElementsByClassName("dataModelSchema")[0];
+if(window.IntersectionObserver) {
+    const oDatamodelSchemaIntersectObs = new IntersectionObserver(function(aEntries, oDatamodelSchemaIntersectObs){
+        aEntries.forEach(oEntry => {
+            let bIsVisible = oEntry.isIntersecting;
+            if(bIsVisible) {
+				let oSvgBB = oSvgElement.getBBox();
+				let aSvgViewbox = [oSvgBB.x, oSvgBB.y , oSvgBB.width, oSvgBB.height];
+				oSvgElement.setAttribute("viewBox", aSvgViewbox.join(" "));
+				oDatamodelSchemaIntersectObs.unobserve(oSvgElement);
+            }
+        });
+    }, {
+        root: $('#dataModelGraph')[0],
+        threshold: [1] // Must be completely visible
+    });
+    oDatamodelSchemaIntersectObs.observe(oSvgElement);
+}
 JS
 		);
 	}