ReactZoomify.js

// paragjyoti2012@gmail.com
// 2016

import React from 'react'

export default class ReactZoomify extends React.Component{
     constructor(){
         super()
         this.state={
             px:0,
             py:0,
             Ox:0,
             Oy:0,
             w:0,
             h:0,
             dx:0,
             dy:0,
             cEx:0,
             cEy:0,
             isVisible:false,
             isStatic:false
         }
     }
     
     
     
     componentDidMount(){
          let img=document.getElementById('img')      
          let clipper=document.getElementById('clipper')
          let  cEx= clipper.getBoundingClientRect().left+(this.props.s/2),    //these are clipper position erors tht are eliminated
               cEy=clipper.getBoundingClientRect().top+(this.props.s/2)
          
           let  w=this.props.width;

             let that=this
       
              // As Image height is not provided as prop , height is calculated after image is loaded.        
      
       img.addEventListener('load',function(){
          
           var h=img.clientHeight,
            Oy=img.getBoundingClientRect().top,
            Ox=img.getBoundingClientRect().left
   
           that.setState({h:h,Ox,Oy})
           
       })
   
        window.addEventListener('mousemove',this.handleMouseMove.bind(this))  
         this.setState({w,cEx,cEy})
        
     }
     componentWillUnmount(){
         window.removeEventListener('mousemove',this.handleMouseMove.bind(this))
         let img=this.refs.img.removeEventListener('load',function(){
          
           var h=img.clientHeight
           that.setState({h:h})
           
       })
            
     }
     
     handleMouseMove({pageX,pageY}){
               // pageX and pageY are the cursor position during mousemove 

          let dx=this.d(pageX,this.state.Ox,this.props.s),
              dy=this.d(pageY,this.state.Oy,this.props.s);
              
         let {px,py,Ox,Oy}=this.state     
              
         let w=this.props.width,
              h=this.state.h,
              
                    
         // isVisible is for checking the cursor is within the image or not. 
           // if mouse is outside the img element , isvisible is false and vise versa      
              isVisible=false,
   // isStatic is used for the square sized clipper on the image is touching the boundrary of the parent image or not.
     
              isStatic=false
              
              
          if(dx < 0 || dy < 0 || dx > w-this.props.s || dy > h-this.props.s){
              isStatic=true
          }    
          if(px > Ox && py > Oy && px < w+Ox && py< h+Oy ){
              isVisible=true
          }    
          let clipper=document.getElementById('clipper')
          console.log(clipper.getBoundingClientRect().top,'cll',py)
          
          this.setState({px:pageX,py:pageY,dx:dx,dy:dy,isVisible:isVisible,isStatic:isStatic})
     }
     
     d(p,O,s){
         
         return p-(O+(s/2))
         
     }
     
     D(d,m){
         return m*d
     }
     
     render(){
         
         let m=this.props.magnification?this.props.magnification:5;
         let W=this.D(this.props.width,m),
             H=this.D(this.state.h,m),
             S=this.D(this.props.s,m),
             Dx=this.D(this.state.dx,m),
             Dy=this.D(this.state.dy,m)
         let posX= -Dx,
             posY = -Dy;
          
          if(Dx<0){
              posX=0
          }
          if(Dy<0){
              posY=0
          }
          if(Dy>H-S){
              posY=S-H
          }
          if(Dx>W-S){
              posX=S-W
          }
       
          let w=this.props.width,
              h=this.state.h,    
              s=this.props.s,
              src=this.props.src,
              zoomedImgTop=this.props.zoomedImgTop,
              zoomedImgLeft=this.props.zoomedImgLeft
         let {dx,dy,Ox,Oy,py,px,cEx,cEy}=this.state  
         
            
         let sPos=  getSposition(dx,dy,w,h,s,Ox,Oy,px,py,cEx,cEy)     
         
         let sLeft=sPos.sLeft
         let sTop=sPos.sTop
            
         
         
       return  <div>
         <div>
           <img id='img'
             ref='img'
             src={src}
             width={w+'px'}
             height='auto'
             
             style={{margin:'60px',position:'relative'}}
           ></img>
        
         </div>
           <div id='clipper'
            style={{
                position:'absolute',
                width:`${s}px`,
                height:`${s}px`,
                top:`${!this.state.isStatic?py-this.state.cEy:sTop}`,
                left:`${!this.state.isStatic?px-this.state.cEx:sLeft}`,
                // top:`${py-this.state.cEy}`,
                // left:`${px-this.state.cEx}`,
                visibility:`${this.state.isVisible?'visible':'hidden'}`,
                background:'rgba(0,0,0,.3)',
                
            }}
           
           ></div>
           {console.log(s,'s')}
           <div
            style={{
                width:`${S}px`,
                height:`${S}px`,
                background:'#ccc',
                backgroundImage:`url(${src})`,
                backgroundPosition: `${posX}px ${posY}px`,
                backgroundSize:`${W}px ${H}px`,
                backgroundRepeat:'no-repeat',
                
                 backgroundAttachment:'scroll',
                transition:'opacity .3s ease-out,visibility .3s ease-out',
                position:'absolute',
                top:`${zoomedImgTop+'px'}`,
                left:`${zoomedImgLeft+'px'}`,
                zIndex:'9999',
                boxShadow:'0px 4px 4px rgba(0,0,0,.4)',
                visibility:`${this.state.isVisible?'visible':'hidden'}`,
                opacity:`${this.state.isVisible?'1':'0'}`
                 
            }}
           >
        {console.log(px,px-(s/2),this.state.isStatic)}
   
           </div>
           
           
           
         </div>
         
     }
     
     
};

//getSposition returns calculated position of Square-clipper 
//if dx,dy<0 or dx<w-s , dy<h-s , the clipper is going outside the boundrary which is prevented via setting isStatic to true 


function getSposition(dx,dy,w,h,s,Ox,Oy,px,py,cEx,cEy){
  let sLeft=Ox,
      sTop=Oy
    if(dx<0){
        
        sLeft=Ox
        if(dy<0){
            sTop=Oy
        }
        if(dy>0){
            sTop=py-(s/2)
        }
        if(dy>h-s){
            sTop=Oy+h-s
        }
}
  if(dx>0){
      sLeft=px-(s/2)
        if(dy<0){
            sTop=Oy
        }
        if(dy>0){
            sTop=py-(s/2)
        }
        if(dy>h-s){
            sTop=Oy+h-s
        }
  }
  if(dx>w-s){
      sLeft=Ox+w-s

        if(dy<0){
            sTop=Oy
        }
        if(dy>0){
            sTop=py-(s/2)
        }
        if(dy>h-s){
            sTop=Oy+h-s
        }
  }
       
   //errors on clipper position are eliminated finally.    
  return {sLeft:sLeft-(cEx-(s/2)),sTop:sTop-(cEy-(s/2))}  
    
}