From b266dd6f1965d88ca65695d631e1c5b01898b820 Mon Sep 17 00:00:00 2001
From: Devine Lu Linvega <aliceffekt@gmail.com>
Date: Mon, 27 Nov 2017 17:35:53 +1300
Subject: [PATCH] Fill

---
 README.md                    |  1 +
 sources/scripts/dotgrid.js   | 10 ++++++++--
 sources/scripts/interface.js |  7 ++++---
 sources/scripts/keyboard.js  |  4 +++-
 4 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index 51d3b3a..ce74d74 100644
--- a/README.md
+++ b/README.md
@@ -17,6 +17,7 @@ Clicking on the canvas will insert control points, up to 3CPs. CPs can be moved
 - `d` Draw Line.
 - `f` Draw Bezier.
 - `g` Close Path.
+- `h` Fill Path.
 
 ### Parametric
 
diff --git a/sources/scripts/dotgrid.js b/sources/scripts/dotgrid.js
index 64b685c..864a3eb 100644
--- a/sources/scripts/dotgrid.js
+++ b/sources/scripts/dotgrid.js
@@ -96,7 +96,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
     this.svg_el.style.height = this.height;
     this.svg_el.style.stroke = this.color;
     this.svg_el.style.strokeWidth = this.thickness;
-    this.svg_el.style.fill = this.fill ? "black" : "none !important";
+    this.svg_el.style.fill = "none";
     this.svg_el.style.strokeLinecap = this.linecap;
     this.element.appendChild(this.svg_el);
 
@@ -138,6 +138,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
     if(o == "thickness"){ this.mod_thickness(); }
     if(o == "linecap"){ this.mod_linecap(); }
     if(o == "mirror"){ this.mod_mirror(); }
+    if(o == "fill"){ this.toggle_fill(); }
     if(o == "export"){ this.export(); }
   }
 
@@ -367,7 +368,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
     this.svg_el.style.stroke = this.color;
     this.svg_el.style.strokeLinecap = this.linecap;
     this.svg_el.style.strokeWidth = this.thickness*this.scale;
-    this.svg_el.style.fill = this.fill ? "black" : "none";
+    this.svg_el.style.fill = this.fill ? this.theme.active.f_high : "none";
 
     // Draw Mirror
     if(this.mirror_index == 1){
@@ -492,6 +493,10 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
     if(this.segments.length == 0){ return; }
     this.scale = 1
     this.draw()
+
+    // Override fill color
+    if(dotgrid.fill){ dotgrid.svg_el.style.fill = "black" }
+
     var svg = this.svg_el.outerHTML
 
     dialog.showSaveDialog((fileName) => {
@@ -501,6 +506,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
       });
       fs.writeFile(fileName+'.png', dotgrid.render.buffer());
       fs.writeFile(fileName+'.dot', JSON.stringify(dotgrid.serializer.serialize()));
+      dotgrid.draw()
     });
   }
 
diff --git a/sources/scripts/interface.js b/sources/scripts/interface.js
index 75f69c8..4a2a75e 100644
--- a/sources/scripts/interface.js
+++ b/sources/scripts/interface.js
@@ -18,8 +18,9 @@ function Interface()
       ["close","close (g)","M60,60 A180,180 0 0,1 240,240  M60,60 A180,180 0 0,0 240,240",""],
       
       ["thickness","thickness ([ & ])","M60,60 L240,240","stroke-dasharray: 30,15"],
-      ["linecap","linecap (/)","M60,60 L240,240  M240,180 L240,240  M180,240 L240,240"],
-      ["mirror","mirror (space)","M60,60 L240,240  M180,120 L210,90  M120,180 L90,210  "],
+      ["linecap","linecap (/)","M60,60 L240,240 M240,180 L240,240 M180,240 L240,240"],
+      ["mirror","mirror (space)","M60,60 L240,240 M180,120 L210,90 M120,180 L90,210  "],
+      ["fill","fill (h)","M60,60 L60,150 L150,150 L240,150 L240,240 Z  "],
       
       ["export","export (ctrl s)","M150,50 L50,150 L150,250 L250,150 L150,50 Z"]
     ]
@@ -41,6 +42,7 @@ function Interface()
     document.getElementById("thickness").className.baseVal = dotgrid.segments.length < 1 ? "icon inactive" : "icon";
     document.getElementById("linecap").className.baseVal = dotgrid.segments.length < 1 ? "icon inactive" : "icon";
     document.getElementById("mirror").className.baseVal = dotgrid.segments.length < 1 ? "icon inactive" : "icon";
+    document.getElementById("fill").className.baseVal = dotgrid.segments.length < 1 ? "icon inactive" : "icon";
     document.getElementById("close").className.baseVal = dotgrid.segments.length < 1 || (prev && prev.name == "close") ? "icon inactive" : "icon";
     document.getElementById("export").className.baseVal = dotgrid.segments.length < 1 ? "icon inactive" : "icon";
   }
@@ -50,7 +52,6 @@ function Interface()
     this.is_visible = this.is_visible ? false : true;
     this.el.className = this.is_visible ? "visible" : "hidden";
 
-
     const {dialog,app} = require('electron').remote;
     var win = require('electron').remote.getCurrentWindow();
     win.setSize(900,this.is_visible ? 420 : 400);
diff --git a/sources/scripts/keyboard.js b/sources/scripts/keyboard.js
index 67a3096..c7b8140 100644
--- a/sources/scripts/keyboard.js
+++ b/sources/scripts/keyboard.js
@@ -48,13 +48,15 @@ function Keyboard()
       this.code_history = "";
     }
 
-    switch(e.keyCode) {
+    switch(e.keyCode || e.key) {
       case 65 : dotgrid.draw_arc(e.shiftKey ? "1,0" : "0,0"); break; // 'a/A'
       case 83 : dotgrid.draw_arc(e.shiftKey ? "1,1" : "0,1"); break; // 's/S'
       case 68 : dotgrid.draw_line(); break; // 'd'
       case 70 : dotgrid.draw_bezier(); break; // 'f'
       case "g" : dotgrid.draw_close(); break;
       case 71 : dotgrid.draw_close(); break; // 'g'
+      case "h" : dotgrid.toggle_fill(); break;
+      case 72 : dotgrid.toggle_fill(); break; // 'g'
 
       case "[" : dotgrid.mod_thickness(-1); break;
       case 219 : dotgrid.mod_thickness(-1); break; // '['