diff --git a/desktop/sources/links/main.css b/desktop/sources/links/main.css
index f1c5539..dda67dd 100644
--- a/desktop/sources/links/main.css
+++ b/desktop/sources/links/main.css
@@ -4,10 +4,10 @@ body { padding: 5px; font-family: 'input_mono_regular'; -webkit-user-select: non
#app { display: flex; flex-direction: column; align-items: center; -webkit-app-region: drag; padding-top:30px;}
#dotgrid { margin:0px auto; position:relative; padding:15px;-webkit-app-region: no-drag; width:310px; height:310px; }
-#guide { position: absolute;width: 300px;height: 300px; transition: opacity 250ms;}
+#guide { position: absolute;width: 300px;height: 300px; transition: opacity 150ms;}
#render { display: none }
#vector { z-index: 1000;position: relative;width:300px; height:300px; }
-#preview { position: absolute; top:15px; left:15px; stroke-dasharray: 4,4;}
+#preview { z-index: 1001;position: absolute; top:15px; left:15px; stroke-dasharray: 4,4;}
/* Interface */
diff --git a/desktop/sources/scripts/dotgrid.js b/desktop/sources/scripts/dotgrid.js
index 92ff2c6..59b63b8 100644
--- a/desktop/sources/scripts/dotgrid.js
+++ b/desktop/sources/scripts/dotgrid.js
@@ -22,7 +22,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
this.layer_2 = document.createElementNS("http://www.w3.org/2000/svg", "path"); this.layer_2.id = "layer_2"; this.layer_2.style.stroke = "#999";
this.layer_3 = document.createElementNS("http://www.w3.org/2000/svg", "path"); this.layer_3.id = "layer_3"; this.layer_3.style.stroke = "#ccc";
- this.cursor = { pos:{x:0,y:0},translation:null,multi:false }
+ this.cursor = { pos:{x:0,y:0},translation:null,multi:false,updated:0 }
this.install = function()
{
@@ -148,7 +148,6 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
document.addEventListener('copy', function(e){ dotgrid.copy(e); e.preventDefault(); }, false);
document.addEventListener('cut', function(e){ dotgrid.cut(e); e.preventDefault(); }, false);
document.addEventListener('paste', function(e){ dotgrid.paste(e); e.preventDefault(); }, false);
-
window.addEventListener('drop', dotgrid.drag);
dotgrid.set_size({width:300,height:300});
@@ -197,34 +196,35 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
this.mouse_down = function(e)
{
- var pos = this.position_in_grid({x:e.clientX+5,y:e.clientY-5}); pos = this.position_on_grid(pos);
+ var o = e.target.getAttribute("ar");
+
+ if(o){
+ if(o == "line"){ this.tool.cast("line"); return; }
+ if(o == "arc_c"){ this.tool.cast("arc_c"); return;}
+ if(o == "arc_r"){ this.tool.cast("arc_r"); return; }
+ if(o == "bezier"){ this.tool.cast("bezier"); return; }
+ if(o == "close"){ this.tool.cast("close"); return; }
+
+ if(o == "thickness"){ this.mod_thickness(); return; }
+ if(o == "linecap"){ this.mod_linecap(); return; }
+ if(o == "linejoin"){ this.mod_linejoin(); return; }
+ if(o == "mirror"){ this.mod_mirror(); return; }
+ if(o == "fill"){ this.mod_fill(); return; }
+ if(o == "color"){ setTimeout(()=>{ this.picker.start(); }, 100); return; }
+ if(o == "depth"){ this.tool.select_next_layer(); return; }
+
+ e.preventDefault();
+ }
+
+ var pos = this.position_in_grid({x:e.clientX+5,y:e.clientY-5});
+ pos = this.position_on_grid(pos);
if(e.altKey){ dotgrid.tool.remove_segments_at(pos); return; }
if(dotgrid.tool.vertex_at(pos)){
console.log("Begin translation"); dotgrid.cursor.translation = {from:pos,to:pos};
if(e.shiftKey){ console.log("Begin translation(multi)"); dotgrid.cursor.multi = true; }
- return;
}
-
- var o = e.target.getAttribute("ar");
- if(!o){ return; }
-
- if(o == "line"){ this.tool.cast("line"); }
- if(o == "arc_c"){ this.tool.cast("arc_c"); }
- if(o == "arc_r"){ this.tool.cast("arc_r"); }
- if(o == "bezier"){ this.tool.cast("bezier"); }
- if(o == "close"){ this.tool.cast("close"); }
-
- if(o == "thickness"){ this.mod_thickness(); }
- if(o == "linecap"){ this.mod_linecap(); }
- if(o == "linejoin"){ this.mod_linejoin(); }
- if(o == "mirror"){ this.mod_mirror(); }
- if(o == "fill"){ this.mod_fill(); }
- if(o == "color"){ setTimeout(()=>{ this.picker.start(); }, 100) }
- if(o == "depth"){ this.tool.select_next_layer(); }
-
- e.preventDefault();
}
this.mouse_move = function(e)
@@ -232,6 +232,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
var pos = this.position_in_grid({x:e.clientX+5,y:e.clientY-5}); pos = this.position_on_grid(pos);
this.cursor.pos = pos;
+ this.cursor.updated = new Date().getTime();
if(dotgrid.cursor.translation && (Math.abs(dotgrid.cursor.translation.from.x) != Math.abs(pos.x) || Math.abs(dotgrid.cursor.translation.from.y) != Math.abs(pos.y))){ dotgrid.cursor.translation.to = pos; }
@@ -242,7 +243,10 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
this.mouse_up = function(e)
{
- var pos = this.position_in_grid({x:e.clientX+5,y:e.clientY-5}); pos = this.position_on_grid(pos);
+ if(e.target.getAttribute("ar")){ return } // If clicking on interface
+
+ var pos = this.position_in_grid({x:e.clientX+5,y:e.clientY-5});
+ pos = this.position_on_grid(pos);
if(e.altKey){ return; }
@@ -281,9 +285,9 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
this.preview = function(operation)
{
- if(this.preview_prev == operation ){ return; }
+ if(this.preview_prev == operation){ return; }
- this.preview_el.innerHTML = !operation || operation == "close" ? `` : ``;
+ this.preview_el.innerHTML = !operation || operation == "close" || !dotgrid.tool.can_cast(operation) ? `` : ``;
this.preview_prev = operation;
}
@@ -496,17 +500,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
return {x:x*-1,y:y};
}
- function is_json(text)
- {
- try{
- JSON.parse(text);
- return true;
- }
- catch (error){
- return false;
- }
- }
-
+ function is_json(text){ try{ JSON.parse(text);return true; } catch(error){ return false; }}
function pos_is_equal(a,b){ return a && b && a.x == b.x && a.y == b.y }
function clamp(v, min, max) { return v < min ? min : v > max ? max : v; }
}
diff --git a/desktop/sources/scripts/guide.js b/desktop/sources/scripts/guide.js
index c93032e..6f1157c 100644
--- a/desktop/sources/scripts/guide.js
+++ b/desktop/sources/scripts/guide.js
@@ -101,7 +101,7 @@ function Guide()
ctx.lineWidth = 3;
ctx.lineCap="round";
ctx.arc((pos.x * 2)+30, (pos.y * 2)+30, radius, 0, 2 * Math.PI, false);
- ctx.strokeStyle = dotgrid.theme.active.f_low;
+ ctx.strokeStyle = pos_is_equal(pos,dotgrid.cursor.pos) ? dotgrid.theme.active.b_inv : dotgrid.theme.active.f_low;
ctx.stroke();
ctx.closePath();
}
@@ -127,7 +127,6 @@ function Guide()
this.draw_cursor = function(pos = dotgrid.cursor.pos,radius = 10)
{
- console.log(pos)
var ctx = this.el.getContext('2d');
ctx.beginPath();
ctx.lineWidth = 3;
@@ -137,4 +136,6 @@ function Guide()
ctx.stroke();
ctx.closePath();
}
+
+ function pos_is_equal(a,b){ return a && b && Math.abs(a.x) == Math.abs(b.x) && Math.abs(a.y) == Math.abs(b.y) }
}
\ No newline at end of file
diff --git a/desktop/sources/scripts/tool.js b/desktop/sources/scripts/tool.js
index ff25f68..f49130e 100644
--- a/desktop/sources/scripts/tool.js
+++ b/desktop/sources/scripts/tool.js
@@ -170,6 +170,11 @@ function Tool()
return false;
}
}
+ if(type == "bezier"){
+ if(this.verteces.length % 2 == 0){
+ return false;
+ }
+ }
return this.verteces.length >= this.reqs[type];
}