feat(zoom feature beta): zoom in and zoom out sheet

src/config.js

@@ -52,4 +52,6 @@ export default {
     lang: 'en', //language
     plugins: [], //plugins, e.g. ['chart']
     forceCalculation:false,//强制刷新公式，公式较多会有性能问题，慎用
+    rowHeaderWidth: 46,
+    columeHeaderHeight: 20,
 }

src/controllers/handler.js

@@ -1293,8 +1293,8 @@ export default function luckysheetHandler() {
                         top = $("#luckysheet-scrollbar-y").scrollTop();
                     let x = mouse[0];
                     let y = mouse[1];
-                    let winH = $("#luckysheet-cell-main").height() - 20,
+                    let winH = $("#luckysheet-cell-main").height() - 20*Store.zoomRatio,
-                        winW = $("#luckysheet-cell-main").width() - 60;
+                        winW = $("#luckysheet-cell-main").width() - 60*Store.zoomRatio;
 
                     if (y < 0 || y > winH) {
                         let stop;
@@ -1315,6 +1315,7 @@ export default function luckysheetHandler() {
                         else {
                             sleft = left + (x - winW) / 2;
                         }
+
                         $("#luckysheet-scrollbar-x").scrollLeft(sleft);
                     }
                 }
@@ -2307,7 +2308,7 @@ export default function luckysheetHandler() {
                 cfg["rowlen"] = {};
             }
 
-            cfg["rowlen"][Store.luckysheet_rows_change_size_start[1]] = Math.ceil(size);
+            cfg["rowlen"][Store.luckysheet_rows_change_size_start[1]] = Math.ceil(size/Store.zoomRatio);
 
             if (Store.clearjfundo) {
                 Store.jfundo = [];
@@ -2373,7 +2374,7 @@ export default function luckysheetHandler() {
                 cfg["columnlen"] = {};
             }
 
-            cfg["columnlen"][Store.luckysheet_cols_change_size_start[1]] = Math.ceil(size);
+            cfg["columnlen"][Store.luckysheet_cols_change_size_start[1]] = Math.ceil(size/Store.zoomRatio);
 
             if (Store.clearjfundo) {
                 Store.jfundo = [];

src/controllers/menuButton.js

@@ -3154,19 +3154,20 @@ const menuButton = {
         Store.clearjfundo = true;
     },
     borderfix: function(d, r, c){
-        return [-1, -1, 2, 2];
+        // return [-1, -1, 2, 2];
 
         let cell = d[r][c];
         let bg = null;
         
         if(cell == null){
-            return [0, 0, 0, 0];
+            return [-1, 0, 0, -1];
         }
         else if(d[r][c].bg == null || d[r][c].bg == ""){
-            return [0, 0, 0, 0];
+            return [-1, 0, 0, -1];
         }
         else {
-            return [-1, -1, 2, 2];
+            return [-2, -1, 1, 0];
+            //return [-2, -2, 1, 0];
         }
     },
     menuButtonFocus: function(d, r, c){
@@ -3341,16 +3342,15 @@ const menuButton = {
         }
         else if(a == "bg"){
             if(foucsStatus == null){
-                foucsStatus = "#ffffff";
+                foucsStatus = null;
             }
             else{
                 foucsStatus = foucsStatus[a];
 
                 if(foucsStatus == null){
-                    foucsStatus = "#ffffff";
+                    foucsStatus = null;
                 }
-                
+                else if(foucsStatus.toString().indexOf("rgba") > -1){
-                if(foucsStatus.toString().indexOf("rgba") > -1){
                     foucsStatus = rgbTohex(foucsStatus);
                 }
             }

src/controllers/sheetmanage.js

@@ -21,7 +21,7 @@ import { createFilterOptions, labelFilterOptionState } from './filter';
 import { selectHightlightShow, selectionCopyShow } from './select';
 import Store from '../store';
 import locale from '../locale/locale';
-import { renderChartShow } from '../expendPlugins/chart/plugin'
+import { renderChartShow } from '../expendPlugins/chart/plugin';
 
 const sheetmanage = {
     generateRandomSheetIndex: function(prefix) {
@@ -600,6 +600,8 @@ const sheetmanage = {
         Store.luckysheet_selection_range = file["luckysheet_selection_range"] == null ? [] : file["luckysheet_selection_range"];
         Store.config = file["config"] == null ? {} : file["config"];
 
+        Store.zoomRatio = file["zoomRatio"] == null ? 1 : file["zoomRatio"];
+
         let r2 = Store.luckysheet_select_save[0].row[1], 
             c2 = Store.luckysheet_select_save[0].column[1];
         
@@ -758,6 +760,8 @@ const sheetmanage = {
 
         file["scrollLeft"] = $("#luckysheet-scrollbar-x").scrollLeft();//列标题
         file["scrollTop"] = $("#luckysheet-scrollbar-y").scrollTop();//行标题
+
+        file["zoomRatio"] = Store.zoomRatio;
     },
     setSheetParam: function(isload) {
         let index = this.getSheetIndex(Store.currentSheetIndex);
@@ -785,18 +789,25 @@ const sheetmanage = {
             luckysheetFreezen.freezenverticaldata = file["freezen"].vertical == null ? null : file["freezen"].vertical.freezenverticaldata;
         }
 
+        if(file["zoomRatio"]!=null){
+            Store.zoomRatio = file["zoomRatio"];
+        }
+        else{
+            Store.zoomRatio = 1;
+        }
+
         createFilterOptions(file["filter_select"], file["filter"]);
 
         Store.scrollRefreshSwitch = false;
         if(file["scrollLeft"]!=null && file["scrollLeft"]>0){
-            $("#luckysheet-scrollbar-x").scrollLeft(file["scrollLeft"]);
+            $("#luckysheet-scrollbar-x").scrollLeft(file["scrollLeft"]*Store.zoomRatio);
         }
         else{
             $("#luckysheet-scrollbar-x").scrollLeft(0);
         }
 
         if(file["scrollTop"]!=null && file["scrollTop"]>0){
-            $("#luckysheet-scrollbar-y").scrollTop(file["scrollTop"]);
+            $("#luckysheet-scrollbar-y").scrollTop(file["scrollTop"]*Store.zoomRatio);
         }
         else{
             $("#luckysheet-scrollbar-y").scrollTop(0);

src/controllers/updateCell.js

@@ -34,14 +34,22 @@ export function luckysheetupdateCell(row_index1, col_index1, d, cover, isnotfocu
     }
 
     let input_postition = {
-        "min-width": col - col_pre + 1 - 8, 
+        "min-width": col - col_pre+ 1- 8, 
-        "min-height": row - row_pre + 1 - 4,  
+        "min-height": row - row_pre + 1- 4,  
-        "max-width": winW + scrollLeft - col_pre - 20 - Store.rowHeaderWidth, 
+        
+        "max-width":winW + scrollLeft - col_pre - 20 - Store.rowHeaderWidth, 
         "max-height": winH + scrollTop - row_pre - 20 - 15 - Store.toolbarHeight - Store.infobarHeight - Store.calculatebarHeight - Store.sheetBarHeight - Store.statisticBarHeight, 
         "left": col_pre + container_offset.left + Store.rowHeaderWidth - scrollLeft - 2, 
         "top":  row_pre + container_offset.top + Store.infobarHeight + Store.toolbarHeight + Store.calculatebarHeight + Store.columeHeaderHeight - scrollTop - 2, 
     }
 
+    let inputContentScale = {
+        "transform":"scale("+ Store.zoomRatio +")",
+        "transform-origin":"left top",
+        "width":(100 / Store.zoomRatio) + "%",
+        "height":(100 / Store.zoomRatio) + "%",
+    }
+
     Store.luckysheetCellUpdate = [row_index, col_index];
     if (!isnotfocus) {
         $("#luckysheet-rich-text-editor").focus().select();
@@ -69,28 +77,51 @@ export function luckysheetupdateCell(row_index1, col_index1, d, cover, isnotfocu
     if (d[row_index] != null && d[row_index][col_index] != null) {
         let cell = d[row_index][col_index];
         let htValue = cell["ht"];
+        let leftOrigin = "left", topOrigin = "top";
         if(htValue == "0"){//0 center, 1 left, 2 right
             input_postition = { 
-                "min-width": col - col_pre + 1 - 8, 
+                "min-width": col - col_pre + 1- 8, 
-                "min-height": row - row_pre + 1 - 4, 
+                "min-height": row - row_pre + 1- 4, 
+                // "transform":"scale("+ Store.zoomRatio +")",
+                // "transform-origin":"center top",
                 "max-width": winW*2/3, 
                 "max-height": winH + scrollTop - row_pre - 20 - 15 - Store.toolbarHeight - Store.infobarHeight - Store.calculatebarHeight - Store.sheetBarHeight - Store.statisticBarHeight, 
                 "left": col_pre + container_offset.left + Store.rowHeaderWidth - scrollLeft - 2, 
                 "top":  row_pre + container_offset.top + Store.infobarHeight + Store.toolbarHeight + Store.calculatebarHeight + Store.columeHeaderHeight - scrollTop - 2, 
             }
+
+            if(Store.zoomRatio<1){
+                leftOrigin = "center";
+            }
+
             isCenter = true;
         }
         else if(htValue == "2"){
             input_postition = { 
-                "min-width": col - col_pre + 1 - 8, 
+                "min-width": col - col_pre+ 1- 8, 
-                "min-height": row - row_pre + 1 - 4, 
+                "min-height": row - row_pre + 1- 4, 
-                "max-width": col + container_offset.left - scrollLeft - 8, 
+                // "transform":"scale("+ Store.zoomRatio +")",
+                // "transform-origin":"right top",
+                "max-width": col + container_offset.left - scrollLeft  - 8, 
                 "max-height": winH + scrollTop - row_pre - 20 - 15 - Store.toolbarHeight - Store.infobarHeight - Store.calculatebarHeight - Store.sheetBarHeight - Store.statisticBarHeight, 
-                "right": winW - (container_offset.left + Store.rowHeaderWidth - scrollLeft) - col, 
+                "right": winW - (container_offset.left + (Store.rowHeaderWidth-1) - scrollLeft) - col, 
                 "top":  row_pre + container_offset.top + Store.infobarHeight + Store.toolbarHeight + Store.calculatebarHeight + Store.columeHeaderHeight - scrollTop - 2, 
             }
+
+            if(Store.zoomRatio<1){
+                leftOrigin = "right";
+            }
+        }
+
+        if(cell["vt"]=="0"){
+            topOrigin = "center";
+        }
+        else if(cell["vt"]=="2"){
+            topOrigin = "bottom";
         }
 
+        inputContentScale["transform-origin"] = leftOrigin +" " + topOrigin;
+
         
         if (!cover) {
             if(cell.f!=null){
@@ -164,6 +195,7 @@ export function luckysheetupdateCell(row_index1, col_index1, d, cover, isnotfocu
     }
 
     $("#luckysheet-input-box").css(input_postition);
+    $("#luckysheet-rich-text-editor").css(inputContentScale);
 
     formula.rangetosheet = Store.currentSheetIndex;
     formula.createRangeHightlight();

src/controllers/zoom.js

@@ -0,0 +1,19 @@
+import Store from '../store';
+import locale from '../locale/locale';
+import { replaceHtml } from '../utils/util';
+import rhchInit from '../global/rhchInit';
+import luckysheetConfigsetting from './luckysheetConfigsetting';
+
+
+export function zoomInitial(){
+    //zoom
+    Store.rowHeaderWidth = luckysheetConfigsetting.rowHeaderWidth * Store.zoomRatio;
+    Store.columeHeaderHeight = luckysheetConfigsetting.columeHeaderHeight *Store.zoomRatio;
+    $("#luckysheet-rows-h").width((Store.rowHeaderWidth-1.5));
+    $("#luckysheet-cols-h-c").height((Store.columeHeaderHeight-1.5));
+    $("#luckysheet-left-top").css({width:Store.rowHeaderWidth-1.5, height:Store.columeHeaderHeight-1.5});
+}
+
+export function zoomChange(){
+
+}

src/core.js

@@ -88,6 +88,9 @@ luckysheet.create = function (setting) {
     luckysheetConfigsetting.forceCalculation = extendsetting.forceCalculation;
     luckysheetConfigsetting.plugins = extendsetting.plugins;
 
+    luckysheetConfigsetting.rowHeaderWidth = extendsetting.rowHeaderWidth;
+    luckysheetConfigsetting.columeHeaderHeight = extendsetting.columeHeaderHeight;
+
     // Register plugins
     initPlugins(extendsetting.plugins , extendsetting.data);
 

src/global/createsheet.js

@@ -15,6 +15,7 @@ export default function luckysheetcreatesheet(colwidth, rowheight, data, cfg, ac
     Store.visibledatacolumn = [];
     Store.ch_width = 0;
     Store.rh_height = 0;
+    Store.zoomRatio = 1;
 
     if(cfg != null){
         Store.config = cfg;

src/global/getRowlen.js

@@ -94,6 +94,8 @@ function rowlenByRange(d, r1, r2, cfg) {
             }
         }
 
+        currentRowLen = currentRowLen/Store.zoomRatio;
+
         if(currentRowLen != Store.defaultrowlen){
             cfg_clone["rowlen"][r] = currentRowLen;
         }
@@ -176,6 +178,9 @@ function getMeasureText(value, ctx){
 
             //console.log(value, oneLineTextHeight, measureText.actualBoundingBoxDescent+measureText.actualBoundingBoxAscent,ctx.font);
         }
+        cache.width *= Store.zoomRatio;
+        cache.actualBoundingBoxDescent *= Store.zoomRatio;
+        cache.actualBoundingBoxAscent *= Store.zoomRatio;
         Store.measureTextCache[value + "_" + ctx.font] = cache;
 
         return cache;

src/global/refresh.js

@@ -986,14 +986,14 @@ function luckysheetrefreshgrid(scrollWidth, scrollHeight) {
         let luckysheetTableContent = $("#luckysheetTableContent").get(0).getContext("2d");
         luckysheetDrawMain(scrollWidth, scrollHeight);
     
-        luckysheetTableContent.clearRect(0, 0, 46, 20);
+        // luckysheetTableContent.clearRect(0, 0, 46, 20);
         
         luckysheetDrawgridColumnTitle(scrollWidth);
         luckysheetDrawgridRowTitle(scrollHeight);
 
         //清除canvas左上角区域 防止列标题栏序列号溢出显示
         
-        luckysheetTableContent.clearRect(0, 0, Store.rowHeaderWidth * Store.devicePixelRatio, Store.columeHeaderHeight * Store.devicePixelRatio);
+        luckysheetTableContent.clearRect(0, 0, (Store.rowHeaderWidth* Store.devicePixelRatio-1) , (Store.columeHeaderHeight* Store.devicePixelRatio-1) );
     }
 }
 

src/global/rhchInit.js

@@ -1,6 +1,8 @@
 import Store from '../store';
+import {zoomInitial} from '../controllers/zoom';
 
 export default function rhchInit(rowheight, colwidth) {
+    zoomInitial();//Zoom sheet on first load
     //行高
     if(rowheight != null){
         Store.visibledatarow = [];
@@ -19,7 +21,7 @@ export default function rhchInit(rowheight, colwidth) {
                 continue;
             }
             else {
-                Store.rh_height += rowlen + 1;
+                Store.rh_height += Math.round(rowlen*Store.zoomRatio) + 1;
             }
 
             Store.visibledatarow.push(Store.rh_height); //行的临时长度分布
@@ -60,7 +62,7 @@ export default function rhchInit(rowheight, colwidth) {
                 }
             }
 
-            Store.ch_width += firstcolumnlen + 1;
+            Store.ch_width += Math.round(firstcolumnlen*Store.zoomRatio) + 1;
 
             Store.visibledatacolumn.push(Store.ch_width);//列的临时长度分布
 

src/store/index.js

@@ -116,6 +116,8 @@ const Store = {
 
     measureTextCache:{},
     measureTextCacheTimeOut:null,
+
+    zoomRatio:1,
 }
 
 export default Store;

src/utils/util.js

@@ -621,8 +621,6 @@ function loadLinks(urls) {
 
 
 
-
-
 export {
     isJsonString,
     common_extend,