From 343bfb2757a5a87221effc11f6b9951f376a7ded Mon Sep 17 00:00:00 2001 From: Vanessa Date: Fri, 20 Jun 2025 13:44:13 +0800 Subject: [PATCH] :art: https://github.com/siyuan-note/siyuan/issues/10414 --- app/src/assets/scss/business/_av.scss | 8 ++- app/src/protyle/render/av/action.ts | 2 +- app/src/protyle/render/av/gallery/util.ts | 77 ++++++++++++++--------- app/src/protyle/util/clearSelect.ts | 7 ++- 4 files changed, 61 insertions(+), 33 deletions(-) diff --git a/app/src/assets/scss/business/_av.scss b/app/src/assets/scss/business/_av.scss index b8ed1a558..8bb451320 100644 --- a/app/src/assets/scss/business/_av.scss +++ b/app/src/assets/scss/business/_av.scss @@ -290,8 +290,13 @@ } } - &--select { + &--select:before { + content: ""; background-color: var(--b3-theme-primary-lightest); + height: 100%; + width: 100%; + z-index: 1; + position: absolute; } &.dragover__left::after, @@ -445,6 +450,7 @@ display: flex; opacity: 0; transition: var(--b3-transition); + z-index: 2; } } diff --git a/app/src/protyle/render/av/action.ts b/app/src/protyle/render/av/action.ts index 0b0cf9e48..5ddfc8ad4 100644 --- a/app/src/protyle/render/av/action.ts +++ b/app/src/protyle/render/av/action.ts @@ -282,7 +282,7 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle event.stopPropagation(); return true; } else if (type === "av-gallery-more") { - openGalleryItemMenu({target, blockElement, protyle}); + openGalleryItemMenu({target, blockElement, protyle, returnMenu: false}); event.preventDefault(); event.stopPropagation(); return true; diff --git a/app/src/protyle/render/av/gallery/util.ts b/app/src/protyle/render/av/gallery/util.ts index b4317a6d4..d0708bf89 100644 --- a/app/src/protyle/render/av/gallery/util.ts +++ b/app/src/protyle/render/av/gallery/util.ts @@ -3,6 +3,7 @@ import {Menu} from "../../../../plugin/Menu"; import * as dayjs from "dayjs"; import {hasClosestByClassName} from "../../../util/hasClosest"; import {genCellValueByElement} from "../cell"; +import {clearSelect} from "../../../util/clearSelect"; export const setGalleryCover = (options: { view: IAVGallery @@ -231,41 +232,57 @@ export const openGalleryItemMenu = (options: { }) => { const menu = new Menu(); const avID = options.blockElement.getAttribute("data-av-id"); + const cardElement = hasClosestByClassName(options.target, "av__gallery-item"); + if (!cardElement) { + return; + } + if (!cardElement.classList.contains("av__gallery-item--select")) { + clearSelect(["galleryItem"], options.blockElement); + cardElement.classList.add("av__gallery-item--select"); + } menu.addItem({ icon: "iconTrashcan", warning: true, label: window.siyuan.languages.delete, click() { - const cardElement = hasClosestByClassName(options.target, "av__gallery-item"); - if (cardElement) { - const newUpdated = dayjs().format("YYYYMMDDHHmmss"); - const blockValue = genCellValueByElement("block", cardElement.querySelector(".av__cell[data-block-id]")); - transaction(options.protyle, [{ - action: "removeAttrViewBlock", - srcIDs: [cardElement.dataset.id], - avID, - }, { - action: "doUpdateUpdated", - id: options.blockElement.dataset.nodeId, - data: newUpdated, - }], [{ - action: "insertAttrViewBlock", - avID, - previousID: cardElement.previousElementSibling?.getAttribute("data-id") || "", - srcs: [{ - id: cardElement.getAttribute("data-id"), - isDetached: blockValue.isDetached, - content: blockValue.block.content - }], - blockID: options.blockElement.dataset.nodeId - }, { - action: "doUpdateUpdated", - id: options.blockElement.dataset.nodeId, - data: options.blockElement.getAttribute("updated") - }]); - cardElement.remove(); - options.blockElement.setAttribute("updated", newUpdated); - } + const srcIDs: string[] = []; + const srcs: IOperationSrcs[] = []; + let previousID = ""; + options.blockElement.querySelectorAll(".av__gallery-item--select").forEach((item, index) => { + const blockValue = genCellValueByElement("block", item.querySelector(".av__cell[data-block-id]")); + const id = item.getAttribute("data-id"); + srcIDs.push(id); + srcs.push({ + id, + isDetached: blockValue.isDetached, + content: blockValue.block.content + }); + item.remove(); + if (index === 0) { + previousID = item.previousElementSibling?.getAttribute("data-id") || ""; + } + }); + const newUpdated = dayjs().format("YYYYMMDDHHmmss"); + transaction(options.protyle, [{ + action: "removeAttrViewBlock", + srcIDs, + avID, + }, { + action: "doUpdateUpdated", + id: options.blockElement.dataset.nodeId, + data: newUpdated, + }], [{ + action: "insertAttrViewBlock", + avID, + previousID, + srcs, + blockID: options.blockElement.dataset.nodeId + }, { + action: "doUpdateUpdated", + id: options.blockElement.dataset.nodeId, + data: options.blockElement.getAttribute("updated") + }]); + options.blockElement.setAttribute("updated", newUpdated); } }); if (options.returnMenu) { diff --git a/app/src/protyle/util/clearSelect.ts b/app/src/protyle/util/clearSelect.ts index 3a7b94066..a15a00e72 100644 --- a/app/src/protyle/util/clearSelect.ts +++ b/app/src/protyle/util/clearSelect.ts @@ -1,6 +1,6 @@ import {updateHeader} from "../render/av/row"; -export const clearSelect = (types: ("av" | "img" | "cell" | "row")[], element: Element) => { +export const clearSelect = (types: ("av" | "img" | "cell" | "row"|"galleryItem")[], element: Element) => { if (types.includes("cell")) { element.querySelectorAll(".av__cell--select, .av__cell--active").forEach((item: HTMLElement) => { item.querySelector(".av__drag-fill")?.remove(); @@ -14,6 +14,11 @@ export const clearSelect = (types: ("av" | "img" | "cell" | "row")[], element: E updateHeader(item); }); } + if (types.includes("galleryItem")) { + element.querySelectorAll(".av__gallery-item--select").forEach((item: HTMLElement) => { + item.classList.remove("av__gallery-item--select"); + }); + } if (types.includes("av")) { element.querySelectorAll(" .av__cell--select, .av__cell--active, .av__row--select, .av__gallery-item--select").forEach((item: HTMLElement) => { if (item.classList.contains("av__row--select")) {