Started implementing options

desktop/sources/scripts/cursor.js

@@ -1,7 +1,8 @@
 function Cursor()
 {
-  this.pos = {x:0,y:0},
+  this.pos = {x:0,y:0};
-  this.translation = null,
+  this.translation = null;
+  this.operation = null;
 
   this.translate = function(from = null,to = null, multi = false)
   {    

desktop/sources/scripts/dotgrid.js

@@ -210,47 +210,6 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
     }
   }
 
-  // Toggles
-
-  this.mod_thickness = function(mod = 10,step = false,cap = false)
-  {
-    if(cap){
-      this.tool.style().thickness = this.tool.style().thickness > 40 ? 1 : this.tool.style().thickness
-    }
-    if(step){
-      this.tool.style().thickness = parseInt(this.tool.style().thickness/5) * 5;
-    }
-
-    this.tool.style().thickness = clamp(this.tool.style().thickness+mod,1,40);
-    dotgrid.guide.refresh();
-  }
-
-  this.mod_linecap_index = 1;
-
-  this.mod_linecap = function(mod)
-  {
-    var a = ["butt","square","round"];
-    this.mod_linecap_index += 1;
-    this.tool.style().strokeLinecap = a[this.mod_linecap_index % a.length];
-    dotgrid.guide.refresh();
-  }
-
-  this.mod_linejoin_index = 1;
-
-  this.mod_linejoin = function(mod)
-  {
-    var a = ["miter","round","bevel"];
-    this.mod_linejoin_index += 1;
-    this.tool.style().strokeLinejoin = a[this.mod_linejoin_index % a.length];
-    dotgrid.guide.refresh();
-  }
-
-  this.mod_fill = function()
-  {
-    this.tool.style().fill = this.tool.style().fill == "none" ? this.tool.style().color : "none";
-    dotgrid.guide.refresh();
-  }
-
   // Basics
 
   this.set_size = function(size = {width:300,height:300},interface = true,scale = 1)

desktop/sources/scripts/guide.js

@@ -209,7 +209,7 @@ function Guide()
 
   this.draw_preview = function()
   {
-    var operation = dotgrid.cursor.operation
+    var operation = dotgrid.cursor.operation && dotgrid.cursor.operation.cast ? dotgrid.cursor.operation.cast : null
 
     if(!dotgrid.tool.can_cast(operation)){ return; }
     if(operation == "close"){ return; }

desktop/sources/scripts/interface.js

@@ -15,38 +15,55 @@ function Interface()
     this.el.appendChild(dotgrid.picker.el);
     
     var html = ""
-    var tools = {
+    var options = {
-      line: ["line","M60,60 L240,240","A"],
+      cast:{
-      arc_c: ["arc clockwise","M60,60 A180,180 0 0,1 240,240","S"],
+        line: ["line","M60,60 L240,240","A"],
-      arc_r: ["arc reverse","M60,60 A180,180 0 0,0 240,240","D"],
+        arc_c: ["arc clockwise","M60,60 A180,180 0 0,1 240,240","S"],
-      bezier: ["bezier","M60,60 Q60,150 150,150 Q240,150 240,240","F"],
+        arc_r: ["arc reverse","M60,60 A180,180 0 0,0 240,240","D"],
-      close: ["close","M60,60 A180,180 0 0,1 240,240  M60,60 A180,180 0 0,0 240,240","Z"],
+        bezier: ["bezier","M60,60 Q60,150 150,150 Q240,150 240,240","F"],
-
+        close: ["close","M60,60 A180,180 0 0,1 240,240  M60,60 A180,180 0 0,0 240,240","Z"]
-      linecap: ["linecap","M60,60 L60,60 L180,180 L240,180 L240,240 L180,240 L180,180","Q"],
+      },
-      linejoin: ["linejoin","M60,60 L120,120 L180,120  M120,180 L180,180 L240,240","W"],
+      toggle:{
-      thickness: ["thickness","M120,90 L120,90 L90,120 L180,210 L210,180 Z M105,105 L105,105 L60,60 M195,195 L195,195 L240,240"],
+        linecap: ["linecap","M60,60 L60,60 L180,180 L240,180 L240,240 L180,240 L180,180","Q"],
-      
+        linejoin: ["linejoin","M60,60 L120,120 L180,120  M120,180 L180,180 L240,240","W"],
-      mirror: ["mirror","M60,60 L60,60 L120,120 M180,180 L180,180 L240,240 M210,90 L210,90 L180,120 M120,180 L120,180 L90,210","E"],
+        thickness: ["thickness","M120,90 L120,90 L90,120 L180,210 L210,180 Z M105,105 L105,105 L60,60 M195,195 L195,195 L240,240"],
-      fill: ["fill","M60,60 L60,150 L150,150 L240,150 L240,240 Z","R"],
+        mirror: ["mirror","M60,60 L60,60 L120,120 M180,180 L180,180 L240,240 M210,90 L210,90 L180,120 M120,180 L120,180 L90,210","E"],
-      color: ["color","M150,60 A90,90 0 0,1 240,150 A-90,90 0 0,1 150,240 A-90,-90 0 0,1 60,150 A90,-90 0 0,1 150,60","G"],
+        fill: ["fill","M60,60 L60,150 L150,150 L240,150 L240,240 Z","R"]
+      },
+      misc:{
+        color: ["color","M150,60 A90,90 0 0,1 240,150 A-90,90 0 0,1 150,240 A-90,-90 0 0,1 60,150 A90,-90 0 0,1 150,60","G"]
+      }      
     }
 
-    for(id in tools){
+    for(type in options){
-      var tool = tools[id];
+      var tools = options[type];
-      var shortcut = tool[2];
+      for(name in tools){
-      html += `<svg id="${id}" ar="${id}" title="${tool[0].capitalize()}" onmousedown="dotgrid.interface.down('${id}')" onmouseover="dotgrid.interface.over('${id}')" viewBox="0 0 300 300" class="icon"><path id="${id}_path" class="icon_path" d="${tool[1]}"/>${id == "depth" ? `<path class="icon_path inactive" d=""/>` : ""}<rect ar="${id}" width="300" height="300" opacity="0"><title>${id.capitalize()}${shortcut ? '('+shortcut+')' : ''}</title></rect></svg>`
+        var tool = tools[name];
+        var shortcut = tool[2];
+        html += `<svg id="${name}" title="${tool[0].capitalize()}" onmouseout="dotgrid.interface.out('${type}','${name}')" onmouseup="dotgrid.interface.up('${type}','${name}')" onmouseover="dotgrid.interface.over('${type}','${name}')" viewBox="0 0 300 300" class="icon"><path id="${name}_path" class="icon_path" d="${tool[1]}"/>${name == "depth" ? `<path class="icon_path inactive" d=""/>` : ""}<rect ar="${name}" width="300" height="300" opacity="0"><title>${name.capitalize()}${shortcut ? '('+shortcut+')' : ''}</title></rect></svg>`
+      }
+      
     }
     this.menu_el.innerHTML = html
   }
 
-  this.over = function(id)
+  this.over = function(type,name)
   {
-    console.log("over",id)
+    dotgrid.cursor.operation = {}
+    dotgrid.cursor.operation[type] = name;
   }
 
-  this.down = function(id)
+  this.out = function(type,name)
   {
-    console.log("click",id)
+    dotgrid.cursor.operation = ""
+  }
+
+  this.up = 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;

desktop/sources/scripts/tool.js

@@ -158,6 +158,29 @@ function Tool()
     console.log(`Casted ${type} -> ${this.layer().length} elements`);
   }
 
+  this.i = { linecap:0,linejoin:0,thickness:5 }
+
+  this.toggle = function(type,mod = 1)
+  {
+    if(type == "linecap"){
+      var a = ["butt","square","round"];
+      this.i.linecap += mod;
+      this.style().strokeLinecap = a[this.i.linecap % a.length];
+    }
+    if(type == "linejoin"){
+      var a = ["miter","round","bevel"];
+      this.i.linejoin += mod;
+      this.style().strokeLinejoin = a[this.i.linejoin % a.length];
+    }
+    if(type == "fill"){
+      this.style().fill = this.style().fill == "none" ? this.style().color : "none";
+    }
+    if(type == "thickness"){
+      this.style().thickness = clamp(this.style().thickness+mod,1,40);
+    }
+    dotgrid.guide.refresh();
+  }
+
   this.can_append = function(content)
   {
     for(id in this.layer()){