grid test

matrem · Jan 6, 2024 · e203ea5 · e203ea5
1 parent 52b340e
commit e203ea5
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 27 deletions.
diff --git a/canvastransform/index.js b/canvastransform/index.js
@@ -5,7 +5,7 @@ let main = {
 				id: "canvas"
 				, tipId: "tipcanvas"
 				, unit: "m"
-				, zoomPow: 2.0
+				, zoomPow: 1.1
 				, showGrid: true
 				, showAxis: true
 				, showCoords: true

diff --git a/libs/draw.js b/libs/draw.js
@@ -229,9 +229,9 @@ draw.TransformedDrawing = class extends draw.Drawing {
 			// 		this.pinchDown = undefined;
 			// 	}
 			// }
-			// else if (event.button == this.resetButton) {
-			// 	this.onReset();
-			// }
+			if (event.button == this.resetButton) {
+				this.onReset();
+			}
 		});
 		canvas.addEventListener("pointermove", (event) => {
 			if (event.pointerType == "mouse" || event.pointerType == "touch" && this.#touches.length > 0 && this.#touches[0] == event.pointerId) {
@@ -382,20 +382,40 @@ draw.TransformedDrawing = class extends draw.Drawing {
 		}
 	}
 
-	drawGrid() {
+	setupGridLine(c, s, axisColor) {
 		let ctx = this.context;
-		let minSubdivision = 10;
 
-		let stepW = this.width / minSubdivision / this.#zoom;
-		let stepH = this.height / minSubdivision / this.#zoom;
+		if (c == 0 && this.showAxis) {
+			ctx.lineWidth = 1.0 / this.#zoom;
+			ctx.strokeStyle = axisColor;
+		}
+		else {
+			if ((s % 10) == 0) {
+				ctx.strokeStyle = "rgb(255, 255, 255)";
+				ctx.lineWidth = 0.6 / this.#zoom;
+			}
+			else {
+				ctx.strokeStyle = "rgb(200, 200, 200)";
+				ctx.lineWidth = 0.2 / this.#zoom;
+			}
+
+			//ctx.lineWidth = ((s % 10) == 0 ? 0.6 : 0.2) / this.#zoom;
+		}
+
+	}
+
+	drawGrid() {
+		let ctx = this.context;
 
-		let step = Math.min(stepW, stepH);
+		let minCellSize = 100;
 
-		let subdivisionX = Math.round(this.width / step / this.#zoom);
-		let subdivisionY = Math.round(this.height / step / this.#zoom);
+		let step = minCellSize / this.#zoom;
 
 		this.unitStep = Math.pow(10, Math.ceil(Math.log10(step)));
 
+		let subdivisionX = Math.ceil(this.width / this.unitStep / this.#zoom);
+		let subdivisionY = Math.ceil(this.height / this.unitStep / this.#zoom);
+
 		if (this.showGrid || this.showAxis) {
 			ctx.strokeStyle = "rgb(255,255, 255)";
 
@@ -406,16 +426,10 @@ draw.TransformedDrawing = class extends draw.Drawing {
 				let offset = s * this.unitStep / 10.0;
 
 				let y = offset + min.y;
-				if (y == 0 && this.showAxis) {
-					ctx.lineWidth = 1.0 / this.#zoom;
-					ctx.strokeStyle = "rgb(255, 0, 0)";
-				}
-				else {
-					ctx.strokeStyle = "rgb(255, 255, 255)";
-					ctx.lineWidth = ((s % 10) == 0 ? 0.6 : 0.2) / this.#zoom;
-				}
 
 				if (this.showGrid || y == 0) {
+					this.setupGridLine(y, s, "rgb(255, 0, 0)");
+
 					ctx.beginPath();
 					ctx.moveTo(bounds.min.x + this.#largeWorldOffset.x, y + this.#largeWorldOffset.y);
 					ctx.lineTo(bounds.max.x + this.#largeWorldOffset.x, y + this.#largeWorldOffset.y);
@@ -426,22 +440,18 @@ draw.TransformedDrawing = class extends draw.Drawing {
 			for (let s = -10; s < subdivisionX * 10; ++s) {
 				let offset = s * this.unitStep / 10.0;
 				let x = offset + min.x;
-				if (x == 0 && this.showAxis) {
-					ctx.lineWidth = 1.0 / this.#zoom;
-					ctx.strokeStyle = "rgb(0, 255, 0)";
-				}
-				else {
-					ctx.strokeStyle = "rgb(255, 255, 255)";
-					ctx.lineWidth = ((s % 10) == 0 ? 0.6 : 0.2) / this.#zoom;
-				}
 
 				if (this.showGrid || x == 0) {
+					this.setupGridLine(x, s, "rgb(0, 255, 0)");
+
 					ctx.beginPath();
 					ctx.moveTo(x + this.#largeWorldOffset.x, bounds.min.y + this.#largeWorldOffset.y);
 					ctx.lineTo(x + this.#largeWorldOffset.x, bounds.max.y + this.#largeWorldOffset.y);
 					ctx.stroke();
 				}
 			}
+
+			ctx.strokeStyle = "rgb(255, 255, 255)";
 		}
 
 		if (this.showGrid) {