From 636046dbb2f005c2e6110b3559b72a59a7c67d87 Mon Sep 17 00:00:00 2001 From: wbfsa Date: Sat, 8 Aug 2020 17:03:39 +0800 Subject: [PATCH] feat(editor box position fit): show diffrent position acording to align --- src/controllers/formulaBar.js | 24 +--- src/controllers/handler.js | 20 +--- src/controllers/ifFormulaGenerator.js | 8 +- src/controllers/keyboard.js | 43 +------- src/controllers/menuButton.js | 21 ++-- src/controllers/updateCell.js | 151 ++++++++++++++++++++++++-- 6 files changed, 161 insertions(+), 106 deletions(-) diff --git a/src/controllers/formulaBar.js b/src/controllers/formulaBar.js index 364f43f..b2c5aa2 100644 --- a/src/controllers/formulaBar.js +++ b/src/controllers/formulaBar.js @@ -1,5 +1,5 @@ import menuButton from './menuButton'; -import luckysheetupdateCell from './updateCell'; +import {luckysheetupdateCell} from './updateCell'; import { keycode } from './constant'; import { luckysheetMoveHighlightCell, @@ -32,22 +32,8 @@ export function formulaBarInitial(){ let last = Store.luckysheet_select_save[Store.luckysheet_select_save.length - 1]; let row_index = last["row_focus"], col_index = last["column_focus"]; - let row = Store.visibledatarow[row_index], - row_pre = row_index - 1 == -1 ? 0 : Store.visibledatarow[row_index - 1]; - let col = Store.visibledatacolumn[col_index], - col_pre = col_index - 1 == -1 ? 0 : Store.visibledatacolumn[col_index - 1]; - - let margeset = menuButton.mergeborer(Store.flowdata, row_index, col_index); - if(!!margeset){ - row = margeset.row[1]; - row_pre = margeset.row[0]; - row_index = margeset.row[2]; - col = margeset.column[1]; - col_pre = margeset.column[0]; - col_index = margeset.column[2]; - } - luckysheetupdateCell(row, row_pre, row_index, col, col_pre, col_index, Store.flowdata, null, true); + luckysheetupdateCell(row_index, col_index, Store.flowdata, null, true); formula.rangeResizeTo = $("#luckysheet-functionbox-cell"); } }).keydown(function (event) { @@ -174,12 +160,8 @@ export function formulaBarInitial(){ let last = Store.luckysheet_select_save[Store.luckysheet_select_save.length - 1]; let row_index = last["row_focus"], col_index = last["column_focus"]; - let row = Store.visibledatarow[row_index], - row_pre = row_index - 1 == -1 ? 0 : Store.visibledatarow[row_index - 1]; - let col = Store.visibledatacolumn[col_index], - col_pre = col_index - 1 == -1 ? 0 : Store.visibledatacolumn[col_index - 1]; - luckysheetupdateCell(row, row_pre, row_index, col, col_pre, col_index, Store.flowdata); + luckysheetupdateCell(row_index, col_index, Store.flowdata); let cell = Store.flowdata[row_index][col_index]; if(cell != null && cell.f != null){ diff --git a/src/controllers/handler.js b/src/controllers/handler.js index 75d7f5d..718fbc3 100644 --- a/src/controllers/handler.js +++ b/src/controllers/handler.js @@ -10,7 +10,7 @@ import alternateformat from './alternateformat'; import ifFormulaGenerator from './ifFormulaGenerator'; import sheetmanage from './sheetmanage'; import server from './server'; -import luckysheetupdateCell from './updateCell'; +import {luckysheetupdateCell} from './updateCell'; import { luckysheet_searcharray } from './sheetSearch'; import luckysheetsizeauto from './resize'; import { @@ -1015,13 +1015,11 @@ export default function luckysheetHandler() { let y = mouse[1] + scrollTop; let row_location = rowLocation(y), - row = row_location[1], - row_pre = row_location[0], + row_index = row_location[2]; let col_location = colLocation(x), - col = col_location[1], - col_pre = col_location[0], + col_index = col_location[2]; if (pivotTable.isPivotRange(row_index, col_index)) { @@ -1072,16 +1070,6 @@ export default function luckysheetHandler() { return; } - let margeset = menuButton.mergeborer(Store.flowdata, row_index, col_index); - if (!!margeset) { - row = margeset.row[1]; - row_pre = margeset.row[0]; - row_index = margeset.row[2]; - col = margeset.column[1]; - col_pre = margeset.column[0]; - col_index = margeset.column[2]; - } - if ($("#luckysheet-search-formula-parm").is(":visible") || $("#luckysheet-search-formula-parm-select").is(":visible")) { //公式参数栏显示 $("#luckysheet-cell-selected").hide(); @@ -1099,7 +1087,7 @@ export default function luckysheetHandler() { menuButton.cancelPaintModel(); } - luckysheetupdateCell(row, row_pre, row_index, col, col_pre, col_index, Store.flowdata); + luckysheetupdateCell(row_index, col_index, Store.flowdata); } }); diff --git a/src/controllers/ifFormulaGenerator.js b/src/controllers/ifFormulaGenerator.js index 9340ff5..04fec34 100644 --- a/src/controllers/ifFormulaGenerator.js +++ b/src/controllers/ifFormulaGenerator.js @@ -1,6 +1,6 @@ import formula from '../global/formula'; import editor from '../global/editor'; -import luckysheetupdateCell from './updateCell'; +import {luckysheetupdateCell} from './updateCell'; import { modelHTML } from './constant'; import { replaceHtml } from '../utils/util'; import Store from '../store'; @@ -260,12 +260,8 @@ const ifFormulaGenerator = { let last = Store.luckysheet_select_save[Store.luckysheet_select_save.length - 1]; let row_index = last["row_focus"], col_index = last["column_focus"]; - let row = Store.visibledatarow[row_index], - row_pre = row_index - 1 == -1 ? 0 : Store.visibledatarow[row_index - 1]; - let col = Store.visibledatacolumn[col_index], - col_pre = col_index - 1 == -1 ? 0 : Store.visibledatacolumn[col_index - 1]; - luckysheetupdateCell(row, row_pre, row_index, col, col_pre, col_index, Store.flowdata); + luckysheetupdateCell(row_index, col_index, Store.flowdata); $("#luckysheet-rich-text-editor").html("=" + str); $("#luckysheet-functionbox-cell").html($("#luckysheet-rich-text-editor").html()); diff --git a/src/controllers/keyboard.js b/src/controllers/keyboard.js index fbbeba2..8a334ed 100644 --- a/src/controllers/keyboard.js +++ b/src/controllers/keyboard.js @@ -2,7 +2,7 @@ import luckysheetConfigsetting from './luckysheetConfigsetting'; import menuButton from './menuButton'; import conditionformat from './conditionformat'; import server from './server'; -import luckysheetupdateCell from './updateCell'; +import {luckysheetupdateCell,setCenterInputPosition} from './updateCell'; import { keycode } from './constant'; import { luckysheetMoveHighlightCell, @@ -344,12 +344,8 @@ export function keyboardInitial(){ let last = Store.luckysheet_select_save[Store.luckysheet_select_save.length - 1]; let row_index = last["row_focus"], col_index = last["column_focus"]; - let row = Store.visibledatarow[row_index], - row_pre = row_index - 1 == -1 ? 0 : Store.visibledatarow[row_index - 1]; - let col = Store.visibledatacolumn[col_index], - col_pre = col_index - 1 == -1 ? 0 : Store.visibledatacolumn[col_index - 1]; - luckysheetupdateCell(row, row_pre, row_index, col, col_pre, col_index, Store.flowdata); + luckysheetupdateCell(row_index, col_index, Store.flowdata); event.preventDefault(); } else if (kcode == keycode.F4 && parseInt($inputbox.css("top")) > 0) { @@ -369,22 +365,8 @@ export function keyboardInitial(){ let last = Store.luckysheet_select_save[Store.luckysheet_select_save.length - 1]; let row_index = last["row_focus"], col_index = last["column_focus"]; - let row = Store.visibledatarow[row_index], - row_pre = row_index - 1 == -1 ? 0 : Store.visibledatarow[row_index - 1]; - let col = Store.visibledatacolumn[col_index], - col_pre = col_index - 1 == -1 ? 0 : Store.visibledatacolumn[col_index - 1]; - - let margeset = menuButton.mergeborer(Store.flowdata, row_index, col_index); - if(!!margeset){ - row = margeset.row[1]; - row_pre = margeset.row[0]; - row_index = margeset.row[2]; - col = margeset.column[1]; - col_pre = margeset.column[0]; - col_index = margeset.column[2]; - } - - luckysheetupdateCell(row, row_pre, row_index, col, col_pre, col_index, Store.flowdata); + + luckysheetupdateCell(row_index, col_index, Store.flowdata); event.preventDefault(); } } @@ -787,22 +769,8 @@ export function keyboardInitial(){ let last = Store.luckysheet_select_save[Store.luckysheet_select_save.length - 1]; let row_index = last["row_focus"], col_index = last["column_focus"]; - let row = Store.visibledatarow[row_index], - row_pre = row_index - 1 == -1 ? 0 : Store.visibledatarow[row_index - 1]; - let col = Store.visibledatacolumn[col_index], - col_pre = col_index - 1 == -1 ? 0 : Store.visibledatacolumn[col_index - 1]; - - let margeset = menuButton.mergeborer(Store.flowdata, row_index, col_index); - if(!!margeset){ - row = margeset.row[1]; - row_pre = margeset.row[0]; - row_index = margeset.row[2]; - col = margeset.column[1]; - col_pre = margeset.column[0]; - col_index = margeset.column[2]; - } - luckysheetupdateCell(row, row_pre, row_index, col, col_pre, col_index, Store.flowdata, true); + luckysheetupdateCell(row_index, col_index, Store.flowdata, true); if(kcode == 8){ $("#luckysheet-rich-text-editor").html("
"); } @@ -868,6 +836,7 @@ export function keyboardInitial(){ } else if (!((kcode >= 112 && kcode <= 123) || kcode <= 46 || kcode == 144 || kcode == 108 || event.ctrlKey || event.altKey || (event.shiftKey && (kcode == 37 || kcode == 38 || kcode == 39 || kcode == 40))) || kcode == 8 || kcode == 32 || kcode == 46 || (event.ctrlKey && kcode == 86)) { formula.functionInputHanddler($("#luckysheet-functionbox-cell"), $("#luckysheet-rich-text-editor"), kcode); + setCenterInputPosition(Store.luckysheetCellUpdate[0], Store.luckysheetCellUpdate[1], Store.flowdata); } }).keyup(function (e) { let kcode = e.keyCode; diff --git a/src/controllers/menuButton.js b/src/controllers/menuButton.js index 32cbe82..3737c2c 100644 --- a/src/controllers/menuButton.js +++ b/src/controllers/menuButton.js @@ -11,7 +11,7 @@ import { createFilter } from './filter'; import luckysheetSearchReplace from './searchReplace'; import luckysheetLocationCell from './locationCell'; import ifFormulaGenerator from './ifFormulaGenerator'; -import luckysheetupdateCell from './updateCell'; +import {luckysheetupdateCell} from './updateCell'; import insertFormula from './insertFormula'; import sheetmanage from './sheetmanage'; import luckysheetPostil from './postil'; @@ -2024,12 +2024,8 @@ const menuButton = { let last = Store.luckysheet_select_save[Store.luckysheet_select_save.length - 1]; let row_index = last["row_focus"], col_index = last["column_focus"]; - let row = Store.visibledatarow[row_index], - row_pre = row_index - 1 == -1 ? 0 : Store.visibledatarow[row_index - 1]; - let col = Store.visibledatacolumn[col_index], - col_pre = col_index - 1 == -1 ? 0 : Store.visibledatacolumn[col_index - 1]; - luckysheetupdateCell(row, row_pre, row_index, col, col_pre, col_index, Store.flowdata); + luckysheetupdateCell(row_index, col_index, Store.flowdata); let cell = Store.flowdata[row_index][col_index]; if(cell != null && cell.f != null){ @@ -3857,10 +3853,7 @@ const menuButton = { isnull = false; } - let row_range = rowLocationByIndex(row_index); - let col_range = colLocationByIndex(col_index); - - luckysheetupdateCell(row_range[1], row_range[0], row_index, col_range[1], col_range[0], col_index, Store.flowdata, true); + luckysheetupdateCell(row_index, col_index, Store.flowdata, true); if(isnull){ let formulaTxt = '='+ formula.toUpperCase() +'()'; @@ -4293,12 +4286,12 @@ const menuButton = { } } - if(key == "vt" && value != "0"){ - if(value == "1"){ - style += "vertical-align: top;"; + if(key == "vt" && value != "1"){ + if(value == "0"){ + style += "align-items: center;"; } else if(value == "2"){ - style += "vertical-align: bottom;"; + style += "align-items: flex-end;"; } } } diff --git a/src/controllers/updateCell.js b/src/controllers/updateCell.js index af6c2f7..1b86b32 100644 --- a/src/controllers/updateCell.js +++ b/src/controllers/updateCell.js @@ -12,11 +12,14 @@ import { luckysheetRangeLast } from '../global/cursorPos'; import cleargridelement from '../global/cleargridelement'; import Store from '../store'; -export default function luckysheetupdateCell(row, row_pre, row_index, col, col_pre, col_index, d, cover, isnotfocus) { +export function luckysheetupdateCell(row_index1, col_index1, d, cover, isnotfocus) { if(isEditMode() || Store.allowEdit===false){//此模式下禁用单元格编辑 return; } + let size = getColumnAndRowSize(row_index1, col_index1, d); + let row = size.row, row_pre = size.row_pre, col = size.col, col_pre = size.col_pre, row_index = size.row_index, col_index = size.col_index; + if($("#luckysheet-dropCell-icon").is(":visible")){ $("#luckysheet-dropCell-icon").remove(); } @@ -26,13 +29,19 @@ export default function luckysheetupdateCell(row, row_pre, row_index, col, col_p let scrollLeft = $("#luckysheet-cell-main").scrollLeft(); let scrollTop = $("#luckysheet-cell-main").scrollTop(); - let left = col_pre + container_offset.left + Store.rowHeaderWidth - scrollLeft, - top = row_pre + container_offset.top + Store.infobarHeight + Store.toolbarHeight + Store.calculatebarHeight + Store.columeHeaderHeight - scrollTop; - if (pivotTable.isPivotRange(row_index, col_index)) { return; } + let input_postition = { + "min-width": col - col_pre + 1 - 8, + "min-height": row - row_pre + 1 - 4, + "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, + } + Store.luckysheetCellUpdate = [row_index, col_index]; if (!isnotfocus) { $("#luckysheet-rich-text-editor").focus().select(); @@ -42,15 +51,10 @@ export default function luckysheetupdateCell(row, row_pre, row_index, col, col_p "background-color": "rgb(255, 255, 255)", "padding": "0px 2px", "font-size": "13px", - "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, - "min-width": col - col_pre + 1 - 8, - "min-height": row - row_pre + 1 - 4, - "left": left - 2, - "top": top - 2, "right": "auto", "overflow-y": "auto", - "box-sizing": "initial" + "box-sizing": "initial", + "display":"flex", }); if(luckysheetFreezen.freezenverticaldata != null || luckysheetFreezen.freezenhorizontaldata != null){ @@ -60,10 +64,33 @@ export default function luckysheetupdateCell(row, row_pre, row_index, col, col_p $("#luckysheet-input-box-index").html(chatatABC(col_index) + (row_index + 1)).hide(); $("#luckysheet-wa-functionbox-cancel, #luckysheet-wa-functionbox-confirm").addClass("luckysheet-wa-calculate-active"); - let value = ""; + let value = "", isCenter=false; if (d[row_index] != null && d[row_index][col_index] != null) { let cell = d[row_index][col_index]; + let htValue = cell["ht"]; + if(htValue == "0"){//0 center, 1 left, 2 right + input_postition = { + "min-width": col - col_pre + 1 - 8, + "min-height": row - row_pre + 1 - 4, + "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, + } + isCenter = true; + } + else if(htValue == "2"){ + input_postition = { + "min-width": col - col_pre + 1 - 8, + "min-height": row - row_pre + 1 - 4, + "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, + "top": row_pre + container_offset.top + Store.infobarHeight + Store.toolbarHeight + Store.calculatebarHeight + Store.columeHeaderHeight - scrollTop - 2, + } + } + if (!cover) { if(cell.f!=null){ @@ -98,6 +125,16 @@ export default function luckysheetupdateCell(row, row_pre, row_index, col, col_p $("#luckysheet-input-box").get(0).style.background = checksAF[1]; } } + + if(input_postition["min-height"] > input_postition["max-height"]){ + input_postition["min-height"] = input_postition["max-height"]; + } + + if(input_postition["min-width"] > input_postition["max-width"]){ + input_postition["min-width"] = input_postition["max-width"]; + } + + if((value == null || value.toString() == "") && !cover){ value = "
"; @@ -108,8 +145,98 @@ export default function luckysheetupdateCell(row, row_pre, row_index, col, col_p luckysheetRangeLast($("#luckysheet-rich-text-editor")[0]); } + if(isCenter){ + let width = $("#luckysheet-input-box").width(); + if(width> input_postition["max-width"]){ + width = input_postition["max-width"]; + } + + if(width< input_postition["min-width"]){ + width = input_postition["min-width"]; + } + + let newLeft = input_postition["left"] - width/2 + (col - col_pre)/2; + if(newLeft<2){ + newLeft = 2; + } + + input_postition["left"] = newLeft-2; + } + + $("#luckysheet-input-box").css(input_postition); + formula.rangetosheet = Store.currentSheetIndex; formula.createRangeHightlight(); formula.rangeResizeTo = $("#luckysheet-rich-text-editor"); cleargridelement(); } + + +export function setCenterInputPosition(row_index, col_index, d){ + + let cell = d[row_index][col_index]; + let htValue = cell["ht"]; + if(cell!=null && htValue != "0"){//0 center, 1 left, 2 right + return; + } + + let size = getColumnAndRowSize(row_index, col_index, d); + let row = size.row, row_pre = size.row_pre, col = size.col, col_pre = size.col_pre; + + let winH = $(window).height(), winW = $(window).width(); + let container_offset = $("#" + Store.container).offset(); + let scrollLeft = $("#luckysheet-cell-main").scrollLeft(); + let scrollTop = $("#luckysheet-cell-main").scrollTop(); + + let input_postition = { + "min-width": col - col_pre + 1 - 8, + "max-width": winW*2/3, + "left": col_pre + container_offset.left + Store.rowHeaderWidth - scrollLeft - 2, + } + + let width = $("#luckysheet-input-box").width(); + if(width> input_postition["max-width"]){ + width = input_postition["max-width"]; + } + + if(width< input_postition["min-width"]){ + width = input_postition["min-width"]; + } + + let newLeft = input_postition["left"] - width/2 + (col - col_pre)/2; + if(newLeft<2){ + newLeft = 2; + } + + input_postition["left"] = newLeft-2; + + $("#luckysheet-input-box").css(input_postition); +} + +export function getColumnAndRowSize(row_index, col_index, d){ + let row = Store.visibledatarow[row_index], + row_pre = row_index - 1 == -1 ? 0 : Store.visibledatarow[row_index - 1]; + let col = Store.visibledatacolumn[col_index], + col_pre = col_index - 1 == -1 ? 0 : Store.visibledatacolumn[col_index - 1]; + if(d==null){ + d = Store.flowdata; + } + let margeset = menuButton.mergeborer(d, row_index, col_index); + if(!!margeset){ + row = margeset.row[1]; + row_pre = margeset.row[0]; + row_index = margeset.row[2]; + col = margeset.column[1]; + col_pre = margeset.column[0]; + col_index = margeset.column[2]; + } + + return { + row:row, + row_pre:row_pre, + row_index:row_index, + col:col, + col_pre:col_pre, + col_index:col_index + } +}