rename folk arrow

demo/chains-of-thought/index.html

@@ -36,7 +36,7 @@
         }
       }
 
-      folk-connection {
+      folk-arrow {
         display: block;
         position: absolute;
         inset: 0 0 0 0;

demo/chains-of-thought/main.ts

@@ -1,5 +1,5 @@
 import { FolkShape } from '../../src/folk-shape.ts';
-import { FolkConnection } from '../../src/folk-connection.ts';
+import { FolkArrow } from '../../src/folk-arrow.ts';
 import { FileSaver } from '../src/file-system.ts';
 
 declare global {
@@ -37,8 +37,8 @@ class FolkThought extends HTMLElement {
 
       document
         .querySelectorAll(
-          `folk-connection[source="folk-shape[id='${this.#geometry.id}']"], 
+          `folk-arrow[source="folk-shape[id='${this.#geometry.id}']"], 
-          folk-connection[target="folk-shape[id='${this.#geometry.id}']"]`
+          folk-arrow[target="folk-shape[id='${this.#geometry.id}']"]`
         )
         .forEach((el) => el.remove());
     }
@@ -47,7 +47,7 @@ class FolkThought extends HTMLElement {
 
 FolkShape.define();
 FolkThought.define();
-FolkConnection.define();
+FolkArrow.define();
 
 interface Thought {
   id: string;
@@ -82,10 +82,7 @@ function renderThought({ id, x, y, text }: Thought) {
 }
 
 function renderConnection({ sourceId, targetId }: Connection) {
-  return html`<folk-connection
+  return html`<folk-arrow source="folk-shape[id='${sourceId}']" target="folk-shape[id='${targetId}']"></folk-arrow>`;
-    source="folk-shape[id='${sourceId}']"
-    target="folk-shape[id='${targetId}']"
-  ></folk-connection>`;
 }
 
 function renderChainOfThought({ thoughts, connections }: ChainOfThought) {
@@ -100,7 +97,7 @@ function parseChainOfThought(): ChainOfThought {
       x: el.x,
       y: el.y,
     })),
-    connections: Array.from(document.querySelectorAll('folk-connection')).map((el) => ({
+    connections: Array.from(document.querySelectorAll('folk-arrow')).map((el) => ({
       sourceId: (el.sourceElement as FolkShape).id,
       targetId: (el.targetElement as FolkShape).id,
     })),

demo/semantic-zoom-in-a-canvas.html

@@ -75,7 +75,7 @@
         margin: 1rem;
       }
 
-      folk-connection {
+      folk-arrow {
         display: block;
         position: absolute;
         inset: 0 0 0 0;
@@ -145,16 +145,16 @@
       </p>
     </folk-shape>
 
-    <folk-connection source="#box1" target="#box2"></folk-connection>
+    <folk-arrow source="#box1" target="#box2"></folk-arrow>
-    <folk-connection source="#box2" target="#box3"></folk-connection>
+    <folk-arrow source="#box2" target="#box3"></folk-arrow>
-    <folk-connection source="#box1" target="#box3"></folk-connection>
+    <folk-arrow source="#box1" target="#box3"></folk-arrow>
 
     <script type="module">
       import '../src/standalone/folk-shape.ts';
-      import '../src/standalone/folk-connection.ts';
+      import '../src/standalone/folk-arrow.ts';
 
       document.body.querySelectorAll('folk-shape').forEach((el, i) => (el.style.viewTransitionName = `g${i}`));
-      document.body.querySelectorAll('folk-connection').forEach((el, i) => (el.style.viewTransitionName = `c${i}`));
+      document.body.querySelectorAll('folk-arrow').forEach((el, i) => (el.style.viewTransitionName = `c${i}`));
       document.body.querySelectorAll('h2').forEach((el, i) => (el.style.viewTransitionName = `h${i}`));
       document.body.querySelectorAll('p').forEach((el, i) => (el.style.viewTransitionName = `p${i}`));
 

demo/spreadsheet-graph-projection.html

@@ -15,7 +15,7 @@
         margin: 0;
       }
 
-      folk-connection {
+      folk-arrow {
         display: block;
         position: absolute;
         inset: 0 0 0 0;
@@ -167,7 +167,7 @@
 
     <script type="module">
       import '../src/standalone/folk-shape.ts';
-      import '../src/standalone/folk-connection.ts';
+      import '../src/standalone/folk-arrow.ts';
       import '../src/standalone/folk-spreadsheet.ts';
 
       let isProjected = false;
@@ -192,7 +192,7 @@
           for (const dep of cell.dependencies) {
             dep.setAttribute('graph', '');
 
-            const connection = document.createElement('folk-connection');
+            const connection = document.createElement('folk-arrow');
             connection.source = `folk-cell[row="${dep.row}"][column="${dep.column}"]`;
             connection.target = `folk-cell[row="${cell.row}"][column="${cell.column}"]`;
 
@@ -204,7 +204,7 @@
       function removeOverlayGraph() {
         document.body.removeAttribute('overlay', '');
 
-        document.querySelectorAll('folk-connection').forEach((arrow) => arrow.remove());
+        document.querySelectorAll('folk-arrow').forEach((arrow) => arrow.remove());
 
         document.querySelectorAll('folk-cell').forEach((cell) => {
           cell.removeAttribute('graph', '');

demo/sticky-html-arrow.html

@@ -20,7 +20,7 @@
         border-radius: 3px;
       }
 
-      folk-connection {
+      folk-arrow {
         display: block;
         position: absolute;
         inset: 0 0 0 0;
@@ -31,11 +31,11 @@
   <body>
     <folk-shape id="box1" x="50" y="100" width="50" height="50"></folk-shape>
     <folk-shape id="box2" x="150" y="300" width="50" height="50"></folk-shape>
-    <folk-connection source="#box1" target="#box2"></folk-connection>
+    <folk-arrow source="#box1" target="#box2"></folk-arrow>
 
     <script type="module">
       import '../src/standalone/folk-shape.ts';
-      import '../src/standalone/folk-connection.ts';
+      import '../src/standalone/folk-arrow.ts';
       import '../src/common/iframe-script.ts';
     </script>
   </body>

src/folk-connection.ts

@@ -26,12 +26,12 @@ export type Arrow = [
 
 declare global {
   interface HTMLElementTagNameMap {
-    'folk-connection': FolkConnection;
+    'folk-arrow': FolkArrow;
   }
 }
 
-export class FolkConnection extends AbstractArrow {
+export class FolkArrow extends AbstractArrow {
-  static override tagName = 'folk-connection';
+  static override tagName = 'folk-arrow';
 
   #options: StrokeOptions = {
     size: 7,

src/standalone/folk-connection.ts

@@ -1,3 +1,3 @@
-import { FolkConnection } from '../folk-connection';
+import { FolkArrow } from '../folk-arrow';
 
-FolkConnection.define();
+FolkArrow.define();