I encountered a problem using Easy Syntax Tree today. That is, the export-to-PNG no longer works. But the export to SVG still works fine. I am using the library “svg-crowbar” to handle SVG/PNG exports. So I assumed it’s a library issue. Then, I checked the console:

In syntax tree, an edge may be a triangle. Triangles stand for a portion of structure that the tree-drawer doesn’t want to bother drawing out in full. To implement this in ESTv2, we use the SVG <Polygon> element, and let browser draw the triangle by giving the three end points. When the user wants to add a triangle child, this action in the reducer will be called:

What is ESTv2 — Easy Syntax Tree — What is it Easy Syntax Tree is the FIRST and ONLY web tool for linguists to create linguistic syntax tree easily, interactively…jiahao-c.medium.com Event Delegation In ESTv2, a user may intuitively want to exit the edit mode by clicking on the blank space. But, where should the onClick go? My solution was to put it on the entire svg element: Then, I use stopPropgation for events on inner elements.

Easy Syntax Tree is the FIRST and ONLY web tool for linguists to create linguistic syntax tree easily, interactively. (What You See Is What You Get.) It frees students from using bracket notations as in the existing tools, simplifies tree drawing and increases productivity.

The old (yet still popular) way of drawing syntax tree looks like this: The user of Easy Syntax Tree may want to import a tree from the bracket notation. Therefore, there should be an algorithm to convert from the bracket notation to the data structure that EST uses. Here’s a specification for the function: Here are a visualization of the three trees in the test cases: