luckysheet/src/controllers/zoom.js

import Store from '../store';
import locale from '../locale/locale';
import { replaceHtml } from '../utils/util';
import sheetmanage from './sheetmanage';
import {changeSheetContainerSize} from './resize';
import { jfrefreshgrid_rhcw } from '../global/refresh';
import server from './server';
import luckysheetPostil from './postil';
import imageCtrl from './imageCtrl';



let luckysheetZoomTimeout = null;

export function zoomChange(ratio){
    if(Store.flowdata==null || Store.flowdata.length==0){
        return;
    }

    clearTimeout(luckysheetZoomTimeout);
    luckysheetZoomTimeout = setTimeout(() => {
        if (Store.clearjfundo) {
            Store.jfredo.push({ 
                "type": "zoomChange", 
                "zoomRatio": Store.zoomRatio, 
                "curZoomRatio": ratio, 
                "sheetIndex": Store.currentSheetIndex, 
            });
        }
        currentWheelZoom = null;
        Store.zoomRatio = ratio;

        let currentSheet = sheetmanage.getSheetByIndex();

        //批注
        luckysheetPostil.buildAllPs(currentSheet.data);

        //图片
        imageCtrl.images = currentSheet.images;
        imageCtrl.allImagesShow();
        imageCtrl.init();

        if(currentSheet.config==null){
            currentSheet.config = {};
        }
    
        if(currentSheet.config.sheetViewZoom==null){
            currentSheet.config.sheetViewZoom = {};
        }

        let type = currentSheet.config.curentsheetView;
        if(type==null){
            type = "viewNormal";
        }
        currentSheet.config.sheetViewZoom[type+"ZoomScale"] = ratio;
    
        server.saveParam("all", Store.currentSheetIndex, Store.zoomRatio, { "k": "zoomRatio" });
        server.saveParam("cg", Store.currentSheetIndex, currentSheet.config["sheetViewZoom"], { "k": "sheetViewZoom" });

        zoomRefreshView();
    }, 100);
    
}

export function zoomRefreshView(){
    // let $scrollLeft = $("#luckysheet-scrollbar-x"), $scrollTop = $("#luckysheet-scrollbar-y");
    // let sl = $scrollLeft.scrollLeft(), st = $scrollTop.scrollTop();

    // let wp = $scrollLeft.find("div").width(), hp = $scrollTop.find("div").height();

    jfrefreshgrid_rhcw(Store.flowdata.length, Store.flowdata[0].length);
    changeSheetContainerSize();

    // let wc = $scrollLeft.find("div").width(), hc = $scrollTop.find("div").height();

    // $scrollLeft.scrollLeft(sl+wc-wp);
    // $scrollTop.scrollTop(st+hc-hp);
}

let currentWheelZoom = null;
export function zoomInitial(){

    // 缩放步长
    const ZOOM_WHEEL_STEP = 0.02; // ctrl + 鼠标滚轮
    const ZOOM_STEP = 0.1; // 点击以及 Ctrl + +-
    
    // 缩放最大最小比例
    const MAX_ZOOM_RATIO = 4;
    const MIN_ZOOM_RATIO = .1;
    
    $("#luckysheet-zoom-minus").click(function(){
        let currentRatio;
        if(Store.zoomRatio==null){
            currentRatio = Store.zoomRatio = 1;
        }
        else{
            currentRatio = Math.ceil(Store.zoomRatio*10)/10;
        }

        currentRatio = currentRatio-ZOOM_STEP;

        if(currentRatio==Store.zoomRatio){
            currentRatio = currentRatio-ZOOM_STEP;
        }

        if(currentRatio<=MIN_ZOOM_RATIO){
            currentRatio = MIN_ZOOM_RATIO;
        }

        // Store.zoomRatio = currentRatio;
        zoomChange(currentRatio);
        zoomNumberDomBind(currentRatio);
    });

    $("#luckysheet-zoom-plus").click(function(){
        let currentRatio;
        if(Store.zoomRatio==null){
            currentRatio = Store.zoomRatio = 1;
        }
        else{
            currentRatio = Math.floor(Store.zoomRatio*10)/10;
        }

        currentRatio = currentRatio+ZOOM_STEP;

        if(currentRatio==Store.zoomRatio){
            currentRatio = currentRatio+ZOOM_STEP;
        }

        if(currentRatio>=MAX_ZOOM_RATIO){
            currentRatio = MAX_ZOOM_RATIO;
        }

        // Store.zoomRatio = currentRatio;
        zoomChange(currentRatio);
        zoomNumberDomBind(currentRatio);
    });

    $("#luckysheet-zoom-slider").mousedown(function(e){
        let xoffset = $(this).offset().left, pageX = e.pageX;

        let currentRatio = positionToRatio(pageX-xoffset);
        // Store.zoomRatio = currentRatio;
        zoomChange(currentRatio);
        zoomNumberDomBind(currentRatio);
    });

    $("#luckysheet-zoom-cursor").mousedown(function(e){
        let curentX = e.pageX,cursorLeft = parseFloat($("#luckysheet-zoom-cursor").css("left"));
        $("#luckysheet-zoom-cursor").css("transition","none");
        $(document).off("mousemove.zoomCursor").on("mousemove.zoomCursor",function(event){
            let moveX = event.pageX;
            let offsetX = moveX - curentX;
            // console.log(moveX, curentX, offsetX);
            // curentX = moveX;
            // let left = parseFloat($("#luckysheet-zoom-cursor").css("left"));
            let pos = cursorLeft + offsetX; 
            let currentRatio = positionToRatio(pos);

            if(currentRatio>MAX_ZOOM_RATIO){
                currentRatio = MAX_ZOOM_RATIO;
                pos = 100;
            }

            if(currentRatio<MIN_ZOOM_RATIO){
                currentRatio = MIN_ZOOM_RATIO;
                pos = 0;
            }

            // Store.zoomRatio = currentRatio;
            zoomChange(currentRatio);
            let r = Math.round(currentRatio*100) + "%";
            $("#luckysheet-zoom-ratioText").html(r);
            $("#luckysheet-zoom-cursor").css("left", pos-4);
        });

        $(document).off("mouseup.zoomCursor").on("mouseup.zoomCursor",function(event){
            $(document).off(".zoomCursor");
            $("#luckysheet-zoom-cursor").css("transition","all 0.3s");
        });

        e.stopPropagation();
    }).click(function(e){
        e.stopPropagation();
    });

    $("#luckysheet-zoom-ratioText").click(function(){
        // Store.zoomRatio = 1;
        zoomChange(1);
        zoomNumberDomBind(1);
    });

    zoomNumberDomBind(Store.zoomRatio);

    currentWheelZoom = null;
    // 拦截系统缩放快捷键 Ctrl + wheel
    document.addEventListener(
        'wheel',
        function (ev) {
            if (!ev.ctrlKey || !ev.deltaY) {
                return;
            }
            if (currentWheelZoom === null) {
                currentWheelZoom = Store.zoomRatio || 1;
            }
            currentWheelZoom += ev.deltaY < 0 ? ZOOM_WHEEL_STEP : -ZOOM_WHEEL_STEP;
            if (currentWheelZoom >= MAX_ZOOM_RATIO) {
                currentWheelZoom = MAX_ZOOM_RATIO;
            } else if (currentWheelZoom < MIN_ZOOM_RATIO) {
                currentWheelZoom = MIN_ZOOM_RATIO;
            }
            zoomChange(currentWheelZoom);
            zoomNumberDomBind(currentWheelZoom);
            ev.preventDefault();
            ev.stopPropagation();
        },
        { capture: true, passive: false }
    );

    // 拦截系统缩放快捷键 Ctrl + +/- 0
    document.addEventListener(
        'keydown',
        function (ev) {
            if (!ev.ctrlKey) {
                return;
            }
            let handled = false;
            let zoom = Store.zoomRatio || 1;
            if (ev.key === '-' || ev.which === 189) {
                zoom -= ZOOM_STEP;
                handled = true;
            } else if (ev.key === '+' || ev.which === 187) {
                zoom += ZOOM_STEP;
                handled = true;
            } else if (ev.key === '0' || ev.which === 48) {
                zoom = 1;
                handled = true;
            }
    
            if (handled) {
                ev.preventDefault();
                if (zoom >= MAX_ZOOM_RATIO) {
                    zoom = MAX_ZOOM_RATIO;
                } else if (zoom < MIN_ZOOM_RATIO) {
                    zoom = MIN_ZOOM_RATIO;
                }
                zoomChange(zoom);
                zoomNumberDomBind(zoom);
            }
        },
        { capture: true }
    );
}

function positionToRatio(pos){
    let ratio = 1;
    if(pos<50){
        ratio = Math.round((pos*1.8/100 + 0.1)*100)/100;
    }
    else if(pos>50){
        ratio = Math.round(((pos-50)*6/100 + 1)*100)/100;
    }

    return ratio;
}

function zoomSlierDomBind(ratio){
    let domPos = 50;
    if(ratio<1){
        domPos = Math.round((ratio - 0.1)*100 / 0.18)/10;
    }
    else if(ratio>1){
        domPos = Math.round((ratio - 1)*100 / 0.6)/10+50;
    }
    $("#luckysheet-zoom-cursor").css("left", domPos-4);
}

export function zoomNumberDomBind(ratio){
    let r = Math.round(ratio*100) + "%";
    $("#luckysheet-zoom-ratioText").html(r);
    zoomSlierDomBind(ratio);
}