JSON data and find returns undefined?

[m_hutley]

@ifaus87

    equals(segment) {
        return this.includes(segment.p1) && this.includes(segment.p2);
    }

    includes(point) {
        return this.p1.equals(point) || this.p2.equals(point);
    }

fyi, this is redundant coding, unless your assertion is that p1 and p2 are interchangeable? (They shouldnt be, if you’re drawing a polygon by going from point to point in a path)

@ifaus87

A polygon is created using the segment as a skeleton.

@ifaus87

        this.poly.draw(ctx);
        this.poly.drawSegments(ctx);

Why are we drawing the polygon by walking its points (draw) and then drawing the polygon again, by walking its segments (drawSegments)?

I still dont see a direct stack flow line that goes to the equals function…

[ifaus87]

I’m not entirely sure why the author of the video decided to approach it that way. I’m following along and copying the code. I thought it was an interesting project.

I have a pretty solid idea of what the code is doing, but I don’t necessarily know how to fix it if something doesn’t work as expected. Say like earlier when my data in localStorage was mismatched with what I was seeing drawn on the canvas.

As far as trying to follow the stack of calls. I’m still trying to figure that out while I handle some real life things (christmas eve and all ).

I’m currently rewatching a previous section of video to see, perhaps, if I can determine which of the calls is throwing the error and why.

I’m not asking for anyone to simply provide the solution, since that’s not how to learn. The problem solving is part of the process.

[m_hutley]

@ifaus87

I’m not asking for anyone to simply provide the solution, since that’s not how to learn. The problem solving is part of the process.

Absolutely agree. But now you’ve put the puzzle in front of everyone’s faces, we all want to figure it out

[ifaus87]

So this is what I’m following… I can select a point that already exists and show intent to place a new Segment. This action completes, however the p2 does not render indicating an issue with how this is handled.

If I select that same point on the initial segment and attempt to draw a new Segment again, an error is thrown this time for – this.p2.equals is not a function

#handleMouseDown

if (event.button == 0) { // left-click
  if (this.hovered) {
    this.#select(this.hovered);
    this.dragging = true;
    return;
  }
  this.graph.addPoint(this.mouse);
  this.#select(this.mouse); //
  this.hovered = this.mouse; //
}

If I comment out the two lines indicated by // then no Point or Segments are drawn, as expected… but also no errors either.

My thought was that the error has to come from this section of code as it initializes and finalizes the segments.

#select(point) {
  console.log(point instanceof Point)
  if (this.selected instanceof Point) {
    this.graph.tryAddSegment(new Segment(this.selected, point));
  }
  this.selected = point;
}

So I move on to the next portion… this accurately determines if the mouse location has a point at that spot… however, no Point is drawn.

tryAddPoint(point) {
  if (!this.containsPoint(point)) {
    this.addPoint(point);
    return true;
  }
  return false;
}

So I continue to the next portion of the call… at this time all I’ve been able to figure out is that the parameter “point” is an object, whose construct.name is string.

addPoint(point) {
  if (point instanceof Point) {
    this.points.push(point);
  } else {
    // console.error('Invalid object attempted to be added as a point:', point);
  }
}

So … how do I ensure that each point is in fact an instance of Point, so as to clear the safeguard in addPoint?

Segment: equals: segment =>  
Segment {p1: Point, p2: {…}}
p1: Point {x: 300, y: 200}
p2: {x: 425, y: 197}

[ifaus87]

With the following change

#select(point) {
  if (this.selected instanceof Point) {
  console.log(`#select:\n -> this.selected: ${this.selected.x},${this.selected.y}\npoint: -> ${point.x},${point.y}`)

  this.graph.tryAddSegment(new Segment(this.selected, new Point(point.x, point.y) ));
  }
  this.selected = point;
}

This correctly shows that the segment is
0: Point
1: Point

but still fails the safeguard in addPoint ?

[ifaus87]

I was a bit premature in my last post…

I have resolved the error and bypassed the safeguard without throwing any errors.

#handleMouseDown(event) {
...
  this.graph.addPoint(new Point(this.mouse.x, this.mouse.y));
  this.#select(new Point(this.mouse.x, this.mouse.y));
  this.hovered = this.mouse;
  }
}

I had to pass both of these parameters as new Point to maintain their respective behaviors and maintain the instanceof to continue with the rest of the code.

Thank you very kindly for your assistance, m_hutley.

I appreciate the nudge in the right direction