Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-12-18 07:30:12 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

🚨

Browse source
This commit is contained in:
Vanessa 2023-06-08 22:56:52 +08:00
parent c5d6f41805
commit d332328726
4 changed files with 39 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

56
app/src/protyle/render/av/action.ts
View file

@ -4,15 +4,15 @@ import {Menu} from "../../../plugin/API";
import {getIconByType} from "./render"; import {getIconByType} from "./render";
export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLElement }) => { export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLElement }) => {
const blockElement = hasClosestBlock(event.target) const blockElement = hasClosestBlock(event.target);
const addElement = hasClosestByAttribute(event.target, "data-type", "av-header-add") const addElement = hasClosestByAttribute(event.target, "data-type", "av-header-add");
if (addElement && blockElement) { if (addElement && blockElement) {
const menu = new Menu("av-header-add") const menu = new Menu("av-header-add");
menu.addItem({ menu.addItem({
icon: "iconAlignLeft", icon: "iconAlignLeft",
label: window.siyuan.languages.text, label: window.siyuan.languages.text,
click() { click() {
const id = Lute.NewNodeID() const id = Lute.NewNodeID();
transaction(protyle, [{ transaction(protyle, [{
action: "addAttrViewCol", action: "addAttrViewCol",
name: "Text", name: "Text",
@ -25,28 +25,28 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
parentID: blockElement.getAttribute("data-av-type"), parentID: blockElement.getAttribute("data-av-type"),
}]); }]);
} }
}) });
const addRect = addElement.getBoundingClientRect() const addRect = addElement.getBoundingClientRect();
menu.open({ menu.open({
x: addRect.left, x: addRect.left,
y: addRect.bottom, y: addRect.bottom,
h: addRect.height h: addRect.height
}) });
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
return true return true;
} }
const cellElement = hasClosestByClassName(event.target, "av__cell") const cellElement = hasClosestByClassName(event.target, "av__cell");
if (cellElement && blockElement) { if (cellElement && blockElement) {
const type = cellElement.getAttribute("data-dtype") const type = cellElement.getAttribute("data-dtype");
const menu = new Menu("av-header-cell") const menu = new Menu("av-header-cell");
menu.addItem({ menu.addItem({
icon: getIconByType(type), icon: getIconByType(type),
label: `<input style="margin: 4px 0" class="b3-text-field" type="text" value="${cellElement.innerText.trim()}">`, label: `<input style="margin: 4px 0" class="b3-text-field" type="text" value="${cellElement.innerText.trim()}">`,
bind() { bind() {
} }
}) });
if (type !== "block") { if (type !== "block") {
menu.addItem({ menu.addItem({
icon: "iconEdit", icon: "iconEdit",
@ -54,31 +54,31 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
click() { click() {
} }
}) });
} }
menu.addSeparator() menu.addSeparator();
menu.addItem({ menu.addItem({
icon: "iconUp", icon: "iconUp",
label: window.siyuan.languages.fileNameNatASC, label: window.siyuan.languages.fileNameNatASC,
click() { click() {
} }
}) });
menu.addItem({ menu.addItem({
icon: "iconDown", icon: "iconDown",
label: window.siyuan.languages.fileNameNatDESC, label: window.siyuan.languages.fileNameNatDESC,
click() { click() {
} }
}) });
menu.addItem({ menu.addItem({
icon: "iconFilter", icon: "iconFilter",
label: window.siyuan.languages.filter, label: window.siyuan.languages.filter,
click() { click() {
} }
}) });
menu.addSeparator() menu.addSeparator();
if (type !== "block") { if (type !== "block") {
menu.addItem({ menu.addItem({
icon: "iconEyeoff", icon: "iconEyeoff",
@ -86,22 +86,22 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
click() { click() {
} }
}) });
menu.addItem({ menu.addItem({
icon: "iconCopy", icon: "iconCopy",
label: window.siyuan.languages.duplicate, label: window.siyuan.languages.duplicate,
click() { click() {
} }
}) });
menu.addItem({ menu.addItem({
icon: "iconTrashcan", icon: "iconTrashcan",
label: window.siyuan.languages.delete, label: window.siyuan.languages.delete,
click() { click() {
} }
}) });
menu.addSeparator() menu.addSeparator();
} }
menu.addItem({ menu.addItem({
label: `<div class="fn__flex" style="margin-bottom: 4px"><span>${window.siyuan.languages.wrap}</span><span class="fn__space fn__flex-1"></span> label: `<div class="fn__flex" style="margin-bottom: 4px"><span>${window.siyuan.languages.wrap}</span><span class="fn__space fn__flex-1"></span>
@ -109,16 +109,16 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
click() { click() {
} }
}) });
const cellRect = cellElement.getBoundingClientRect() const cellRect = cellElement.getBoundingClientRect();
menu.open({ menu.open({
x: cellRect.left, x: cellRect.left,
y: cellRect.bottom, y: cellRect.bottom,
h: cellRect.height h: cellRect.height
}) });
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
return true return true;
}
return false
} }
return false;
};

8
app/src/protyle/render/av/render.ts
View file

@ -7,7 +7,7 @@ export const getIconByType = (type: string) => {
case "block": case "block":
return "iconParagraph"; return "iconParagraph";
} }
} };
export const avRender = (element: Element) => { export const avRender = (element: Element) => {
let avElements: Element[] = []; let avElements: Element[] = [];
@ -37,7 +37,7 @@ export const avRender = (element: Element) => {
tableHTML += `<div class="av__cell" data-id="${column.id}" data-dtype="${column.type}" data-wrap="${column.wrap}" style="width: ${column.width || 200}px;"> tableHTML += `<div class="av__cell" data-id="${column.id}" data-dtype="${column.type}" data-wrap="${column.wrap}" style="width: ${column.width || 200}px;">
<svg><use xlink:href="#${column.icon || getIconByType(column.type)}"></use></svg> <svg><use xlink:href="#${column.icon || getIconByType(column.type)}"></use></svg>
<span>${column.name}</span> <span>${column.name}</span>
</div>` </div>`;
}); });
tableHTML += `<div class="block__icons"> tableHTML += `<div class="block__icons">
<div class="block__icon block__icon--show" data-type="av-header-add"><svg><use xlink:href="#iconAdd"></use></svg></div> <div class="block__icon block__icon--show" data-type="av-header-add"><svg><use xlink:href="#iconAdd"></use></svg></div>
@ -50,9 +50,9 @@ export const avRender = (element: Element) => {
data.rows.forEach((row: IAVRow) => { data.rows.forEach((row: IAVRow) => {
tableHTML += `<div class="av__row" data-id="${row.id}"><div class="av__firstcol"><input type="checkbox"></div>`; tableHTML += `<div class="av__row" data-id="${row.id}"><div class="av__firstcol"><input type="checkbox"></div>`;
row.cells.forEach((cell, index) => { row.cells.forEach((cell, index) => {
tableHTML += `<div class="av__cell" style="width: ${data.columns[index].width || 200}px;background-color: ${cell.bgColor || ""};color: ${cell.color || ""}">${cell.value}</div>` tableHTML += `<div class="av__cell" style="width: ${data.columns[index].width || 200}px;background-color: ${cell.bgColor || ""};color: ${cell.color || ""}">${cell.value}</div>`;
}); });
tableHTML += `<div></div></div>`; tableHTML += "<div></div></div>";
}); });
const paddingLeft = e.parentElement.style.paddingLeft; const paddingLeft = e.parentElement.style.paddingLeft;
const paddingRight = e.parentElement.style.paddingRight; const paddingRight = e.parentElement.style.paddingRight;

6
app/src/protyle/scroll/event.ts
View file

@ -27,7 +27,7 @@ export const scrollEvent = (protyle: IProtyle, element: HTMLElement) => {
protyle.wysiwyg.element.querySelectorAll(".av").forEach((item: HTMLElement) => { protyle.wysiwyg.element.querySelectorAll(".av").forEach((item: HTMLElement) => {
if (item.parentElement.classList.contains("protyle-wysiwyg")) { if (item.parentElement.classList.contains("protyle-wysiwyg")) {
const headerTop = item.offsetTop - 30 + 56; // 30 - 面包屑, 56 - tab+title const headerTop = item.offsetTop - 30 + 56; // 30 - 面包屑, 56 - tab+title
const headerElement = item.querySelector(".av__row--header") as HTMLElement const headerElement = item.querySelector(".av__row--header") as HTMLElement;
if (headerElement) { if (headerElement) {
if (headerTop < element.scrollTop && headerTop + headerElement.parentElement.clientHeight > element.scrollTop) { if (headerTop < element.scrollTop && headerTop + headerElement.parentElement.clientHeight > element.scrollTop) {
headerElement.style.transform = `translateY(${element.scrollTop - headerTop}px)`; headerElement.style.transform = `translateY(${element.scrollTop - headerTop}px)`;
@ -35,9 +35,9 @@ export const scrollEvent = (protyle: IProtyle, element: HTMLElement) => {
headerElement.style.transform = ""; headerElement.style.transform = "";
} }
} }
const footerElement = item.querySelector(".av__row--footer") as HTMLElement const footerElement = item.querySelector(".av__row--footer") as HTMLElement;
if (footerElement) { if (footerElement) {
const footerBottom = headerTop + footerElement.parentElement.clientHeight const footerBottom = headerTop + footerElement.parentElement.clientHeight;
const scrollBottom = element.scrollTop + element.clientHeight; const scrollBottom = element.scrollTop + element.clientHeight;
if (headerTop + 42 + 36 * 2 < scrollBottom && footerBottom > scrollBottom) { if (headerTop + 42 + 36 * 2 < scrollBottom && footerBottom > scrollBottom) {
footerElement.style.transform = `translateY(${scrollBottom - footerBottom}px)`; footerElement.style.transform = `translateY(${scrollBottom - footerBottom}px)`;

8
app/src/protyle/util/editorCommonEvent.ts
View file

@ -796,11 +796,11 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
// 拖拽到属性视图内 // 拖拽到属性视图内
const blockElement = hasClosestBlock(targetElement); const blockElement = hasClosestBlock(targetElement);
if (blockElement) { if (blockElement) {
let previousID = "" let previousID = "";
if (targetElement.classList.contains("dragover__bottom")) { if (targetElement.classList.contains("dragover__bottom")) {
previousID = targetElement.getAttribute("data-id") || "" previousID = targetElement.getAttribute("data-id") || "";
} else { } else {
previousID = targetElement.previousElementSibling?.getAttribute("data-id") || "" previousID = targetElement.previousElementSibling?.getAttribute("data-id") || "";
} }
transaction(protyle, [{ transaction(protyle, [{
action: "insertAttrViewBlock", action: "insertAttrViewBlock",
@ -1008,7 +1008,7 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
// 列表项不能拖入列表上方块的下面 // 列表项不能拖入列表上方块的下面
disabledPosition = "bottom"; disabledPosition = "bottom";
} }
const avRowElement = hasClosestByClassName(event.target, "av__row") const avRowElement = hasClosestByClassName(event.target, "av__row");
if (targetElement.classList.contains("av") && avRowElement) { if (targetElement.classList.contains("av") && avRowElement) {
if (avRowElement.classList.contains("av__row--header")) { if (avRowElement.classList.contains("av__row--header")) {
// 表头之前不能插入 // 表头之前不能插入