fix pinch to zoom bug; subdivide triangles when a dot is put added on…

… an edge
edloper · Dec 4, 2024 · 5b4936f · 5b4936f
1 parent 04c7ad8
commit 5b4936f
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 16 deletions.
diff --git a/game.html b/game.html
@@ -39,10 +39,10 @@
     });
   </script>
 
-  <!-- Uncomment this to debug touch input: 
+  <!-- Uncomment this to debug touch input:  -->
   <script src="https://cdn.jsdelivr.net/gh/hammerjs/touchemulator@master/touch-emulator.js"></script>
   <script>TouchEmulator();</script>
-  -->
+  <!---->
 </head>
 <body>
   <img src="images/titles/title2.jpg" class="missingLinkTitle">

diff --git a/javascript/editor.js b/javascript/editor.js
@@ -224,7 +224,7 @@ class LevelEditor {
     }
 
     addTri(corners, color) {
-	const tri = this.graph.addTri(corners, color);
+	const tri = this.graph.addTri(corners, color, /*highlight=*/ false);
 	tri.polygon.on('mousedown', (e) => { this.mouseHandler.mouseDown(e, tri); });
 	this.updateTriColor(tri);
     }
@@ -239,7 +239,29 @@ class LevelEditor {
     }
 
     click(x, y) {
-	this.addDot(x, y);
+	const dot = this.addDot(x, y);
+	this.subdivideTriangles(dot);
+    }
+
+    subdivideTriangles(dot) {
+	const DOT_RADIUS = 7;
+	const originalTris = Array.from(this.graph.tris);
+	console.log("===SUB===");
+	for (const tri of originalTris) {
+	    for (let i = 0; i < 3; i++) {
+		const p1 = tri.corners[i];
+		const p2 = tri.corners[(i+1) % 3];
+		const p3 = tri.corners[(i+2) % 3];
+		if (circleIntersectsLine(dot, DOT_RADIUS, p1, p2)) {
+		    console.log("Subdividing!", p1, p2, p3, dot);
+		    this.addTri([dot, p1, p3], "red");
+		    this.addTri([dot, p2, p3], "green");
+		    this.removeTri(tri);
+		    console.log(this.graph.tris);
+		}
+	    }
+	}
+		    console.log(this.graph.tris);
     }
 
     clickDot(dot) {

diff --git a/javascript/graph.js b/javascript/graph.js
@@ -24,7 +24,7 @@ class Graph {
     }
 
     addTri(corners, color, highlight = false) {
-	var tri = new Tri(this, corners, color, this.alpha);
+	var tri = new Tri(this, corners, color, this.alpha, highlight);
 	this.tris.push(tri);
 	corners.forEach(dot => dot.addTri(tri));
 	return tri;
@@ -442,9 +442,11 @@ class Tri{
     }
 
     destroy() {
-	this.polygon.remove();
-	this.highlightPoly.remove();
-	this.polygon = null;
+	if (this.polygon) {
+	    this.polygon.remove();
+	    this.highlightPoly.remove();
+	    this.polygon = null;
+	}
     }
 }
 

diff --git a/javascript/mouse_handler.js b/javascript/mouse_handler.js
@@ -107,22 +107,23 @@ class MouseHandler {
 	    this.state = null;  // Cancel pinch-to-zoom if >2 touches.
 	    return;
 	}
-	const pinchInfo = this.getPinchInfo(touches);
+	var pinchInfo = this.getPinchInfo(touches);
+	const zoomFactor = pinchInfo.distance / this.lastPinchInfo.distance;
+
 	const dx = pinchInfo.center.x - this.lastPinchInfo.center.x;
 	const dy = pinchInfo.center.y - this.lastPinchInfo.center.y;
-	const zoomFactor = pinchInfo.distance / this.lastPinchInfo.distance;
 	this.moveViewport(dx, dy);
 	this.zoomViewport(pinchInfo.center, zoomFactor);
 	// Need to compute pinch info again after shifting viewport.
 	this.lastPinchInfo = this.getPinchInfo(touches);
     }
 
     getPinchInfo(touches) {
+	const distance = Math.hypot(touches[0].pageX - touches[1].pageX,
+				    touches[0].pageY - touches[1].pageY);
 	const points = [
 	    this.game.draw.point(touches[0].clientX, touches[0].clientY),
 	    this.game.draw.point(touches[1].clientX, touches[1].clientY)];
-	const distance = Math.hypot(touches[0].pageX - touches[1].pageX,
-				    touches[0].pageY - touches[1].pageY);
 	const center = {x: (points[0].x + points[1].x)/2,
 			y: (points[0].y + points[1].y)/2}
 	return {center: center, distance: Math.max(distance, 1)}
@@ -164,7 +165,7 @@ class MouseHandler {
 	    // Drag the canvas.
 	    var dx = (x - this.clickPos.x) / this.zoomLevel;
 	    var dy = (y - this.clickPos.y) / this.zoomLevel;
-	    this.moveViewport(dx, dy)
+	    this.moveViewport(dx, dy, this.clickViewOffset)
 	}
     }
 
@@ -219,9 +220,10 @@ class MouseHandler {
 	this.zoomViewport(point, zoomFactor);
     }
 
-    moveViewport(dx, dy) {
-	this.viewOffset.x = this.clickViewOffset.x - dx;
-	this.viewOffset.y = this.clickViewOffset.y - dy;
+    moveViewport(dx, dy, origin=null) {
+	origin ??= this.viewOffset;
+	this.viewOffset.x = origin.x - dx;
+	this.viewOffset.y = origin.y - dy;
 	this.viewOffset.x = Math.max(0, this.viewOffset.x);
 	this.viewOffset.y = Math.max(0, this.viewOffset.y);
 	this.viewOffset.x = Math.min(this.viewOffset.x,

diff --git a/javascript/shapes.js b/javascript/shapes.js
@@ -80,3 +80,19 @@ function linesIntersect(p1, p2, p3, p4) {
 	return (0 < lambda && lambda < 1) && (0 < gamma && gamma < 1);
     }
 };
+
+function circleIntersectsLine(center, radius, p1, p2) {
+    const dx = p2.x - p1.x;
+    const dy = p2.y - p1.y;
+    const distance = 
+	  Math.abs(dy*center.x - dx*center.y + p2.x*p1.y - p2.y*p1.x) /
+	  Math.hypot(dx, dy);
+    if (distance > radius) {
+	return false;
+    }
+    const [minX, maxX] = (p1.x < p2.x) ? [p1.x, p2.x] : [p2.x, p1.x];
+    const [minY, maxY] = (p1.y < p2.y) ? [p1.y, p2.y] : [p2.y, p1.y];
+    const inBounds = ((minX - radius/2 <= center.x) && (center.x <= maxX + radius/2) &&
+		      (minY - radius/2 <= center.y) && (center.y <= maxY + radius/2));
+    return inBounds;
+}