edwin/Lieux-wow
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix background size on high resolution displays

Browse Source
This commit is contained in:
obergodmar
2020-07-14 21:11:52 +03:00
parent a360894f95
commit 1e1d274b49
1 changed files with 16 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/view-component/view-component.tsx
+16 -8
View File
@@ -27,18 +27,20 @@ export const ViewComponent = ({src}: Props) => {
const [trackPosition, setTrackPosition] = useState(initialPosition) const [trackPosition, setTrackPosition] = useState(initialPosition)
const [position, setPosition] = useState(initialPosition) const [position, setPosition] = useState(initialPosition)
const [lastPosition, setLastPosition] = useState(initialPosition) const [lastPosition, setLastPosition] = useState(initialPosition)
const [isBigScreen, setBigScreen] = useState(false)
const handleResize = useCallback(() => { const handleResize = useCallback(() => {
const {innerWidth, innerHeight} = window const {innerWidth, innerHeight} = window
let width = (innerWidth - DEFAULT_WIDTH) / 2 let width = 0
let height = (innerHeight - DEFAULT_HEIGHT) / 2 let height = 0
setBigScreen(false)
if (innerWidth >= DEFAULT_WIDTH) { if (innerHeight < DEFAULT_HEIGHT && innerWidth < DEFAULT_WIDTH) {
width = 0 width = (innerWidth - DEFAULT_WIDTH) / 2
} height = (innerHeight - DEFAULT_HEIGHT) / 2
if (innerHeight >= DEFAULT_HEIGHT) { } else {
height = 0 setBigScreen(true)
} }
setPosition({x: width, y: height}) setPosition({x: width, y: height})
setLastPosition({x: width, y: height}) setLastPosition({x: width, y: height})
@@ -69,6 +71,9 @@ export const ViewComponent = ({src}: Props) => {
const handleTouchMove = (e: TouchEvent) => { const handleTouchMove = (e: TouchEvent) => {
const {touches} = e const {touches} = e
if (isBigScreen) {
return
}
const {innerWidth, innerHeight} = window const {innerWidth, innerHeight} = window
const width = DEFAULT_WIDTH - innerWidth const width = DEFAULT_WIDTH - innerWidth
const height = DEFAULT_HEIGHT - innerHeight const height = DEFAULT_HEIGHT - innerHeight
@@ -125,6 +130,9 @@ export const ViewComponent = ({src}: Props) => {
if (!isDrag) { if (!isDrag) {
return return
} }
if (isBigScreen) {
return
}
const {innerWidth, innerHeight} = window const {innerWidth, innerHeight} = window
const width = DEFAULT_WIDTH - innerWidth const width = DEFAULT_WIDTH - innerWidth
const height = DEFAULT_HEIGHT - innerHeight const height = DEFAULT_HEIGHT - innerHeight
@@ -140,7 +148,7 @@ export const ViewComponent = ({src}: Props) => {
style={{ style={{
backgroundImage: `url(${imageSrc})`, backgroundImage: `url(${imageSrc})`,
backgroundPosition: `${position.x}px ${position.y}px`, backgroundPosition: `${position.x}px ${position.y}px`,
backgroundSize: 'cover' backgroundSize: `${isBigScreen ? 'cover' : 'auto'}`
}} }}
onMouseDown={handleMouseDown} onMouseDown={handleMouseDown}
onMouseMove={handleMouseMove} onMouseMove={handleMouseMove}