drawings can be placed on any series, reimplement jupyter, implement editable text boxes, allow for whitespace data within charts if they are NaN values, fix legend bug

src/general/handler.ts

@@ -106,13 +106,13 @@ export class Handler {
         
         // TODO definitely a better way to do this
         if (this.scale.height === 0 || this.scale.width === 0) {
-            this.legend.div.style.display = 'none'
+            // if (this.legend.div.style.display == 'flex') this.legend.div.style.display = 'none'
             if (this.toolBox) {
                 this.toolBox.div.style.display = 'none'
             }
         }
         else {
-            this.legend.div.style.display = 'flex'
+            // this.legend.div.style.display = 'flex'
             if (this.toolBox) {
                 this.toolBox.div.style.display = 'flex'
             }

src/general/legend.ts

@@ -37,6 +37,7 @@ export class Legend {
         this.div = document.createElement('div');
         this.div.classList.add('legend');
         this.div.style.maxWidth = `${(handler.scale.width * 100) - 8}vw`
+        this.div.style.display = 'none';
 
         this.text = document.createElement('span')
         this.text.style.lineHeight = '1.8'

src/general/styles.css

@@ -145,6 +145,12 @@ body {
 	color: var(--color);
 }
 
+.topbar-textbox-input {
+	background-color: var(--bg-color);
+	color: var(--color);
+	border: 1px solid var(--color);
+}
+
 .topbar-menu {
 	position: absolute;
 	display: none;
@@ -214,7 +220,7 @@ body {
 	pointer-events: none;
 	top: 10px;
 	left: 10px;
-	display: flex;
+	display: none;
 	flex-direction: column;
 }
 .legend-toggle-switch {

src/general/topbar.ts

@@ -78,12 +78,33 @@ export class TopBar {
         return widget
     }
 
-    makeTextBoxWidget(text: string, align='left') {
-        const textBox = document.createElement('div');
-        textBox.classList.add('topbar-textbox');
-        textBox.innerText = text
-        this.appendWidget(textBox, align, true)
-        return textBox
+    makeTextBoxWidget(text: string, align='left', callbackName=null) {
+        if (callbackName) {
+            const textBox = document.createElement('input');
+            textBox.classList.add('topbar-textbox-input');
+            textBox.value = text
+            textBox.style.width = `${(textBox.value.length+2)}ch`
+            textBox.addEventListener('input', (e) => {
+                textBox.style.width = `${(textBox.value.length+2)}ch`;
+            });
+            textBox.addEventListener('keydown', (e) => {
+                if (e.key == 'Enter') {
+                    e.preventDefault();
+                    textBox.blur();
+                }
+            });
+            textBox.addEventListener('blur', () => {
+                window.callbackFunction(`${callbackName}_~_${textBox.value}`)
+            });
+            this.appendWidget(textBox, align, true)
+            return textBox
+        } else {
+            const textBox = document.createElement('div');
+            textBox.classList.add('topbar-textbox');
+            textBox.innerText = text
+            this.appendWidget(textBox, align, true)
+            return textBox
+        }
     }
 
     makeMenu(items: string[], activeItem: string, separator: boolean, callbackName: string, align: 'right'|'left') {