Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-27 00:06:30 +01:00
Code Issues Packages Projects Releases Activity

feat(views/board): drag works in between columns

Browse Source
This commit is contained in:
Elian Doran
2025-07-23 18:26:20 +03:00
parent cb37724879
commit 4047452b0f
2 changed files with 18 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
apps/client/src/widgets/view_widgets/board_view/drag_handler.ts
View File

@@ -62,7 +62,6 @@ export class BoardDragHandler {
$dragHandle.on("dragend", () => { $dragHandle.on("dragend", () => {
$columnEl.removeClass("column-dragging"); $columnEl.removeClass("column-dragging");
this.$container.find('.board-column').removeClass('column-drag-over');
this.context.draggedColumn = null; this.context.draggedColumn = null;
this.context.draggedColumnElement = null; this.context.draggedColumnElement = null;
this.cleanupColumnDropIndicators(); this.cleanupColumnDropIndicators();
@@ -109,7 +108,6 @@ export class BoardDragHandler {
cleanup() { cleanup() {
this.cleanupAllDropIndicators(); this.cleanupAllDropIndicators();
this.$container.find('.board-column').removeClass('drag-over'); this.$container.find('.board-column').removeClass('drag-over');
this.$container.find('.board-column').removeClass('column-drag-over');
this.context.draggedColumn = null; this.context.draggedColumn = null;
this.context.draggedColumnElement = null; this.context.draggedColumnElement = null;
this.cleanupGlobalColumnDragTracking(); this.cleanupGlobalColumnDragTracking();
@@ -285,33 +283,16 @@ export class BoardDragHandler {
originalEvent.dataTransfer.dropEffect = "move"; originalEvent.dataTransfer.dropEffect = "move";
} }
if (this.context.draggedColumn !== columnValue) { // Don't highlight columns - we only care about the drop indicator position
$columnEl.addClass("column-drag-over");
}
}
});
$columnEl.on("dragleave", (e) => {
if (this.context.draggedColumn && !this.context.draggedNote) {
const rect = $columnEl[0].getBoundingClientRect();
const originalEvent = e.originalEvent as DragEvent;
const x = originalEvent.clientX;
const y = originalEvent.clientY;
if (x < rect.left || x > rect.right || y < rect.top || y > rect.bottom) {
$columnEl.removeClass("column-drag-over");
}
} }
}); });
$columnEl.on("drop", async (e) => { $columnEl.on("drop", async (e) => {
if (this.context.draggedColumn && !this.context.draggedNote) { if (this.context.draggedColumn && !this.context.draggedNote) {
e.preventDefault(); e.preventDefault();
$columnEl.removeClass("column-drag-over");
if (this.context.draggedColumn !== columnValue) { // Use the drop indicator position to determine where to place the column
await this.handleColumnDrop($columnEl, columnValue); await this.handleColumnDrop();
}
} }
}); });
} }
@@ -499,31 +480,30 @@ export class BoardDragHandler {
} }
} }
private async handleColumnDrop($targetColumnEl: JQuery<HTMLElement>, targetColumnValue: string) { private async handleColumnDrop() {
if (!this.context.draggedColumn || !this.context.draggedColumnElement) { if (!this.context.draggedColumn || !this.context.draggedColumnElement) {
return; return;
} }
try { try {
// Get current column order from the DOM
const currentOrder = Array.from(this.$container.find('.board-column')).map(el =>
$(el).attr('data-column')
).filter(col => col) as string[];
console.log("Current order:", currentOrder);
console.log("Dragged column:", this.context.draggedColumn);
console.log("Target column:", targetColumnValue);
// Find the drop indicator to determine insert position // Find the drop indicator to determine insert position
const $dropIndicator = this.$container.find(".column-drop-indicator.show"); const $dropIndicator = this.$container.find(".column-drop-indicator.show");
if ($dropIndicator.length > 0) { if ($dropIndicator.length > 0) {
// Get current column order from the DOM
const currentOrder = Array.from(this.$container.find('.board-column')).map(el =>
$(el).attr('data-column')
).filter(col => col) as string[];
console.log("Current order:", currentOrder);
console.log("Dragged column:", this.context.draggedColumn);
let newOrder = [...currentOrder]; let newOrder = [...currentOrder];
// Remove dragged column from current position // Remove dragged column from current position
newOrder = newOrder.filter(col => col !== this.context.draggedColumn); newOrder = newOrder.filter(col => col !== this.context.draggedColumn);
// Determine insertion position based on drop indicator // Determine insertion position based on drop indicator position
const $nextColumn = $dropIndicator.next('.board-column'); const $nextColumn = $dropIndicator.next('.board-column');
const $prevColumn = $dropIndicator.prev('.board-column'); const $prevColumn = $dropIndicator.prev('.board-column');
@@ -533,21 +513,25 @@ export class BoardDragHandler {
// Insert before the next column // Insert before the next column
const nextColumnValue = $nextColumn.attr('data-column'); const nextColumnValue = $nextColumn.attr('data-column');
insertIndex = newOrder.indexOf(nextColumnValue!); insertIndex = newOrder.indexOf(nextColumnValue!);
console.log("Inserting before column:", nextColumnValue, "at index:", insertIndex);
} else if ($prevColumn.length > 0) { } else if ($prevColumn.length > 0) {
// Insert after the previous column // Insert after the previous column
const prevColumnValue = $prevColumn.attr('data-column'); const prevColumnValue = $prevColumn.attr('data-column');
insertIndex = newOrder.indexOf(prevColumnValue!) + 1; insertIndex = newOrder.indexOf(prevColumnValue!) + 1;
console.log("Inserting after column:", prevColumnValue, "at index:", insertIndex);
} else { } else {
// Insert at the beginning // Insert at the beginning
insertIndex = 0; insertIndex = 0;
console.log("Inserting at the beginning");
} }
// Insert the dragged column at the determined position // Insert the dragged column at the determined position
if (insertIndex >= 0) { if (insertIndex >= 0 && insertIndex <= newOrder.length) {
newOrder.splice(insertIndex, 0, this.context.draggedColumn); newOrder.splice(insertIndex, 0, this.context.draggedColumn);
} else { } else {
// Fallback: insert at the end // Fallback: insert at the end
newOrder.push(this.context.draggedColumn); newOrder.push(this.context.draggedColumn);
console.log("Fallback: inserting at the end");
} }
console.log("New order:", newOrder); console.log("New order:", newOrder);

5
apps/client/src/widgets/view_widgets/board_view/index.ts
View File

@@ -106,11 +106,6 @@ const TPL = /*html*/`
transition: opacity 0.2s ease, transform 0.2s ease; transition: opacity 0.2s ease, transform 0.2s ease;
} }
.board-view-container .board-column.column-drag-over {
border-color: var(--main-text-color);
background-color: var(--hover-item-background-color);
}
.board-view-container .board-column h3 input { .board-view-container .board-column h3 input {
background: transparent; background: transparent;
border: none; border: none;