fix(frozen bug and style change): fix bug

src/controllers/freezen.js

@@ -32,9 +32,9 @@ const luckysheetFreezen = {
         let premax = pre[pre.length - 1];
         let ret = arr.slice(cutindex);
         
-        for (let i = 0; i < ret.length; i++) {
+        // for (let i = 0; i < ret.length; i++) {
-            ret[i] -= premax;
+        //     ret[i] -= premax;
-        }
+        // }
 
         return ret;
     },

src/css/luckysheet-core.css

@@ -1221,6 +1221,7 @@ div.luckysheet-sheets-add:hover, div.luckysheet-sheets-m:hover {
     outline-style: none;
     position: relative;
     -webkit-user-select: none;
+    background: #f3f3f2;
 }
 
 .luckysheet-rows-h {
@@ -1234,6 +1235,7 @@ div.luckysheet-sheets-add:hover, div.luckysheet-sheets-m:hover {
     cursor: default;
     /*height: 472px;*/
     width: 38px;
+    background: #f3f3f2;
 }
 
 .luckysheet-cols-menu-btn {
@@ -1685,7 +1687,7 @@ body:not(.ewa-ipad) .luckysheet-cols-h-cell-nosel:hover, body:not(.ewa-ipad) .lu
     /*width: 400px;*/
     /* background: #000; */
     bottom: 68px;
-    left: 10px;
+    left: 0px;
     z-index: 1000;
 }
 
@@ -4484,8 +4486,8 @@ fieldset[disabled] a.btn {
 }
 
 .luckysheet-freezebar-vertical-drop-bar {
-    width: 4px;
+    width: 2px;
-    background-color: #f3f3f2;
+    background:rgba(0, 0, 0, 0.45);
     border-width: 2px 1px 2px 2px;
     margin-top: 19px;
     top: 0px;
@@ -4493,7 +4495,7 @@ fieldset[disabled] a.btn {
 }
 
 .luckysheet-freezebar-vertical-drop-title {
-    width: 4px;
+    width: 2px;
     background: #bcbdbc;
     /*            opacity: 0.80;
             filter: alpha(opacity=80);*/
@@ -4504,10 +4506,12 @@ fieldset[disabled] a.btn {
 
 .luckysheet-freezebar-hover .luckysheet-freezebar-vertical-drop-bar, .luckysheet-freezebar-active .luckysheet-freezebar-vertical-drop-bar {
     background: #C1C1C1;
+    width: 4px;
 }
 
 .luckysheet-freezebar-hover .luckysheet-freezebar-vertical-drop-title, .luckysheet-freezebar-active .luckysheet-freezebar-vertical-drop-title {
     background: #5D88DB;
+    width: 4px;
 }
 
 
@@ -4550,9 +4554,9 @@ fieldset[disabled] a.btn {
 }
 
 .luckysheet-freezebar-horizontal-drop-bar {
-    height: 4px;
+    height: 2px;
     overflow: hidden;
-    background-color: #f3f3f2;
+    background:rgba(0, 0, 0, 0.45);
     border-width: 2px 2px 1px 2px;
     margin-left: 45px;
     left: 0px;
@@ -4561,7 +4565,7 @@ fieldset[disabled] a.btn {
 
 
 .luckysheet-freezebar-horizontal-drop-title {
-    height: 4px;
+    height: 2px;
     background: #bcbdbc;
     /*            opacity: 0.80;
             filter: alpha(opacity=80);*/
@@ -4571,10 +4575,12 @@ fieldset[disabled] a.btn {
 
 .luckysheet-freezebar-hover .luckysheet-freezebar-horizontal-drop-bar, .luckysheet-freezebar-active .luckysheet-freezebar-horizontal-drop-bar {
     background: #C1C1C1;
+    height: 4px;
 }
 
 .luckysheet-freezebar-hover .luckysheet-freezebar-horizontal-drop-title, .luckysheet-freezebar-active .luckysheet-freezebar-horizontal-drop-title {
     background: #5D88DB;
+    height: 4px;
 }
 
 

src/global/draw.js

@@ -16,19 +16,6 @@ import { getObjType, chatatABC, luckysheetfontformat } from '../utils/util';
 import Store from '../store';
 import locale from '../locale/locale';
 
-function luckysheetDrawgrid(scrollWidth, scrollHeight, drawWidth, drawHeight, offsetLeft, offsetTop) {
-    if($("#luckysheetTableContent").length == 0){
-        return;
-    }
-    
-    luckysheetDrawMain(scrollWidth, scrollHeight, drawWidth, drawHeight, offsetLeft, offsetTop);
-    
-    $("#luckysheetTableContent").get(0).getContext("2d").clearRect(0, 0, 46, 20);
-    
-    luckysheetDrawgridColumnTitle(scrollWidth, drawWidth, offsetLeft);
-    luckysheetDrawgridRowTitle(scrollHeight, drawHeight, offsetTop);
-}
-
 function luckysheetDrawgridRowTitle(scrollHeight, drawHeight, offsetTop) {
     if (scrollHeight == null) {
         scrollHeight = $("#luckysheet-cell-main").scrollTop();
@@ -65,6 +52,11 @@ function luckysheetDrawgridRowTitle(scrollHeight, drawHeight, offsetTop) {
         dataset_row_ed = Store.visibledatarow.length - 1;
     }
 
+    luckysheetTableContent.save();
+    luckysheetTableContent.beginPath();
+    luckysheetTableContent.rect(0, offsetTop* Store.devicePixelRatio, Store.rowHeaderWidth * Store.devicePixelRatio-1, drawHeight-2);
+    luckysheetTableContent.clip();
+
     let end_r, start_r;
 
     for (let r = dataset_row_st; r <= dataset_row_ed; r++) {
@@ -85,6 +77,16 @@ function luckysheetDrawgridRowTitle(scrollHeight, drawHeight, offsetTop) {
 
         }
         else {
+
+            luckysheetTableContent.fillStyle = "#ffffff";
+            luckysheetTableContent.fillRect(
+                0,
+                (start_r + offsetTop) * Store.devicePixelRatio, 
+                Store.rowHeaderWidth * Store.devicePixelRatio-1,
+                (end_r - start_r - 1) * Store.devicePixelRatio
+            )
+            luckysheetTableContent.fillStyle = "#000000";
+
             //行标题栏序列号
             let textMetrics = getMeasureText(r+1, luckysheetTableContent); 
             //luckysheetTableContent.measureText(r + 1);
@@ -95,7 +97,23 @@ function luckysheetDrawgridRowTitle(scrollHeight, drawHeight, offsetTop) {
             luckysheetTableContent.fillText(r + 1, horizonAlignPos, verticalAlignPos);
         }
 
-        //行标题栏横线
+        //vertical
+        luckysheetTableContent.beginPath();
+            luckysheetTableContent.moveTo(
+                (Store.rowHeaderWidth - 2 + 0.5) * Store.devicePixelRatio,
+                Store.devicePixelRatio * (start_r + offsetTop - 2)
+            );
+            luckysheetTableContent.lineTo(
+                (Store.rowHeaderWidth - 2 + 0.5) * Store.devicePixelRatio,
+                Store.devicePixelRatio * (end_r + offsetTop - 2)
+            );
+            luckysheetTableContent.lineWidth = Store.devicePixelRatio;
+
+            luckysheetTableContent.strokeStyle = luckysheetdefaultstyle.strokeStyle;
+            luckysheetTableContent.stroke();
+            luckysheetTableContent.closePath();
+
+        //行标题栏横线,horizen
         luckysheetTableContent.beginPath();
         luckysheetTableContent.moveTo(
             -1,
@@ -105,30 +123,32 @@ function luckysheetDrawgridRowTitle(scrollHeight, drawHeight, offsetTop) {
             (Store.rowHeaderWidth - 1) * Store.devicePixelRatio,
             (end_r + offsetTop - 2 + 0.5) * Store.devicePixelRatio
         );
-        luckysheetTableContent.lineWidth = Store.devicePixelRatio;
+        // luckysheetTableContent.lineWidth = Store.devicePixelRatio;
-        luckysheetTableContent.strokeStyle = luckysheetdefaultstyle.strokeStyle;
+        // luckysheetTableContent.strokeStyle = luckysheetdefaultstyle.strokeStyle;
         luckysheetTableContent.closePath();
         luckysheetTableContent.stroke();
     }
 
     //行标题栏竖线
-    luckysheetTableContent.beginPath();
+    // luckysheetTableContent.beginPath();
-    luckysheetTableContent.moveTo(
+    // luckysheetTableContent.moveTo(
-        (Store.rowHeaderWidth - 2 + 0.5) * Store.devicePixelRatio,
+    //     (Store.rowHeaderWidth - 2 + 0.5) * Store.devicePixelRatio,
-        (offsetTop - 1) * Store.devicePixelRatio
+    //     (offsetTop - 1) * Store.devicePixelRatio
-    );
+    // );
-    luckysheetTableContent.lineTo(
+    // luckysheetTableContent.lineTo(
-        (Store.rowHeaderWidth - 2 + 0.5) * Store.devicePixelRatio,
+    //     (Store.rowHeaderWidth - 2 + 0.5) * Store.devicePixelRatio,
-        (Store.rh_height + offsetTop) * Store.devicePixelRatio
+    //     (Store.rh_height + offsetTop) * Store.devicePixelRatio
-    );
+    // );
-    luckysheetTableContent.lineWidth = Store.devicePixelRatio;
+    // luckysheetTableContent.lineWidth = Store.devicePixelRatio;
-    luckysheetTableContent.strokeStyle = luckysheetdefaultstyle.strokeStyle;
+    // luckysheetTableContent.strokeStyle = luckysheetdefaultstyle.strokeStyle;
-    luckysheetTableContent.closePath();
+    // luckysheetTableContent.closePath();
-    luckysheetTableContent.stroke();
+    // luckysheetTableContent.stroke();
 
 
     //清除canvas左上角区域 防止列标题栏序列号溢出显示
-    luckysheetTableContent.clearRect(0, 0, Store.rowHeaderWidth * Store.devicePixelRatio, Store.columeHeaderHeight * Store.devicePixelRatio);
+    // luckysheetTableContent.clearRect(0, 0, Store.rowHeaderWidth * Store.devicePixelRatio, Store.columeHeaderHeight * Store.devicePixelRatio);
+
+    luckysheetTableContent.restore();
 }
 
 function luckysheetDrawgridColumnTitle(scrollWidth, drawWidth, offsetLeft) {
@@ -168,6 +188,11 @@ function luckysheetDrawgridColumnTitle(scrollWidth, drawWidth, offsetLeft) {
         dataset_col_ed = Store.visibledatacolumn.length - 1;
     }
     
+    luckysheetTableContent.save();
+    luckysheetTableContent.beginPath();
+    luckysheetTableContent.rect(offsetLeft* Store.devicePixelRatio, 0, drawWidth, Store.columeHeaderHeight * Store.devicePixelRatio-1);
+    luckysheetTableContent.clip();
+
     let end_c, start_c;
 
     for (let c = dataset_col_st; c <= dataset_col_ed; c++) {
@@ -184,6 +209,15 @@ function luckysheetDrawgridColumnTitle(scrollWidth, drawWidth, offsetLeft) {
             break;
         }
 
+        luckysheetTableContent.fillStyle = "#ffffff";
+        luckysheetTableContent.fillRect(
+            (start_c + offsetLeft - 1) * Store.devicePixelRatio, 
+            0, 
+            (end_c - start_c) * Store.devicePixelRatio,
+            Store.columeHeaderHeight * Store.devicePixelRatio-1
+        )
+        luckysheetTableContent.fillStyle = "#000000";
+
         //列标题栏序列号
         let abc = chatatABC(c);
         let textMetrics = getMeasureText(abc, luckysheetTableContent);
@@ -194,7 +228,7 @@ function luckysheetDrawgridColumnTitle(scrollWidth, drawWidth, offsetLeft) {
         
         luckysheetTableContent.fillText(abc, horizonAlignPos, verticalAlignPos);
 
-        //列标题栏竖线
+        //列标题栏竖线 vertical
         luckysheetTableContent.beginPath();
         luckysheetTableContent.moveTo(
             (end_c + offsetLeft - 2 + 0.5) * Store.devicePixelRatio,
@@ -208,25 +242,43 @@ function luckysheetDrawgridColumnTitle(scrollWidth, drawWidth, offsetLeft) {
         luckysheetTableContent.strokeStyle = luckysheetdefaultstyle.strokeStyle;
         luckysheetTableContent.closePath();
         luckysheetTableContent.stroke();
+
+        //horizen
+        luckysheetTableContent.beginPath();
+        luckysheetTableContent.moveTo(
+            Store.devicePixelRatio * (start_c + offsetLeft - 1), 
+            (Store.columeHeaderHeight - 2 + 0.5) * Store.devicePixelRatio
+        );
+        luckysheetTableContent.lineTo(
+            Store.devicePixelRatio * (end_c + offsetLeft - 1), 
+            (Store.columeHeaderHeight - 2 + 0.5) * Store.devicePixelRatio
+        );
+        // luckysheetTableContent.lineWidth = Store.devicePixelRatio;
+
+        // luckysheetTableContent.strokeStyle = luckysheetdefaultstyle.strokeStyle;        
+        luckysheetTableContent.stroke();
+        luckysheetTableContent.closePath();
     }
 
     //列标题栏横线
-    luckysheetTableContent.beginPath();
+    // luckysheetTableContent.beginPath();
-    luckysheetTableContent.moveTo(
+    // luckysheetTableContent.moveTo(
-        (offsetLeft - 1) * Store.devicePixelRatio,
+    //     (offsetLeft - 1) * Store.devicePixelRatio,
-        (Store.columeHeaderHeight - 2 + 0.5) * Store.devicePixelRatio
+    //     (Store.columeHeaderHeight - 2 + 0.5) * Store.devicePixelRatio
-    );
+    // );
-    luckysheetTableContent.lineTo(
+    // luckysheetTableContent.lineTo(
-        (Store.ch_width + offsetLeft - 2) * Store.devicePixelRatio,
+    //     (Store.ch_width + offsetLeft - 2) * Store.devicePixelRatio,
-        (Store.columeHeaderHeight - 2 + 0.5) * Store.devicePixelRatio
+    //     (Store.columeHeaderHeight - 2 + 0.5) * Store.devicePixelRatio
-    );
+    // );
-    luckysheetTableContent.lineWidth = Store.devicePixelRatio;
+    // luckysheetTableContent.lineWidth = Store.devicePixelRatio;
-    luckysheetTableContent.strokeStyle = luckysheetdefaultstyle.strokeStyle;
+    // luckysheetTableContent.strokeStyle = luckysheetdefaultstyle.strokeStyle;
-    luckysheetTableContent.closePath();
+    // luckysheetTableContent.closePath();
-    luckysheetTableContent.stroke();
+    // luckysheetTableContent.stroke();
 
     //清除canvas左上角区域 防止列标题栏序列号溢出显示
-    luckysheetTableContent.clearRect(0, 0, Store.rowHeaderWidth * Store.devicePixelRatio, Store.columeHeaderHeight * Store.devicePixelRatio);
+    // luckysheetTableContent.clearRect(0, 0, Store.rowHeaderWidth * Store.devicePixelRatio, Store.columeHeaderHeight * Store.devicePixelRatio);
+
+    luckysheetTableContent.restore();
 }
 
 function luckysheetDrawMain(scrollWidth, scrollHeight, drawWidth, drawHeight, offsetLeft, offsetTop, columnOffsetCell, rowOffsetCell, mycanvas) {
@@ -2057,7 +2109,6 @@ function cellOverflow_colIn(map, r, c, col_st, col_ed){
 }
 
 export {
-    luckysheetDrawgrid,
     luckysheetDrawgridRowTitle,
     luckysheetDrawgridColumnTitle,
     luckysheetDrawMain,

src/global/refresh.js

@@ -4,7 +4,6 @@ import editor from './editor';
 import { setcellvalue } from './setdata';
 import { computeRowlenArr } from './getRowlen';
 import { 
-    luckysheetDrawgrid, 
     luckysheetDrawMain, 
     luckysheetDrawgridRowTitle, 
     luckysheetDrawgridColumnTitle 
@@ -875,19 +874,20 @@ function luckysheetrefreshgrid(scrollWidth, scrollHeight) {
             );
 
             //标题
+            luckysheetDrawgridColumnTitle(freezen_vertical_scrollTop, freezen_vertical_px, Store.rowHeaderWidth);
             luckysheetDrawgridColumnTitle(
                 scrollWidth + freezen_vertical_px - freezen_vertical_scrollTop, 
                 drawWidth - freezen_vertical_px + freezen_vertical_scrollTop, 
                 freezen_vertical_px - freezen_vertical_scrollTop + Store.rowHeaderWidth
             );
-            luckysheetDrawgridColumnTitle(freezen_vertical_scrollTop, freezen_vertical_px, Store.rowHeaderWidth);
             
+            luckysheetDrawgridRowTitle(freezen_horizon_scrollTop, freezen_horizon_px, Store.columeHeaderHeight);
             luckysheetDrawgridRowTitle(
                 scrollHeight + freezen_horizon_px - freezen_horizon_scrollTop, 
                 drawHeight - freezen_horizon_px + freezen_horizon_scrollTop, 
                 freezen_horizon_px - freezen_horizon_scrollTop + Store.columeHeaderHeight
             );
-            luckysheetDrawgridRowTitle(freezen_horizon_scrollTop, freezen_horizon_px, Store.columeHeaderHeight);
+           
         }
         else if (luckysheetFreezen.freezenhorizontaldata != null) {
             freezen_horizon_px = luckysheetFreezen.freezenhorizontaldata[0];
@@ -916,12 +916,13 @@ function luckysheetrefreshgrid(scrollWidth, scrollHeight) {
         
             luckysheetDrawgridColumnTitle(scrollWidth, drawWidth, null);
             
+            luckysheetDrawgridRowTitle(freezen_horizon_scrollTop, freezen_horizon_px, Store.columeHeaderHeight);
             luckysheetDrawgridRowTitle(
                 scrollHeight + freezen_horizon_px - freezen_horizon_scrollTop, 
                 drawHeight - freezen_horizon_px + freezen_horizon_scrollTop, 
                 freezen_horizon_px - freezen_horizon_scrollTop + Store.columeHeaderHeight
             );
-            luckysheetDrawgridRowTitle(freezen_horizon_scrollTop, freezen_horizon_px, Store.columeHeaderHeight);
+            
         }
         else if (luckysheetFreezen.freezenverticaldata != null) {
             freezen_vertical_px = luckysheetFreezen.freezenverticaldata[0];
@@ -950,16 +951,26 @@ function luckysheetrefreshgrid(scrollWidth, scrollHeight) {
             
             luckysheetDrawgridRowTitle(scrollHeight, drawHeight, null);
             
+            luckysheetDrawgridColumnTitle(freezen_vertical_scrollTop, freezen_vertical_px, Store.rowHeaderWidth);
             luckysheetDrawgridColumnTitle(
                 scrollWidth + freezen_vertical_px - freezen_vertical_scrollTop, 
                 drawWidth - freezen_vertical_px + freezen_vertical_scrollTop, 
                 freezen_vertical_px - freezen_vertical_scrollTop + Store.rowHeaderWidth
             );
-            luckysheetDrawgridColumnTitle(freezen_vertical_scrollTop, freezen_vertical_px, Store.rowHeaderWidth);
+            
         }
     }
     else {
-        luckysheetDrawgrid(scrollWidth, scrollHeight);
+        if($("#luckysheetTableContent").length == 0){
+            return;
+        }
+
+        luckysheetDrawMain(scrollWidth, scrollHeight);
+    
+        $("#luckysheetTableContent").get(0).getContext("2d").clearRect(0, 0, 46, 20);
+        
+        luckysheetDrawgridColumnTitle(scrollWidth);
+        luckysheetDrawgridRowTitle(scrollHeight);
     }
 }
 

src/global/scroll.js

@@ -100,7 +100,7 @@ export default function luckysheetscrollevent(isadjust) {
     luckysheetrefreshgrid(scrollLeft, scrollTop);
     
 
-    $("#luckysheet-bottom-controll-row").css("left", scrollLeft + 10);
+    $("#luckysheet-bottom-controll-row").css("left", scrollLeft);
 
     //有选区且有冻结时，滚动适应
     if(luckysheetFreezen.freezenhorizontaldata != null || luckysheetFreezen.freezenverticaldata != null){