Toggle Grid/Extras

This commit is contained in:
Devine Lu Linvega 2018-05-10 20:01:31 +12:00
parent dcbf717274
commit 20a7adfc91
3 changed files with 11 additions and 16 deletions

View File

@ -3,7 +3,6 @@ body { padding: 5px; font-family: 'input_mono_regular'; -webkit-user-select: non
/* Core */
#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 150ms;}
#render { display: none }
#vector { z-index: 1000;position: relative;width:300px; height:300px; }
@ -40,6 +39,4 @@ body { background:var(--background) !important; }
.bm { background:var(--b_med) !important ; }
.bl { background:var(--b_low) !important ; }
.b_inv { background:var(--b_inv) !important ; ; }
.icon { color:var(--f_high) !important; stroke:var(--f_high) !important; }
#dotgrid svg.vector { stroke:var(--f_high) !important; }
.icon { color:var(--f_high) !important; stroke:var(--f_high) !important; }

View File

@ -14,9 +14,6 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
this.block_x = block_x;
this.block_y = block_y;
this.element = document.createElement("div");
this.element.id = "dotgrid";
this.svg_el = null;
this.layer_1 = document.createElementNS("http://www.w3.org/2000/svg", "path"); this.layer_1.id = "layer_1"; this.layer_1.style.stroke = "black";
this.layer_2 = document.createElementNS("http://www.w3.org/2000/svg", "path"); this.layer_2.id = "layer_2"; this.layer_2.style.stroke = "#999";
@ -26,7 +23,6 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
this.install = function()
{
document.getElementById("app").appendChild(this.element);
document.getElementById("app").appendChild(this.guide.el);
// Vector
@ -43,7 +39,6 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
this.svg_el.style.height = this.tool.settings.size.height;
this.svg_el.style.fill = "none";
this.svg_el.style.strokeWidth = this.tool.style().thickness;
// this.element.appendChild(this.svg_el);
this.svg_el.appendChild(this.layer_3);
this.svg_el.appendChild(this.layer_2);
@ -324,15 +319,11 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
this.tool.settings.size.width = size.width
this.tool.settings.size.height = size.height
this.element.style.width = size.width+10
this.element.style.height = size.height+10
this.grid_x = size.width/15
this.grid_y = size.height/15
this.svg_el.setAttribute("width",size.width+"px");
this.svg_el.setAttribute("height",size.height+"px");
this.element.style.width = this.tool.settings.size.width;
this.element.style.height = this.tool.settings.size.height;
this.grid_width = this.tool.settings.size.width/this.grid_x;
this.grid_height = this.tool.settings.size.height/this.grid_y;

View File

@ -6,6 +6,7 @@ function Guide()
this.el.height = 640;
this.el.style.width = "320px";
this.el.style.height = "320px";
this.show_extras = true;
var scale = 2;
@ -35,7 +36,8 @@ function Guide()
this.toggle = function()
{
this.el.style.opacity = !this.el.style.opacity || this.el.style.opacity == 1 ? 0 : 1;
this.show_extras = this.show_extras ? false : true;
this.refresh()
}
this.resize = function(size)
@ -49,9 +51,10 @@ function Guide()
this.refresh();
}
this.draw_overlays = function()
{
if(!this.show_extras){ return; }
for(segment_id in dotgrid.tool.layer()){
var segment = dotgrid.tool.layer()[segment_id];
for(vertex_id in segment.vertices){
@ -63,6 +66,8 @@ function Guide()
this.draw_handles = function()
{
if(!this.show_extras){ return; }
for(segment_id in dotgrid.tool.layer()){
var segment = dotgrid.tool.layer()[segment_id];
for(vertex_id in segment.vertices){
@ -81,6 +86,8 @@ function Guide()
this.draw_markers = function()
{
if(!this.show_extras){ return; }
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 ;