diff --git a/desktop/sources/scripts/cursor.js b/desktop/sources/scripts/cursor.js
index 27eb2bb..e58bf09 100644
--- a/desktop/sources/scripts/cursor.js
+++ b/desktop/sources/scripts/cursor.js
@@ -1,7 +1,8 @@
function Cursor()
{
- this.pos = {x:0,y:0},
- this.translation = null,
+ this.pos = {x:0,y:0};
+ this.translation = null;
+ this.operation = null;
this.translate = function(from = null,to = null, multi = false)
{
diff --git a/desktop/sources/scripts/dotgrid.js b/desktop/sources/scripts/dotgrid.js
index e4d8317..d1824bf 100644
--- a/desktop/sources/scripts/dotgrid.js
+++ b/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)
diff --git a/desktop/sources/scripts/guide.js b/desktop/sources/scripts/guide.js
index 6c91b3c..09d4f21 100644
--- a/desktop/sources/scripts/guide.js
+++ b/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; }
diff --git a/desktop/sources/scripts/interface.js b/desktop/sources/scripts/interface.js
index 8ad89fb..133b88c 100644
--- a/desktop/sources/scripts/interface.js
+++ b/desktop/sources/scripts/interface.js
@@ -15,38 +15,55 @@ function Interface()
this.el.appendChild(dotgrid.picker.el);
var html = ""
- var tools = {
- line: ["line","M60,60 L240,240","A"],
- arc_c: ["arc clockwise","M60,60 A180,180 0 0,1 240,240","S"],
- arc_r: ["arc reverse","M60,60 A180,180 0 0,0 240,240","D"],
- 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"],
- 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"],
-
- 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"],
- fill: ["fill","M60,60 L60,150 L150,150 L240,150 L240,240 Z","R"],
- 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"],
+ var options = {
+ cast:{
+ line: ["line","M60,60 L240,240","A"],
+ arc_c: ["arc clockwise","M60,60 A180,180 0 0,1 240,240","S"],
+ arc_r: ["arc reverse","M60,60 A180,180 0 0,0 240,240","D"],
+ 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"]
+ },
+ toggle:{
+ 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"],
+ 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"],
+ 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"],
+ 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){
- var tool = tools[id];
- var shortcut = tool[2];
- html += ``
+ for(type in options){
+ var tools = options[type];
+ for(name in tools){
+ var tool = tools[name];
+ var shortcut = tool[2];
+ html += ``
+ }
+
}
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;
diff --git a/desktop/sources/scripts/tool.js b/desktop/sources/scripts/tool.js
index 8f779aa..f207782 100644
--- a/desktop/sources/scripts/tool.js
+++ b/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()){