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

standalone imports

This commit is contained in:
“chrisshank” 2024-12-03 15:35:30 -08:00
parent b0b74d077c
commit 92ea7090fa
63 changed files with 132 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
demo/[tests] distance-field.html
View File

@ -26,10 +26,10 @@
</style>
</head>
<body>
<distance-field> </distance-field>
<distance-field></distance-field>
<script type="module">
import { DistanceField } from '../src/distance-field.ts';
import { FolkShape } from '../src/folk-shape.ts';
import '../src/standalone/distance-field.ts';
import '../src/standalone/folk-shape.ts';
const d = document.querySelector('distance-field');
@ -48,8 +48,6 @@
}
console.log(performance.now() - now);
DistanceField.define();
// function tick() {
// window.requestAnimationFrame(tick);

2
demo/[tests] many-shapes.html
View File

@ -22,7 +22,7 @@
</head>
<body>
<script type="module">
import { FolkShape } from '../src/folk-shape.ts';
import '../src/standalone/folk-shape.ts';
const geometries = [];

2
demo/animated-shapes-on-a-canvas.html
View File

@ -64,7 +64,7 @@
<folk-shape x="100" y="300" width="50" height="50"></folk-shape>
<script type="module">
import { FolkShape } from '../src/folk-shape.ts';
import '../src/standalone/folk-shape.ts';
const geos = document.querySelectorAll('folk-shape');

8
demo/audio-beats-with-event-propagators.html
View File

@ -53,10 +53,10 @@
></folk-event-propagator>
<script type="module">
import { FolkShape } from '../src/folk-shape.ts';
import { FolkLLM } from '../src/folk-llm.ts';
import { FolkMetronome } from '../src/folk-metronome.ts';
import { FolkEventPropagator } from '../src/folk-event-propagator.ts';
import '../src/standalone/folk-shape.ts';
import '../src/standalone/folk-llm.ts';
import '../src/standalone/folk-metronome.ts';
import '../src/standalone/folk-event-propagator.ts';
</script>
</body>
</html>

2
demo/canvasify-a-html-document.html
View File

@ -100,7 +100,7 @@
</main>
<script type="module">
import { FolkShape } from '../src/folk-shape.ts';
import '../src/standalone/folk-shape.ts';
function copyStyles(from, to) {
const styles = getComputedStyle(from);

4
demo/sticky-html-arrow-between-iframes.html → demo/cross-iframe-sticky-html-arrow.html
View File

@ -44,8 +44,8 @@
<folk-rope source="#frame1 >>> #box1" target="#frame2 >>> #box1"></folk-rope>
<script type="module">
import { FolkShape } from '../src/folk-shape.ts';
import { FolkRope } from '../src/folk-rope.ts';
import '../src/standalone/folk-shape.ts';
import '../src/standalone/folk-rope.ts';
</script>
</body>
</html>

2
demo/cross-iframe-xanadu-links.html
View File

@ -63,7 +63,7 @@
<folk-xanadu source="#frame1 >>> p:nth-child(6)" target="#frame2 >>> p:nth-child(4)"></folk-xanadu>
<script type="module">
import { FolkXanadu } from '../src/folk-xanadu.ts';
import '../src/standalone/folk-xanadu.ts';
</script>
</body>
</html>

4
demo/distance-field-visualization.html
View File

@ -42,8 +42,8 @@
</distance-field>
<script type="module">
import { FolkShape } from '../src/folk-shape.ts';
import { DistanceField } from '../src/distance-field.ts';
import '../src/standalone/folk-shape.ts';
import '../src/standalone/distance-field.ts';
</script>
</body>
</html>

13
demo/embeddable-llm-with-propagators.html
View File

@ -98,7 +98,8 @@
source="folk-llm"
target="folk-timer"
triggers="started"
expression="$target.reset(); $target.start()"
expression="reset(): true
start(): true"
>
</folk-event-propagator>
@ -106,14 +107,14 @@
source="folk-llm"
target="folk-timer"
triggers="finished"
expression="$target.stop();"
expression="stop(): true"
></folk-event-propagator>
<script type="module">
import { FolkShape } from '../src/folk-shape.ts';
import { FolkLLM } from '../src/folk-llm.ts';
import { FolkTimer } from '../src/folk-timer.ts';
import { FolkEventPropagator } from '../src/folk-event-propagator.ts';
import '../src/standalone/folk-shape.ts';
import '../src/standalone/folk-llm.ts';
import '../src/standalone/folk-timer.ts';
import '../src/standalone/folk-event-propagator.ts';
</script>
</body>
</html>

4
demo/event-propagators.html
View File

@ -45,8 +45,8 @@ rotation: from.x"
></folk-event-propagator>
<script type="module">
import { FolkShape } from '../src/folk-shape.ts';
import { FolkEventPropagator } from '../src/folk-event-propagator.ts';
import '../src/standalone/folk-shape.ts';
import '../src/standalone/folk-event-propagator.ts';
</script>
</body>
</html>

4
demo/folk-interface-for-qr-codes.html
View File

@ -72,8 +72,8 @@
<script type="module">
import 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.18.0/cdn/components/qr-code/qr-code.js';
import { FolkShape } from '../src/folk-shape.ts';
import { FolkEventPropagator } from '../src/folk-event-propagator.ts';
import '../src/standalone/folk-shape.ts';
import '../src/standalone/folk-event-propagator.ts';
const ropeMode = document.querySelector('input[type="checkbox"]');

4
demo/html-ink.html
View File

@ -21,8 +21,8 @@
<button on:click="DRAW">Draw</button>
</nav>
<script type="module">
import { FolkShape } from '../src/folk-shape.ts';
import { FolkInk } from '../src/folk-ink.ts';
import '../src/standalone/folk-shape.ts';
import '../src/standalone/folk-ink.ts';
const drawButton = document.querySelector('button');

4
demo/html-spreadsheet.html
View File

@ -123,8 +123,8 @@
</folk-shape>
<script type="module">
import { FolkShape } from '../src/folk-shape.ts';
import { FolkSpreadsheet } from '../src/folk-spreadsheet.ts';
import '../src/standalone/folk-shape.ts';
import '../src/standalone/folk-spreadsheet.ts';
</script>
</body>
</html>

6
demo/propagator-toolbar.html
View File

@ -44,9 +44,9 @@
<folk-toolbar></folk-toolbar>
<script type="module">
import { FolkShape } from '../src/folk-shape.ts';
import { DistanceField } from '../src/distance-field.ts';
import { FolkToolbar } from '../src/folk-toolbar.ts';
import '../src/standalone/folk-shape.ts';
import '../src/standalone/distance-field.ts';
import '../src/standalone/folk-toolbar.ts';
</script>
</body>
</html>

14
demo/proximity-based-communication-and-event-propagators.html
View File

@ -83,12 +83,14 @@
></folk-event-propagator>
<script type="module">
import { FolkShape } from '../src/folk-shape.ts';
import { FolkEventPropagator } from '../src/folk-event-propagator.ts';
import { FolkMap } from '../src/folk-map.ts';
import { FolkWeather } from '../src/folk-weather.ts';
import { FolkCluster, FolkProximity } from '../src/folk-proximity.ts';
import { GeoWiki } from './src/geo-wiki.ts';
import '../src/standalone/folk-shape.ts';
import '../src/standalone/folk-event-propagator.ts';
import '../src/standalone/folk-map.ts';
import '../src/standalone/folk-weather.ts';
import './src/geo-wiki.ts';
import { FolkCluster } from '../src/folk-proximity.ts';
FolkCluster.register();
FolkCluster.registerElement({
constructor: FolkMap,

12
demo/proximity-based-communication.html
View File

@ -76,11 +76,13 @@
</folk-proximity>
<script type="module">
import { FolkShape } from '../src/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';
import { GeoWiki } from './src/geo-wiki.ts';
import '../src/standalone/folk-shape.ts';
import '../src/standalone/folk-map.ts';
import '../src/standalone/folk-weather.ts';
import './src/geo-wiki.ts';
import { FolkCluster } from '../src/folk-proximity.ts';
FolkCluster.define();
FolkCluster.registerElement({
constructor: FolkMap,

4
demo/proximity-based-music.html
View File

@ -60,8 +60,8 @@
</folk-shape>
<script type="module">
import { FolkShape } from '../src/folk-shape.ts';
import { RecordPlayer } from './src/record-player.ts';
import '../src/standalone/folk-shape.ts';
import './src/record-player.ts';
import { collisionDetection } from '../src/common/collision.ts';
let proximityDistance = 150;

4
demo/semantic-zoom-in-a-canvas.html
View File

@ -150,8 +150,8 @@
<folk-connection source="#box1" target="#box3"></folk-connection>
<script type="module">
import { FolkShape } from '../src/folk-shape.ts';
import { FolkConnection } from '../src/folk-connection.ts';
import '../src/standalone/folk-shape.ts';
import '../src/standalone/folk-connection.ts';
document.body.querySelectorAll('folk-shape').forEach((el, i) => (el.style.viewTransitionName = `g${i}`));
document.body.querySelectorAll('folk-connection').forEach((el, i) => (el.style.viewTransitionName = `c${i}`));

2
demo/shape-collision-detection.html
View File

@ -29,7 +29,7 @@
<folk-shape x="200" y="200" width="50" height="50"></folk-shape>
<script type="module">
import { FolkShape } from '../src/folk-shape.ts';
import '../src/standalone/folk-shape.ts';
import { collisionDetection } from '../src/common/collision.ts';
const geometryElements = document.querySelectorAll('folk-shape');

2
demo/shapes-in-a-canvas.html
View File

@ -26,7 +26,7 @@
<folk-shape x="100" y="300" width="50" height="50" rotation="45"></folk-shape>
<script type="module">
import { FolkShape } from '../src/folk-shape.ts';
import '../src/standalone/folk-shape.ts';
</script>
</body>
</html>

11
demo/space-morph.html
View File

@ -43,15 +43,10 @@
</folk-space>
<script type="module">
import { FolkSpace } from '../src/folk-space.ts';
import { FolkShape } from '../src/folk-shape.ts';
import '../src/standalone/folk-space.ts';
import '../src/standalone/folk-shape.ts';
const space = document.getElementById('space');
document.addEventListener('keydown', (event) => {
if (event.key === 'Enter') {
space.transition();
}
});
document.addEventListener('click', () => window.space.transition());
</script>
</body>
</html>

6
demo/spreadsheet-graph-projection.html
View File

@ -166,9 +166,9 @@
</folk-shape>
<script type="module">
import { FolkShape } from '../src/folk-shape.ts';
import { FolkConnection } from '../src/folk-connection.ts';
import { FolkSpreadsheet } from '../src/folk-spreadsheet.ts';
import '../src/standalone/folk-shape.ts';
import '../src/standalone/folk-connection.ts';
import '../src/standalone/folk-spreadsheet.ts';
let isProjected = false;
const button = document.querySelector('button');

8
demo/spreadsheet-map-propagator.html
View File

@ -162,10 +162,10 @@
></folk-event-propagator>
<script type="module">
import { FolkMap } from '../src/folk-map.ts';
import { FolkShape } from '../src/folk-shape.ts';
import { FolkEventPropagator } from '../src/folk-event-propagator.ts';
import { FolkSpreadsheet } from '../src/folk-spreadsheet.ts';
import '../src/standalone/folk-map.ts';
import '../src/standalone/folk-shape.ts';
import '../src/standalone/folk-event-propagator.ts';
import '../src/standalone/folk-spreadsheet.ts';
window.round = (number, digits = 0) => {
const base = Number('1'.padEnd(digits + 1, '0'));

4
demo/sticky-html-arrow.html
View File

@ -34,8 +34,8 @@
<folk-connection source="#box1" target="#box2"></folk-connection>
<script type="module">
import { FolkShape } from '../src/folk-shape.ts';
import { FolkConnection } from '../src/folk-connection.ts';
import '../src/standalone/folk-shape.ts';
import '../src/standalone/folk-connection.ts';
import '../src/common/iframe-script.ts';
</script>
</body>

4
demo/sticky-html-rope.html
View File

@ -38,8 +38,8 @@
<folk-rope source="#box1" target="#box4"></folk-rope>
<script type="module">
import { FolkShape } from '../src/folk-shape.ts';
import { FolkRope } from '../src/folk-rope.ts';
import '../src/standalone/folk-shape.ts';
import '../src/standalone/folk-rope.ts';
</script>
</body>
</html>

4
demo/visualizing-set-relations.html
View File

@ -36,8 +36,8 @@
<folk-hull sources="folk-shape"></folk-hull>
<script type="module">
import { FolkShape } from '../src/folk-shape.ts';
import { FolkHull } from '../src/folk-hull.ts';
import '../src/standalone/folk-shape.ts';
import '../src/standalone/folk-hull.ts';
</script>
</body>
</html>

4
demo/xanadu-link.html
View File

@ -201,8 +201,8 @@
<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 { FolkShape } from '../src/folk-shape.ts';
import '../src/standalone/folk-xanadu.ts';
import '../src/standalone/folk-shape.ts';
</script>
</body>
</html>

2
src/abstract-arrow.ts
View File

@ -12,6 +12,8 @@ export class AbstractArrow extends HTMLElement {
static tagName = 'abstract-arrow';
static define() {
if (customElements.get(this.tagName)) return;
FolkShape.define();
customElements.define(this.tagName, this);
}

5
src/distance-field.ts
View File

@ -1,6 +1,6 @@
import { frag, vert } from './common/tags.ts';
import { WebGLUtils } from './common/webgl.ts';
import type { FolkShape } from './folk-shape.ts';
import { FolkShape } from './folk-shape.ts';
/**
* The DistanceField class calculates a distance field using the Jump Flooding Algorithm (JFA) in WebGL.
@ -31,6 +31,7 @@ export class DistanceField extends HTMLElement {
static define() {
if (customElements.get(this.tagName)) return;
FolkShape.define();
customElements.define(this.tagName, this);
}
@ -569,5 +570,3 @@ void main() {
vec2 seedCoord = gl_FragCoord.xy / u_canvasSize;
outColor = vec4(seedCoord, v_shapeID, 0.0); // Seed coords (x, y), shape ID (z), initial distance (a)
}`;
DistanceField.define();

2
src/folk-connection.ts
View File

@ -85,5 +85,3 @@ export class FolkConnection extends AbstractArrow {
this.style.backgroundColor = 'black';
}
}
FolkConnection.define();

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

@ -244,5 +244,3 @@ function parseAst(functionBody: string) {
console.log('Properties accessed on to:', Array.from(toProps));
console.log('Properties accessed on from:', Array.from(fromProps));
}
FolkEventPropagator.define();

2
src/folk-hull.ts
View File

@ -110,5 +110,3 @@ export function makeHull(rects: DOMRectReadOnly[]): Point[] {
return upperHull.concat(lowerHull);
}
FolkHull.define();

3
src/folk-ink.ts
View File

@ -33,6 +33,7 @@ export class FolkInk extends HTMLElement {
static tagName = 'folk-ink';
static define() {
if (customElements.get(this.tagName)) return;
customElements.define(this.tagName, this);
}
@ -211,5 +212,3 @@ export class FolkInk extends HTMLElement {
return d.join(' ');
}
}
FolkInk.define();

2
src/folk-llm.ts
View File

@ -103,5 +103,3 @@ declare global {
ai: any;
}
}
FolkLLM.define();

2
src/folk-map.ts
View File

@ -95,5 +95,3 @@ export class FolkMap extends HTMLElement {
}
};
}
FolkMap.define();

2
src/folk-metronome.ts
View File

@ -70,5 +70,3 @@ export class FolkMetronome extends HTMLElement {
this.textContent = this.#beat.toString();
};
}
FolkMetronome.define();

5
src/folk-proximity.ts
View File

@ -133,6 +133,8 @@ export class FolkProximity extends HTMLElement {
static define() {
if (customElements.get(this.tagName)) return;
FolkShape.define();
FolkCluster.define();
customElements.define(this.tagName, this);
}
@ -193,6 +195,3 @@ export class FolkProximity extends HTMLElement {
return null;
}
}
FolkCluster.define();
FolkProximity.define();

2
src/folk-rope.ts
View File

@ -257,5 +257,3 @@ function applyConstraint(p1: RopePoint, p2: RopePoint) {
p2.pos = Vector.sub(p2.pos, adjustment);
}
}
FolkRope.define();

2
src/folk-set.ts
View File

@ -79,5 +79,3 @@ export class FolkSet extends HTMLElement {
update() {}
}
FolkSet.define();

2
src/folk-shape.ts
View File

@ -786,5 +786,3 @@ export class FolkShape extends HTMLElement {
this.height = Math.abs(unrotatedAnchor.y - unrotatedHandle.y);
}
}
FolkShape.define();

2
src/folk-space.ts
View File

@ -71,5 +71,3 @@ export class FolkSpace extends HTMLElement {
space?.classList.toggle('rotate');
}
}
FolkSpace.define();

3
src/folk-spreadsheet.ts
View File

@ -154,6 +154,7 @@ export class FolkSpreadsheet extends HTMLElement {
static define() {
if (customElements.get(this.tagName)) return;
// order of registering is important
FolkSpreadSheetCell.define();
FolkSpreadsheetHeader.define();
customElements.define(this.tagName, this);
@ -516,5 +517,3 @@ export class FolkSpreadSheetCell extends HTMLElement {
}
}
}
FolkSpreadsheet.define();

2
src/folk-timer.ts
View File

@ -40,5 +40,3 @@ export class FolkTimer extends HTMLElement {
this.textContent = (time / 1000).toFixed(1);
};
}
FolkTimer.define();

3
src/folk-toolbar.ts
View File

@ -126,6 +126,3 @@ export class FolkToolbar extends HTMLElement {
return element.id;
}
}
FolkEventPropagator.define();
FolkToolbar.define();

2
src/folk-weather.ts
View File

@ -69,5 +69,3 @@ export class FolkWeather extends HTMLElement {
`;
}
}
FolkWeather.define();

2
src/folk-xanadu.ts
View File

@ -100,5 +100,3 @@ function computeInlineVertices(rects: DOMRect[]): Point[] {
return vertices;
}
FolkXanadu.define();

3
src/standalone/distance-field.ts Normal file
View File

@ -0,0 +1,3 @@
import { DistanceField } from '../distance-field';
DistanceField.define();

3
src/standalone/folk-connection.ts Normal file
View File

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

3
src/standalone/folk-event-propagator.ts Normal file
View File

@ -0,0 +1,3 @@
import { FolkEventPropagator } from '../folk-event-propagator';
FolkEventPropagator.define();

3
src/standalone/folk-hull.ts Normal file
View File

@ -0,0 +1,3 @@
import { FolkHull } from '../folk-hull';
FolkHull.define();

3
src/standalone/folk-ink.ts Normal file
View File

@ -0,0 +1,3 @@
import { FolkInk } from '../folk-ink';
FolkInk.define();

3
src/standalone/folk-llm.ts Normal file
View File

@ -0,0 +1,3 @@
import { FolkLLM } from '../folk-llm';
FolkLLM.define();

3
src/standalone/folk-map.ts Normal file
View File

@ -0,0 +1,3 @@
import { FolkMap } from '../folk-map';
FolkMap.define();

3
src/standalone/folk-metronome.ts Normal file
View File

@ -0,0 +1,3 @@
import { FolkMetronome } from '../folk-metronome';
FolkMetronome.define();

3
src/standalone/folk-proximity.ts Normal file
View File

@ -0,0 +1,3 @@
import { FolkProximity } from '../folk-proximity';
FolkProximity.define();

3
src/standalone/folk-rope.ts Normal file
View File

@ -0,0 +1,3 @@
import { FolkRope } from '../folk-rope';
FolkRope.define();

3
src/standalone/folk-shape.ts Normal file
View File

@ -0,0 +1,3 @@
import { FolkShape } from '../folk-shape';
FolkShape.define();

3
src/standalone/folk-space.ts Normal file
View File

@ -0,0 +1,3 @@
import { FolkSpace } from '../folk-space';
FolkSpace.define();

3
src/standalone/folk-spreadsheet.ts Normal file
View File

@ -0,0 +1,3 @@
import { FolkSpreadsheet } from '../folk-spreadsheet';
FolkSpreadsheet.define();

3
src/standalone/folk-timer.ts Normal file
View File

@ -0,0 +1,3 @@
import { FolkTimer } from '../folk-timer';
FolkTimer.define();

4
src/standalone/folk-toolbar.ts Normal file
View File

@ -0,0 +1,4 @@
import './folk-event-propagator';
import { FolkToolbar } from '../folk-toolbar';
FolkToolbar.define();

3
src/standalone/folk-weather.ts Normal file
View File

@ -0,0 +1,3 @@
import { FolkWeather } from '../folk-weather';
FolkWeather.define();

3
src/standalone/folk-xanadu.ts Normal file
View File

@ -0,0 +1,3 @@
import { FolkXanadu } from '../folk-xanadu';
FolkXanadu.define();