damien/neroshitron
1
0
Fork 0
mirror of https://github.com/D4M13N-D3V/neroshitron.git synced 2025-03-14 10:05:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix:recenter

Browse Source
This commit is contained in:
Damien Ostler 2024-05-26 21:57:10 -04:00
parent 8f41b42cf4
commit 323ba05fda
1 changed files with 27 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
components/ui/gallery.tsx
View File

@ -1,8 +1,8 @@
import { use, useState } from 'react'; import { use, useState, useRef } from 'react';
import { useEffect } from 'react'; import { useEffect } from 'react';
import { render } from 'react-dom'; import { render } from 'react-dom';
import Masonry from 'react-masonry-css'; import Masonry from 'react-masonry-css';
import PanZoom from 'react-easy-panzoom'; import PanZoom, { PanZoomRef } from 'react-easy-panzoom';
interface GalleryProps { interface GalleryProps {
id: string; id: string;
@ -138,6 +138,16 @@ const Gallery = ({ id, columns, closeMenu }: GalleryProps) => {
window.open(url, '_blank'); window.open(url, '_blank');
} }
const panZoomRef = useRef<any>(null);
const resetPanZoom = (event: any) => {
console.log(event.target.id)
if (panZoomRef.current && event.target.id != "image-container") {
panZoomRef.current.autoCenter();
console.log("POGER")
}
};
const close = () => { const close = () => {
if (selectedImage != null) { if (selectedImage != null) {
setSelectedImage(null); setSelectedImage(null);
@ -152,7 +162,9 @@ const Gallery = ({ id, columns, closeMenu }: GalleryProps) => {
default: 3 default: 3
}; };
return ( return (
<div className="z-20"> <div >
<div className="z-20"
onClick={resetPanZoom} style={{ width: selectedImage ? "100%" : "auto", height: selectedImage ? "100%" : "auto" }}>
<button <button
className="fixed bg-purple-800 hover:bg-purple-700 left-1/3 ml-4 bottom-5 animate-in animate-once animate-duration-1000 animate-ease-out animate-reverse mb-4 py-2 px-4 rounded-lg no-underline flex items-center z-50" className="fixed bg-purple-800 hover:bg-purple-700 left-1/3 ml-4 bottom-5 animate-in animate-once animate-duration-1000 animate-ease-out animate-reverse mb-4 py-2 px-4 rounded-lg no-underline flex items-center z-50"
onClick={() => close()} onClick={() => close()}
@ -176,17 +188,26 @@ const Gallery = ({ id, columns, closeMenu }: GalleryProps) => {
{renderButtons()} {renderButtons()}
{selectedImage ? ( {selectedImage ? (
<>
<PanZoom <PanZoom
key={selectedImage} key={selectedImage}
autoCenter={true} autoCenter={true}
ref={panZoomRef}
> >
{/*
<div
onClick={() => resetPanZoom()} className='w-full h-full z-10'>
</div> */}
<div id="image-container" >
<img <img
src={images[currentIndex]} src={images[currentIndex]}
style={{ objectFit: "contain", maxWidth: "100%", maxHeight: "calc(100vh - 20px)", pointerEvents:"none" }} style={{ objectFit: "contain", maxWidth: "100%", maxHeight: "calc(100vh - 20px)", pointerEvents:"none" }}
className="cursor-pointer animate-in w-full h-auto" className="cursor-pointer animate-in w-full h-auto"
onClick={() => close()} >
/> </img>
</div>
</PanZoom> </PanZoom>
</>
) : ( ) : (
<div <div
className="z-30 pb-10" className="z-30 pb-10"
@ -215,6 +236,7 @@ const Gallery = ({ id, columns, closeMenu }: GalleryProps) => {
</div> </div>
)} )}
</div> </div>
</div>
); );
} }