style(inlinestr program): improve drawmain

src/controllers/menuButton.js

@@ -2905,19 +2905,19 @@ const menuButton = {
                         foucsStatus = "0";
                     }
                     else if(foucsStatus == "angleup"){
-                        foucsStatus = "2";
+                        foucsStatus = "1";
                     }
                     else if(foucsStatus == "angledown"){
-                        foucsStatus = "1";
+                        foucsStatus = "2";
                     }
                     else if(foucsStatus == "vertical"){
                         foucsStatus = "3";
                     }
                     else if(foucsStatus == "rotation-up"){
-                        foucsStatus = "5";
+                        foucsStatus = "4";
                     }
                     else if(foucsStatus == "rotation-down"){
-                        foucsStatus = "4";
+                        foucsStatus = "5";
                     }
                 }
 
@@ -3289,19 +3289,19 @@ const menuButton = {
                 let $t = $("luckysheet-icon-rotation"), itemvalue = "none";
                 
                 if(foucsStatus == "1"){
-                    itemvalue = "angledown";
+                    itemvalue = "angleup";
                 }
                 else if(foucsStatus == "2"){
-                    itemvalue = "angleup";
+                    itemvalue = "angledown";
                 }
                 else if(foucsStatus == "3"){
                     itemvalue = "vertical";
                 }
                 else if(foucsStatus == "4"){
-                    itemvalue = "rotation-down";
+                    itemvalue = "rotation-up";
                 }
                 else if(foucsStatus == "5"){
-                    itemvalue = "rotation-up";
+                    itemvalue = "rotation-down";
                 }
 
                 _this.focus($menuButton, itemvalue);
@@ -3312,8 +3312,8 @@ const menuButton = {
             }
         }
     },
-    checkstatus: function(d, r, c, a){
-        let foucsStatus = d[r][c];
+    checkstatusByCell:function(cell, a){
+        let foucsStatus =cell;
         let tf = {"bl":1, "it":1 , "ff":1, "cl":1};
 
         if(a in tf){
@@ -3454,9 +3454,24 @@ const menuButton = {
                 }
             }
         }
+        else if(a == "rt"){
+            if(foucsStatus == null){
+                foucsStatus = null;
+            }
+            else{
+                foucsStatus = foucsStatus[a];
+                if(foucsStatus == null){
+                    foucsStatus = null;
+                }
+            }
+        }
 
         return foucsStatus;
     },
+    checkstatus: function(d, r, c, a){
+        let foucsStatus = d[r][c];
+        return this.checkstatusByCell(foucsStatus, a);
+    },
     setLineDash: function(canvasborder, type, hv, m_st, m_ed, line_st, line_ed){
     	let borderType = {
             "0": "none", 

src/controllers/resize.js

@@ -24,7 +24,7 @@ export default function luckysheetsizeauto(isRefreshCanvas=true) {
     }
     else {
         $("#" + Store.container).find(".luckysheet-wa-editor, .luckysheet-share-logo").show();
-        Store.toolbarHeight = 35;
+        Store.toolbarHeight = 61;
     }
 
     if (!luckysheetConfigsetting.showsheetbar) {

src/global/draw.js

@@ -8,7 +8,7 @@ import { luckysheet_searcharray } from '../controllers/sheetSearch';
 import { dynamicArrayCompute } from './dynamicArray';
 import browser from './browser';
 import { isRealNull, isRealNum } from './validate';
-import { getCellTextSplitArr,getMeasureText } from './getRowlen';
+import { getCellTextSplitArr,getMeasureText,getCellTextInfo } from './getRowlen';
 import { getcellvalue } from './getdata';
 import { getBorderInfoCompute } from './border';
 import { getSheetIndex } from '../methods/get';
@@ -1201,7 +1201,7 @@ let cellRender1 = function(r, c, start_r, start_c, end_r, end_c, value, luckyshe
     if(checksCF != null && checksCF["cellColor"] != null){ //若单元格有条件格式 背景颜色
         fillStyle = checksCF["cellColor"];
     }
-
+    luckysheetTableContent.textBaseline = 'top';
     if(fillStyle==null){
         luckysheetTableContent.fillStyle = "#FFFFFF";
     }
@@ -1465,16 +1465,99 @@ let cellRender1 = function(r, c, start_r, start_c, end_r, end_c, value, luckyshe
             }
         }
 
+        let pos_x = start_c + offsetLeft;
+        let pos_y = start_r + offsetTop + 1;
 
-        cellOverflowRender(
-            cellOverflow_colInObj.rowIndex,
-            cellOverflow_colInObj.colIndex,
-            cellOverflow_colInObj.stc,
-            cellOverflow_colInObj.edc,
+        luckysheetTableContent.save();
+        luckysheetTableContent.beginPath();
+        luckysheetTableContent.rect(pos_x , pos_y, cellWidth , cellHeight );
+        luckysheetTableContent.clip();
+        luckysheetTableContent.scale(Store.zoomRatio,Store.zoomRatio);
+
+        // let horizonAlignPos = (pos_x + space_width) ; //默认为1，左对齐
+        // if(horizonAlign == "0"){ //居中对齐
+        //     horizonAlignPos = (pos_x + cellWidth / 2)  - (textMetrics / 2);
+        // }
+        // else if(horizonAlign == "2"){ //右对齐
+        //     horizonAlignPos = (pos_x + cellWidth - space_width)  - textMetrics;
+        // }
+        
+
+        // let verticalAlignPos = (pos_y + cellHeight - space_height)  - oneLineTextHeight; //默认为2，下对齐
+        // if(verticalAlign == "0"){ //居中对齐 
+        //     verticalAlignPos = (pos_y + cellHeight / 2)  - (oneLineTextHeight / 2);
+            
+        //     verticalAlignPos_text = (pos_y + cellHeight / 2) ;
+        // }
+        // else if(verticalAlign == "1"){ //上对齐
+        //     verticalAlignPos = (pos_y + space_height) ;
+            
+        //     verticalAlignPos_text = (pos_y + space_height) ;
+        // }
+
+        // verticalAlignPos = verticalAlignPos/Store.zoomRatio;
+        // horizonAlignPos = horizonAlignPos/Store.zoomRatio;
+
+        let textInfo = getCellTextInfo(cell , luckysheetTableContent, {
+            cellWidth:cellWidth,
+            cellHeight:cellHeight,
+            space_width:space_width,
+            space_height:space_height
+        });
+
+        //若单元格有条件格式图标集
+        if(checksCF != null && checksCF["icons"] != null && textInfo.type=="plain"){
+            let l = checksCF["icons"]["left"];
+            let t = checksCF["icons"]["top"];
+            
+            let value = textInfo.values[0]
+            let horizonAlignPos = pos_x +  value.left;
+            let verticalAlignPos = pos_y + value.top;
+
+            verticalAlignPos = verticalAlignPos/Store.zoomRatio;
+            horizonAlignPos = horizonAlignPos/Store.zoomRatio;
+
+            luckysheetTableContent.drawImage(
+                luckysheet_CFiconsImg, 
+                l * 42, 
+                t * 32, 
+                32, 
+                32, 
+                pos_x/Store.zoomRatio , 
+                verticalAlignPos,  
+                textContent.textHeightAll/Store.zoomRatio, 
+                textContent.textHeightAll/Store.zoomRatio
+            );
+            
+            if(horizonAlign != "0" && horizonAlign != "2"){ //左对齐时 文本渲染空出一个图标的距离
+                horizonAlignPos = horizonAlignPos + textContent.textHeightAll/Store.zoomRatio;
+            }
+        }
+
+        //单元格 文本颜色
+        luckysheetTableContent.fillStyle = menuButton.checkstatus(Store.flowdata, r, c , "fc");
+        
+        //若单元格有交替颜色 文本颜色
+        if(checksAF != null && checksAF[0] != null){ 
+            luckysheetTableContent.fillStyle = checksAF[0];
+        }
+        //若单元格有条件格式 文本颜色
+        if(checksCF != null && checksCF["textColor"] != null){ 
+            luckysheetTableContent.fillStyle = checksCF["textColor"];
+        }
+
+
+        cellTextRender(
+            textInfo,
             luckysheetTableContent,
-            scrollHeight,
-            scrollWidth,offsetLeft,offsetTop,af_compute, cf_compute
+            {
+                pos_x:pos_x,
+                pos_y:pos_y,
+            }
         );
+
+
+        luckysheetTableContent.restore();
     }
 
     if(cellOverflow_bd_r_render){
@@ -2748,6 +2831,33 @@ function cellOverflow_colIn(map, r, c, col_st, col_ed){
     }
 }
 
+function cellTextRender(textInfo, ctx, option){
+    let values = textInfo.values;
+    let pos_x = option.pos_x, pos_y = option.pos_y;
+    if(values==null){
+        return;
+    }
+    console.log(textInfo, pos_x, pos_y, values[0].width, values[0].left, values[0].style);
+
+    if(textInfo.rotate!=0 && textInfo.type!="verticalWrap"){
+        ctx.save();
+        ctx.translate(pos_x+textInfo.textLeftAll, pos_y+textInfo.textTopAll);
+        ctx.rotate(-textInfo.rotate * Math.PI / 180);
+        ctx.translate(-(textInfo.textLeftAll+pos_x), -(pos_y+textInfo.textTopAll));
+    }
+
+
+    for(let i=0;i<values.length;i++){
+        let word = values[i];
+        ctx.font = word.style;
+        ctx.fillText(word.content, (pos_x + word.left)/Store.zoomRatio, (pos_y+word.top)/Store.zoomRatio);
+    }
+
+    if(textInfo.rotate!=0 && textInfo.type!="verticalWrap"){
+        ctx.restore();
+    }
+}
+
 
 export {
     luckysheetDrawgridRowTitle,

src/global/getRowlen.js

@@ -2,7 +2,7 @@ import { luckysheetfontformat } from '../utils/util';
 import menuButton from '../controllers/menuButton';
 import { getcellvalue } from './getdata';
 import { colLocationByIndex } from './location';
-import { hasChinaword } from './validate';
+import { hasChinaword, isRealNull } from './validate';
 import Store from '../store';
 
 //计算范围行高
@@ -164,7 +164,12 @@ function getMeasureText(value, ctx){
     }
     else{
         let measureText = ctx.measureText(value), cache = {};
-        cache.width = measureText.width;
+        if(measureText.actualBoundingBoxLeft==null){
+            cache.width = measureText.width;
+        }
+        else{
+            cache.width = measureText.actualBoundingBoxLeft + measureText.actualBoundingBoxRight;
+        }
         cache.actualBoundingBoxDescent = measureText.actualBoundingBoxDescent;
         cache.actualBoundingBoxAscent = measureText.actualBoundingBoxAscent;
         if(cache.actualBoundingBoxDescent==null || cache.actualBoundingBoxAscent==null || isNaN(cache.actualBoundingBoxDescent) || isNaN(cache.actualBoundingBoxAscent)){
@@ -187,9 +192,361 @@ function getMeasureText(value, ctx){
     }
 }
 
+
+//获取单元格文本内容的渲染信息
+// let measureTextCache = {}, measureTextCacheTimeOut = null;
+// option {cellWidth,cellHeight,space_width,space_height}
+function getCellTextInfo(cell , ctx, option){
+    // let cell = Store.flowdata[r][c];
+    let cellWidth = option.cellWidth;
+    let cellHeight = option.cellHeight;
+    let space_width = option.space_width, space_height = option.space_height; //宽高方向 间隙
+
+    //水平对齐
+    let horizonAlign = menuButton.checkstatusByCell(cell, "ht");
+    //垂直对齐
+    let verticalAlign = menuButton.checkstatusByCell(cell, "vt");
+
+    let tb = menuButton.checkstatusByCell(cell ,"tb");//wrap overflow
+    let tr = menuButton.checkstatusByCell(cell ,"tr");//rotate
+    let rt = menuButton.checkstatusByCell(cell ,"rt");//rotate angle
+
+    let isRotateUp = 1, isRotateDown=0;
+
+    if(rt==null){
+        if(tr=="0"){
+            rt = 0;
+        }
+        else if(tr=="1"){
+            rt = 45;
+        }
+        else if(tr=="4"){
+            rt = 90;
+        }
+        else if(tr=="2"){
+            rt = 135;
+        }
+        else if(tr=="5"){
+            rt = 180;
+        }
+
+        if(rt==null){
+            rt = 0;
+        }
+    }
+
+    rt = parseInt(rt);
+    if(rt>90){
+        rt = 90 -rt;
+        isRotateUp = 0;
+        isRotateDown = 1;
+    }
+
+    let textContent = {};
+    textContent.values = [];
+
+    if(cell.ct!=null && cell.ct.t=="inlineStr" && cell.ct.sharedStrings!=null && cell.ct.sharedStrings.length>0){
+        let strArr = [],lineMaxHeight=[];
+        let sharedStrings = cell.ct.sharedStrings;
+        for(let i=0;i<cell.ct.sharedStrings.length;i++){
+            
+        }
+
+    }
+    else{
+        let fontset = luckysheetfontformat(cell);
+        ctx.font = fontset;
+
+        let value = cell.m;
+        if(value == null){
+            value = cell.v;
+        }
+
+        if(isRealNull(value)){
+            return null;
+        }
+
+        let measureText = getMeasureText(value, ctx); 
+        //luckysheetTableContent.measureText(value);
+        let textWidth = measureText.width;
+        let textHeight = measureText.actualBoundingBoxDescent + measureText.actualBoundingBoxAscent;
+
+        if(tr=="3"){//vertical text
+            value = value.toString();
+            
+            let vArr = [];
+            if(value.length > 1){
+                vArr = value.split("");    
+            }
+            else{
+                vArr.push(value);
+            }
+
+            let textW_all = 0; //拆分后宽高度合计
+            let textH_all = 0; 
+
+            let oneWordWidth =  getMeasureText(vArr[0], ctx).width;
+            let colIndex=0, textH_all_cache=0, textH_all_Column = {}, textH_all_ColumnHeight=[];
+
+            for(let i = 0; i < vArr.length; i++){
+                let textW = oneWordWidth + space_width;
+                let textH = textHeight + space_height;
+                
+                // textW_all += textW;
+                textH_all_cache += textH;
+
+
+                if(tb=="2"){
+                    if(textH_all_cache>cellHeight && textH_all_Column[colIndex]!=null){
+                        // textW_all += textW;
+                        // textH_all = Math.max(textH_all,textH_all_cache);
+                        textH_all_ColumnHeight.push(textH_all_cache-textH);
+                        textH_all_cache = textH;
+                        colIndex +=1;
+                    }
+                }
+
+                if(i== vArr.length-1){
+                    textH_all_ColumnHeight.push(textH_all_cache);
+                }
+
+                if(textH_all_Column[colIndex]==null){
+                    textH_all_Column[colIndex]= [];
+                }
+
+                textH_all_Column[colIndex].push({
+                    content:vArr[i],
+                    style:fontset,
+                    width:textW,
+                    height:textH,
+                    left:0,
+                    top:0,
+                    colIndex:colIndex,
+                });
+                
+            }
+
+            let textH_all_ColumWidth = [];
+            for(let i = 0; i < textH_all_ColumnHeight.length; i++){
+                let columnHeight = textH_all_ColumnHeight[i];
+                let col = textH_all_Column[i], colMaxW=0;
+                for(let c=0;c<col.length;c++){
+                    let word = col[c];
+                    colMaxW = Math.max(colMaxW, word.width);
+                }
+                textH_all_ColumWidth.push(colMaxW);
+                textW_all += colMaxW;
+                textH_all = Math.max(textH_all, columnHeight);
+            }
+            
+            let cumColumnWidth = 0;
+            for(let i = 0; i < textH_all_ColumnHeight.length; i++){
+                let columnHeight = textH_all_ColumnHeight[i];
+                let columnWidth = textH_all_ColumWidth[i];
+
+                let col = textH_all_Column[i];
+                let cumWordHeight = 0;
+                for(let c=0;c<col.length;c++){
+                    let word = col[c];
+                    
+                    let left = space_width + cumColumnWidth;
+                    if(horizonAlign == "0"){
+                        left = cellWidth / 2 + cumColumnWidth - textW_all/2 + space_width*textH_all_ColumnHeight.length;
+                    }
+                    else if(horizonAlign == "2"){
+                        left = cellWidth + cumColumnWidth - textW_all + space_width;
+                    }
+
+                    let top = (cellHeight - space_height)  + cumWordHeight - columnHeight;
+                    if(verticalAlign == "0"){
+                        top = cellHeight / 2 + cumWordHeight - columnHeight/2;
+                    }
+                    else if(verticalAlign == "1"){
+                        top = space_height  + cumWordHeight;
+                    }
+
+                    cumWordHeight += word.height;
+
+                    word.left = left;
+                    word.top = top;
+
+                    textContent.values.push(word);
+                }
+
+                cumColumnWidth+=columnWidth;
+
+            }
+
+            textContent.type = "verticalWrap";
+            textContent.textWidthAll = textW_all;
+            textContent.textHeightAll = textH_all;
+        }
+        else{
+            if(tb=="2"){//wrap
+                value = value.toString();
+
+                let textW_all = 0; //拆分后宽高度合计
+                let textH_all = 0; 
+
+                // let oneWordWidth =  getMeasureText(vArr[0], ctx).width;
+                let splitIndex=0, text_all_cache=0, text_all_split = {}, text_all_splitLen=[];
+
+
+                textContent.rotate = rt;
+                rt = Math.abs(rt);
+
+                let anchor = 0;
+                for(let i = 1; i <= value.length; i++){
+                    let str = value.substr(anchor, i);
+                    let measureText =  getMeasureText(str, ctx);
+                    let textW = measureText.width;
+                    let textH = measureText.actualBoundingBoxAscent+measureText.actualBoundingBoxDescent;
+                    
+                    // textW_all += textW;
+
+
+                    if(rt!=0){
+                        text_all_cache += textH;
+                        if(text_all_cache>cellHeight && text_all_split[splitIndex]!=null){
+                            text_all_splitLen.push(text_all_cache-textH);
+                            text_all_cache = textH;
+                            splitIndex +=1;
+                        }
+                    }
+                    else{
+
+                    }
+
+
+                    if(i== vArr.length-1){
+                        textH_all_ColumnHeight.push(textH_all_cache);
+                    }
+
+                    if(textH_all_Column[colIndex]==null){
+                        text_all_split[colIndex]= [];
+                    }
+
+                    text_all_split[splitIndex].push({
+                        content:vArr[i],
+                        style:fontset,
+                        width:textW,
+                        height:textH,
+                        left:0,
+                        top:0,
+                        colIndex:colIndex,
+                    });
+                    
+                }
+
+                let textH_all_ColumWidth = [];
+                for(let i = 0; i < textH_all_ColumnHeight.length; i++){
+                    let columnHeight = textH_all_ColumnHeight[i];
+                    let col = textH_all_Column[i], colMaxW=0;
+                    for(let c=0;c<col.length;c++){
+                        let word = col[c];
+                        colMaxW = Math.max(colMaxW, word.width);
+                    }
+                    textH_all_ColumWidth.push(colMaxW);
+                    textW_all += colMaxW;
+                    textH_all = Math.max(textH_all, columnHeight);
+                }
+                
+                let cumColumnWidth = 0;
+                for(let i = 0; i < textH_all_ColumnHeight.length; i++){
+                    let columnHeight = textH_all_ColumnHeight[i];
+                    let columnWidth = textH_all_ColumWidth[i];
+
+                    let col = textH_all_Column[i];
+                    let cumWordHeight = 0;
+                    for(let c=0;c<col.length;c++){
+                        let word = col[c];
+                        
+                        let left = space_width + cumColumnWidth;
+                        if(horizonAlign == "0"){
+                            left = cellWidth / 2 + cumColumnWidth - textW_all/2 + space_width*textH_all_ColumnHeight.length;
+                        }
+                        else if(horizonAlign == "2"){
+                            left = cellWidth + cumColumnWidth - textW_all + space_width;
+                        }
+
+                        let top = (cellHeight - space_height)  + cumWordHeight - columnHeight;
+                        if(verticalAlign == "0"){
+                            top = cellHeight / 2 + cumWordHeight - columnHeight/2;
+                        }
+                        else if(verticalAlign == "1"){
+                            top = space_height  + cumWordHeight;
+                        }
+
+                        cumWordHeight += word.height;
+
+                        word.left = left;
+                        word.top = top;
+
+                        textContent.values.push(word);
+                    }
+
+                    cumColumnWidth+=columnWidth;
+
+                }
+
+                textContent.type = "verticalWrap";
+                textContent.textWidthAll = textW_all;
+                textContent.textHeightAll = textH_all;
+            }
+            else{
+
+                textContent.rotate = rt;
+
+                rt = Math.abs(rt);
+
+                textContent.textWidthAll = textWidth * Math.cos(rt*Math.PI/180) + textHeight * Math.sin(rt*Math.PI/180);//consider text box wdith and line height
+
+                textContent.textHeightAll = textWidth * Math.sin(rt*Math.PI/180) + textHeight * Math.cos(rt*Math.PI/180);//consider text box wdith and line height
+
+                let width = textContent.textWidthAll, height = textContent.textHeightAll;
+
+                let left = space_width + textHeight * Math.sin(rt*Math.PI/180)*isRotateDown; //默认为1，左对齐
+                if(horizonAlign == "0"){ //居中对齐
+                    left = cellWidth / 2  - (width / 2) + textHeight * Math.sin(rt*Math.PI/180)*isRotateDown;
+                }
+                else if(horizonAlign == "2"){ //右对齐
+                    left = (cellWidth - space_width)  - width + textHeight * Math.sin(rt*Math.PI/180)*isRotateDown;
+                }
+                
+                let top = (cellHeight - space_height)  - height + textWidth * Math.sin(rt*Math.PI/180)*isRotateUp; //默认为2，下对齐
+                if(verticalAlign == "0"){ //居中对齐 
+                    top = cellHeight / 2  - (height / 2) + textWidth * Math.sin(rt*Math.PI/180)*isRotateUp;
+                }
+                else if(verticalAlign == "1"){ //上对齐
+                    top = space_height + textWidth * Math.sin(rt*Math.PI/180)*isRotateUp;
+                }
+
+                textContent.type = "plain";
+                textContent.values.push({
+                    content:value,
+                    style:fontset,
+                    width:width,
+                    height:height,
+                    left:left,
+                    top:top,
+                });
+
+                textContent.textLeftAll = left;
+                textContent.textTopAll = top;
+            }
+        }
+
+
+
+    }
+
+    return textContent;
+}
+
 export {
     rowlenByRange,
     computeRowlenArr,
     getCellTextSplitArr,
-    getMeasureText
+    getMeasureText,
+    getCellTextInfo
 }

src/index.html

@@ -52,10 +52,7 @@
 										"un":0,//underline
 										"bl":0,//blod
 										"it":1,//italic
-										v:"我在"
-									},
-									{
-										"t":1,//换行符
+										v:"我在\r\n"
 									},
 									{
 										"ff":"等线", //font family
@@ -76,7 +73,8 @@
 							"v":"",
 							"qp":1,
 						}
-					}
+					},
+					{"r":17,"c":2,"v":{"v":"Luckysheet","ct":{"fa":"General","t":"g"},"bg":null,"bl":0,"it":0,"ff":0,"fs":"11","fc":"rgb(51, 51, 51)","ht":1,"vt":1,"m":"Luckysheet"}}
 				],"calcChain":[]}]
 			})
 

src/store/index.js

@@ -17,7 +17,7 @@ const Store = {
 
     cellmainWidth: 0,
     cellmainHeight: 0,
-    toolbarHeight: 35,
+    toolbarHeight: 61,
     infobarHeight: 30,
     calculatebarHeight: 30,
     rowHeaderWidth: 46,