Merge pull request #610 from sunjingwu/autoHeightWidth

Auto row height
4 years ago · fae9c00d8a
5 changed files with 158 additions and 24 deletions
--- a/.gitignore
+++ b/.gitignore
@ -2,4 +2,6 @@
 node_modules
 package-lock.json
 dist
-docs/.vuepress/dist
+docs/.vuepress/dist
+
+.idea
--- a/src/global/api.js
+++ b/src/global/api.js
@ -1407,7 +1407,7 @@ export function showColumn(startIndex, endIndex, options = {}) {


 /**
- * 设置指定行的高度
+ * 设置指定行的高度。优先级最高，高于默认行高和用户自定义行高。
 * @param {Object} rowInfo 行数和高度对应关系
 * @param {Object} options 可选参数
 * @param {Number} options.order 工作表索引；默认值为当前工作表索引
@ -1438,8 +1438,12 @@ export function setRowHeight(rowInfo, options = {}) {
        if(parseInt(r) >= 0){
            let len = rowInfo[r];

-            if(Number(len) >= 0){
-                cfg['rowlen'][parseInt(r)] = Number(len);
+            if (len === 'auto') {
+                cfg['rowlen'][parseInt(r)] = len
+            } else {
+                if(Number(len) >= 0){
+                    cfg['rowlen'][parseInt(r)] = Number(len);
+                }
            }
        }
    }
@ -1491,8 +1495,12 @@ export function setColumnWidth(columnInfo, options = {}) {
        if(parseInt(c) >= 0){
            let len = columnInfo[c];

-            if(Number(len) >= 0){
-                cfg['columnlen'][parseInt(c)] = Number(len);
+            if (len === 'auto') {
+                cfg['columnlen'][parseInt(c)] = len
+            } else {
+                if(Number(len) >= 0){
+                    cfg['columnlen'][parseInt(c)] = Number(len);
+                }
            }
        }
    }
@ -6816,4 +6824,4 @@ export function checkTheStatusOfTheSelectedCells(type,status){
    })

    return flag;
-}
+}
--- a/src/global/getRowlen.js
+++ b/src/global/getRowlen.js
@ -1,12 +1,21 @@
-import { luckysheetfontformat } from '../utils/util';
+import {luckysheetfontformat} from '../utils/util';
 import menuButton from '../controllers/menuButton';
-import { checkstatusByCell } from './getdata';
-import { colLocationByIndex } from './location';
-import { hasChinaword, isRealNull,checkWordByteLength } from './validate';
-import { isInlineStringCell } from '../controllers/inlineString';
+import {checkstatusByCell} from './getdata';
+import {colLocationByIndex,colSpanLocationByIndex} from './location';
+import {checkWordByteLength, hasChinaword, isRealNull} from './validate';
+import {isInlineStringCell} from '../controllers/inlineString';
+
 import Store from '../store';

-//计算范围行高
+/**
+ * 计算范围行高
+ *
+ * @param d 原始数据
+ * @param r1 起始行
+ * @param r2 截至行
+ * @param cfg 配置
+ * @returns 计算后的配置
+ */
 function rowlenByRange(d, r1, r2, cfg) {
    let cfg_clone = $.extend(true, {}, cfg);
    if(cfg_clone["rowlen"] == null){
@ -87,6 +96,95 @@ function rowlenByRange(d, r1, r2, cfg) {
    return cfg_clone;
 }

+//根据内容计算行高
+function computeRowlenByContent(d, r) {
+    let currentRowLen = 0;
+
+    let canvas = $("#luckysheetTableContent").get(0).getContext("2d");
+    canvas.textBaseline = 'top'; //textBaseline以top计算
+
+    for(let c = 0; c < d[r].length; c++){
+        let cell = d[r][c];
+
+        if (cell == null) {
+            continue;
+        }
+
+        if (cell.mc != null) {
+            if (1 !== cell.mc.rs) {
+                continue;
+            }
+        }
+
+
+        if(cell != null && (cell.v != null || isInlineStringCell(cell)) ){
+            let cellWidth = computeCellWidth(cell, c);
+
+            let textInfo = getCellTextInfo(cell, canvas,{
+                r:r,
+                c:c,
+                cellWidth:cellWidth
+            });
+
+            let computeRowlen = 0;
+
+            if (textInfo != null) {
+                computeRowlen = textInfo.textHeightAll + 2;
+            }
+
+            //比较计算高度和当前高度取最大高度
+            if (computeRowlen > currentRowLen) {
+                currentRowLen = computeRowlen;
+            }
+        }
+    }
+
+    return currentRowLen;
+}
+
+function computeCellWidth(cell, col_index) {
+    let colLocationArr = colLocationByIndex(col_index);
+    if (cell.mc && cell.mc.c !== cell.mc.cs) {
+        colLocationArr = colSpanLocationByIndex(col_index, cell.mc.cs);
+    }
+
+    return colLocationArr[1] - colLocationArr[0] - 2;
+}
+
+function computeColWidthByContent(d, c, rh) {
+    let currentColLen = 0;
+    let rowlenArr = computeRowlenArr(rh, c)
+
+    let canvas = $("#luckysheetTableContent").get(0).getContext("2d");
+    canvas.textBaseline = 'top'; //textBaseline以top计算
+
+    for (var i = 0; i < d.length; i++) {
+        var cell = d[i][c]
+
+        if (cell != null && (cell.v != null || isInlineStringCell(cell))) {
+            let cellHeight = rowlenArr[c];
+            let textInfo = getCellTextInfo(cell, canvas, {
+                r: i,
+                c: c,
+                cellHeight: cellHeight
+            });
+
+            let computeCollen = 0;
+
+            if (textInfo != null) {
+                computeCollen = textInfo.textWidthAll + 2;
+            }
+
+            //比较计算高度和当前高度取最大高度
+            if (computeCollen > currentColLen) {
+                currentColLen = computeCollen;
+            }
+        }
+    }
+
+    return currentColLen;
+}
+
 //计算表格行高数组
 function computeRowlenArr(rowHeight, cfg) {
    let rowlenArr = [];
@ -1619,9 +1717,11 @@ function drawLineInfo(wordGroup, cancelLine,underLine,option){


 export {
+    computeColWidthByContent,
    rowlenByRange,
+    computeRowlenByContent,
    computeRowlenArr,
    getCellTextSplitArr,
    getMeasureText,
    getCellTextInfo
-}
+}
--- a/src/global/location.js
+++ b/src/global/location.js
@ -24,12 +24,12 @@ function rowLocation(y) {
    else if (row_index == -1 && y <= 0) {
        row_index = 0;
    }
-    
+
    return rowLocationByIndex(row_index);
 }

 function colLocationByIndex(col_index){
-    let col = 0, col_pre = 0;            
+    let col = 0, col_pre = 0;
    col = Store.visibledatacolumn[col_index];

    if (col_index == 0) {
@ -42,6 +42,20 @@ function colLocationByIndex(col_index){
    return [col_pre, col, col_index];
 }

+function colSpanLocationByIndex(col_index, span){
+    let col = 0, col_pre = 0;
+    col = Store.visibledatacolumn[col_index + span - 1];
+
+    if (col_index == 0) {
+        col_pre = 0;
+    }
+    else {
+        col_pre = Store.visibledatacolumn[col_index - 1];
+    }
+
+    return [col_pre, col, col_index];
+}
+
 function colLocation(x) {
    let col_index = luckysheet_searcharray(Store.visibledatacolumn, x);

@ -57,7 +71,7 @@ function colLocation(x) {

 function mouseposition(x, y) {
    let container_offset = $("#" + Store.container).offset();
-    
+
    let newX = x - container_offset.left - Store.rowHeaderWidth,
        newY = y - container_offset.top - Store.infobarHeight - Store.toolbarHeight - Store.calculatebarHeight - Store.columnHeaderHeight;

@ -68,6 +82,7 @@ export {
    rowLocationByIndex,
    rowLocation,
    colLocationByIndex,
+    colSpanLocationByIndex,
    colLocation,
    mouseposition,
-}
+}
--- a/src/global/rhchInit.js
+++ b/src/global/rhchInit.js
@ -1,4 +1,5 @@
 import Store from '../store';
+import { computeRowlenByContent,computeColWidthByContent } from './getRowlen';
 import luckysheetConfigsetting from '../controllers/luckysheetConfigsetting';

 export default function rhchInit(rowheight, colwidth) {
@ -19,19 +20,23 @@ export default function rhchInit(rowheight, colwidth) {
                Store.visibledatarow.push(Store.rh_height);
                continue;
            }
-            
+
+            // 自动行高计算
+            if (rowlen === 'auto') {
+                rowlen = computeRowlenByContent(Store.flowdata, r);
+            }
            Store.rh_height += Math.round((rowlen + 1) * Store.zoomRatio);

            Store.visibledatarow.push(Store.rh_height); //行的临时长度分布
        }

        // 如果增加行和回到顶部按钮隐藏，则减少底部空白区域，但是预留足够空间给单元格下拉按钮
-        if(!luckysheetConfigsetting.enableAddRow && !luckysheetConfigsetting.enableAddBackTop){
+        if (!luckysheetConfigsetting.enableAddRow && !luckysheetConfigsetting.enableAddBackTop) {
            Store.rh_height += 29;
-        }else{
+        } else {
            Store.rh_height += 80;  //最底部增加空白
        }
-       
+
    }

    //列宽
@ -71,6 +76,10 @@ export default function rhchInit(rowheight, colwidth) {
                continue;
            }

+            // 自动行高计算
+            if (firstcolumnlen === 'auto') {
+                firstcolumnlen = computeColWidthByContent(Store.flowdata, c, rowheight);
+            }
            Store.ch_width += Math.round((firstcolumnlen + 1)*Store.zoomRatio);

            Store.visibledatacolumn.push(Store.ch_width);//列的临时长度分布
@ -79,7 +88,7 @@ export default function rhchInit(rowheight, colwidth) {
            //     maxColumnlen = firstcolumnlen + 1;
            // }
        }
-        
+
        // Store.ch_width += 120;
        Store.ch_width += maxColumnlen;
    }
@ -93,4 +102,4 @@ export function zoomSetting(){
    $("#luckysheet-rows-h").width((Store.rowHeaderWidth-1.5));
    $("#luckysheet-cols-h-c").height((Store.columnHeaderHeight-1.5));
    $("#luckysheet-left-top").css({width:Store.rowHeaderWidth-1.5, height:Store.columnHeaderHeight-1.5});
-}
+}