In one of many well-liked PDF viewers, Acrobat Reader, there’s a software referred to as the “Hand Tool.” It permits you to navigate via the doc by dragging and dropping whereas holding down the mouse button. You may activate the “Hand Tool” by clicking the corresponding button on the toolbar.
“Hand Tool” button in Acrobat Reader
On this article, we’ll implement comparable conduct utilizing the Konva.js library.
Tutorial
First off, we have to implement the flexibility to view doc pages. To attain this, we’ll outline a listing of pages utilizing the next array:
const pages = [
{ pageId: 1, width: 2016, height: 2264, imageURL, offsetY: 0 },
{ pageId: 2, width: 2016, height: 2264, imageURL, offsetY: 2264 },
{ pageId: 3, width: 2016, height: 2264, imageURL, offsetY: 4528 }
];
Right here, for every web page, the web page picture URL imageURL
and the offset from the start of the doc offsetY
are specified. Then, we’ll implement a part liable for displaying the web page:
import { Picture } from "react-konva";
import useImage from "use-image";
export default operate Web page({ width, top, imageURL, offsetY }) {
const [image] = useImage(imageURL);
if (!picture) {
return null;
}
return (
);
}
To load a picture by URL, the useImage
hook is used. Then, the loaded picture is handed to the Picture
part from the Konva.js library for show.
When working with the “Hand Tool” software, the place of the doc adjustments, and accordingly, the place of the scroll adjustments. Due to this fact, the subsequent step is to implement the flexibility to scroll the doc. For this, we’ll use an answer specified within the official documentation of the library and adapt it to our React utility:
export default operate App() {
const [scroll, setScroll] = useState({ left: 0, high: 0 });
const handleScroll = useCallback((occasion) => {
const { scrollLeft, scrollTop } = occasion.currentTarget;
setScroll({ left: scrollLeft, high: scrollTop });
}, []);
const stageStyles = useMemo(() => {
return { remodel: `translate(${scroll.left}px, ${scroll.high}px)` };
}, [scroll]);
return (
{pages.map((web page, index) => (
))}
);
}
The principle concept is that when scrolling, the place of the Stage
adjustments, and on the identical time, the place of the guardian factor that wraps the Stage
adjustments.
The final step is to implement the “Hand Tool” software, however first, let’s work out the way it works: it will assist us perceive the right way to implement it. When the software is energetic, it permits the person to carry down the doc with the mouse button, as in Drag and Drop, and transfer across the doc by dragging it, i.e., altering its place, specified by the purpose with coordinates X and Y.
From right here, it follows that we have to deal with the drag-and-drop occasion and alter the place of the doc. The Konva.js library supplies corresponding handlers for the drag-and-drop occasion, however we’ll use the dragBoundFunc
operate. This operate is used to override the place throughout the drag-and-drop occasion. Overriding the place is critical for extra validation to forestall the scene place from being moved past the doc boundaries.
Let’s transfer on to the implementation, after which we’ll focus on it:
export default operate App() {
const rootRef = useRef(null);
const [isHandToolOn, setHandToolStatus] = useState(false);
const [scroll, setScroll] = useState({ left: 0, high: 0 });
const handleClick = useCallback(() => {
setHandToolStatus((prev) => !prev);
}, []);
const handleScroll = useCallback((occasion) => {
const { scrollLeft, scrollTop } = occasion.currentTarget;
setScroll({ left: scrollLeft, high: scrollTop });
}, []);
const stageStyles = useMemo(() => {
return { remodel: `translate(${scroll.left}px, ${scroll.high}px)` };
}, [scroll]);
const scrollTo = useCallback(({ left, high }) => {
rootRef.present.scrollLeft = left;
rootRef.present.scrollTop = high;
setScroll({ left, high });
}, []);
const handleDrag = useCallback(
(dragPosition) => {
const {
scrollHeight,
scrollWidth,
clientHeight: rootHeight,
clientWidth: rootWidth
} = rootRef.present;
const scrollableWidth = Math.max(0, scrollWidth - rootWidth);
const scrollableHeight = Math.max(0, scrollHeight - rootHeight);
const leftMin = Math.max(0, -dragPosition.x);
const topMin = Math.max(0, -dragPosition.y);
const left = Math.min(leftMin, scrollableWidth);
const high = Math.min(topMin, scrollableHeight);
scrollTo({ left, high });
return { x: -left, y: -top };
},
[scrollTo]
);
return (
{pages.map((web page, index) => (
))}
);
}
We’ve added a “Hand Tool: On/Off” button to the web page, which can be utilized to activate the “Hand Tool.” If the “Hand Tool” is energetic, the scene can be moved utilizing conduct much like the drag and drop occasion. Then we added the corresponding handleDrag
handler, wherein we checked that the place of the Stage
doesn’t transcend the doc boundaries and replace the place of the doc and the scrollbar. The “Hand Tool” software is prepared, and now the doc might be moved not solely utilizing the scrollbar but additionally by dragging the doc pages with the mouse. You could find the total supply code and instance on CodeSandbox.
Closing Thought
I hope that you simply discovered this text helpful and attention-grabbing. Within the subsequent article, we’ll proceed to implement numerous performance utilizing the Konva.js library.