dragging logic

Author: towerofnix

src/Project.ts

@@ -24,6 +24,13 @@ export default class Project {
   public answer: string | null;
   private timerStart!: Date;
 
+  public draggingSprite: Sprite | null;
+  public dragThreshold: number;
+  private _consideringDraggingSprite: Sprite | null;
+  private _dragOffsetX: number;
+  private _dragOffsetY: number;
+  private _idleDragTimeout: number | null;
+
   /**
    * Used to keep track of what edge-activated trigger predicates evaluted to
    * on the previous step.
@@ -56,6 +63,14 @@ export default class Project {
     this.restartTimer();
 
     this.answer = null;
+    this.draggingSprite = null;
+    this._consideringDraggingSprite = null;
+    this._dragOffsetX = 0;
+    this._dragOffsetY = 0;
+    this._idleDragTimeout = null;
+
+    // TODO: Enable customizing, like frameRate
+    this.dragThreshold = 3;
 
     // Run project code at specified framerate
     setInterval(() => {
@@ -68,6 +83,7 @@ export default class Project {
 
   public attach(renderTarget: string | HTMLElement): void {
     this.renderer.setRenderTarget(renderTarget);
+
     this.renderer.stage.addEventListener("click", () => {
       // Chrome requires a user gesture on the page before we can start the
       // audio context.
@@ -76,24 +92,56 @@ export default class Project {
       if (Sound.audioContext.state === "suspended") {
         void Sound.audioContext.resume();
       }
+    });
 
-      let clickedSprite = this.renderer.pick(this.spritesAndClones, {
-        x: this.input.mouse.x,
-        y: this.input.mouse.y,
-      });
-      if (!clickedSprite) {
-        clickedSprite = this.stage;
+    this.renderer.stage.addEventListener("mousedown", () => {
+      const spriteUnderMouse = this._spriteUnderMouse;
+      const targetUnderMouse = this._targetUnderMouse;
+      if (spriteUnderMouse && spriteUnderMouse.draggable) {
+        this._consideringDraggingSprite = spriteUnderMouse;
+        this._startIdleDragTimeout();
+      } else {
+        this._startClickTriggersFor(targetUnderMouse);
       }
+    });
+
+    this.renderer.stage.addEventListener("mousemove", () => {
+      // TODO: Effects - goto() and moveAhead() - are applied immediately.
+      // Do we want to buffer them to apply at the start of the next tick?
+      if (this.input.mouse.down) {
+        if (this._consideringDraggingSprite && this.input.mouse.downAt) {
+          const distanceX = this.input.mouse.x - this.input.mouse.downAt.x;
+          const distanceY = this.input.mouse.y - this.input.mouse.downAt.y;
+          const distanceFromMouseDown = Math.sqrt(
+            distanceX ** 2 + distanceY ** 2
+          );
+          if (distanceFromMouseDown > this.dragThreshold) {
+            this._startDragging();
+          }
+        }
 
-      const matchingTriggers: TriggerWithTarget[] = [];
-      for (const trigger of clickedSprite.triggers) {
-        if (trigger.matches(Trigger.CLICKED, {}, clickedSprite)) {
-          matchingTriggers.push({ trigger, target: clickedSprite });
+        if (this.draggingSprite) {
+          const gotoX = this.input.mouse.x + this._dragOffsetX;
+          const gotoY = this.input.mouse.y + this._dragOffsetY;
+          this.draggingSprite.goto(gotoX, gotoY, true);
         }
       }
+    });
 
-      void this._startTriggers(matchingTriggers);
+    this.renderer.stage.addEventListener("mouseup", () => {
+      if (!this._clearDragging()) {
+        const spriteUnderMouse = this._spriteUnderMouse;
+        if (spriteUnderMouse && spriteUnderMouse.draggable) {
+          this._startClickTriggersFor(spriteUnderMouse);
+        }
+      }
     });
+
+    if (this.renderer.stage.ownerDocument) {
+      this.renderer.stage.ownerDocument.addEventListener("mouseup", () => {
+        void this._clearDragging();
+      });
+    }
   }
 
   public greenFlag(): void {
@@ -155,6 +203,65 @@ export default class Project {
     void this._startTriggers(triggersToStart);
   }
 
+  private _startClickTriggersFor(target: Sprite | Stage): void {
+    const matchingTriggers: TriggerWithTarget[] = [];
+    for (const trigger of target.triggers) {
+      if (trigger.matches(Trigger.CLICKED, {}, target)) {
+        matchingTriggers.push({ trigger, target });
+      }
+    }
+
+    void this._startTriggers(matchingTriggers);
+  }
+
+  private get _spriteUnderMouse(): Sprite | null {
+    return this.renderer.pick(this.spritesAndClones, {
+      x: this.input.mouse.x,
+      y: this.input.mouse.y,
+    });
+  }
+
+  private get _targetUnderMouse(): Sprite | Stage {
+    return this._spriteUnderMouse || this.stage;
+  }
+
+  private _startDragging(): void {
+    if (this._consideringDraggingSprite) {
+      this.draggingSprite = this._consideringDraggingSprite;
+      this._consideringDraggingSprite = null;
+      this._clearIdleDragTimeout();
+
+      this._dragOffsetX = this.draggingSprite.x - this.input.mouse.x;
+      this._dragOffsetY = this.draggingSprite.y - this.input.mouse.y;
+
+      this.draggingSprite.moveAhead();
+    }
+  }
+
+  private _clearDragging(): boolean {
+    const wasDragging = !!this.draggingSprite;
+    this.draggingSprite = null;
+    this._consideringDraggingSprite = null;
+    this._dragOffsetX = 0;
+    this._dragOffsetY = 0;
+    this._clearIdleDragTimeout();
+    return wasDragging;
+  }
+
+  private _startIdleDragTimeout(): void {
+    this._idleDragTimeout = window.setTimeout(
+      this._startDragging.bind(this),
+      400
+    );
+  }
+
+  private _clearIdleDragTimeout(): void {
+    if (typeof this._idleDragTimeout === "number") {
+      clearTimeout(this._idleDragTimeout);
+      this._idleDragTimeout = null;
+    }
+  }
+
   private step(): void {
     this._cachedLoudness = null;
     this._stepEdgeActivatedTriggers();

src/Renderer.ts

@@ -611,6 +611,12 @@ export default class Renderer {
       }
     }
 
+    // Filter out the sprite that is being dragged, if any.
+    // A sprite that is being dragged can detect other sprites, but other sprites can't detect it.
+    if (this.project.draggingSprite) {
+      targets.delete(this.project.draggingSprite);
+    }
+
     const sprBox = Rectangle.copy(
       this.getBoundingBox(spr),
       __collisionBox

src/Sprite.ts

@@ -634,6 +634,10 @@ export class Sprite extends SpriteBase {
     this._project.runningTriggers = this._project.runningTriggers.filter(
       ({ target }) => target !== this
     );
+
+    if (this._project.draggingSprite === this) {
+      this._project.draggingSprite = null;
+    }
   }
 
   public andClones(): this[] {
@@ -648,7 +652,8 @@ export class Sprite extends SpriteBase {
     this._direction = this.normalizeDeg(dir);
   }
 
-  public goto(x: number, y: number): void {
+  public goto(x: number, y: number, fromDrag?: boolean): void {
+    if (this._project.draggingSprite === this && !fromDrag) return;
     if (x === this.x && y === this.y) return;
 
     if (this.penDown) {