rename distance field, fix sdf demo

folk-systems · Dec 4, 2024 · 8e1a8a7 · 8e1a8a7
1 parent e8d4303
commit 8e1a8a7
Show file tree

Hide file tree

Showing 7 changed files with 19 additions and 23 deletions.
diff --git 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;
       }
     </style>
   </head>
   <body>
-    <distance-field></distance-field>
     <script type="module">
-      import '../src/standalone/distance-field.ts';
-      import '../src/standalone/folk-shape.ts';
-
-      const d = document.querySelector('distance-field');
+      import '../src/standalone/folk-distance-field.ts';
 
+      const d = document.createElement('folk-distance-field');
       const geometries = [];
 
       const now = performance.now();
@@ -43,11 +40,11 @@
           geo.y = 100 * j + Math.floor(Math.random() * 45);
           geo.width = geo.height = 45;
           geometries.push(geo);
-          d.append(geo);
+          d.appendChild(geo);
         }
       }
       console.log(performance.now() - now);
-
+      document.body.appendChild(d);
       // function tick() {
       //   window.requestAnimationFrame(tick);
 

diff --git a/demo/distance-field-visualization.html b/demo/distance-field-visualization.html
@@ -24,26 +24,26 @@
         border: 2px solid rgba(0, 0, 0, 0.5);
       }
 
-      distance-field {
+      folk-distance-field {
         position: absolute;
         inset: 0;
       }
     </style>
   </head>
   <body>
-    <distance-field>
+    <folk-distance-field>
       <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>
+    </folk-distance-field>
 
     <script type="module">
       import '../src/standalone/folk-shape.ts';
-      import '../src/standalone/distance-field.ts';
+      import '../src/standalone/folk-distance-field.ts';
     </script>
   </body>
 </html>
diff --git a/demo/propagator-toolbar.html b/demo/propagator-toolbar.html
@@ -24,28 +24,28 @@
         border: 2px solid rgba(0, 0, 0, 0.5);
       }
 
-      distance-field {
+      folk-distance-field {
         position: absolute;
         inset: 0;
       }
     </style>
   </head>
   <body>
-    <distance-field>
+    <folk-distance-field>
       <folk-shape id="box1" x="100" y="100" width="50" height="50"></folk-shape>
       <folk-shape id="box2" x="100" y="200" width="50" height="50"></folk-shape>
       <folk-shape id="box3" x="100" y="300" width="50" height="50"></folk-shape>
       <folk-shape id="box4" x="300" y="150" width="80" height="40"></folk-shape>
       <folk-shape id="box5" x="400" y="250" width="60" height="90"></folk-shape>
       <folk-shape id="box6" x="200" y="400" width="100" height="100"></folk-shape>
       <folk-shape id="box7" x="500" y="100" width="30" height="70"></folk-shape>
-    </distance-field>
+    </folk-distance-field>
 
     <folk-toolbar></folk-toolbar>
 
     <script type="module">
       import '../src/standalone/folk-shape.ts';
-      import '../src/standalone/distance-field.ts';
+      import '../src/standalone/folk-distance-field.ts';
       import '../src/standalone/folk-toolbar.ts';
     </script>
   </body>

diff --git a/src/distance-field.ts → src/folk-distance-field.ts b/src/distance-field.ts → 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
@@ -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
diff --git a/src/standalone/folk-distance-field.ts b/src/standalone/folk-distance-field.ts
@@ -0,0 +1,3 @@
+import { FolkDistanceField } from '../folk-distance-field';
+
+FolkDistanceField.define();
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { FolkDistanceField } from '../folk-distance-field';

		FolkDistanceField.define();