github/siyuan
4
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-05-15 08:30:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

🎨 https://github.com/siyuan-note/siyuan/issues/9417

Browse Source
This commit is contained in:
Vanessa 2023-10-13 13:37:32 +08:00
parent 48e871c75e
commit 73edee57a4
3 changed files with 67 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
app/src/protyle/render/av/keydown.ts
View File

@ -1,8 +1,8 @@
import {matchHotKey} from "../../util/hotKey"; import {matchHotKey} from "../../util/hotKey";
import {selectRow, updateHeader} from "./row"; import {selectRow, updateHeader} from "./row";
import {cellScrollIntoView} from "./cell"; import {cellScrollIntoView, popTextCell} from "./cell";
export const avKeydown = (event: KeyboardEvent, nodeElement: HTMLElement) => { export const avKeydown = (event: KeyboardEvent, nodeElement: HTMLElement, protyle: IProtyle) => {
if (!nodeElement.classList.contains("av")) { if (!nodeElement.classList.contains("av")) {
return false; return false;
} }
@ -15,7 +15,7 @@ export const avKeydown = (event: KeyboardEvent, nodeElement: HTMLElement) => {
event.preventDefault(); event.preventDefault();
return true; return true;
} }
const selectCellElement = nodeElement.querySelector(".av__cell--select") const selectCellElement = nodeElement.querySelector(".av__cell--select") as HTMLElement;
if (selectCellElement) { if (selectCellElement) {
if (event.key === "Escape") { if (event.key === "Escape") {
selectCellElement.classList.remove("av__cell--select"); selectCellElement.classList.remove("av__cell--select");
@ -24,29 +24,69 @@ export const avKeydown = (event: KeyboardEvent, nodeElement: HTMLElement) => {
return true; return true;
} }
if (event.key === "Enter") { if (event.key === "Enter") {
// TODO popTextCell(protyle, [selectCellElement]);
event.preventDefault(); event.preventDefault();
return true; return true;
} }
let cellRect let newCellElement
if (event.key === "ArrowLeft") { if (event.key === "ArrowLeft") {
const previousRowElement = selectCellElement.parentElement.previousElementSibling const previousRowElement = selectCellElement.parentElement.previousElementSibling
if (selectCellElement.previousElementSibling && selectCellElement.previousElementSibling.classList.contains("av__cell")) { if (selectCellElement.previousElementSibling && selectCellElement.previousElementSibling.classList.contains("av__cell")) {
selectCellElement.classList.remove("av__cell--select"); newCellElement = selectCellElement.previousElementSibling
selectCellElement.previousElementSibling.classList.add("av__cell--select");
cellRect = nodeElement.querySelector(".av__cell--select").getBoundingClientRect();
} else if (previousRowElement && !previousRowElement.classList.contains("av__row--header")) { } else if (previousRowElement && !previousRowElement.classList.contains("av__row--header")) {
selectCellElement.classList.remove("av__cell--select"); newCellElement = previousRowElement.lastElementChild.previousElementSibling
previousRowElement.lastElementChild.previousElementSibling.classList.add("av__cell--select");
cellRect = nodeElement.querySelector(".av__cell--select").getBoundingClientRect();
} }
if (cellRect) { if (newCellElement) {
cellScrollIntoView(nodeElement, cellRect); selectCellElement.classList.remove("av__cell--select");
newCellElement.classList.add("av__cell--select");
cellScrollIntoView(nodeElement, newCellElement.getBoundingClientRect());
}
event.preventDefault();
return true;
}
if (event.key === "ArrowRight") {
const nextRowElement = selectCellElement.parentElement.nextElementSibling
if (selectCellElement.nextElementSibling && selectCellElement.nextElementSibling.classList.contains("av__cell")) {
newCellElement = selectCellElement.nextElementSibling
} else if (nextRowElement && !nextRowElement.classList.contains("av__row--footer")) {
newCellElement = nextRowElement.querySelector(".av__cell")
}
if (newCellElement) {
selectCellElement.classList.remove("av__cell--select");
newCellElement.classList.add("av__cell--select");
cellScrollIntoView(nodeElement, newCellElement.getBoundingClientRect());
}
event.preventDefault();
return true;
}
if (event.key === "ArrowUp") {
const previousRowElement = selectCellElement.parentElement.previousElementSibling
if (previousRowElement && !previousRowElement.classList.contains("av__row--header")) {
newCellElement = previousRowElement.querySelector(`.av__cell[data-col-id="${selectCellElement.dataset.colId}"]`)
}
if (newCellElement) {
selectCellElement.classList.remove("av__cell--select");
newCellElement.classList.add("av__cell--select");
cellScrollIntoView(nodeElement, newCellElement.getBoundingClientRect());
}
event.preventDefault();
return true;
}
if (event.key === "ArrowDown") {
const nextRowElement = selectCellElement.parentElement.nextElementSibling
if (nextRowElement && !nextRowElement.classList.contains("av__row--footer")) {
newCellElement = nextRowElement.querySelector(`.av__cell[data-col-id="${selectCellElement.dataset.colId}"]`)
}
if (newCellElement) {
selectCellElement.classList.remove("av__cell--select");
newCellElement.classList.add("av__cell--select");
cellScrollIntoView(nodeElement, newCellElement.getBoundingClientRect());
} }
event.preventDefault(); event.preventDefault();
return true; return true;
} }
} }
const selectRowElement = nodeElement.querySelector(".av__row--select:not(.av__row--header)") as HTMLElement; const selectRowElement = nodeElement.querySelector(".av__row--select:not(.av__row--header)") as HTMLElement;
if (selectRowElement) { if (selectRowElement) {
if (event.key === "Escape") { if (event.key === "Escape") {

13
app/src/protyle/render/av/render.ts
View File

@ -4,6 +4,7 @@ import {Constants} from "../../../constants";
import {getCalcValue} from "./cell"; import {getCalcValue} from "./cell";
import * as dayjs from "dayjs"; import * as dayjs from "dayjs";
import {unicode2Emoji} from "../../../emoji"; import {unicode2Emoji} from "../../../emoji";
import {focusBlock} from "../../util/selection";
export const avRender = (element: Element, protyle: IProtyle, cb?: () => void) => { export const avRender = (element: Element, protyle: IProtyle, cb?: () => void) => {
let avElements: Element[] = []; let avElements: Element[] = [];
@ -40,6 +41,11 @@ export const avRender = (element: Element, protyle: IProtyle, cb?: () => void) =
const left = e.querySelector(".av__scroll")?.scrollLeft || 0; const left = e.querySelector(".av__scroll")?.scrollLeft || 0;
const headerTransform = (e.querySelector(".av__row--header") as HTMLElement)?.style.transform; const headerTransform = (e.querySelector(".av__row--header") as HTMLElement)?.style.transform;
const footerTransform = (e.querySelector(".av__row--footer") as HTMLElement)?.style.transform; const footerTransform = (e.querySelector(".av__row--footer") as HTMLElement)?.style.transform;
let selectCellId = "";
const selectCellElement = e.querySelector(".av__cell--select") as HTMLElement;
if (selectCellElement) {
selectCellId = selectCellElement.parentElement.dataset.id + Constants.ZWSP + selectCellElement.getAttribute("data-col-id");
}
fetchPost("/api/av/renderAttributeView", { fetchPost("/api/av/renderAttributeView", {
id: e.getAttribute("data-av-id"), id: e.getAttribute("data-av-id"),
}, (response) => { }, (response) => {
@ -212,6 +218,13 @@ ${cell.color ? `color:${cell.color};` : ""}">${text}</div>`;
if (footerTransform) { if (footerTransform) {
(e.querySelector(".av__row--footer") as HTMLElement).style.transform = footerTransform; (e.querySelector(".av__row--footer") as HTMLElement).style.transform = footerTransform;
} }
if (selectCellId) {
const newCellElement = e.querySelector(`.av__row[data-id="${selectCellId.split(Constants.ZWSP)[0]}"] .av__cell[data-col-id="${selectCellId.split(Constants.ZWSP)[1]}"]`);
if (newCellElement) {
newCellElement.classList.add("av__cell--select");
}
focusBlock(e)
}
if (cb) { if (cb) {
cb(); cb();
} }

2
app/src/protyle/wysiwyg/keydown.ts
View File

@ -119,7 +119,7 @@ export const keydown = (protyle: IProtyle, editorElement: HTMLElement) => {
return; return;
} }
if (avKeydown(event, nodeElement)) { if (avKeydown(event, nodeElement, protyle)) {
return; return;
} }