Skip to content

Commit

Permalink
WIP
Browse files Browse the repository at this point in the history
  • Loading branch information
@frozar
frozar committed Oct 12, 2021
1 parent 6d00418 commit c49a4c5
Show file tree
Hide file tree
Showing 3 changed files with 135 additions and 81 deletions.
13 changes: 7 additions & 6 deletions pages/v.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -362,18 +362,19 @@ function ViewDetail() {

const [displayResetButton, setDisplayResetButton] = useState(false);

const [{ x, y, zoom, scale }, set] = useSpring(() => ({
const [{ x, y, zoom, scale }, springApi] = useSpring(() => ({
x: 0,
y: 0,
zoom: 0,
scale: 1,
config: { mass: 5, tension: 1350, friction: 150 },
// config: { mass: 5, tension: 1350, friction: 150 },
config: { mass: 5, tension: 900, friction: 100 },
}));

const resetPanAndZoom = useCallback(() => {
set.start({ x: 0, y: 0, zoom: 0, scale: 1 });
springApi.start({ x: 0, y: 0, zoom: 0, scale: 1 });
setDisplayResetButton(false);
}, [set]);
}, [springApi]);

const goPreviousLink = useCallback(() => {
if (!isUndefinedOrNull(previousLink)) {
Expand Down Expand Up @@ -613,9 +614,9 @@ function ViewDetail() {
/>
<DisplayImage
imageURL={imageURL}
set={set}
// springApi={springApi}
setDisplayResetButton={setDisplayResetButton}
springDict={{ x, y, zoom, scale }}
springDict={{ x, y, zoom, scale, springApi }}
loading={loading}
setLoading={setLoading}
/>
Expand Down
8 changes: 4 additions & 4 deletions src/GridCard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,27 +32,27 @@ const useStyles = makeStyles((theme) => ({
paddingLeft: "15px",
paddingRight: "15px",
marginBottom: "0px",
boxShadow: "0 5px 18px 3px rgba(0, 0, 0,.2)",
// boxShadow: "0 5px 18px 3px rgba(0, 0, 0,.2)",
[theme.breakpoints.down("md")]: {
width: "125px",
paddingLeft: "12px",
paddingRight: "12px",
marginBottom: "0px",
boxShadow: "0 4px 15px 3px rgba(0, 0, 0,.2)",
// boxShadow: "0 4px 15px 3px rgba(0, 0, 0,.2)",
},
[theme.breakpoints.down("sm")]: {
width: "100px",
paddingLeft: "10px",
paddingRight: "10px",
marginBottom: "0px",
boxShadow: "0 3px 14px 3px rgba(0, 0, 0,.2)",
// boxShadow: "0 3px 14px 3px rgba(0, 0, 0,.2)",
},
[theme.breakpoints.down("xs")]: {
width: "80px",
paddingLeft: "8px",
paddingRight: "8px",
marginBottom: "0px",
boxShadow: "0 2px 14px 3px rgba(0, 0, 0,.2)",
// boxShadow: "0 2px 14px 3px rgba(0, 0, 0,.2)",
},
cursor: "pointer",

Expand Down
195 changes: 124 additions & 71 deletions src/scanViewer/DisplayImage.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React, { useState, useEffect, useCallback, useRef } from "react";
import { animated, to } from "react-spring";
import { useGesture } from "react-use-gesture";
import { Helmet } from "react-helmet";

import Grid from "@material-ui/core/Grid";

Expand All @@ -20,13 +21,13 @@ const isMobileFunc = function (a) {
export default function DisplayImage(props) {
const {
imageURL,
set,
// springApi,
setDisplayResetButton,
springDict,
loading,
setLoading,
} = props;
const { x, y, zoom, scale } = springDict;
const { x, y, zoom, scale, springApi } = springDict;
const domTarget = useRef(null);
const [isMobile, setIsMobile] = useState(false);
// const loading = false;
Expand All @@ -39,13 +40,17 @@ export default function DisplayImage(props) {
}
}, []);

// TODO: remove address bar on mobile
const updateDisplayScroll = useCallback(() => {
if (!isMobile) {
const scans = Array.from(document.querySelectorAll("#scan"));
const bodyRect = document.body.getBoundingClientRect();
const elemRect = scans[0].getBoundingClientRect();
const offsetTop = elemRect.top - bodyRect.top;
window.scrollTo({ top: offsetTop, behavior: "instant" });
} else {
window.scrollTo(0, 1);
console.log("After scroll");
}
});

Expand All @@ -70,11 +75,45 @@ export default function DisplayImage(props) {
{
onDrag: ({ movement: [mx, my], down }) => {
if (down) {
set.start({ x: mx, y: my });
springApi.start({ x: mx, y: my });
setDisplayResetButton(true);
// if (isMobile) {
// if (!document.fullscreenElement) {
// document.documentElement
// .requestFullscreen()
// .then((res) => {
// console.log("res", res);
// })
// .catch((error) => {
// console.log("error", error);
// });
// }
// }
}
},
onPinch: ({ offset: [dist] }) => {
onPinch: ({
// // [d,a] absolute distance and angle of the two pointers
// da: [distance, angle],
initial: [initDistance],
memo,
// // coordinates of the center between the two touch event
// origin,
// [scale, angle] offsets (starts withs scale=1)
offset: [scaleOffset],
// lastOffset: [scaleLastOffset, angleLastOffset],
}) => {
// console.log("onPinch memo", memo);
// console.log("onPinch distance", distance);
// console.log("onPinch initDistance", initDistance);
// console.log("onPinch formule", distance - initDistance);
// console.log("onPinch scaleOffset", scaleOffset);
// console.log("onPinch scaleLastOffset", scaleLastOffset);
// const zoom = distance / initDistance - 1;
// const zoom = scaleOffset;
const zoom = (scaleOffset + initDistance) / initDistance - 1;
console.log("onPinch zoom", zoom);
// console.log("onPinch set.current", set.current);
springApi({ zoom: zoom });
// console.log("useGesture props", props);
// Limit negative zoom
// console.log("useGesture distanceBounds", distanceBounds);
Expand All @@ -83,9 +122,10 @@ export default function DisplayImage(props) {
// const clampedZoom = Math.max(0, dist / 2000);
// console.log("useGesture dist / 2000", dist / 2000);
// console.log("useGesture zoom", zoom.animation.to);
set({ zoom: dist / 2000 });
// set({ zoom: scaleOffset / 2000 });
// set({ zoom: clampedZoom });
setDisplayResetButton(true);
return zoom;
},
},
{
Expand Down Expand Up @@ -118,72 +158,85 @@ export default function DisplayImage(props) {
);

return (
<Grid
container
justify="center"
alignItems="center"
style={{
marginBottom: "0.5em",
position: "relative",
overflow: "hidden",
height: "fit-content",
minHeight: "80vh",
}}
>
<Grid item>
<animated.img
ref={domTarget}
id="scan"
style={{
x,
y,
touchAction: "none",
marginLeft: "auto",
marginRight: "auto",
display: "block",
border: "4px solid white",
maxWidth: "98vw",
maxHeight: "96vh",
scale: to([scale, zoom], (s, z) => s + z),
objectFit: "contain",
}}
alt="manga"
src={imageURL}
onDragStart={(e) => {
e.preventDefault();
}}
onContextMenu={(e) => {
e.preventDefault();
}}
onLoad={imageLoaded}
/>
{loading ? (
<>
<div
style={{
position: "absolute",
left: 0,
right: 0,
top: 0,
bottom: 0,
height: "100%",
// Dark background
background: "#0008",
}}
/>
<WaitingComponent
loading={true}
style={{
color: "white",
position: "absolute",
top: "30%",
left: "50%",
right: "50%",
}}
/>
</>
) : null}
<>
{isMobile && (
<Helmet>
{/* <meta name="apple-mobile-web-app-capable" content="yes" /> */}
{/* <style>
{
"html {overflow: hidden; width: 100%;} body { height: 100%; position: fixed; overflow-y: scroll; -webkit-overflow-scrolling: touch; }"
}
</style> */}
</Helmet>
)}
<Grid
container
justify="center"
alignItems="center"
// alignItems="flex-start"
style={{
marginBottom: "0.5em",
position: "relative",
overflow: "hidden",
height: "fit-content",
minHeight: "80vh",
}}
>
<Grid item>
<animated.img
ref={domTarget}
id="scan"
style={{
x,
y,
touchAction: "none",
marginLeft: "auto",
marginRight: "auto",
display: "block",
border: "4px solid white",
maxWidth: "98vw",
maxHeight: "96vh",
scale: to([scale, zoom], (scale, zoom) => 1 + zoom),
objectFit: "contain",
}}
alt="manga"
src={imageURL}
onDragStart={(e) => {
e.preventDefault();
}}
onContextMenu={(e) => {
e.preventDefault();
}}
onLoad={imageLoaded}
/>
{loading ? (
<>
<div
style={{
position: "absolute",
left: 0,
right: 0,
top: 0,
bottom: 0,
height: "100%",
// Dark background
background: "#0008",
}}
/>
<WaitingComponent
loading={true}
style={{
color: "white",
position: "absolute",
top: "30%",
left: "50%",
right: "50%",
}}
/>
</>
) : null}
</Grid>
</Grid>
</Grid>
</>
);
}

0 comments on commit c49a4c5

Please sign in to comment.