fix error when drawing undirected edge

A drawn edge was always inserted into the DOT source as a directed
edge ('->') instead of an undirected edge ('--'), even if the graph
was undirected. This resulted in syntax error in line <n> near '->'.

Fixes #237.

Note that, while being drawn, the edge is still shown with a normal
arrowhead also in undirected graphs. This is due to
magjac/d3-graphviz#307. Once inserted
however, it will have the correct arrowhead as defined by the DOT
source (explicitly or implicitly).

CHANGELOG.md

@@ -6,6 +6,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Fixed
+ *  Drawing an edge always inserts a directed edge even if the graph is not a directed graph, which results in "syntax error" #237
+
 ## [1.1.0] - 2024-02-11
 
 ### Changed

src/Graph.js

@@ -423,10 +423,11 @@ class Graph extends React.Component {
       var endNode = d3_select(event.currentTarget);
       var startNodeName = this.startNode.selectWithoutDataPropagation("title").text();
       var endNodeName = endNode.selectWithoutDataPropagation("title").text();
+      const edgeop = this.dotGraph.edgeop;
       this.graphviz
         .insertDrawnEdge(startNodeName + '->' + endNodeName);
       this.latestEdgeAttributes = Object.assign({}, this.props.defaultEdgeAttributes);
-      this.dotGraph.insertEdge(startNodeName, endNodeName, this.latestEdgeAttributes);
+      this.dotGraph.insertEdge(startNodeName, endNodeName, edgeop, this.latestEdgeAttributes);
       this.props.onTextChange(this.dotGraph.dotSrc);
     }
     this.isDrawingEdge = false;

src/dot.js

@@ -21,9 +21,9 @@ export default class DotGraph {
     this.insertAtEndOfGraph(newNodeString + '\n');
   }
 
-  insertEdge(startNodeName, endNodeName, attributes) {
+  insertEdge(startNodeName, endNodeName, edgeop, attributes) {
     var attributesString = toAttributesString(attributes);
-    var newEdgeString = '    ' + quoteIdIfNecessary(startNodeName) + ' -> ' + quoteIdIfNecessary(endNodeName) + attributesString;
+    var newEdgeString = '    ' + quoteIdIfNecessary(startNodeName) + ' ' + edgeop + ' ' + quoteIdIfNecessary(endNodeName) + attributesString;
     this.insertAtEndOfGraph(newEdgeString + '\n');
   }