Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-12-18 07:30:12 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Vanessa 2024-03-29 11:03:53 +08:00
parent b7f49bde1e
commit 73d232bafb
3 changed files with 30 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

2
app/src/assets/scss/component/_list.scss
View file

@ -7,7 +7,7 @@
&--background .b3-list-item { &--background .b3-list-item {
border-radius: var(--b3-border-radius); border-radius: var(--b3-border-radius);
&:hover:not(.b3-list-item--focus), &:hover:not(.b3-list-item--focus):not(.dragover):not(.dragover__top):not(.dragover__bottom),
&--focus:not(.dragover) { &--focus:not(.dragover) {
background-color: var(--b3-list-hover); background-color: var(--b3-list-hover);
} }

34
app/src/layout/dock/Outline.ts
View file

@ -99,7 +99,7 @@ export class Outline extends Model {
<span data-type="min" class="${this.type === "local" ? "fn__none " : ""}block__icon b3-tooltips b3-tooltips__sw" aria-label="${window.siyuan.languages.min} ${updateHotkeyTip(window.siyuan.config.keymap.general.closeTab.custom)}"><svg><use xlink:href='#iconMin'></use></svg></span> <span data-type="min" class="${this.type === "local" ? "fn__none " : ""}block__icon b3-tooltips b3-tooltips__sw" aria-label="${window.siyuan.languages.min} ${updateHotkeyTip(window.siyuan.config.keymap.general.closeTab.custom)}"><svg><use xlink:href='#iconMin'></use></svg></span>
</div> </div>
<div class="b3-list-item fn__none"></div> <div class="b3-list-item fn__none"></div>
<div class="fn__flex-1" style="margin-bottom: 8px"></div>`; <div class="fn__flex-1" style="padding: 3px 0 8px"></div>`;
this.element = options.tab.panelElement.lastElementChild as HTMLElement; this.element = options.tab.panelElement.lastElementChild as HTMLElement;
this.headerElement = options.tab.panelElement.firstElementChild as HTMLElement; this.headerElement = options.tab.panelElement.firstElementChild as HTMLElement;
this.tree = new Tree({ this.tree = new Tree({
@ -233,18 +233,35 @@ export class Outline extends Model {
return; return;
} }
const documentSelf = document; const documentSelf = document;
item.style.opacity = "0.38";
const ghostElement = item.cloneNode(true) as HTMLElement; const ghostElement = item.cloneNode(true) as HTMLElement;
document.body.append(ghostElement); document.body.append(ghostElement);
ghostElement.firstElementChild.setAttribute("style", "padding-left:4px"); ghostElement.firstElementChild.setAttribute("style", "padding-left:4px");
ghostElement.setAttribute("style", `opacity:.38;position: fixed; top: ${event.clientY}px; left: ${event.clientX}px; z-index:999997;`); ghostElement.setAttribute("style", `border-radius: var(--b3-border-radius);background-color: var(--b3-list-hover);position: fixed; top: ${event.clientY}px; left: ${event.clientX}px; z-index:999997;`);
documentSelf.ondragstart = () => false; documentSelf.ondragstart = () => false;
let selectItem: HTMLElement;
documentSelf.onmousemove = (moveEvent: MouseEvent) => { documentSelf.onmousemove = (moveEvent: MouseEvent) => {
moveEvent.preventDefault(); moveEvent.preventDefault();
moveEvent.stopPropagation(); moveEvent.stopPropagation();
ghostElement.style.top = moveEvent.clientY + "px"; ghostElement.style.top = moveEvent.clientY + "px";
ghostElement.style.left = moveEvent.clientX + "px"; ghostElement.style.left = moveEvent.clientX + "px";
selectItem = hasClosestByClassName(moveEvent.target as HTMLElement, "b3-list-item") as HTMLElement;
if (!selectItem || selectItem.tagName !== "LI" || selectItem.isSameNode(item) || selectItem.style.position === "fixed" || !this.element.contains(selectItem)) {
return;
}
this.element.querySelectorAll(".dragover__top, .dragover__bottom, .dragover").forEach(item => {
item.classList.remove("dragover__top", "dragover__bottom", "dragover");
});
const selectRect = selectItem.getBoundingClientRect();
if (moveEvent.clientY > selectRect.bottom - 10) {
selectItem.classList.add("dragover__bottom");
} else if (moveEvent.clientY < selectRect.top + 10) {
selectItem.classList.add("dragover__top");
} else {
selectItem.classList.add("dragover");
}
}; };
documentSelf.onmouseup = () => { documentSelf.onmouseup = () => {
@ -254,26 +271,29 @@ export class Outline extends Model {
documentSelf.onselectstart = null; documentSelf.onselectstart = null;
documentSelf.onselect = null; documentSelf.onselect = null;
ghostElement.remove(); ghostElement.remove();
const selectItem = hasClosestByClassName(event.target as HTMLElement, "b3-list-item"); item.style.opacity = "";
if (!selectItem || selectItem.tagName !== "LI") { this.element.querySelectorAll(".dragover__top, .dragover__bottom, .dragover").forEach(item => {
item.classList.remove("dragover__top", "dragover__bottom", "dragover");
});
if (!selectItem) {
return; return;
} }
getAllModels().editor.find(editItem => { getAllModels().editor.find(editItem => {
if (editItem.editor.protyle.block.rootID === this.blockId) { if (editItem.editor.protyle.block.rootID === this.blockId) {
transaction(editItem.editor.protyle, [{ transaction(editItem.editor.protyle, [{
action: "moveOutlineHeading", action: "moveOutlineHeading",
id: item.dataset.blockId, id: item.dataset.nodeId,
previousID: selectItem.previousElementSibling?.getAttribute("data-node-id"), previousID: selectItem.previousElementSibling?.getAttribute("data-node-id"),
parentID: selectItem.parentElement.previousElementSibling?.getAttribute("data-node-id"), parentID: selectItem.parentElement.previousElementSibling?.getAttribute("data-node-id"),
}], [{ }], [{
action: "moveOutlineHeading", action: "moveOutlineHeading",
id: item.dataset.blockId, id: item.dataset.nodeId,
previousID: item.previousElementSibling?.getAttribute("data-node-id"), previousID: item.previousElementSibling?.getAttribute("data-node-id"),
parentID: item.parentElement.previousElementSibling?.getAttribute("data-node-id"), parentID: item.parentElement.previousElementSibling?.getAttribute("data-node-id"),
}]); }]);
return true; return true;
} }
}) });
}; };
}); });
} }

2
app/src/util/Tree.ts
View file

@ -87,6 +87,7 @@ export class Tree {
html += `<li class="b3-list-item${isMobile() ? "" : " b3-list-item--hide-action"}" html += `<li class="b3-list-item${isMobile() ? "" : " b3-list-item--hide-action"}"
${item.id ? 'data-node-id="' + item.id + '"' : ""} ${item.id ? 'data-node-id="' + item.id + '"' : ""}
${item.box ? 'data-notebook-id="' + item.box + '"' : ""} ${item.box ? 'data-notebook-id="' + item.box + '"' : ""}
style="--file-toggle-width:${(item.depth - 1) * 18 + 38}px"
data-treetype="${item.type}" data-treetype="${item.type}"
data-type="${item.nodeType}" data-type="${item.nodeType}"
data-subtype="${item.subType}" data-subtype="${item.subType}"
@ -141,6 +142,7 @@ ${item.label ? "data-label='" + item.label + "'" : ""}>
style = `padding-left: ${(item.depth - 1) * 18 + 22}px;margin-right: 2px`; style = `padding-left: ${(item.depth - 1) * 18 + 22}px;margin-right: 2px`;
} }
html += `<li class="b3-list-item${isMobile() ? "" : " b3-list-item--hide-action"}" html += `<li class="b3-list-item${isMobile() ? "" : " b3-list-item--hide-action"}"
style="--file-toggle-width:${(item.depth - 1) * 18 + 38}px"
data-node-id="${item.id}" data-node-id="${item.id}"
data-ref-text="${encodeURIComponent(item.refText)}" data-ref-text="${encodeURIComponent(item.refText)}"
data-def-id="${item.defID}" data-def-id="${item.defID}"