Enhance drag-and-drop with hover detection and logging

This commit is contained in:
Thorsten Sommer 2025-10-28 09:41:07 +01:00
parent a88382dc95
commit 1f82155b13
Signed by: tsommer
GPG Key ID: 371BBA77A02C0108
4 changed files with 68 additions and 20 deletions

View File

@ -71,6 +71,6 @@ else
</ExpansionPanel> </ExpansionPanel>
<ExpansionPanel HeaderIcon="@Icons.Material.Filled.DocumentScanner" HeaderText="@(T("Document analysis") + $": {this.selectedPolicy?.PolicyName}")" IsExpanded="@(this.selectedPolicy?.IsProtected ?? false)"> <ExpansionPanel HeaderIcon="@Icons.Material.Filled.DocumentScanner" HeaderText="@(T("Document analysis") + $": {this.selectedPolicy?.PolicyName}")" IsExpanded="@(this.selectedPolicy?.IsProtected ?? false)">
<AttachDocuments @bind-DocumentPaths="@this.loadedDocumentPaths"/> <AttachDocuments Name="Document Analysis Files Drop" @bind-DocumentPaths="@this.loadedDocumentPaths"/>
</ExpansionPanel> </ExpansionPanel>
</MudExpansionPanels> </MudExpansionPanels>

View File

@ -1,15 +1,15 @@
@inherits MSGComponentBase @inherits MSGComponentBase
<MudLink OnClick="@(() => this.AddFilesManually())" Style="text-decoration: none;"> <div @onmouseenter="@this.OnMouseEnter" @onmouseleave="@this.OnMouseLeave">
<MudPaper Height="20em" <MudLink OnClick="@(() => this.AddFilesManually())" Style="text-decoration: none;">
Outlined="true" <MudPaper Height="20em" Outlined="true" Class="@this.dragClass" Style="overflow-y: auto;">
Class="@this.dragClass">
<MudText Typo="Typo.h6"> <MudText Typo="Typo.h6">
Drag and drop files here or click to attach documents. @T("Drag and drop files here or click to attach documents.")
</MudText> </MudText>
@foreach (var fileInfo in this.DocumentPaths.Select(file => new FileInfo(file))) @foreach (var fileInfo in this.DocumentPaths.Select(file => new FileInfo(file)))
{ {
<MudChip T="string" Color="Color.Dark" Text="@fileInfo.Name" tabindex="-1" /> <MudChip T="string" Color="Color.Dark" Text="@fileInfo.Name" tabindex="-1" />
} }
</MudPaper> </MudPaper>
</MudLink> </MudLink>
</div>

View File

@ -7,6 +7,9 @@ namespace AIStudio.Components;
public partial class AttachDocuments : MSGComponentBase public partial class AttachDocuments : MSGComponentBase
{ {
[Parameter]
public string Name { get; set; } = string.Empty;
[Parameter] [Parameter]
public HashSet<string> DocumentPaths { get; set; } = []; public HashSet<string> DocumentPaths { get; set; } = [];
@ -16,6 +19,9 @@ public partial class AttachDocuments : MSGComponentBase
[Parameter] [Parameter]
public Func<HashSet<string>, Task> OnChange { get; set; } = _ => Task.CompletedTask; public Func<HashSet<string>, Task> OnChange { get; set; } = _ => Task.CompletedTask;
[Inject]
private ILogger<AttachDocuments> Logger { get; set; } = null!;
[Inject] [Inject]
private RustService RustService { get; init; } = null!; private RustService RustService { get; init; } = null!;
@ -32,19 +38,29 @@ public partial class AttachDocuments : MSGComponentBase
switch (triggeredEvent) switch (triggeredEvent)
{ {
case Event.TAURI_EVENT_RECEIVED when data is TauriEvent { EventType: TauriEventType.FILE_DROP_HOVERED }: case Event.TAURI_EVENT_RECEIVED when data is TauriEvent { EventType: TauriEventType.FILE_DROP_HOVERED }:
if(!this.isComponentHovered)
{
this.Logger.LogDebug("Attach documents component '{Name}' is not hovered, ignoring file drop hovered event.", this.Name);
return;
}
this.SetDragClass(); this.SetDragClass();
this.StateHasChanged();
break; break;
case Event.TAURI_EVENT_RECEIVED when data is TauriEvent { EventType: TauriEventType.FILE_DROP_DROPPED, Payload: var paths }: case Event.TAURI_EVENT_RECEIVED when data is TauriEvent { EventType: TauriEventType.FILE_DROP_DROPPED, Payload: var paths }:
this.ClearDragClass(); if(!this.isComponentHovered)
{
this.Logger.LogDebug("Attach documents component '{Name}' is not hovered, ignoring file drop dropped event.", this.Name);
return;
}
#warning Filter unsupported files
foreach (var path in paths) foreach (var path in paths)
this.DocumentPaths.Add(path); this.DocumentPaths.Add(path);
await this.DocumentPathsChanged.InvokeAsync(this.DocumentPaths); await this.DocumentPathsChanged.InvokeAsync(this.DocumentPaths);
await this.OnChange(this.DocumentPaths); await this.OnChange(this.DocumentPaths);
break; this.StateHasChanged();
case Event.TAURI_EVENT_RECEIVED when data is TauriEvent { EventType: TauriEventType.FILE_DROP_CANCELED }:
this.ClearDragClass();
break; break;
} }
} }
@ -55,6 +71,8 @@ public partial class AttachDocuments : MSGComponentBase
private string dragClass = DEFAULT_DRAG_CLASS; private string dragClass = DEFAULT_DRAG_CLASS;
private bool isComponentHovered;
private async Task AddFilesManually() private async Task AddFilesManually()
{ {
var selectedFile = await this.RustService.SelectFile(T("Select a file to attach")); var selectedFile = await this.RustService.SelectFile(T("Select a file to attach"));
@ -82,7 +100,23 @@ public partial class AttachDocuments : MSGComponentBase
await this.OnChange(this.DocumentPaths); await this.OnChange(this.DocumentPaths);
} }
private void SetDragClass() => this.dragClass = $"{DEFAULT_DRAG_CLASS} mud-border-primary"; private void SetDragClass() => this.dragClass = $"{DEFAULT_DRAG_CLASS} mud-border-primary border-4";
private void ClearDragClass() => this.dragClass = DEFAULT_DRAG_CLASS; private void ClearDragClass() => this.dragClass = DEFAULT_DRAG_CLASS;
private void OnMouseEnter(EventArgs _)
{
this.Logger.LogDebug("Attach documents component '{Name}' is hovered.", this.Name);
this.isComponentHovered = true;
this.SetDragClass();
this.StateHasChanged();
}
private void OnMouseLeave(EventArgs _)
{
this.Logger.LogDebug("Attach documents component '{Name}' is no longer hovered.", this.Name);
this.isComponentHovered = false;
this.ClearDragClass();
this.StateHasChanged();
}
} }

View File

@ -0,0 +1,14 @@
using Microsoft.AspNetCore.Components;
namespace AIStudio.Tools;
/// <summary>
/// Add handling for more DOM events to Blazor components.
/// </summary>
/// <remarks>
/// See https://learn.microsoft.com/en-us/aspnet/core/blazor/components/event-handling. It is important
/// that this class is named EventHandlers.
/// </remarks>
[EventHandler("onmouseenter", typeof(EventArgs), enableStopPropagation: true, enablePreventDefault: true)]
[EventHandler("onmouseleave", typeof(EventArgs), enableStopPropagation: true, enablePreventDefault: true)]
public static class EventHandlers;