diff --git a/demo/chains-of-thought/index.html b/demo/chains-of-thought/index.html
index e983207..e1c63f2 100644
--- a/demo/chains-of-thought/index.html
+++ b/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;
+ }
}
diff --git a/demo/chains-of-thought/main.ts b/demo/chains-of-thought/main.ts
index 7ea1e6c..0593cc5 100644
--- a/demo/chains-of-thought/main.ts
+++ b/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`
-
+ return html`
+ ${thought.text}
`;
}
function renderConnection({ sourceId, targetId }: Connection) {
return html``;
}
@@ -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();
}
});
diff --git a/src/arrows/spatial-connection.ts b/src/arrows/spatial-connection.ts
index 82252c5..f10806a 100644
--- a/src/arrows/spatial-connection.ts
+++ b/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;
- }
-}
diff --git a/src/canvas/spatial-geometry.ts b/src/canvas/spatial-geometry.ts
index ce65dd1..56bca03 100644
--- a/src/canvas/spatial-geometry.ts
+++ b/src/canvas/spatial-geometry.ts
@@ -131,9 +131,15 @@ styles.replaceSync(`
cursor: url("data:image/svg+xml,") 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;
- }
-}
diff --git a/src/canvas/spatial-ink.ts b/src/canvas/spatial-ink.ts
index c6b3476..4ca9446 100644
--- a/src/canvas/spatial-ink.ts
+++ b/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;
- }
-}
diff --git a/src/persistence/file.ts b/src/persistence/file.ts
index e15afcb..04b5aa5 100644
--- a/src/persistence/file.ts
+++ b/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;
}