mirror of
https://github.com/siyuan-note/siyuan.git
synced 2025-05-08 06:10:40 +08:00
This commit is contained in:
Vanessa
parent
45c389629a
commit
e502ad60c3
@ -441,11 +441,11 @@
|
||||
.dragover {
|
||||
// 需要 !important，否则拖拽到闪卡无 border
|
||||
&__top {
|
||||
box-shadow: 0 -4px 0 var(--b3-theme-primary-lighter) !important;
|
||||
box-shadow: 0 4px 0 var(--b3-theme-primary-lighter) inset !important;
|
||||
}
|
||||
|
||||
&__bottom {
|
||||
box-shadow: 0 4px 0 var(--b3-theme-primary-lighter) !important;
|
||||
box-shadow: 0 -4px 0 var(--b3-theme-primary-lighter) inset !important;
|
||||
}
|
||||
|
||||
&__left {
|
||||
|
||||
@ -27,7 +27,7 @@ export const avRender = (element: Element, cb?: () => void) => {
|
||||
if (column.hidden) {
|
||||
return;
|
||||
}
|
||||
tableHTML += `<div class="av__cell" data-index="${index}" data-id="${column.id}" data-dtype="${column.type}" data-wrap="${column.wrap}" style="width: ${column.width || 200}px;">
|
||||
tableHTML += `<div draggable="true" class="av__cell" data-index="${index}" data-id="${column.id}" data-dtype="${column.type}" data-wrap="${column.wrap}" style="width: ${column.width || 200}px;">
|
||||
<svg><use xlink:href="#${column.icon || getColIconByType(column.type)}"></use></svg>
|
||||
<span>${column.name}</span>
|
||||
</div>`;
|
||||
@ -43,7 +43,7 @@ export const avRender = (element: Element, cb?: () => void) => {
|
||||
// body
|
||||
data.rows.forEach((row: IAVRow) => {
|
||||
tableHTML += `<div class="av__row" data-id="${row.id}">
|
||||
<div class="av__gutters" data-position="right" aria-label="${window.siyuan.languages.rowTip}">
|
||||
<div class="av__gutters" draggable="true" data-position="right" aria-label="${window.siyuan.languages.rowTip}">
|
||||
<button><svg><use xlink:href="#iconLine"></use></svg></button>
|
||||
</div>
|
||||
<div class="av__firstcol"><svg><use xlink:href="#iconUncheck"></use></svg></div>`;
|
||||
|
||||
@ -703,7 +703,11 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
|
||||
event.preventDefault();
|
||||
return;
|
||||
}
|
||||
if (target.classList && target.classList.contains("protyle-action")) {
|
||||
if (target.classList) {
|
||||
if (hasClosestByClassName(target, "protyle-wysiwyg__embed")) {
|
||||
window.siyuan.dragElement = undefined;
|
||||
event.preventDefault();
|
||||
} else if (target.classList.contains("protyle-action")) {
|
||||
if (hasClosestByClassName(target, "protyle-wysiwyg__embed")) {
|
||||
window.siyuan.dragElement = undefined;
|
||||
event.preventDefault();
|
||||
@ -713,6 +717,29 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
|
||||
protyle.wysiwyg.element.innerHTML);
|
||||
}
|
||||
return;
|
||||
} else if (target.classList.contains("av__gutters")) {
|
||||
|
||||
const blockElement = hasClosestBlock(target);
|
||||
if (!blockElement) {
|
||||
return;
|
||||
}
|
||||
const rowElement = target.parentElement;
|
||||
const selectIds = []
|
||||
if (rowElement.classList.contains("av__row--select")) {
|
||||
rowElement.parentElement.querySelectorAll(".av__row--select:not(.av__row--header)").forEach((item) => {
|
||||
selectIds.push(item.getAttribute("data-id"))
|
||||
})
|
||||
} else {
|
||||
selectIds.push(rowElement.getAttribute("data-id"))
|
||||
}
|
||||
if (selectIds.length === 1) {
|
||||
event.dataTransfer.setDragImage(rowElement, 0, 0);
|
||||
}
|
||||
window.siyuan.dragElement = rowElement;
|
||||
event.dataTransfer.setData(`${Constants.SIYUAN_DROP_GUTTER}NodeAttributeView${Constants.ZWSP}Row${Constants.ZWSP}${selectIds}`,
|
||||
rowElement.innerHTML);
|
||||
return;
|
||||
}
|
||||
}
|
||||
// 选中编辑器中的文字进行拖拽
|
||||
event.dataTransfer.setData(Constants.SIYUAN_DROP_EDITOR, Constants.SIYUAN_DROP_EDITOR);
|
||||
@ -795,22 +822,46 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
|
||||
if (targetElement.classList.contains("av__row")) {
|
||||
// 拖拽到属性视图内
|
||||
const blockElement = hasClosestBlock(targetElement);
|
||||
if (blockElement) {
|
||||
if (!blockElement) {
|
||||
return;
|
||||
}
|
||||
let previousID = "";
|
||||
if (targetElement.classList.contains("dragover__bottom")) {
|
||||
previousID = targetElement.getAttribute("data-id") || "";
|
||||
} else {
|
||||
previousID = targetElement.previousElementSibling?.getAttribute("data-id") || "";
|
||||
}
|
||||
const avId = blockElement.getAttribute("data-av-id")
|
||||
if (gutterTypes[0] === "nodeattributeview" && gutterTypes[1] === "row") {
|
||||
// 行内拖拽
|
||||
const doOperations: IOperation[] = [];
|
||||
const undoOperations: IOperation[] = [];
|
||||
const undoPreviousId = blockElement.querySelector(`[data-id="${selectedIds[0]}"]`).previousElementSibling.getAttribute("data-id") || "";
|
||||
selectedIds.reverse().forEach(item => {
|
||||
doOperations.push({
|
||||
action: "sortAttrViewRow",
|
||||
parentID: avId,
|
||||
previousID,
|
||||
id: item,
|
||||
})
|
||||
undoOperations.push({
|
||||
action: "sortAttrViewRow",
|
||||
parentID: avId,
|
||||
previousID: undoPreviousId,
|
||||
id: item,
|
||||
})
|
||||
});
|
||||
transaction(protyle, doOperations, undoOperations);
|
||||
} else {
|
||||
transaction(protyle, [{
|
||||
action: "insertAttrViewBlock",
|
||||
parentID: blockElement.getAttribute("data-av-id"),
|
||||
parentID: avId,
|
||||
previousID,
|
||||
srcIDs: sourceIds,
|
||||
}], [{
|
||||
action: "removeAttrViewBlock",
|
||||
srcIDs: sourceIds,
|
||||
parentID: targetElement.getAttribute("data-av-id"),
|
||||
parentID: avId,
|
||||
}]);
|
||||
}
|
||||
return;
|
||||
@ -1007,17 +1058,12 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
|
||||
// 列表项不能拖入列表上方块的下面
|
||||
disabledPosition = "bottom";
|
||||
}
|
||||
const avRowElement = hasClosestByClassName(event.target, "av__row");
|
||||
if (targetElement.classList.contains("av") && avRowElement) {
|
||||
if (avRowElement.classList.contains("av__row--header")) {
|
||||
if (targetElement?.classList.contains("av__row--header")) {
|
||||
// 表头之前不能插入
|
||||
disabledPosition = "top";
|
||||
}
|
||||
dragoverElement = avRowElement;
|
||||
} else {
|
||||
dragoverElement = targetElement;
|
||||
}
|
||||
}
|
||||
});
|
||||
editorElement.addEventListener("dragleave", (event: DragEvent & { target: HTMLElement }) => {
|
||||
const nodeElement = hasClosestByClassName(event.target, "av__row") || hasClosestBlock(event.target);
|
||||
|
||||
@ -651,7 +651,7 @@ export const onTransaction = (protyle: IProtyle, operation: IOperation, focus: b
|
||||
updateRef(protyle, operation.id);
|
||||
} else if (operation.action === "append") {
|
||||
reloadProtyle(protyle, false);
|
||||
} else if (["addAttrViewCol", "insertAttrViewBlock", "updateAttrViewCol", "updateAttrViewCell"].includes(operation.action)) {
|
||||
} else if (["addAttrViewCol", "insertAttrViewBlock", "updateAttrViewCol", "updateAttrViewCell", "sortAttrViewRow"].includes(operation.action)) {
|
||||
refreshAV(protyle, operation);
|
||||
}
|
||||
};
|
||||
|
||||
1
app/src/types/index.d.ts
vendored
1
app/src/types/index.d.ts
vendored
@ -24,6 +24,7 @@ type TOperation =
|
||||
| "removeFlashcards"
|
||||
| "updateAttrViewCell"
|
||||
| "updateAttrViewCol"
|
||||
| "sortAttrViewRow"
|
||||
type TBazaarType = "templates" | "icons" | "widgets" | "themes" | "plugins"
|
||||
type TCardType = "doc" | "notebook" | "all"
|
||||
type TEventBus = "ws-main" |
|
||||
|
||||
Loading…
Reference in New Issue
Block a user