On attributes like a [color=white], we could provide the color to the client, so it can display a colored box next to it.

If an edge already has some attributes, the user won't get suggestions when connecting another node with the edge.

Steps to reproduce:

digraph {
    music_bus [label="Which music would you like to listen to on the bus?"]
    breakfast [label="What breakfast do you want to eat?"]
    sell_game [label="Do you want to program bandersnatch at the company?"]

    music_bus -> breakfast [color=gray]
}

Place your cursor behind breakfast, type -> sel.

Expected behaviour: Get a suggestion for node sell_game. It will work when leaving out [color=gray]

graph {
    a -- b;
}

is the same as

graph {
    a -- b
}

We could provide a refactoring to remove all optional semicolons in the graph.

If code actions are requested for the location below, the consolidation for the b edges are offered. This should only happen when they are on the same line.

digraph {
	a -> c;/* here */
	b -> c; 
	b -> c;
}

Comes from liuchengxu/graphviz.vim#12:

Can it provide document hover? The document can come from here. And autocompletion can also have this document.

Currently:

Expected: Display some document about items.

There is a bug in the color conversion code when converting from a hex color string into a Color object.

The bug manifests itself (on edotor.net) as:

1. wrong color squares next to hex type color strings (for most part of the color range).
2. wrong color being used for the currently selected color in the color picker when hovering over a hex type color string

Running this code snippet within the colorProvider.ts will show the bug

console.log(getColorStringFromColor(getHexCodeColor("#000000")))
console.log(getColorStringFromColor(getHexCodeColor("#ffffff")))
console.log(getColorStringFromColor(getHexCodeColor("#ff7f14")))
console.log(getColorStringFromColor(getHexCodeColor("#ff0000")))
console.log(getColorStringFromColor(getHexCodeColor("#00345678")))
console.log(getColorStringFromColor(getHexCodeColor("#ffabcdef")))

The expected output is

#000000
#ffffff
#ff7f14
#ff0000
#345678  // because getColorStringFromColor ignores alpha
#abcdef  // because getColorStringFromColor ignores alpha

The actual output produced by the current version of the code is

#000000
#ff0000ff00ff
#ff00007f0014
#ff00000000
#340000560078
#ab0000cd00ef

The lines

Should be changed to

    const colorInt = parseInt(hexCode, 16); 
    return { 
 	red: (colorInt >> 16 & 0xff) / 255.0, 
 	green: (colorInt >> 8 & 0xff) / 255.0, 
 	blue: (colorInt & 0xff) / 255.0, 
 	alpha: hexCode.length === 8 ? (colorInt >> 24 & 0xff) / 255.0 : 1.0, 
     };

Running the code snippet again with the suggested patch applied generates the expected output

#000000
#ffffff
#ff7f14
#ff0000
#345678
#abcdef

Before:

graph {
    a -- { b c }
    c -- b
}

(user refators b to new labeled node)

After:

graph {
    node_b [label="b"]
    a -- { node_b c }
    c -- node_b
}

Using HTML as a label is actually valid in graphviz, try copying this example into edotor: https://stackoverflow.com/a/53464014/458274

Syntaxhighlighting will fail on tag attributes, closing tags.

Feature and grammar is described here: https://graphviz.gitlab.io/_pages/doc/info/shapes.html#html

The language service of CSS does show the actual color as a preview in the completion list. We could do this as well for colors that are set while typing color=.

I get the undefined 'kind' output when I hover over 'graph'. The preview updates with property changes, making me think this example is legit sytanx for the DOT engine.

digraph {
  graph [pad="0.5", nodesep="0.5", ranksep="2"];
  node [shape=none]
  rankdir=LR;

  Foo [label=<
  <table border="0" cellborder="1" cellspacing="0">
    <tr><td><i>Input Foo</i></td></tr>
    <tr><td port="1">one</td></tr>
    <tr><td port="2">two</td></tr>
    <tr><td port="3">three</td></tr>
    <tr><td port="4">four</td></tr>
    <tr><td port="5">five</td></tr>
    <tr><td port="6">six</td></tr>
  </table>>];

  Bar [label=<
  <table border="0" cellborder="1" cellspacing="0">
    <tr><td><i>Input Bar</i></td></tr>
    <tr><td port="1">seven</td></tr>
    <tr><td port="2">eight</td></tr>
    <tr><td port="3">nine</td></tr>
    <tr><td port="4">ten</td></tr>
  </table>>];

  Baz [label=<
  <table border="0" cellborder="1" cellspacing="0">
    <tr><td><i>Output Baz</i></td></tr>
    <tr><td port="a">alpha</td></tr>
    <tr><td port="b">bravo</td></tr>
    <tr><td port="c">charlie</td></tr>
    <tr><td port="d">delta</td></tr>
    <tr><td port="e">echo</td></tr>
    <tr><td port="f">foxtrot</td></tr>
  </table>>];

  Foo:2 -> Baz:a;
  Foo:3 -> Baz:e;
  Foo:6 -> Baz:b;
  Bar:1 -> Baz:d;
  Bar:3 -> Baz:f;
}

Issue raised on edotor:
nikeee/edotor.net#48

We're using the default color set (X11):
https://graphviz.org/doc/info/colors.html#x11

Somehow, a couple of colors are missing.

We are currently unable to format the source of the graph.

Blocking: Handling comments.

The color square and color picker are only shown for the color attribute, not for fillcolor (and other color-related attributes like bgcolor or fontcolor).

Expected outcome

The color picker is available for all color-related attributes

We only have the feature, no tests to prevent regressions.

When invoking auto completion in the following location, we get an empty completion list:

digraph G {
	S [shape=/* here */,color=red];
}

Given that Edotor provides examples containing node [shape=record], I'd expect src/service/languageFacts.ts to contain "record" among known shapes, but the language server reports

Unknown shape "record".
(DOT4001)

The graph attributes should provide auto completion, eg in this sample:

graph {
	subgraph cluster_1 {
		a -- b
		color= /*here*/ 
	}
}

I'm using this plugin and I love it so far. I think this can be more useful on larger graphs by showing a nodes label in the hover text.

For example, in the graph:

digraph G {
    vp [label="View Profile"];
    vf [label="View Friends"];
    ...
    vp -> vf;
}

When I move my cursor over vp, then bring up the hover text, I get (node) vp. I think it would be more helpful to show (node) vp: View Profile.

Is this possible?

One should be able to turn this off in the settings.

strict digraph {
    a -> b
    a -> b
}

• Hovering the dash in a->b yields (node) a. It should yield (edge) a -> b.
• Hovering the space in a ->b yields (node) a. It should yield (edge) a -> b or nothing.

We currently do not test if the auto completion works.

We currently use the range of the hovered node. Alternatively, we could also return a custom area in case teh text refers to a parent item.