Added linebreak code to partially fix #1

README.md

@@ -4,4 +4,4 @@
 
 An easy to use tree editor for linguistics and the sciences that works in your browser.
 
-Check it out: https://groverburger.github.io/sapling
+Check it out: https://amunn.github.io/sapling

index.html

@@ -3,7 +3,7 @@
     <meta charset="utf-8">
     <!--<meta name="viewport" content="width=device-width, initial-scale=1.0">-->
     <meta name="google-site-verification" content="ZcBdsTH4w4fdIGoan-zwOJSahB5PYFh7iqIJI9ii4oM" />
-    <meta property="og:image" content="https://groverburger.github.io/sapling/sapling.png">
+    <meta property="og:image" content="sapling.png">
     <meta property="og:title" content="Sapling">
     <meta property="og:description" content="An easy to use syntax tree editor for linguistics and the sciences that works in your browser.">
     <title>Sapling</title>

main.js

@@ -38,12 +38,13 @@ function setup()
     if (treeBackup != null && treeBackup.version == undefined) {
 CreateInformationDiv(
 `<h1>Sapling has been updated!</h1>
-May 13th, 2021
+Jan 22, 2023 by Alan Munn
 <br>
 <h3>Subscript notation has been added!</h3>
 When you write two underscores in a row __ inside of a node, the text after it becomes a subscript!
 It's useful for putting indices on traces.
 <br>
+<h3>Linebreaks in node text. You can add a linebreak in a node by entering \\ as you type. It will break the node at that point. This is designed so that you can write terminal nodes correctly without a line separating the category and the word/morpheme.  E.g. for a verb node you would type V\\eat.
 <h3>Other Things</h3>
 <ul>
     <li>Info panel popup should no longer do weird things on Chrome or Safari.</li>
@@ -70,7 +71,7 @@ Please leave your feedback <a href=https://forms.gle/MDyZWf3bP4wh5fPF6>on this g
     FileInput.style("font-size", "0px")
     FileInput.style("opacity", "0")
 
-    const tipLink = createA("https://www.paypal.me/groverburger", "tip me!", "_blank")
+    const tipLink = createA("https://www.paypal.me/groverburger", "Tip the original author!", "_blank")
     tipLink.position(480,90)
     tipLink.size(40,40)
     tipLink.style("opacity", "0")
@@ -197,7 +198,7 @@ document.addEventListener("paste", function(event) {
     event.preventDefault()
 
     // get text representation of clipboard
-    let text = event.clipboardData.getData("text/plain");
+    let text = event.clipboardData.getData("text/utf8");
 
     for (const key in SelectionList)
     {
@@ -306,7 +307,7 @@ function keyPressed()
     }
 
     // backspace and enter
-    if (keyCode == 8 || keyCode == 13)
+    if (keyCode == 8  || keyCode == 13)
         return false
 
     // copying
@@ -594,7 +595,7 @@ function Update()
 CreateInformationDiv(
 `<h1>Sapling v3.1</h1>
 <br>
-Last updated May 13th, 2021
+Last updated Jan 22, 2023 by Alan Munn
 <br>
 <br>
 Created by Zach B (groverburger) for making syntax trees in Jorge Hankamer's Syntax 1 class, UCSC Fall 2020<br>
@@ -610,6 +611,7 @@ Type to edit text in a selected node.<br>
 Right click a node to open the node's options menu.<br>
 Click and drag to move the camera, scroll to zoom in and out.<br>
 Adding two underscores in a row __ in a node makes everything after it a subscript.<br>
+Adding two \\\\ in a row will add a linebreak to a node. This allows you to properly type terminal nodes without a branch between the node label and its word/morpheme. E.g. for a V node you would type V\\\\eat
 
 <h2>Hotkeys</h2>
 
@@ -723,7 +725,7 @@ function Draw()
     if (typeof InformationDiv != "undefined") return
 
     if (InHitbox(mouseX,mouseY, 10,10,110,110)) {
-        let _text = "View source code and change log" 
+        let _text = "View source code and change log"
         noStroke()
         fill(0,0,0, 200)
         rect(mouseX,mouseY, textWidth(_text) + 80,32)

treenode.js

@@ -190,9 +190,10 @@ class TreeNode
 
     textWidth()
     {
-        let [mainText, subText] = this.getMainTextAndSubText()
+        let [mainText,subText,longest,numlines] = this.getMainTextAndSubText()
         textSize(FontSize)
-        let w1 = textWidth(mainText)
+        // console.log(longest)
+        let w1 = textWidth(longest)
         textSize(SubFontSize)
         let w2 = textWidth(subText)
         textSize(FontSize)
@@ -201,7 +202,10 @@ class TreeNode
 
     textHeight()
     {
-        return FontSize+6
+        let [mainText,subText,longest,numlines] = this.getMainTextAndSubText()
+        return (FontSize+6)
+        // Not clear wny just multiplying this by numlines doesn't work
+        // Box is too big at the top not big enough at the bottom
     }
 
     lineHeight()
@@ -632,18 +636,18 @@ class TreeNode
         if (this.color == "default" || this.color == "highlighter")
             _fill(0)
         _strokeWeight(1)
-        _textAlign(LEFT)
+        _textAlign(CENTER)
 
-        let [mainText, subText] = this.getMainTextAndSubText()
+        let [mainText, subText,longest,numlines] = this.getMainTextAndSubText()
         _textSize(FontSize)
-        let w1 = _textWidth(mainText)
+        let w1 = _textWidth(longest)
         _textSize(SubFontSize)
         let w2 = _textWidth(subText)
         _textSize(FontSize)
-
-        _text(mainText, dx-w1/2-w2/2, dy + 6)
+        // These values are guesses changed for centre aligned text -AM
+        _text(mainText, dx-w1/10-w2/10, dy + 6)
         _textSize(SubFontSize)
-        _text(subText, dx+w1/2-w2/2, dy + 10)
+        _text(subText, dx+w1/10-w2/10, dy + 10)
 
         let i = 0
         while (i < this.arrows.length)
@@ -661,24 +665,38 @@ class TreeNode
         let subText = ""
         let mainText = ""
         let sub = false
+        let nl = ""
         let lastChar = ""
+        let longest = ""
+        let numlines = 1
         for (let i=0; i<this.text.length; i++) {
             let char = this.text[i]
             if (sub) {
                 subText += char
             } else {
+                mainText += nl
                 mainText += char
+                nl =  ""
+            }
+            if (char == "\\" && lastChar == "\\" && i < this.text.length-1) {
+                nl = '\n'
+                mainText = mainText.substring(0, mainText.length-2)
             }
-
             if (char == "_" && lastChar == "_" && i < this.text.length-1) {
                 sub = true
                 mainText = mainText.substring(0, mainText.length-2)
             }
 
             lastChar = char
         }
+        // Once we've constructed the text we split it into an array and
+        // then return the longest element of the array. This will determine
+        // the width to calculate the tree node
+        let splittext = mainText.split('\n')
+        numlines = splittext.length
+        longest = splittext.reduce((a, b) => a.length > b.length ? a : b, '')
 
-        return [mainText, subText]
+        return [mainText, subText,longest, numlines]
     }
 
     takePicture()