Visual adjustments

src/editor/js/components/editor.tsx

@@ -128,7 +128,11 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> {
         });
 
         // Key events
-        if (key === "Escape") {
+        if (
+            key === "Escape" &&
+            document.activeElement === this.renderer.current
+        ) {
+            // Only delete if 2d-graph is the focused element
             this.selectNode(undefined);
         } else if (key === "Delete" && this.state.selectedNode !== undefined) {
             this.state.selectedNode.delete();
@@ -261,9 +265,16 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> {
     private handleNodeCanvasObject(node: any, ctx: any, globalScale: any) {
         // add ring just for highlighted nodes
         if (this.isHighlighted(node)) {
+            // Outer circle
             ctx.beginPath();
-            ctx.arc(node.x, node.y, 4 * 0.6, 0, 2 * Math.PI, false);
-            ctx.fillStyle = "red";
+            ctx.arc(node.x, node.y, 4 * 0.7, 0, 2 * Math.PI, false);
+            ctx.fillStyle = "white";
+            ctx.fill();
+
+            // Inner circle
+            ctx.beginPath();
+            ctx.arc(node.x, node.y, 4 * 0.3, 0, 2 * Math.PI, false);
+            ctx.fillStyle = node.type.color;
             ctx.fill();
         }
 
@@ -329,7 +340,7 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> {
 
         let lineWidth = 0.5;
         if (this.isHighlighted(link)) {
-            lineWidth = 3;
+            lineWidth = 2;
         }
         lineWidth /= globalScale; // Scale with zoom
 
@@ -417,9 +428,20 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> {
                                 nodeCanvasObjectMode={() => "after"}
                                 linkCanvasObject={this.handleLinkCanvasObject}
                                 linkCanvasObjectMode={() => "replace"}
+                                nodeColor={(node) => (node as Node).type.color}
                                 onNodeDrag={this.handleNodeDrag}
                                 onNodeDragEnd={this.handleNodeDragEnd}
                                 onLinkClick={this.handleLinkClick}
+                                linkDirectionalParticles={(link) =>
+                                    this.isHighlighted(link as GraphElement)
+                                        ? 1
+                                        : 0
+                                }
+                                linkDirectionalParticleColor={() =>
+                                    this.state.selectedNode
+                                        ? this.state.selectedNode.type.color
+                                        : "black"
+                                }
                                 onBackgroundClick={(event) =>
                                     this.handleBackgroundClick(
                                         event,