This commit is contained in:
Vanessa 2022-11-03 00:09:44 +08:00
parent d7f6456424
commit abc87f9500
4 changed files with 183 additions and 78 deletions

View file

@ -259,6 +259,8 @@ export class Files extends Model {
this.getLeaf(target, notebookId); this.getLeaf(target, notebookId);
this.setCurrent(target, false); this.setCurrent(target, false);
} }
this.element.querySelector('[select-end="true"]')?.removeAttribute("select-end");
this.element.querySelector('[select-start="true"]')?.removeAttribute("select-start");
window.siyuan.menus.menu.remove(); window.siyuan.menus.menu.remove();
event.stopPropagation(); event.stopPropagation();
event.preventDefault(); event.preventDefault();

View file

@ -168,7 +168,7 @@ export const downSelect = (options: {
options.event.preventDefault(); options.event.preventDefault();
}; };
export const getStartEndElement = (selectElements: NodeListOf<Element>) => { export const getStartEndElement = (selectElements: NodeListOf<Element> | Element[]) => {
let startElement; let startElement;
let endElement; let endElement;
selectElements.forEach(item => { selectElements.forEach(item => {

View file

@ -182,3 +182,49 @@ export const hasPreviousSibling = (element: Node) => {
} }
return false; return false;
}; };
export const getNextFileLi = (current: Element) => {
let nextElement = current.nextElementSibling
if (nextElement) {
if (nextElement.tagName === "LI") {
return nextElement
} else if (nextElement.tagName === "UL") {
return nextElement.firstElementChild
}
return false;
}
nextElement = current.parentElement
while (nextElement.tagName === "UL") {
if (!nextElement.nextElementSibling) {
nextElement = nextElement.parentElement
} else if (nextElement.nextElementSibling.tagName === "LI") {
return nextElement.nextElementSibling
} else if (nextElement.nextElementSibling.tagName === "UL") {
return nextElement.nextElementSibling.firstElementChild;
}
}
return false;
}
export const getPreviousFileLi = (current: Element) => {
let previousElement = current.previousElementSibling
if (previousElement) {
if (previousElement.tagName === "LI") {
return previousElement
} else if (previousElement.tagName === "UL") {
return previousElement.lastElementChild
}
return false;
}
previousElement = current.parentElement
while (previousElement.tagName === "UL") {
if (!previousElement.previousElementSibling) {
previousElement = previousElement.parentElement
} else if (previousElement.previousElementSibling.tagName === "LI") {
return previousElement.previousElementSibling;
} else if (previousElement.previousElementSibling.tagName === "UL") {
return previousElement.previousElementSibling.lastElementChild;
}
}
return false;
}

View file

@ -39,6 +39,8 @@ import {deleteFile} from "../editor/deleteFile";
import {escapeHtml} from "./escape"; import {escapeHtml} from "./escape";
import {syncGuide} from "../sync/syncGuide"; import {syncGuide} from "../sync/syncGuide";
import {showPopover} from "../block/popover"; import {showPopover} from "../block/popover";
import {getStartEndElement} from "../protyle/wysiwyg/commonHotkey";
import {getNextFileLi, getPreviousFileLi} from "../protyle/wysiwyg/getBlock";
const getRightBlock = (element: HTMLElement, x: number, y: number) => { const getRightBlock = (element: HTMLElement, x: number, y: number) => {
let index = 1; let index = 1;
@ -953,99 +955,154 @@ const fileTreeKeydown = (event: KeyboardEvent) => {
event.preventDefault(); event.preventDefault();
return true; return true;
} }
if ((event.key === "ArrowRight" && !liElements[0].querySelector(".b3-list-item__arrow--open") && !liElements[0].querySelector(".b3-list-item__toggle").classList.contains("fn__hidden")) || if (event.shiftKey) {
(event.key === "ArrowLeft" && liElements[0].querySelector(".b3-list-item__arrow--open"))) { if (event.key === "ArrowUp") {
files.getLeaf(liElements[0], notebookId); const startEndElement = getStartEndElement(liElements);
liElements.forEach((item, index) => { if (startEndElement.startElement.getBoundingClientRect().top >= startEndElement.endElement.getBoundingClientRect().top) {
if (index !== 0) { const previousElement = getPreviousFileLi(startEndElement.endElement)
item.classList.remove("b3-list-item--focus") if (previousElement) {
previousElement.classList.add("b3-list-item--focus");
previousElement.setAttribute("select-end", "true");
startEndElement.endElement.removeAttribute("select-end");
const previousRect = previousElement.getBoundingClientRect();
const fileRect = files.element.getBoundingClientRect();
if (previousRect.top < fileRect.top || previousRect.bottom > fileRect.bottom) {
previousElement.scrollIntoView(previousRect.top < fileRect.top);
}
}
} else {
startEndElement.endElement.classList.remove("b3-list-item--focus");
startEndElement.endElement.removeAttribute("select-end");
const previousElement = getPreviousFileLi(startEndElement.endElement);
if (previousElement) {
previousElement.setAttribute("select-end", "true");
}
} }
}) } else if (event.key === "ArrowDown") {
event.preventDefault(); const startEndElement = getStartEndElement(liElements);
return true; if (startEndElement.startElement.getBoundingClientRect().top <= startEndElement.endElement.getBoundingClientRect().top) {
} const nextElement = getNextFileLi(startEndElement.endElement);
const fileRect = files.element.getBoundingClientRect(); if (nextElement) {
if (event.key === "ArrowLeft") { nextElement.classList.add("b3-list-item--focus");
let parentElement = liElements[0].parentElement.previousElementSibling; nextElement.setAttribute("select-end", "true");
if (parentElement) { startEndElement.endElement.removeAttribute("select-end");
if (parentElement.tagName !== "LI") { const nextRect = nextElement.getBoundingClientRect();
parentElement = files.element.querySelector(".b3-list-item"); const fileRect = files.element.getBoundingClientRect();
} if (nextRect.top < fileRect.top || nextRect.bottom > fileRect.bottom) {
liElements.forEach((item, index) => { nextElement.scrollIntoView(nextRect.top < fileRect.top);
item.classList.remove("b3-list-item--focus") }
}) }
parentElement.classList.add("b3-list-item--focus"); } else {
const parentRect = parentElement.getBoundingClientRect(); startEndElement.endElement.classList.remove("b3-list-item--focus");
if (parentRect.top < fileRect.top || parentRect.bottom > fileRect.bottom) { startEndElement.endElement.removeAttribute("select-end");
parentElement.scrollIntoView(parentRect.top < fileRect.top); const nextElement = getNextFileLi(startEndElement.endElement);
if (nextElement) {
nextElement.setAttribute("select-end", "true");
}
} }
} }
event.preventDefault(); return;
return true; } else {
} files.element.querySelector('[select-end="true"]')?.removeAttribute("select-end");
if (event.key === "ArrowDown" || event.key === "ArrowRight") { files.element.querySelector('[select-start="true"]')?.removeAttribute("select-start");
let nextElement = liElements[0]; if ((event.key === "ArrowRight" && !liElements[0].querySelector(".b3-list-item__arrow--open") && !liElements[0].querySelector(".b3-list-item__toggle").classList.contains("fn__hidden")) ||
while (nextElement) { (event.key === "ArrowLeft" && liElements[0].querySelector(".b3-list-item__arrow--open"))) {
if (nextElement.nextElementSibling) { files.getLeaf(liElements[0], notebookId);
if (nextElement.nextElementSibling.tagName === "UL") { liElements.forEach((item, index) => {
nextElement = nextElement.nextElementSibling.firstElementChild; if (index !== 0) {
} else { item.classList.remove("b3-list-item--focus")
nextElement = nextElement.nextElementSibling;
} }
break; })
} else { event.preventDefault();
if (nextElement.parentElement.classList.contains("fn__flex-1")) { return true;
}
if (event.key === "ArrowLeft") {
let parentElement = liElements[0].parentElement.previousElementSibling;
if (parentElement) {
if (parentElement.tagName !== "LI") {
parentElement = files.element.querySelector(".b3-list-item");
}
liElements.forEach((item) => {
item.classList.remove("b3-list-item--focus")
})
parentElement.classList.add("b3-list-item--focus");
const parentRect = parentElement.getBoundingClientRect();
const fileRect = files.element.getBoundingClientRect();
if (parentRect.top < fileRect.top || parentRect.bottom > fileRect.bottom) {
parentElement.scrollIntoView(parentRect.top < fileRect.top);
}
}
event.preventDefault();
return true;
}
if (event.key === "ArrowDown" || event.key === "ArrowRight") {
let nextElement = liElements[0];
while (nextElement) {
if (nextElement.nextElementSibling) {
if (nextElement.nextElementSibling.tagName === "UL") {
nextElement = nextElement.nextElementSibling.firstElementChild;
} else {
nextElement = nextElement.nextElementSibling;
}
break; break;
} else { } else {
nextElement = nextElement.parentElement; if (nextElement.parentElement.classList.contains("fn__flex-1")) {
break;
} else {
nextElement = nextElement.parentElement;
}
} }
} }
} if (nextElement.classList.contains("b3-list-item")) {
if (nextElement.classList.contains("b3-list-item")) { liElements.forEach((item) => {
liElements.forEach((item, index) => { item.classList.remove("b3-list-item--focus")
item.classList.remove("b3-list-item--focus") })
}) nextElement.classList.add("b3-list-item--focus");
nextElement.classList.add("b3-list-item--focus"); const nextRect = nextElement.getBoundingClientRect();
const nextRect = nextElement.getBoundingClientRect(); const fileRect = files.element.getBoundingClientRect();
if (nextRect.top < fileRect.top || nextRect.bottom > fileRect.bottom) { if (nextRect.top < fileRect.top || nextRect.bottom > fileRect.bottom) {
nextElement.scrollIntoView(nextRect.top < fileRect.top); nextElement.scrollIntoView(nextRect.top < fileRect.top);
}
}
event.preventDefault();
return true;
}
if (event.key === "ArrowUp") {
let previousElement = liElements[0];
while (previousElement) {
if (previousElement.previousElementSibling) {
if (previousElement.previousElementSibling.tagName === "LI") {
previousElement = previousElement.previousElementSibling;
} else {
const liElements = previousElement.previousElementSibling.querySelectorAll(".b3-list-item");
previousElement = liElements[liElements.length - 1];
} }
break; }
} else { event.preventDefault();
if (previousElement.parentElement.classList.contains("fn__flex-1")) { return true;
}
if (event.key === "ArrowUp") {
let previousElement = liElements[0];
while (previousElement) {
if (previousElement.previousElementSibling) {
if (previousElement.previousElementSibling.tagName === "LI") {
previousElement = previousElement.previousElementSibling;
} else {
const liElements = previousElement.previousElementSibling.querySelectorAll(".b3-list-item");
previousElement = liElements[liElements.length - 1];
}
break; break;
} else { } else {
previousElement = previousElement.parentElement; if (previousElement.parentElement.classList.contains("fn__flex-1")) {
break;
} else {
previousElement = previousElement.parentElement;
}
} }
} }
} if (previousElement.classList.contains("b3-list-item")) {
if (previousElement.classList.contains("b3-list-item")) { liElements.forEach((item) => {
liElements.forEach((item, index) => { item.classList.remove("b3-list-item--focus")
item.classList.remove("b3-list-item--focus") })
}) previousElement.classList.add("b3-list-item--focus");
previousElement.classList.add("b3-list-item--focus"); const previousRect = previousElement.getBoundingClientRect();
const previousRect = previousElement.getBoundingClientRect(); const fileRect = files.element.getBoundingClientRect();
if (previousRect.top < fileRect.top || previousRect.bottom > fileRect.bottom) { if (previousRect.top < fileRect.top || previousRect.bottom > fileRect.bottom) {
previousElement.scrollIntoView(previousRect.top < fileRect.top); previousElement.scrollIntoView(previousRect.top < fileRect.top);
}
} }
event.preventDefault();
return true;
} }
event.preventDefault();
return true;
} }
if (event.key === "Delete" || (event.key === "Backspace" && isMac())) { if (event.key === "Delete" || (event.key === "Backspace" && isMac())) {
window.siyuan.menus.menu.remove(); window.siyuan.menus.menu.remove();
liElements.forEach(item => { liElements.forEach(item => {