From bad248beeab478cf870cd99fb2880264e7acf3ab Mon Sep 17 00:00:00 2001 From: wbfsa Date: Mon, 7 Sep 2020 04:53:31 +0800 Subject: [PATCH] style(inlinestr program): improve drawmain --- src/controllers/menuButton.js | 35 +++- src/controllers/resize.js | 2 +- src/global/draw.js | 128 +++++++++++- src/global/getRowlen.js | 363 +++++++++++++++++++++++++++++++++- src/index.html | 8 +- src/store/index.js | 2 +- 6 files changed, 509 insertions(+), 29 deletions(-) diff --git a/src/controllers/menuButton.js b/src/controllers/menuButton.js index e742420..c09bc92 100644 --- a/src/controllers/menuButton.js +++ b/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", diff --git a/src/controllers/resize.js b/src/controllers/resize.js index 7db3593..e8414e3 100644 --- a/src/controllers/resize.js +++ b/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) { diff --git a/src/global/draw.js b/src/global/draw.js index 99c497f..527a558 100644 --- a/src/global/draw.js +++ b/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;i90){ + 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 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;ccellHeight && 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