Toggle Grid/Extras
This commit is contained in:
parent
dcbf717274
commit
20a7adfc91
@ -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; }
|
@ -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;
|
||||
|
@ -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 ;
|
||||
|
Loading…
Reference in New Issue
Block a user