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

Improving all the cursor stuff.

Browse Source
This commit is contained in:
Devine Lu Linvega
2018-08-03 10:57:35 +12:00
parent dba1100033
commit 695a5b1af1
7 changed files with 139 additions and 600 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
desktop/sources/scripts/cursor.js Normal file
View File

@@ -0,0 +1,104 @@
function Cursor()
{
this.pos = {x:0,y:0},
this.translation = null,
this.translate = function(from = null,to = null, multi = false)
{
if((from || to) && this.translation == null){ this.translation = {multi:multi}; console.log("Begin translation") }
if(from){ this.translation.from = from; }
if(to){ this.translation.to = to; }
if(!from && !to){
this.translation = null;
}
}
this.down = function(e)
{
this.pos = this.pos_from_event(e)
// Translation
if(dotgrid.tool.vertex_at(this.pos)){
this.translate(this.pos,this.pos,e.shiftKey)
}
dotgrid.guide.refresh();
dotgrid.interface.refresh();
e.preventDefault();
}
this.move = function(e)
{
this.pos = this.pos_from_event(e)
// Translation
if(this.translation){
this.translate(null,this.pos)
}
dotgrid.guide.refresh();
dotgrid.interface.refresh();
e.preventDefault();
}
this.up = function(e)
{
this.pos = this.pos_from_event(e)
if(e.altKey){ dotgrid.tool.remove_segments_at(this.pos); return; }
// Translation
if(this.translation){
if(this.translation.multi){ dotgrid.tool.translate_multi(this.translation.from,this.translation.to); }
else{ dotgrid.tool.translate(this.translation.from,this.translation.to); }
}
else{
dotgrid.tool.add_vertex({x:this.pos.x,y:this.pos.y});
}
this.translate();
dotgrid.interface.refresh();
dotgrid.guide.refresh();
e.preventDefault();
}
this.alt = function(e)
{
this.pos = this.pos_from_event(e)
dotgrid.tool.remove_segments_at(this.pos);
e.preventDefault();
setTimeout(() => { dotgrid.tool.clear(); },150);
}
// Position Mods
this.pos_from_event = function(e)
{
return this.pos_snap(this.pos_relative({x:e.clientX,y:e.clientY}))
}
this.pos_relative = function(pos)
{
var ratio = dotgrid.guide.scale == 1 ? 2 : 1.5;
var offset = {x:dotgrid.guide.el.offsetLeft * ratio,y:dotgrid.guide.el.offsetTop * ratio}
return {
x:pos.x - offset.x,
y:pos.y - offset.y
};
}
this.pos_snap = function(pos)
{
var grid = dotgrid.tool.settings.size.width/dotgrid.grid_x;
return {
x:clamp(step(pos.x,grid),0,dotgrid.tool.settings.size.width),
y:clamp(step(pos.y,grid),0,dotgrid.tool.settings.size.height)
};
}
}

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

@@ -8,14 +8,13 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
this.renderer = new Renderer();
this.tool = new Tool();
this.picker = new Picker();
this.cursor = new Cursor();
this.grid_x = grid_x;
this.grid_y = grid_y;
this.block_x = block_x;
this.block_y = block_y;
this.cursor = { pos:{x:0,y:0},translation:null,multi:false,updated:0 }
this.install = function()
{
document.getElementById("app").appendChild(this.guide.el);
@@ -102,10 +101,10 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
this.controller.commit();
document.addEventListener('mousedown', function(e){ dotgrid.mouse_down(e); }, false);
document.addEventListener('mousemove', function(e){ dotgrid.mouse_move(e); }, false);
document.addEventListener('contextmenu', function(e){ dotgrid.mouse_alt(e); }, false);
document.addEventListener('mouseup', function(e){ dotgrid.mouse_up(e);}, false);
document.addEventListener('mousedown', function(e){ dotgrid.cursor.down(e); }, false);
document.addEventListener('mousemove', function(e){ dotgrid.cursor.move(e); }, false);
document.addEventListener('contextmenu', function(e){ dotgrid.cursor.alt(e); }, false);
document.addEventListener('mouseup', function(e){ dotgrid.cursor.up(e);}, false);
document.addEventListener('copy', function(e){ dotgrid.copy(e); }, false);
document.addEventListener('cut', function(e){ dotgrid.cut(e); }, false);
document.addEventListener('paste', function(e){ dotgrid.paste(e); }, false);
@@ -211,102 +210,6 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
}
}
// Cursor
this.mouse_down = function(e)
{
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(10,true,true); return; }
if(o == "linecap"){ this.mod_linecap(); return; }
if(o == "linejoin"){ this.mod_linejoin(); return; }
if(o == "mirror"){ this.tool.toggle_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; }
}
dotgrid.guide.refresh();
dotgrid.interface.refresh();
}
this.mouse_move = function(e)
{
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();
this.cursor.operation = e.target.getAttribute("ar");
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; }
dotgrid.guide.refresh();
dotgrid.interface.refresh();
e.preventDefault();
}
this.mouse_up = function(e)
{
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 || e.target.id != "guide"){ return; }
if(pos.x > 0) { dotgrid.cursor.translation = null; return; }
if(dotgrid.cursor.translation && (Math.abs(dotgrid.cursor.translation.from.x) != Math.abs(dotgrid.cursor.translation.to.x) || Math.abs(dotgrid.cursor.translation.from.y) != Math.abs(dotgrid.cursor.translation.to.y))){
if(dotgrid.cursor.multi){
dotgrid.tool.translate_multi(dotgrid.cursor.translation.from,dotgrid.cursor.translation.to);
}
else{
dotgrid.tool.translate(dotgrid.cursor.translation.from,dotgrid.cursor.translation.to);
}
dotgrid.cursor.translation = null;
dotgrid.cursor.multi = null;
dotgrid.guide.refresh();
e.preventDefault();
return;
}
this.tool.add_vertex({x:pos.x * -1,y:pos.y});
dotgrid.cursor.translation = null;
dotgrid.interface.refresh();
dotgrid.guide.refresh();
e.preventDefault();
}
this.mouse_alt = function(e)
{
var pos = this.position_in_grid({x:e.clientX+5,y:e.clientY-5}); pos = this.position_on_grid(pos);
dotgrid.tool.remove_segments_at(pos);
e.preventDefault();
setTimeout(() => { dotgrid.tool.clear(); },150);
}
// Toggles
this.mod_thickness = function(mod = 10,step = false,cap = false)
@@ -454,25 +357,6 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
dotgrid.guide.refresh();
}
// Normalizers
this.position_in_grid = function(pos)
{
return {x:(window.innerWidth/2) - (this.tool.settings.size.width/2) - pos.x - 5,y:pos.y - (30+5)}
}
this.position_on_grid = function(pos)
{
pos.y = pos.y - 7.5
pos.x = pos.x + 7.5
x = Math.round(pos.x/this.grid_width)*this.grid_width
y = Math.round(pos.y/this.grid_height)*this.grid_height
x = clamp(x * -1,0,this.tool.settings.size.width)
y = clamp(y,0,this.tool.settings.size.height)
return {x:x*-1,y:y};
}
}
window.addEventListener('resize', function(e)
@@ -510,4 +394,4 @@ String.prototype.capitalize = function()
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; }
function step(v,s){ return parseInt(v/s) * s; }
function step(v,s){ return Math.round(v/s) * s; }

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

@@ -8,7 +8,7 @@ function Guide()
this.el.style.height = "320px";
this.show_extras = true;
var scale = 2; // require('electron').remote.getCurrentWindow().scaleFactor;
this.scale = 2; // require('electron').remote.getCurrentWindow().this.scaleFactor;
this.start = function()
{
@@ -21,11 +21,11 @@ function Guide()
this.clear();
if(dotgrid.tool.index == 2){ this.draw_markers() ; this.draw_vertices() }
this.draw_path(new Generator(dotgrid.tool.layers[2],dotgrid.tool.styles[2]).toString({x:15,y:15},scale),dotgrid.tool.styles[2])
this.draw_path(new Generator(dotgrid.tool.layers[2],dotgrid.tool.styles[2]).toString({x:15,y:15},this.scale),dotgrid.tool.styles[2])
if(dotgrid.tool.index == 1){ this.draw_markers() ; this.draw_vertices() }
this.draw_path(new Generator(dotgrid.tool.layers[1],dotgrid.tool.styles[1]).toString({x:15,y:15},scale),dotgrid.tool.styles[1])
this.draw_path(new Generator(dotgrid.tool.layers[1],dotgrid.tool.styles[1]).toString({x:15,y:15},this.scale),dotgrid.tool.styles[1])
if(dotgrid.tool.index == 0){ this.draw_markers(); this.draw_vertices() }
this.draw_path(new Generator(dotgrid.tool.layers[0],dotgrid.tool.styles[0]).toString({x:15,y:15},scale),dotgrid.tool.styles[0])
this.draw_path(new Generator(dotgrid.tool.layers[0],dotgrid.tool.styles[0]).toString({x:15,y:15},this.scale),dotgrid.tool.styles[0])
this.draw_handles()
this.draw_translation();
@@ -35,7 +35,7 @@ function Guide()
this.clear = function()
{
this.el.getContext('2d').clearRect(0, 0, this.el.width*scale, this.el.height*scale);
this.el.getContext('2d').clearRect(0, 0, this.el.width*this.scale, this.el.height*this.scale);
}
this.toggle = function()
@@ -47,8 +47,8 @@ function Guide()
this.resize = function(size)
{
var offset = 30
this.el.width = (size.width+offset)*scale;
this.el.height = (size.height+offset)*scale;
this.el.width = (size.width+offset)*this.scale;
this.el.height = (size.height+offset)*this.scale;
this.el.style.width = (size.width+offset)+"px";
this.el.style.height = (size.height+offset)+"px";
@@ -95,7 +95,7 @@ function Guide()
var ctx = this.el.getContext('2d');
ctx.beginPath();
ctx.lineWidth = 2;
ctx.arc((pos.x * scale)+30, (pos.y * scale)+30, radius, 0, 2 * Math.PI, false);
ctx.arc((pos.x * this.scale)+30, (pos.y * this.scale)+30, radius, 0, 2 * Math.PI, false);
ctx.fillStyle = dotgrid.theme.active.f_med;
ctx.fill();
ctx.closePath();
@@ -109,7 +109,7 @@ function Guide()
ctx.setLineDash([0,0]);
ctx.lineWidth = 3;
ctx.lineCap="round";
ctx.arc(Math.abs(pos.x * -scale)+30, Math.abs(pos.y * scale)+30, radius+3, 0, 2 * Math.PI, false);
ctx.arc(Math.abs(pos.x * -this.scale)+30, Math.abs(pos.y * this.scale)+30, radius+3, 0, 2 * Math.PI, false);
ctx.fillStyle = dotgrid.theme.active.f_high;
ctx.fill();
ctx.strokeStyle = dotgrid.theme.active.f_high;
@@ -117,13 +117,13 @@ function Guide()
ctx.closePath();
ctx.beginPath();
ctx.arc((pos.x * scale)+30, (pos.y * scale)+30, radius, 0, 2 * Math.PI, false);
ctx.arc((pos.x * this.scale)+30, (pos.y * this.scale)+30, radius, 0, 2 * Math.PI, false);
ctx.fillStyle = dotgrid.theme.active.f_low;
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.arc((pos.x * scale)+30, (pos.y * scale)+30, radius-3, 0, 2 * Math.PI, false);
ctx.arc((pos.x * this.scale)+30, (pos.y * this.scale)+30, radius-3, 0, 2 * Math.PI, false);
ctx.fillStyle = dotgrid.theme.active.f_high;
ctx.fill();
ctx.closePath();
@@ -134,7 +134,7 @@ function Guide()
var ctx = this.el.getContext('2d');
ctx.beginPath();
ctx.lineWidth = 2;
ctx.arc(pos.x * scale, pos.y * scale, radius, 0, 2 * Math.PI, false);
ctx.arc(pos.x * this.scale, pos.y * this.scale, radius, 0, 2 * Math.PI, false);
ctx.fillStyle = step ? dotgrid.theme.active.f_med : dotgrid.theme.active.f_low;
ctx.fill();
ctx.closePath();
@@ -148,7 +148,7 @@ function Guide()
ctx.setLineDash([0,0]);
ctx.strokeStyle = style.color;
ctx.lineWidth = style.thickness * scale;
ctx.lineWidth = style.thickness * this.scale;
ctx.lineCap = style.strokeLinecap;
ctx.lineJoin = style.strokeLinejoin;
@@ -174,8 +174,8 @@ function Guide()
if(to.x<=0) {
ctx.beginPath();
ctx.setLineDash([0,0]);
ctx.moveTo((from.x * -scale)+30,(from.y * scale)+30);
ctx.lineTo((to.x * -scale)+30,(to.y * scale)+30);
ctx.moveTo((from.x * -this.scale)+30,(from.y * this.scale)+30);
ctx.lineTo((to.x * -this.scale)+30,(to.y * this.scale)+30);
ctx.lineCap="round";
ctx.lineWidth = 5;
ctx.strokeStyle = dotgrid.theme.active.b_inv;
@@ -192,7 +192,7 @@ function Guide()
ctx.setLineDash([0,0]);
ctx.lineWidth = 3;
ctx.lineCap="round";
ctx.arc(Math.abs(pos.x * -scale)+30, Math.abs(pos.y * scale)+30, 3, 0, 2 * Math.PI, false);
ctx.arc(Math.abs(pos.x * -this.scale), Math.abs(pos.y * this.scale), 3, 0, 2 * Math.PI, false);
ctx.fillStyle = dotgrid.theme.active.f_low;
ctx.fill();
ctx.closePath();
@@ -201,7 +201,16 @@ function Guide()
ctx.setLineDash([0,0]);
ctx.lineWidth = 3;
ctx.lineCap="round";
ctx.arc(Math.abs(pos.x * -scale)+30, Math.abs(pos.y * scale)+30, clamp(radius,5,100), 0, 2 * Math.PI, false);
ctx.arc(Math.abs(pos.x * -this.scale)+30, Math.abs(pos.y * this.scale)+30, 3, 0, 2 * Math.PI, false);
ctx.fillStyle = dotgrid.theme.active.f_low;
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.setLineDash([0,0]);
ctx.lineWidth = 3;
ctx.lineCap="round";
ctx.arc(Math.abs(pos.x * -this.scale)+30, Math.abs(pos.y * this.scale)+30, clamp(radius,5,100), 0, 2 * Math.PI, false);
ctx.strokeStyle = dotgrid.theme.active.f_med;
ctx.stroke();
ctx.closePath();