| 200 | // in .command that needs to be connected to a corresponding <pre> in .help |
| 201 | class ESLink { |
| 202 | constructor(clazz, option, mid, color) { |
| 203 | this.option = option; // a span from .command |
| 204 | this.color = color; // the color chosen for this link |
| 205 | this.paths = []; // a list of d3 paths to draw for this link |
| 206 | this.lines = []; // a list of d3 lines to draw for this link |
| 207 | this.circle = null; // circle data to draw, if any (used by unknowns) |
| 208 | this.text = null; // the text to draw in the circle (always '?') |
| 209 | this.group = null; // the group this link is a part of |
| 210 | |
| 211 | // unknown links have no corresponding <pre> in .help, they simply show up |
| 212 | // with a '?' connected to them |
| 213 | this.unknown = false; |
| 214 | |
| 215 | // unknown links can go either down or up |
| 216 | this.directiondown = true; |
| 217 | |
| 218 | // clazz is the name of the current group (shell, command0, command1..) |
| 219 | if (clazz) { |
| 220 | // the matching <pre> in .help |
| 221 | this.help = document.getElementById(clazz); |
| 222 | |
| 223 | // each link can go either left or right, we decide where by |
| 224 | // calculating its middle and comparing it to the middle of .command |
| 225 | const rr = option.getBoundingClientRect(); |
| 226 | const rrmid = rr.left + rr.width / 2; |
| 227 | this.goingleft = rrmid <= mid; |
| 228 | |
| 229 | this.help.style.borderColor = this.color; |
| 230 | } |
| 231 | } |
| 232 | |
| 233 | leftmost() { |
| 234 | return this.group.links.find((l) => l.goingleft) ?? null; |