6aba6b665f
This adds a bit of debugging information on mouseover. For example, a tooltip with the text `bird@tail.arm[0]` can be interpreted as "a bird symbol attached to the tail symbol's first arm attachment point." The implementation is a bit funky: we basically annotate the SVG DOM with various `data` attributes, and on mouseover we traverse the DOM from the element the mouse is over all the way up to the SVG root element, picking out relevant `data` attributes and building a tooltip out of it. This ended up being easier than e.g. passing a bunch of props down the whole tree in React. |
||
|---|---|---|
| .. | ||
| __snapshots__ | ||
| pages | ||
| attach.test.tsx | ||
| attach.tsx | ||
| auto-sizing-svg.tsx | ||
| bounding-box.test.ts | ||
| bounding-box.ts | ||
| browser-main.tsx | ||
| colors.ts | ||
| creature-symbol.tsx | ||
| export-svg.tsx | ||
| hover-debug-helper.tsx | ||
| path.ts | ||
| point.test.tsx | ||
| point.ts | ||
| random.test.ts | ||
| random.ts | ||
| specs.ts | ||
| svg-symbol-metadata.test.ts | ||
| svg-symbol-metadata.ts | ||
| svg-symbol.tsx | ||
| svg-vocabulary.ts | ||
| symbol-context-widget.tsx | ||
| util.test.tsx | ||
| util.ts | ||
| visible-specs.tsx | ||
| vocabulary-builder.test.ts | ||
| vocabulary-builder.ts | ||