cut and mend tools

2024-12-15 10:23:13 -08:00 · 2024-12-15 10:23:13 -08:00 · 196d0a11b8
parent 3ec653ab96
commit 196d0a11b8
4 changed files with 211 additions and 13 deletions
--- a/demo/cutting-event-propagators.html
+++ b/demo/cutting-event-propagators.html
@ -0,0 +1,150 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Event Propagator w/ tools</title>
+    <style>
+      html {
+        height: 100%;
+      }
+
+      body {
+        min-height: 100%;
+        position: relative;
+        margin: 0;
+      }
+
+      folk-shape {
+        background-color: black;
+        border-radius: 5px;
+        color: white;
+        padding: 0px 5px;
+        z-index: 10;
+      }
+
+      button {
+        font-size: 1.5rem;
+      }
+    </style>
+  </head>
+  <body>
+    <button id="cut">✂️</button>
+    <button id="mend">🪢</button>
+    <folk-shape id="box1" x="100" y="100" width="30" height="30"></folk-shape>
+    <folk-shape id="box2" x="200" y="350">Hello World</folk-shape>
+    <folk-event-propagator
+      source="#box1"
+      target="#box2"
+      trigger="click"
+      expression="textContent: to.textContent + '!'"
+    ></folk-event-propagator>
+
+    <folk-shape id="box3" x="350" y="200" width="30" height="30"></folk-shape>
+    <folk-shape id="box4" x="500" y="250" width="30" height="30"></folk-shape>
+    <folk-event-propagator
+      source="#box3"
+      target="#box4"
+      trigger="transform"
+      expression="y: from.x, 
+rotation: from.x/10"
+    ></folk-event-propagator>
+
+    <script type="module">
+      import '../src/standalone/folk-shape.ts';
+      import { FolkEventPropagator } from '../src/standalone/folk-event-propagator.ts';
+
+      class CutTool {
+        entry() {
+          document.addEventListener('pointerdown', this, { capture: true });
+        }
+        exit() {
+          document.removeEventListener('pointerdown', this, { capture: true });
+        }
+
+        handleEvent(event) {
+          // Stop the default focus and pointer capture of geometry elements
+          event.preventDefault();
+          event.stopPropagation();
+
+          switch (event.type) {
+            case 'pointerdown': {
+              document.addEventListener('pointermove', this);
+              document.addEventListener('pointerup', this);
+              return;
+            }
+            case 'pointermove': {
+              if (event.target instanceof FolkEventPropagator) {
+                const percent = event.target.getPercentageFromPoint({ x: event.clientX, y: event.clientY });
+                event.target.cut(percent);
+              }
+              return;
+            }
+            case 'pointerup': {
+              document.removeEventListener('pointermove', this);
+              document.removeEventListener('pointerup', this);
+              return;
+            }
+          }
+        }
+      }
+
+      class MendTool {
+        entry() {
+          document.addEventListener('pointerdown', this, { capture: true });
+        }
+        exit() {
+          document.removeEventListener('pointerdown', this, { capture: true });
+        }
+
+        handleEvent(event) {
+          // Stop the default focus and pointer capture of geometry elements
+          event.preventDefault();
+          event.stopPropagation();
+
+          switch (event.type) {
+            case 'pointerdown': {
+              document.addEventListener('pointermove', this, { capture: true });
+              document.addEventListener('pointerup', this, { capture: true });
+              return;
+            }
+            case 'pointermove': {
+              if (event.target instanceof FolkEventPropagator) {
+                event.target.mend();
+              }
+              return;
+            }
+            case 'pointerup': {
+              document.removeEventListener('pointermove', this, { capture: true });
+              document.removeEventListener('pointerup', this, { capture: true });
+              return;
+            }
+          }
+        }
+      }
+
+      const tools = new Map();
+
+      tools.set(window.cut, new CutTool());
+
+      tools.set(window.mend, new MendTool());
+
+      let activeTool = null;
+
+      document.addEventListener('click', (e) => {
+        const tool = tools.get(event.target);
+
+        if (tool === undefined) return;
+
+        activeTool?.exit();
+
+        if (tool === activeTool) {
+          activeTool === null;
+        } else {
+          activeTool = tool;
+          activeTool.entry();
+        }
+      });
+    </script>
+  </body>
+</html>
--- a/src/common/animation-frame-controller.ts
+++ b/src/common/animation-frame-controller.ts
@ -34,9 +34,7 @@ export class AnimationFrameController implements ReactiveController {
  }

  hostUpdated() {
-    window.clearTimeout(this.#timeoutId);
-    this.#timeoutId = window.setTimeout(this.stop, this.#timeoutMs);
-    this.start();
+    this.reset();
  }

  hostDisconnected() {
@ -68,6 +66,12 @@ export class AnimationFrameController implements ReactiveController {
    this.#tick();
  }

+  reset() {
+    window.clearTimeout(this.#timeoutId);
+    this.#timeoutId = window.setTimeout(this.stop, this.#timeoutMs);
+    this.start();
+  }
+
  stop = () => {
    cancelAnimationFrame(this.#tick);
    window.clearTimeout(this.#timeoutId);
--- a/src/folk-event-propagator.ts
+++ b/src/folk-event-propagator.ts
@ -68,7 +68,7 @@ export class FolkEventPropagator extends FolkRope {

    this.#expressionTextarea.addEventListener('focusout', () => {
      if (this.#hasError) {
-        this.cut();
+        super.cut();
      }
    });

@ -113,8 +113,10 @@ export class FolkEventPropagator extends FolkRope {
        this.#hasError = true;
      },
      onParseSuccess: () => {
+        if (this.#hasError) {
+          super.mend();
+        }
        this.#hasError = false;
-        this.mend();
      },
    });
  }
@ -128,4 +130,16 @@ export class FolkEventPropagator extends FolkRope {
      this.#container.style.top = `${point.pos.y}px`;
    }
  }
+
+  override cut(atPercentage?: number): void {
+    super.cut(atPercentage);
+
+    this.#propagator?.dispose();
+  }
+
+  override mend(): void {
+    super.mend();
+
+    this.#initializePropagator();
+  }
 }
--- a/src/folk-rope.ts
+++ b/src/folk-rope.ts
@ -259,18 +259,29 @@ export class FolkRope extends FolkBaseConnection implements AnimationFrameContro
    if (point.prev) applyConstraint(point, point.prev);
  }

-  cut(atPercentage = 0.5) {
-    const index = this.#getPointIndexAt(atPercentage);
+  #cutIndex = -1;

-    this.#points[index].next = null;
-    this.#points[index + 1].prev = null;
+  get isCut() {
+    return this.#cutIndex !== -1;
  }

-  mend(atPercentage = 0.5) {
-    const index = this.#getPointIndexAt(atPercentage);
+  cut(atPercentage = 0.5) {
+    if (this.isCut) return;

-    this.#points[index].next = this.#points[index + 1];
-    this.#points[index + 1].prev = this.#points[index];
+    this.#cutIndex = this.#getPointIndexAt(atPercentage);
+
+    this.#points[this.#cutIndex].next = null;
+    this.#points[this.#cutIndex + 1].prev = null;
+    this.#rAF.reset();
+  }
+
+  mend() {
+    if (!this.isCut) return;
+
+    this.#points[this.#cutIndex].next = this.#points[this.#cutIndex + 1];
+    this.#points[this.#cutIndex + 1].prev = this.#points[this.#cutIndex];
+    this.#cutIndex = -1;
+    this.#rAF.reset();
  }

  getPointAt(percentage: number) {
@ -281,6 +292,25 @@ export class FolkRope extends FolkBaseConnection implements AnimationFrameContro
    const clamped = Math.min(Math.max(percentage, 0), 1);
    return Math.floor(this.#points.length * clamped);
  }
+
+  getPercentageFromPoint(hitPoint: Point): number | null {
+    for (let i = 0; i < this.#points.length - 1; i++) {
+      const point = this.#points[i];
+      const nextPoint = point.next;
+
+      if (nextPoint === null) return null;
+
+      if (
+        Vector.distance(point.pos, hitPoint) +
+          Vector.distance(hitPoint, nextPoint.pos) -
+          Vector.distance(point.pos, nextPoint.pos) <
+        1
+      ) {
+        return i / this.#points.length;
+      }
+    }
+    return null;
+  }
 }

 function applyConstraint(p1: RopePoint, p2: RopePoint) {