remove chains of thought
This commit is contained in:
“chrisshank”
parent
64de5d735f
commit
ae2624b7c5
|
|
@ -1,52 +0,0 @@
|
|||
{
|
||||
"thoughts": [
|
||||
{
|
||||
"id": "1",
|
||||
"text": "Blindfold chess requires internalizing chess structures.",
|
||||
"x": 392,
|
||||
"y": 157
|
||||
},
|
||||
{
|
||||
"id": "2",
|
||||
"text": "Internalizing chess structures builds intuition.",
|
||||
"x": 73,
|
||||
"y": 88
|
||||
},
|
||||
{
|
||||
"id": "3",
|
||||
"text": "Blindfold chess improves intuition.",
|
||||
"x": 158,
|
||||
"y": 337
|
||||
},
|
||||
{
|
||||
"id": "4",
|
||||
"text": "Building intuition is essential for chess improvement.",
|
||||
"x": 457,
|
||||
"y": 532
|
||||
},
|
||||
{
|
||||
"id": "5",
|
||||
"text": "Blindfold chess is useful for chess improvement.",
|
||||
"x": 206,
|
||||
"y": 621
|
||||
}
|
||||
],
|
||||
"connections": [
|
||||
{
|
||||
"sourceId": "1",
|
||||
"targetId": "3"
|
||||
},
|
||||
{
|
||||
"sourceId": "2",
|
||||
"targetId": "3"
|
||||
},
|
||||
{
|
||||
"sourceId": "3",
|
||||
"targetId": "5"
|
||||
},
|
||||
{
|
||||
"sourceId": "4",
|
||||
"targetId": "5"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -1,85 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Chains of Thought</title>
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
main {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
button {
|
||||
background: white;
|
||||
border-radius: 0.25rem;
|
||||
border: solid 1px black;
|
||||
color: black;
|
||||
|
||||
&:hover {
|
||||
background: black;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
folk-shape {
|
||||
border-radius: 7px;
|
||||
|
||||
&::part(rotate),
|
||||
&::part(resize-top-left),
|
||||
&::part(resize-top-right),
|
||||
&::part(resize-bottom-right),
|
||||
&::part(resize-bottom-left) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
fc-thought {
|
||||
background-color: white;
|
||||
border-radius: 6px;
|
||||
border: solid 1px light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
|
||||
display: block;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
width: 30ch;
|
||||
|
||||
> [name='text'] {
|
||||
padding: 0.5em 0.25em;
|
||||
}
|
||||
|
||||
> button[name='delete'] {
|
||||
font-size: 2rem;
|
||||
line-height: 0.6;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
top: 0%;
|
||||
left: 100%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<button name="open">Open</button>
|
||||
<button name="save">Save</button>
|
||||
<button name="save-as">Save As</button>
|
||||
<main></main>
|
||||
<script type="module" src="./main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,156 +0,0 @@
|
|||
import { FolkShape } from '../../../labs/folk-shape.ts';
|
||||
import { FolkArrow } from '../../../labs/folk-arrow.ts';
|
||||
import { FileSaver } from '../src/file-system.ts';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'fc-thought': FolkThought;
|
||||
}
|
||||
}
|
||||
|
||||
class FolkThought extends HTMLElement {
|
||||
static tagName = 'fc-thought';
|
||||
|
||||
static define() {
|
||||
if (customElements.get(this.tagName)) return;
|
||||
customElements.define(this.tagName, this);
|
||||
}
|
||||
|
||||
#deleteButton = this.querySelector('button[name="delete"]') as HTMLButtonElement;
|
||||
#text = this.querySelector('[name="text"]') as HTMLElement;
|
||||
|
||||
#geometry = this.parentElement as FolkShape;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
this.addEventListener('click', this);
|
||||
}
|
||||
|
||||
get text() {
|
||||
return this.#text.innerHTML;
|
||||
}
|
||||
|
||||
handleEvent(event: PointerEvent): void {
|
||||
if (event.type === 'click' && event.target === this.#deleteButton) {
|
||||
this.#geometry.remove();
|
||||
|
||||
document
|
||||
.querySelectorAll(
|
||||
`folk-arrow[source="folk-shape[id='${this.#geometry.id}']"],
|
||||
folk-arrow[target="folk-shape[id='${this.#geometry.id}']"]`
|
||||
)
|
||||
.forEach((el) => el.remove());
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
FolkShape.define();
|
||||
FolkThought.define();
|
||||
FolkArrow.define();
|
||||
|
||||
interface Thought {
|
||||
id: string;
|
||||
text: string;
|
||||
x: number;
|
||||
y: number;
|
||||
}
|
||||
|
||||
interface Connection {
|
||||
sourceId: string;
|
||||
targetId: string;
|
||||
}
|
||||
|
||||
interface ChainOfThought {
|
||||
thoughts: Thought[];
|
||||
connections: Connection[];
|
||||
}
|
||||
|
||||
const html = String.raw;
|
||||
|
||||
function parseHTML(html: string): Element {
|
||||
return document.createRange().createContextualFragment(html).firstElementChild!;
|
||||
}
|
||||
|
||||
function renderThought({ id, x, y, text }: Thought) {
|
||||
return html`<folk-shape id="${id}" x="${x}" y="${y}">
|
||||
<fc-thought>
|
||||
<div contenteditable="true" name="text">${text}</div>
|
||||
<button name="delete">␡</button>
|
||||
</fc-thought>
|
||||
</folk-shape>`;
|
||||
}
|
||||
|
||||
function renderConnection({ sourceId, targetId }: Connection) {
|
||||
return html`<folk-arrow source="folk-shape[id='${sourceId}']" target="folk-shape[id='${targetId}']"></folk-arrow>`;
|
||||
}
|
||||
|
||||
function renderChainOfThought({ thoughts, connections }: ChainOfThought) {
|
||||
return html`${thoughts.map(renderThought).join('')}${connections.map(renderConnection).join('')}`;
|
||||
}
|
||||
|
||||
function parseChainOfThought(): ChainOfThought {
|
||||
return {
|
||||
thoughts: Array.from(document.querySelectorAll('folk-shape')).map((el) => ({
|
||||
id: el.id,
|
||||
text: (el.firstElementChild as FolkThought).text,
|
||||
x: el.x,
|
||||
y: el.y,
|
||||
})),
|
||||
connections: Array.from(document.querySelectorAll('folk-arrow')).map((el) => ({
|
||||
sourceId: (el.sourceElement as FolkShape).id,
|
||||
targetId: (el.targetElement as FolkShape).id,
|
||||
})),
|
||||
};
|
||||
}
|
||||
|
||||
const openButton = document.querySelector('button[name="open"]')!;
|
||||
const saveButton = document.querySelector('button[name="save"]')!;
|
||||
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) {
|
||||
main.appendChild(
|
||||
parseHTML(
|
||||
renderThought({
|
||||
id: String(document.querySelectorAll('fc-thought').length + 1),
|
||||
text: '',
|
||||
x: e.clientX,
|
||||
y: e.clientY,
|
||||
})
|
||||
)
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
async function openFile(showPicker = true) {
|
||||
try {
|
||||
const text = await fileSaver.open(showPicker);
|
||||
const json = JSON.parse(text || '{ "thoughts": [], "connections": [] }');
|
||||
main.setHTMLUnsafe(renderChainOfThought(json));
|
||||
} catch (e) {
|
||||
// No file handler was persisted or the file is invalid JSON.
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
|
||||
function saveFile(promptNewFile = false) {
|
||||
const file = JSON.stringify(parseChainOfThought(), null, 2);
|
||||
fileSaver.save(file, promptNewFile);
|
||||
}
|
||||
|
||||
openButton.addEventListener('click', () => {
|
||||
openFile();
|
||||
});
|
||||
|
||||
saveButton.addEventListener('click', () => {
|
||||
saveFile();
|
||||
});
|
||||
|
||||
saveAsButton.addEventListener('click', () => {
|
||||
saveFile(true);
|
||||
});
|
||||
|
||||
openFile(false);
|
||||
Loading…
Reference in New Issue