diff --git a/app/src/protyle/render/av/cell.ts b/app/src/protyle/render/av/cell.ts index 22e65a6a7..7fe978f14 100644 --- a/app/src/protyle/render/av/cell.ts +++ b/app/src/protyle/render/av/cell.ts @@ -340,6 +340,7 @@ export const popTextCell = (protyle: IProtyle, cellElements: HTMLElement[], type } if (!hasClosestByClassName(cellElements[0], "custom-attr")) { cellElements[0].classList.add("av__cell--select"); + addDragFill(cellElements[0]); } return; } @@ -379,6 +380,7 @@ export const popTextCell = (protyle: IProtyle, cellElements: HTMLElement[], type protyle.toolbar.range.selectNodeContents(cellElements[0].lastChild); focusByRange(protyle.toolbar.range); cellElements[0].classList.add("av__cell--select"); + addDragFill(cellElements[0]); hintRef(inputElement.value.substring(2), protyle, "av"); avMaskElement?.remove(); event.preventDefault(); @@ -453,6 +455,7 @@ const updateCellValueByInput = (protyle: IProtyle, type: TAVCol, blockElement: H if (cellElements[0] // 兼容新增行后台隐藏 && !hasClosestByClassName(cellElements[0], "custom-attr")) { cellElements[0].classList.add("av__cell--select"); + addDragFill(cellElements[0]); } // 单元格编辑中 ctrl+p 光标定位 if (!document.querySelector(".b3-dialog")) { @@ -819,3 +822,11 @@ export const dragFillCellsValue = (protyle: IProtyle, nodeElement: HTMLElement, transaction(protyle, doOperations, undoOperations); } }; + +export const addDragFill = (cellElement: Element) => { + if (!cellElement) { + return; + } + cellElement.classList.add("av__cell--active"); + cellElement.insertAdjacentHTML("beforeend", `
`); +} diff --git a/app/src/protyle/render/av/keydown.ts b/app/src/protyle/render/av/keydown.ts index 3e9ae0079..779f2166c 100644 --- a/app/src/protyle/render/av/keydown.ts +++ b/app/src/protyle/render/av/keydown.ts @@ -1,6 +1,6 @@ import {matchHotKey} from "../../util/hotKey"; import {deleteRow, selectRow} from "./row"; -import {cellScrollIntoView, popTextCell, updateCellsValue} from "./cell"; +import {addDragFill, cellScrollIntoView, popTextCell, updateCellsValue} from "./cell"; import {avContextmenu} from "./action"; import {hasClosestByClassName} from "../../util/hasClosest"; import {Constants} from "../../../constants"; @@ -62,6 +62,7 @@ export const avKeydown = (event: KeyboardEvent, nodeElement: HTMLElement, protyl if (newCellElement) { selectCellElement.classList.remove("av__cell--select"); newCellElement.classList.add("av__cell--select"); + addDragFill(newCellElement); cellScrollIntoView(nodeElement, newCellElement, false); } event.preventDefault(); @@ -79,6 +80,7 @@ export const avKeydown = (event: KeyboardEvent, nodeElement: HTMLElement, protyl if (newCellElement) { selectCellElement.classList.remove("av__cell--select"); newCellElement.classList.add("av__cell--select"); + addDragFill(newCellElement); cellScrollIntoView(nodeElement, newCellElement, false); } event.preventDefault(); @@ -92,6 +94,7 @@ export const avKeydown = (event: KeyboardEvent, nodeElement: HTMLElement, protyl if (newCellElement) { selectCellElement.classList.remove("av__cell--select"); newCellElement.classList.add("av__cell--select"); + addDragFill(newCellElement); cellScrollIntoView(nodeElement, newCellElement); } event.preventDefault(); @@ -105,6 +108,7 @@ export const avKeydown = (event: KeyboardEvent, nodeElement: HTMLElement, protyl if (newCellElement) { selectCellElement.classList.remove("av__cell--select"); newCellElement.classList.add("av__cell--select"); + addDragFill(newCellElement); cellScrollIntoView(nodeElement, newCellElement); } event.preventDefault(); diff --git a/app/src/protyle/render/av/render.ts b/app/src/protyle/render/av/render.ts index bec47edb1..913c18dbb 100644 --- a/app/src/protyle/render/av/render.ts +++ b/app/src/protyle/render/av/render.ts @@ -1,7 +1,7 @@ import {fetchPost} from "../../../util/fetch"; import {getColIconByType} from "./col"; import {Constants} from "../../../constants"; -import {renderCell} from "./cell"; +import {addDragFill, renderCell} from "./cell"; import {unicode2Emoji} from "../../../emoji"; import {focusBlock} from "../../util/selection"; import {hasClosestBlock, hasClosestByClassName} from "../../util/hasClosest"; @@ -50,6 +50,15 @@ export const avRender = (element: Element, protyle: IProtyle, cb?: () => void, v if (selectCellElement) { selectCellId = (hasClosestByClassName(selectCellElement, "av__row") as HTMLElement).dataset.id + Constants.ZWSP + selectCellElement.getAttribute("data-col-id"); } + let dragFillId = "" + const dragFillElement = e.querySelector(".av__drag-fill") as HTMLElement; + if (dragFillElement) { + dragFillId = (hasClosestByClassName(dragFillElement, "av__row") as HTMLElement).dataset.id + Constants.ZWSP + dragFillElement.parentElement.getAttribute("data-col-id"); + } + const activeIds: string[] = []; + e.querySelectorAll(".av__cell--active").forEach((item: HTMLElement) => { + activeIds.push((hasClosestByClassName(item, "av__row") as HTMLElement).dataset.id + Constants.ZWSP + item.getAttribute("data-col-id")); + }) const created = protyle.options.history?.created; const snapshot = protyle.options.history?.snapshot; let newViewID = e.getAttribute(Constants.CUSTOM_SY_AV_VIEW) || ""; @@ -278,6 +287,12 @@ ${cell.color ? `color:${cell.color};` : ""}">${renderCell(cell.value)}`; focusBlock(e); } } + if (dragFillId) { + addDragFill(e.querySelector(`.av__row[data-id="${dragFillId.split(Constants.ZWSP)[0]}"] .av__cell[data-col-id="${dragFillId.split(Constants.ZWSP)[1]}"]`)) + } + activeIds.forEach(activeId => { + e.querySelector(`.av__row[data-id="${activeId.split(Constants.ZWSP)[0]}"] .av__cell[data-col-id="${activeId.split(Constants.ZWSP)[1]}"]`)?.classList.add("av__cell--active") + }) if (getSelection().rangeCount > 0) { // 修改表头后光标重新定位 const range = getSelection().getRangeAt(0); diff --git a/app/src/protyle/wysiwyg/index.ts b/app/src/protyle/wysiwyg/index.ts index 6d062429d..bd88ffe79 100644 --- a/app/src/protyle/wysiwyg/index.ts +++ b/app/src/protyle/wysiwyg/index.ts @@ -82,6 +82,7 @@ import {openViewMenu} from "../render/av/view"; import {avRender} from "../render/av/render"; import {checkFold} from "../../util/noRelyPCFunction"; import { + addDragFill, dragFillCellsValue, genCellValueByElement, getCellText, @@ -517,7 +518,7 @@ export class WYSIWYG { documentSelf.onselect = null; if (lastCellElement) { dragFillCellsValue(protyle, nodeElement, originData, originCellIds); - lastCellElement.insertAdjacentHTML("beforeend", `
`); + addDragFill(lastCellElement); } return false; }; @@ -589,7 +590,7 @@ export class WYSIWYG { if (lastCellElement) { selectRow(nodeElement.querySelector(".av__firstcol"), "unselectAll"); focusBlock(nodeElement); - lastCellElement.insertAdjacentHTML("beforeend", `
`); + addDragFill(lastCellElement); this.preventClick = true; } return false;