From 17c5407b7064d3b8dbf5cf2bab5d7f2c37bd314c Mon Sep 17 00:00:00 2001
From: Edward Loper <edloper@gmail.com>
Date: Sun, 8 Dec 2024 01:22:22 -0500
Subject: [PATCH] smooth zoomOut; move dotClickCircles layer marker under edges
 layer marker; hide/show clickCircle when hiding/showing dot.

---
 javascript/graph.js         |  4 +++-
 javascript/mouse_handler.js | 24 ++++++++++++++++++++----
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/javascript/graph.js b/javascript/graph.js
index 4b44121..e3e1d36 100644
--- 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
index 13c7742..4f269b8 100644
--- 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) {