From a52b7f41334e5f5c29af268d6e9d9f4b451ad444 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Cchrisshank=E2=80=9D?= <chris.shank.23@gmail.com>
Date: Wed, 16 Oct 2024 13:41:25 -0700
Subject: [PATCH] add thought

---
 demo/chains-of-thought/index.html |  7 ++++++-
 demo/chains-of-thought/main.ts    | 19 +++++++++++++++++++
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/demo/chains-of-thought/index.html b/demo/chains-of-thought/index.html
index 555c66e..e983207 100644
--- a/demo/chains-of-thought/index.html
+++ b/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;
diff --git a/demo/chains-of-thought/main.ts b/demo/chains-of-thought/main.ts
index e86d00d..7ea1e6c 100644
--- a/demo/chains-of-thought/main.ts
+++ b/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);