diff --git a/demo/[tests] distance-field.html b/demo/[tests] distance-field.html index 9efcaed..41fda8a 100644 --- a/demo/[tests] distance-field.html +++ b/demo/[tests] distance-field.html @@ -19,20 +19,17 @@ border: 2px solid black; } - distance-field { + folk-distance-field { position: absolute; inset: 0; } - diff --git a/demo/propagator-toolbar.html b/demo/propagator-toolbar.html index 339a6db..83c2557 100644 --- a/demo/propagator-toolbar.html +++ b/demo/propagator-toolbar.html @@ -24,14 +24,14 @@ border: 2px solid rgba(0, 0, 0, 0.5); } - distance-field { + folk-distance-field { position: absolute; inset: 0; } - + @@ -39,13 +39,13 @@ - + diff --git a/src/distance-field.ts b/src/folk-distance-field.ts similarity index 99% rename from src/distance-field.ts rename to src/folk-distance-field.ts index 6b31ab9..e811c4d 100644 --- a/src/distance-field.ts +++ b/src/folk-distance-field.ts @@ -7,8 +7,8 @@ import { FolkShape } from './folk-shape.ts'; * It renders shapes as seed points and computes the distance from each pixel to the nearest seed point. * Previous CPU-based implementation: github.com/folk-canvas/folk-canvas/commit/fdd7fb9d84d93ad665875cad25783c232fd17bcc */ -export class DistanceField extends HTMLElement { - static tagName = 'distance-field'; +export class FolkDistanceField extends HTMLElement { + static tagName = 'folk-distance-field'; private textures: WebGLTexture[] = []; @@ -223,7 +223,7 @@ export class DistanceField extends HTMLElement { // Clear the texture with a large initial distance gl.viewport(0, 0, this.canvas.width, this.canvas.height); - gl.clearColor(0.0, 0.0, 0.0, DistanceField.MAX_DISTANCE); + gl.clearColor(0.0, 0.0, 0.0, FolkDistanceField.MAX_DISTANCE); gl.clear(gl.COLOR_BUFFER_BIT); // Use the seed shader program diff --git a/src/folk-shape.ts b/src/folk-shape.ts index d0ff7dc..8e14ac7 100644 --- a/src/folk-shape.ts +++ b/src/folk-shape.ts @@ -328,7 +328,6 @@ export class FolkShape extends HTMLElement { this.addEventListener('pointerdown', this); this.addEventListener('keydown', 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. diff --git a/src/standalone/distance-field.ts b/src/standalone/distance-field.ts deleted file mode 100644 index a4e572b..0000000 --- a/src/standalone/distance-field.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { DistanceField } from '../distance-field'; - -DistanceField.define(); diff --git a/src/standalone/folk-distance-field.ts b/src/standalone/folk-distance-field.ts new file mode 100644 index 0000000..85a6f18 --- /dev/null +++ b/src/standalone/folk-distance-field.ts @@ -0,0 +1,3 @@ +import { FolkDistanceField } from '../folk-distance-field'; + +FolkDistanceField.define();