Improved interface

desktop/sources/links/main.css

@@ -25,6 +25,8 @@ body { padding: 0px; font-family: 'input_mono_regular'; -webkit-user-select: non
 #interface.picker #menu { opacity: 0; top:-5px; z-index: 0 }
 #interface.picker #picker { opacity: 1; top:0px; z-index: 900 }
 
+#app.web #interface #menu #option_open { display: none; }
+
 /* Theme Overrides */
 
 :root { --background: "#222"; --f_high: "#fff";--f_med: "#777";--f_low: "#444";--f_inv: "#000";--b_high: "#000";--b_med: "#affec7";--b_low: "#000";--b_inv: "#affec7"; }  

desktop/sources/scripts/dotgrid.js

@@ -54,7 +54,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
 
     let paths = dialog.showOpenDialog({properties: ['openFile'],filters:[{name:"Dotgrid Image",extensions:["dot","grid"]}]});
 
-    if(!paths){ console.log("Nothing to load"); return; }
+    if(!paths){ console.warn("Nothing to load"); return; }
 
     fs.readFile(paths[0], 'utf-8', (err, data) => {
       if(err){ alert("An error ocurred reading the file :" + err.message); return; }
@@ -65,7 +65,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
 
   this.save = function(content = this.tool.export())
   {
-    if(dotgrid.tool.length() < 1){ console.log("Nothing to save"); return; }
+    if(dotgrid.tool.length() < 1){ console.warn("Nothing to save"); return; }
 
     if(!dialog){ this.save_web(content); return; }
 
@@ -87,7 +87,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
   this.render = function(content = this.renderer.to_png({width:dotgrid.tool.settings.size.width*2,height:dotgrid.tool.settings.size.height*2}), ready = null, size = null)
   {
     if(!ready){return; }
-    if(dotgrid.tool.length() < 1){ console.log("Nothing to render"); return; }
+    if(dotgrid.tool.length() < 1){ console.warn("Nothing to render"); return; }
 
     if(!dialog){ dotgrid.render_web(content); return; }
 
@@ -107,7 +107,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
 
   this.export = function(content = this.renderer.to_svg())
   {
-    if(dotgrid.tool.length() < 1){ console.log("Nothing to export"); return; }
+    if(dotgrid.tool.length() < 1){ console.warn("Nothing to export"); return; }
 
     if(!dialog){ this.export_web(content); return; }
 

desktop/sources/scripts/interface.js

@@ -40,7 +40,7 @@ function Interface()
         render: { key:"", icon:"M155,65 A90,90 0 0,1 245,155 A90,90 0 0,1 155,245 A90,90 0 0,1 65,155 A90,90 0 0,1 155,65 M110,155 L110,155 L200,155 "},
         export: { key:"", icon:"M155,65 A90,90 0 0,1 245,155 A90,90 0 0,1 155,245 A90,90 0 0,1 65,155 A90,90 0 0,1 155,65 M110,140 L110,140 L200,140 M110,170 L110,170 L200,170"},
         save: { key:"", icon:"M155,65 A90,90 0 0,1 245,155 A90,90 0 0,1 155,245 A90,90 0 0,1 65,155 A90,90 0 0,1 155,65 M110,155 L110,155 L200,155 M110,185 L110,185 L200,185 M110,125 L110,125 L200,125"},
-        grid: { key:"H", icon:"M80,80 L80,80 L80,80 M230,80 L230,80 L230,80 M80,230 L80,230 L80,230 M230,230 L230,230 L230,230 M155,80 L155,80 L155,80 M155,230 L155,230 L155,230 M80,155 L80,155 L80,155 M230,155 L230,155 L230,155 M155,155 L155,155 L155,155  "},
+        grid: { key:"H", icon:"M65,155 Q155,245 245,155 M65,155 Q155,65 245,155 M155,125 A30,30 0 0,1 185,155 A30,30 0 0,1 155,185 A30,30 0 0,1 125,155 A30,30 0 0,1 155,125 "},
       }      
     }
 
@@ -54,6 +54,8 @@ function Interface()
           title="${name.capitalize()}" 
           onmouseout="dotgrid.interface.out('${type}','${name}')" 
           onmouseup="dotgrid.interface.up('${type}','${name}')" 
+          onmousedown="dotgrid.interface.down('${type}','${name}')" 
+          onclick="dotgrid.interface.click('${type}','${name}')" 
           onmouseover="dotgrid.interface.over('${type}','${name}')" 
           viewBox="0 0 300 300" 
           class="icon ${type}">
@@ -83,8 +85,23 @@ function Interface()
   {
     if(!dotgrid.tool[type]){ console.warn(`Unknown option(type): ${type}.${name}`,dotgrid.tool); return; }
 
+    this.refresh(true);
+  }
+
+  this.down = function(type,name)
+  {
+    if(!dotgrid.tool[type]){ console.warn(`Unknown option(type): ${type}.${name}`,dotgrid.tool); return; }
+
     dotgrid.tool[type](name)
-    this.refresh();
+    this.refresh(true);
+  }
+
+  this.click = function(type,name)
+  {
+    // if(!dotgrid.tool[type]){ console.warn(`Unknown option(type): ${type}.${name}`,dotgrid.tool); return; }
+
+    // dotgrid.tool[type](name)
+    // this.refresh();
   }
 
   this.prev_operation = null;
@@ -125,6 +142,10 @@ function Interface()
 
     document.getElementById("option_grid").className.baseVal = dotgrid.guide.show_extras ? "icon inactive source" : "icon source";
     
+    // Grid
+    if(dotgrid.guide.show_extras){ document.getElementById("grid_path").setAttribute("d","M65,155 Q155,245 245,155 M65,155 Q155,65 245,155 M155,125 A30,30 0 0,1 185,155 A30,30 0 0,1 155,185 A30,30 0 0,1 125,155 A30,30 0 0,1 155,125 ") }
+    else{ document.getElementById("grid_path").setAttribute("d","M65,155 Q155,245 245,155 M65,155 ") }
+
     // Mirror
     if(dotgrid.tool.style().mirror_style == 0){ document.getElementById("mirror_path").setAttribute("d","M60,60 L60,60 L120,120 M180,180 L180,180 L240,240 M210,90 L210,90 L180,120 M120,180 L120,180 L90,210") }
     else if(dotgrid.tool.style().mirror_style == 1){ document.getElementById("mirror_path").setAttribute("d","M60,60 L240,240 M180,120 L210,90 M120,180 L90,210") }

desktop/sources/scripts/picker.js

@@ -12,7 +12,7 @@ function Picker()
     this.el.setAttribute("placeholder",`${dotgrid.tool.style().color}`)
 
     try{ dotgrid.controller.set("picker"); }
-    catch(err){ console.log("No controller"); }
+    catch(err){ }
 
     dotgrid.interface.el.className = "picker"
     this.el.focus()
@@ -42,7 +42,7 @@ function Picker()
     dotgrid.guide.refresh();
     
     try{ dotgrid.controller.set(); }
-    catch(err){ console.log("No controller"); }
+    catch(err){ }
 
     dotgrid.interface.el.className = ""
     this.el.blur()
@@ -88,6 +88,12 @@ function Picker()
       return;
     }
 
+    if(e.key == "Escape"){
+      this.stop();
+      e.preventDefault();
+      return;
+    }
+
     this.update();
   }
 

desktop/sources/scripts/renderer.js

@@ -84,6 +84,7 @@ function Renderer()
 
   this.to_png_web = function(size)
   {
+    if(dotgrid.tool.length() < 1){ console.warn('Nothing to render'); return; }
     this.refresh();
 
     let xml = new XMLSerializer().serializeToString(this.svg_el);

index.html

@@ -31,6 +31,7 @@
         let dialog = null;
         dotgrid = new Dotgrid(300,300,20,20,4,4);
         dotgrid.install();
+        document.getElementById("app").className = "web";
       </script>
     </div>
   </body>