Atlas48/pointvec
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improved UI

Browse Source
This commit is contained in:
Devine Lu Linvega 2018-05-09 09:33:17 +12:00
parent 7540fb4f8a
commit 389111d6ca
4 changed files with 41 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
desktop/sources/links/main.css
View File

@ -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 */

68
desktop/sources/scripts/dotgrid.js
View File

@ -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" ? `<path d='M0,0'></path>` : `<path d='${dotgrid.tool.path(dotgrid.tool.index,[{type:operation,verteces:dotgrid.tool.verteces}])}'></path>`;
this.preview_el.innerHTML = !operation || operation == "close" || !dotgrid.tool.can_cast(operation) ? `<path d='M0,0'></path>` : `<path d='${dotgrid.tool.path(dotgrid.tool.index,[{type:operation,verteces:dotgrid.tool.verteces}])}'></path>`;
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; }
}

5
desktop/sources/scripts/guide.js
View File

@ -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) }
}

5
desktop/sources/scripts/tool.js
View File

@ -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];
}