Different font sizes, tooltips and HTML links?

[kovzol]

Hi, it would be great if there would be support for tooltips and HTML links. Something like

https://dreampuf.github.io/GraphvizOnline/#strict%20digraph%20G%20%7B%0Anode%20%5Bshape%20%3D%20box%2C%20color%20%3D%20black%2C%20style%20%3D%20filled%5D%3B%0Aedge%20%5Bdir%20%3D%20back%5D%3B%0A1%20-%3E%20%22G%20is%20the%20midpoint%20of%20DE%22%3B%0A1%20-%3E%202%3B%0A2%20-%3E%203%3B%0A3%20-%3E%20%22F%20is%20the%20midpoint%20of%20CB%22%3B%0A3%20-%3E%20%22DC%20%20%E2%8A%A5%20%20DB%22%3B%0A2%20-%3E%204%3B%0A4%20-%3E%20%22F%20is%20the%20midpoint%20of%20CB%22%3B%0A4%20-%3E%20%22EC%20%20%E2%8A%A5%20%20EB%22%3B%0A1%20%5B%20label%3D%3C1)%20FG%20%20%E2%8A%A5%20%20DE%3CBR%2F%3E%0A%3CFONT%20POINT-SIZE%3D%2210%22%3E8.%20sz.%3C%2FFONT%3E%3E%2C%20fillcolor%20%3D%20%22%23C0FFFF%22%2C%0Atooltip%3D%228.%20szab%C3%A1ly%3A%20Pitagorasz-t%C3%A9tel%22%2C%20URL%3D%22https%3A%2F%2Fgithub.com%2Fkovzol%2FJava-Geometry-Expert%2Fblob%2Fmaster%2Fsrc%2Fdocs%2Fhelp%2Fimages_a%2Frectangle.gif%22%5D%3B%0A2%20%5B%20label%20%3D%20%222)%20FD%20%3D%20FE%22%2C%20fillcolor%20%3D%20%22%23FFA0A0%22%5D%3B%0A3%20%5B%20label%20%3D%20%223)%20CF%20%3D%20DF%22%2C%20fillcolor%20%3D%20%22%23C0FFFF%22%5D%3B%0A4%20%5B%20label%20%3D%20%224)%20CF%20%3D%20EF%22%2C%20fillcolor%20%3D%20%22%23C0FFFF%22%5D%3B%0A%22G%20is%20the%20midpoint%20of%20DE%22%20%5B%20fillcolor%20%3D%20%22%23F7CAC9%22%2C%20shape%20%3D%20oval%2C%20style%20%3D%20filled%20%5D%3B%0A%22F%20is%20the%20midpoint%20of%20CB%22%20%5B%20fillcolor%20%3D%20%22%23F7CAC9%22%2C%20shape%20%3D%20oval%2C%20style%20%3D%20filled%20%5D%3B%0A%22DC%20%20%E2%8A%A5%20%20DB%22%20%5B%20fillcolor%20%3D%20%22%23F7CAC9%22%2C%20shape%20%3D%20oval%2C%20style%20%3D%20filled%20%5D%3B%0A%22F%20is%20the%20midpoint%20of%20CB%22%20%5B%20fillcolor%20%3D%20%22%23F7CAC9%22%2C%20shape%20%3D%20oval%2C%20style%20%3D%20filled%20%5D%3B%0A%22EC%20%20%E2%8A%A5%20%20EB%22%20%5B%20fillcolor%20%3D%20%22%23F7CAC9%22%2C%20shape%20%3D%20oval%2C%20style%20%3D%20filled%20%5D%3B%0A%7D

which uses different font sizes in a node, a tooltip, and a HTML link. Please advise me further if this is possible in the library, and if not, is there hope to support it.

Thank you in advance.

[jamisonjiang]

Similar effect use table feature

    Color COFFFF = Color.ofRGB("#C0FFFF");
    Node n1 = Node.builder()
        .shape(NodeShapeEnum.PLAIN)
        .table(
            table()
                .border(1)
                .bgColor(COFFFF)
                .cellBorder(0)
                .cellSpacing(0)
                .cellPadding(6)
                .href("https://github.com/kovzol/Java-Geometry-Expert/blob/master/src/docs/help/images_a/rectangle.gif")
                .tr(td().color(COFFFF).text("1) FG  ⊥  DE"))
                .tr(td().color(COFFFF).text("8. sz.").fontSize(10))
        )
        .build();
    Node n2 = Node.builder().label("2) FD = FE").fillColor(Color.ofRGB("#FFA0A0")).build();
    Node n3 = Node.builder().label("3) CF = DF").build();
    Node n4 = Node.builder().label("4) CF = EF").build();
    Node n5 = Node.builder().label("G is the midpoint of DE").build();
    Node n7 = Node.builder().label("DC  ⊥  DB").build();
    Node n8 = Node.builder().label("F is the midpoint of CB").build();
    Node n9 = Node.builder().label("EC  ⊥  EB").build();

    Graphviz graphviz = Graphviz.digraph()
        .tempNode(Node.builder().shape(NodeShapeEnum.RECT).color(Color.BLACK).fillColor(Color.ofRGB("#C0FFFF")).build())
        .tempLine(Line.tempLine().dir(Dir.BACK).build())
        .addLine(n1, n5)
        .addLine(n1, n2)
        .addLine(n2, n3)
        .addLine(n3, n8)
        .addLine(n3, n7)
        .addLine(n2, n4)
        .addLine(n4, n8)
        .addLine(n4, n9)
        .startSub()
        .tempNode(Node.builder().fillColor(Color.ofRGB("#F7CAC9")).shape(NodeShapeEnum.ELLIPSE).build())
        .addNode(n5, n7, n8, n9)
        .endSub()
        .build();

[kovzol]

Wonderful, thanks for the quick response! Is it also possible to add a tooltip?

[jamisonjiang]

tooltips is not supported now I will add in the future and you can implement by following approach:

Insert tooltips element by original svg String;

you can assign table unique id then get this element by this id from svg document, then insert tooltips attribute manually:

    Node n1 = Node.builder()
        .shape(NodeShapeEnum.PLAIN)
        .table(
            table()
                .id("tool_tip_node_id")
                .border(1)
                .bgColor(COFFFF)
                .cellBorder(0)
                .cellSpacing(0)
                .cellPadding(6)
                .href("https://github.com/kovzol/Java-Geometry-Expert/blob/master/src/docs/help/images_a/rectangle.gif")
                .tr(td().color(COFFFF).text("1) FG  ⊥  DE"))
                .tr(td().color(COFFFF).text("8. sz.").fontSize(10))
        )
        .build();

but remember you have to add a_ as prefix to get element, because tooltips only take effect in \<a> elements, e,g:

1. If node_id = "tool_tip_node_id"
2. Get element by "a_tool_tip_node_id" rather than original id "tool_tip_node_id"

[kovzol]

Thanks, wonderful!