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

Improve the ghosting of list items fix https://github.com/siyuan-note/siyuan/issues/11920 (#13821)

Browse source 
* style: 去除 ghost 元素的高亮

* fix(drag): 改进列表项拖影

* fix(drag): 改进列表项拖影

* clean code
This commit is contained in:
Jeffrey Chen 2025-01-29 23:25:43 +08:00 • committed by GitHub
parent 332f859684
commit c93dc582a5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 26 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

7
app/src/assets/scss/base.scss
View file

@ -385,5 +385,12 @@ html {
}
}
.dragghost [data-node-id] {
&.protyle-wysiwyg--select::after,
&.protyle-wysiwyg--hl::after {
display: none;
}
}
// 需放置最后，否则 https://github.com/siyuan-note/siyuan/issues/7056
@import "util/responsive";

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

@ -127,10 +127,10 @@ export class Gutter {
}
const ghostElement = document.createElement("div");
ghostElement.className = protyle.wysiwyg.element.className;
ghostElement.className = protyle.wysiwyg.element.className + " dragghost";
selectElements.forEach(item => {
const type = item.getAttribute("data-type");
if (item.querySelector("iframe")) {
const type = item.getAttribute("data-type");
const embedElement = genEmptyElement();
embedElement.classList.add("protyle-wysiwyg--select");
getContenteditableElement(embedElement).innerHTML = `<svg class="svg"><use xlink:href="${buttonElement.querySelector("use").getAttribute("xlink:href")}"></use></svg> ${getLangByType(type)}`;
@ -141,7 +141,12 @@ export class Gutter {
});
ghostElement.setAttribute("style", `position:fixed;opacity:.1;width:${selectElements[0].clientWidth}px;padding:0;`);
document.body.append(ghostElement);
event.dataTransfer.setDragImage(ghostElement, 0, 0);
if (selectElements[0].classList.contains("li")) {
const actionElement = selectElements[0].querySelector(".protyle-action");
event.dataTransfer.setDragImage(ghostElement, actionElement.clientWidth / 2, actionElement.clientHeight / 2);
} else {
event.dataTransfer.setDragImage(ghostElement, 0, 0);
}
setTimeout(() => {
ghostElement.remove();
});

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

@ -32,6 +32,7 @@ import {zoomOut} from "../../menus/protyle";
import {webUtils} from "electron";
/// #endif
import {addDragFill} from "../render/av/cell";
import {processClonePHElement} from "../render/util";
const moveToNew = (protyle: IProtyle, sourceElements: Element[], targetElement: Element, newSourceElement: Element,
isSameDoc: boolean, isBottom: boolean, isCopy: boolean) => {
@ -816,6 +817,16 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
window.siyuan.dragElement = undefined;
event.preventDefault();
} else if (target.classList.contains("protyle-action")) {
const ghostElement = document.createElement("div");
ghostElement.className = protyle.wysiwyg.element.className + " dragghost";
ghostElement.append(processClonePHElement(target.parentElement.cloneNode(true) as Element));
ghostElement.setAttribute("style", `position:fixed;opacity:.1;width:${target.parentElement.clientWidth}px;padding:0;`);
document.body.append(ghostElement);
event.dataTransfer.setDragImage(ghostElement, target.clientWidth / 2, target.clientHeight / 2);
setTimeout(() => {
ghostElement.remove();
});
window.siyuan.dragElement = protyle.wysiwyg.element;
event.dataTransfer.setData(`${Constants.SIYUAN_DROP_GUTTER}NodeListItem${Constants.ZWSP}${target.parentElement.getAttribute("data-subtype")}${Constants.ZWSP}${[target.parentElement.getAttribute("data-node-id")]}`,
protyle.wysiwyg.element.innerHTML);