diff --git a/desktop/sources/links/main.css b/desktop/sources/links/main.css index e5c5ca1..e4cf4b6 100644 --- a/desktop/sources/links/main.css +++ b/desktop/sources/links/main.css @@ -1,14 +1,10 @@ body { padding: 5px; font-family: 'input_mono_regular'; -webkit-user-select: none; overflow: hidden; padding-left:5px; transition: background 500ms} -#app { display: flex; flex-direction: column; align-items: center;} +#app { display: flex; flex-direction: column; align-items: center; -webkit-app-region: drag;} #wrapper { padding: 25px; padding-bottom: 15px; -webkit-app-region: drag; padding-left:15px;} #dotgrid { margin:0px auto; position:relative; padding:10px;-webkit-app-region: no-drag; width:310px; height:310px; } -#cursor { opacity: 1; width:6px; height:6px; position:absolute; z-index:25; border-radius:5px; border:2px solid black;} -#cursor_from { width:4px; height:4px; margin-top:2px; margin-left:2px; position:absolute; z-index:2500; border-radius:10px; left:-100px;border:1px solid black;} -#cursor_to { width:4px; height:4px; margin-top:2px; margin-left:2px; position:absolute; z-index:2500; border-radius:10px; left:-100px; border:1px solid black;} -#cursor_end { width:4px; height:4px; margin-top:2px; margin-left:2px; position:absolute; z-index:2500; border-radius:10px; left:-100px; border:1px solid black;} - +#cursor { opacity: 1; width:6px; height:6px; position:absolute; z-index:25; border-radius:15px; background:white; margin-left:2px; margin-top:2px;} #cursor_x { position: absolute; top:0px; display: block; width:20px; height:10px; font-size: 11px; text-align: center; margin-left:10px; transition: left 100ms } #cursor_y { position: absolute; left:-10px; display: block; width:20px; height:10px; font-size: 11px; text-align: right; margin-top:15px; transition: top 100ms } @@ -54,6 +50,6 @@ body { background:var(--background) !important; } .icon { color:var(--f_high) !important; stroke:var(--f_high) !important; } #dotgrid svg.vector { stroke:var(--f_high) !important; } #dotgrid #preview { stroke:var(--f_high) !important; } -#dotgrid #cursor { border-color:var(--f_med); } +#dotgrid #cursor { background:var(--f_med); } #dotgrid #cursor.keyboard { border-color:var(--f_high) !Important; } \ No newline at end of file diff --git a/desktop/sources/scripts/dotgrid.js b/desktop/sources/scripts/dotgrid.js index 238c75b..ced2472 100644 --- a/desktop/sources/scripts/dotgrid.js +++ b/desktop/sources/scripts/dotgrid.js @@ -283,7 +283,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) dotgrid.preview(e.target.getAttribute("ar")); dotgrid.move_cursor(pos) - dotgrid.guide.update(); + dotgrid.guide.refresh(); e.preventDefault(); } @@ -490,7 +490,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) this.preview(); this.render.draw(); this.interface.update(); - this.guide.update(); + this.guide.refresh(); } // Draw diff --git a/desktop/sources/scripts/guide.js b/desktop/sources/scripts/guide.js index afaa9a2..fdab09b 100644 --- a/desktop/sources/scripts/guide.js +++ b/desktop/sources/scripts/guide.js @@ -10,7 +10,7 @@ function Guide() this.start = function() { this.clear(); - this.draw(); + this.refresh(); } this.toggle = function() @@ -18,19 +18,6 @@ function Guide() this.el.style.opacity = !this.el.style.opacity || this.el.style.opacity == 1 ? 0 : 1; } - this.draw = function() - { - 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.resize = function(size) { this.el.width = (size.width+40)*2; @@ -38,7 +25,7 @@ function Guide() this.el.style.width = (size.width+40)+"px"; this.el.style.height = (size.height+40)+"px"; - this.update(); + this.refresh(); } this.clear = function() @@ -46,14 +33,28 @@ function Guide() this.el.getContext('2d').clearRect(0, 0, this.el.width*2, this.el.height*2); } - this.update = function() + this.refresh = function() { + console.log("refresh") this.clear(); + // Markers + 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; + this.draw_marker({x:pos_x,y:pos_y},radius,is_step); + } + } + + // Verteces for(id in dotgrid.tool.verteces){ this.draw_vertex(dotgrid.tool.verteces[id]); } + // Handles for(segment_id in dotgrid.tool.layer()){ var segment = dotgrid.tool.layer()[segment_id]; for(vertex_id in segment.verteces){ @@ -66,7 +67,6 @@ function Guide() if(dotgrid.translation){ this.draw_translation(); } - this.draw(); } this.draw_vertex = function(pos, radius = 5) @@ -101,13 +101,6 @@ function Guide() ctx.strokeStyle = dotgrid.theme.active.f_low; ctx.stroke(); ctx.closePath(); - ctx.beginPath(); - ctx.arc((pos.x * 2)+30, (pos.y * 2)+30, 2, 0, 2 * Math.PI, false); - ctx.fillStyle = dotgrid.theme.active.f_high; - ctx.fill(); - ctx.strokeStyle = dotgrid.theme.active.background; - ctx.stroke(); - ctx.closePath(); } this.draw_translation = function() diff --git a/desktop/sources/scripts/keyboard.js b/desktop/sources/scripts/keyboard.js index 37dbb70..0fa1f77 100644 --- a/desktop/sources/scripts/keyboard.js +++ b/desktop/sources/scripts/keyboard.js @@ -24,28 +24,28 @@ function Keyboard() { this.selector = {x:pos.x * -dotgrid.grid_width,y:pos.y * dotgrid.grid_height}; dotgrid.move_cursor(this.selector) - dotgrid.guide.update(); + dotgrid.guide.refresh(); dotgrid.draw(); } this.deselect = function() { dotgrid.tool.clear(); - dotgrid.guide.update(); + dotgrid.guide.refresh(); dotgrid.draw(); } this.confirm = function() { dotgrid.tool.add_vertex({x:this.selector.x * -1,y:this.selector.y}); - dotgrid.guide.update(); + dotgrid.guide.refresh(); dotgrid.draw(); } this.erase = function() { dotgrid.tool.remove_segments_at(this.selector); - dotgrid.guide.update(); + dotgrid.guide.refresh(); dotgrid.draw(); } @@ -56,7 +56,7 @@ function Keyboard() this.selector.x = this.selector.x > 0 ? 0 : this.selector.x; this.selector.y = this.selector.y < 0 ? 0 : this.selector.y; dotgrid.move_cursor(this.selector) - dotgrid.guide.update(); + dotgrid.guide.refresh(); dotgrid.draw(); }