From 86e705c2de235aaf4859c2454ed1b63925f95db0 Mon Sep 17 00:00:00 2001
From: mmcw-dev <hi@mmcwilliams.com>
Date: Wed, 27 Dec 2017 18:11:50 -0500
Subject: [PATCH] Optionally show a key explaining the folding directions. Show
 correct colored dash lines for folds

---
 docs/index.html | 12 ++++++---
 package.json    |  2 +-
 src/bellows.js  | 65 +++++++++++++++++++++++++++++++------------------
 3 files changed, 51 insertions(+), 28 deletions(-)

diff --git a/docs/index.html b/docs/index.html
index 9feba61..b8c80d2 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -101,6 +101,10 @@ input{
 			<label for="align">Adjust Alignment</label>
 			<input name="align" type="number" value="0" min="0" />
 		</div>
+		<div>
+			<label for="key">Show Key</label>
+			<input name="key" type="checkbox" checked />
+		</div>
 	</div>
 </form>
 <div>
@@ -108,8 +112,8 @@ input{
 	<button id="download" onclick="download();">Download</button>
 </div>
 <img id="img" />
-<!--<script src="../src/bellows.js"> </script>-->
-<script src="https://rawgit.com/sixteenmillimeter/bellows/master/src/bellows.js">
+<script src="../src/bellows.js"> </script>
+
 </script>
 <script>
 	'use script'
@@ -140,6 +144,7 @@ input{
 
 		const maxLength = Math.round($('maxLength').value * MM);
 
+		const key = $('key').checked
 		const align = Math.round($('align').value);
 		let parts = Math.round($('parts').value);
 
@@ -165,7 +170,8 @@ input{
 
 				maxLength : maxLength,
 				parts : parts,
-				align : align
+				align : align,
+				key : key
 			}
 		);
 		document.getElementById('img').setAttribute('src', B);
diff --git a/package.json b/package.json
index 71438d3..b2dd23b 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
   },
   "devDependencies": {},
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "node ./example"
   },
   "repository": {
     "type": "git",
diff --git a/src/bellows.js b/src/bellows.js
index c7e3ce3..1176006 100644
--- a/src/bellows.js
+++ b/src/bellows.js
@@ -8,6 +8,8 @@
 
 const IN = 25.4
 const BLACK = '0,0,0,1.0'
+const RED = '255,0,0,1.0'
+const BLUE = '0,0,255,1.0'
 
 let browser = (typeof module === 'undefined')
 let createCanvas
@@ -110,6 +112,8 @@ function bellows (options = {}) {
     let centerX = Math.round(pageW / 2)
     let centerY = Math.round(pageH / 2)
 
+    let key = (typeof options.key !== 'undefined' && options.key === false) ? false : true
+
     let fold = (frontOW - frontIW) / 2
     let folds = Math.floor(maxLength / fold)
     let length = folds * fold
@@ -117,10 +121,6 @@ function bellows (options = {}) {
     let angleW
     let angleH
 
-    //console.dir(options)
-
-
-
     if (!browser) {
         canvas = createCanvas(pageW, pageH)
     } else {
@@ -136,13 +136,10 @@ function bellows (options = {}) {
     ctx.fillStyle = 'rgba(255, 255, 255, 1.0)'
     ctx.fillRect(0, 0, pageW, pageH)
 
-    //key
-    ctx.font = '15px Arial'; 
+    //text config
+    ctx.fillStyle='rgba(0,0,0,1.0)'
+    ctx.font = '24px Arial'; 
     ctx.textAlign= 'start'; 
-	ctx.fillText('Cut lines' ,150, 60); 
-
-    line(ctx, BLACK, [IN * dpi, IN * dpi], [(2 * IN) * dpi, IN * dpi])
-
 
     function sideW (side) {
         const frontOffset = Math.round((backOW - frontOW) / 2)
@@ -179,7 +176,7 @@ function bellows (options = {}) {
             		t = 0
             	}
             	//fold out
-                dash(ctx, '255,0,0,1.0', dpi, [foldIN + t, Y + (i * fold)], [foldIN + backIW - t, Y + (i * fold)])
+                dash(ctx, BLUE, dpi, [foldIN + t, Y + (i * fold)], [foldIN + backIW - t, Y + (i * fold)])
             } else {
             	if (backOW !== frontOW) {
             		t = taper(backOW, frontOW, length, i * fold)
@@ -187,7 +184,7 @@ function bellows (options = {}) {
             		t = 0
             	}
             	//fold in
-                dash(ctx, '0,0,255,1.0', dpi, [foldOUT + t, Y + (i * fold)], [foldOUT + backOW - t, Y + (i * fold)])
+                dash(ctx, RED, dpi, [foldOUT + t, Y + (i * fold)], [foldOUT + backOW - t, Y + (i * fold)])
             }
         }
 
@@ -201,7 +198,7 @@ function bellows (options = {}) {
             		t = 0
             		t2 = 0
             	}
-        		dash(ctx, '255,0,0,1.0', dpi, [foldIN + t, Y + i * fold ], [foldIN - ((backOW - backIW) / 2) + t2, (Y + (i + 1) * fold) ])
+        		dash(ctx, BLUE, dpi, [foldIN + t, Y + i * fold ], [foldIN - ((backOW - backIW) / 2) + t2, (Y + (i + 1) * fold) ])
         	} else {
         		if (backIW !== frontIW) {
             		t = taper(backIW, frontIW, length, i * fold)
@@ -210,7 +207,7 @@ function bellows (options = {}) {
             		t = 0
             		t2 = 0
             	}
-            	dash(ctx, '255,0,0,1.0', dpi, [foldOUT + t, Y + i * fold ], [foldIN + t2, (Y + (i + 1) * fold) ])
+            	dash(ctx, BLUE, dpi, [foldOUT + t, Y + i * fold ], [foldIN + t2, (Y + (i + 1) * fold) ])
         	}
         	//
         }
@@ -224,7 +221,7 @@ function bellows (options = {}) {
             		t = 0
             		t2 = 0
             	}
-        		dash(ctx, '255,0,0,1.0', dpi, [foldIN + backIW - t, Y + i * fold ], [foldOUT + backOW - t2, (Y + (i + 1) * fold) ])
+        		dash(ctx, BLUE, dpi, [foldIN + backIW - t, Y + i * fold ], [foldOUT + backOW - t2, (Y + (i + 1) * fold) ])
         	} else {
         		if (backIW !== frontIW) {
             		t = taper(backIW, frontIW, length, i * fold)
@@ -233,7 +230,7 @@ function bellows (options = {}) {
             		t = 0
             		t2 = 0
             	}
-            	dash(ctx, '255,0,0,1.0', dpi, [foldOUT + backOW - t, Y + i * fold ], [foldIN + backIW - t2, (Y + (i + 1) * fold) ])
+            	dash(ctx, BLUE, dpi, [foldOUT + backOW - t, Y + i * fold ], [foldIN + backIW - t2, (Y + (i + 1) * fold) ])
         	}
         	//
         }
@@ -274,7 +271,7 @@ function bellows (options = {}) {
             		t = 0
             	}
             	//fold out
-                dash(ctx, '255,0,0,1.0', dpi, [foldIN + t, Y + (i * fold)], [foldIN + backIH - t, Y + (i * fold)])
+                dash(ctx, BLUE, dpi, [foldIN + t, Y + (i * fold)], [foldIN + backIH - t, Y + (i * fold)])
             } else {
             	if (backOH !== frontOH) {
             		t = taper(backOH, frontOH, length, i * fold)
@@ -282,7 +279,7 @@ function bellows (options = {}) {
             		t = 0
             	}
             	//fold in
-                dash(ctx, '0,0,255,1.0', dpi, [foldOUT + t, Y + (i * fold)], [foldOUT + backOH - t, Y + (i * fold)])
+                dash(ctx, RED, dpi, [foldOUT + t, Y + (i * fold)], [foldOUT + backOH - t, Y + (i * fold)])
             }
         }
         
@@ -296,7 +293,7 @@ function bellows (options = {}) {
             		t = 0
             		t2 = 0
             	}
-        		dash(ctx, '255,0,0,1.0', dpi, [foldIN + t, Y + i * fold ], [foldIN - ((backOH - backIH) / 2) + t2, (Y + (i + 1) * fold) ])
+        		dash(ctx, BLUE, dpi, [foldIN + t, Y + i * fold ], [foldIN - ((backOH - backIH) / 2) + t2, (Y + (i + 1) * fold) ])
         	} else {
         		if (backIH !== frontIH) {
             		t = taper(backIH, frontIH, length, i * fold)
@@ -305,7 +302,7 @@ function bellows (options = {}) {
             		t = 0
             		t2 = 0
             	}
-            	dash(ctx, '255,0,0,1.0', dpi, [foldOUT + t, Y + i * fold ], [foldIN + t2, (Y + (i + 1) * fold) ])
+            	dash(ctx, BLUE, dpi, [foldOUT + t, Y + i * fold ], [foldIN + t2, (Y + (i + 1) * fold) ])
         	}
         	//
         }
@@ -319,7 +316,7 @@ function bellows (options = {}) {
             		t = 0
             		t2 = 0
             	}
-        		dash(ctx, '255,0,0,1.0', dpi, [foldIN + backIH - t, Y + i * fold ], [foldOUT + backOH - t2, (Y + (i + 1) * fold) ])
+        		dash(ctx, BLUE, dpi, [foldIN + backIH - t, Y + i * fold ], [foldOUT + backOH - t2, (Y + (i + 1) * fold) ])
         	} else {
         		if (backIH !== frontIH) {
             		t = taper(backIH, frontIH, length, i * fold)
@@ -328,15 +325,35 @@ function bellows (options = {}) {
             		t = 0
             		t2 = 0
             	}
-            	dash(ctx, '255,0,0,1.0', dpi, [foldOUT + backOH - t, Y + i * fold ], [foldIN + backIH - t2, (Y + (i + 1) * fold) ])
+            	dash(ctx, BLUE, dpi, [foldOUT + backOH - t, Y + i * fold ], [foldIN + backIH - t2, (Y + (i + 1) * fold) ])
         	}
         }
     }
 
-    function overlap () {
+    function overlap (side) {
+        const frontOffset = Math.round((backOW - frontOW) / 2)
 
+        const X = -backOW / 2
+        const Y = -length / 2
+
+    	let foldIN = X + ((backOW - backIW) / 2) //inside
+    	let foldOUT = X //outside
+    	let t
+    	let t2
     }
 
+    if (key) {
+	    //key
+	    ctx.fillText('Cut lines', dpi / 2, dpi / 2); 
+	    line(ctx, BLACK, [dpi / 2, (dpi / 2) + 10], [dpi, (dpi / 2) + 10]);
+
+	    ctx.fillText('Fold away', dpi / 2, (dpi / 2) + (dpi / 6)); 
+	    dash(ctx, BLUE, dpi, [dpi / 2, (dpi / 2) + (dpi / 6) + 10], [dpi, (dpi / 2) + (dpi / 6) + 10]);
+
+		ctx.fillText('Fold toward', dpi / 2, (dpi / 2) + (dpi / 3)); 
+	    dash(ctx, RED, dpi, [dpi / 2, (dpi / 2) + (dpi / 3) + 10], [dpi, (dpi / 2) + (dpi / 3) + 10]);
+	}
+
     ctx.translate(centerX, centerY)
     angleW = Math.atan( (backOW - frontOW) / length) // / (Math.PI / 180)
     angleH = Math.atan( (backOH - frontOH) / length)
@@ -348,7 +365,7 @@ function bellows (options = {}) {
     sideW(1)
 
     if (parts === 4) {
-    	ctx.translate(backOH - backIH, 0)
+    	ctx.translate(backOH - backIH + (0.2 * backOW), 0)
     }
 
     ctx.translate((backOW / 2) + (backOH / 2) - (((backOW - frontIW) + (backOH - frontIH)) / 4), align)