fix file permissions

demo/chains-of-thought/index.html

@@ -31,6 +31,8 @@
       }
 
       spatial-geometry {
+        border-radius: 7px;
+
         &::part(rotate),
         &::part(resize-nw),
         &::part(resize-ne),
@@ -38,13 +40,17 @@
         &::part(resize-sw) {
           display: none;
         }
-      }
 
-      textarea {
-        width: 100%;
-        height: 100%;
-        resize: none;
-        field-sizing: content;
+        spatial-thought {
+          display: block;
+          width: 100%;
+          height: 100%;
+          background-color: white;
+          border: solid 1px light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
+          padding: 0.5em 0.25em;
+          text-align: center;
+          border-radius: 6px;
+        }
       }
     </style>
   </head>

demo/chains-of-thought/main.ts

@@ -2,7 +2,67 @@ import { SpatialGeometry } from '../../src/canvas/spatial-geometry.ts';
 import { SpatialConnection } from '../../src/arrows/spatial-connection.ts';
 import { FileSaver } from '../../src/persistence/file.ts';
 
+declare global {
+  interface HTMLElementTagNameMap {
+    'spatial-thought': SpatialThought;
+  }
+}
+
+class SpatialThought extends HTMLElement {
+  static tagName = 'spatial-thought';
+
+  static register() {
+    customElements.define(this.tagName, this);
+  }
+
+  constructor() {
+    super();
+
+    this.addEventListener('pointerdown', this);
+  }
+
+  #textarea = this.querySelector('textarea')!;
+  #geometry = this.querySelector('spatial-geometry')!;
+
+  #identifier = this.getAttribute('identifier') || '';
+  get identifier() {
+    return this.#identifier;
+  }
+  set identifier(id) {
+    this.#identifier = id;
+  }
+
+  get text() {
+    return this.#textarea.value;
+  }
+  set text(text) {
+    this.#textarea.value = text;
+  }
+
+  get x() {
+    return this.#geometry.x;
+  }
+  set x(x) {
+    this.#geometry.x = x;
+  }
+
+  get y() {
+    return this.#geometry.y;
+  }
+
+  set y(y) {
+    this.#geometry.y = y;
+  }
+
+  focusTextArea() {
+    this.#textarea.focus();
+  }
+
+  handleEvent(event: PointerEvent): void {}
+}
+
 SpatialGeometry.register();
+SpatialThought.register();
 SpatialConnection.register();
 
 interface Thought {
@@ -29,15 +89,15 @@ function parseHTML(html: string): Element {
 }
 
 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>
+  return html`<spatial-geometry x="${thought.x}" y="${thought.y}" width="200" height="100">
+    <spatial-thought contenteditable="true" identifier="${thought.id}">${thought.text}</spatial-thought>
   </spatial-geometry>`;
 }
 
 function renderConnection({ sourceId, targetId }: Connection) {
   return html`<spatial-connection
-    source="spatial-geometry[data-id='${sourceId}']"
-    target="spatial-geometry[data-id='${targetId}']"
+    source="spatial-geometry:has(spatial-thought[identifier='${sourceId}'])"
+    target="spatial-geometry:has(spatial-thought[identifier='${targetId}'])"
   ></spatial-connection>`;
 }
 
@@ -47,15 +107,15 @@ function renderChainOfThought({ thoughts, connections }: ChainOfThought) {
 
 function parseChainOfThought(): ChainOfThought {
   return {
-    thoughts: Array.from(document.querySelectorAll('spatial-geometry')).map((el) => ({
-      id: el.dataset.id || '',
-      text: el.querySelector('textarea')?.value || '',
+    thoughts: Array.from(document.querySelectorAll('spatial-thought')).map((el) => ({
+      id: el.identifier,
+      text: el.text,
       x: el.x,
       y: el.y,
     })),
     connections: Array.from(document.querySelectorAll('spatial-connection')).map((el) => ({
-      sourceId: (el.sourceElement as SpatialGeometry).dataset.id || '',
-      targetId: (el.targetElement as SpatialGeometry).dataset.id || '',
+      sourceId: (el.sourceElement as SpatialThought).identifier,
+      targetId: (el.targetElement as SpatialThought).identifier,
     })),
   };
 }
@@ -68,16 +128,16 @@ 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(
+      parseHTML(
+        renderThought({
+          id: String(document.querySelectorAll('spatial-thought').length + 1),
+          text: '',
+          x: e.clientX,
+          y: e.clientY,
+        })
+      )
     );
-    main.appendChild(spatialGeometry);
-    spatialGeometry.querySelector('textarea')?.focus();
   }
 });
 

src/arrows/spatial-connection.ts

@@ -24,11 +24,17 @@ export type Arrow = [
   ac: number
 ];
 
+declare global {
+  interface HTMLElementTagNameMap {
+    'spatial-connection': SpatialConnection;
+  }
+}
+
 export class SpatialConnection extends AbstractArrow {
-  static tagName = 'spatial-connection' as const;
+  static tagName = 'spatial-connection';
 
   #options: StrokeOptions = {
-    size: 10,
+    size: 7,
     thinning: 0.5,
     smoothing: 0.5,
     streamline: 0.5,
@@ -93,9 +99,3 @@ function getSvgPathFromStroke(stroke: number[][]): string {
   d.push('Z');
   return d.join(' ');
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    [SpatialConnection.tagName]: SpatialConnection;
-  }
-}

src/canvas/spatial-geometry.ts

@@ -131,9 +131,15 @@ styles.replaceSync(`
   cursor: url("data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='1' dy='1' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(45 16 16)' filter='url(%23shadow)'><path d='M22.4789 9.45728L25.9935 12.9942L22.4789 16.5283V14.1032C18.126 14.1502 14.6071 17.6737 14.5675 22.0283H17.05L13.513 25.543L9.97889 22.0283H12.5674C12.6071 16.5691 17.0214 12.1503 22.4789 12.1031L22.4789 9.45728Z' fill='black'/><path fill-rule='evenodd' clip-rule='evenodd' d='M21.4789 7.03223L27.4035 12.9945L21.4789 18.9521V15.1868C18.4798 15.6549 16.1113 18.0273 15.649 21.0284H19.475L13.5128 26.953L7.55519 21.0284H11.6189C12.1243 15.8155 16.2679 11.6677 21.4789 11.1559L21.4789 7.03223ZM22.4789 12.1031C17.0214 12.1503 12.6071 16.5691 12.5674 22.0284H9.97889L13.513 25.543L17.05 22.0284H14.5675C14.5705 21.6896 14.5947 21.3558 14.6386 21.0284C15.1157 17.4741 17.9266 14.6592 21.4789 14.1761C21.8063 14.1316 22.1401 14.1069 22.4789 14.1032V16.5284L25.9935 12.9942L22.4789 9.45729L22.4789 12.1031Z' fill='white'/></g></svg>") 16 16, pointer;
 }`);
 
+declare global {
+  interface HTMLElementTagNameMap {
+    'spatial-geometry': SpatialGeometry;
+  }
+}
+
 // TODO: add z coordinate?
 export class SpatialGeometry extends HTMLElement {
-  static tagName = 'spatial-geometry' as const;
+  static tagName = 'spatial-geometry';
 
   static register() {
     customElements.define(this.tagName, this);
@@ -413,9 +419,3 @@ export class SpatialGeometry extends HTMLElement {
     }
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    [SpatialGeometry.tagName]: SpatialGeometry;
-  }
-}

src/canvas/spatial-ink.ts

@@ -23,8 +23,14 @@ styles.replaceSync(`
   }
 `);
 
+declare global {
+  interface HTMLElementTagNameMap {
+    'spatial-ink': SpatialInk;
+  }
+}
+
 export class SpatialInk extends HTMLElement {
-  static tagName = 'spatial-ink' as const;
+  static tagName = 'spatial-ink';
 
   static register() {
     customElements.define(this.tagName, this);
@@ -202,9 +208,3 @@ export class SpatialInk extends HTMLElement {
     return d.join(' ');
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    [SpatialInk.tagName]: SpatialInk;
-  }
-}

src/persistence/file.ts

@@ -38,8 +38,9 @@ export class FileSaver {
     const previousPermission = await file.queryPermission({ mode: 'readwrite' });
     if (previousPermission === 'granted') return file;
 
-    const newPermission = await file.requestPermission({ mode: 'readwrite' });
-    if (newPermission === 'granted') return file;
+    // this requires user interaction
+    // const newPermission = await file.requestPermission({ mode: 'readwrite' });
+    // if (newPermission === 'granted') return file;
 
     return undefined;
   }