Fix off-by-one when moving node

This commit is contained in:
Joscha 2025-02-12 13:09:20 +01:00
parent c7452166e0
commit 6432c869c4
2 changed files with 35 additions and 25 deletions

View file

@ -143,11 +143,11 @@ function onInsertEditorMove(): void {
if (insertIndex.value === undefined) return;
if (ui.pinned.parentId) {
notes.removeChild(ui.pinned.parentId, ui.pinned.segment);
notes.moveChild(ui.pinned.parentId, ui.pinned.segment, segment.id, insertIndex.value);
} else {
notes.addChild(segment.id, ui.pinned.segment.id, insertIndex.value);
}
notes.addChild(segment.id, ui.pinned.segment.id, insertIndex.value);
onInsertEditorClose();
ui.unsetPinned();
}
@ -208,28 +208,6 @@ function onInsertEditorCopy(): void {
<!-- Controls -->
<div v-show="!editing" class="absolute right-0 flex h-6 items-center gap-0.5">
<!-- Maybe this should be two separate fullsize buttons so they're easier to click. -->
<!-- Maybe I should reorder/group the buttons, especially once I add a delete button. -->
<div class="flex h-5 w-5 flex-col">
<button
class="flex h-0 grow select-none items-center justify-center rounded-t-sm border border-b-0 border-black bg-white p-0.5 text-black transition hover:bg-neutral-200 active:scale-95"
:class="{ invisible: !hovering }"
@click.stop="onInsertSiblingBeforeButtonClick"
>
<RiArrowUpWideLine size="16px" />
</button>
<button
class="flex h-0 grow select-none items-center justify-center rounded-b-sm border border-t-0 border-black bg-white p-0.5 text-black transition hover:bg-neutral-200 active:scale-95"
:class="{ invisible: !hovering }"
@click.stop="onInsertSiblingAfterButtonClick"
>
<RiArrowDownWideLine size="16px" />
</button>
</div>
<CNoteButton :visible="hovering" @click.stop="onInsertChildButtonClick">
<RiCornerDownRightLine size="16px" />
</CNoteButton>
<div class="w-0.5"></div>
<CNoteButton :visible="hovering">
<RiDeleteBinLine size="16px" />
</CNoteButton>
@ -237,6 +215,16 @@ function onInsertEditorCopy(): void {
<RiEditLine size="16px" />
</CNoteButton>
<div class="w-0.5"></div>
<CNoteButton :visible="hovering" @click.stop="onInsertSiblingBeforeButtonClick">
<RiArrowUpWideLine size="16px" />
</CNoteButton>
<CNoteButton :visible="hovering" @click.stop="onInsertSiblingAfterButtonClick">
<RiArrowDownWideLine size="16px" />
</CNoteButton>
<CNoteButton :visible="hovering" @click.stop="onInsertChildButtonClick">
<RiCornerDownRightLine size="16px" />
</CNoteButton>
<div class="w-0.5"></div>
<CNoteButton
:visible="hovering || pinned"
:inverted="pinned"

View file

@ -62,6 +62,27 @@ export const useNotesStore = defineStore("notes", () => {
note.children.splice(index, 1);
}
function moveChild(fromId: string, segment: Segment, toId: string, toIndex: number): void {
const from = getNote(fromId);
if (!from) return;
const to = getNote(toId);
if (!to) return;
// Find child index
let fromIndex = from.children.indexOf(segment.id);
for (let i = 0; i < segment.iteration; i++) {
fromIndex = from.children.indexOf(segment.id, fromIndex + 1);
}
if (fromIndex < 0) return;
// Fix off-by-one caused by the deletion
if (fromId === toId && fromIndex < toIndex) toIndex--;
from.children.splice(fromIndex, 1);
to.children.splice(toIndex, 0, segment.id);
}
return {
getNote,
getParents,
@ -69,5 +90,6 @@ export const useNotesStore = defineStore("notes", () => {
clearNotes,
addChild,
removeChild,
moveChild,
};
});