Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added scrollbars demo. #366

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Added scrollbars demo. #366

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
cba063a
Added scrollbar demo.
ievgennaida Jan 12, 2020
c7a501b
Added check: svgContentElement should be initialized.
ievgennaida Jan 12, 2020
5577774
x and y offsets are counted when scrollbars are displayed.
ievgennaida Jan 21, 2020
406a93a
Scrollbars sizes are updated when page is initialized.
ievgennaida Jan 21, 2020
58918a1
Real scroll bar size is used for the svg offset.
ievgennaida Jan 21, 2020
acebf5e
Implemented relative scrolling. negative x and y are respected now.
ievgennaida Jan 23, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
191 changes: 191 additions & 0 deletions demo/scrollbars.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,191 @@
<!DOCTYPE html>
<html>

<head>
<style>
#svg-container {
position: relative;
width: 600px;
height: 420px;
border:1px solid black;
margin: 50px;
}

#svg-content {
width: calc(100% - 17px);
height: calc(100% - 17px);
position: absolute;
}

#scroll-content {
position: absolute;
}

#scroll-container {
overflow: scroll;
touch-action: none;
position: absolute;
width: 100%;
height: 100%;
}
</style>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<script src="../dist/svg-pan-zoom.js"></script>
</head>

<body>
<div id="svg-container">
<div id="scroll-container">
<div id="scroll-content"></div>
</div>
<svg id="svg-content" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<linearGradient id="linear-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(56,121,217);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(138,192,7);stop-opacity:1" />
</linearGradient>
</defs>

<g transform="" fill="none">
<g x="0" y="0" stroke="#000" fill="#FFF">
<rect x="0" y="0" width="245" height="245" fill="url(#linear-gradient)" />

<path d="M 0 0 L 245 245 Z" />
</g>
</g>

</svg>
</div>

<script>

function getDistance(x1, y1) {
return Math.abs(x1 - y1);
}

// 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");

// 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;
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 (!svgContentElement) {
return;
}

let viewPortRect = svgContentElement.getBoundingClientRect();
// This data can be cached until the browser resize:
var parentPos = svgContent.getBoundingClientRect();
childPos = viewPortRect
relativePos = {};
// Get position relative to a parent:
relativePos.width =viewPortRect.width;
relativePos.height = viewPortRect.height;
relativePos.top = childPos.top - parentPos.top;
relativePos.left = childPos.left - parentPos.left;
relativePos.right = relativePos.left + relativePos.width;
relativePos.bottom = relativePos.top + relativePos.height;

let sizes = window.panZoom.getSizes();
var top = Math.min(relativePos.top, pan.y, 0);
var left = Math.min(relativePos.left, pan.x, 0);
// get top and left margins:
var h = getDistance(top, Math.max(relativePos.bottom, sizes.height));
var w = getDistance(left, Math.max(relativePos.right, sizes.width));

scrollContent.style.height = h + "px";
scrollContent.style.width = w + 'px';
scrollChangedProgramatically = true;
scrollData = {}
scrollData.panY = pan.y;
scrollData.panX = pan.x;

scrollChangedProgramatically = true;
// Raw scroll let and top are saved to avoid rounding.
scrollData.scrollLeft = Math.max(0, left * -1);
scrollBars.scrollLeft = scrollData.scrollLeft;
scrollData.scrollTop = Math.max(0, top * -1);
scrollBars.scrollTop = scrollData.scrollTop

}
// Expose to window namespace for testing purposes
window.panZoom = svgPanZoom(svgContent, {
zoomEnabled: true
, controlIconsEnabled: true
, fit: 1
, center: 1
// CTM is used while reset cause no pan event.
, onUpdatedCTM: function (e) {
if (panChangedProgramatically) {
panChangedProgramatically = false;
return;
}

rescaleScrollbars(window.panZoom.getPan());
}
});

// Initialize after panZoom load
rescaleScrollbars(window.panZoom.getPan());

scrollBars.addEventListener('scroll', function (e) {
if (scrollChangedProgramatically) {
scrollChangedProgramatically = false;
return;
}

if (recalcScrollRef) {
clearTimeout(recalcScrollRef);
recalcScrollRef = null;
}

// Update scrollbars size when scrolling is finished.
recalcScrollRef = setTimeout(function () {
if (recalcScrollRef) {
clearTimeout(recalcScrollRef);
recalcScrollRef = null;
if (window.panZoom) {
rescaleScrollbars(window.panZoom.getPan());
}
}
}, 1000);

pan = {}
pan.y = scrollData.panY + (scrollData.scrollTop - scrollBars.scrollTop);
pan.x = scrollData.panX + (scrollData.scrollLeft - scrollBars.scrollLeft);

panChangedProgramatically = true;
window.panZoom.pan(pan);
});

};
</script>

</body>

</html>