mirror of
https://github.com/MindWorkAI/AI-Studio.git
synced 2026-10-13 13:33:48 +00:00
Unify the drop zones into one component
This commit is contained in:
19 files changed
+278
-505
No files matched your search
@@ -4,7 +4,7 @@
|
||||
|
||||
@* The chat is a drop area: a file dropped anywhere in it hangs itself on the composer, which is
|
||||
what users are used to. *@
|
||||
<DropZoneScope Class="inner-scrolling-context">
|
||||
<PathDropZone IsArea="@true" Class="inner-scrolling-context">
|
||||
|
||||
<MudStack Row="true" AlignItems="AlignItems.Center" Class="mb-2" StretchItems="StretchItems.Start">
|
||||
<MudText Typo="Typo.h3">
|
||||
@@ -168,4 +168,4 @@
|
||||
</MudDrawerContainer>
|
||||
</MudDrawer>
|
||||
}
|
||||
</DropZoneScope>
|
||||
</PathDropZone>
|
||||
@@ -5,8 +5,13 @@
|
||||
@attribute [Route(Routes.PLUGINS)]
|
||||
|
||||
@* The page is its own drop target: a plugin archive may be dropped anywhere on it, and there is no
|
||||
inner zone to hand that role to. Hence the page owns the scope state instead of reading it. *@
|
||||
<DropZoneScope State="@this.dropZoneScope" Class="inner-scrolling-context">
|
||||
inner zone to hand that role to. An area which takes drops itself is that target by definition. *@
|
||||
<PathDropZone IsArea="@true"
|
||||
IdPrefix="plugins-page"
|
||||
Class="inner-scrolling-context"
|
||||
Disabled="@(() => !this.CanCatchDroppedFile())"
|
||||
OnPathsDropped="@this.ImportDroppedPluginArchiveAsync"
|
||||
Context="isDropTarget">
|
||||
<MudStack Row="true" AlignItems="AlignItems.Center" Class="mb-2">
|
||||
<MudText Typo="Typo.h3">
|
||||
@T("Plugins")
|
||||
@@ -26,7 +31,7 @@
|
||||
|
||||
<InnerScrolling>
|
||||
|
||||
<MudTable Items="@PluginFactory.AvailablePlugins" Hover="@true" GroupBy="@this.groupConfig" Class="@this.PluginTableClass">
|
||||
<MudTable Items="@PluginFactory.AvailablePlugins" Hover="@true" GroupBy="@this.groupConfig" Class="@PluginTableClass(isDropTarget)">
|
||||
<ColGroup>
|
||||
<col style="width: 2em;" />
|
||||
<col style="width: 2.1em; "/>
|
||||
@@ -155,4 +160,4 @@
|
||||
</RowTemplate>
|
||||
</MudTable>
|
||||
</InnerScrolling>
|
||||
</DropZoneScope>
|
||||
</PathDropZone>
|
||||
@@ -42,14 +42,6 @@ public partial class Plugins : MSGComponentBase
|
||||
|
||||
private bool isSharingPlugin;
|
||||
|
||||
/// <summary>
|
||||
/// The drop area of this page. The page owns it rather than reading it from a cascading value,
|
||||
/// because a component cannot read what it cascades itself.
|
||||
/// </summary>
|
||||
private readonly DropZoneScopeState dropZoneScope = new($"plugins-page-{Guid.NewGuid():N}");
|
||||
|
||||
private bool isDraggingOverPage;
|
||||
|
||||
private const string IMPORT_ICON =
|
||||
@"<svg class=""mud-icon-root mud-svg-icon mud-dark-text mud-icon-size-medium"" focusable=""false"" viewBox=""0 0 24 24"" aria-hidden=""true"" role=""img"">
|
||||
<path d=""M0 0h24v24H0V0z"" fill=""none""></path>
|
||||
@@ -61,10 +53,7 @@ public partial class Plugins : MSGComponentBase
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
this.ApplyFilters([], [ Event.PLUGINS_RELOADED, Event.CONFIGURATION_CHANGED, Event.HIGHLIGHT_DROP_ZONE, Event.PATHS_DROPPED ]);
|
||||
|
||||
// The whole page is the drop target, so users can drop a plugin archive anywhere on it:
|
||||
this.dropZoneScope.TryBecomeDefaultZone(this);
|
||||
this.ApplyFilters([], [ Event.PLUGINS_RELOADED, Event.CONFIGURATION_CHANGED ]);
|
||||
|
||||
this.groupConfig = new TableGroupDefinition<IPluginMetadata>
|
||||
{
|
||||
@@ -90,12 +79,6 @@ public partial class Plugins : MSGComponentBase
|
||||
await this.TryAutoAuditAssistantsAsync();
|
||||
}
|
||||
|
||||
protected override void DisposeResources()
|
||||
{
|
||||
this.dropZoneScope.ReleaseDefaultZone(this);
|
||||
base.DisposeResources();
|
||||
}
|
||||
|
||||
#endregion
|
||||
|
||||
private async Task PluginActivationStateChanged(IPluginMetadata pluginMeta)
|
||||
@@ -275,7 +258,8 @@ public partial class Plugins : MSGComponentBase
|
||||
/// Highlights the plugin table while the user drags a file over the page, so it is visible
|
||||
/// where the file would land.
|
||||
/// </summary>
|
||||
private string PluginTableClass => this.isDraggingOverPage
|
||||
/// <param name="isDropTarget">Whether the page is the target of the drop being aimed right now.</param>
|
||||
private static string PluginTableClass(bool isDropTarget) => isDropTarget
|
||||
? "border-dashed border rounded-lg mud-border-primary border-4"
|
||||
: "border-dashed border rounded-lg";
|
||||
|
||||
@@ -570,54 +554,11 @@ public partial class Plugins : MSGComponentBase
|
||||
case Event.CONFIGURATION_CHANGED:
|
||||
await this.InvokeAsync(this.StateHasChanged);
|
||||
break;
|
||||
|
||||
case Event.HIGHLIGHT_DROP_ZONE when data is DropZoneHighlight highlight:
|
||||
this.ApplyHighlight(this.IsThisZone(highlight.ZoneId));
|
||||
break;
|
||||
|
||||
case Event.PATHS_DROPPED when data is DroppedPaths dropped:
|
||||
// Whoever the drop was meant for, the drag is over and nothing stays highlighted:
|
||||
this.ApplyHighlight(false);
|
||||
|
||||
if (!this.IsThisZone(dropped.ZoneId))
|
||||
return;
|
||||
|
||||
if (!this.CanCatchDroppedFile())
|
||||
{
|
||||
LOG.LogDebug("The plugins page cannot import right now and swallowed {Count} dropped path(s).", dropped.Paths.Count);
|
||||
return;
|
||||
}
|
||||
|
||||
await this.ImportDroppedPluginArchiveAsync(dropped.Paths);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
#endregion
|
||||
|
||||
/// <summary>
|
||||
/// Decides whether the named zone is this page.
|
||||
/// </summary>
|
||||
/// <param name="zoneId">The ID the hit test reported, or null when it hit nothing.</param>
|
||||
private bool IsThisZone(string? zoneId) => zoneId is not null && zoneId == this.dropZoneScope.ScopeId;
|
||||
|
||||
/// <summary>
|
||||
/// Marks the page as the drop target, or takes that mark away.
|
||||
/// </summary>
|
||||
/// <remarks>
|
||||
/// The comparison is not for tidiness: a throttled drag-over event arrives about ten times per
|
||||
/// second, and without it every one of them would render the whole plugin table anew.
|
||||
/// </remarks>
|
||||
private void ApplyHighlight(bool shouldBeHighlighted)
|
||||
{
|
||||
var highlighted = shouldBeHighlighted && this.CanCatchDroppedFile();
|
||||
if (highlighted == this.isDraggingOverPage)
|
||||
return;
|
||||
|
||||
this.isDraggingOverPage = highlighted;
|
||||
this.StateHasChanged();
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// Decides whether this page may process dropped files: only when the organization allows
|
||||
/// importing plugins at all and no import is running.
|
||||
|
||||
Reference in new issue
Block a user