archive-gh-me/react-viewer
1
0
Fork 0
mirror of https://github.com/infeng/react-viewer.git synced 2025-12-08 17:36:40 +00:00
Code Issues Projects Releases Wiki Activity

fix: can not full screen in long page

Browse Source
This commit is contained in:
infeng 2018-02-27 16:18:07 +08:00
parent 4df7e757ae
commit b329569db0
6 changed files with 26 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/index.css
View File

File diff suppressed because one or more lines are too long

2
docs/index.html
View File

@ -1 +1 @@
<!DOCTYPE html> <html> <head> <title>react-viewer</title> <meta charset="utf-8"> <link href="/react-viewer/index.css?3b29d0cb77d19d0040ac" rel="stylesheet"></head> <body> <div id="root"></div> <script type="text/javascript" src="/react-viewer/index.js?3b29d0cb77d19d0040ac"></script></body> </html>
<!DOCTYPE html> <html> <head> <title>react-viewer</title> <meta charset="utf-8"> <link href="/react-viewer/index.css?bb6b73353d0710d0b052" rel="stylesheet"></head> <body> <div id="root"></div> <script type="text/javascript" src="/react-viewer/index.js?bb6b73353d0710d0b052"></script></body> </html>

4
docs/index.js
View File

File diff suppressed because one or more lines are too long

18
src/ViewerCanvas.tsx
View File

@ -68,18 +68,18 @@ export default class ViewerCanvas extends React.Component<ViewerCanvasProps, Vie
e.stopPropagation();
this.setState({
isMouseDown: true,
mouseX: e.nativeEvent.pageX,
mouseY: e.nativeEvent.pageY,
mouseX: e.nativeEvent.screenX,
mouseY: e.nativeEvent.screenY,
});
}
handleMouseMove(e) {
if (this.state.isMouseDown) {
let diffX = e.x - this.state.mouseX;
let diffY = e.y - this.state.mouseY;
let diffX = e.screenX - this.state.mouseX;
let diffY = e.screenY - this.state.mouseY;
this.setState({
mouseX: e.x,
mouseY: e.y,
mouseX: e.screenX,
mouseY: e.screenY,
});
this.props.onChangeImgState(this.props.width, this.props.height, this.props.top + diffY, this.props.left + diffX);
}
@ -99,9 +99,9 @@ export default class ViewerCanvas extends React.Component<ViewerCanvasProps, Vie
direct = e.detail > 0 ? -1 : 1;
}
if (direct !== 0) {
let pageX = e.pageX;
let pageY = e.pageY;
this.props.onZoom(pageX, pageY, direct, .05);
let x = e.screenX;
let y = e.screenY;
this.props.onZoom(x, y, direct, .05);
}
}

6
src/ViewerCore.tsx
View File

@ -430,8 +430,6 @@ export default class ViewerCore extends React.Component<ViewerProps, ViewerCoreS
return;
}
if (this.props.visible && !nextProps.visible) {
document.body.style.overflow = '';
document.body.style.paddingRight = '';
this.bindEvent(true);
this.handleZoom(
this.containerWidth / 2,
@ -440,6 +438,8 @@ export default class ViewerCore extends React.Component<ViewerProps, ViewerCoreS
(this.state.scaleX > 0 ? 1 : -1) * this.state.scaleX - 0.11,
);
setTimeout(() => {
document.body.style.overflow = '';
document.body.style.paddingRight = '';
this.setState({
visible: false,
transitionEnd: false,
@ -490,7 +490,7 @@ export default class ViewerCore extends React.Component<ViewerProps, ViewerCoreS
let className = `${this.prefixCls} ${this.prefixCls}-transition`;
if (this.props.container) {
className += ` inline`;
className += ` ${this.prefixCls}-inline`;
}
return (

16
src/style/index.less
View File

@ -13,7 +13,7 @@
.@{viewer-prefix-cls} {
&.inline {
&-inline {
position: relative;
width: 100%;
height: 100%;
@ -38,7 +38,7 @@
}
&-mask {
position: absolute;
position: fixed;
top: 0;
right: 0;
left: 0;
@ -59,7 +59,7 @@
}
&-close {
position: absolute;
position: fixed;
top: 0px;
right: 0px;
overflow: hidden;
@ -72,12 +72,12 @@
&-close > i {
position: relative;
top: 8px;
top: 4px;
left: 18px;
}
&-canvas {
position: absolute;
position: fixed;
top: 0;
right: 0;
left: 0;
@ -96,7 +96,7 @@
}
&-footer {
position: absolute;
position: fixed;
right: 0;
bottom: 0;
left: 0;
@ -105,6 +105,10 @@
z-index: @zIndex + 5;
}
&-inline > &-mask, &-inline > &-close, &-inline > &-canvas, &-inline > &-footer {
position: absolute;
}
&-attribute {
margin: 0;
margin-bottom: 6px;