Export X6 Flowchart Content

src/modules/Elsa.Studio.Workflows.Core/UI/Contracts/IDiagramDesigner.cs

@@ -1,7 +1,6 @@
 using System.Text.Json.Nodes;
 using Elsa.Studio.Workflows.Domain.Models;
 using Elsa.Studio.Workflows.UI.Contexts;
-using Elsa.Studio.Workflows.UI.Models;
 using Microsoft.AspNetCore.Components;
 
 namespace Elsa.Studio.Workflows.UI.Contracts;

src/modules/Elsa.Studio.Workflows.Designer/ClientLib/package.json

@@ -8,6 +8,7 @@
     "@antv/layout": "^0.3.25",
     "@antv/x6": "^2.18.1",
     "@antv/x6-plugin-clipboard": "^2.1.6",
+    "@antv/x6-plugin-export": "^2.1.6",
     "@antv/x6-plugin-history": "^2.2.4",
     "@antv/x6-plugin-keyboard": "^2.2.3",
     "@antv/x6-plugin-scroller": "^2.0.10",

src/modules/Elsa.Studio.Workflows.Designer/ClientLib/src/designer/api/create-graph.ts

@@ -4,7 +4,8 @@ import {Snapline} from "@antv/x6-plugin-snapline";
 import {Transform} from "@antv/x6-plugin-transform";
 import {Keyboard} from "@antv/x6-plugin-keyboard";
 import {Clipboard} from '@antv/x6-plugin-clipboard';
-import {History} from '@antv/x6-plugin-history';
+import { History } from '@antv/x6-plugin-history';
+import { Export } from "@antv/x6-plugin-export";
 import {DotNetComponentRef, graphBindings} from "./graph-bindings";
 import {DotNetFlowchartDesigner} from "./dotnet-flowchart-designer";
 import {Activity} from "../models";
@@ -109,6 +110,8 @@ export async function createGraph(containerId: string, componentRef: DotNetCompo
         }
     });
 
+    graph.use(new Export());
+
     graph.use(
         new History({
             enabled: true,

src/modules/Elsa.Studio.Workflows.Designer/ClientLib/src/designer/api/export-content.ts

@@ -0,0 +1,30 @@
+import { graphBindings } from "./graph-bindings";
+
+export interface CaptureOptions {
+    fileName?: string;
+    padding?: number;
+    format?: string;
+}
+
+export function exportContentToJPEG(graphId: string, options: CaptureOptions) {
+    const { graph } = graphBindings[graphId];
+    if (!graph) return;
+
+    graph.exportJPEG(options.fileName + ".jpeg", {
+        padding: options.padding,
+    });
+}
+export function exportContentToPNG(graphId: string, options: CaptureOptions) {
+    const { graph } = graphBindings[graphId];
+    if (!graph) return;
+
+    graph.exportPNG(options.fileName + ".png", {
+        padding: options.padding,
+    });
+}
+export function exportContentToSVG(graphId: string, options: CaptureOptions) {
+    const { graph } = graphBindings[graphId];
+    if (!graph) return;
+
+    graph.exportSVG(options.fileName + ".svg", {});
+}

src/modules/Elsa.Studio.Workflows.Designer/ClientLib/src/designer/api/index.ts

@@ -3,6 +3,7 @@ export * from './calculate-activity-size';
 export * from './center-content';
 export * from './create-graph';
 export * from './dispose-graph';
+export * from './export-content';
 export * from './graph-bindings';
 export * from './load-graph';
 export * from './paste-cells';

src/modules/Elsa.Studio.Workflows.Designer/Components/FlowchartDesigner.razor.cs

@@ -327,6 +327,12 @@ public async Task SelectActivityAsync(string id)
     /// </summary>
     public async Task CenterContentAsync() => await ScheduleGraphActionAsync(() => _graphApi.CenterContentAsync());
 
+    /// <summary>
+    /// Exports the graphs content to a supplied format.
+    /// </summary>
+    /// <param name="captureOptions">The capture options</param>
+    public async Task ExportContentToFormatAsync(CaptureOptions captureOptions) => await ScheduleGraphActionAsync(() => _graphApi.ExportContentToFormatAsync(captureOptions));
+
     /// Update the Graph Layout.
     public async Task AutoLayoutAsync(
         JsonObject activity,

src/modules/Elsa.Studio.Workflows.Designer/Elsa.Studio.Workflows.Designer.csproj

@@ -6,25 +6,16 @@
     </PropertyGroup>
 
     <ItemGroup>
-        <SupportedPlatform Include="browser"/>
+        <SupportedPlatform Include="browser" />
     </ItemGroup>
 
     <ItemGroup>
-        <Folder Include="wwwroot\"/>
+        <Folder Include="wwwroot\" />
     </ItemGroup>
 
     <ItemGroup>
-        <ProjectReference Include="..\..\framework\Elsa.Studio.Core\Elsa.Studio.Core.csproj"/>
-        <ProjectReference Include="..\Elsa.Studio.Workflows.Core\Elsa.Studio.Workflows.Core.csproj"/>
-    </ItemGroup>
-
-    <ItemGroup>
-        <!-- Prevents build error on GH Actions -->
-        <Content Remove="ClientLib\package-lock.json;ClientLib\package.json;ClientLib\tsconfig.json"/>
-        <!--                <None Include="ClientLib\package-lock.json;ClientLib\package.json;ClientLib\tsconfig.json">-->
-        <!--                    <CopyToOutputDirectory>Never</CopyToOutputDirectory>-->
-        <!--                    <CopyToPublishDirectory>Never</CopyToPublishDirectory>-->
-        <!--                </None>-->
+        <ProjectReference Include="..\..\framework\Elsa.Studio.Core\Elsa.Studio.Core.csproj" />
+        <ProjectReference Include="..\Elsa.Studio.Workflows.Core\Elsa.Studio.Workflows.Core.csproj" />
     </ItemGroup>
 
 </Project>

src/modules/Elsa.Studio.Workflows.Designer/Interop/X6GraphApi.cs

@@ -3,6 +3,7 @@
 using System.Text.Json.Serialization;
 using Elsa.Studio.Workflows.Designer.Contracts;
 using Elsa.Studio.Workflows.Designer.Models;
+using Elsa.Studio.Workflows.Designer.Options;
 using Microsoft.Extensions.DependencyInjection;
 using Microsoft.JSInterop;
 
@@ -93,6 +94,9 @@ public async Task LoadGraphAsync(X6Graph graph)
     /// Center the canvas content.
     public async Task CenterContentAsync() => await InvokeAsync(module => module.InvokeVoidAsync("centerContent", _containerId));
 
+    /// Exports the graphs content to a supplied 
+    public async Task ExportContentToFormatAsync(CaptureOptions captureOptions) => await InvokeAsync(module => module.InvokeVoidAsync($"exportContentTo{captureOptions.Format}", _containerId, captureOptions));
+
     /// Adjusts the graph layout.
     public async Task AutoLayoutAsync(X6Graph graph)
     {

src/modules/Elsa.Studio.Workflows.Designer/Options/CaptureOptions.cs

@@ -0,0 +1,28 @@
+using System.ComponentModel.DataAnnotations;
+
+namespace Elsa.Studio.Workflows.Designer.Options;
+
+/// <summary>
+/// Represents the workflow capture options
+/// </summary>
+public class CaptureOptions
+{
+    /// <summary>
+    /// Gets or sets the export format.
+    /// Supported formats are JPEG, SVG and PNG.
+    /// Default: PNG.
+    /// </summary>
+    [Required] public string? Format { get; set; } = "PNG";
+
+    /// <summary>
+    /// Gets or sets the filename.
+    /// Default: Flowchart
+    /// </summary>
+    [Required] public string? FileName { get; set; } = "Flowchart";
+
+    /// <summary>
+    /// Gets or sets the padding around the workflow.
+    /// Default: 150.
+    /// </summary>
+    public int Padding { get; set; } = 150;
+}

src/modules/Elsa.Studio.Workflows/DiagramDesigners/Flowcharts/CaptureFlowChartDialog.razor.cs

@@ -0,0 +1,48 @@
+using Blazored.FluentValidation;
+using Elsa.Studio.Workflows.Designer.Options;
+using Elsa.Studio.Workflows.Validators;
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Forms;
+using MudBlazor;
+
+namespace Elsa.Studio.Workflows.DiagramDesigners.Flowcharts
+{
+    public partial class CaptureFlowchartDialog
+    {
+        private readonly CaptureOptions _captureModel = new();
+        private EditContext _editContext = null!;
+        private CaptureOptionsValidator _validator = null!;
+        private FluentValidationValidator _fluentValidationValidator = null!;
+        private bool loading = false;
+
+        [CascadingParameter] private IMudDialogInstance MudDialog { get; set; } = null!;
+        [Parameter] public string FileName { get; set; } = null!;
+
+        protected override void OnParametersSet()
+        {
+            _captureModel.FileName = FileName;
+            _editContext = new(_captureModel);
+            _validator = new(Localizer);
+        }
+
+        private Task OnCancelClicked()
+        {
+            MudDialog.Cancel();
+            return Task.CompletedTask;
+        }
+
+        private async Task OnSubmitClicked()
+        {
+            if (!await _fluentValidationValidator.ValidateAsync())
+                return;
+
+            await OnValidSubmit();
+        }
+
+        private Task OnValidSubmit()
+        {
+            MudDialog.Close(_captureModel);
+            return Task.CompletedTask;
+        }
+    }
+}

src/modules/Elsa.Studio.Workflows/DiagramDesigners/Flowcharts/CaptureFlowchartDialog.razor

@@ -0,0 +1,28 @@
+@using Variant = MudBlazor.Variant
+@inherits StudioComponentBase
+@using Elsa.Studio.Workflows.Services
+@inject ILocalizer Localizer
+
+<MudDialog>
+    <DialogContent>
+        <EditForm EditContext="_editContext" OnValidSubmit="OnValidSubmit">
+            <FluentValidationValidator @ref="_fluentValidationValidator" Validator="_validator" DisableAssemblyScanning="true" />
+            <MudStack>
+                <MudRadioGroup @bind-Value="_captureModel.Format">
+                    <MudRadio T="string" Value="@("PNG")" Dense="true" Size="Size.Medium">PNG</MudRadio>
+                    <MudRadio T="string" Value="@("JPEG")" Dense="true" Size="Size.Medium">JPEG</MudRadio>
+                    <MudRadio T="string" Value="@("SVG")" Dense="true" Size="Size.Medium">SVG</MudRadio>
+                </MudRadioGroup>
+                <MudTextField Label="@Localizer["File name"]" @bind-Value="_captureModel.FileName" For="@(() => _captureModel.FileName)" HelperText="@Localizer["Name of the exported file. The extension is added automatically."]" Variant="Variant.Outlined" Margin="Margin.Dense" />
+                @if (_captureModel.Format != "SVG")
+                {
+                    <MudNumericField Label="@Localizer["Padding"]" @bind-Value="_captureModel.Padding" For="@(() => _captureModel.Padding)" HelperText="@Localizer["Padding around the captured flowchart."]" Variant="Variant.Outlined" Margin="Margin.Dense" Min="0" />
+                }
+            </MudStack>
+        </EditForm>
+    </DialogContent>
+    <DialogActions>
+        <MudButton Disabled="loading" OnClick="OnCancelClicked">@Localizer["Cancel"]</MudButton>
+        <MudButton Color="Color.Primary" OnClick="OnSubmitClicked">@Localizer["Ok"]</MudButton>
+    </DialogActions>
+</MudDialog>

src/modules/Elsa.Studio.Workflows/DiagramDesigners/Flowcharts/FlowchartDesignerWrapper.razor.cs

@@ -1,10 +1,9 @@
-using System.Text.Json;
-using System.Text.Json.Nodes;
 using Elsa.Api.Client.Extensions;
 using Elsa.Api.Client.Resources.ActivityDescriptors.Enums;
 using Elsa.Api.Client.Resources.ActivityDescriptors.Models;
 using Elsa.Api.Client.Shared.Models;
 using Elsa.Studio.Workflows.Designer.Components;
+using Elsa.Studio.Workflows.Designer.Options;
 using Elsa.Studio.Workflows.Domain.Contracts;
 using Elsa.Studio.Workflows.Domain.Models;
 using Elsa.Studio.Workflows.Extensions;
@@ -14,6 +13,8 @@
 using Humanizer;
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Web;
+using System.Text.Json;
+using System.Text.Json.Nodes;
 
 namespace Elsa.Studio.Workflows.DiagramDesigners.Flowcharts;
 
@@ -137,7 +138,14 @@ public async Task UpdateActivityAsync(string id, JsonObject activity)
     /// Centers the content of the designer.
     /// </summary>
     public async Task CenterContentAsync() => await Designer.CenterContentAsync();
-
+
+    /// <summary>
+    /// Exports the graphs content to a supplied format.
+    /// </summary>
+    /// <param name="captureOptions">The capture options</param>
+    /// <returns></returns>
+    public async Task ExportContentToFormatAsync(CaptureOptions captureOptions) => await Designer.ExportContentToFormatAsync(captureOptions);
+
     /// <summary>
     /// Auto layouts the flowchart.
     /// </summary>
@@ -207,7 +215,4 @@ private async Task OnCanvasSelected()
         if (ActivitySelected.HasDelegate)
             await ActivitySelected.InvokeAsync(Flowchart);
     }
-
-    private async Task OnZoomToFitClick() => await Designer.ZoomToFitAsync();
-    private async Task OnCenterContentClick() => await Designer.CenterContentAsync();
 }