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._onmousedown = this._onmousedown.bind(this);
this._onmousemove = this._onmousemove.bind(this); this._onmousemove = this._onmousemove.bind(this);
this._endPan = this._endPan.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 = { GrabToPan.prototype = {
/** /**
* Class name of element which can be grabbed * Class name of element which can be grabbed
*/ */
CSS_CLASS_GRAB: 'grab-to-pan-grab', 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. * 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); this.element.addEventListener('scroll', this._endPan, true);
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
this.element.classList.remove(this.CSS_CLASS_GRAB);
this.document.documentElement.classList.add(this.CSS_CLASS_GRABBING); this.document.documentElement.classList.add(this.CSS_CLASS_GRABBING);
}, },
@ -143,13 +143,16 @@ var GrabToPan = (function GrabToPanClosure() {
_onmousemove: function GrabToPan__onmousemove(event) { _onmousemove: function GrabToPan__onmousemove(event) {
this.element.removeEventListener('scroll', this._endPan, true); this.element.removeEventListener('scroll', this._endPan, true);
if (isLeftMouseReleased(event)) { if (isLeftMouseReleased(event)) {
this.document.removeEventListener('mousemove', this._onmousemove, true); this._endPan();
return; return;
} }
var xDiff = event.clientX - this.clientXStart; var xDiff = event.clientX - this.clientXStart;
var yDiff = event.clientY - this.clientYStart; var yDiff = event.clientY - this.clientYStart;
this.element.scrollTop = this.scrollTopStart - yDiff; this.element.scrollTop = this.scrollTopStart - yDiff;
this.element.scrollLeft = this.scrollLeftStart - xDiff; 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.element.removeEventListener('scroll', this._endPan, true);
this.document.removeEventListener('mousemove', this._onmousemove, true); this.document.removeEventListener('mousemove', this._onmousemove, true);
this.document.removeEventListener('mouseup', this._endPan, true); this.document.removeEventListener('mouseup', this._endPan, true);
this.document.documentElement.classList.remove(this.CSS_CLASS_GRABBING); if (this.overlay.parentNode) {
this.element.classList.add(this.CSS_CLASS_GRAB); this.overlay.parentNode.removeChild(this.overlay);
}
} }
}; };

31
web/viewer.css
View File

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