magjac/graphviz-visual-editor

A web application for interactive visual editing of Graphviz graphs described in the DOT language.

graphviz-visual-editor's Issues

Cut/Copy-and-paste of a node only indirectly declared with and edge specification in the DOT source throws error

Cut/Copy-and-paste of one of these nodes does not work:

digraph {
    a -> b
}

Cut/Copy-and-paste of one of these nodes does work:

digraph {
    a
    b
    a -> b
}

Allow node or edge attributes for a specific node or edge to be edited through the graph

Ideas

• Open the node or edge format drawer in temporary mode or a dialog with the same contents, but instead of editing the default attributes, edit the attributes of the selected node or edge.

Support undo and redo as keyboard shortcuts in the graph

Pressing Ctrl-Z and Ctrl-Y in the graph should have the same effect as in the text editor.

Support a subgraph-view where edges to and from subgraphs can be inserted and deleted

One possible solution would be to render all subgraphs as clusters with compound and draw the edges to and from the subgraphs using lhead and ltail.

Drag-and-drop insert node doesn't work in Chrome

Nothing happens. Click-insert works. Drag-and-drop works in Firefox.

Debugging shows that no drag start events are fired. Maybe related to react-dnd/react-dnd-html5-backend#18, although the workaround suggested didn't help.

Allow selecting and cycling through node and edges in the graph using the TAB key

Ideas

• TAB selects the next node or edge
• Shift-TAB selects the previous node or edge
• Ctrl-TAB selects the next edge
• Ctrl-Shift-TAB selects the previous edge

Make it easier to interact with nodes without fill

Currently, unfilled nodes must be interacted with through the perimeter or through the node text which makes it a little harder to select them or to draw edges from and to them. This is analogous to how the URL attribute works:

For svg [...] output, the active area for a node is its visible image. For example, an unfilled node with no drawn boundary will only be active on its label.

Filled nodes can be interacted with anywhere on or inside its perimeter, including its background.

Ideas

• When displaying the graph, set fill="transparent" on the SVG basic shape.

Error indication in text editor is cleared even though the error is still present

If neither the error message nor the line number changes when the DOT source is edited, the error indication is removed, although the error is still present.

A workaround is to add or delete a line in the beginning of the DOT source, which forces the line number to change.

The reason for this bug seems to be that the Ace editor clears the annotations internally and the React Ace Component does not update them if they are not changed, see the source code.

Mark nodes and edges in the text editor when selected in the graph

In Chrome, inserting a node with shape note, tab, box3d or others throws an error, but works otherwise

The root cause is magjac/d3-graphviz#89

Allow selection of edge direction to use when drawing edges

Graphviz allows the dir attribute to specify a dirType for an edge.

Ideas:

• It should be possible to select the value of the dir attribute when drawing edges.
• It should be possible to not set the dir attribute when drawing edges.

Provide visual feedback while busy rendering a new graph

Ideas:

• Progress indicator.
• Gray-out the graph.

In Chrome, drawing an edge throws an error, but works otherwise

The root cause is magjac/d3-graphviz#91

Mobile friendliness: The Node Format dialog color selector overlaps the style selector on iPhone 7

In Firefox Responsive Design Mode it looks good, but on the real device it does not.

Allow edges to be drawn from the head node to the tail node

Currently, edges are always drawn from the tail node to the head node.

Ideas

• Use the Shift or Ctrl key to draw in reversed direction.

Allow showing only the graph pane or only the text editor pane

Ideas:

• Allow closing either pane, letting the other pane expand.
• Allow expanding either pane to full screen width, forcing the other pane to close.

Characters are lost in the editor when typing fast and DOT parsing errors occur

The reason is that the mechanism that inserts the error marker in the editor gutter also re-insert the latest text exported from the editor which might not be up-to-date when typing fast.

Support graphical insert of nodes and edges in arbitrarily formatted DOT source code

The visual editing insert capability currently requires the DOT source to have the graph closing statement on a separate line, since it currently operates by inserting a new line between existing lines.

This issue was spawned from #15.

Performance: Allow path and shape tweening to be disabled through the Settings dialog

Today, both path tweening and shape tweening are always enabled.

For large graphs or graphs with large shapes or long edges, the performance hit can be sigificant with tweening enabled.

Cut/Copy-and-paste of nodes within subgraphs

When the Settings dialog needs a scroll bar there is one scroll bar for each section instead of just one for the whole dialog

This is really impractical because you have to scroll each section to see the where the options is.

Provide visual feedback when the graph pane has focus

The only indication today is loss of focus in the text editor pane, indicated by a change of background color on the current line.
Ideas in the order currently preferred:

• Colored frame on graph pane
• Different backgrounds in both panes depending on focus
• Gray-out panes depending on focus

In Chrome, middle-mouse node insertion does not work

Undo/redo history is lost when a node or edge format drawer is opened

The node and edge format drawers are displayed instead of the text editor. This is intentional.

However, the editor is terminated when a format drawer is opened and a new editor instance is started when the drawer is closed which causes the editor state to be lost. The editor should be running all the time and it's visibility toggled instead.

The graph pane is not focused after inserting a node shape from node shape insert panel

This is just a minor flaw, maybe not even a bug, but it means that graph keyboard shortcuts are not operational directly after the insertion. In particular, pressing Ctrl-Z for undo has no effect. The user needs to focus the graph pane by clicking it in order to use a keyboard shortcut.

This bug is valid both for drag-and-drop insert and for click insert from the node shape insertion panel.

Select all nodes and edges with Ctrl-A.

Allow the text editor tab size to be configured through the Settings dialog.

Today, it's fixed at 4.

Add a link to the GitHub repo in the app bar

DOT errors are not always indicated in the text editor

Under some circumstances a detected error in the DOT source code would not be indicated in the text editor.

Drag area select does not select anything if the mouse button is released outside the canvas

When the mouse is moved back in over the canvas, the select area changes with the mouse position, but when the mouse button is clicked, nothing is selected.

Allow selecting and deleting all the edges in the graph that are the result of one edge to or from a subgraph in the DOT source

Currently, such edges can be selected individually, but not deleted because it would involve quite drastic changes to the DOT source, possibly involving cloning nodes and edges, which the user probably does not want.

Ideas

• When selecting an edge in the graph that is the result of one edge to or from a subgraph in the DOT source, select also all other edges that are the result of the same edge in the DOT source.
• When deleting such edges, delete the edge to or from the subgraph in the DOT source.
• The edges could be highlighted with a different color to distinguish them from non-subgraph edges.

Optimize response time by not re-rendering graph when DOT source is unchanged such as when just the UI state changes.

Allow multiple graphs to be stored in the browser's local storage

Ideas:

• It shall be possible select a graph to load from a list.
• It shall be possible to name the current graph.
• It shall be possible to delete the current graph from local storage.

Allow edges to be drawn between node compass points

Ideas

• Use compass point specifications in the generated edge statement.

Out of scope:

• Drawing edges between a portname as defined in record-based nodes or HTML-like labels is out of scope for this enhancement request.
• Using the headport or tailport attributes is out of scope for the enhancement request.

See portPos for more info.

Keyboard input is targeted to the text editor even efter certain mouse operations in the graph

When focus is in the text editor, most mouse operations in the graph removes the focus from the text editor, but not all. This causes unwanted effects.

One case: Trying to delete objects selected with area select when focus was is in the text editor deletes text in the editor, not the selected objects.

Allow transition duration to be configured through the Settings dialog

Add a description and links to GitHub to the about dialog

Support graphical delete of nodes and edges between nodes in arbitrarily formatted DOT source code.

The visual editing delete capability currently requires the DOT source to be organized with only one node or edge per line, since it currently operates by deleting complete lines.

The insert capablity part originally included in this issue has been spawned to #27.

Performance: Allow tweening precision to be configured through the Settings dialog

Currently, the tweening precision is using the d3-graphviz default which currently is 1 pixel.

For large graphs or graphs with large shapes or long edges, the performance hit can be significant with such a low value (high precision).

Select all edges with Shift-Ctrl-A

Specification of the DOT source code through a URL parameter

After starting the editor, the text editor contents should be initialized from a URL parameter.

Ideas

• Name name of the URL parameter could for example be: dotSrc, src or graph.
• If the editor is first initialized with the contents from local storage and then from the URL parameter, it will be possible to undo the change if an update was not what the user intended.
• Should a warning be issued when this happens? (Always after the first time).
• If #70 is implemented:
  • The graph specified with the URL parameter can be saved as a separate entry in local storage.
  • If the same graph already exists in local storage, load the saved version.
  • The name of the graph can optionally be specified with a separate URL parameter.

Nodes with quoted node id cannot be deleted

Node "a" in this graph cannot be deleted:

digraph {
    "a" -> c
}

The reason is that the current implementation uses a simple pattern matcher that does not take quoted id's into account.

More restrictions are mentioned in enhancement request #15.

Show a selected edge as a dashed edge outline instead of a dashed bounding box

This would make it easier to distinguish it from other edges, especially when multiple nodes and edges are selected.

Idea

• Add a copy of the edge path instead of a bound box.
• Possibly also add copies of all the edge parts, including the edge arrowhead(s).

Allow node text to be edited directly in the graph

Ideas:

• Edit the text directly in the node shape and let the shape size adapt while editing.
• Open a dialog where the text is edited and then inserted into the node shape.
• The node text is either the node label or if it does not exist, the node_id.
• The graph shall not be re-rendered until editing is completed, since nodes may move around.

In Chrome, de-selecting selected nodes and edges by clicking the canvas does not work

Scroll line with error indication into view in the text editor

If there is an error in the DOT source code, but the error indication is not in the visible area of the text editor, it can be hard to find where the error is if the DOT source code is large. A function that scrolls the line with the error into view would simplify this.

Ideas:

• Scroll automatically when an error occurs.
  • Probably requires some kind of filtering to avoid interfering with user scrolling.
    • No scroll if the error message and line number does not change.
    • No scroll if the error message and line number as counted from the end of the file does not change.
• Scroll on user command.
  • Through a keyboard shortcut?
  • Through a button somewhere (not shown when error free)?

Support undo and redo from icons in the app bar

Allow selection of arrow type for arrow heads and tails for use when drawing edges

Graphviz allows the arrowhead and arrowtail attributes to specify an arrowType.

Ideas:

• It should be possible to select which type to use when drawing edges in the graph.
• At least the primitive shapes should be possible to select.
• Possibly all the "commonly used arrow shapes" listed in the arrowType should be possible to select.
• It should be possible to specify an arbitrary arrow type as a string through a text field.

Out of scope:

• Support for composing complex arrow shapes according to the arrow shapes grammar through the GUI is out of scope for the enhancement request.

Make it easier to interact with edges

Currently, edges must be interacted with through the arrow head or tail or through the sometimes very thin edge path itself which makes it a little hard to select them. This is analogous to how the URL attribute works:

For svg [...] output, [...]. For edges, the active areas are small circles where the edge contacts its head and tail nodes. In addition [...] the active area includes a thin polygon approximating the edge [...]. If the edge has a label, this will also be active. Finally, if the edge has a head or tail label, this will also be active.

Ideas

• When displaying the graph, add an invisible overlay path that can be used to select the edge and has the same attributes as the real edge path, but with a stroke-width attribute with a larger value and stroke="transparent". An algorithm for calculating the width can be based on:

  graphviz-visual-editor/src/Graph.js

  Line 529 in d44e643

  let dashWidth = Math.max(4 / scale, 2);

  .

Allow the text editor font size to be configured through the Settings dialog

Today it's fixed at 12 points.