初始化项目，添加NodeGraph基础画布

Author: syminomega

src/components/BootstrapBlazor.Graph/Components/GraphCanvas.razor

@@ -18,7 +18,8 @@
   </ItemGroup>
 
   <ItemGroup>
-    <Folder Include="wwwroot\" />
+    <Folder Include="wwwroot\css\" />
+    <Folder Include="wwwroot\js\" />
   </ItemGroup>
 
 </Project>

src/components/BootstrapBlazor.Graph/Components/GraphCanvas.razor.css

@@ -0,0 +1,36 @@
+@namespace BootstrapBlazor.Components
+@using Microsoft.Extensions.Logging
+@attribute [JSModuleAutoLoader("./_content/BootstrapBlazor.NodeGraph/js/Graph.js", AutoInvokeDispose = false, JSObjectReference = true)]
+@inherits BootstrapModuleComponentBase
+
+@inject ILogger<NodeGraphCanvas> Logger
+
+<div class="@ClassString" @attributes="@AdditionalAttributes" id="@Id">
+    <canvas @ref="_graphCanvas"></canvas>
+</div>
+
+@code {
+
+    private string? ClassString => CssBuilder.Default("graph-main-container")
+        .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);
+        var graphRef = await InvokeAsync<IJSObjectReference>("createLGraph");
+        Graph = new Graph(graphRef!);
+        _graphCanvasRef = await InvokeAsync<IJSObjectReference>("createLGraphCanvas", _graphCanvas, graphRef)
+                         ?? throw new InvalidOperationException("Create GraphCanvas failed!");
+        // await InvokeVoidAsync("constructGraphNode", "测试节点");
+    }
+
+}

…lazor.Graph/BootstrapBlazor.Graph.csproj …deGraph/BootstrapBlazor.NodeGraph.csprojsrc/components/BootstrapBlazor.Graph/BootstrapBlazor.Graph.csproj renamed to src/components/BootstrapBlazor.NodeGraph/BootstrapBlazor.NodeGraph.csproj src/components/BootstrapBlazor.Graph/BootstrapBlazor.Graph.csproj renamed to src/components/BootstrapBlazor.NodeGraph/BootstrapBlazor.NodeGraph.csproj

@@ -0,0 +1,7 @@
+.graph-main-container{
+    position: relative;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+}

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

@@ -0,0 +1,15 @@
+// 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;
+
+public class Graph
+{
+    public IJSObjectReference GraphRef { get; }
+
+    internal Graph(IJSObjectReference lGraphRef)
+    {
+        GraphRef = lGraphRef;
+    }
+}

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

@@ -0,0 +1,10 @@
+// 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;
+
+public class GraphNode
+{
+    
+}

src/components/BootstrapBlazor.NodeGraph/Graph.cs

@@ -0,0 +1,39 @@
+// 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;
+
+public class NodeGraphService : IAsyncDisposable
+{
+    private IJSRuntime _jsRuntime;
+    private DotNetObjectReference<NodeGraphService> _reference;
+    private readonly Lazy<Task<IJSObjectReference>> _moduleTask;
+
+    public NodeGraphService(IJSRuntime jsRuntime)
+    {
+        _jsRuntime = jsRuntime;
+        _moduleTask = new Lazy<Task<IJSObjectReference>>(_jsRuntime
+            .InvokeAsync<IJSObjectReference>("import", "./_content/SyminDesign/symin-litegraph.js")
+            .AsTask());
+        _reference = DotNetObjectReference.Create(this);
+    }
+
+    /// <inheritdoc />
+    public async ValueTask DisposeAsync()
+    {
+        if (_moduleTask.IsValueCreated)
+        {
+            var module = await _moduleTask.Value;
+            await module.DisposeAsync();
+        }
+    }
+
+    private Dictionary<string,Action<GraphNode>> _nodeExecuteActions = new ();
+
+    public async Task RegisterNodeType(string typePath, string displayText,
+        List<NodeInput> inputs, List<NodeOutput> outputs, Action<GraphNode>? onExecute)
+    {
+
+    }
+}

src/components/BootstrapBlazor.NodeGraph/GraphNode.cs

@@ -0,0 +1,10 @@
+// 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;
+
+public class NodeInput
+{
+    
+}

src/components/BootstrapBlazor.NodeGraph/NodeGraphService.cs

@@ -0,0 +1,10 @@
+// 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;
+
+public class NodeOutput
+{
+    
+}