Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-09-22 00:20:47 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

🎨 https://github.com/siyuan-note/siyuan/issues/10414

Browse source
This commit is contained in:
Vanessa 2025-06-18 11:50:33 +08:00
parent f62de94887
commit 7fdd85dda2
5 changed files with 133 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

29
app/src/assets/scss/business/_av.scss
View file

@ -28,6 +28,10 @@
cursor: auto;
}
&[data-av-type="gallery"] > .av__container {
overflow: inherit;
}
&__pulse {
width: 70%;
height: 23px;
@ -289,6 +293,25 @@
&--select {
background-color: var(--b3-theme-primary-lightest);
}
&.dragover__left::after,
&.dragover__right::after {
top: 0;
bottom: 0;
width: 4px;
content: '';
position: absolute;
background-color: var(--b3-theme-primary-lighter);
z-index: 3;
}
&.dragover__left::after {
left: -11px;
}
&.dragover__right::after {
right: -11px;
}
}
&-cover {
@ -303,21 +326,27 @@
&--0 {
aspect-ratio: 16/9;
}
&--1 {
aspect-ratio: 9/16;
}
&--2 {
aspect-ratio: 4/3;
}
&--3 {
aspect-ratio: 3/4;
}
&--4 {
aspect-ratio: 3/2;
}
&--5 {
aspect-ratio: 2/3;
}
&--6 {
aspect-ratio: 1;
}

2
app/src/protyle/gutter/index.ts
View file

@ -89,7 +89,7 @@ export class Gutter {
let avElement: Element;
if (buttonElement.dataset.rowId) {
avElement = Array.from(protyle.wysiwyg.element.querySelectorAll(`.av[data-node-id="${buttonElement.dataset.nodeId}"]`)).find((item: HTMLElement) => {
if (!isInEmbedBlock(item)) {
if (!isInEmbedBlock(item) && !isInAVBlock(item)) {
return true;
}
});

3
app/src/protyle/render/av/gallery/item.ts
View file

@ -26,9 +26,10 @@ export const insertGalleryItemAnimation = (options: {
!options.blockElement.querySelector('[data-type="av-load-more"]').classList.contains("fn__none")) {
needUpdate = ' data-need-update="true"';
}
const coverClass = sideItemElement.querySelector(".av__gallery-cover").className;
options.srcIDs.forEach((id) => {
html += `<div class="av__gallery-item"${needUpdate} data-type="ghost" data-id="${id}">
<div class="av__gallery-cover"><span style="width: 100%;height: 100%;border-radius: var(--b3-border-radius) var(--b3-border-radius) 0 0;" class="av__pulse"></span></div>
<div class="${coverClass}"><span style="width: 100%;height: 100%;border-radius: var(--b3-border-radius) var(--b3-border-radius) 0 0;" class="av__pulse"></span></div>
<div class="av__gallery-fields"><span class="av__pulse"></span></div>
</div>`;
});

2
app/src/protyle/render/av/gallery/render.ts
View file

@ -59,7 +59,7 @@ export const renderGallery = (options: {
let galleryHTML = "";
// body
view.cards.forEach((item: IAVGalleryItem, rowIndex: number) => {
galleryHTML += `<div data-id="${item.id}" class="av__gallery-item${selectItemIds.includes(item.id) ? " av__gallery-item--select" : ""}">`;
galleryHTML += `<div data-id="${item.id}" draggable="true" class="av__gallery-item${selectItemIds.includes(item.id) ? " av__gallery-item--select" : ""}">`;
if (view.coverFrom !== 0) {
const coverClass= "av__gallery-cover av__gallery-cover--" + view.cardAspectRatio
if (item.coverURL) {

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

@ -33,6 +33,7 @@ import {webUtils} from "electron";
/// #endif
import {addDragFill} from "../render/av/cell";
import {processClonePHElement} from "../render/util";
import {insertGalleryItemAnimation} from "../render/av/gallery/item";
const moveToNew = (protyle: IProtyle, sourceElements: Element[], targetElement: Element, newSourceElement: Element,
isSameDoc: boolean, isBottom: boolean, isCopy: boolean) => {
@ -838,6 +839,11 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
event.dataTransfer.setData(`${Constants.SIYUAN_DROP_GUTTER}NodeAttributeView${Constants.ZWSP}Col${Constants.ZWSP}${[target.getAttribute("data-col-id")]}`,
target.outerHTML);
return;
} else if (target.classList.contains("av__gallery-item")) {
window.siyuan.dragElement = target;
event.dataTransfer.setData(`${Constants.SIYUAN_DROP_GUTTER}NodeAttributeView${Constants.ZWSP}GalleryItem${Constants.ZWSP}${[target.getAttribute("data-id")]}`,
target.outerHTML);
return;
}
}
// 选中编辑器中的文字进行拖拽
@ -988,7 +994,7 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
}
}
} else if (targetElement.classList.contains("av__row")) {
// 拖拽到属性视图内
// 拖拽到属性视图 table 内
const blockElement = hasClosestBlock(targetElement);
if (blockElement) {
let previousID = "";
@ -1047,6 +1053,71 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
insertAttrViewBlockAnimation(protyle, blockElement, sourceIds, previousID);
}
}
} else if (targetElement.classList.contains("av__gallery-item")) {
// 拖拽到属性视图 gallery 内
const blockElement = hasClosestBlock(targetElement);
if (blockElement) {
let previousID = "";
if (targetClass.includes("dragover__right")) {
previousID = targetElement.getAttribute("data-id") || "";
} else {
previousID = targetElement.previousElementSibling?.getAttribute("data-id") || "";
}
const avID = blockElement.getAttribute("data-av-id");
if (gutterTypes[1] === "galleryitem" && gutterTypes[0] === "nodeattributeview") {
// gallery item 内部拖拽
const doOperations: IOperation[] = [];
const undoOperations: IOperation[] = [];
const undoPreviousId = blockElement.querySelector(`.av__gallery-item[data-id="${selectedIds[0]}"]`).previousElementSibling.getAttribute("data-id") || "";
selectedIds.reverse().forEach(item => {
if (previousID !== item && undoPreviousId !== previousID) {
doOperations.push({
action: "sortAttrViewRow",
avID,
previousID,
id: item,
blockID: blockElement.dataset.nodeId,
});
undoOperations.push({
action: "sortAttrViewRow",
avID,
previousID: undoPreviousId,
id: item,
blockID: blockElement.dataset.nodeId,
});
}
});
transaction(protyle, doOperations, undoOperations);
} else {
const newUpdated = dayjs().format("YYYYMMDDHHmmss");
transaction(protyle, [{
action: "insertAttrViewBlock",
avID,
previousID,
srcs,
blockID: blockElement.dataset.nodeId
}, {
action: "doUpdateUpdated",
id: blockElement.dataset.nodeId,
data: newUpdated,
}], [{
action: "removeAttrViewBlock",
srcIDs: sourceIds,
avID,
}, {
action: "doUpdateUpdated",
id: blockElement.dataset.nodeId,
data: blockElement.getAttribute("updated")
}]);
blockElement.setAttribute("updated", newUpdated);
insertGalleryItemAnimation({
protyle,
blockElement,
srcIDs: sourceIds,
previousId: previousID
});
}
}
} else if (sourceElements.length > 0) {
if (targetElement.parentElement.getAttribute("data-type") === "NodeSuperBlock" &&
targetElement.parentElement.getAttribute("data-sb-layout") === "col") {
@ -1290,11 +1361,11 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
}
const fileTreeIds = (event.dataTransfer.types.includes(Constants.SIYUAN_DROP_FILE) && window.siyuan.dragElement) ? window.siyuan.dragElement.innerText : "";
if (event.shiftKey || (event.altKey && fileTreeIds.indexOf("-") === -1)) {
const targetAssitElement = hasClosestBlock(event.target);
if (targetAssitElement) {
targetAssitElement.classList.remove("dragover__top", "protyle-wysiwyg--select", "dragover__bottom", "dragover__left", "dragover__right");
targetAssitElement.removeAttribute("select-start");
targetAssitElement.removeAttribute("select-end");
const targetAssetElement = hasClosestBlock(event.target);
if (targetAssetElement) {
targetAssetElement.classList.remove("dragover__top", "protyle-wysiwyg--select", "dragover__bottom", "dragover__left", "dragover__right");
targetAssetElement.removeAttribute("select-start");
targetAssetElement.removeAttribute("select-end");
} else {
// https://github.com/siyuan-note/siyuan/issues/14177
editorElement.querySelectorAll(".dragover__top, .protyle-wysiwyg--select, .dragover__bottom, .dragover__left, .dragover__right").forEach((item: HTMLElement) => {
@ -1308,7 +1379,14 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
}
// 编辑器内文字拖拽或资源文件拖拽或按住 alt/shift 拖拽反链图标进入编辑器时不能运行 event.preventDefault()， 否则无光标; 需放在 !window.siyuan.dragElement 之后
event.preventDefault();
targetElement = hasClosestByClassName(event.target, "av__row") || hasClosestByClassName(event.target, "av__row--util") || hasClosestBlock(event.target);
targetElement = hasClosestByClassName(event.target, "av__gallery-item") ||
hasClosestByClassName(event.target, "av__row") || hasClosestByClassName(event.target, "av__row--util") ||
hasClosestBlock(event.target);
if (targetElement && targetElement.getAttribute("data-av-type") === "gallery" &&
event.target.classList.contains("av__gallery")) {
// 拖拽到属性视图 gallery 内，但没选中 item
return;
}
const point = {x: event.clientX, y: event.clientY, className: ""};
// 超级块中有a，b两个段落块，移动到 ab 之间的间隙 targetElement 会变为超级块，需修正为 a
@ -1377,6 +1455,12 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
(window.siyuan.dragElement && !window.siyuan.dragElement.contains(targetElement))) {
targetElement = false;
}
} else if (targetElement && gutterType && gutterType.startsWith(`${Constants.SIYUAN_DROP_GUTTER}NodeAttributeView${Constants.ZWSP}GalleryItem${Constants.ZWSP}`.toLowerCase())) {
// gallery item 只能拖拽当前 av 中
const galleryElement = hasClosestByClassName(event.target, "av__gallery");
if (!galleryElement || !galleryElement.contains(window.siyuan.dragElement) || targetElement.isSameNode(window.siyuan.dragElement)) {
targetElement = false;
}
}
if (!targetElement) {
return;
@ -1432,6 +1516,15 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
}
return;
}
if (targetElement.classList.contains("av__gallery-item")) {
const midLeft = nodeRect.left + nodeRect.width / 2;
if (event.clientX < midLeft && event.clientX > nodeRect.left - 13) {
targetElement.classList.add("dragover__left");
} else if (event.clientX > midLeft && event.clientX <= nodeRect.right + 13) {
targetElement.classList.add("dragover__right");
}
return;
}
if (event.clientX < nodeRect.left + 32 && event.clientX >= nodeRect.left - 1 &&
!targetElement.classList.contains("av__row")) {
targetElement.classList.add("dragover__left");