'pointerdown' event listener triggered for multiple Actors

[Zoobdude]

I'm very new to JS/TS and I'm sure this will be a very simple fix, I just can't seem to work it out.

I am trying to draw a shape out of lines and I need to be able to capture when any of the lines in the shape are clicked.

I intend to create multiple instances of this class to draw each line of the shape.

When I click line0 it however seems to trigger events for both line0 and line1

But line1 only triggers line1

import { Actor, Engine, Color, vec, Line, Vector } from 'excalibur';

class LineOfShape extends Actor {
  name: string;
  start: Vector;
  end: Vector;

  constructor(start: Vector, end: Vector, name: string) {
    super({
      pos: vec(100, 100),
    });

    this.name = name;
    this.start = start;
    this.end = end;

  }

  onInitialize(engine: Engine): void {
    this.graphics.anchor = Vector.Zero;
    this.graphics.use(
      new Line({
        start: this.start,
        end: this.end,
        color: Color.Cyan,
        thickness: 10
      })
    )

    this.events.on('pointerdown', (evt) => {
      console.log(this.name + ' clicked');
    })
  }
}

const game = new Engine({
  width: 600,
  height: 400
});

const plots = [
  [[0, 0], [200, 200]],
  [[200, 200], [400, 200]],
]

for (let i = 0; i < plots.length; i++) {
  const plot = plots[i];
  const linee = new LineOfShape(vec(plot[0][0], plot[0][1]), vec(plot[1][0], plot[1][1]), 'line' + i);
  game.add(linee);
}

game.start();

[eonarheim]

@Zoobdude This is a good question!

I think what's happening is the built in pointer system is using the bounds of the line, not the pixels of the line to determine whether to send the pointerdown event to the actor. By default in the latest excalibur both the collision geometry and the graphics AABB will but used for clicks.

I think there are 2 options in the current state:

1. Add some collider that would represent the clickable area of the line, and toggle off actor.pointer.useGraphicsBounds = false. This might be the easiest?

2. Use the current setup but do some additional processing. Because you will a bounding box around the graphic, youhave false positives but no false negatives on line click, so what you could do is further processing on the event to determine how close the point is to the line and if the click and the distance to the line is less than a certain threshold perform your logic. (By pure chance I've been doing this math lately for another feature!) I've been referencing this video https://www.youtube.com/watch?v=egmZJU-1zPU&t=198s

[eonarheim]

Another idea that popped into my head is a variant of 2, use a global pointer handler on scene or engine, and test against a list of lines in your game and call the right logic on those actors.

Option 1 is still probably the easiest, wrap a polygon around your line with some padding (recommend a clickable area at least 40px wide if you're doing touch)

[Zoobdude]

Thanks for your speedy reply! I've decided it might be easier to just add a little 'handle' for the user to click on-top of the line rather than make the entire line clickable. But I still really appreciate your response and suggestions, I think I may still have to make my own clickable area for some other Actors.