smooth zoomOut; move dotClickCircles layer marker under edges layer m…

…arker; hide/show clickCircle when hiding/showing dot.
edloper · Dec 8, 2024 · 17c5407 · 17c5407
1 parent 0f4fba2
commit 17c5407
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 5 deletions.
diff --git a/javascript/graph.js b/javascript/graph.js
@@ -13,8 +13,8 @@ class Graph {
 	    bottom: draw.rect(0, 0),
 	    image: draw.rect(0, 0),
 	    tris: draw.rect(0, 0),
-	    edges: draw.rect(0, 0),
 	    dotClickCircles: draw.rect(0, 0),
+	    edges: draw.rect(0, 0),
 	    dots: draw.rect(0, 0),
 	    top: draw.rect(0, 0),
 	}
@@ -289,10 +289,12 @@ class Dot {
     hide() {
 	this.text.hide();
 	this.circle.hide();
+	this.clickCircle.hide();
     }
 
     show() {
 	this.circle.show();
+	this.clickCircle.show();
 	if (this.textString) {
 	    this.text.show();
 	}

diff --git a/javascript/mouse_handler.js b/javascript/mouse_handler.js
@@ -207,10 +207,26 @@ class MouseHandler {
     }
 
     zoomOut() {
-	this.viewOffset.x = 0;
-	this.viewOffset.y = 0;
-	this.zoomLevel = 1.0;
-	this.updateViewbox();
+	console.log(this.viewOffset);
+	const steps = 50;
+	const duration = 1000;
+	const delta = Math.pow(1/this.zoomLevel, 1/steps);
+	var i = 0;
+	const animation = () => {
+	    i += 1;
+	    if (i > steps) {
+		this.viewOffset.x = 0;
+		this.viewOffset.y = 0;
+		this.zoomLevel = 1.0;
+		this.updateViewbox();
+	    } else {
+		const x = this.viewOffset.x + this.game.width / this.zoomLevel / 2;
+		const y = this.viewOffset.y + this.game.height / this.zoomLevel / 2;
+		this.zoomViewport({x: x, y: y}, delta);
+		setTimeout(animation, duration/steps);
+	    }
+	}
+	animation();
     }
 
     mouseWheel(e) {