debug pointer

labs/folk-transformed-space.ts

@@ -135,4 +135,21 @@ export class FolkTransformedSpace extends FolkElement {
       height: rect.height,
     };
   }
+
+  /**
+   * Transforms a rect using an instance of FolkTransformedSpace if it exists in the DOM
+   * @param rect The rectangle to transform
+   * @param element Any element that might be within a FolkTransformedSpace
+   * @returns The transformed rect, or the original rect if no FolkTransformedSpace is found
+   */
+  static transformRect(rect: TransformRect, element: Element): TransformRect {
+    const space = element.closest(this.tagName);
+    if (space instanceof FolkTransformedSpace) {
+      Gizmos.point(rect, { color: 'red', size: 2 });
+      const transformed = space.transformRect(rect);
+      Gizmos.point(transformed, { color: 'blue', layer: 'transformed' });
+      return transformed;
+    }
+    return rect;
+  }
 }

website/canvas/space-morph.html

@@ -60,20 +60,34 @@
       import '@labs/standalone/folk-rope.ts';
 
       const space = document.getElementById('space');
-      const rope = document.getElementById('rope');
-      const source = document.getElementById('source');
-      const target = document.getElementById('target');
+
+      // Create multiple ropes
+      const ropes = Array.from({ length: 10 }, () => {
+        const rope = document.createElement('folk-rope');
+        document.body.appendChild(rope);
+        return rope;
+      });
+
+      // Get all shapes from both front and back
+      const frontShapes = Array.from(document.querySelectorAll('[slot="front"] folk-shape'));
+      const backShapes = Array.from(document.querySelectorAll('[slot="back"] folk-shape'));
 
       function updateRopePoints() {
-        if (!source || !target) return;
+        // Connect shapes in various patterns
+        ropes.forEach((rope, index) => {
+          const sourceShape = frontShapes[index % frontShapes.length];
+          const targetShape = backShapes[index % backShapes.length];
 
-        const sourceRect = space.getElementScreenRect(source);
-        const targetRect = space.getElementScreenRect(target);
+          if (sourceShape && targetShape) {
+            const sourceRect = space.getElementScreenRect(sourceShape);
+            const targetRect = space.getElementScreenRect(targetShape);
 
-        if (sourceRect && targetRect) {
-          rope.sourceRect = sourceRect;
-          rope.targetRect = targetRect;
-        }
+            if (sourceRect && targetRect) {
+              rope.sourceRect = sourceRect;
+              rope.targetRect = targetRect;
+            }
+          }
+        });
       }
 
       function animate() {

website/canvas/space-transform.html

@@ -33,8 +33,40 @@
     <script type="module">
       import '@labs/standalone/folk-transformed-space.ts';
       import '@labs/standalone/folk-shape.ts';
+      import { FolkTransformedSpace } from '@labs/folk-transformed-space';
 
       const space = document.querySelector('folk-transformed-space');
+
+      // Track pointer state
+      let isPointerDown = false;
+      let lastPoint = null;
+
+      document.addEventListener('pointerdown', (event) => {
+        isPointerDown = true;
+        lastPoint = { x: event.clientX, y: event.clientY };
+      });
+
+      document.addEventListener('pointermove', (event) => {
+        if (!isPointerDown || !lastPoint) return;
+
+        const rect = {
+          x: lastPoint.x,
+          y: lastPoint.y,
+          width: 1,
+          height: 1,
+        };
+
+        const transformedRect = FolkTransformedSpace.transformRect(rect, space);
+
+        lastPoint = { x: event.clientX, y: event.clientY };
+      });
+
+      document.addEventListener('pointerup', () => {
+        isPointerDown = false;
+        lastPoint = null;
+      });
+
+      // Keep existing click handler for rotation
       document.addEventListener('click', (event) => {
         if (event.target !== space) return;
         const min = 20;