After several days, suddenly this foundation of my project breaks and I have absolutely no idea why. If someone has any insight as to what’s going on here, I would love to know.
I am saving data for line segments to localStorage, using the following code to pull it from storage and pass it to the load method to display it on a canvas.
const graphString = localStorage.getItem('graph');
const graphInfo = graphString ? JSON.parse(graphString) : null;
const graph = graphInfo ? Graph.load(graphInfo) : new Graph();
then in graph.js, perform the logic to handle the serialization and reintroduce contextual relationships between the points and line segments.
class Graph {
constructor(points = [], segments = []) {
this.points = points;
this.segments = segments;
}
static load(info) {
const points = info.points.map((i) => new Point(i.x, i.y));
console.log('Points:', points);
const segments = info.segments.map((i) => {
const p1 = points.find((p) => p.equals(i.p1));
const p2 = points.find((p) => p.equals(i.p2));
console.log('i.p1:', i.p1, 'Found p1:', p1);
console.log('i.p2:', i.p2, 'Found p2:', p2);
return new Segment(p1, p2);
});
console.log('Segments:', segments);
return new Graph(points, segments);
}
...snip...
equals(point) {
return this.x === point.x && this.y === point.y;
}
the data from localStorage, passed as parameter “info”
Points: (2) [Point, Point]
0: Point {x: 203, y: 413}
1: Point {x: 199, y: 202}
this is the output from the console logs
i.p1: {x: 316, y: 414} Found p1: undefined
i.p2: {x: 203, y: 413} Found p2: Point {x: 203, y: 413}
i.p1: {x: 203, y: 413} Found p1: Point {x: 203, y: 413}
i.p2: {x: 199, y: 202} Found p2: Point {x: 199, y: 202}
Segments:(2) [Segment, Segment]
0: Segment {p1: undefined, p2: Point}
1: Segment {p1: Point, p2: Point}
Does anyone have some insight as to why this happening?
I am a bit beside myself why this suddenly breaks after several days with no explanation.
Currently I am exploring other options to access the data without using find().