WIP: GSoC Phase 3: K12 Mode xlet tooltips

This MR is based on and a superset of !301 (closed). I tried to make minimal changes to the C code base.

What this MR does

• Parses all -help.pd files in the K12 directory to extract the content of the tooltips.
• Adds feature: when the mouse is hovering over the xlets, a tooltip shows up.

How it works

1. When starting Pd in K12 mode, a parser goes over all -help.pd files to extract the information in the pd META canvas. The content of the tooltip is stored in a global object called k12_xlet_tt, structured like this:

{
  "abstraction1": {
    "i0": "content...",
    "i1": "content...",
    "o0": "content..."
  },
  "abstraction2": {
    ...
  }, ...
}

2. When opening a .pd file and Purr Data is creating gobjs on the svg, the gui_gobj_new function from JS receives the rtext-text of the graph object from the C side (which is essentially the name of the K12 abstraction), and stores it in the DOM using the ttid attribute. This way, Purr Data knows which K12 abstraction is our new gobj representing, making it possible to retrieve tooltip content from k12_xlet_tt. Relevant changes include:
   • In pdgui.js, an additional parameter for gui_gobj_new to receive the rtext-text;
   • In g_graph.c's graph_vis function , a call to rtext_gettext before vmessing gui_obj_new.
3. C code now already has a (very complex) mechanism for detecting whether the mouse cursor is hovering over any xlet, and if so, it will vmess gui_gobj_highlight_io to play the cute animation. We just modify gui_highlight_io to retrieve tooltip content from k12_xlet_tt using the ttid attribute, and then display the tooltip div at the appropriate position. Relevant changes include:
   • In pd_canvas.html, there's a new <div> to contain the tooltip.
   • pdgui.js's gui_gobj_highlight_io function now shows the tooltip div when the cursor is hovering over xlets. For inlets, the tooltip will be located below the cursor, because there will be guaranteed space; the opposite for outlets.
   • pdgui.js's gui_gobj_configure_io function hides the tooltip div, since this function is called every time when the cursor is moving out of the xlet.

Screenshot

Todo

• Feature: when the xlet is on the right-most edge of the canvas, show the xlet on the left of the cursor.
• Bug: For some unknown reason, when creating certain K12 abstractions, the rtext-text doesn't get passed through gui_vmess to gui_gobj_new. When this happens, the <g> will not have a correct ttid attribute and thus won't display the tooltip. I fail to find a pattern when this will happen. It's always the same abstractions.
  I tried printing all the gui_gobj_new calls for demo_sequencer_complex.pd and the result is as below.