From cba063a3c9d5ce18b5526d79512c09e4ed5baaf0 Mon Sep 17 00:00:00 2001 From: Ievgen Naida Date: Sun, 12 Jan 2020 19:22:43 +0100 Subject: [PATCH 1/6] Added scrollbar demo. --- demo/scrollbars.html | 208 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 208 insertions(+) create mode 100644 demo/scrollbars.html diff --git a/demo/scrollbars.html b/demo/scrollbars.html new file mode 100644 index 0000000..f866804 --- /dev/null +++ b/demo/scrollbars.html @@ -0,0 +1,208 @@ + + + + + + + + + + +
+
+
+
+ + + + + + + + + + + + + + +
+ + + + + + \ No newline at end of file From c7a501b52c5cd8145497df4092238b66acce8778 Mon Sep 17 00:00:00 2001 From: Ievgen Naida Date: Sun, 12 Jan 2020 20:58:29 +0100 Subject: [PATCH 2/6] Added check: svgContentElement should be initialized. --- demo/scrollbars.html | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/demo/scrollbars.html b/demo/scrollbars.html index f866804..5428430 100644 --- a/demo/scrollbars.html +++ b/demo/scrollbars.html @@ -74,21 +74,30 @@ window.onload = function () { var scrollContent = document.getElementById("scroll-content"); var scrollBars = document.getElementById("scroll-container") - var viewPortData = null; + var svgContentElement = null; var scrollData = null; var panChangedProgramatically = false; var scrollChangedProgramatically = false; var recalcScrollRef = null; + var rescaleScrollbars = function (pan) { if (!window.panZoom) { return; } + + // Viewport data can be fetched only after the initialization. + if (!svgContentElement) { + var content = document.getElementsByClassName('svg-pan-zoom_viewport'); + if (content) { + svgContentElement = content[0]; + } + } - if (!viewPortData) { - viewPortData = document.getElementsByClassName('svg-pan-zoom_viewport')[0]; + if (!svgContentElement) { + return; } - - let viewPortRect = viewPortData.getBoundingClientRect(); + + let viewPortRect = svgContentElement.getBoundingClientRect(); let sizes = window.panZoom.getSizes(); scrollData = { From 557777443e509385f14ac9cdfa0998c7bea19aaa Mon Sep 17 00:00:00 2001 From: Ievgen Naida Date: Tue, 21 Jan 2020 23:54:27 +0100 Subject: [PATCH 3/6] x and y offsets are counted when scrollbars are displayed. --- demo/scrollbars.html | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/demo/scrollbars.html b/demo/scrollbars.html index 5428430..52692a5 100644 --- a/demo/scrollbars.html +++ b/demo/scrollbars.html @@ -98,17 +98,18 @@ } let viewPortRect = svgContentElement.getBoundingClientRect(); - let sizes = window.panZoom.getSizes(); + // get top and left margins: + let margin = { x: sizes.viewBox.x * sizes.realZoom, y: sizes.viewBox.y * sizes.realZoom }; scrollData = { - height: viewPortRect.height, - width: viewPortRect.width, - containerWidth: sizes.width, + height: viewPortRect.height + margin.y, + width: viewPortRect.width + margin.x, containerHeight: sizes.height, + containerWidth: sizes.width, left: Math.min(pan.x, 0), - right: Math.max(pan.x + viewPortRect.width, sizes.width), + right: Math.max(pan.x + viewPortRect.width + margin.x, sizes.width), top: Math.min(pan.y, 0), - bottom: Math.max(pan.y + viewPortRect.height, sizes.height) + bottom: Math.max(pan.y + viewPortRect.height + margin.y, sizes.height) }; scrollData.boundsLeft = Math.min( From 406a93a162ea90423587f28bb479afb8bfecc98a Mon Sep 17 00:00:00 2001 From: Ievgen Naida Date: Tue, 21 Jan 2020 23:55:46 +0100 Subject: [PATCH 4/6] Scrollbars sizes are updated when page is initialized. --- demo/scrollbars.html | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/demo/scrollbars.html b/demo/scrollbars.html index 52692a5..1113b76 100644 --- a/demo/scrollbars.html +++ b/demo/scrollbars.html @@ -167,7 +167,9 @@ } }); - //scrollingTimeRef = null; + // Initialize after panZoom load + rescaleScrollbars(window.panZoom.getPan()); + scrollBars.addEventListener('scroll', function (e) { if (scrollChangedProgramatically) { scrollChangedProgramatically = false; From 58918a1f305e4e4349675b7a9a3189acb530fc19 Mon Sep 17 00:00:00 2001 From: Ievgen Naida Date: Wed, 22 Jan 2020 00:34:13 +0100 Subject: [PATCH 5/6] Real scroll bar size is used for the svg offset. --- demo/scrollbars.html | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/demo/scrollbars.html b/demo/scrollbars.html index 1113b76..7159b94 100644 --- a/demo/scrollbars.html +++ b/demo/scrollbars.html @@ -73,7 +73,15 @@ // Don't use window.onLoad like this in production, because it can only listen to one function. window.onload = function () { var scrollContent = document.getElementById("scroll-content"); - var scrollBars = document.getElementById("scroll-container") + var scrollBars = document.getElementById("scroll-container"); + + // add the real scrollbar offset size + var svgContent = document.getElementById("svg-content"); + var scrollBarWidth = scrollBars.offsetWidth - scrollBars.clientWidth; + var sizeWithoutScrollbar = "calc(100% - " + scrollBarWidth + "px)"; + svgContent.style.width = sizeWithoutScrollbar; + svgContent.style.height = sizeWithoutScrollbar; + var svgContentElement = null; var scrollData = null; var panChangedProgramatically = false; @@ -151,7 +159,7 @@ scrollBars.scrollTop = convertCoords(0, scrollData.distanceV, pan.y * -1, 0, scrollData.distanceV); } // Expose to window namespace for testing purposes - window.panZoom = svgPanZoom('#svg-content', { + window.panZoom = svgPanZoom(svgContent, { zoomEnabled: true , controlIconsEnabled: true , fit: 1 From acebf5e39c07a97e36ef1d3b66613d5cb7ffbed9 Mon Sep 17 00:00:00 2001 From: Ievgen Naida Date: Fri, 24 Jan 2020 00:17:44 +0100 Subject: [PATCH 6/6] Implemented relative scrolling. negative x and y are respected now. --- demo/scrollbars.html | 127 +++++++++++++++---------------------------- 1 file changed, 45 insertions(+), 82 deletions(-) diff --git a/demo/scrollbars.html b/demo/scrollbars.html index 7159b94..ef7a50f 100644 --- a/demo/scrollbars.html +++ b/demo/scrollbars.html @@ -5,14 +5,16 @@