jeffemmett
/
folk-canvas
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

renames

This commit is contained in:
Orion Reed 2024-12-02 02:10:07 -05:00
parent 2ab56e2a40
commit f962d52a37
33 changed files with 238 additions and 238 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
demo/animated-shapes.html
View File

@ -52,25 +52,25 @@
height: 100%; height: 100%;
} }
fc-geometry { folk-shape {
background: black; background: black;
color: white; color: white;
} }
</style> </style>
</head> </head>
<body> <body>
<fc-geometry x="100" y="100" width="50" height="50"> <folk-shape x="100" y="100" width="50" height="50">
<h2>Lorem ipsum</h2> <h2>Lorem ipsum</h2>
</fc-geometry> </folk-shape>
<fc-geometry x="100" y="200" width="50" height="50"></fc-geometry> <folk-shape x="100" y="200" width="50" height="50"></folk-shape>
<fc-geometry x="100" y="300" width="50" height="50"></fc-geometry> <folk-shape x="100" y="300" width="50" height="50"></folk-shape>
<script type="module"> <script type="module">
import { FolkGeometry } from '../src/canvas/fc-geometry.ts'; import { FolkShape } from '../src/canvas/folk-shape.ts';
FolkGeometry.define(); FolkShape.define();
const geos = document.querySelectorAll('fc-geometry'); const geos = document.querySelectorAll('folk-shape');
geos.forEach((el, i) => (el.style.viewTransitionName = `g${i}`)); geos.forEach((el, i) => (el.style.viewTransitionName = `g${i}`));

16
demo/arrows.html
View File

@ -15,12 +15,12 @@
margin: 0; margin: 0;
} }
fc-geometry { folk-shape {
border: 1px solid black; border: 1px solid black;
border-radius: 3px; border-radius: 3px;
} }
fc-connection { folk-connection {
display: block; display: block;
position: absolute; position: absolute;
inset: 0 0 0 0; inset: 0 0 0 0;
@ -28,16 +28,16 @@
</style> </style>
</head> </head>
<body> <body>
<fc-geometry id="box1" x="50" y="100" width="50" height="50"></fc-geometry> <folk-shape id="box1" x="50" y="100" width="50" height="50"></folk-shape>
<fc-geometry id="box2" x="150" y="300" width="50" height="50"></fc-geometry> <folk-shape id="box2" x="150" y="300" width="50" height="50"></folk-shape>
<fc-connection source="#box1" target="#box2"></fc-connection> <folk-connection source="#box1" target="#box2"></folk-connection>
<script type="module"> <script type="module">
import { FolkGeometry } from '../src/canvas/fc-geometry.ts'; import { FolkShape } from '../src/canvas/folk-shape.ts';
import { FolkConnection } from '../src/arrows/fc-connection.ts'; import { FolkConnection } from '../src/arrows/folk-connection.ts';
import '../src/arrows/iframe-script.ts'; import '../src/arrows/iframe-script.ts';
FolkGeometry.define(); FolkShape.define();
FolkConnection.define(); FolkConnection.define();
</script> </script>
</body> </body>

18
demo/beats.html
View File

@ -22,7 +22,7 @@
pointer-events: none; pointer-events: none;
} }
fc-geometry { folk-shape {
border: 1px solid black; border: 1px solid black;
border-radius: 4px; border-radius: 4px;
} }
@ -33,17 +33,17 @@
</style> </style>
</head> </head>
<body> <body>
<fc-geometry x="100" y="100"> <folk-shape x="100" y="100">
<folk-metronome bpm="120"></folk-metronome> <folk-metronome bpm="120"></folk-metronome>
</fc-geometry> </folk-shape>
<fc-geometry x="200" y="100"> <folk-shape x="200" y="100">
<audio id="kick" src="/Kick_Bouncy.wav" controls></audio> <audio id="kick" src="/Kick_Bouncy.wav" controls></audio>
</fc-geometry> </folk-shape>
<fc-geometry x="200" y="200"> <folk-shape x="200" y="200">
<audio id="hat" src="/Hat_Closed.wav" controls></audio> <audio id="hat" src="/Hat_Closed.wav" controls></audio>
</fc-geometry> </folk-shape>
<event-propagator <event-propagator
source="folk-metronome" source="folk-metronome"
@ -60,12 +60,12 @@
></event-propagator> ></event-propagator>
<script type="module"> <script type="module">
import { FolkGeometry } from '../src/canvas/fc-geometry.ts'; import { FolkShape } from '../src/canvas/folk-shape.ts';
import { FolkLLM } from '../src/folk-llm.ts'; import { FolkLLM } from '../src/folk-llm.ts';
import { FolkMetronome } from '../src/folk-metronome.ts'; import { FolkMetronome } from '../src/folk-metronome.ts';
import { EventPropagator } from '../src/arrows/event-propagator.ts'; import { EventPropagator } from '../src/arrows/event-propagator.ts';
FolkGeometry.define(); FolkShape.define();
FolkLLM.define(); FolkLLM.define();
FolkMetronome.define(); FolkMetronome.define();
EventPropagator.define(); EventPropagator.define();

10
demo/canvasify.html
View File

@ -35,7 +35,7 @@
font-style: italic; font-style: italic;
} }
fc-geometry { folk-shape {
z-index: 2; z-index: 2;
} }
</style> </style>
@ -100,9 +100,9 @@
</main> </main>
<script type="module"> <script type="module">
import { FolkGeometry } from '../src/canvas/fc-geometry.ts'; import { FolkShape } from '../src/canvas/folk-shape.ts';
FolkGeometry.define(); FolkShape.define();
function copyStyles(from, to) { function copyStyles(from, to) {
const styles = getComputedStyle(from); const styles = getComputedStyle(from);
@ -115,7 +115,7 @@
} }
document.addEventListener('click', ({ target }) => { document.addEventListener('click', ({ target }) => {
if (target.closest('fc-geometry') || target.matches('body, html')) return; if (target.closest('folk-shape') || target.matches('body, html')) return;
const rect = target.getBoundingClientRect(); const rect = target.getBoundingClientRect();
@ -133,7 +133,7 @@
copyStyles(el, copiedElements[i]); copyStyles(el, copiedElements[i]);
}); });
const geometry = document.createElement('fc-geometry'); const geometry = document.createElement('folk-shape');
geometry.x = rect.x; geometry.x = rect.x;
geometry.y = rect.y; geometry.y = rect.y;
geometry.height = rect.height; geometry.height = rect.height;

4
demo/chains-of-thought/index.html
View File

@ -36,13 +36,13 @@
} }
} }
fc-connection { folk-connection {
display: block; display: block;
position: absolute; position: absolute;
inset: 0 0 0 0; inset: 0 0 0 0;
} }
fc-geometry { folk-shape {
border-radius: 7px; border-radius: 7px;
&::part(rotate), &::part(rotate),

32
demo/chains-of-thought/main.ts
View File

@ -1,5 +1,5 @@
import { FolkGeometry } from '../../src/canvas/fc-geometry.ts'; import { FolkShape } from '../../src/canvas/folk-shape.ts';
import { FolkConnection } from '../../src/arrows/fc-connection.ts'; import { FolkConnection } from '../../src/arrows/folk-connection.ts';
import { FileSaver } from '../../src/file-system.ts'; import { FileSaver } from '../../src/file-system.ts';
declare global { declare global {
@ -18,7 +18,7 @@ class FolkThought extends HTMLElement {
#deleteButton = this.querySelector('button[name="delete"]') as HTMLButtonElement; #deleteButton = this.querySelector('button[name="delete"]') as HTMLButtonElement;
#text = this.querySelector('[name="text"]') as HTMLElement; #text = this.querySelector('[name="text"]') as HTMLElement;
#geometry = this.parentElement as FolkGeometry; #geometry = this.parentElement as FolkShape;
constructor() { constructor() {
super(); super();
@ -36,15 +36,15 @@ class FolkThought extends HTMLElement {
document document
.querySelectorAll( .querySelectorAll(
`fc-connection[source="fc-geometry[id='${this.#geometry.id}']"], `folk-connection[source="folk-shape[id='${this.#geometry.id}']"],
fc-connection[target="fc-geometry[id='${this.#geometry.id}']"]` folk-connection[target="folk-shape[id='${this.#geometry.id}']"]`
) )
.forEach((el) => el.remove()); .forEach((el) => el.remove());
} }
} }
} }
FolkGeometry.define(); FolkShape.define();
FolkThought.define(); FolkThought.define();
FolkConnection.define(); FolkConnection.define();
@ -72,19 +72,19 @@ function parseHTML(html: string): Element {
} }
function renderThought({ id, x, y, text }: Thought) { function renderThought({ id, x, y, text }: Thought) {
return html`<fc-geometry id="${id}" x="${x}" y="${y}"> return html`<folk-shape id="${id}" x="${x}" y="${y}">
<fc-thought> <fc-thought>
<div contenteditable="true" name="text">${text}</div> <div contenteditable="true" name="text">${text}</div>
<button name="delete">␡</button> <button name="delete">␡</button>
</fc-thought> </fc-thought>
</fc-geometry>`; </folk-shape>`;
} }
function renderConnection({ sourceId, targetId }: Connection) { function renderConnection({ sourceId, targetId }: Connection) {
return html`<fc-connection return html`<folk-connection
source="fc-geometry[id='${sourceId}']" source="folk-shape[id='${sourceId}']"
target="fc-geometry[id='${targetId}']" target="folk-shape[id='${targetId}']"
></fc-connection>`; ></folk-connection>`;
} }
function renderChainOfThought({ thoughts, connections }: ChainOfThought) { function renderChainOfThought({ thoughts, connections }: ChainOfThought) {
@ -93,15 +93,15 @@ function renderChainOfThought({ thoughts, connections }: ChainOfThought) {
function parseChainOfThought(): ChainOfThought { function parseChainOfThought(): ChainOfThought {
return { return {
thoughts: Array.from(document.querySelectorAll('fc-geometry')).map((el) => ({ thoughts: Array.from(document.querySelectorAll('folk-shape')).map((el) => ({
id: el.id, id: el.id,
text: (el.firstElementChild as FolkThought).text, text: (el.firstElementChild as FolkThought).text,
x: el.x, x: el.x,
y: el.y, y: el.y,
})), })),
connections: Array.from(document.querySelectorAll('fc-connection')).map((el) => ({ connections: Array.from(document.querySelectorAll('folk-connection')).map((el) => ({
sourceId: (el.sourceElement as FolkGeometry).id, sourceId: (el.sourceElement as FolkShape).id,
targetId: (el.targetElement as FolkGeometry).id, targetId: (el.targetElement as FolkShape).id,
})), })),
}; };
} }

12
demo/collision.html
View File

@ -19,22 +19,22 @@
margin: 0; margin: 0;
} }
fc-geometry { folk-shape {
border: 2px solid black; border: 2px solid black;
} }
</style> </style>
</head> </head>
<body> <body>
<fc-geometry x="100" y="100" width="50" height="50"> Hello World </fc-geometry> <folk-shape x="100" y="100" width="50" height="50"> Hello World </folk-shape>
<fc-geometry x="200" y="200" width="50" height="50"></fc-geometry> <folk-shape x="200" y="200" width="50" height="50"></folk-shape>
<script type="module"> <script type="module">
import { FolkGeometry } from '../src/canvas/fc-geometry.ts'; import { FolkShape } from '../src/canvas/folk-shape.ts';
import { collisionDetection } from '../src/collision.ts'; import { collisionDetection } from '../src/collision.ts';
FolkGeometry.define(); FolkShape.define();
const geometryElements = document.querySelectorAll('fc-geometry'); const geometryElements = document.querySelectorAll('folk-shape');
function handleCollision(e) { function handleCollision(e) {
geometryElements.forEach((el) => { geometryElements.forEach((el) => {

8
demo/distance-perf.html
View File

@ -15,7 +15,7 @@
margin: 0; margin: 0;
} }
fc-geometry { folk-shape {
border: 2px solid black; border: 2px solid black;
} }
@ -29,9 +29,9 @@
<distance-field> </distance-field> <distance-field> </distance-field>
<script type="module"> <script type="module">
import { DistanceField } from '../src/distance-field.ts'; import { DistanceField } from '../src/distance-field.ts';
import { FolkGeometry } from '../src/canvas/fc-geometry.ts'; import { FolkShape } from '../src/canvas/folk-shape.ts';
FolkGeometry.define(); FolkShape.define();
const d = document.querySelector('distance-field'); const d = document.querySelector('distance-field');
@ -40,7 +40,7 @@
const now = performance.now(); const now = performance.now();
for (let i = 0; i < 20; i++) { for (let i = 0; i < 20; i++) {
for (let j = 0; j < 20; j++) { for (let j = 0; j < 20; j++) {
const geo = document.createElement('fc-geometry'); const geo = document.createElement('folk-shape');
geo.x = 100 * i + Math.floor(Math.random() * 45); geo.x = 100 * i + Math.floor(Math.random() * 45);
geo.y = 100 * j + Math.floor(Math.random() * 45); geo.y = 100 * j + Math.floor(Math.random() * 45);
geo.width = geo.height = 45; geo.width = geo.height = 45;

20
demo/distance.html
View File

@ -16,7 +16,7 @@
overscroll-behavior: none; overscroll-behavior: none;
} }
fc-geometry { folk-shape {
background: transparent; background: transparent;
position: absolute; position: absolute;
background-color: rgba(255, 255, 255, 0.1); background-color: rgba(255, 255, 255, 0.1);
@ -32,20 +32,20 @@
</head> </head>
<body> <body>
<distance-field> <distance-field>
<fc-geometry x="100" y="100" width="50" height="50"></fc-geometry> <folk-shape x="100" y="100" width="50" height="50"></folk-shape>
<fc-geometry x="100" y="200" width="50" height="50"></fc-geometry> <folk-shape x="100" y="200" width="50" height="50"></folk-shape>
<fc-geometry x="100" y="300" width="50" height="50"></fc-geometry> <folk-shape x="100" y="300" width="50" height="50"></folk-shape>
<fc-geometry x="300" y="150" width="80" height="40"></fc-geometry> <folk-shape x="300" y="150" width="80" height="40"></folk-shape>
<fc-geometry x="400" y="250" width="60" height="90"></fc-geometry> <folk-shape x="400" y="250" width="60" height="90"></folk-shape>
<fc-geometry x="200" y="400" width="100" height="100"></fc-geometry> <folk-shape x="200" y="400" width="100" height="100"></folk-shape>
<fc-geometry x="500" y="100" width="30" height="70"></fc-geometry> <folk-shape x="500" y="100" width="30" height="70"></folk-shape>
</distance-field> </distance-field>
<script type="module"> <script type="module">
import { FolkGeometry } from '../src/canvas/fc-geometry.ts'; import { FolkShape } from '../src/canvas/folk-shape.ts';
import { DistanceField } from '../src/distance-field.ts'; import { DistanceField } from '../src/distance-field.ts';
FolkGeometry.define(); FolkShape.define();
DistanceField.define(); DistanceField.define();
</script> </script>
</body> </body>

14
demo/event-propagator.html
View File

@ -15,7 +15,7 @@
margin: 0; margin: 0;
} }
fc-geometry { folk-shape {
background-color: black; background-color: black;
border-radius: 5px; border-radius: 5px;
color: white; color: white;
@ -32,8 +32,8 @@
</style> </style>
</head> </head>
<body> <body>
<fc-geometry id="box1" x="100" y="100" width="30" height="30"></fc-geometry> <folk-shape id="box1" x="100" y="100" width="30" height="30"></folk-shape>
<fc-geometry id="box2" x="200" y="350">Hello World</fc-geometry> <folk-shape id="box2" x="200" y="350">Hello World</folk-shape>
<event-propagator <event-propagator
source="#box1" source="#box1"
target="#box2" target="#box2"
@ -41,8 +41,8 @@
expression="textContent: _ + '!'" expression="textContent: _ + '!'"
></event-propagator> ></event-propagator>
<fc-geometry id="box3" x="350" y="200" width="30" height="30"></fc-geometry> <folk-shape id="box3" x="350" y="200" width="30" height="30"></folk-shape>
<fc-geometry id="box4" x="500" y="250" width="30" height="30"></fc-geometry> <folk-shape id="box4" x="500" y="250" width="30" height="30"></folk-shape>
<event-propagator <event-propagator
source="#box3" source="#box3"
target="#box4" target="#box4"
@ -52,10 +52,10 @@ rotate: from.x"
></event-propagator> ></event-propagator>
<script type="module"> <script type="module">
import { FolkGeometry } from '../src/canvas/fc-geometry.ts'; import { FolkShape } from '../src/canvas/folk-shape.ts';
import { EventPropagator } from '../src/arrows/event-propagator.ts'; import { EventPropagator } from '../src/arrows/event-propagator.ts';
FolkGeometry.define(); FolkShape.define();
EventPropagator.define(); EventPropagator.define();
</script> </script>
</body> </body>

14
demo/hull.html
View File

@ -15,7 +15,7 @@
margin: 0; margin: 0;
} }
fc-geometry { folk-shape {
background: rgb(187, 178, 178); background: rgb(187, 178, 178);
} }
@ -29,17 +29,17 @@
</style> </style>
</head> </head>
<body> <body>
<fc-geometry x="50" y="100" width="50" height="50"></fc-geometry> <folk-shape x="50" y="100" width="50" height="50"></folk-shape>
<fc-geometry x="200" y="200" width="50" height="50"></fc-geometry> <folk-shape x="200" y="200" width="50" height="50"></folk-shape>
<fc-geometry x="100" y="300" width="50" height="50"></fc-geometry> <folk-shape x="100" y="300" width="50" height="50"></folk-shape>
<folk-hull sources="fc-geometry"></folk-hull> <folk-hull sources="folk-shape"></folk-hull>
<script type="module"> <script type="module">
import { FolkGeometry } from '../src/canvas/fc-geometry.ts'; import { FolkShape } from '../src/canvas/folk-shape.ts';
import { FolkHull } from '../src/folk-hull.ts'; import { FolkHull } from '../src/folk-hull.ts';
FolkGeometry.define(); FolkShape.define();
FolkHull.define(); FolkHull.define();
</script> </script>
</body> </body>

20
demo/iframed-arrows.html
View File

@ -15,12 +15,12 @@
margin: 0; margin: 0;
} }
fc-geometry { folk-shape {
border: 1px solid black; border: 1px solid black;
border-radius: 3px; border-radius: 3px;
} }
fc-rope { folk-rope {
display: block; display: block;
position: absolute; position: absolute;
inset: 0 0 0 0; inset: 0 0 0 0;
@ -34,20 +34,20 @@
</style> </style>
</head> </head>
<body> <body>
<fc-geometry x="10" y="100" width="250" height="400"> <folk-shape x="10" y="100" width="250" height="400">
<iframe id="frame1" src="./arrows.html"></iframe> <iframe id="frame1" src="./arrows.html"></iframe>
</fc-geometry> </folk-shape>
<fc-geometry x="300" y="100" width="250" height="400"> <folk-shape x="300" y="100" width="250" height="400">
<iframe id="frame2" src="./arrows.html"></iframe> <iframe id="frame2" src="./arrows.html"></iframe>
</fc-geometry> </folk-shape>
<fc-rope source="#frame1 >>> #box1" target="#frame2 >>> #box1"></fc-rope> <folk-rope source="#frame1 >>> #box1" target="#frame2 >>> #box1"></folk-rope>
<script type="module"> <script type="module">
import { FolkGeometry } from '../src/canvas/fc-geometry.ts'; import { FolkShape } from '../src/canvas/folk-shape.ts';
import { FolkRope } from '../src/arrows/fc-rope.ts'; import { FolkRope } from '../src/arrows/folk-rope.ts';
FolkGeometry.define(); FolkShape.define();
FolkRope.define(); FolkRope.define();
</script> </script>
</body> </body>

6
demo/ink.html
View File

@ -21,10 +21,10 @@
<button on:click="DRAW">Draw</button> <button on:click="DRAW">Draw</button>
</nav> </nav>
<script type="module"> <script type="module">
import { FolkGeometry } from '../src/canvas/fc-geometry.ts'; import { FolkShape } from '../src/canvas/folk-shape.ts';
import { FolkInk } from '../src/folk-ink.ts'; import { FolkInk } from '../src/folk-ink.ts';
FolkGeometry.define(); FolkShape.define();
FolkInk.define(); FolkInk.define();
const drawButton = document.querySelector('button'); const drawButton = document.querySelector('button');
@ -45,7 +45,7 @@
ink.points = ink.points.map(([x, y, p]) => [x - rect.x, y - rect.y, p]); ink.points = ink.points.map(([x, y, p]) => [x - rect.x, y - rect.y, p]);
const geometry = document.createElement('fc-geometry'); const geometry = document.createElement('folk-shape');
geometry.x = rect.x; geometry.x = rect.x;
geometry.y = rect.y; geometry.y = rect.y;
geometry.height = rect.height; geometry.height = rect.height;

18
demo/llm.html
View File

@ -22,7 +22,7 @@
pointer-events: none; pointer-events: none;
} }
fc-geometry { folk-shape {
border: 1px solid black; border: 1px solid black;
border-radius: 4px; border-radius: 4px;
} }
@ -40,7 +40,7 @@
</style> </style>
</head> </head>
<body> <body>
<fc-geometry x="100" y="100" width="250"> <folk-shape x="100" y="100" width="250">
<ul id="recipe" class="wprm-recipe-ingredients"> <ul id="recipe" class="wprm-recipe-ingredients">
<li class="wprm-recipe-ingredient" style="list-style-type: disc" data-uid="0"> <li class="wprm-recipe-ingredient" style="list-style-type: disc" data-uid="0">
<span class="wprm-recipe-ingredient-amount">500</span> <span class="wprm-recipe-ingredient-amount">500</span>
@ -74,15 +74,15 @@
<span class="wprm-recipe-ingredient-notes wprm-recipe-ingredient-notes-faded">about 1 Tbsp</span> <span class="wprm-recipe-ingredient-notes wprm-recipe-ingredient-notes-faded">about 1 Tbsp</span>
</li> </li>
</ul> </ul>
</fc-geometry> </folk-shape>
<fc-geometry x="400" y="100" width="250"> <folk-shape x="400" y="100" width="250">
<folk-llm system-prompt="Output text as HTML, no backticks"></folk-llm> <folk-llm system-prompt="Output text as HTML, no backticks"></folk-llm>
</fc-geometry> </folk-shape>
<fc-geometry x="700" y="200"> <folk-shape x="700" y="200">
<folk-timer></folk-timer> <folk-timer></folk-timer>
</fc-geometry> </folk-shape>
<event-propagator <event-propagator
source="#recipe" source="#recipe"
@ -107,12 +107,12 @@
></event-propagator> ></event-propagator>
<script type="module"> <script type="module">
import { FolkGeometry } from '../src/canvas/fc-geometry.ts'; import { FolkShape } from '../src/canvas/folk-shape.ts';
import { FolkLLM } from '../src/folk-llm.ts'; import { FolkLLM } from '../src/folk-llm.ts';
import { FolkTimer } from '../src/folk-timer.ts'; import { FolkTimer } from '../src/folk-timer.ts';
import { EventPropagator } from '../src/arrows/event-propagator.ts'; import { EventPropagator } from '../src/arrows/event-propagator.ts';
FolkGeometry.define(); FolkShape.define();
FolkLLM.define(); FolkLLM.define();
FolkTimer.define(); FolkTimer.define();
EventPropagator.define(); EventPropagator.define();

8
demo/perf.html
View File

@ -15,23 +15,23 @@
margin: 0; margin: 0;
} }
fc-geometry { folk-shape {
border: 2px solid black; border: 2px solid black;
} }
</style> </style>
</head> </head>
<body> <body>
<script type="module"> <script type="module">
import { FolkGeometry } from '../src/canvas/fc-geometry.ts'; import { FolkShape } from '../src/canvas/folk-shape.ts';
FolkGeometry.define(); FolkShape.define();
const geometries = []; const geometries = [];
const now = performance.now(); const now = performance.now();
for (let i = 0; i < 100; i++) { for (let i = 0; i < 100; i++) {
for (let j = 0; j < 100; j++) { for (let j = 0; j < 100; j++) {
const geo = document.createElement('fc-geometry'); const geo = document.createElement('folk-shape');
geo.x = 50 * i; geo.x = 50 * i;
geo.y = 50 * j; geo.y = 50 * j;
geo.width = geo.height = 45; geo.width = geo.height = 45;

20
demo/proximity-maps.html
View File

@ -58,25 +58,25 @@
</head> </head>
<body> <body>
<folk-proximity> <folk-proximity>
<fc-geometry id="g1" x="25" y="100" width="400" height="200"> <folk-shape id="g1" x="25" y="100" width="400" height="200">
<folk-map coordinates="40.76845173617708, -73.97983074188234" zoom="15"></folk-map> <folk-map coordinates="40.76845173617708, -73.97983074188234" zoom="15"></folk-map>
</fc-geometry> </folk-shape>
<fc-geometry id="g2" x="50" y="600" width="400" height="250"> <folk-shape id="g2" x="50" y="600" width="400" height="250">
<folk-map coordinates="51.50404120260676, -0.14007568359375003" zoom="13"></folk-map> <folk-map coordinates="51.50404120260676, -0.14007568359375003" zoom="13"></folk-map>
</fc-geometry> </folk-shape>
<fc-geometry id="g3" x="500" y="500" width="500" height="300"> <folk-shape id="g3" x="500" y="500" width="500" height="300">
<geo-wiki></geo-wiki> <geo-wiki></geo-wiki>
</fc-geometry> </folk-shape>
<fc-geometry id="g4" x="450" y="100"> <folk-shape id="g4" x="450" y="100">
<folk-weather></folk-weather> <folk-weather></folk-weather>
</fc-geometry> </folk-shape>
</folk-proximity> </folk-proximity>
<script type="module"> <script type="module">
import { FolkGeometry } from '../src/canvas/fc-geometry.ts'; import { FolkShape } from '../src/canvas/folk-shape.ts';
import { FolkMap } from '../src/folk-map.ts'; import { FolkMap } from '../src/folk-map.ts';
import { FolkWeather } from '../src/folk-weather.ts'; import { FolkWeather } from '../src/folk-weather.ts';
import { FolkCluster, FolkProximity } from '../src/folk-proximity.ts'; import { FolkCluster, FolkProximity } from '../src/folk-proximity.ts';
@ -183,7 +183,7 @@
}, },
}); });
FolkGeometry.define(); FolkShape.define();
FolkMap.define(); FolkMap.define();
FolkCluster.define(); FolkCluster.define();
FolkProximity.define(); FolkProximity.define();

28
demo/proximity-music.html
View File

@ -15,7 +15,7 @@
margin: 0; margin: 0;
} }
fc-geometry:has(record-player) { folk-shape:has(record-player) {
box-shadow: 10px 0px 150px 0px rgba(0, 0, 0, 0.61); box-shadow: 10px 0px 150px 0px rgba(0, 0, 0, 0.61);
&::part(resize-nw), &::part(resize-nw),
@ -26,45 +26,45 @@
} }
} }
fc-geometry > video { folk-shape > video {
height: 100%; height: 100%;
} }
</style> </style>
</head> </head>
<body> <body>
<fc-geometry x="100" y="75" width="330" height="198"> <folk-shape x="100" y="75" width="330" height="198">
<record-player> <record-player>
<audio src="/Feather.mov"></audio> <audio src="/Feather.mov"></audio>
</record-player> </record-player>
</fc-geometry> </folk-shape>
<fc-geometry x="25" y="300" width="166" height="200"> <folk-shape x="25" y="300" width="166" height="200">
<video loop> <video loop>
<source src="/dancing-flower.mov" type="video/quicktime" /> <source src="/dancing-flower.mov" type="video/quicktime" />
<source src="/dancing-flower.webm" type="video/webm" /> <source src="/dancing-flower.webm" type="video/webm" />
</video> </video>
</fc-geometry> </folk-shape>
<fc-geometry x="155" y="315" width="166" height="200"> <folk-shape x="155" y="315" width="166" height="200">
<video loop> <video loop>
<source src="/dancing-flower.mov" type="video/quicktime" /> <source src="/dancing-flower.mov" type="video/quicktime" />
<source src="/dancing-flower.webm" type="video/webm" /> <source src="/dancing-flower.webm" type="video/webm" />
</video> </video>
</fc-geometry> </folk-shape>
<fc-geometry x="280" y="305" width="166" height="200"> <folk-shape x="280" y="305" width="166" height="200">
<video loop> <video loop>
<source src="/dancing-flower.mov" type="video/quicktime" /> <source src="/dancing-flower.mov" type="video/quicktime" />
<source src="/dancing-flower.webm" type="video/webm" /> <source src="/dancing-flower.webm" type="video/webm" />
</video> </video>
</fc-geometry> </folk-shape>
<script type="module"> <script type="module">
import { FolkGeometry } from '../src/canvas/fc-geometry.ts'; import { FolkShape } from '../src/canvas/folk-shape.ts';
import { RecordPlayer } from '../src/music/record-player.ts'; import { RecordPlayer } from '../src/music/record-player.ts';
import { collisionDetection } from '../src/collision.ts'; import { collisionDetection } from '../src/collision.ts';
FolkGeometry.define(); FolkShape.define();
RecordPlayer.define(); RecordPlayer.define();
/** /**
@ -75,9 +75,9 @@
let proximityDistance = 150; let proximityDistance = 150;
const proximitySet = new Set(); const proximitySet = new Set();
const recordPlayerGeometry = document.querySelector('fc-geometry:has(record-player)'); const recordPlayerGeometry = document.querySelector('folk-shape:has(record-player)');
const recordPlayer = recordPlayerGeometry.firstElementChild; const recordPlayer = recordPlayerGeometry.firstElementChild;
const flowers = document.querySelectorAll('fc-geometry:has(video)'); const flowers = document.querySelectorAll('folk-shape:has(video)');
// set playback rate when video is ready // set playback rate when video is ready
function setPlayback(e) { function setPlayback(e) {
e.target.playbackRate = (91 / 60) * e.target.duration; e.target.playbackRate = (91 / 60) * e.target.duration;

20
demo/qr-code.html
View File

@ -40,21 +40,21 @@
<body rope-mode> <body rope-mode>
<label>Rope Mode: <input type="checkbox" checked /></label> <label>Rope Mode: <input type="checkbox" checked /></label>
<fc-geometry x="275" y="25"> <folk-shape x="275" y="25">
<textarea>https://folk-canvas.github.io/folk-canvas/</textarea> <textarea>https://folk-canvas.github.io/folk-canvas/</textarea>
</fc-geometry> </folk-shape>
<fc-geometry x="300" y="75"> <folk-shape x="300" y="75">
<label>Radius: <input type="range" min="0" max="0.5" step="0.05" value="0" /></label> <label>Radius: <input type="range" min="0" max="0.5" step="0.05" value="0" /></label>
</fc-geometry> </folk-shape>
<fc-geometry x="325" y="175"> <folk-shape x="325" y="175">
<label>Color: <input type="color" /></label> <label>Color: <input type="color" /></label>
</fc-geometry> </folk-shape>
<fc-geometry x="50" y="50"> <folk-shape x="50" y="50">
<sl-qr-code size="200"></sl-qr-code> <sl-qr-code size="200"></sl-qr-code>
</fc-geometry> </folk-shape>
<event-propagator <event-propagator
source="textarea" source="textarea"
@ -79,10 +79,10 @@
<script type="module"> <script type="module">
import 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.18.0/cdn/components/qr-code/qr-code.js'; import 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.18.0/cdn/components/qr-code/qr-code.js';
import { FolkGeometry } from '../src/canvas/fc-geometry.ts'; import { FolkShape } from '../src/canvas/folk-shape.ts';
import { EventPropagator } from '../src/arrows/event-propagator.ts'; import { EventPropagator } from '../src/arrows/event-propagator.ts';
FolkGeometry.define(); FolkShape.define();
EventPropagator.define(); EventPropagator.define();
const ropeMode = document.querySelector('input[type="checkbox"]'); const ropeMode = document.querySelector('input[type="checkbox"]');

38
demo/semantic-zoom.html
View File

@ -75,13 +75,13 @@
margin: 1rem; margin: 1rem;
} }
fc-connection { folk-connection {
display: block; display: block;
position: absolute; position: absolute;
inset: 0 0 0 0; inset: 0 0 0 0;
} }
fc-geometry { folk-shape {
background: black; background: black;
color: white; color: white;
max-width: 40ch; max-width: 40ch;
@ -99,14 +99,14 @@
} }
} }
body[zoom='0'] fc-geometry { body[zoom='0'] folk-shape {
width: 20px; width: 20px;
aspect-ratio: 1; aspect-ratio: 1;
border-radius: 50%; border-radius: 50%;
} }
body[zoom='0'] fc-geometry :is(h2, p), body[zoom='0'] folk-shape :is(h2, p),
body[zoom='50'] fc-geometry p { body[zoom='50'] folk-shape p {
display: none; display: none;
} }
</style> </style>
@ -117,7 +117,7 @@
<input type="range" min="0" max="100" value="100" style="view-transition-name: slider" /> <input type="range" min="0" max="100" value="100" style="view-transition-name: slider" />
</label> </label>
<fc-geometry id="box1" x="100" y="100"> <folk-shape id="box1" x="100" y="100">
<h2>Lorem ispum</h2> <h2>Lorem ispum</h2>
<p> <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
@ -126,38 +126,38 @@
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum. laborum.
</p> </p>
</fc-geometry> </folk-shape>
<fc-geometry id="box2" x="400" y="400"> <folk-shape id="box2" x="400" y="400">
<h2>Dolor sit amet</h2> <h2>Dolor sit amet</h2>
<p> <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. consequat.
</p> </p>
</fc-geometry> </folk-shape>
<fc-geometry id="box3" x="150" y="600"> <folk-shape id="box3" x="150" y="600">
<h2>Consectetur elit</h2> <h2>Consectetur elit</h2>
<p> <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. magna aliqua.
</p> </p>
</fc-geometry> </folk-shape>
<fc-connection source="#box1" target="#box2"></fc-connection> <folk-connection source="#box1" target="#box2"></folk-connection>
<fc-connection source="#box2" target="#box3"></fc-connection> <folk-connection source="#box2" target="#box3"></folk-connection>
<fc-connection source="#box1" target="#box3"></fc-connection> <folk-connection source="#box1" target="#box3"></folk-connection>
<script type="module"> <script type="module">
import { FolkGeometry } from '../src/canvas/fc-geometry.ts'; import { FolkShape } from '../src/canvas/folk-shape.ts';
import { FolkConnection } from '../src/arrows/fc-connection.ts'; import { FolkConnection } from '../src/arrows/folk-connection.ts';
FolkGeometry.define(); FolkShape.define();
FolkConnection.define(); FolkConnection.define();
document.body.querySelectorAll('fc-geometry').forEach((el, i) => (el.style.viewTransitionName = `g${i}`)); document.body.querySelectorAll('folk-shape').forEach((el, i) => (el.style.viewTransitionName = `g${i}`));
document.body.querySelectorAll('fc-connection').forEach((el, i) => (el.style.viewTransitionName = `c${i}`)); document.body.querySelectorAll('folk-connection').forEach((el, i) => (el.style.viewTransitionName = `c${i}`));
document.body.querySelectorAll('h2').forEach((el, i) => (el.style.viewTransitionName = `h${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}`)); document.body.querySelectorAll('p').forEach((el, i) => (el.style.viewTransitionName = `p${i}`));

12
demo/shapes.html
View File

@ -15,20 +15,20 @@
margin: 0; margin: 0;
} }
fc-geometry { folk-shape {
background: rgb(187, 178, 178); background: rgb(187, 178, 178);
} }
</style> </style>
</head> </head>
<body> <body>
<fc-geometry x="100" y="100" width="50" height="50"></fc-geometry> <folk-shape x="100" y="100" width="50" height="50"></folk-shape>
<fc-geometry x="100" y="200" width="50" height="50"></fc-geometry> <folk-shape x="100" y="200" width="50" height="50"></folk-shape>
<fc-geometry x="100" y="300" width="50" height="50" rotate="45"></fc-geometry> <folk-shape x="100" y="300" width="50" height="50" rotate="45"></folk-shape>
<script type="module"> <script type="module">
import { FolkGeometry } from '../src/canvas/fc-geometry.ts'; import { FolkShape } from '../src/canvas/folk-shape.ts';
FolkGeometry.define(); FolkShape.define();
</script> </script>
</body> </body>
</html> </html>

16
demo/spreadsheet-graph.html
View File

@ -15,7 +15,7 @@
margin: 0; margin: 0;
} }
fc-connection { folk-connection {
display: block; display: block;
position: absolute; position: absolute;
inset: 0 0 0 0; inset: 0 0 0 0;
@ -45,7 +45,7 @@
</head> </head>
<body> <body>
<button>Toggle</button> <button>Toggle</button>
<fc-geometry x="50" y="50" width="500"> <folk-shape x="50" y="50" width="500">
<folk-spreadsheet> <folk-spreadsheet>
<folk-cell <folk-cell
column="A" column="A"
@ -163,14 +163,14 @@
<folk-cell column="I" row="10"></folk-cell> <folk-cell column="I" row="10"></folk-cell>
<folk-cell column="J" row="10"></folk-cell> <folk-cell column="J" row="10"></folk-cell>
</folk-spreadsheet> </folk-spreadsheet>
</fc-geometry> </folk-shape>
<script type="module"> <script type="module">
import { FolkGeometry } from '../src/canvas/fc-geometry.ts'; import { FolkShape } from '../src/canvas/folk-shape.ts';
import { FolkConnection } from '../src/arrows/fc-connection.ts'; import { FolkConnection } from '../src/arrows/folk-connection.ts';
import { FolkSpreadsheet } from '../src/folk-spreadsheet.ts'; import { FolkSpreadsheet } from '../src/folk-spreadsheet.ts';
FolkGeometry.define(); FolkShape.define();
FolkConnection.define(); FolkConnection.define();
FolkSpreadsheet.define(); FolkSpreadsheet.define();
@ -196,7 +196,7 @@
for (const dep of cell.dependencies) { for (const dep of cell.dependencies) {
dep.setAttribute('graph', ''); dep.setAttribute('graph', '');
const connection = document.createElement('fc-connection'); const connection = document.createElement('folk-connection');
connection.source = `folk-cell[row="${dep.row}"][column="${dep.column}"]`; connection.source = `folk-cell[row="${dep.row}"][column="${dep.column}"]`;
connection.target = `folk-cell[row="${cell.row}"][column="${cell.column}"]`; connection.target = `folk-cell[row="${cell.row}"][column="${cell.column}"]`;
@ -208,7 +208,7 @@
function removeOverlayGraph() { function removeOverlayGraph() {
document.body.removeAttribute('overlay', ''); document.body.removeAttribute('overlay', '');
document.querySelectorAll('fc-connection').forEach((arrow) => arrow.remove()); document.querySelectorAll('folk-connection').forEach((arrow) => arrow.remove());
document.querySelectorAll('folk-cell').forEach((cell) => { document.querySelectorAll('folk-cell').forEach((cell) => {
cell.removeAttribute('graph', ''); cell.removeAttribute('graph', '');

16
demo/spreadsheet-propagator.html
View File

@ -31,15 +31,15 @@
</style> </style>
</head> </head>
<body> <body>
<fc-geometry x="600" y="50" width="300" height="300"> <folk-shape x="600" y="50" width="300" height="300">
<folk-map id="map1" zoom="10" coordinates="48.86,2.35"></folk-map> <folk-map id="map1" zoom="10" coordinates="48.86,2.35"></folk-map>
</fc-geometry> </folk-shape>
<fc-geometry x="600" y="400" width="300" height="300"> <folk-shape x="600" y="400" width="300" height="300">
<folk-map id="map2" zoom="10"></folk-map> <folk-map id="map2" zoom="10"></folk-map>
</fc-geometry> </folk-shape>
<fc-geometry x="25" y="300" width="500"> <folk-shape x="25" y="300" width="500">
<folk-spreadsheet> <folk-spreadsheet>
<folk-cell row="1" column="A" expression="0"></folk-cell> <folk-cell row="1" column="A" expression="0"></folk-cell>
<folk-cell row="1" column="B"></folk-cell> <folk-cell row="1" column="B"></folk-cell>
@ -142,7 +142,7 @@
<folk-cell row="10" column="I"></folk-cell> <folk-cell row="10" column="I"></folk-cell>
<folk-cell row="10" column="J"></folk-cell> <folk-cell row="10" column="J"></folk-cell>
</folk-spreadsheet> </folk-spreadsheet>
</fc-geometry> </folk-shape>
<event-propagator <event-propagator
source="#map1" source="#map1"
@ -167,12 +167,12 @@
<script type="module"> <script type="module">
import { FolkMap } from '../src/folk-map.ts'; import { FolkMap } from '../src/folk-map.ts';
import { FolkGeometry } from '../src/canvas/fc-geometry.ts'; import { FolkShape } from '../src/canvas/folk-shape.ts';
import { EventPropagator } from '../src/arrows/event-propagator.ts'; import { EventPropagator } from '../src/arrows/event-propagator.ts';
import { FolkSpreadsheet } from '../src/folk-spreadsheet.ts'; import { FolkSpreadsheet } from '../src/folk-spreadsheet.ts';
FolkMap.define(); FolkMap.define();
FolkGeometry.define(); FolkShape.define();
FolkSpreadsheet.define(); FolkSpreadsheet.define();
EventPropagator.define(); EventPropagator.define();

8
demo/spreadsheet.html
View File

@ -17,7 +17,7 @@
</style> </style>
</head> </head>
<body> <body>
<fc-geometry x="50" y="50" width="500"> <folk-shape x="50" y="50" width="500">
<folk-spreadsheet> <folk-spreadsheet>
<folk-cell column="A" row="1" expression="1"></folk-cell> <folk-cell column="A" row="1" expression="1"></folk-cell>
<folk-cell column="B" row="1"></folk-cell> <folk-cell column="B" row="1"></folk-cell>
@ -120,13 +120,13 @@
<folk-cell column="I" row="10"></folk-cell> <folk-cell column="I" row="10"></folk-cell>
<folk-cell column="J" row="10"></folk-cell> <folk-cell column="J" row="10"></folk-cell>
</folk-spreadsheet> </folk-spreadsheet>
</fc-geometry> </folk-shape>
<script type="module"> <script type="module">
import { FolkGeometry } from '../src/canvas/fc-geometry.ts'; import { FolkShape } from '../src/canvas/folk-shape.ts';
import { FolkSpreadsheet } from '../src/folk-spreadsheet.ts'; import { FolkSpreadsheet } from '../src/folk-spreadsheet.ts';
FolkGeometry.define(); FolkShape.define();
FolkSpreadsheet.define(); FolkSpreadsheet.define();
</script> </script>
</body> </body>

24
demo/wiggly.html
View File

@ -15,12 +15,12 @@
margin: 0; margin: 0;
} }
fc-geometry { folk-shape {
background-color: black; background-color: black;
border-radius: 10%; border-radius: 10%;
} }
fc-rope { folk-rope {
display: block; display: block;
position: absolute; position: absolute;
inset: 0 0 0 0; inset: 0 0 0 0;
@ -29,19 +29,19 @@
</style> </style>
</head> </head>
<body> <body>
<fc-geometry id="box1" x="100" y="100" width="30" height="30"></fc-geometry> <folk-shape id="box1" x="100" y="100" width="30" height="30"></folk-shape>
<fc-geometry id="box2" x="300" y="105" width="30" height="30"></fc-geometry> <folk-shape id="box2" x="300" y="105" width="30" height="30"></folk-shape>
<fc-geometry id="box3" x="200" y="150" width="30" height="30"></fc-geometry> <folk-shape id="box3" x="200" y="150" width="30" height="30"></folk-shape>
<fc-geometry id="box4" x="400" y="100" width="30" height="30"></fc-geometry> <folk-shape id="box4" x="400" y="100" width="30" height="30"></folk-shape>
<fc-rope source="#box1" target="#box2"></fc-rope> <folk-rope source="#box1" target="#box2"></folk-rope>
<fc-rope source="#box1" target="#box3"></fc-rope> <folk-rope source="#box1" target="#box3"></folk-rope>
<fc-rope source="#box1" target="#box4"></fc-rope> <folk-rope source="#box1" target="#box4"></folk-rope>
<script type="module"> <script type="module">
import { FolkGeometry } from '../src/canvas/fc-geometry.ts'; import { FolkShape } from '../src/canvas/folk-shape.ts';
import { FolkRope } from '../src/arrows/fc-rope.ts'; import { FolkRope } from '../src/arrows/folk-rope.ts';
FolkGeometry.define(); FolkShape.define();
FolkRope.define(); FolkRope.define();
</script> </script>
</body> </body>

18
demo/xanadu.html
View File

@ -29,7 +29,7 @@
overflow-y: hidden; overflow-y: hidden;
} }
fc-geometry { folk-shape {
background-color: #fefefe; background-color: #fefefe;
width: 400px; width: 400px;
height: 100%; height: 100%;
@ -56,7 +56,7 @@
</style> </style>
</head> </head>
<body> <body>
<fc-geometry name="1" x="20"> <folk-shape name="1" x="20">
<article> <article>
<h2>Note 1</h2> <h2>Note 1</h2>
@ -127,9 +127,9 @@
est laborum. est laborum.
</p> </p>
</article> </article>
</fc-geometry> </folk-shape>
<fc-geometry name="2" x="500"> <folk-shape name="2" x="500">
<article> <article>
<h2>Note 2</h2> <h2>Note 2</h2>
@ -194,17 +194,17 @@
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p> </p>
</article> </article>
</fc-geometry> </folk-shape>
<folk-xanadu source="fc-geometry[name='1'] [link='1']" target="fc-geometry[name='2'] [link='1']"></folk-xanadu> <folk-xanadu source="folk-shape[name='1'] [link='1']" target="folk-shape[name='2'] [link='1']"></folk-xanadu>
<folk-xanadu source="fc-geometry[name='1'] [link='2']" target="fc-geometry[name='2'] [link='2']"></folk-xanadu> <folk-xanadu source="folk-shape[name='1'] [link='2']" target="folk-shape[name='2'] [link='2']"></folk-xanadu>
<script type="module"> <script type="module">
import { FolkXanadu } from '../src/folk-xanadu.ts'; import { FolkXanadu } from '../src/folk-xanadu.ts';
import { FolkGeometry } from '../src/canvas/fc-geometry.ts'; import { FolkShape } from '../src/canvas/folk-shape.ts';
FolkGeometry.define(); FolkShape.define();
FolkXanadu.define(); FolkXanadu.define();
// class AnimatedXanaduLink extends FolkXanadu { // class AnimatedXanaduLink extends FolkXanadu {

14
src/arrows/abstract-arrow.ts
View File

@ -1,4 +1,4 @@
import { FolkGeometry } from '../canvas/fc-geometry.ts'; import { FolkShape } from '../canvas/folk-shape.ts';
import { parseVertex } from './utils.ts'; import { parseVertex } from './utils.ts';
import { ClientRectObserverEntry, ClientRectObserverManager } from '../client-rect-observer.ts'; import { ClientRectObserverEntry, ClientRectObserverManager } from '../client-rect-observer.ts';
@ -43,7 +43,7 @@ export class AbstractArrow extends HTMLElement {
}; };
#sourceHandler = (e: Event) => { #sourceHandler = (e: Event) => {
const geometry = e.target as FolkGeometry; const geometry = e.target as FolkShape;
this.#sourceRect = geometry.getClientRect(); this.#sourceRect = geometry.getClientRect();
this.#update(); this.#update();
}; };
@ -117,7 +117,7 @@ export class AbstractArrow extends HTMLElement {
}; };
#targetHandler = (e: Event) => { #targetHandler = (e: Event) => {
const geometry = e.target as FolkGeometry; const geometry = e.target as FolkShape;
this.#targetRect = geometry.getClientRect(); this.#targetRect = geometry.getClientRect();
this.#update(); this.#update();
}; };
@ -190,7 +190,7 @@ export class AbstractArrow extends HTMLElement {
if (this.#sourceElement === null) { if (this.#sourceElement === null) {
throw new Error('source is not a valid element'); throw new Error('source is not a valid element');
} else if (this.#sourceElement instanceof FolkGeometry) { } else if (this.#sourceElement instanceof FolkShape) {
this.#sourceElement.addEventListener('resize', this.#sourceHandler); this.#sourceElement.addEventListener('resize', this.#sourceHandler);
this.#sourceElement.addEventListener('move', this.#sourceHandler); this.#sourceElement.addEventListener('move', this.#sourceHandler);
this.#sourceRect = this.#sourceElement.getBoundingClientRect(); this.#sourceRect = this.#sourceElement.getBoundingClientRect();
@ -211,7 +211,7 @@ export class AbstractArrow extends HTMLElement {
unobserveSource() { unobserveSource() {
if (this.#sourceElement === null) return; if (this.#sourceElement === null) return;
if (this.#sourceElement instanceof FolkGeometry) { if (this.#sourceElement instanceof FolkShape) {
this.#sourceElement.removeEventListener('resize', this.#sourceHandler); this.#sourceElement.removeEventListener('resize', this.#sourceHandler);
this.#sourceElement.removeEventListener('move', this.#sourceHandler); this.#sourceElement.removeEventListener('move', this.#sourceHandler);
} else if (this.#sourceElement instanceof HTMLIFrameElement && this.#sourceIframeSelector) { } else if (this.#sourceElement instanceof HTMLIFrameElement && this.#sourceIframeSelector) {
@ -241,7 +241,7 @@ export class AbstractArrow extends HTMLElement {
if (!this.#targetElement) { if (!this.#targetElement) {
throw new Error('target is not a valid element'); throw new Error('target is not a valid element');
} else if (this.#targetElement instanceof FolkGeometry) { } else if (this.#targetElement instanceof FolkShape) {
this.#targetElement.addEventListener('resize', this.#targetHandler); this.#targetElement.addEventListener('resize', this.#targetHandler);
this.#targetElement.addEventListener('move', this.#targetHandler); this.#targetElement.addEventListener('move', this.#targetHandler);
} else if (this.#targetElement instanceof HTMLIFrameElement && this.#targetIframeSelector) { } else if (this.#targetElement instanceof HTMLIFrameElement && this.#targetIframeSelector) {
@ -261,7 +261,7 @@ export class AbstractArrow extends HTMLElement {
unobserveTarget() { unobserveTarget() {
if (this.#targetElement === null) return; if (this.#targetElement === null) return;
if (this.#targetElement instanceof FolkGeometry) { if (this.#targetElement instanceof FolkShape) {
this.#targetElement.removeEventListener('resize', this.#targetHandler); this.#targetElement.removeEventListener('resize', this.#targetHandler);
this.#targetElement.removeEventListener('move', this.#targetHandler); this.#targetElement.removeEventListener('move', this.#targetHandler);
} else if (this.#targetElement instanceof HTMLIFrameElement && this.#targetIframeSelector) { } else if (this.#targetElement instanceof HTMLIFrameElement && this.#targetIframeSelector) {

2
src/arrows/event-propagator.ts
View File

@ -1,4 +1,4 @@
import { FolkRope } from './fc-rope.ts'; import { FolkRope } from './folk-rope.ts';
const styles = new CSSStyleSheet(); const styles = new CSSStyleSheet();
styles.replaceSync(` styles.replaceSync(`

4
src/arrows/fc-connection.ts → src/arrows/folk-connection.ts
View File

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

4
src/arrows/fc-rope.ts → src/arrows/folk-rope.ts
View File

@ -21,12 +21,12 @@ interface RopePoint {
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
'fc-rope': FolkRope; 'folk-rope': FolkRope;
} }
} }
export class FolkRope extends AbstractArrow { export class FolkRope extends AbstractArrow {
static override tagName = 'fc-rope'; static override tagName = 'folk-rope';
#svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); #svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
#path = document.createElementNS('http://www.w3.org/2000/svg', 'path'); #path = document.createElementNS('http://www.w3.org/2000/svg', 'path');

6
src/arrows/iframe-script.ts
View File

@ -1,4 +1,4 @@
import { FolkGeometry } from '../canvas/fc-geometry'; import { FolkShape } from '../canvas/folk-shape';
import { ClientRectObserverManager, ClientRectObserverEntry } from '../client-rect-observer.ts'; import { ClientRectObserverManager, ClientRectObserverEntry } from '../client-rect-observer.ts';
const clientRectObserver = new ClientRectObserverManager(); const clientRectObserver = new ClientRectObserverManager();
@ -80,7 +80,7 @@ if (window.parent !== window) {
observedElements.set(selector, element); observedElements.set(selector, element);
observedSelectors.set(element, selector); observedSelectors.set(element, selector);
if (element instanceof FolkGeometry) { if (element instanceof FolkShape) {
element.addEventListener('move', onGeometryChange); element.addEventListener('move', onGeometryChange);
element.addEventListener('resize', onGeometryChange); element.addEventListener('resize', onGeometryChange);
@ -100,7 +100,7 @@ if (window.parent !== window) {
if (element === undefined) return; if (element === undefined) return;
if (element instanceof FolkGeometry) { if (element instanceof FolkShape) {
element.removeEventListener('move', onGeometryChange); element.removeEventListener('move', onGeometryChange);
element.removeEventListener('resize', onGeometryChange); element.removeEventListener('resize', onGeometryChange);
observedElements.delete(selector); observedElements.delete(selector);

6
src/canvas/fc-geometry.ts → src/canvas/folk-shape.ts
View File

@ -141,13 +141,13 @@ div {
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
'fc-geometry': FolkGeometry; 'folk-shape': FolkShape;
} }
} }
// TODO: add z coordinate? // TODO: add z coordinate?
export class FolkGeometry extends HTMLElement { export class FolkShape extends HTMLElement {
static tagName = 'fc-geometry'; static tagName = 'folk-shape';
static define() { static define() {
customElements.define(this.tagName, this); customElements.define(this.tagName, this);

6
src/distance-field.ts
View File

@ -1,6 +1,6 @@
import { frag, vert } from './utils/tags.ts'; import { frag, vert } from './utils/tags.ts';
import { WebGLUtils } from './utils/webgl.ts'; import { WebGLUtils } from './utils/webgl.ts';
import type { FolkGeometry } from './canvas/fc-geometry.ts'; import type { FolkShape } from './canvas/folk-shape.ts';
/** /**
* The DistanceField class calculates a distance field using the Jump Flooding Algorithm (JFA) in WebGL. * The DistanceField class calculates a distance field using the Jump Flooding Algorithm (JFA) in WebGL.
@ -12,7 +12,7 @@ export class DistanceField extends HTMLElement {
private textures: WebGLTexture[] = []; private textures: WebGLTexture[] = [];
private shapes!: NodeListOf<FolkGeometry>; private shapes!: NodeListOf<FolkShape>;
private canvas!: HTMLCanvasElement; private canvas!: HTMLCanvasElement;
private glContext!: WebGL2RenderingContext; private glContext!: WebGL2RenderingContext;
private framebuffer!: WebGLFramebuffer; private framebuffer!: WebGLFramebuffer;
@ -34,7 +34,7 @@ export class DistanceField extends HTMLElement {
} }
connectedCallback() { connectedCallback() {
this.shapes = document.querySelectorAll('fc-geometry'); this.shapes = document.querySelectorAll('folk-shape');
this.initWebGL(); this.initWebGL();
this.initShaders(); this.initShaders();
this.initPingPongTextures(); this.initPingPongTextures();

18
src/folk-proximity.ts
View File

@ -1,6 +1,6 @@
import { collisionDetection } from './collision'; import { collisionDetection } from './collision';
import { FolkHull } from './folk-hull'; import { FolkHull } from './folk-hull';
import { FolkGeometry } from './canvas/fc-geometry.ts'; import { FolkShape } from './canvas/folk-shape.ts';
interface ElementConstructor<E extends Element = Element> { interface ElementConstructor<E extends Element = Element> {
new (): E; new (): E;
@ -35,18 +35,18 @@ export class FolkCluster extends FolkHull {
#data = new Map(); #data = new Map();
isElementInCluster(element: FolkGeometry) { isElementInCluster(element: FolkShape) {
return this.sourceElements.includes(element); return this.sourceElements.includes(element);
} }
isElementInProximity(element: FolkGeometry) { isElementInProximity(element: FolkShape) {
for (const el of this.sourceElements as FolkGeometry[]) { for (const el of this.sourceElements as FolkShape[]) {
if (collisionDetection(el.getClientRect(), element.getClientRect(), PROXIMITY)) return true; if (collisionDetection(el.getClientRect(), element.getClientRect(), PROXIMITY)) return true;
} }
return false; return false;
} }
addElements(...elements: FolkGeometry[]) { addElements(...elements: FolkShape[]) {
this.sources = this.sourceElements this.sources = this.sourceElements
.concat(elements) .concat(elements)
.map((el) => `#${el.id}`) .map((el) => `#${el.id}`)
@ -101,7 +101,7 @@ export class FolkCluster extends FolkHull {
} }
} }
removeElement(geometry: FolkGeometry) { removeElement(geometry: FolkShape) {
this.sources = this.sourceElements this.sources = this.sourceElements
.filter((el) => el !== geometry) .filter((el) => el !== geometry)
.map((el) => `#${el.id}`) .map((el) => `#${el.id}`)
@ -136,7 +136,7 @@ export class FolkProximity extends HTMLElement {
} }
#clusters = new Set<FolkCluster>(); #clusters = new Set<FolkCluster>();
#geometries = Array.from(this.querySelectorAll('fc-geometry')); #geometries = Array.from(this.querySelectorAll('folk-shape'));
constructor() { constructor() {
super(); super();
@ -146,7 +146,7 @@ export class FolkProximity extends HTMLElement {
} }
#handleProximity = (e) => { #handleProximity = (e) => {
const el = e.target as FolkGeometry; const el = e.target as FolkShape;
const cluster = this.#findCluster(el); const cluster = this.#findCluster(el);
@ -171,7 +171,7 @@ export class FolkProximity extends HTMLElement {
} }
} }
} else { } else {
const isInCluster = (cluster.sourceElements as FolkGeometry[]) const isInCluster = (cluster.sourceElements as FolkShape[])
.filter((element) => el !== element) .filter((element) => el !== element)
.some((element) => collisionDetection(el.getClientRect(), element.getClientRect(), PROXIMITY)); .some((element) => collisionDetection(el.getClientRect(), element.getClientRect(), PROXIMITY));