添加一些widget的支持

Author: syminomega

src/components/BootstrapBlazor.NodeGraph/Components/NodeGraphCanvas.razor

@@ -3,6 +3,7 @@
 @attribute [JSModuleAutoLoader("./_content/BootstrapBlazor.NodeGraph/js/Graph.js", AutoInvokeDispose = false, JSObjectReference = true)]
 @inherits BootstrapModuleComponentBase
 
+@inject NodeGraphService NodeGraphService
 @inject ILogger<NodeGraphCanvas> Logger
 
 <div class="@ClassString" @attributes="@AdditionalAttributes" id="@Id">
@@ -15,22 +16,20 @@
         .AddClassFromAttributes(AdditionalAttributes)
         .Build();
 
-    [Parameter]
-    public Graph? Graph { get; set; }
-
     private IJSObjectReference _graphCanvasRef = null!;
     private ElementReference _graphCanvas;
 
-
     /// <inheritdoc />
     protected override async Task InvokeInitAsync()
     {
-        await InvokeVoidAsync("init", Id);
+        // 初始化并添加引用
+        await InvokeVoidAsync("init", Id, DotNetObjectReference.Create(NodeGraphService));
+        // 创建图表配置
         var graphRef = await InvokeAsync<IJSObjectReference>("createLGraph");
-        Graph = new Graph(graphRef!);
+        // var graph = new Graph(graphRef!);
+        // 创建图表画布
         _graphCanvasRef = await InvokeAsync<IJSObjectReference>("createLGraphCanvas", _graphCanvas, graphRef)
-                         ?? throw new InvalidOperationException("Create GraphCanvas failed!");
-        // await InvokeVoidAsync("constructGraphNode", "测试节点");
+                          ?? throw new InvalidOperationException("Create GraphCanvas failed!");
     }
 
 }

…BootstrapBlazor.NodeGraph/_Imports.razor …azor.NodeGraph/Components/_Imports.razorsrc/components/BootstrapBlazor.NodeGraph/_Imports.razor renamed to src/components/BootstrapBlazor.NodeGraph/Components/_Imports.razor src/components/BootstrapBlazor.NodeGraph/_Imports.razor renamed to src/components/BootstrapBlazor.NodeGraph/Components/_Imports.razor

@@ -0,0 +1,57 @@
+// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+// Website: https://www.blazor.zone or https://argozhang.github.io/
+
+namespace BootstrapBlazor.Components.Data.Interop;
+
+/// <summary>
+/// 节点插槽
+/// </summary>
+public class NodeSlot
+{
+    /// <summary>
+    /// 插槽名称
+    /// </summary>
+    public string Name { get; set; } = string.Empty;
+
+    /// <summary>
+    /// 插槽类型 TypeName
+    /// </summary>
+    public string Type { get; set; } = string.Empty;
+}
+
+/// <summary>
+/// 节点配置
+/// </summary>
+public class GraphNodeConfig
+{
+    /// <summary>
+    /// 节点唯一类型路径，形如 groupA/groupB/NodeName
+    /// </summary>
+    public string TypePath { get; set; } = null!;
+
+    /// <summary>
+    /// 节点名称
+    /// </summary>
+    public string DisplayName { get; set; } = string.Empty;
+
+    /// <summary>
+    /// 输入插槽
+    /// </summary>
+    public List<NodeSlot> Inputs { get; set; } = new();
+
+    /// <summary>
+    /// 输出插槽
+    /// </summary>
+    public List<NodeSlot> Outputs { get; set; } = new();
+
+    /// <summary>
+    /// 节点组件
+    /// </summary>
+    public List<NodeWidget> Widgets { get; set; } = new();
+
+    /// <summary>
+    /// 是否有执行方法
+    /// </summary>
+    public bool HasAction { get; set; }
+}

src/components/BootstrapBlazor.NodeGraph/Data/Interop/NodeRegister.cs

@@ -0,0 +1,150 @@
+// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+// Website: https://www.blazor.zone or https://argozhang.github.io/
+
+using System.Text.Json.Serialization;
+
+namespace BootstrapBlazor.Components.Data;
+
+/// <summary>
+/// 节点组件配置
+/// </summary>
+public abstract record WidgetOptions
+{
+    // public string? On { get; set; }
+    // public string? Off { get; set; }
+
+    /// <summary>
+    /// 是否只读
+    /// </summary>
+    public bool? ReadOnly { get; set; }
+
+    // public int? Y { get; set; }
+    // public bool? Multiline { get; set; }
+
+    // TODO: 待测试
+    public string? Property { get; set; }
+
+    /// <summary>
+    /// 不显示可编辑组件
+    /// </summary>
+    public bool? Socketless { get; set; }
+
+    // TODO: Combo中使用
+    // public TValue[]? Values { get; set; }
+}
+
+/// <summary>
+/// 布尔组件配置
+/// </summary>
+public record BooleanWidgetOptions : WidgetOptions
+{
+}
+
+/// <summary>
+/// 数字组件配置
+/// </summary>
+public record NumberWidgetOptions : WidgetOptions
+{
+    /// <summary>
+    /// 最小值
+    /// </summary>
+    public double? Min { get; set; }
+
+    /// <summary>
+    /// 最大值
+    /// </summary>
+    public double? Max { get; set; }
+
+    // step 已经废弃
+    /// <summary>
+    /// 步长
+    /// </summary>
+    [JsonPropertyName("step2")]
+    public double? Step { get; set; }
+
+    /// <summary>
+    /// 精度
+    /// </summary>
+    public int? Precision { get; set; }
+}
+
+/// <summary>
+/// 滑动条组件配置
+/// </summary>
+public record SliderWidgetOptions : WidgetOptions
+{
+    /// <summary>
+    /// 最小值
+    /// </summary>
+    public double Min { get; set; }
+
+    /// <summary>
+    /// 最大值
+    /// </summary>
+    public double Max { get; set; }
+
+    // step 已经废弃
+    /// <summary>
+    /// 步长
+    /// </summary>
+    [JsonPropertyName("step2")]
+    public double? Step { get; set; }
+
+    /// <summary>
+    /// 精度
+    /// </summary>
+    public int? Precision { get; set; }
+
+    // TODO: CanvasColour
+    // public object? SliderColor { get; set; } // TODO: Replace with actual type for CanvasColour
+    // public object? MarkerColor { get; set; } // TODO: Replace with actual type for CanvasColour
+}
+
+/// <summary>
+/// 旋钮组件配置
+/// </summary>
+public record KnobWidgetOptions : WidgetOptions
+{
+    /// <summary>
+    /// 最小值
+    /// </summary>
+    public double Min { get; set; }
+
+    /// <summary>
+    /// 最大值
+    /// </summary>
+    public double Max { get; set; }
+
+    // step 已经废弃
+    /// <summary>
+    /// 步长
+    /// </summary>
+    [JsonPropertyName("step2")]
+    public double? Step { get; set; }
+
+    /// <summary>
+    /// 精度
+    /// </summary>
+    public int? Precision { get; set; }
+
+    // TODO: CanvasColour
+    // public object? SliderColor { get; set; } // TODO: Replace with actual type for CanvasColour
+    // public object? MarkerColor { get; set; } // TODO: Replace with actual type for CanvasColour
+
+    // public string? GradientStops { get; set; }
+}
+
+/// <summary>
+/// 文本组件配置
+/// </summary>
+public record StringWidgetOptions : WidgetOptions
+{
+}
+
+/// <summary>
+/// 按钮组件配置
+/// </summary>
+public record ButtonWidgetOptions : WidgetOptions
+{
+}

src/components/BootstrapBlazor.NodeGraph/Data/WidgetsConfig.cs

@@ -4,7 +4,38 @@
 
 namespace BootstrapBlazor.Components;
 
-public class GraphNode
+public class GraphNode : IAsyncDisposable
 {
-    
+    private IJSObjectReference _graphNodeReference;
+
+    internal GraphNode(IJSObjectReference graphNodeReference)
+    {
+        _graphNodeReference = graphNodeReference;
+    }
+
+    /// <inheritdoc />
+    public ValueTask DisposeAsync()
+    {
+        return _graphNodeReference.DisposeAsync();
+    }
+
+    public ValueTask<T?> GetInputData<T>(int slotIndex)
+    {
+        return _graphNodeReference.InvokeAsync<T?>("getInputData", slotIndex);
+    }
+
+    public ValueTask<T?> GetOutputData<T>(int slotIndex)
+    {
+        return _graphNodeReference.InvokeAsync<T?>("getOutputData", slotIndex);
+    }
+
+    public ValueTask SetInputData<T>(int slotIndex, T inputData)
+    {
+        return _graphNodeReference.InvokeVoidAsync("setInputData", inputData);
+    }
+
+    public ValueTask SetOutputData<T>(int slotIndex, T outputData)
+    {
+        return _graphNodeReference.InvokeVoidAsync("setOutputData", outputData);
+    }
 }

src/components/BootstrapBlazor.NodeGraph/GraphNode.cs

@@ -0,0 +1,21 @@
+// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+// Website: https://www.blazor.zone or https://argozhang.github.io/
+
+namespace BootstrapBlazor.Components.Interfaces;
+
+public interface INodeSlot
+{
+    /// <summary>
+    /// slot name
+    /// </summary>
+    public string Name { get; set; }
+    /// <summary>
+    /// node下的唯一id
+    /// </summary>
+    public string Id { get; set; }
+    /// <summary>
+    /// 数据类型
+    /// </summary>
+    public Type ValueType { get; }
+}

src/components/BootstrapBlazor.NodeGraph/Interfaces/INodeSlot.cs

@@ -0,0 +1,57 @@
+// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+// Website: https://www.blazor.zone or https://argozhang.github.io/
+
+using BootstrapBlazor.Components.Data;
+
+namespace BootstrapBlazor.Components.Interfaces;
+
+/// <summary>
+/// 节点组件接口
+/// </summary>
+public interface INodeWidget
+{
+    /// <summary>
+    /// 节点组件类型
+    /// </summary>
+    public NodeWidgetType WidgetType { get; }
+
+    /// <summary>
+    /// 节点组件名称
+    /// </summary>
+    public string DisplayName { get; set; }
+
+    /// <summary>
+    /// 默认值
+    /// </summary>
+    public object? Value { get; set; }
+
+    /// <summary>
+    /// 节点组件配置
+    /// </summary>
+    public WidgetOptions? WidgetOptions { get; set; }
+
+    /// <summary>
+    /// 回调函数
+    /// </summary>
+    public Func<object?, NodeWidget, GraphNode, Task>? Callback { get; set; }
+}
+
+/// <inheritdoc />
+public interface INodeWidget<TValue, TOption> : INodeWidget where TOption : WidgetOptions
+{
+    /// <summary>
+    /// 默认值
+    /// </summary>
+    public new TValue? Value { get; set; }
+
+    /// <summary>
+    /// 节点组件配置
+    /// </summary>
+    public new TOption? WidgetOptions { get; set; }
+
+    /// <summary>
+    /// 回调函数
+    /// </summary>
+    public new Func<TValue?, NodeWidget, GraphNode, Task>? Callback { get; set; }
+}