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
|
### Shortcuts
|
||||||
|
|
||||||
- `ctrl+n` New canvas.
|
- `ctrl+n` New canvas.
|
||||||
- `alt+click` Erase target stroke.
|
|
||||||
- `ctrl+enter` Toggle Fullscreen.
|
- `ctrl+enter` Toggle Fullscreen.
|
||||||
|
- `alt+click` Erase target control point.
|
||||||
|
- `ctrl+click` Translate target control point.
|
||||||
|
|
||||||
## License
|
## License
|
||||||
|
|
||||||
|
4
main.js
4
main.js
@ -6,7 +6,7 @@ let win
|
|||||||
|
|
||||||
app.on('ready', () =>
|
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`)
|
win.loadURL(`file://${__dirname}/sources/index.html`)
|
||||||
|
|
||||||
@ -56,7 +56,7 @@ app.on('ready', () =>
|
|||||||
is_shown = true;
|
is_shown = true;
|
||||||
})
|
})
|
||||||
// Open the DevTools.
|
// Open the DevTools.
|
||||||
win.webContents.openDevTools()
|
// win.webContents.openDevTools()
|
||||||
})
|
})
|
||||||
|
|
||||||
app.on('window-all-closed', () =>
|
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_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;}
|
#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;}
|
#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,#widgets { position: absolute;top: 0px;left: 0px; width: 300px;height: 300px;}
|
||||||
#guide .marker { width:2px; height:2px; position:absolute; margin-top:-1px; margin-left:-1px; border-radius:4px; z-index:50;}
|
#widgets { z-index: 9000 }
|
||||||
#render { display: none }
|
#render { display: none }
|
||||||
|
|
||||||
.icon { width:25px; height:25px; margin-left:-5px; margin-right:0px; opacity: 0.5}
|
.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.element);
|
||||||
this.wrapper.appendChild(this.interface);
|
this.wrapper.appendChild(this.interface);
|
||||||
this.element.appendChild(this.guide.el);
|
this.element.appendChild(this.guide.el);
|
||||||
|
this.element.appendChild(this.guide.widgets);
|
||||||
this.wrapper.appendChild(this.render.el);
|
this.wrapper.appendChild(this.render.el);
|
||||||
|
|
||||||
// Cursors
|
// Cursors
|
||||||
@ -114,9 +115,16 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
|
|||||||
|
|
||||||
// Cursor
|
// Cursor
|
||||||
|
|
||||||
|
this.translation = null;
|
||||||
|
|
||||||
this.mouse_down = function(e)
|
this.mouse_down = function(e)
|
||||||
{
|
{
|
||||||
var o = e.target.getAttribute("data-operation");
|
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){ return; }
|
||||||
|
|
||||||
if(o == "line"){ this.draw_line(); }
|
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));
|
var pos = this.position_in_grid(new Pos(e.clientX,e.clientY));
|
||||||
pos = this.position_on_grid(pos);
|
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.left = Math.floor(-(pos.x-this.grid_width));
|
||||||
this.cursor.style.top = Math.floor(pos.y+this.grid_height);
|
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.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);
|
this.cursor_coord.textContent = parseInt(-pos.x/this.grid_width)+","+parseInt(pos.y/this.grid_height);
|
||||||
|
|
||||||
|
dotgrid.guide.update();
|
||||||
}
|
}
|
||||||
|
|
||||||
this.mouse_up = function(e)
|
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));
|
var pos = this.position_in_grid(new Pos(e.clientX,e.clientY));
|
||||||
pos = this.position_on_grid(pos);
|
pos = this.position_on_grid(pos);
|
||||||
|
|
||||||
|
if(dotgrid.translation){
|
||||||
|
dotgrid.translate(dotgrid.translation);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
if(e.altKey){ dotgrid.delete_at(pos); return; }
|
if(e.altKey){ dotgrid.delete_at(pos); return; }
|
||||||
if(pos.x>0) 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.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
|
// Setters
|
||||||
|
|
||||||
this.set_from = function(pos)
|
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;
|
return;
|
||||||
}
|
}
|
||||||
// Move offset
|
// 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();
|
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.render.draw();
|
||||||
this.update_interface();
|
this.update_interface();
|
||||||
|
this.guide.update();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Draw
|
// 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)))
|
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
|
x = Math.round(pos.x/this.grid_width)*this.grid_width
|
||||||
y = Math.round(pos.y/this.grid_height)*this.grid_height
|
y = Math.round(pos.y/this.grid_height)*this.grid_height
|
||||||
off = (x<-this.width || x>0 || y>this.height || y<0)
|
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
|
x = 50
|
||||||
y = -50
|
y = -50
|
||||||
}
|
}
|
||||||
|
@ -2,34 +2,54 @@ function Guide()
|
|||||||
{
|
{
|
||||||
this.el = document.createElement("canvas");
|
this.el = document.createElement("canvas");
|
||||||
this.el.id = "guide";
|
this.el.id = "guide";
|
||||||
this.el.width = 600;
|
this.el.width = 640;
|
||||||
this.el.height = 600;
|
this.el.height = 640;
|
||||||
this.el.style.width = "300px";
|
this.el.style.width = "320px";
|
||||||
this.el.style.height = "300px";
|
this.el.style.height = "320px";
|
||||||
this.markers;
|
|
||||||
|
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.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.clear = function()
|
||||||
{
|
{
|
||||||
this.el.getContext('2d').clearRect(0, 0, 600, 600);
|
this.widgets.getContext('2d').clearRect(0, 0, 600, 600);
|
||||||
}
|
}
|
||||||
|
|
||||||
this.update = function()
|
this.update = function()
|
||||||
{
|
{
|
||||||
this.clear();
|
this.clear();
|
||||||
|
|
||||||
for (var x = dotgrid.grid_x; x >= 0; x--) {
|
var handles = [];
|
||||||
for (var y = dotgrid.grid_y; y >= 0; y--) {
|
for(id in dotgrid.segments){
|
||||||
var pos_x = parseInt(x * dotgrid.grid_width) ;
|
var segment = dotgrid.segments[id];
|
||||||
var pos_y = parseInt(y * dotgrid.grid_height) ;
|
handles = handles.concat(segment.handles())
|
||||||
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);
|
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');
|
var ctx = this.el.getContext('2d');
|
||||||
ctx.beginPath();
|
ctx.beginPath();
|
||||||
ctx.arc(pos.x, pos.y, radius, 0, 2 * Math.PI, false);
|
ctx.arc(pos.x * 2, pos.y * 2, radius, 0, 2 * Math.PI, false);
|
||||||
ctx.fillStyle = step ? 'green' : 'red';
|
ctx.fillStyle = step ? dotgrid.theme.active.f_med : dotgrid.theme.active.f_low;
|
||||||
ctx.fill();
|
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
|
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)+" "
|
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
|
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