From 02d26557a52b7cef0cb3b2b8d14996eb29fafa51 Mon Sep 17 00:00:00 2001 From: wbfsa Date: Sun, 2 Aug 2020 20:21:04 +0800 Subject: [PATCH] fix(change sheet scroll bar fix): change sheet scroll bar dont restore --- src/controllers/conditionformat.js | 2 +- src/controllers/handler.js | 24 ++++---- src/controllers/mobile.js | 90 +++++++++++++++++++++++++----- src/controllers/select.js | 2 +- src/controllers/sheetmanage.js | 25 ++++++++- src/css/luckysheet-core.css | 4 +- src/global/draw.js | 2 + src/global/scroll.js | 26 ++++++++- src/store/index.js | 3 +- 9 files changed, 144 insertions(+), 34 deletions(-) diff --git a/src/controllers/conditionformat.js b/src/controllers/conditionformat.js index 26165ecea..86adbc070 100644 --- a/src/controllers/conditionformat.js +++ b/src/controllers/conditionformat.js @@ -2288,7 +2288,7 @@ const conditionformat = { -
设置格式：
${textCellColorHtml}`; +
${conditionformat_Text.setFormat}:
${textCellColorHtml}`; break; case 2: //仅对排名靠前或靠后的数值设置格式 ruleExplainHtml = `
${conditionformat_Text.ruleTypeItem3_title}：
diff --git a/src/controllers/handler.js b/src/controllers/handler.js index 9979cd62d..ffe6e848e 100644 --- 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(); diff --git a/src/controllers/mobile.js b/src/controllers/mobile.js index 6f0c1f608..1b8855290 100644 --- 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(); }) diff --git a/src/controllers/select.js b/src/controllers/select.js index ebe2fc58b..2ab6b17cb 100644 --- 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("
" + rowl.toString().split("").join("
") + "
"+locale_info.row+"
"); + $("#luckysheet-row-count-show").css({ "left": leftv, "top": topv, "display": "block","width":"11px" }).html("
" + rowl.toString().split("").join("
") + "
"+locale_info.row+"
"); } else { $("#luckysheet-row-count-show").hide(); diff --git a/src/controllers/sheetmanage.js b/src/controllers/sheetmanage.js index ee1d4c528..59a04dd44 100644 --- 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"]; diff --git a/src/css/luckysheet-core.css b/src/css/luckysheet-core.css index 0ef423c89..5cb0e1d9d 100644 --- 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; diff --git a/src/global/draw.js b/src/global/draw.js index 7f0fde37a..15463cac8 100644 --- 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); //参数未定义处理 diff --git a/src/global/scroll.js b/src/global/scroll.js index 1b582e8d6..f53c9040b 100644 --- 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); diff --git a/src/store/index.js b/src/store/index.js index 685b56f8a..8ae7bb9a4 100644 --- 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; \ No newline at end of file