diff --git a/demo/[tests] distance-field.html b/demo/[tests] distance-field.html index c21747a..19b51e2 100644 --- a/demo/[tests] distance-field.html +++ b/demo/[tests] distance-field.html @@ -31,8 +31,6 @@ import { DistanceField } from '../src/distance-field.ts'; import { FolkShape } from '../src/folk-shape.ts'; - FolkShape.define(); - const d = document.querySelector('distance-field'); const geometries = []; diff --git a/demo/[tests] many-shapes.html b/demo/[tests] many-shapes.html index 3aa3a30..ba360d4 100644 --- a/demo/[tests] many-shapes.html +++ b/demo/[tests] many-shapes.html @@ -24,8 +24,6 @@ diff --git a/demo/canvasify-a-html-document.html b/demo/canvasify-a-html-document.html index 8f4ec16..d35d408 100644 --- a/demo/canvasify-a-html-document.html +++ b/demo/canvasify-a-html-document.html @@ -102,8 +102,6 @@ diff --git a/demo/distance-field-visualization.html b/demo/distance-field-visualization.html index 044dd6f..27ae6e0 100644 --- a/demo/distance-field-visualization.html +++ b/demo/distance-field-visualization.html @@ -44,9 +44,6 @@ diff --git a/demo/embeddable-llm-with-propagators.html b/demo/embeddable-llm-with-propagators.html index c49dc12..6c863d4 100644 --- a/demo/embeddable-llm-with-propagators.html +++ b/demo/embeddable-llm-with-propagators.html @@ -121,11 +121,6 @@ import { FolkLLM } from '../src/folk-llm.ts'; import { FolkTimer } from '../src/folk-timer.ts'; import { FolkEventPropagator } from '../src/folk-event-propagator.ts'; - - FolkShape.define(); - FolkLLM.define(); - FolkTimer.define(); - FolkEventPropagator.define(); diff --git a/demo/event-propagators.html b/demo/event-propagators.html index 9b0c8a9..107f34d 100644 --- a/demo/event-propagators.html +++ b/demo/event-propagators.html @@ -54,9 +54,6 @@ rotation: from.x" diff --git a/demo/folk-interface-for-qr-codes.html b/demo/folk-interface-for-qr-codes.html index 8c56f96..9792a35 100644 --- a/demo/folk-interface-for-qr-codes.html +++ b/demo/folk-interface-for-qr-codes.html @@ -82,9 +82,6 @@ import { FolkShape } from '../src/folk-shape.ts'; import { FolkEventPropagator } from '../src/folk-event-propagator.ts'; - FolkShape.define(); - FolkEventPropagator.define(); - const ropeMode = document.querySelector('input[type="checkbox"]'); ropeMode.addEventListener('input', () => { diff --git a/demo/html-ink.html b/demo/html-ink.html index 5773bb7..ace626c 100644 --- a/demo/html-ink.html +++ b/demo/html-ink.html @@ -24,9 +24,6 @@ import { FolkShape } from '../src/folk-shape.ts'; import { FolkInk } from '../src/folk-ink.ts'; - FolkShape.define(); - FolkInk.define(); - const drawButton = document.querySelector('button'); async function draw(e) { diff --git a/demo/html-spreadsheet.html b/demo/html-spreadsheet.html index 739c2a5..9f5d48e 100644 --- a/demo/html-spreadsheet.html +++ b/demo/html-spreadsheet.html @@ -125,9 +125,6 @@ diff --git a/demo/propagator-toolbar.html b/demo/propagator-toolbar.html index 33349ba..8530c9f 100644 --- a/demo/propagator-toolbar.html +++ b/demo/propagator-toolbar.html @@ -55,10 +55,6 @@ import { FolkShape } from '../src/folk-shape.ts'; import { DistanceField } from '../src/distance-field.ts'; import { FolkToolbar } from '../src/folk-toolbar.ts'; - - FolkShape.define(); - DistanceField.define(); - FolkToolbar.define(); diff --git a/demo/proximity-based-communication-and-event-propagators.html b/demo/proximity-based-communication-and-event-propagators.html index aa9804c..00b37fe 100644 --- a/demo/proximity-based-communication-and-event-propagators.html +++ b/demo/proximity-based-communication-and-event-propagators.html @@ -134,14 +134,6 @@ } }, }); - - FolkShape.define(); - FolkMap.define(); - FolkCluster.define(); - FolkProximity.define(); - FolkWeather.define(); - GeoWiki.define(); - FolkEventPropagator.define(); diff --git a/demo/proximity-based-communication.html b/demo/proximity-based-communication.html index 3aa5fc4..93f1664 100644 --- a/demo/proximity-based-communication.html +++ b/demo/proximity-based-communication.html @@ -119,13 +119,6 @@ } }, }); - - FolkShape.define(); - FolkMap.define(); - FolkCluster.define(); - FolkProximity.define(); - FolkWeather.define(); - GeoWiki.define(); diff --git a/demo/proximity-based-music.html b/demo/proximity-based-music.html index 0ea7cc2..686ccb2 100644 --- a/demo/proximity-based-music.html +++ b/demo/proximity-based-music.html @@ -64,15 +64,6 @@ import { RecordPlayer } from './src/record-player.ts'; import { collisionDetection } from '../src/common/collision.ts'; - FolkShape.define(); - RecordPlayer.define(); - - /** - sips -c 326 276 --cropOffset 1 1 *.png --out pngs/ - ffmpeg -framerate 25 -pattern_type glob -i '*.png' -c:v prores -pix_fmt yuva444p10le dancing-flower.mov - ffmpeg -framerate 25 -f image2 -pattern_type glob -i '*.png' -c:v libvpx-vp9 -pix_fmt yuva420p dancing-flowers.webm - */ - let proximityDistance = 150; const proximitySet = new Set(); const recordPlayerGeometry = document.querySelector('folk-shape:has(record-player)'); diff --git a/demo/semantic-zoom-in-a-canvas.html b/demo/semantic-zoom-in-a-canvas.html index 57a2e79..7bd9e78 100644 --- a/demo/semantic-zoom-in-a-canvas.html +++ b/demo/semantic-zoom-in-a-canvas.html @@ -153,9 +153,6 @@ import { FolkShape } from '../src/folk-shape.ts'; import { FolkConnection } from '../src/folk-connection.ts'; - FolkShape.define(); - FolkConnection.define(); - 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}`)); diff --git a/demo/shape-collision-detection.html b/demo/shape-collision-detection.html index 15f9e94..90aa90c 100644 --- a/demo/shape-collision-detection.html +++ b/demo/shape-collision-detection.html @@ -32,8 +32,6 @@ import { FolkShape } from '../src/folk-shape.ts'; import { collisionDetection } from '../src/common/collision.ts'; - FolkShape.define(); - const geometryElements = document.querySelectorAll('folk-shape'); function handleCollision(e) { diff --git a/demo/shapes-in-a-canvas.html b/demo/shapes-in-a-canvas.html index ede528a..4f15f56 100644 --- a/demo/shapes-in-a-canvas.html +++ b/demo/shapes-in-a-canvas.html @@ -27,8 +27,6 @@ diff --git a/demo/space-morph.html b/demo/space-morph.html index 1a5b3b5..74359dc 100644 --- a/demo/space-morph.html +++ b/demo/space-morph.html @@ -46,9 +46,6 @@ import { FolkSpace } from '../src/folk-space.ts'; import { FolkShape } from '../src/folk-shape.ts'; - FolkSpace.define(); - FolkShape.define(); - const space = document.getElementById('space'); document.addEventListener('keydown', (event) => { if (event.key === 'Enter') { diff --git a/demo/spreadsheet-graph-projection.html b/demo/spreadsheet-graph-projection.html index bd1bf35..49fb466 100644 --- a/demo/spreadsheet-graph-projection.html +++ b/demo/spreadsheet-graph-projection.html @@ -170,10 +170,6 @@ import { FolkConnection } from '../src/folk-connection.ts'; import { FolkSpreadsheet } from '../src/folk-spreadsheet.ts'; - FolkShape.define(); - FolkConnection.define(); - FolkSpreadsheet.define(); - let isProjected = false; const button = document.querySelector('button'); diff --git a/demo/spreadsheet-map-propagator.html b/demo/spreadsheet-map-propagator.html index 41e8d3e..af90715 100644 --- a/demo/spreadsheet-map-propagator.html +++ b/demo/spreadsheet-map-propagator.html @@ -171,11 +171,6 @@ import { FolkEventPropagator } from '../src/folk-event-propagator.ts'; import { FolkSpreadsheet } from '../src/folk-spreadsheet.ts'; - FolkMap.define(); - FolkShape.define(); - FolkSpreadsheet.define(); - FolkEventPropagator.define(); - window.round = (number, digits = 0) => { const base = Number('1'.padEnd(digits + 1, '0')); return Math.round(number * base) / base; diff --git a/demo/sticky-html-arrow-between-iframes.html b/demo/sticky-html-arrow-between-iframes.html index 9100c07..305f232 100644 --- a/demo/sticky-html-arrow-between-iframes.html +++ b/demo/sticky-html-arrow-between-iframes.html @@ -46,9 +46,6 @@ diff --git a/demo/sticky-html-arrow.html b/demo/sticky-html-arrow.html index 6d7cb43..3314604 100644 --- a/demo/sticky-html-arrow.html +++ b/demo/sticky-html-arrow.html @@ -37,9 +37,6 @@ import { FolkShape } from '../src/folk-shape.ts'; import { FolkConnection } from '../src/folk-connection.ts'; import '../src/common/iframe-script.ts'; - - FolkShape.define(); - FolkConnection.define(); diff --git a/demo/sticky-html-rope.html b/demo/sticky-html-rope.html index fbe32e2..c20eb46 100644 --- a/demo/sticky-html-rope.html +++ b/demo/sticky-html-rope.html @@ -40,9 +40,6 @@ diff --git a/demo/visualizing-set-relations.html b/demo/visualizing-set-relations.html index f5df871..5cb5ff9 100644 --- a/demo/visualizing-set-relations.html +++ b/demo/visualizing-set-relations.html @@ -38,9 +38,6 @@ diff --git a/demo/xanadu-link.html b/demo/xanadu-link.html index 527a9d2..942c90a 100644 --- a/demo/xanadu-link.html +++ b/demo/xanadu-link.html @@ -203,70 +203,6 @@ diff --git a/src/distance-field.ts b/src/distance-field.ts index f566bec..9ca7191 100644 --- a/src/distance-field.ts +++ b/src/distance-field.ts @@ -568,3 +568,7 @@ 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) }`; + +if (!customElements.get('distance-field')) { + DistanceField.define(); +} diff --git a/src/folk-connection.ts b/src/folk-connection.ts index f896cb4..f026c1a 100644 --- a/src/folk-connection.ts +++ b/src/folk-connection.ts @@ -85,3 +85,7 @@ export class FolkConnection extends AbstractArrow { this.style.backgroundColor = 'black'; } } + +if (!customElements.get('folk-connection')) { + FolkConnection.define(); +} diff --git a/src/folk-event-propagator.ts b/src/folk-event-propagator.ts index 54b9f93..645310f 100644 --- a/src/folk-event-propagator.ts +++ b/src/folk-event-propagator.ts @@ -237,3 +237,7 @@ function parseAst(functionBody: string) { console.log('Properties accessed on to:', Array.from(toProps)); console.log('Properties accessed on from:', Array.from(fromProps)); } + +if (!customElements.get('folk-event-propagator')) { + FolkEventPropagator.define(); +} diff --git a/src/folk-hull.ts b/src/folk-hull.ts index 6f27bd1..113d8da 100644 --- a/src/folk-hull.ts +++ b/src/folk-hull.ts @@ -110,3 +110,7 @@ export function makeHull(rects: DOMRectReadOnly[]): Point[] { return upperHull.concat(lowerHull); } + +if (!customElements.get('folk-hull')) { + FolkHull.define(); +} diff --git a/src/folk-ink.ts b/src/folk-ink.ts index d3ab28c..fc9439f 100644 --- a/src/folk-ink.ts +++ b/src/folk-ink.ts @@ -211,3 +211,7 @@ export class FolkInk extends HTMLElement { return d.join(' '); } } + +if (!customElements.get('folk-ink')) { + FolkInk.define(); +} diff --git a/src/folk-llm.ts b/src/folk-llm.ts index 1dd48b7..996ffd0 100644 --- a/src/folk-llm.ts +++ b/src/folk-llm.ts @@ -102,3 +102,7 @@ declare global { ai: any; } } + +if (!customElements.get('folk-llm')) { + FolkLLM.define(); +} diff --git a/src/folk-map.ts b/src/folk-map.ts index 77baf55..70f2155 100644 --- a/src/folk-map.ts +++ b/src/folk-map.ts @@ -94,3 +94,7 @@ export class FolkMap extends HTMLElement { } }; } + +if (!customElements.get('folk-map')) { + FolkMap.define(); +} diff --git a/src/folk-metronome.ts b/src/folk-metronome.ts index 9b72199..5b07161 100644 --- a/src/folk-metronome.ts +++ b/src/folk-metronome.ts @@ -69,3 +69,7 @@ export class FolkMetronome extends HTMLElement { this.textContent = this.#beat.toString(); }; } + +if (!customElements.get('folk-metronome')) { + FolkMetronome.define(); +} diff --git a/src/folk-proximity.ts b/src/folk-proximity.ts index 6870dcc..0e50788 100644 --- a/src/folk-proximity.ts +++ b/src/folk-proximity.ts @@ -192,3 +192,7 @@ export class FolkProximity extends HTMLElement { return null; } } + +if (!customElements.get('folk-proximity')) { + FolkProximity.define(); +} diff --git a/src/folk-rope.ts b/src/folk-rope.ts index 611efc0..978540e 100644 --- a/src/folk-rope.ts +++ b/src/folk-rope.ts @@ -257,3 +257,7 @@ function applyConstraint(p1: RopePoint, p2: RopePoint) { p2.pos = Vector.sub(p2.pos, adjustment); } } + +if (!customElements.get('folk-rope')) { + FolkRope.define(); +} diff --git a/src/folk-set.ts b/src/folk-set.ts index 4801b56..e2d6832 100644 --- a/src/folk-set.ts +++ b/src/folk-set.ts @@ -78,3 +78,7 @@ export class FolkSet extends HTMLElement { update() {} } + +if (!customElements.get('folk-set')) { + FolkSet.define(); +} diff --git a/src/folk-shape.ts b/src/folk-shape.ts index 527e783..63104c1 100644 --- a/src/folk-shape.ts +++ b/src/folk-shape.ts @@ -591,3 +591,7 @@ export class FolkShape extends HTMLElement { this.#dispatchTransformEvent(new Set(['width', 'height'])); }; } + +if (!customElements.get('folk-shape')) { + FolkShape.define(); +} diff --git a/src/folk-space.ts b/src/folk-space.ts index 3d399dc..68320de 100644 --- a/src/folk-space.ts +++ b/src/folk-space.ts @@ -70,3 +70,7 @@ export class FolkSpace extends HTMLElement { space?.classList.toggle('rotate'); } } + +if (!customElements.get('folk-space')) { + FolkSpace.define(); +} diff --git a/src/folk-spreadsheet.ts b/src/folk-spreadsheet.ts index f81199f..de46116 100644 --- a/src/folk-spreadsheet.ts +++ b/src/folk-spreadsheet.ts @@ -513,3 +513,7 @@ export class FolkSpreadSheetCell extends HTMLElement { } } } + +if (!customElements.get('folk-cell')) { + FolkSpreadSheetCell.define(); +} diff --git a/src/folk-timer.ts b/src/folk-timer.ts index c97cb2f..e63c8c1 100644 --- a/src/folk-timer.ts +++ b/src/folk-timer.ts @@ -39,3 +39,7 @@ export class FolkTimer extends HTMLElement { this.textContent = (time / 1000).toFixed(1); }; } + +if (!customElements.get('folk-timer')) { + FolkTimer.define(); +} diff --git a/src/folk-toolbar.ts b/src/folk-toolbar.ts index 2d61bfb..4cd225c 100644 --- a/src/folk-toolbar.ts +++ b/src/folk-toolbar.ts @@ -128,3 +128,7 @@ export class FolkToolbar extends HTMLElement { return element.id; } } + +if (!customElements.get('folk-toolbar')) { + FolkToolbar.define(); +} diff --git a/src/folk-weather.ts b/src/folk-weather.ts index 1377e0d..1a94fdd 100644 --- a/src/folk-weather.ts +++ b/src/folk-weather.ts @@ -68,3 +68,7 @@ export class FolkWeather extends HTMLElement { `; } } + +if (!customElements.get('folk-weather')) { + FolkWeather.define(); +} diff --git a/src/folk-xanadu.ts b/src/folk-xanadu.ts index df063e6..c3b2221 100644 --- a/src/folk-xanadu.ts +++ b/src/folk-xanadu.ts @@ -100,3 +100,7 @@ function computeInlineVertices(rects: DOMRect[]): Point[] { return vertices; } + +if (!customElements.get('folk-xanadu')) { + FolkXanadu.define(); +}