mirror of
https://github.com/siyuan-note/siyuan.git
synced 2025-12-21 17:10:12 +01:00
This commit is contained in:
parent
d7f6456424
commit
abc87f9500
4 changed files with 183 additions and 78 deletions
|
|
@ -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();
|
||||||
|
|
|
||||||
|
|
@ -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 => {
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -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 => {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue