Sakurai/pdf.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update Grab to pan to fix performance issue

Browse Source 
Reported at http://stackoverflow.com/questions/21392844/pdf-js-recalculating-problme
See also e0f893753a

Changes versus grab-to-pan.js: Moved inline style to viewer.css,
lowered z-index from 2e9 to 50000 (note to future maintainers:
make sure that all other z-index values stay below 50000!).
This commit is contained in:
Rob Wu 2014-01-28 17:05:30 +01:00
parent 141669a318
commit 45c633b072
2 changed files with 28 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
web/grab_to_pan.js
View File

@ -41,16 +41,17 @@ var GrabToPan = (function GrabToPanClosure() {
this._onmousedown = this._onmousedown.bind(this);
this._onmousemove = this._onmousemove.bind(this);
this._endPan = this._endPan.bind(this);
// This overlay will be inserted in the document when the mouse moves during
// a grab operation, to ensure that the cursor has the desired appearance.
var overlay = this.overlay = document.createElement('div');
overlay.className = 'grab-to-pan-grabbing';
}
GrabToPan.prototype = {
/**
* Class name of element which can be grabbed
*/
CSS_CLASS_GRAB: 'grab-to-pan-grab',
/**
* Class name of element which is being dragged & panned
*/
CSS_CLASS_GRABBING: 'grab-to-pan-grabbing',
/**
* Bind a mousedown event to the element to enable grab-detection.
@ -133,7 +134,6 @@ var GrabToPan = (function GrabToPanClosure() {
this.element.addEventListener('scroll', this._endPan, true);
event.preventDefault();
event.stopPropagation();
this.element.classList.remove(this.CSS_CLASS_GRAB);
this.document.documentElement.classList.add(this.CSS_CLASS_GRABBING);
},
@ -143,13 +143,16 @@ var GrabToPan = (function GrabToPanClosure() {
_onmousemove: function GrabToPan__onmousemove(event) {
this.element.removeEventListener('scroll', this._endPan, true);
if (isLeftMouseReleased(event)) {
this.document.removeEventListener('mousemove', this._onmousemove, true);
this._endPan();
return;
}
var xDiff = event.clientX - this.clientXStart;
var yDiff = event.clientY - this.clientYStart;
this.element.scrollTop = this.scrollTopStart - yDiff;
this.element.scrollLeft = this.scrollLeftStart - xDiff;
if (!this.overlay.parentNode) {
document.body.appendChild(this.overlay);
}
},
/**
@ -159,8 +162,9 @@ var GrabToPan = (function GrabToPanClosure() {
this.element.removeEventListener('scroll', this._endPan, true);
this.document.removeEventListener('mousemove', this._onmousemove, true);
this.document.removeEventListener('mouseup', this._endPan, true);
this.document.documentElement.classList.remove(this.CSS_CLASS_GRABBING);
this.element.classList.add(this.CSS_CLASS_GRAB);
if (this.overlay.parentNode) {
this.overlay.parentNode.removeChild(this.overlay);
}
}
};

31
web/viewer.css
View File

@ -1577,30 +1577,31 @@ html[dir='rtl'] #documentPropertiesContainer .row > * {
color: black;
}
.grab-to-pan-grab * {
.grab-to-pan-grab {
cursor: url("images/grab.cur"), move !important;
cursor: -webkit-grab !important;
cursor: -moz-grab !important;
cursor: grab !important;
}
.grab-to-pan-grabbing,
.grab-to-pan-grabbing * {
.grab-to-pan-grab *:not(input):not(textarea):not(button):not(select):not(:link) {
cursor: inherit !important;
}
.grab-to-pan-grab:active,
.grab-to-pan-grabbing {
cursor: url("images/grabbing.cur"), move !important;
cursor: -webkit-grabbing !important;
cursor: -moz-grabbing !important;
cursor: grabbing !important;
}
.grab-to-pan-grab input,
.grab-to-pan-grab textarea,
.grab-to-pan-grab button,
.grab-to-pan-grab button *,
.grab-to-pan-grab select,
.grab-to-pan-grab option {
cursor: auto !important;
}
.grab-to-pan-grab a[href],
.grab-to-pan-grab a[href] * {
cursor: pointer !important;
position: fixed;
background: transparent;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 50000; /* should be higher than anything else in PDF.js! */
}
@page {