Keyboard usability + bug fixes

packages/core/src/events/keyboard.ts

@@ -13,8 +13,8 @@ import {
 } from "../modules/selection";
 import { cancelPaintModel, handleBold } from "../modules/toolbar";
 import { hasPartMC } from "../modules/validation";
-import { GlobalCache } from "../types";
-import { getNowDateTime, isAllowEdit } from "../utils";
+import { CellMatrix, GlobalCache } from "../types";
+import { getNowDateTime, getSheetIndex, isAllowEdit } from "../utils";
 import { handleCopy } from "./copy";
 import { jfrefreshgrid } from "../modules/refresh";
 
@@ -95,29 +95,174 @@ export function handleGlobalEnter(
   }
 }
 
-function handleBatchSelectionWithArrowKey(ctx: Context, e: KeyboardEvent) {
-  if (
-    ctx.luckysheetCellUpdate.length > 0
-    // || $("#luckysheet-singleRange-dialog").is(":visible") ||
-    // $("#luckysheet-multiRange-dialog").is(":visible")
-  ) {
-    return;
+function moveToEdge(
+  sheetData: CellMatrix,
+  key: string,
+  curr: number,
+  rowDelta: 0 | 1 | -1,
+  colDelta: 0 | 1 | -1,
+  startR: number,
+  endR: number,
+  startC: number,
+  endC: number,
+  maxRow: number,
+  maxCol: number
+) {
+  let selectedLimit = -1;
+  if (key === "ArrowUp") selectedLimit = startR - 1;
+  else if (key === "ArrowDown") selectedLimit = endR + 1;
+  else if (key === "ArrowLeft") selectedLimit = startC - 1;
+  else if (key === "ArrowRight") selectedLimit = endC + 1;
+
+  const maxRowCol = colDelta === 0 ? maxRow : maxCol;
+  let r = colDelta === 0 ? selectedLimit : curr;
+  let c = colDelta === 0 ? curr : selectedLimit;
+
+  while (r > 0 && c > 0 && (colDelta === 0 ? r : c) < maxRowCol - 1) {
+    if (
+      !_.isNil(sheetData?.[r]?.[c]?.v) &&
+      (_.isNil(sheetData?.[r - rowDelta]?.[c - colDelta]?.v) ||
+        _.isNil(sheetData?.[r + rowDelta]?.[c + colDelta]?.v))
+    ) {
+      break;
+    } else {
+      r += 1 * rowDelta;
+      c += 1 * colDelta;
+    }
   }
+  return colDelta === 0 ? r : c;
+}
+
+function handleControlPlusArrowKey(
+  ctx: Context,
+  e: KeyboardEvent,
+  shiftPressed: boolean
+) {
+  if (ctx.luckysheetCellUpdate.length > 0) return;
+
+  const idx = getSheetIndex(ctx, ctx.currentSheetId);
+  if (_.isNil(idx)) return;
+
+  const file = ctx.luckysheetfile[idx];
+  if (!file || !file.row || !file.column) return;
+  const maxRow = file.row;
+  const maxCol = file.column;
+  let last;
+  if (ctx.luckysheet_select_save && ctx.luckysheet_select_save.length > 0)
+    last = ctx.luckysheet_select_save[ctx.luckysheet_select_save.length - 1];
+  if (!last) return;
+
+  const currR = last.row_focus;
+  const currC = last.column_focus;
+  if (_.isNil(currR) || _.isNil(currC)) return;
+
+  const startR = last.row[0];
+  const endR = last.row[1];
+  const startC = last.column[0];
+  const endC = last.column[1];
+
+  const horizontalOffset = currC - endC !== 0 ? currC - endC : currC - startC;
+  const verticalOffset = currR - endR !== 0 ? currR - endR : currR - startR;
+
+  const sheetData = file.data;
+  if (!sheetData) return;
+  let selectedLimit;
+
   switch (e.key) {
-    /*
     case "ArrowUp":
-      luckysheetMoveHighlightRange2("up", "rangeOfSelect");
+      selectedLimit = moveToEdge(
+        sheetData,
+        e.key,
+        currC,
+        -1,
+        0,
+        startR,
+        endR,
+        startC,
+        endC,
+        maxRow,
+        maxCol
+      );
+      if (shiftPressed) {
+        moveHighlightRange(ctx, "down", verticalOffset, "rangeOfSelect");
+        moveHighlightRange(ctx, "down", selectedLimit - currR, "rangeOfSelect");
+      } else {
+        moveHighlightCell(ctx, "down", selectedLimit - currR, "rangeOfSelect");
+      }
       break;
     case "ArrowDown":
-      luckysheetMoveHighlightRange2("down", "rangeOfSelect");
+      selectedLimit = moveToEdge(
+        sheetData,
+        e.key,
+        currC,
+        1,
+        0,
+        startR,
+        endR,
+        startC,
+        endC,
+        maxRow,
+        maxCol
+      );
+      if (shiftPressed) {
+        moveHighlightRange(ctx, "down", verticalOffset, "rangeOfSelect");
+        moveHighlightRange(ctx, "down", selectedLimit - currR, "rangeOfSelect");
+      } else {
+        moveHighlightCell(ctx, "down", selectedLimit - currR, "rangeOfSelect");
+      }
       break;
     case "ArrowLeft":
-      luckysheetMoveHighlightRange2("left", "rangeOfSelect");
+      selectedLimit = moveToEdge(
+        sheetData,
+        e.key,
+        currR,
+        0,
+        -1,
+        startR,
+        endR,
+        startC,
+        endC,
+        maxRow,
+        maxCol
+      );
+      if (shiftPressed) {
+        moveHighlightRange(ctx, "right", horizontalOffset, "rangeOfSelect");
+        moveHighlightRange(
+          ctx,
+          "right",
+          selectedLimit - currC,
+          "rangeOfSelect"
+        );
+      } else {
+        moveHighlightCell(ctx, "right", selectedLimit - currC, "rangeOfSelect");
+      }
       break;
     case "ArrowRight":
-      luckysheetMoveHighlightRange2("right", "rangeOfSelect");
+      selectedLimit = moveToEdge(
+        sheetData,
+        e.key,
+        currR,
+        0,
+        1,
+        startR,
+        endR,
+        startC,
+        endC,
+        maxRow,
+        maxCol
+      );
+      if (shiftPressed) {
+        moveHighlightRange(ctx, "right", horizontalOffset, "rangeOfSelect");
+        moveHighlightRange(
+          ctx,
+          "right",
+          selectedLimit - currC,
+          "rangeOfSelect"
+        );
+      } else {
+        moveHighlightCell(ctx, "right", selectedLimit - currC, "rangeOfSelect");
+      }
       break;
-  */
     default:
       break;
   }
@@ -143,7 +288,7 @@ export function handleWithCtrlOrMetaKey(
 
     if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(e.key)) {
       // Ctrl + Shift + 方向键  调整选区
-      handleBatchSelectionWithArrowKey(ctx, e);
+      handleControlPlusArrowKey(ctx, e, true);
     } else if (_.includes([";", '"', ":", "'"], e.key)) {
       const last =
         ctx.luckysheet_select_save?.[ctx.luckysheet_select_save.length - 1];
@@ -166,6 +311,10 @@ export function handleWithCtrlOrMetaKey(
       e.stopPropagation();
       return;
     }
+  } else if (
+    ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(e.key)
+  ) {
+    handleControlPlusArrowKey(ctx, e, false);
   } else if (e.code === "KeyB") {
     // Ctrl + B  加粗
     handleBold(ctx, cellInput);

packages/core/src/events/paste.ts

@@ -1100,6 +1100,11 @@ function pasteHandlerOfCopyPaste(
   const c_c1 = copyRange.copyRange[0].column[0];
   const c_c2 = copyRange.copyRange[0].column[1];
 
+  const isSingleCellPaste =
+    copyRange.copyRange.length === 1 &&
+    copyRange.copyRange[0].row[0] === copyRange.copyRange[0].row[1] &&
+    copyRange.copyRange[0].column[0] === copyRange.copyRange[0].column[1];
+
   let arr: CellMatrix = [];
   let isSameRow = false;
   for (let i = 0; i < copyRange.copyRange.length; i += 1) {
@@ -1224,6 +1229,12 @@ function pasteHandlerOfCopyPaste(
   let mtc = 0;
   let maxcellCahe = 0;
   let maxrowCache = 0;
+
+  const file = ctx.luckysheetfile[getSheetIndex(ctx, ctx.currentSheetId)!];
+  let hiddenRows;
+  if (isSingleCellPaste)
+    hiddenRows = new Set(Object.keys(file.config?.rowhidden || {}));
+
   for (let th = 1; th <= timesH; th += 1) {
     for (let tc = 1; tc <= timesC; tc += 1) {
       mth = minh + (th - 1) * copyh;
@@ -1237,6 +1248,8 @@ function pasteHandlerOfCopyPaste(
 
       const offsetMC: any = {};
       for (let h = mth; h < maxrowCache; h += 1) {
+        // skip if row is hidden
+        if (isSingleCellPaste && hiddenRows?.has(h.toString())) continue;
         const x = d[h];
 
         for (let c = mtc; c < maxcellCahe; c += 1) {
@@ -1446,7 +1459,6 @@ function pasteHandlerOfCopyPaste(
   last.row = [minh, maxh];
   last.column = [minc, maxc];
 
-  const file = ctx.luckysheetfile[getSheetIndex(ctx, ctx.currentSheetId)!];
   file.config = cfg;
   file.luckysheet_conditionformat_save = cdformat;
   file.dataVerification = { ...file.dataVerification, ...dataVerification };

packages/core/src/modules/dropCell.ts

@@ -2286,6 +2286,7 @@ export function updateDropCell(ctx: Context) {
   const index = getSheetIndex(ctx, ctx.currentSheetId);
   if (index == null) return;
   const file = ctx.luckysheetfile[index];
+  const hiddenRows = new Set(Object.keys(file.config?.rowhidden || {}));
 
   const cfg = _.cloneDeep(ctx.config);
   if (cfg.borderInfo == null) {
@@ -2337,6 +2338,7 @@ export function updateDropCell(ctx: Context) {
 
       if (direction === "down") {
         for (let j = apply_str_r; j <= apply_end_r; j += 1) {
+          if (hiddenRows.has(`${j}`)) continue;
           const cell = applyData[j - apply_str_r];
 
           if (cell?.f != null) {
@@ -2448,6 +2450,7 @@ export function updateDropCell(ctx: Context) {
       }
       if (direction === "up") {
         for (let j = apply_end_r; j >= apply_str_r; j -= 1) {
+          if (hiddenRows.has(`${j}`)) continue;
           const cell = applyData[apply_end_r - j];
 
           if (cell?.f != null) {
@@ -2549,6 +2552,7 @@ export function updateDropCell(ctx: Context) {
     const asLen = apply_end_c - apply_str_c + 1;
 
     for (let i = apply_str_r; i <= apply_end_r; i += 1) {
+      if (hiddenRows.has(`${i}`)) continue;
       const copyD = copyData[i - apply_str_r];
 
       const applyData = getApplyData(copyD, csLen, asLen);

packages/core/src/modules/formula.ts

@@ -2088,7 +2088,7 @@ function searchFunction(ctx: Context, searchtxt: string) {
   // );
 }
 
-function getrangeseleciton() {
+export function getrangeseleciton() {
   const currSelection = window.getSelection();
   if (!currSelection) return null;
   const { anchorNode, anchorOffset } = currSelection;
@@ -2585,11 +2585,12 @@ export function handleFormulaInput(
       if (!currSelection) return;
       if (currSelection.anchorNode?.nodeName.toLowerCase() === "div") {
         const editorlen = $editor.querySelectorAll("span").length;
-        ctx.formulaCache.functionRangeIndex = [
-          editorlen - 1,
-          $editor.querySelectorAll("span").item(editorlen - 1).textContent
-            ?.length!,
-        ];
+        if (editorlen > 0)
+          ctx.formulaCache.functionRangeIndex = [
+            editorlen - 1,
+            $editor.querySelectorAll("span").item(editorlen - 1).textContent
+              ?.length!,
+          ];
       } else {
         ctx.formulaCache.functionRangeIndex = [
           _.indexOf(

packages/react/src/components/SheetOverlay/FormulaSearch/index.tsx

@@ -15,11 +15,13 @@ const FormulaSearch: React.FC<React.HTMLAttributes<HTMLDivElement>> = (
       id="luckysheet-formula-search-c"
       className="luckysheet-formula-search-c"
     >
-      {context.functionCandidates.map((v) => (
+      {context.functionCandidates.map((v, index) => (
         <div
           key={v.n}
           data-func={v.n}
-          className="luckysheet-formula-search-item"
+          className={`luckysheet-formula-search-item ${
+            index === 0 ? "luckysheet-formula-search-item-active" : ""
+          }`}
         >
           <div className="luckysheet-formula-search-func">{v.n}</div>
           <div className="luckysheet-formula-search-detail">{v.d}</div>