From: Elijah Cohen <eli@eli173.com>
Date: Tue, 19 Apr 2022 22:50:42 +0000 (-0500)
Subject: click-drag editing, some bugfixes
X-Git-Url: https://git.eli173.com/?a=commitdiff_plain;h=a0b3db279185ad03e2795a8981b8f7b16c44761b;p=hexgrid

click-drag editing, some bugfixes
---

diff --git a/README b/README
index c69f5ba..ecbd6b6 100644
--- a/README
+++ b/README
@@ -1,7 +1,7 @@
 
 This is a simple javascript library for hexagonal grids.
 
-This was initially created for cellular automata, but it's reasonably adaptable for many things you might want a hexagonal grid for.
+This was initially created for cellular automata, but it's reasonably adaptable for many things you might want a hexagonal grid for, such as board games and other games.
 The library itself is minimal, but the other included code provides mostly simple and handy editing utilities.
 
 TO USE
diff --git a/grid.js b/grid.js
index a0e8ea2..592e663 100644
--- a/grid.js
+++ b/grid.js
@@ -165,6 +165,28 @@ class Grid {
 						this.change(cp.state, cp.q+q, cp.r+r);
 				}
 		}
+
+
+		// still experimental, not a clear way to properly utilise yet
+		getLine(idx, dir) {
+				// idx is the index, i.e. 6 in r=6
+				// dir is in {q,r,s}
+				var theline = [];
+				for(let i of this.cells) {
+						if(i[dir] == idx) theline.push(i);
+				}
+				return theline;
+		}
+		pasteLine(q,r,dir,buf) {
+				let idx = (new Hex(q,r))[dir];
+				for(let i of this.cells) {
+						if(i[dir] == idx) i.state = this.defaultstate;
+				}
+				for(let i in buf) {
+						let cp = i.clone();
+						this.change(cp.state,cp.q,cp.r);
+				}
+		}
 }
 
 
@@ -178,6 +200,7 @@ function drawGrid(g, ctx, xc, yc, scl) {
 
 
 function gonclick(g,c,ctx,grid,xc,yc,scl,evt) {
+		//console.log(evt);
 		let rqcoord = getClickCoords(c, scl, xc, yc, evt);
 		let currst8 = g.stateAt(rqcoord.q, rqcoord.r);
 		let nextst8 = nextKey(currst8);
@@ -185,6 +208,7 @@ function gonclick(g,c,ctx,grid,xc,yc,scl,evt) {
 		drawGrid(g, ctx, xc, yc, scl);
 }
 function gonrclick(g,c,ctx,grid,xc,yc,scl,evt) {
+		//console.log(evt);
 		let rqcoord = getClickCoords(c, scl, xc, yc, evt);
 		let currst8 = g.stateAt(rqcoord.q, rqcoord.r);
 		let nextst8 = nextKey(currst8,false);
diff --git a/play.js b/play.js
index bc85e87..9e88790 100644
--- a/play.js
+++ b/play.js
@@ -27,8 +27,9 @@ function play() {
 function lc() {
 		c = document.getElementById('c');
 		ctx = c.getContext('2d');
-		c.onclick = e=>gonclick(g,c,ctx,g,xcenter,ycenter,scale,e)
-		c.oncontextmenu = (e) => {e.preventDefault(); gonrclick(g,c,ctx,g,xcenter,ycenter,scale,e)};
+		c.onmousedown = e=>mousedownshell(g,c,ctx,xcenter,ycenter,scale,e);
+		c.onmouseup = e=>mouseup(c);
+		c.oncontextmenu = (e)=>e.preventDefault();
 		drawGrid(g, ctx, xcenter,ycenter,scale);
 		document.addEventListener('keydown', e=>{
 				if(e.key == "p") pptoggle(e);
@@ -40,7 +41,6 @@ function lc() {
 		playbtn = document.getElementById('playpause');
 		playbtn.addEventListener('click',pptoggle);
 		range = document.getElementById("tempo");
-		//range.addEventListener('click', function(e) {timeout=range.value});
 		range.onclick = (e) => rangeManage(e);
 		clr = document.getElementById("clear");
 		clr.onclick = () => {g.cells = [];
@@ -141,7 +141,7 @@ reflectThingy = function(evt) {
 		let rad = parseInt(document.getElementById('rad').value);
 		g.reflHex(coords.q,coords.r,rad);
 		drawGrid(g, ctx, xcenter,ycenter,scale);
-		c.onclick = e=>wwonclick(c,ctx,g,xcenter,ycenter,scale,e);
+		c.onclick = null;
 }
 flipButtonHandler = function(e) {
 		c.onclick =  e=>flipThingy(e);
@@ -153,7 +153,7 @@ flipThingy = function(evt) {
 		let rad = parseInt(document.getElementById('rad').value);
 		g.flipHex(coords.q,coords.r,rad);
 		drawGrid(g, ctx, xcenter,ycenter,scale);
-		c.onclick = e=>wwonclick(c,ctx,g,xcenter,ycenter,scale,e);
+		c.onclick = null;
 }
 rotateButtonHandler = function(e) {
 		c.onclick =  e=>rotateThingy(e);
@@ -165,7 +165,7 @@ rotateThingy = function(evt) {
 		let rad = parseInt(document.getElementById('rad').value);
 		g.rotateHex(coords.q,coords.r,rad);
 		drawGrid(g, ctx, xcenter,ycenter,scale);
-		c.onclick = e=>wwonclick(c,ctx,g,xcenter,ycenter,scale,e);
+		c.onclick = null;
 }
 
 copyHandler = function(e) {
@@ -178,7 +178,7 @@ copyhex = function(evt) {
 		let rad = parseInt(document.getElementById('rad').value);
 		copybuf = g.copyHex(coords.q, coords.r, rad)
 		drawGrid(g, ctx, xcenter,ycenter,scale);
-		c.onclick = e=>wwonclick(c,ctx,g,xcenter,ycenter,scale,e);
+		c.onclick = null;
 }
 pasteHandler = function(e) {
 		c.onclick = e=>pastehex(e);
@@ -194,7 +194,7 @@ pastehex = function(evt) {
 		let rad = parseInt(document.getElementById('rad').value);
 		g.pasteHex(coords.q,coords.r,copybuf);
 		drawGrid(g, ctx, xcenter,ycenter,scale);
-		c.onclick = e=>wwonclick(c,ctx,g,xcenter,ycenter,scale,e);
+		c.onclick = null;
 }
 
 exportState = function() {
@@ -233,3 +233,36 @@ function getClickCoords(c, scale, xoff, yoff, event) {
 		q = Math.round(preq);
 		return {r: r, q: q};
 }
+
+
+var mmLatestSpot = null;
+function mouseMover(g,c,ctx,xc,yc,scl,isLClick,evt) {
+		return function(evt) {
+				let rqcoord = getClickCoords(c,scl,xc,yc,evt);
+				if(rqcoord.q == mmLatestSpot.q && rqcoord.r == mmLatestSpot.r) {
+						return;
+				}
+				mmLatestSpot = rqcoord;
+				let currst8 = g.stateAt(rqcoord.q, rqcoord.r);
+				let nextst8 = nextKey(currst8,isLClick);
+				g.change(nextst8, rqcoord.q, rqcoord.r);
+				drawGrid(g, ctx, xc, yc, scl);
+		}
+}
+
+var currmovefn = null;
+function mousedownshell(g,c,ctx,xc,yc,scl,evt) {
+		evt.preventDefault();
+		let islclick = evt.button == 0;
+		currmovefn = mouseMover(g,c,ctx,xc,yc,scl,islclick,evt);
+		c.addEventListener('mousemove', currmovefn);
+		let rqcoord = getClickCoords(c,scl,xc,yc,evt);
+		mmLatestSpot = rqcoord;
+		let currst8 = g.stateAt(rqcoord.q, rqcoord.r);
+		let nextst8 = nextKey(currst8,islclick);
+		g.change(nextst8, rqcoord.q, rqcoord.r);
+		drawGrid(g, ctx, xc, yc, scl);
+}
+function mouseup(c) {
+		c.removeEventListener('mousemove',currmovefn);
+}