From 583c4af0b471735be557b202b1efb3a15e5e18cc Mon Sep 17 00:00:00 2001
From: Orion Reed <orionreedt@gmail.com>
Date: Fri, 20 Dec 2024 12:23:36 -0500
Subject: [PATCH] debug pointer

---
 labs/folk-transformed-space.ts      | 17 +++++++++++++++
 website/canvas/space-morph.html     | 34 ++++++++++++++++++++---------
 website/canvas/space-transform.html | 32 +++++++++++++++++++++++++++
 3 files changed, 73 insertions(+), 10 deletions(-)

diff --git a/labs/folk-transformed-space.ts b/labs/folk-transformed-space.ts
index c65c729..267c0fa 100644
--- a/labs/folk-transformed-space.ts
+++ b/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;
+  }
 }
diff --git a/website/canvas/space-morph.html b/website/canvas/space-morph.html
index 773e80c..ff5ecc2 100644
--- a/website/canvas/space-morph.html
+++ b/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() {
diff --git a/website/canvas/space-transform.html b/website/canvas/space-transform.html
index 646ced5..26cb866 100644
--- a/website/canvas/space-transform.html
+++ b/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;