diff --git a/demo/chains-of-thought/main.ts b/demo/chains-of-thought/main.ts index 7b5fca1..d435883 100644 --- a/demo/chains-of-thought/main.ts +++ b/demo/chains-of-thought/main.ts @@ -12,6 +12,7 @@ class FolkThought extends HTMLElement { static tagName = 'fc-thought'; static define() { + if (customElements.get(this.tagName)) return; customElements.define(this.tagName, this); } diff --git a/demo/src/geo-wiki.ts b/demo/src/geo-wiki.ts index 639fced..be6c239 100644 --- a/demo/src/geo-wiki.ts +++ b/demo/src/geo-wiki.ts @@ -4,6 +4,7 @@ export class GeoWiki extends HTMLElement { static tagName = 'geo-wiki'; static define() { + if (customElements.get(this.tagName)) return; customElements.define(this.tagName, this); } @@ -62,3 +63,5 @@ export class GeoWiki extends HTMLElement { this.appendChild(list); } } + +GeoWiki.define(); diff --git a/demo/src/record-player.ts b/demo/src/record-player.ts index cbf4123..fe5091d 100644 --- a/demo/src/record-player.ts +++ b/demo/src/record-player.ts @@ -219,6 +219,7 @@ export class RecordPlayer extends HTMLElement { static tagName = 'record-player'; static define() { + if (customElements.get(this.tagName)) return; customElements.define(this.tagName, this); } @@ -384,3 +385,5 @@ function diffStyles(stylesA: Map, stylesB: Map): return changedProperties; } + +RecordPlayer.define(); diff --git a/demo/sticky-html-arrow-between-iframes.html b/demo/sticky-html-arrow-between-iframes.html index 305f232..3b52e9f 100644 --- a/demo/sticky-html-arrow-between-iframes.html +++ b/demo/sticky-html-arrow-between-iframes.html @@ -35,10 +35,10 @@ - + - + diff --git a/src/distance-field.ts b/src/distance-field.ts index 381eb2c..632753c 100644 --- a/src/distance-field.ts +++ b/src/distance-field.ts @@ -30,6 +30,7 @@ export class DistanceField extends HTMLElement { private isPingTexture: boolean = true; static define() { + if (customElements.get(this.tagName)) return; customElements.define(this.tagName, this); } @@ -569,6 +570,4 @@ void main() { outColor = vec4(seedCoord, v_shapeID, 0.0); // Seed coords (x, y), shape ID (z), initial distance (a) }`; -if (!customElements.get('distance-field')) { - DistanceField.define(); -} +DistanceField.define(); diff --git a/src/folk-connection.ts b/src/folk-connection.ts index f026c1a..99499c0 100644 --- a/src/folk-connection.ts +++ b/src/folk-connection.ts @@ -86,6 +86,4 @@ export class FolkConnection extends AbstractArrow { } } -if (!customElements.get('folk-connection')) { - FolkConnection.define(); -} +FolkConnection.define(); diff --git a/src/folk-event-propagator.ts b/src/folk-event-propagator.ts index ccd6f86..6fa00f0 100644 --- a/src/folk-event-propagator.ts +++ b/src/folk-event-propagator.ts @@ -245,6 +245,4 @@ function parseAst(functionBody: string) { console.log('Properties accessed on from:', Array.from(fromProps)); } -if (!customElements.get('folk-event-propagator')) { - FolkEventPropagator.define(); -} +FolkEventPropagator.define(); diff --git a/src/folk-hull.ts b/src/folk-hull.ts index 113d8da..4ca3ed1 100644 --- a/src/folk-hull.ts +++ b/src/folk-hull.ts @@ -111,6 +111,4 @@ export function makeHull(rects: DOMRectReadOnly[]): Point[] { return upperHull.concat(lowerHull); } -if (!customElements.get('folk-hull')) { - FolkHull.define(); -} +FolkHull.define(); diff --git a/src/folk-ink.ts b/src/folk-ink.ts index fc9439f..6b995ae 100644 --- a/src/folk-ink.ts +++ b/src/folk-ink.ts @@ -212,6 +212,4 @@ export class FolkInk extends HTMLElement { } } -if (!customElements.get('folk-ink')) { - FolkInk.define(); -} +FolkInk.define(); diff --git a/src/folk-llm.ts b/src/folk-llm.ts index 996ffd0..079a821 100644 --- a/src/folk-llm.ts +++ b/src/folk-llm.ts @@ -15,6 +15,7 @@ export class FolkLLM extends HTMLElement { static tagName = 'folk-llm'; static define() { + if (customElements.get(this.tagName)) return; customElements.define(this.tagName, this); } @@ -103,6 +104,4 @@ declare global { } } -if (!customElements.get('folk-llm')) { - FolkLLM.define(); -} +FolkLLM.define(); diff --git a/src/folk-map.ts b/src/folk-map.ts index 70f2155..9beb32c 100644 --- a/src/folk-map.ts +++ b/src/folk-map.ts @@ -25,6 +25,7 @@ export class FolkMap extends HTMLElement { static tagName = 'folk-map'; static define() { + if (customElements.get(this.tagName)) return; customElements.define(this.tagName, this); } @@ -95,6 +96,4 @@ export class FolkMap extends HTMLElement { }; } -if (!customElements.get('folk-map')) { - FolkMap.define(); -} +FolkMap.define(); diff --git a/src/folk-metronome.ts b/src/folk-metronome.ts index 5b07161..710baa9 100644 --- a/src/folk-metronome.ts +++ b/src/folk-metronome.ts @@ -8,6 +8,7 @@ export class FolkMetronome extends HTMLElement { static tagName = 'folk-metronome'; static define() { + if (customElements.get(this.tagName)) return; customElements.define(this.tagName, this); } @@ -70,6 +71,4 @@ export class FolkMetronome extends HTMLElement { }; } -if (!customElements.get('folk-metronome')) { - FolkMetronome.define(); -} +FolkMetronome.define(); diff --git a/src/folk-proximity.ts b/src/folk-proximity.ts index 0e50788..0d5197e 100644 --- a/src/folk-proximity.ts +++ b/src/folk-proximity.ts @@ -132,6 +132,7 @@ export class FolkProximity extends HTMLElement { static tagName = 'folk-proximity'; static define() { + if (customElements.get(this.tagName)) return; customElements.define(this.tagName, this); } @@ -193,6 +194,5 @@ export class FolkProximity extends HTMLElement { } } -if (!customElements.get('folk-proximity')) { - FolkProximity.define(); -} +FolkCluster.define(); +FolkProximity.define(); diff --git a/src/folk-rope.ts b/src/folk-rope.ts index 978540e..e28baf4 100644 --- a/src/folk-rope.ts +++ b/src/folk-rope.ts @@ -258,6 +258,4 @@ function applyConstraint(p1: RopePoint, p2: RopePoint) { } } -if (!customElements.get('folk-rope')) { - FolkRope.define(); -} +FolkRope.define(); diff --git a/src/folk-set.ts b/src/folk-set.ts index e2d6832..68b7c8d 100644 --- a/src/folk-set.ts +++ b/src/folk-set.ts @@ -14,6 +14,7 @@ export class FolkSet extends HTMLElement { static tagName = 'folk-set'; static define() { + if (customElements.get(this.tagName)) return; customElements.define(this.tagName, this); } @@ -79,6 +80,4 @@ export class FolkSet extends HTMLElement { update() {} } -if (!customElements.get('folk-set')) { - FolkSet.define(); -} +FolkSet.define(); diff --git a/src/folk-shape.ts b/src/folk-shape.ts index d7f8789..d60a29b 100644 --- a/src/folk-shape.ts +++ b/src/folk-shape.ts @@ -91,7 +91,7 @@ styles.replaceSync(css` div { height: 100%; width: 100%; - overflow: hidden; + overflow: scroll; pointer-events: none; } @@ -221,6 +221,7 @@ export class FolkShape extends HTMLElement { static tagName = 'folk-shape'; static define() { + if (customElements.get(this.tagName)) return; customElements.define(this.tagName, this); } @@ -326,7 +327,6 @@ export class FolkShape extends HTMLElement { super(); this.addEventListener('pointerdown', this); - this.setAttribute('tabindex', '0'); this.#shadow.adoptedStyleSheets = [styles, this.#dynamicStyles]; // Ideally we would creating these lazily on first focus, but the resize handlers need to be around for delegate focus to work. @@ -348,6 +348,7 @@ export class FolkShape extends HTMLElement { #isConnected = false; connectedCallback() { + this.setAttribute('tabindex', '0'); this.#isConnected = true; this.#update(new Set(['type', 'x', 'y', 'height', 'width', 'rotation'])); } @@ -684,6 +685,4 @@ export class FolkShape extends HTMLElement { } } -if (!customElements.get('folk-shape')) { - FolkShape.define(); -} +FolkShape.define(); diff --git a/src/folk-space.ts b/src/folk-space.ts index 68320de..f70e31b 100644 --- a/src/folk-space.ts +++ b/src/folk-space.ts @@ -10,6 +10,7 @@ export class FolkSpace extends HTMLElement { static tagName = 'folk-space'; static define() { + if (customElements.get(this.tagName)) return; customElements.define(this.tagName, this); } @@ -71,6 +72,4 @@ export class FolkSpace extends HTMLElement { } } -if (!customElements.get('folk-space')) { - FolkSpace.define(); -} +FolkSpace.define(); diff --git a/src/folk-spreadsheet.ts b/src/folk-spreadsheet.ts index de46116..49cc40a 100644 --- a/src/folk-spreadsheet.ts +++ b/src/folk-spreadsheet.ts @@ -153,6 +153,7 @@ export class FolkSpreadsheet extends HTMLElement { static tagName = 'folk-spreadsheet'; static define() { + if (customElements.get(this.tagName)) return; FolkSpreadSheetCell.define(); FolkSpreadsheetHeader.define(); customElements.define(this.tagName, this); @@ -349,6 +350,7 @@ export class FolkSpreadsheetHeader extends HTMLElement { static tagName = 's-header'; static define() { + if (customElements.get(this.tagName)) return; customElements.define(this.tagName, this); } @@ -379,6 +381,7 @@ export class FolkSpreadSheetCell extends HTMLElement { static tagName = 'folk-cell'; static define() { + if (customElements.get(this.tagName)) return; customElements.define(this.tagName, this); } @@ -514,6 +517,4 @@ export class FolkSpreadSheetCell extends HTMLElement { } } -if (!customElements.get('folk-cell')) { - FolkSpreadSheetCell.define(); -} +FolkSpreadsheet.define(); diff --git a/src/folk-timer.ts b/src/folk-timer.ts index e63c8c1..3cf74c8 100644 --- a/src/folk-timer.ts +++ b/src/folk-timer.ts @@ -8,6 +8,7 @@ export class FolkTimer extends HTMLElement { static tagName = 'folk-timer'; static define() { + if (customElements.get(this.tagName)) return; customElements.define(this.tagName, this); } @@ -40,6 +41,4 @@ export class FolkTimer extends HTMLElement { }; } -if (!customElements.get('folk-timer')) { - FolkTimer.define(); -} +FolkTimer.define(); diff --git a/src/folk-toolbar.ts b/src/folk-toolbar.ts index 4cd225c..e5faa9b 100644 --- a/src/folk-toolbar.ts +++ b/src/folk-toolbar.ts @@ -33,6 +33,7 @@ export class FolkToolbar extends HTMLElement { static tagName = 'folk-toolbar'; static define() { + if (customElements.get(this.tagName)) return; customElements.define(this.tagName, this); } @@ -113,9 +114,6 @@ export class FolkToolbar extends HTMLElement { 'text/html' ).body.firstElementChild; - if (!customElements.get('folk-event-propagator')) { - FolkEventPropagator.define(); - } if (propagator) { document.body.appendChild(propagator); } @@ -129,6 +127,5 @@ export class FolkToolbar extends HTMLElement { } } -if (!customElements.get('folk-toolbar')) { - FolkToolbar.define(); -} +FolkEventPropagator.define(); +FolkToolbar.define(); diff --git a/src/folk-weather.ts b/src/folk-weather.ts index 1a94fdd..ae3d054 100644 --- a/src/folk-weather.ts +++ b/src/folk-weather.ts @@ -14,6 +14,7 @@ export class FolkWeather extends HTMLElement { static tagName = 'folk-weather'; static define() { + if (customElements.get(this.tagName)) return; customElements.define(this.tagName, this); } @@ -69,6 +70,4 @@ export class FolkWeather extends HTMLElement { } } -if (!customElements.get('folk-weather')) { - FolkWeather.define(); -} +FolkWeather.define(); diff --git a/src/folk-xanadu.ts b/src/folk-xanadu.ts index c3b2221..0944a78 100644 --- a/src/folk-xanadu.ts +++ b/src/folk-xanadu.ts @@ -101,6 +101,4 @@ function computeInlineVertices(rects: DOMRect[]): Point[] { return vertices; } -if (!customElements.get('folk-xanadu')) { - FolkXanadu.define(); -} +FolkXanadu.define();