gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-30 19:19:03 +01:00
Code Issues Actions 8 Packages Projects Releases Wiki Activity

feat(views/board): add drag preview when using touch

Browse Source
This commit is contained in:
Elian Doran 2025-07-21 10:55:01 +03:00
parent eb76362de4
commit 482b592f77
No known key found for this signature in database
1 changed files with 52 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -192,6 +192,22 @@ const TPL = /*html*/`
margin-right: 0.5em; margin-right: 0.5em;
font-size: 1.2em; font-size: 1.2em;
} }
.board-drag-preview {
position: fixed;
z-index: 10000;
pointer-events: none;
opacity: 0.8;
transform: rotate(5deg);
box-shadow: 4px 8px 16px rgba(0, 0, 0, 0.5);
background-color: var(--main-background-color);
border: 1px solid var(--main-border-color);
border-radius: 5px;
padding: 0.5em;
font-size: 0.9em;
max-width: 200px;
word-wrap: break-word;
}
</style> </style>
<div class="board-view-container"></div> <div class="board-view-container"></div>
@ -361,12 +377,14 @@ export default class BoardView extends ViewMode<BoardData> {
let startY = 0; let startY = 0;
let startX = 0; let startX = 0;
let dragThreshold = 10; // Minimum distance to start dragging let dragThreshold = 10; // Minimum distance to start dragging
let $dragPreview: JQuery<HTMLElement> | null = null;
$noteEl.on("touchstart", (e) => { $noteEl.on("touchstart", (e) => {
const touch = (e.originalEvent as TouchEvent).touches[0]; const touch = (e.originalEvent as TouchEvent).touches[0];
startX = touch.clientX; startX = touch.clientX;
startY = touch.clientY; startY = touch.clientY;
isDragging = false; isDragging = false;
$dragPreview = null;
}); });
$noteEl.on("touchmove", (e) => { $noteEl.on("touchmove", (e) => {
@ -382,9 +400,18 @@ export default class BoardView extends ViewMode<BoardData> {
this.draggedBranch = branch; this.draggedBranch = branch;
this.draggedNoteElement = $noteEl; this.draggedNoteElement = $noteEl;
$noteEl.addClass("dragging"); $noteEl.addClass("dragging");
// Create drag preview
$dragPreview = this.createDragPreview($noteEl, touch.clientX, touch.clientY);
} }
if (isDragging) { if (isDragging && $dragPreview) {
// Update drag preview position
$dragPreview.css({
left: touch.clientX - ($dragPreview.outerWidth() || 0) / 2,
top: touch.clientY - ($dragPreview.outerHeight() || 0) / 2
});
// Find element under touch point // Find element under touch point
const elementBelow = document.elementFromPoint(touch.clientX, touch.clientY); const elementBelow = document.elementFromPoint(touch.clientX, touch.clientY);
if (elementBelow) { if (elementBelow) {
@ -428,6 +455,12 @@ export default class BoardView extends ViewMode<BoardData> {
this.draggedNoteElement = null; this.draggedNoteElement = null;
this.$container.find('.board-column').removeClass('drag-over'); this.$container.find('.board-column').removeClass('drag-over');
this.$container.find(".board-drop-indicator").removeClass("show"); this.$container.find(".board-drop-indicator").removeClass("show");
// Remove drag preview
if ($dragPreview) {
$dragPreview.remove();
$dragPreview = null;
}
} }
isDragging = false; isDragging = false;
}); });
@ -602,6 +635,24 @@ export default class BoardView extends ViewMode<BoardData> {
$dropIndicator.addClass("show"); $dropIndicator.addClass("show");
} }
private createDragPreview($noteEl: JQuery<HTMLElement>, x: number, y: number): JQuery<HTMLElement> {
// Clone the note element for the preview
const $preview = $noteEl.clone();
$preview
.addClass('board-drag-preview')
.css({
position: 'fixed',
left: x - ($noteEl.outerWidth() || 0) / 2,
top: y - ($noteEl.outerHeight() || 0) / 2,
pointerEvents: 'none',
zIndex: 10000
})
.appendTo('body');
return $preview;
}
private async handleNoteDrop($columnEl: JQuery<HTMLElement>, column: string) { private async handleNoteDrop($columnEl: JQuery<HTMLElement>, column: string) {
const draggedNoteElement = this.draggedNoteElement; const draggedNoteElement = this.draggedNoteElement;
const draggedNote = this.draggedNote; const draggedNote = this.draggedNote;