//页面加载完成之后的操作
window.onload=function(){

    let tuoZhuaiState=0;  //1表示可以拖拽   0表示不可以拖拽
    let svg=document.getElementById('mySvg');

    //viewbox的初始大小
    let viewBox='';

    //viewBOX的初始大小 
    let ChuShiDaXiaoX=0;
    let ChuShiDaXiaoY=0;

    //viewbox的初始  x y 
    let YuanDianX = 0;
    let YuanDianY = 0;

    console.log()
    let multiple = $('#mySvg')[0].clientHeight/$('#mySvg')[0].clientWidth;

    //存储viewbox变化之后的 x y
    let WeiZhiXinXiX = 0;
    let WeiZhiXinXiY = 0;

    //鼠标按下之后的鼠标位置 x y 
    let mouseInit={
        x:0,
        y:0
    };

    //鼠标按下之后存储的viewbox的 x y 信息
    let startWeiZhi={
        x:0,
        y:0
    };
    
    console.log()
    console.log()
    //初始化位置
    function initLocal(){
        //把viewbox的初始化大小存在变量中
        ChuShiDaXiaoX=parseInt($('#mySvg')[0].clientWidth);
        ChuShiDaXiaoY=parseInt($('#mySvg')[0].clientHeight);

        //根据svg的大小确定viewbox的大小
        viewBox=`0 0 ${parseInt($('#mySvg')[0].clientWidth)} ${parseInt($('#mySvg')[0].clientHeight)}`;
        svg.setAttribute('viewBox',viewBox)
    }
    initLocal();



    //鼠标按下事件 可以进行拖拽
    $('#mySvg').on('mousedown',function(e){
        tuoZhuaiState=1;
        mouseInit.x=e.offsetX*(ChuShiDaXiaoX / $('#mySvg')[0].clientWidth);
        mouseInit.y=e.offsetY*(ChuShiDaXiaoY / $('#mySvg')[0].clientHeight);
        startWeiZhi.x=WeiZhiXinXiX;
        startWeiZhi.y=WeiZhiXinXiY;
    })
    
    //鼠标悬浮事件，对svg的viewbox进行移动操作
    $('#mySvg').on('mousemove',function(e){
        if(tuoZhuaiState==1){
            YuanDianX =mouseInit.x - e.offsetX * (ChuShiDaXiaoX / $('#mySvg')[0].clientWidth) + startWeiZhi.x;
            YuanDianY = mouseInit.y - e.offsetY * (ChuShiDaXiaoY / $('#mySvg')[0].clientHeight) + startWeiZhi.y;
            viewBox=`${YuanDianX} ${YuanDianY} ${ChuShiDaXiaoX} ${ChuShiDaXiaoY}`;
            WeiZhiXinXiX=YuanDianX;
            WeiZhiXinXiY=YuanDianY;

            svg.setAttribute('viewBox',viewBox)
        }
    })

    $('#mySvg').on('mouseout',function(e){
        tuoZhuaiState=0
    })


    //鼠标抬起事件，取消拖拽
    $('#mySvg').on('mouseup',function(e){
        tuoZhuaiState=0;
    })

    //鼠标滚轮事件
    $('#mySvg').on('mousewheel',function(e){
        console.log(e)
        if(e.originalEvent.wheelDelta>0){
            console.log(multiple)
            ChuShiDaXiaoX-=18;
            ChuShiDaXiaoY=multiple*ChuShiDaXiaoX;
            viewBox=`${YuanDianX+=2} ${YuanDianY+=2} ${ChuShiDaXiaoX} ${ChuShiDaXiaoY}`;
            WeiZhiXinXiX = YuanDianX;
            WeiZhiXinXiY = YuanDianY;
        }else{
            console.log('缩小')
            ChuShiDaXiaoX+=18;
            ChuShiDaXiaoY=multiple*ChuShiDaXiaoX;
            viewBox=`${YuanDianX-=2} ${YuanDianY-=2} ${ChuShiDaXiaoX} ${ChuShiDaXiaoY}`;
            WeiZhiXinXiX = YuanDianX;
            WeiZhiXinXiY = YuanDianY;
        }
        svg.setAttribute('viewBox',viewBox)
    })

    //右键回到初始化
    $('#mySvg').on('contextmenu',function(e){
        e.preventDefault();
        viewBox=`0 0 ${parseInt($('#mySvg')[0].clientWidth)} ${parseInt($('#mySvg')[0].clientHeight)}`;
        WeiZhiXinXiX=0;
        WeiZhiXinXiY=0;
        YuanDianX=0;
        YuanDianY=0;
        ChuShiDaXiaoX=parseInt($('#mySvg')[0].clientWidth);
        ChuShiDaXiaoY=parseInt($('#mySvg')[0].clientHeight);
        svg.setAttribute('viewBox',viewBox)
    })
}