mirror of
https://github.com/siyuan-note/siyuan.git
synced 2026-01-23 00:36:10 +01:00
This commit is contained in:
Vanessa
parent
8cea4b01b8
commit
591e451c3e
2 changed files with 105 additions and 77 deletions
|
|
@ -1,3 +1,5 @@
|
|||
import {fetchPost} from "../../../util/fetch";
|
||||
|
||||
export const avRender = (element: Element) => {
|
||||
let avElements: Element[] = [];
|
||||
if (element.getAttribute("data-type") === "NodeAttributeView") {
|
||||
|
|
@ -14,69 +16,71 @@ export const avRender = (element: Element) => {
|
|||
if (e.getAttribute("data-render") === "true") {
|
||||
return;
|
||||
}
|
||||
const data = {
|
||||
title: "table",
|
||||
filter: {},
|
||||
sorts: {},
|
||||
columns: [{
|
||||
width: 500,
|
||||
icon: "",
|
||||
id: "",
|
||||
name: "columnA",
|
||||
wrap: false,
|
||||
type: "",
|
||||
}, {
|
||||
width: 500,
|
||||
icon: "",
|
||||
id: "",
|
||||
name: "columnB",
|
||||
wrap: false,
|
||||
type: "",
|
||||
}],
|
||||
rows: [{
|
||||
id: "",
|
||||
cells: [{
|
||||
value: "a",
|
||||
}, {
|
||||
color: "var(--b3-card-error-color)",
|
||||
bgColor: "var(--b3-card-error-background)",
|
||||
value: "a1",
|
||||
}]
|
||||
}, {
|
||||
id: "",
|
||||
cells: [{
|
||||
color: "var(--b3-card-success-color)",
|
||||
bgColor: "var(--b3-card-success-background)",
|
||||
value: "b",
|
||||
}, {
|
||||
value: "b1",
|
||||
}]
|
||||
}]
|
||||
};
|
||||
let tableHTML = '<div class="av__row av__row--header" style="background-color: var(--b3-theme-background)"><div class="av__firstcol"><input style="margin-top: 14px" type="checkbox"></div>';
|
||||
data.columns.forEach((column) => {
|
||||
tableHTML += `
|
||||
// const data = {
|
||||
// title: "table",
|
||||
// filter: {},
|
||||
// sorts: {},
|
||||
// columns: [{
|
||||
// width: 500,
|
||||
// icon: "",
|
||||
// id: "",
|
||||
// name: "columnA",
|
||||
// wrap: false,
|
||||
// type: "",
|
||||
// }, {
|
||||
// width: 500,
|
||||
// icon: "",
|
||||
// id: "",
|
||||
// name: "columnB",
|
||||
// wrap: false,
|
||||
// type: "",
|
||||
// }],
|
||||
// rows: [{
|
||||
// id: "",
|
||||
// cells: [{
|
||||
// value: "a",
|
||||
// }, {
|
||||
// color: "var(--b3-card-error-color)",
|
||||
// bgColor: "var(--b3-card-error-background)",
|
||||
// value: "a1",
|
||||
// }]
|
||||
// }, {
|
||||
// id: "",
|
||||
// cells: [{
|
||||
// color: "var(--b3-card-success-color)",
|
||||
// bgColor: "var(--b3-card-success-background)",
|
||||
// value: "b",
|
||||
// }, {
|
||||
// value: "b1",
|
||||
// }]
|
||||
// }]
|
||||
// };
|
||||
fetchPost("/api/av/renderAttributeView", {id: e.getAttribute("data-node-id")}, (response) => {
|
||||
const data = response.data
|
||||
let tableHTML = '<div class="av__row av__row--header" style="background-color: var(--b3-theme-background)"><div class="av__firstcol"><input style="margin-top: 14px" type="checkbox"></div>';
|
||||
data.columns.forEach((column) => {
|
||||
tableHTML += `
|
||||
<div class="av__cell" style="width: ${column.width}px;">${column.name}</div>`
|
||||
});
|
||||
tableHTML += `<div class="block__icons">
|
||||
});
|
||||
tableHTML += `<div class="block__icons">
|
||||
<div class="block__icon block__icon--show"><svg><use xlink:href="#iconAdd"></use></svg></div>
|
||||
<div class="fn__space"></div>
|
||||
<div class="block__icon block__icon--show"><svg><use xlink:href="#iconMore"></use></svg></div>
|
||||
</div>
|
||||
</div>`;
|
||||
data.rows.forEach((row) => {
|
||||
tableHTML += '<div class="av__row"><div class="av__firstcol"><input type="checkbox"></div>';
|
||||
row.cells.forEach((cell, index) => {
|
||||
tableHTML += `<div class="av__cell" style="width: ${data.columns[index].width}px;background-color: ${cell.bgColor};color: ${cell.color}">${cell.value}</div>`
|
||||
data.rows.forEach((row) => {
|
||||
tableHTML += `<div class="av__row" data-id="${row.id}"><div class="av__firstcol"><input type="checkbox"></div>`;
|
||||
row.cells.forEach((cell, index) => {
|
||||
tableHTML += `<div class="av__cell" style="width: ${data.columns[index].width}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 paddingRight = e.parentElement.style.paddingRight;
|
||||
// 10: ::-webkit-scrollbar width
|
||||
e.style.width = (e.parentElement.clientWidth - 10) + "px";
|
||||
e.style.alignSelf = "center";
|
||||
e.firstElementChild.outerHTML = `<div>
|
||||
const paddingLeft = e.parentElement.style.paddingLeft;
|
||||
const paddingRight = e.parentElement.style.paddingRight;
|
||||
// 10: ::-webkit-scrollbar width
|
||||
e.style.width = (e.parentElement.clientWidth - 10) + "px";
|
||||
e.style.alignSelf = "center";
|
||||
e.firstElementChild.outerHTML = `<div>
|
||||
<div style="padding-left: ${paddingLeft};padding-right: ${paddingRight}">
|
||||
<div>
|
||||
<div>tab1</div>
|
||||
|
|
@ -96,7 +100,8 @@ export const avRender = (element: Element) => {
|
|||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
e.setAttribute("data-render", "true");
|
||||
e.setAttribute("data-render", "true");
|
||||
})
|
||||
});
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -727,7 +727,7 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
|
|||
event.stopPropagation();
|
||||
return;
|
||||
}
|
||||
const targetElement = hasClosestBlock(event.target);
|
||||
const targetElement = hasClosestByClassName(event.target, "av__row") || hasClosestBlock(event.target);
|
||||
let gutterType = "";
|
||||
for (const item of event.dataTransfer.items) {
|
||||
if (item.type.startsWith(Constants.SIYUAN_DROP_GUTTER)) {
|
||||
|
|
@ -792,19 +792,28 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
|
|||
|
||||
hideElements(["gutter"], protyle);
|
||||
const targetClass = targetElement.className.split(" ");
|
||||
if (targetElement.className.indexOf("dragover__") === -1) {
|
||||
if (targetElement.classList.contains("av__row")) {
|
||||
// 拖拽到属性视图内
|
||||
transaction(protyle, [{
|
||||
action: "insertAttrViewBlock",
|
||||
id: targetElement.getAttribute("data-node-id"),
|
||||
parentID: targetElement.getAttribute("data-av-id"),
|
||||
previousID: "",
|
||||
srcIDs: sourceIds,
|
||||
}], [{
|
||||
action: "removeAttrViewBlock",
|
||||
id: targetElement.getAttribute("data-node-id"),
|
||||
parentID: targetElement.getAttribute("data-av-type"),
|
||||
}]);
|
||||
const blockElement = hasClosestBlock(targetElement);
|
||||
if (blockElement) {
|
||||
let previousID = ""
|
||||
if (targetElement.classList.contains("dragover__bottom")) {
|
||||
previousID = targetElement.getAttribute("data-id") || ""
|
||||
} else {
|
||||
previousID = targetElement.previousElementSibling?.getAttribute("data-id") || ""
|
||||
}
|
||||
transaction(protyle, [{
|
||||
action: "insertAttrViewBlock",
|
||||
id: blockElement.getAttribute("data-node-id"),
|
||||
parentID: blockElement.getAttribute("data-av-id"),
|
||||
previousID,
|
||||
srcIDs: sourceIds,
|
||||
}], [{
|
||||
action: "removeAttrViewBlock",
|
||||
id: targetElement.getAttribute("data-node-id"),
|
||||
parentID: targetElement.getAttribute("data-av-type"),
|
||||
}]);
|
||||
}
|
||||
return;
|
||||
}
|
||||
targetElement.classList.remove("dragover__bottom", "dragover__top", "dragover__left", "dragover__right", "protyle-wysiwyg--select");
|
||||
|
|
@ -918,8 +927,8 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
|
|||
}
|
||||
// 编辑器内文字拖拽或资源文件拖拽或按住 alt/shift 拖拽反链图标进入编辑器时不能运行 event.preventDefault()， 否则无光标; 需放在 !window.siyuan.dragElement 之后
|
||||
event.preventDefault();
|
||||
const targetElement = hasClosestBlock(event.target) as Element;
|
||||
if (!targetElement) {
|
||||
const targetElement = hasClosestByClassName(event.target, "av__row") || hasClosestBlock(event.target) as Element;
|
||||
if (!targetElement || targetElement?.classList.contains("av")) {
|
||||
return;
|
||||
}
|
||||
const fileTreeIds = (event.dataTransfer.types.includes(Constants.SIYUAN_DROP_FILE) && window.siyuan.dragElement) ? window.siyuan.dragElement.innerText : "";
|
||||
|
|
@ -940,9 +949,11 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
|
|||
return;
|
||||
}
|
||||
|
||||
if (event.clientX < nodeRect.left + 32 && event.clientX > nodeRect.left) {
|
||||
if (event.clientX < nodeRect.left + 32 && event.clientX > nodeRect.left &&
|
||||
!targetElement.classList.contains("av__row")) {
|
||||
targetElement.classList.add("dragover__left", "protyle-wysiwyg--select");
|
||||
} else if (event.clientX > nodeRect.right - 32 && event.clientX < nodeRect.right) {
|
||||
} else if (event.clientX > nodeRect.right - 32 && event.clientX < nodeRect.right &&
|
||||
!targetElement.classList.contains("av__row")) {
|
||||
targetElement.classList.add("dragover__right", "protyle-wysiwyg--select");
|
||||
} else {
|
||||
if (event.clientY > nodeRect.top + nodeRect.height / 2 && disabledPosition !== "bottom") {
|
||||
|
|
@ -997,12 +1008,21 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
|
|||
// 列表项不能拖入列表上方块的下面
|
||||
disabledPosition = "bottom";
|
||||
}
|
||||
dragoverElement = targetElement;
|
||||
const avRowElement = hasClosestByClassName(event.target, "av__row")
|
||||
if (targetElement.classList.contains("av") && avRowElement) {
|
||||
if (avRowElement.classList.contains("av__row--header")) {
|
||||
// 表头之前不能插入
|
||||
disabledPosition = "top";
|
||||
}
|
||||
dragoverElement = avRowElement;
|
||||
} else {
|
||||
dragoverElement = targetElement;
|
||||
}
|
||||
}
|
||||
});
|
||||
editorElement.addEventListener("dragleave", (event: DragEvent & { target: HTMLElement }) => {
|
||||
const nodeElement = hasClosestBlock(event.target);
|
||||
if (nodeElement) {
|
||||
const nodeElement = hasClosestByClassName(event.target, "av__row") || hasClosestBlock(event.target);
|
||||
if (nodeElement && !nodeElement.classList.contains("av")) {
|
||||
let gutterType = "";
|
||||
for (const item of event.dataTransfer.items) {
|
||||
if (item.type.startsWith(Constants.SIYUAN_DROP_GUTTER)) {
|
||||
|
|
@ -1016,6 +1036,9 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
|
|||
nodeElement.removeAttribute("select-end");
|
||||
}
|
||||
nodeElement.classList.remove("dragover__top", "dragover__bottom", "dragover__left", "dragover__right");
|
||||
if (nodeElement.classList.contains("av__row")) {
|
||||
nodeElement.classList.remove("protyle-wysiwyg--select");
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue