add thought

demo/chains-of-thought/index.html

@@ -14,11 +14,16 @@
       }
 
       body {
-        min-height: 100%;
+        height: 100%;
         position: relative;
         margin: 0;
       }
 
+      main {
+        height: 100%;
+        width: 100%;
+      }
+
       spatial-connection {
         display: block;
         position: absolute;

demo/chains-of-thought/main.ts

@@ -24,6 +24,10 @@ interface ChainOfThought {
 
 const html = String.raw;
 
+function parseHTML(html: string): Element {
+  return document.createRange().createContextualFragment(html).firstElementChild!;
+}
+
 function renderThought(thought: Thought) {
   return html` <spatial-geometry data-id="${thought.id}" x="${thought.x}" y="${thought.y}" width="200" height="100">
     <textarea>${thought.text}</textarea>
@@ -62,6 +66,21 @@ const saveAsButton = document.querySelector('button[name="save-as"]')!;
 const main = document.querySelector('main')!;
 const fileSaver = new FileSaver('chains-of-thought', 'json', 'application/json');
 
+main.addEventListener('dblclick', (e) => {
+  if (e.target === main) {
+    const spatialGeometry = parseHTML(
+      renderThought({
+        id: String(document.querySelectorAll('spatial-geometry').length + 1),
+        text: '',
+        x: e.clientX,
+        y: e.clientY,
+      })
+    );
+    main.appendChild(spatialGeometry);
+    spatialGeometry.querySelector('textarea')?.focus();
+  }
+});
+
 async function openFile(showPicker = true) {
   try {
     const text = await fileSaver.open(showPicker);