Allow for drag/drop of verteces
This commit is contained in:
parent
1923c4b04c
commit
66a34a6814
@ -33,8 +33,10 @@ It works by adding control points and selecting a stroke type. So clicking the c
|
||||
### Shortcuts
|
||||
|
||||
- `ctrl+n` New canvas.
|
||||
- `alt+click` Erase target stroke.
|
||||
|
||||
- `ctrl+enter` Toggle Fullscreen.
|
||||
- `alt+click` Erase target control point.
|
||||
- `ctrl+click` Translate target control point.
|
||||
|
||||
## License
|
||||
|
||||
|
4
main.js
4
main.js
@ -6,7 +6,7 @@ let win
|
||||
|
||||
app.on('ready', () =>
|
||||
{
|
||||
win = new BrowserWindow({width: 900, height: 420, minWidth: 390, minHeight: 420, backgroundColor:"#000", frame:false, autoHideMenuBar: true, icon: __dirname + '/icon.ico'})
|
||||
win = new BrowserWindow({width: 390, height: 420, minWidth: 390, minHeight: 420, maxWidth: 390, maxHeight: 420, backgroundColor:"#000", frame:false, autoHideMenuBar: true, icon: __dirname + '/icon.ico'})
|
||||
|
||||
win.loadURL(`file://${__dirname}/sources/index.html`)
|
||||
|
||||
@ -56,7 +56,7 @@ app.on('ready', () =>
|
||||
is_shown = true;
|
||||
})
|
||||
// Open the DevTools.
|
||||
win.webContents.openDevTools()
|
||||
// win.webContents.openDevTools()
|
||||
})
|
||||
|
||||
app.on('window-all-closed', () =>
|
||||
|
@ -9,8 +9,8 @@ body { background:#fff; padding: 5px; font-family: 'input_mono_regular'; -webkit
|
||||
#cursor_to { width:4px; height:4px; background:white; margin-top:-3px; margin-left:-3px; position:absolute; z-index:2500; border-radius:10px; left:-100px; border:1px solid black;}
|
||||
#cursor_end { width:4px; height:4px; background:white; margin-top:-3px; margin-left:-3px; position:absolute; z-index:2500; border-radius:10px; left:-100px; border:1px solid black;}
|
||||
#interface { max-width: 295px;margin:0px auto;font-size: 11px;line-height: 30px; text-transform: uppercase; margin-top:20px;-webkit-app-region: no-drag;}
|
||||
#guide { position: absolute;top: 0px;left: 0px;padding: 10px; width: 300px;height: 300px;}
|
||||
#guide .marker { width:2px; height:2px; position:absolute; margin-top:-1px; margin-left:-1px; border-radius:4px; z-index:50;}
|
||||
#guide,#widgets { position: absolute;top: 0px;left: 0px; width: 300px;height: 300px;}
|
||||
#widgets { z-index: 9000 }
|
||||
#render { display: none }
|
||||
|
||||
.icon { width:25px; height:25px; margin-left:-5px; margin-right:0px; opacity: 0.5}
|
||||
|
@ -56,6 +56,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
|
||||
this.wrapper.appendChild(this.element);
|
||||
this.wrapper.appendChild(this.interface);
|
||||
this.element.appendChild(this.guide.el);
|
||||
this.element.appendChild(this.guide.widgets);
|
||||
this.wrapper.appendChild(this.render.el);
|
||||
|
||||
// Cursors
|
||||
@ -114,9 +115,16 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
|
||||
|
||||
// Cursor
|
||||
|
||||
this.translation = null;
|
||||
|
||||
this.mouse_down = function(e)
|
||||
{
|
||||
var o = e.target.getAttribute("data-operation");
|
||||
|
||||
var pos = this.position_in_grid(new Pos(e.clientX,e.clientY));
|
||||
pos = this.position_on_grid(pos);
|
||||
if(e.ctrlKey){ dotgrid.translation = {from:pos,to:pos}; }
|
||||
|
||||
if(!o){ return; }
|
||||
|
||||
if(o == "line"){ this.draw_line(); }
|
||||
@ -133,10 +141,14 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
|
||||
var pos = this.position_in_grid(new Pos(e.clientX,e.clientY));
|
||||
pos = this.position_on_grid(pos);
|
||||
|
||||
if(e.ctrlKey && dotgrid.translation){ dotgrid.translation.to = pos; }
|
||||
|
||||
this.cursor.style.left = Math.floor(-(pos.x-this.grid_width));
|
||||
this.cursor.style.top = Math.floor(pos.y+this.grid_height);
|
||||
this.cursor_coord.className = -pos.x > this.width/2 ? "fl left" : "fl"
|
||||
this.cursor_coord.textContent = parseInt(-pos.x/this.grid_width)+","+parseInt(pos.y/this.grid_height);
|
||||
|
||||
dotgrid.guide.update();
|
||||
}
|
||||
|
||||
this.mouse_up = function(e)
|
||||
@ -144,6 +156,11 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
|
||||
var pos = this.position_in_grid(new Pos(e.clientX,e.clientY));
|
||||
pos = this.position_on_grid(pos);
|
||||
|
||||
if(dotgrid.translation){
|
||||
dotgrid.translate(dotgrid.translation);
|
||||
return;
|
||||
}
|
||||
|
||||
if(e.altKey){ dotgrid.delete_at(pos); return; }
|
||||
if(pos.x>0) return;
|
||||
|
||||
@ -153,6 +170,19 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
|
||||
this.draw();
|
||||
}
|
||||
|
||||
this.translate = function(t)
|
||||
{
|
||||
for(id in dotgrid.segments){
|
||||
var segment = dotgrid.segments[id];
|
||||
if(segment.from && segment.from.is_equal(dotgrid.translation.from)){ segment.from = new Pos(-dotgrid.translation.to.x,dotgrid.translation.to.y)}
|
||||
if(segment.to && segment.to.is_equal(dotgrid.translation.from)){ segment.to = new Pos(-dotgrid.translation.to.x,dotgrid.translation.to.y)}
|
||||
if(segment.end && segment.end.is_equal(dotgrid.translation.from)){ segment.end = new Pos(-dotgrid.translation.to.x,dotgrid.translation.to.y)}
|
||||
}
|
||||
|
||||
dotgrid.translation = null;
|
||||
dotgrid.draw();
|
||||
}
|
||||
|
||||
// Setters
|
||||
|
||||
this.set_from = function(pos)
|
||||
@ -229,7 +259,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
|
||||
return;
|
||||
}
|
||||
// Move offset
|
||||
this.offset = this.offset.add(new Pos(move.x,move.y));
|
||||
// this.offset = this.offset.add(new Pos(move.x,move.y));
|
||||
this.draw();
|
||||
}
|
||||
|
||||
@ -292,6 +322,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
|
||||
|
||||
this.render.draw();
|
||||
this.update_interface();
|
||||
this.guide.update();
|
||||
}
|
||||
|
||||
// Draw
|
||||
@ -456,12 +487,12 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
|
||||
return new Pos((window.innerWidth/2) - (this.width/2) - pos.x,pos.y - (30+10*(this.scale)))
|
||||
}
|
||||
|
||||
this.position_on_grid = function(pos) // rounds the mouse position to the nearest cell, and limits the coords to within the box
|
||||
this.position_on_grid = function(pos)
|
||||
{
|
||||
x = Math.round(pos.x/this.grid_width)*this.grid_width
|
||||
y = Math.round(pos.y/this.grid_height)*this.grid_height
|
||||
off = (x<-this.width || x>0 || y>this.height || y<0)
|
||||
if(off) { // change position so the cursor will not be seen
|
||||
if(off) {
|
||||
x = 50
|
||||
y = -50
|
||||
}
|
||||
|
@ -2,34 +2,54 @@ function Guide()
|
||||
{
|
||||
this.el = document.createElement("canvas");
|
||||
this.el.id = "guide";
|
||||
this.el.width = 600;
|
||||
this.el.height = 600;
|
||||
this.el.style.width = "300px";
|
||||
this.el.style.height = "300px";
|
||||
this.markers;
|
||||
this.el.width = 640;
|
||||
this.el.height = 640;
|
||||
this.el.style.width = "320px";
|
||||
this.el.style.height = "320px";
|
||||
|
||||
this.widgets = document.createElement("canvas");
|
||||
this.widgets.id = "widgets";
|
||||
this.widgets.width = 640;
|
||||
this.widgets.height = 640;
|
||||
this.widgets.style.width = "320px";
|
||||
this.widgets.style.height = "320px";
|
||||
|
||||
this.start = function()
|
||||
{
|
||||
this.update();
|
||||
for (var x = dotgrid.grid_x; x >= 0; x--) {
|
||||
for (var y = dotgrid.grid_y; y >= 0; y--) {
|
||||
var pos_x = parseInt(x * dotgrid.grid_width) + dotgrid.grid_width ;
|
||||
var pos_y = parseInt(y * dotgrid.grid_height) + dotgrid.grid_height ;
|
||||
var is_step = x % dotgrid.block_x == 0 && y % dotgrid.block_y == 0;
|
||||
var radius = is_step ? 2.5 : 1.5;
|
||||
dotgrid.guide.draw_marker({x:pos_x,y:pos_y},radius,is_step);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.clear = function()
|
||||
{
|
||||
this.el.getContext('2d').clearRect(0, 0, 600, 600);
|
||||
this.widgets.getContext('2d').clearRect(0, 0, 600, 600);
|
||||
}
|
||||
|
||||
this.update = function()
|
||||
{
|
||||
this.clear();
|
||||
|
||||
for (var x = dotgrid.grid_x; x >= 0; x--) {
|
||||
for (var y = dotgrid.grid_y; y >= 0; y--) {
|
||||
var pos_x = parseInt(x * dotgrid.grid_width) ;
|
||||
var pos_y = parseInt(y * dotgrid.grid_height) ;
|
||||
var is_step = x % dotgrid.block_x == 0 && y % dotgrid.block_y == 0;
|
||||
var radius = is_step ? 1.5 : 0.5;
|
||||
dotgrid.guide.draw_marker({x:pos_x * 2,y:pos_y * 2},radius,is_step);
|
||||
var handles = [];
|
||||
for(id in dotgrid.segments){
|
||||
var segment = dotgrid.segments[id];
|
||||
handles = handles.concat(segment.handles())
|
||||
}
|
||||
|
||||
for(id in handles){
|
||||
var handle = handles[id];
|
||||
this.draw_handle(handle,4);
|
||||
}
|
||||
|
||||
// Translations
|
||||
if(dotgrid.translation){
|
||||
this.draw_translation();
|
||||
}
|
||||
}
|
||||
|
||||
@ -37,8 +57,46 @@ function Guide()
|
||||
{
|
||||
var ctx = this.el.getContext('2d');
|
||||
ctx.beginPath();
|
||||
ctx.arc(pos.x, pos.y, radius, 0, 2 * Math.PI, false);
|
||||
ctx.fillStyle = step ? 'green' : 'red';
|
||||
ctx.arc(pos.x * 2, pos.y * 2, radius, 0, 2 * Math.PI, false);
|
||||
ctx.fillStyle = step ? dotgrid.theme.active.f_med : dotgrid.theme.active.f_low;
|
||||
ctx.fill();
|
||||
ctx.closePath();
|
||||
}
|
||||
|
||||
this.draw_handle = function(pos,radius)
|
||||
{
|
||||
var ctx = this.widgets.getContext('2d');
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.arc((pos.x * 2)+20, (pos.y * 2)+20, 10, 0, 2 * Math.PI, false);
|
||||
ctx.fillStyle = dotgrid.theme.active.f_high;
|
||||
ctx.fill();
|
||||
ctx.closePath();
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.arc((pos.x * 2)+20, (pos.y * 2)+20, radius, 0, 2 * Math.PI, false);
|
||||
ctx.fillStyle = dotgrid.theme.active.f_high;
|
||||
ctx.fill();
|
||||
ctx.lineWidth = 3;
|
||||
ctx.strokeStyle = dotgrid.theme.active.background;
|
||||
ctx.stroke();
|
||||
ctx.closePath();
|
||||
}
|
||||
|
||||
this.draw_translation = function()
|
||||
{
|
||||
// From
|
||||
var ctx = this.widgets.getContext('2d');
|
||||
var from = dotgrid.translation.from;
|
||||
var to = dotgrid.translation.to;
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.moveTo((from.x * -2)+20,(from.y * 2)+20);
|
||||
ctx.lineTo((to.x * -2)+20,(to.y * 2)+20);
|
||||
ctx.lineCap="round";
|
||||
ctx.lineWidth = 5;
|
||||
ctx.strokeStyle = dotgrid.theme.active.f_high;
|
||||
ctx.stroke();
|
||||
ctx.closePath();
|
||||
}
|
||||
}
|
@ -35,4 +35,13 @@ function Path_Arc(from,to,orientation,end)
|
||||
|
||||
return html
|
||||
}
|
||||
|
||||
this.handles = function()
|
||||
{
|
||||
var a = [];
|
||||
if(this.from){ a.push(this.from); }
|
||||
if(this.to){ a.push(this.to); }
|
||||
if(this.end){ a.push(this.end); }
|
||||
return a;
|
||||
}
|
||||
}
|
@ -28,4 +28,13 @@ function Path_Bezier(from,to,end)
|
||||
|
||||
return html += "Q"+this.to.scale(dotgrid.scale)+" "+this.end.scale(dotgrid.scale)+" "
|
||||
}
|
||||
|
||||
this.handles = function()
|
||||
{
|
||||
var a = [];
|
||||
if(this.from){ a.push(this.from); }
|
||||
if(this.to){ a.push(this.to); }
|
||||
if(this.end){ a.push(this.end); }
|
||||
return a;
|
||||
}
|
||||
}
|
@ -34,4 +34,13 @@ function Path_Line(from,to,end = null)
|
||||
|
||||
return html
|
||||
}
|
||||
|
||||
this.handles = function()
|
||||
{
|
||||
var a = [];
|
||||
if(this.from){ a.push(this.from); }
|
||||
if(this.to){ a.push(this.to); }
|
||||
if(this.end){ a.push(this.end); }
|
||||
return a;
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user