Merge pull request #105 from Jcparkyn/dev

Update to v1.3.0

Nodexr.Tests/FakeNodeOutput.cs

@@ -13,7 +13,7 @@ class FakeNodeOutput : INodeOutput
 
         public event EventHandler OutputChanged;
 
-        public Vector2L OutputPos => throw new NotImplementedException();
+        public Vector2 OutputPos => throw new NotImplementedException();
 
         public string CssName => throw new NotImplementedException();
 

Nodexr/Nodexr.csproj

@@ -27,6 +27,10 @@
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Build" Version="3.2.0" PrivateAssets="all" />
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="3.2.0" PrivateAssets="all" />
     <PackageReference Include="Microsoft.AspNetCore.WebUtilities" Version="2.2.0" />
+    <PackageReference Include="Microsoft.TypeScript.MSBuild" Version="3.9.7">
+      <PrivateAssets>all</PrivateAssets>
+      <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
+    </PackageReference>
     <PackageReference Include="Pidgin" Version="2.4.0" />
     <PackageReference Include="Roslynator.Analyzers" Version="2.3.0">
       <PrivateAssets>all</PrivateAssets>
@@ -35,5 +39,26 @@
     <PackageReference Include="System.Net.Http.Json" Version="3.2.0" />
 
   </ItemGroup>
+
+  <ItemGroup>
+    <TypeScriptCompile Include="wwwroot\js\ClipboardCopy.ts" />
+    <TypeScriptCompile Include="wwwroot\js\NoodleDragHandler.ts" />
+  </ItemGroup>
+
+  <PropertyGroup Condition="'$(Configuration)' == 'Debug'">
+    <TypeScriptTarget>ES2015</TypeScriptTarget>
+    <TypeScriptJSXEmit>React</TypeScriptJSXEmit>
+    <TypeScriptModuleKind>ES6</TypeScriptModuleKind>
+    <TypeScriptCompileOnSaveEnabled>True</TypeScriptCompileOnSaveEnabled>
+    <TypeScriptNoImplicitAny>False</TypeScriptNoImplicitAny>
+    <TypeScriptRemoveComments>False</TypeScriptRemoveComments>
+    <TypeScriptOutFile />
+    <TypeScriptOutDir />
+    <TypeScriptGeneratesDeclarations>False</TypeScriptGeneratesDeclarations>
+    <TypeScriptNoEmitOnError>True</TypeScriptNoEmitOnError>
+    <TypeScriptSourceMap>True</TypeScriptSourceMap>
+    <TypeScriptMapRoot />
+    <TypeScriptSourceRoot />
+  </PropertyGroup>
 
 </Project>

Nodexr/Shared/Components/NodeGraph.razor

@@ -2,44 +2,50 @@
 @using Nodexr.Shared.NodeTypes;
 @using Nodexr.Shared.Components;
 @inject INodeDragService NodeDragService
-@inject INoodleDragService NoodleDragService  
+@inject INoodleDragService NoodleDragService
 @inject INodeHandler NodeHandler
+@inject IJSRuntime JSRuntime
 
 @{
     //Console.WriteLine("Updating Node Graph");
 }
-<div class="viewport nodegraph" onwheel="panzoom.zoom(event)" onmousedown="panzoom.startPan(event)"
-    ondragover="event.preventDefault()" @ondrop="@OnDrop" @onkeydown="@OnKeyDown" tabindex="-1">
-    <div style="width:100%; height:100%; position:absolute;" @onclick="@DeselectNode"></div>
+<div class="viewport nodegraph" onwheel="panzoom.zoom(event)"
+     @onmousedown="StartPan" @onmousedown:preventDefault
+     ondragover="event.preventDefault()" @ondrop="@OnDrop" @onkeydown="@OnKeyDown" tabindex="-1">
+    <div style="width:100%; height:100%; position:absolute;" @onclick="@OnClick"></div>
     <div id="nodegraph" style="position:relative; transform-origin:0% 0%; width:0px; height:0px;">
-        @foreach(var node in NodeHandler.Tree.Nodes)
+        @foreach (var node in NodeHandler.Tree.Nodes)
         {
             <NodeView @key="node" Data="node" />
         }
         <svg style="overflow:visible; position:absolute;">
             <NoodleSvg Noodle="NoodleDragService.TempNoodle" DomId="tempNoodle" />
         </svg>
         <svg style="overflow:visible; position:absolute;">
-            <NoodleCollection Nodes="@NodeHandler.Tree.Nodes"/>
+            <NoodleCollection Nodes="@NodeHandler.Tree.Nodes" />
         </svg>
     </div>
 </div>
 
 @functions{
 
-    protected int XOffset { get; set; } = 0;
-    //OutputDisplay outputDisplay;
-
-    bool shouldRender = false;
-
+    private bool shouldRender = false;
     protected override bool ShouldRender() => shouldRender;
 
+    private Vector2 clickStartPos; //Used to check whether an onclick event was actually a drag
+
     protected override void OnInitialized()
     {
         //NodeHandler.OnNodeCountChanged += StateHasChanged;
         NodeHandler.OnRequireNodeGraphRefresh += (sender, e) => Refresh();
     }
 
+    async Task StartPan(MouseEventArgs e)
+    {
+        clickStartPos = e.GetClientPos();
+        await JSRuntime.InvokeVoidAsync("panzoom.startPan");
+    }
+
     void Refresh()
     {
         shouldRender = true;
@@ -59,7 +65,18 @@
         {
             NodeHandler.DeleteSelectedNode();
         }
-        else if(e.Key == "Escape")
+        else if (e.Key == "Escape")
+        {
+            DeselectNode();
+        }
+    }
+
+    void OnClick(MouseEventArgs e)
+    {
+        const int dragThreshold = 4; //Length in px to consider a drag (instead of a click)
+        var mouseOffset = e.GetClientPos() - clickStartPos;
+
+        if (mouseOffset.GetLength() <= dragThreshold)
         {
             DeselectNode();
         }

Nodexr/Shared/Components/NodeInputDot.razor

@@ -23,7 +23,7 @@
     {
         if (Input.ConnectedNode != null)
         {
-            NoodleDragService.OnStartNoodleDrag(Input.ConnectedNode, e, Input.Pos);
+            NoodleDragService.OnStartNoodleDrag(Input.ConnectedNode, Input.Pos);
             Input.ConnectedNode = null;
         }
     }

Nodexr/Shared/Components/NodeOutputDot.razor

@@ -3,8 +3,9 @@
 @inject IJSRuntime  JSRuntime;
 
 
-<div draggable="true" onmousedown="event.stopPropagation()" class="node-output-dot-parent"
-     @ondragstart="OnDragStart"
+<div draggable="true" class="node-output-dot-parent"
+     ondragstart="tempNoodle.clearDragImage(event)"
+     @onmousedown="OnDragStart" @onmousedown:stopPropagation
      @ondragend="OnDragEnd">
     <div class="node-output-dot">
         <span class="outputtooltip">
@@ -19,10 +20,9 @@
 {
     [Parameter] public INode Data { get; set; }
 
-    void OnDragStart(DragEventArgs e)
+    void OnDragStart()
     {
-        //TODO: Set drag image
-        NoodleDragService.OnStartNoodleDrag(Data, e);
+        NoodleDragService.OnStartNoodleDrag(Data);
     }
 
     void OnDragEnd(DragEventArgs e)

Nodexr/Shared/Components/NoodleCollection.razor

@@ -9,7 +9,7 @@
 {
     var inputsWithNoodles = node.GetAllInputs()
         .OfType<InputProcedural>()
-        .Where(input => input.ConnectedNode != null);
+        .Where(input => input.Enabled);
 
     @foreach (var input in inputsWithNoodles)
     {

Nodexr/Shared/Components/NoodleSvg.razor

@@ -1,29 +1,26 @@
 @inject INodeHandler NodeHandler;
 @implements IDisposable
 
-
-    <path id="@DomId" class="noodle" d="@PathInstructions"
-          style="display:@(Noodle.Enabled ? "default" : "none"); @CssStrokeStyle"/>
-
+<path id="@DomId" class="noodle" d="@PathInstructions"
+        style="@(Noodle.Enabled ? "" : "display:none;") @CssStrokeStyle"/>
 
 
 @functions{
-    //public const string normalClass = "noodle";
-    //public const string invalidClass = "noodle noodle-invalid";
 
     [Parameter] public INoodleData Noodle { get; set; }
-    [Parameter] public string DomId { get; set; } = "";
+    [Parameter] public string DomId { get; set; } = null;
     [Parameter] public string Gradient { get; set; }
 
     public bool Valid { get; set; } = true;
     //public string CssClass => Valid ? normalClass : invalidClass;
     protected string PathInstructions {
         get
         {
-            long startX = Noodle.StartPos.x;
-            double startY = Noodle.StartPos.y + 0.01d;
-            long endX = Noodle.EndPos.x, endY = Noodle.EndPos.y;
-            long ctrlLength = (long)(5 + 0.4*Math.Abs(endX-startX) + 0.2*Math.Abs(endY-startY));
+            var startX = (long)Noodle.StartPos.x;
+            var startY = (long)Noodle.StartPos.y + 0.01d;
+            var endX = (long)Noodle.EndPos.x;
+            var endY = (long)Noodle.EndPos.y;
+            double ctrlLength = 5 + 0.4*Math.Abs(endX-startX) + Math.Min(0.2*Math.Abs(endY-startY), 40);
             return FormattableString.Invariant(
                 $"M {startX} {startY} C {startX + ctrlLength} {startY} {endX - ctrlLength} {endY} {endX} {endY}");
         }

Nodexr/Shared/ExtensionMethods.cs

@@ -5,9 +5,9 @@ namespace Nodexr.Shared
 {
     public static class ExtensionMethods
     {
-        public static Vector2L GetClientPos(this Microsoft.AspNetCore.Components.Web.DragEventArgs e)
+        public static Vector2 GetClientPos(this Microsoft.AspNetCore.Components.Web.MouseEventArgs e)
         {
-            return new Vector2L((long)e.ClientX, (long)e.ClientY);
+            return new Vector2(e.ClientX, e.ClientY);
         }
 
         public static string InNonCapturingGroup(this string input) => $"(?:{input})";

Nodexr/Shared/IPositionable.cs

@@ -2,6 +2,6 @@
 {
     public interface IPositionable
     {
-        Vector2L Pos { get; set; }
+        Vector2 Pos { get; set; }
     }
 }

Nodexr/Shared/NodeInputs/InputCollection.cs

@@ -42,6 +42,7 @@ public void AddItem(INodeOutput node = null)
         public void RemoveItem(InputProcedural item)
         {
             item.ValueChanged -= OnValueChanged;
+            item.ConnectedNode = null;
             inputs.Remove(item);
             OnInputPositionsChanged();
             OnValueChanged();

Nodexr/Shared/NodeInputs/InputCollectionView.razor

@@ -22,13 +22,11 @@
     void MoveUp(InputProcedural input)
     {
         Data.MoveUp(input);
-        NodeHandler.ForceRefreshNoodles();
     }
 
     void MoveDown(InputProcedural input)
     {
         Data.MoveDown(input);
-        NodeHandler.ForceRefreshNoodles();
     }
 
     void RemoveItem(InputProcedural input)

Nodexr/Shared/NodeInputs/InputProcedural.cs

@@ -26,9 +26,9 @@ public INodeOutput ConnectedNode
             }
         }
 
-        public Vector2L StartPos => connectedNode.OutputPos;
+        public Vector2 StartPos => connectedNode.OutputPos;
 
-        public Vector2L EndPos => Pos;
+        public Vector2 EndPos => Pos;
 
         public bool Enabled => connectedNode != null;
 
@@ -56,8 +56,8 @@ public void Refresh()
 
     public interface INoodleData
     {
-        Vector2L StartPos { get; }
-        Vector2L EndPos { get; }
+        Vector2 StartPos { get; }
+        Vector2 EndPos { get; }
         bool Enabled { get; }
         void Refresh();
 

Nodexr/Shared/NodeInputs/NodeInput.cs

@@ -21,7 +21,7 @@ public abstract class NodeInput : INodeInput
 
         public event EventHandler ValueChanged;
 
-        public Vector2L Pos { get; set; }
+        public Vector2 Pos { get; set; }
 
         public Func<bool> IsEnabled { get; set; } = (() => true);
 

Nodexr/Shared/Nodes/Node.cs

@@ -8,7 +8,7 @@ namespace Nodexr.Shared.Nodes
 {
     public interface INodeOutput
     {
-        Vector2L OutputPos { get; }
+        Vector2 OutputPos { get; }
         string CssName { get; }
         string CssColor { get; }
         NodeResult CachedOutput { get; }
@@ -47,9 +47,9 @@ public interface INode : IPositionable, INodeOutput
 
     public abstract class Node : INode
     {
-        private Vector2L pos;
+        private Vector2 pos;
 
-        public Vector2L Pos
+        public Vector2 Pos
         {
             get => pos;
             set
@@ -73,7 +73,7 @@ public INodeOutput PreviousNode
 
         public NodeResult CachedOutput { get; private set; }
 
-        public Vector2L OutputPos => Pos + new Vector2L(150, 14);
+        public Vector2 OutputPos => Pos + new Vector2(154, 13);
 
         public bool IsCollapsed { get; set; }
 
@@ -133,7 +133,7 @@ protected Node()
         public void CalculateInputsPos()
         {
             //TODO: refactor using GetHeight() on each input
-            Previous.Pos = new Vector2L(Pos.x + 2, Pos.y + 13);
+            Previous.Pos = new Vector2(Pos.x + 2, Pos.y + 13);
             if (IsCollapsed)
             {
                 const int startHeight = 13;
@@ -142,13 +142,13 @@ public void CalculateInputsPos()
                     switch (input)
                     {
                         case InputProcedural input1:
-                            input1.Pos = new Vector2L(Pos.x + 2, Pos.y + startHeight);
+                            input1.Pos = new Vector2(Pos.x + 2, Pos.y + startHeight);
                             break;
                         case InputCollection input1:
-                            input1.Pos = new Vector2L(Pos.x + 2, Pos.y + startHeight);
+                            input1.Pos = new Vector2(Pos.x + 2, Pos.y + startHeight);
                             foreach (var input2 in input1.Inputs)
                             {
-                                input2.Pos = new Vector2L(Pos.x + 2, Pos.y + startHeight);
+                                input2.Pos = new Vector2(Pos.x + 2, Pos.y + startHeight);
                             }
                             break;
                     }
@@ -163,16 +163,16 @@ public void CalculateInputsPos()
                     if (input is InputCollection inputColl)
                     {
                         startHeight += 28;
-                        inputColl.Pos = new Vector2L(Pos.x, Pos.y + startHeight);
+                        inputColl.Pos = new Vector2(Pos.x, Pos.y + startHeight);
                         foreach (var input2 in inputColl.Inputs)
                         {
-                            input2.Pos = new Vector2L(Pos.x, Pos.y + startHeight);
+                            input2.Pos = new Vector2(Pos.x, Pos.y + startHeight);
                             startHeight += input2.Height;
                         }
                     }
                     else
                     {
-                        input.Pos = new Vector2L(Pos.x, Pos.y + startHeight);
+                        input.Pos = new Vector2(Pos.x, Pos.y + startHeight);
                         startHeight += input.Height;
                     }
                 }