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%;
}
fc-geometry {
folk-shape {
background: black;
color: white;
}
</style>
</head>
<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>
</fc-geometry>
<fc-geometry x="100" y="200" width="50" height="50"></fc-geometry>
<fc-geometry x="100" y="300" width="50" height="50"></fc-geometry>
</folk-shape>
<folk-shape x="100" y="200" width="50" height="50"></folk-shape>
<folk-shape x="100" y="300" width="50" height="50"></folk-shape>
<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}`));

16
demo/arrows.html
View File

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

18
demo/beats.html
View File

@ -22,7 +22,7 @@
pointer-events: none;
}
fc-geometry {
folk-shape {
border: 1px solid black;
border-radius: 4px;
}
@ -33,17 +33,17 @@
</style>
</head>
<body>
<fc-geometry x="100" y="100">
<folk-shape x="100" y="100">
<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>
</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>
</fc-geometry>
</folk-shape>
<event-propagator
source="folk-metronome"
@ -60,12 +60,12 @@
></event-propagator>
<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 { FolkMetronome } from '../src/folk-metronome.ts';
import { EventPropagator } from '../src/arrows/event-propagator.ts';
FolkGeometry.define();
FolkShape.define();
FolkLLM.define();
FolkMetronome.define();
EventPropagator.define();

10
demo/canvasify.html
View File

@ -35,7 +35,7 @@
font-style: italic;
}
fc-geometry {
folk-shape {
z-index: 2;
}
</style>
@ -100,9 +100,9 @@
</main>
<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) {
const styles = getComputedStyle(from);
@ -115,7 +115,7 @@
}
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();
@ -133,7 +133,7 @@
copyStyles(el, copiedElements[i]);
});
const geometry = document.createElement('fc-geometry');
const geometry = document.createElement('folk-shape');
geometry.x = rect.x;
geometry.y = rect.y;
geometry.height = rect.height;

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

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

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

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

12
demo/collision.html
View File

@ -19,22 +19,22 @@
margin: 0;
}
fc-geometry {
folk-shape {
border: 2px solid black;
}
</style>
</head>
<body>
<fc-geometry x="100" y="100" width="50" height="50"> Hello World </fc-geometry>
<fc-geometry x="200" y="200" width="50" height="50"></fc-geometry>
<folk-shape x="100" y="100" width="50" height="50"> Hello World </folk-shape>
<folk-shape x="200" y="200" width="50" height="50"></folk-shape>
<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';
FolkGeometry.define();
FolkShape.define();
const geometryElements = document.querySelectorAll('fc-geometry');
const geometryElements = document.querySelectorAll('folk-shape');
function handleCollision(e) {
geometryElements.forEach((el) => {

8
demo/distance-perf.html
View File

@ -15,7 +15,7 @@
margin: 0;
}
fc-geometry {
folk-shape {
border: 2px solid black;
}
@ -29,9 +29,9 @@
<distance-field> </distance-field>
<script type="module">
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');
@ -40,7 +40,7 @@
const now = performance.now();
for (let i = 0; i < 20; i++) {
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.y = 100 * j + Math.floor(Math.random() * 45);
geo.width = geo.height = 45;

20
demo/distance.html
View File

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

14
demo/event-propagator.html
View File

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

14
demo/hull.html
View File

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

20
demo/iframed-arrows.html
View File

@ -15,12 +15,12 @@
margin: 0;
}
fc-geometry {
folk-shape {
border: 1px solid black;
border-radius: 3px;
}
fc-rope {
folk-rope {
display: block;
position: absolute;
inset: 0 0 0 0;
@ -34,20 +34,20 @@
</style>
</head>
<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>
</fc-geometry>
<fc-geometry x="300" y="100" width="250" height="400">
</folk-shape>
<folk-shape x="300" y="100" width="250" height="400">
<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">
import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
import { FolkRope } from '../src/arrows/fc-rope.ts';
import { FolkShape } from '../src/canvas/folk-shape.ts';
import { FolkRope } from '../src/arrows/folk-rope.ts';
FolkGeometry.define();
FolkShape.define();
FolkRope.define();
</script>
</body>

6
demo/ink.html
View File

@ -21,10 +21,10 @@
<button on:click="DRAW">Draw</button>
</nav>
<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';
FolkGeometry.define();
FolkShape.define();
FolkInk.define();
const drawButton = document.querySelector('button');
@ -45,7 +45,7 @@
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.y = rect.y;
geometry.height = rect.height;

18
demo/llm.html
View File

@ -22,7 +22,7 @@
pointer-events: none;
}
fc-geometry {
folk-shape {
border: 1px solid black;
border-radius: 4px;
}
@ -40,7 +40,7 @@
</style>
</head>
<body>
<fc-geometry x="100" y="100" width="250">
<folk-shape x="100" y="100" width="250">
<ul id="recipe" class="wprm-recipe-ingredients">
<li class="wprm-recipe-ingredient" style="list-style-type: disc" data-uid="0">
<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>
</li>
</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>
</fc-geometry>
</folk-shape>
<fc-geometry x="700" y="200">
<folk-shape x="700" y="200">
<folk-timer></folk-timer>
</fc-geometry>
</folk-shape>
<event-propagator
source="#recipe"
@ -107,12 +107,12 @@
></event-propagator>
<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 { FolkTimer } from '../src/folk-timer.ts';
import { EventPropagator } from '../src/arrows/event-propagator.ts';
FolkGeometry.define();
FolkShape.define();
FolkLLM.define();
FolkTimer.define();
EventPropagator.define();

8
demo/perf.html
View File

@ -15,23 +15,23 @@
margin: 0;
}
fc-geometry {
folk-shape {
border: 2px solid black;
}
</style>
</head>
<body>
<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 now = performance.now();
for (let i = 0; i < 100; i++) {
for (let j = 0; j < 100; j++) {
const geo = document.createElement('fc-geometry');
const geo = document.createElement('folk-shape');
geo.x = 50 * i;
geo.y = 50 * j;
geo.width = geo.height = 45;

20
demo/proximity-maps.html
View File

@ -58,25 +58,25 @@
</head>
<body>
<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>
</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>
</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>
</fc-geometry>
</folk-shape>
<fc-geometry id="g4" x="450" y="100">
<folk-shape id="g4" x="450" y="100">
<folk-weather></folk-weather>
</fc-geometry>
</folk-shape>
</folk-proximity>
<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 { FolkWeather } from '../src/folk-weather.ts';
import { FolkCluster, FolkProximity } from '../src/folk-proximity.ts';
@ -183,7 +183,7 @@
},
});
FolkGeometry.define();
FolkShape.define();
FolkMap.define();
FolkCluster.define();
FolkProximity.define();

28
demo/proximity-music.html
View File

@ -15,7 +15,7 @@
margin: 0;
}
fc-geometry:has(record-player) {
folk-shape:has(record-player) {
box-shadow: 10px 0px 150px 0px rgba(0, 0, 0, 0.61);
&::part(resize-nw),
@ -26,45 +26,45 @@
}
}
fc-geometry > video {
folk-shape > video {
height: 100%;
}
</style>
</head>
<body>
<fc-geometry x="100" y="75" width="330" height="198">
<folk-shape x="100" y="75" width="330" height="198">
<record-player>
<audio src="/Feather.mov"></audio>
</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>
<source src="/dancing-flower.mov" type="video/quicktime" />
<source src="/dancing-flower.webm" type="video/webm" />
</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>
<source src="/dancing-flower.mov" type="video/quicktime" />
<source src="/dancing-flower.webm" type="video/webm" />
</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>
<source src="/dancing-flower.mov" type="video/quicktime" />
<source src="/dancing-flower.webm" type="video/webm" />
</video>
</fc-geometry>
</folk-shape>
<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 { collisionDetection } from '../src/collision.ts';
FolkGeometry.define();
FolkShape.define();
RecordPlayer.define();
/**
@ -75,9 +75,9 @@
let proximityDistance = 150;
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 flowers = document.querySelectorAll('fc-geometry:has(video)');
const flowers = document.querySelectorAll('folk-shape:has(video)');
// set playback rate when video is ready
function setPlayback(e) {
e.target.playbackRate = (91 / 60) * e.target.duration;

20
demo/qr-code.html
View File

@ -40,21 +40,21 @@
<body rope-mode>
<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>
</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>
</fc-geometry>
</folk-shape>
<fc-geometry x="325" y="175">
<folk-shape x="325" y="175">
<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>
</fc-geometry>
</folk-shape>
<event-propagator
source="textarea"
@ -79,10 +79,10 @@
<script type="module">
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';
FolkGeometry.define();
FolkShape.define();
EventPropagator.define();
const ropeMode = document.querySelector('input[type="checkbox"]');

38
demo/semantic-zoom.html
View File

@ -75,13 +75,13 @@
margin: 1rem;
}
fc-connection {
folk-connection {
display: block;
position: absolute;
inset: 0 0 0 0;
}
fc-geometry {
folk-shape {
background: black;
color: white;
max-width: 40ch;
@ -99,14 +99,14 @@
}
}
body[zoom='0'] fc-geometry {
body[zoom='0'] folk-shape {
width: 20px;
aspect-ratio: 1;
border-radius: 50%;
}
body[zoom='0'] fc-geometry :is(h2, p),
body[zoom='50'] fc-geometry p {
body[zoom='0'] folk-shape :is(h2, p),
body[zoom='50'] folk-shape p {
display: none;
}
</style>
@ -117,7 +117,7 @@
<input type="range" min="0" max="100" value="100" style="view-transition-name: slider" />
</label>
<fc-geometry id="box1" x="100" y="100">
<folk-shape id="box1" x="100" y="100">
<h2>Lorem ispum</h2>
<p>
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
laborum.
</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>
<p>
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
consequat.
</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>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.
</p>
</fc-geometry>
</folk-shape>
<fc-connection source="#box1" target="#box2"></fc-connection>
<fc-connection source="#box2" target="#box3"></fc-connection>
<fc-connection source="#box1" target="#box3"></fc-connection>
<folk-connection source="#box1" target="#box2"></folk-connection>
<folk-connection source="#box2" target="#box3"></folk-connection>
<folk-connection source="#box1" target="#box3"></folk-connection>
<script type="module">
import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
import { FolkConnection } from '../src/arrows/fc-connection.ts';
import { FolkShape } from '../src/canvas/folk-shape.ts';
import { FolkConnection } from '../src/arrows/folk-connection.ts';
FolkGeometry.define();
FolkShape.define();
FolkConnection.define();
document.body.querySelectorAll('fc-geometry').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-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('h2').forEach((el, i) => (el.style.viewTransitionName = `h${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;
}
fc-geometry {
folk-shape {
background: rgb(187, 178, 178);
}
</style>
</head>
<body>
<fc-geometry x="100" y="100" width="50" height="50"></fc-geometry>
<fc-geometry x="100" y="200" width="50" height="50"></fc-geometry>
<fc-geometry x="100" y="300" width="50" height="50" rotate="45"></fc-geometry>
<folk-shape x="100" y="100" width="50" height="50"></folk-shape>
<folk-shape x="100" y="200" width="50" height="50"></folk-shape>
<folk-shape x="100" y="300" width="50" height="50" rotate="45"></folk-shape>
<script type="module">
import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
import { FolkShape } from '../src/canvas/folk-shape.ts';
FolkGeometry.define();
FolkShape.define();
</script>
</body>
</html>

16
demo/spreadsheet-graph.html
View File

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

16
demo/spreadsheet-propagator.html
View File

@ -31,15 +31,15 @@
</style>
</head>
<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>
</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>
</fc-geometry>
</folk-shape>
<fc-geometry x="25" y="300" width="500">
<folk-shape x="25" y="300" width="500">
<folk-spreadsheet>
<folk-cell row="1" column="A" expression="0"></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="J"></folk-cell>
</folk-spreadsheet>
</fc-geometry>
</folk-shape>
<event-propagator
source="#map1"
@ -167,12 +167,12 @@
<script type="module">
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 { FolkSpreadsheet } from '../src/folk-spreadsheet.ts';
FolkMap.define();
FolkGeometry.define();
FolkShape.define();
FolkSpreadsheet.define();
EventPropagator.define();

8
demo/spreadsheet.html
View File

@ -17,7 +17,7 @@
</style>
</head>
<body>
<fc-geometry x="50" y="50" width="500">
<folk-shape x="50" y="50" width="500">
<folk-spreadsheet>
<folk-cell column="A" row="1" expression="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="J" row="10"></folk-cell>
</folk-spreadsheet>
</fc-geometry>
</folk-shape>
<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';
FolkGeometry.define();
FolkShape.define();
FolkSpreadsheet.define();
</script>
</body>

24
demo/wiggly.html
View File

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

18
demo/xanadu.html
View File

@ -29,7 +29,7 @@
overflow-y: hidden;
}
fc-geometry {
folk-shape {
background-color: #fefefe;
width: 400px;
height: 100%;
@ -56,7 +56,7 @@
</style>
</head>
<body>
<fc-geometry name="1" x="20">
<folk-shape name="1" x="20">
<article>
<h2>Note 1</h2>
@ -127,9 +127,9 @@
est laborum.
</p>
</article>
</fc-geometry>
</folk-shape>
<fc-geometry name="2" x="500">
<folk-shape name="2" x="500">
<article>
<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.
</p>
</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">
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();
// 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 { ClientRectObserverEntry, ClientRectObserverManager } from '../client-rect-observer.ts';
@ -43,7 +43,7 @@ export class AbstractArrow extends HTMLElement {
};
#sourceHandler = (e: Event) => {
const geometry = e.target as FolkGeometry;
const geometry = e.target as FolkShape;
this.#sourceRect = geometry.getClientRect();
this.#update();
};
@ -117,7 +117,7 @@ export class AbstractArrow extends HTMLElement {
};
#targetHandler = (e: Event) => {
const geometry = e.target as FolkGeometry;
const geometry = e.target as FolkShape;
this.#targetRect = geometry.getClientRect();
this.#update();
};
@ -190,7 +190,7 @@ export class AbstractArrow extends HTMLElement {
if (this.#sourceElement === null) {
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('move', this.#sourceHandler);
this.#sourceRect = this.#sourceElement.getBoundingClientRect();
@ -211,7 +211,7 @@ export class AbstractArrow extends HTMLElement {
unobserveSource() {
if (this.#sourceElement === null) return;
if (this.#sourceElement instanceof FolkGeometry) {
if (this.#sourceElement instanceof FolkShape) {
this.#sourceElement.removeEventListener('resize', this.#sourceHandler);
this.#sourceElement.removeEventListener('move', this.#sourceHandler);
} else if (this.#sourceElement instanceof HTMLIFrameElement && this.#sourceIframeSelector) {
@ -241,7 +241,7 @@ export class AbstractArrow extends HTMLElement {
if (!this.#targetElement) {
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('move', this.#targetHandler);
} else if (this.#targetElement instanceof HTMLIFrameElement && this.#targetIframeSelector) {
@ -261,7 +261,7 @@ export class AbstractArrow extends HTMLElement {
unobserveTarget() {
if (this.#targetElement === null) return;
if (this.#targetElement instanceof FolkGeometry) {
if (this.#targetElement instanceof FolkShape) {
this.#targetElement.removeEventListener('resize', this.#targetHandler);
this.#targetElement.removeEventListener('move', this.#targetHandler);
} 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();
styles.replaceSync(`

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

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

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

@ -21,12 +21,12 @@ interface RopePoint {
declare global {
interface HTMLElementTagNameMap {
'fc-rope': FolkRope;
'folk-rope': FolkRope;
}
}
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');
#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';
const clientRectObserver = new ClientRectObserverManager();
@ -80,7 +80,7 @@ if (window.parent !== window) {
observedElements.set(selector, element);
observedSelectors.set(element, selector);
if (element instanceof FolkGeometry) {
if (element instanceof FolkShape) {
element.addEventListener('move', onGeometryChange);
element.addEventListener('resize', onGeometryChange);
@ -100,7 +100,7 @@ if (window.parent !== window) {
if (element === undefined) return;
if (element instanceof FolkGeometry) {
if (element instanceof FolkShape) {
element.removeEventListener('move', onGeometryChange);
element.removeEventListener('resize', onGeometryChange);
observedElements.delete(selector);

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

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

6
src/distance-field.ts
View File

@ -1,6 +1,6 @@
import { frag, vert } from './utils/tags.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.
@ -12,7 +12,7 @@ export class DistanceField extends HTMLElement {
private textures: WebGLTexture[] = [];
private shapes!: NodeListOf<FolkGeometry>;
private shapes!: NodeListOf<FolkShape>;
private canvas!: HTMLCanvasElement;
private glContext!: WebGL2RenderingContext;
private framebuffer!: WebGLFramebuffer;
@ -34,7 +34,7 @@ export class DistanceField extends HTMLElement {
}
connectedCallback() {
this.shapes = document.querySelectorAll('fc-geometry');
this.shapes = document.querySelectorAll('folk-shape');
this.initWebGL();
this.initShaders();
this.initPingPongTextures();

18
src/folk-proximity.ts
View File

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