fix(change sheet scroll bar fix): change sheet scroll bar dont restore

5 years ago · 02d26557a5
9 changed files with 144 additions and 34 deletions
--- a/src/controllers/conditionformat.js
+++ b/src/controllers/conditionformat.js
@ -2288,7 +2288,7 @@ const conditionformat = {
                                            </div>
                                        </div>
                                    </div>
-                                    <div class="title">设置格式：</div>${textCellColorHtml}`;
+                                    <div class="title">${conditionformat_Text.setFormat}: </div>${textCellColorHtml}`;
                break;
            case 2: //仅对排名靠前或靠后的数值设置格式
                ruleExplainHtml =  `<div class="title">${conditionformat_Text.ruleTypeItem3_title}：</div>
--- a/src/controllers/handler.js
+++ b/src/controllers/handler.js
@ -61,7 +61,7 @@ import { createLuckyChart, hideAllNeedRangeShow } from '../expendPlugins/chart/p
 //, columeflowset, rowflowset
 export default function luckysheetHandler() {

-    const os = browser.detectOS(), isMac = os=="Mac"?true:false, scrollNum = isMac?1:3, isMobile = browser.mobilecheck();
+    const os = browser.detectOS(), isMobile = browser.mobilecheck();

    //移动端
    if(isMobile){
@ -106,7 +106,7 @@ export default function luckysheetHandler() {
    const _locale = locale();
    const locale_drag = _locale.drag;
    const locale_info = _locale.info;
-
+    let prev
    $("#luckysheet-grid-window-1").mousewheel(function (event, delta) {
        let scrollLeft = $("#luckysheet-scrollbar-x").scrollLeft(), 
            scrollTop = $("#luckysheet-scrollbar-y").scrollTop();
@ -130,6 +130,7 @@ export default function luckysheetHandler() {
        let colscroll = 0;
        let rowscroll = 0;

+        let scrollNum = event.deltaFactor<40?1:(event.deltaFactor<80?2:3);
        //一次滚动三行或三列
        if(event.deltaY != 0){
            let row_ed;
@ -153,11 +154,11 @@ export default function luckysheetHandler() {

            $("#luckysheet-scrollbar-y").scrollTop(rowscroll);
        }
-        
-        if((isMobile || event.deltaY ==0) && event.deltaX != 0){
+        else if(event.deltaX != 0){
            let col_ed;
            
-            if((isMac && event.deltaX >0 ) || (!isMac && event.deltaX < 0)){
+            // if((isMac && event.deltaX >0 ) || (!isMac && event.deltaX < 0)){
+            if(event.deltaX >0){
                col_ed = col_st + scrollNum;
                
                if(col_ed >= visibledatacolumn_c.length){
@ -179,18 +180,19 @@ export default function luckysheetHandler() {
    });

    $("#luckysheet-scrollbar-x").scroll(function(){
-        setTimeout(function(){
-            luckysheetscrollevent(true);
-        },10); 
+        // setTimeout(function(){
+            luckysheetscrollevent();
+        // },10); 
+
    })
    .mousewheel(function (event, delta) {
        event.preventDefault();
    });

    $("#luckysheet-scrollbar-y").scroll(function(){
-		setTimeout(function(){
-            luckysheetscrollevent(true);
-        },10);
+		// setTimeout(function(){
+            luckysheetscrollevent();
+        // },10);
    })
    .mousewheel(function (event, delta) {
        event.preventDefault();
--- a/src/controllers/mobile.js
+++ b/src/controllers/mobile.js
@ -9,17 +9,24 @@ export default function mobileinit(){
    //去除滚动条
    Store.cellMainSrollBarSize = 0;

+ 
+
    //滑动滚动表格
    let luckysheet_touchmove_status = false,
        luckysheet_touchmove_startPos = {},
-        luckysheet_touchhandle_status = false;
+        luckysheet_touchhandle_status = false,
+        _scrollTimer = null;
    $(document).on("touchstart", "#luckysheet-grid-window-1", function(event){
+        clearInterval(_scrollTimer);//clear timer
        luckysheet_touchmove_status = true;

        let touch = event.originalEvent.targetTouches[0];
        luckysheet_touchmove_startPos = {
            x: touch.pageX,
-            y: touch.pageY
+            y: touch.pageY,
+            startTime:event.timeStamp, 
+            vy:0, //vy可以理解为滑动的力度
+            moveType:"y",
        }
    })
    $(document).on("touchmove", "#luckysheet-grid-window-1", function(event){
@ -33,16 +40,16 @@ export default function mobileinit(){
            let slideX = touch.pageX - luckysheet_touchmove_startPos.x;
            let slideY = touch.pageY - luckysheet_touchmove_startPos.y;

-            luckysheet_touchmove_startPos = {
-                x: touch.pageX,
-                y: touch.pageY
-            }
+            luckysheet_touchmove_startPos.x = touch.pageX;
+            luckysheet_touchmove_startPos.y = touch.pageY;
+
+            let scrollLeft = $("#luckysheet-scrollbar-x").scrollLeft();
+            let scrollTop = $("#luckysheet-scrollbar-y").scrollTop();

-            let scrollLeft = $("#luckysheet-cell-main").scrollLeft();
-            let scrollTop = $("#luckysheet-cell-main").scrollTop();
+            scrollLeft -= slideX*3;
+            scrollTop -= slideY*3;

-            scrollLeft -= slideX;
-            scrollTop -= slideY;
+            // console.log(touch,touch.pageY, luckysheet_touchmove_startPos.y, slideY);

            if(scrollLeft < 0){
                scrollLeft = 0;
@ -52,12 +59,32 @@ export default function mobileinit(){
                scrollTop = 0;
            }

-            if(Math.abs(slideX) < Math.abs(slideY)){
-                $("#luckysheet-scrollbar-y").scrollTop(scrollTop);
+            if (event.timeStamp - luckysheet_touchmove_startPos.startTime > 40) {//如果是慢速滑动，就不会产生力度，列表是跟着鼠标移动的
+                luckysheet_touchmove_startPos.startTime = event.timeStamp;//慢速滑动不产生力度，所以需要实时更新时间戳
+                
+                if(Math.abs(slideX) < Math.abs(slideY)){
+                    $("#luckysheet-scrollbar-y").scrollTop(scrollTop);
+                }
+                else{
+                    $("#luckysheet-scrollbar-x").scrollLeft(scrollLeft);
+                }
            }
            else{
-                $("#luckysheet-scrollbar-x").scrollLeft(scrollLeft);
+                if(Math.abs(slideX) < Math.abs(slideY)){
+                    // $("#luckysheet-scrollbar-y").scrollTop(scrollTop);
+                    luckysheet_touchmove_startPos.vy = slideY;
+                    luckysheet_touchmove_startPos.scrollTop = scrollTop;
+                    luckysheet_touchmove_startPos.moveType = "y";
+                }
+                else{
+                    // $("#luckysheet-scrollbar-x").scrollLeft(scrollLeft);
+                    luckysheet_touchmove_startPos.vy = slideX;
+                    luckysheet_touchmove_startPos.moveType = "x";
+                    luckysheet_touchmove_startPos.scrollLeft = scrollLeft;
+                }
            }
+
+
        }
        else if(luckysheet_touchhandle_status){//选区
            let mouse = mouseposition(touch.pageX, touch.pageY);
@ -157,8 +184,41 @@ export default function mobileinit(){
        event.stopPropagation();
    })
    $(document).on("touchend", function(event){
+        if(luckysheet_touchmove_status){
+            let vy = Math.abs(luckysheet_touchmove_startPos.vy), friction = ((vy >> 31) * 2 + 1) * 0.5;
+            if(vy>0){
+                _scrollTimer = setInterval(function () {//
+                    vy -= friction;//力度按 惯性的大小递减
+                    if(luckysheet_touchmove_startPos.moveType=="y"){
+                        if(luckysheet_touchmove_startPos.vy>0){
+                            luckysheet_touchmove_startPos.scrollTop -= vy;
+                        }
+                        else{
+                            luckysheet_touchmove_startPos.scrollTop += vy;
+                        }
+                        //luckysheet_touchmove_startPos.scrollTop += vy;
+                        $("#luckysheet-scrollbar-y").scrollTop(luckysheet_touchmove_startPos.scrollTop);
+                    }
+                    else{
+                        if(luckysheet_touchmove_startPos.vy>0){
+                            luckysheet_touchmove_startPos.scrollLeft -= vy;
+                        }
+                        else{
+                            luckysheet_touchmove_startPos.scrollLeft += vy;
+                        }
+                        // luckysheet_touchmove_startPos.scrollLeft += vy;
+                        $("#luckysheet-scrollbar-x").scrollLeft(luckysheet_touchmove_startPos.scrollLeft);
+                    }
+
+                    if(vy<=0){
+                        clearInterval(_scrollTimer);
+                    }
+                }, 20); 
+            }
+
+        }
        luckysheet_touchmove_status = false;
-        luckysheet_touchmove_startPos = {};
+        // luckysheet_touchmove_startPos = {};

        luckysheet_touchhandle_status = false;
    })
@ -166,6 +226,8 @@ export default function mobileinit(){
    //滑动选择选区
    $(document).on("touchstart", ".luckysheet-cs-touchhandle", function(event){
        luckysheet_touchhandle_status = true;
+        luckysheet_touchmove_status = false;
+        console.log(1111111111);
        event.stopPropagation();
    })  

--- a/src/controllers/select.js
+++ b/src/controllers/select.js
@ -366,7 +366,7 @@ function luckysheet_count_show(left, top, width, height, rowseleted, columnselet
            topv = scrollHeight + drawHeight / 2;
        }

-        $("#luckysheet-row-count-show").css({ "left": leftv, "top": topv, "display": "block" }).html("<div>" + rowl.toString().split("").join("</div><div>") + "</div><div>"+locale_info.row+"</div>");
+        $("#luckysheet-row-count-show").css({ "left": leftv, "top": topv, "display": "block","width":"11px" }).html("<div>" + rowl.toString().split("").join("</div><div>") + "</div><div>"+locale_info.row+"</div>");
    }
    else {
        $("#luckysheet-row-count-show").hide();
--- a/src/controllers/sheetmanage.js
+++ b/src/controllers/sheetmanage.js
@ -756,8 +756,8 @@ const sheetmanage = {
        file["luckysheet_select_save"] = $.extend(true, [], Store.luckysheet_select_save);
        file["luckysheet_selection_range"] = $.extend(true, [], Store.luckysheet_selection_range);

-        file["scrollLeft"] = $("#luckysheet-cell-main").scrollLeft();//列标题
-        file["scrollTop"] = $("#luckysheet-cell-main").scrollTop();//行标题
+        file["scrollLeft"] = $("#luckysheet-scrollbar-x").scrollLeft();//列标题
+        file["scrollTop"] = $("#luckysheet-scrollbar-y").scrollTop();//行标题
    },
    setSheetParam: function(isload) {
        let index = this.getSheetIndex(Store.currentSheetIndex);
@ -787,6 +787,25 @@ const sheetmanage = {

        createFilterOptions(file["filter_select"], file["filter"]);

+        Store.scrollRefreshSwitch = false;
+        if(file["scrollLeft"]!=null && file["scrollLeft"]>0){
+            $("#luckysheet-scrollbar-x").scrollLeft(file["scrollLeft"]);
+        }
+        else{
+            $("#luckysheet-scrollbar-x").scrollLeft(0);
+        }
+
+        if(file["scrollTop"]!=null && file["scrollTop"]>0){
+            $("#luckysheet-scrollbar-y").scrollTop(file["scrollTop"]);
+        }
+        else{
+            $("#luckysheet-scrollbar-y").scrollTop(0);
+        }
+        setTimeout(() => {
+            Store.scrollRefreshSwitch = true;
+        }, 0);
+        
+
        jfrefreshgrid_rhcw(Store.flowdata.length, Store.flowdata[0].length,false);
    },
    restoreselect: function() {
@ -852,7 +871,7 @@ const sheetmanage = {
        else if($("#luckysheet-modal-dialog-slider-pivot").is(":visible")) {
            Store.luckysheetcurrentisPivotTable = false;
            $("#luckysheet-modal-dialog-slider-pivot").hide();
-            luckysheetsizeauto();
+            luckysheetsizeauto(false);
        }

        let load = file["load"];
--- a/src/css/luckysheet-core.css
+++ b/src/css/luckysheet-core.css
@ -1991,7 +1991,7 @@ body:not(.ewa-ipad) .luckysheet-cols-h-cell-nosel:hover, body:not(.ewa-ipad) .lu
    width: 16px;
    height: 16px;
    padding: 5px;
-    z-index: 10;
+    z-index: 100;
    pointer-events: auto;
    touch-action: auto;
 }
@ -5468,7 +5468,7 @@ fieldset[disabled] a.btn {
    color: #fff;
 }
 .luckysheet-newEditorRule-dialog .ruleTypeBox .ruleTypeItem .icon{
-
+    font-family: Arial, Helvetica, sans-serif;
 }
 .luckysheet-newEditorRule-dialog .ruleExplainBox{
    border: 1px solid #d4d4d4;
--- a/src/global/draw.js
+++ b/src/global/draw.js
@ -240,6 +240,8 @@ function luckysheetDrawMain(scrollWidth, scrollHeight, drawWidth, drawHeight, of
        return;
    }

+
+    // console.trace();
    clearTimeout(measureTextCacheTimeOut);
    
    //参数未定义处理
--- a/src/global/scroll.js
+++ b/src/global/scroll.js
@ -3,12 +3,29 @@ import { luckysheet_searcharray } from '../controllers/sheetSearch';
 import { luckysheetrefreshgrid } from '../global/refresh';
 import Store from '../store';

+
+let scrollRequestAnimationFrameIni = true,scrollRequestAnimationFrame = false, scrollTimeOutCancel=null;
+
+function execScroll(){
+    let scrollLeft = $("#luckysheet-scrollbar-x").scrollLeft(), 
+        scrollTop = $("#luckysheet-scrollbar-y").scrollTop();
+    luckysheetrefreshgrid(scrollLeft, scrollTop);
+    scrollRequestAnimationFrame = window.requestAnimationFrame(execScroll);
+}
+
 //全局滚动事件
 export default function luckysheetscrollevent(isadjust) {
    let $t = $("#luckysheet-cell-main");
    let scrollLeft = $("#luckysheet-scrollbar-x").scrollLeft(), 
        scrollTop = $("#luckysheet-scrollbar-y").scrollTop();

+    clearTimeout(scrollTimeOutCancel);
+
+    scrollTimeOutCancel = setTimeout(() => {
+        scrollRequestAnimationFrameIni  = true;
+        window.cancelAnimationFrame(scrollRequestAnimationFrame);
+    }, 500);
+
    // if (!!isadjust) {
    //     let scrollHeight = $t.get(0).scrollHeight;
    //     let windowHeight = $t.height();
@ -74,8 +91,15 @@ export default function luckysheetscrollevent(isadjust) {
        "top": (parseInt($("#luckysheet-input-box").css("top")) - 20) + "px", 
        "z-index": $("#luckysheet-input-box").css("z-index")
    }).show();
+
+    if(scrollRequestAnimationFrameIni && Store.scrollRefreshSwitch){
+        execScroll();
+        scrollRequestAnimationFrameIni = false;
+    }
+    // window.requestAnimationFrame(()=>{
+    //     luckysheetrefreshgrid(scrollLeft, scrollTop);
+    // });
    
-    luckysheetrefreshgrid(scrollLeft, scrollTop);

    $("#luckysheet-bottom-controll-row").css("left", scrollLeft + 10);

--- a/src/store/index.js
+++ b/src/store/index.js
@ -111,7 +111,8 @@ const Store = {
    functionList:null, //function list explanation
    luckysheet_function:null,
    chart_selection: {},
-    currentChart: ''
+    currentChart: '',
+    scrollRefreshSwitch:true,
 }

 export default Store;