From 7540fb4f8a18a0ecd23947dceb50fc7e832e6079 Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Tue, 8 May 2018 21:15:40 +1200 Subject: [PATCH] Removed dasharray --- desktop/sources/links/main.css | 10 +++++----- desktop/sources/scripts/dotgrid.js | 31 +++++++----------------------- desktop/sources/scripts/guide.js | 1 + desktop/sources/scripts/tool.js | 6 +++--- 4 files changed, 16 insertions(+), 32 deletions(-) diff --git a/desktop/sources/links/main.css b/desktop/sources/links/main.css index 4114121..f1c5539 100644 --- a/desktop/sources/links/main.css +++ b/desktop/sources/links/main.css @@ -1,11 +1,13 @@ body { padding: 5px; font-family: 'input_mono_regular'; -webkit-user-select: none; overflow: hidden; padding-left:5px; transition: background 500ms} +/* 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 250ms;} #render { display: none } - -svg.vector { z-index: 1000;position: relative; left:10px; top:10px; width:300px; height:300px; } +#vector { z-index: 1000;position: relative;width:300px; height:300px; } +#preview { position: absolute; top:15px; left:15px; stroke-dasharray: 4,4;} /* Interface */ @@ -24,9 +26,7 @@ svg.vector { z-index: 1000;position: relative; left:10px; top:10px; width:300px; #interface .icon { width:30px; height:30px; margin-right:-2px; opacity: 1} #interface .icon:hover { cursor: pointer; opacity: 1 } -#preview { position: absolute; top:20px; left:20px; stroke-dasharray: 4,4; } - -/* Theme Defaults */ +/* Theme Overrides */ :root { --background: "#222"; --f_high: "#fff";--f_med: "#777";--f_low: "#444";--f_inv: "#000";--b_high: "#000";--b_med: "#affec7";--b_low: "#000";--b_inv: "#affec7"; } diff --git a/desktop/sources/scripts/dotgrid.js b/desktop/sources/scripts/dotgrid.js index eca4341..92ff2c6 100644 --- a/desktop/sources/scripts/dotgrid.js +++ b/desktop/sources/scripts/dotgrid.js @@ -31,6 +31,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) // Vector this.svg_el = document.createElementNS("http://www.w3.org/2000/svg", "svg"); + this.svg_el.id = "vector" this.svg_el.setAttribute("class","vector"); this.svg_el.setAttribute("width",this.tool.settings.size.width+"px"); this.svg_el.setAttribute("height",this.tool.settings.size.height+"px"); @@ -98,7 +99,6 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) this.controller.add("default","Effect","Linejoin",() => { dotgrid.mod_linejoin(); },"W"); this.controller.add("default","Effect","Mirror",() => { dotgrid.mod_mirror(); },"E"); this.controller.add("default","Effect","Fill",() => { dotgrid.mod_fill(); },"R"); - this.controller.add("default","Effect","Dash",() => { dotgrid.mod_dash(); },"T"); this.controller.add("default","Effect","Color",() => { dotgrid.picker.start(); },"G"); this.controller.add("default","Effect","Thicker",() => { dotgrid.mod_thickness(1) },"}"); this.controller.add("default","Effect","Thinner",() => { dotgrid.mod_thickness(-1) },"{"); @@ -334,17 +334,6 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) this.draw(); } - this.dash_index = 0; - - this.mod_dash = function() - { - var styles = [[0,0],[0.1,1.25],[1.5,1.25],[2,1.25]] - this.dash_index += 1; - this.dash_index = this.dash_index > styles.length-1 ? 0 : this.dash_index; - this.tool.style().dash = styles[this.dash_index] - this.draw(); - } - // Basics this.set_size = function(size = {width:300,height:300},interface = true) @@ -362,8 +351,8 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) this.grid_y = size.height/15 this.svg_el.setAttribute("width",size.width+"px"); this.svg_el.setAttribute("height",size.height+"px"); - this.preview_el.style.width = size.width+10 - this.preview_el.style.height = size.height+10 + this.preview_el.style.width = size.width + this.preview_el.style.height = size.height this.preview_el.setAttribute("width",size.width+"px"); this.preview_el.setAttribute("height",size.height+"px"); @@ -397,21 +386,18 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) this.layer_1.style.strokeLinejoin = this.tool.styles[0].strokeLinejoin; this.layer_1.style.stroke = this.tool.styles[0].color; this.layer_1.style.fill = this.tool.styles[0].fill; - this.layer_1.style.strokeDasharray = `${this.tool.styles[0].dash[0] * this.tool.styles[0].thickness},${this.tool.styles[0].dash[1] * this.tool.styles[0].thickness}`; this.layer_2.style.strokeWidth = this.tool.styles[1].thickness; this.layer_2.style.strokeLinecap = this.tool.styles[1].strokeLinecap; this.layer_2.style.strokeLinejoin = this.tool.styles[1].strokeLinejoin; this.layer_2.style.stroke = this.tool.styles[1].color; this.layer_2.style.fill = this.tool.styles[1].fill; - this.layer_2.style.strokeDasharray = `${this.tool.styles[1].dash[0] * this.tool.styles[1].thickness},${this.tool.styles[1].dash[1] * this.tool.styles[1].thickness}`; this.layer_3.style.strokeWidth = this.tool.styles[2].thickness; this.layer_3.style.strokeLinecap = this.tool.styles[2].strokeLinecap; this.layer_3.style.strokeLinejoin = this.tool.styles[2].strokeLinejoin; this.layer_3.style.stroke = this.tool.styles[2].color; this.layer_3.style.fill = this.tool.styles[2].fill; - this.layer_3.style.strokeDasharray = `${this.tool.styles[2].dash[0] * this.tool.styles[2].thickness},${this.tool.styles[2].dash[1] * this.tool.styles[2].thickness}`; this.preview(); this.render.draw(); @@ -504,14 +490,11 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) pos.x = pos.x + 7.5 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.tool.settings.size.width || x>0 || y>this.tool.settings.size.height || y<0) - if(off) { - x = 50 - y = -50 - } - return {x:x,y:y}; - } + x = clamp(x * -1,0,this.tool.settings.size.width) + y = clamp(y,0,this.tool.settings.size.height) + return {x:x*-1,y:y}; + } function is_json(text) { diff --git a/desktop/sources/scripts/guide.js b/desktop/sources/scripts/guide.js index 2fb840c..c93032e 100644 --- a/desktop/sources/scripts/guide.js +++ b/desktop/sources/scripts/guide.js @@ -127,6 +127,7 @@ function Guide() this.draw_cursor = function(pos = dotgrid.cursor.pos,radius = 10) { + console.log(pos) var ctx = this.el.getContext('2d'); ctx.beginPath(); ctx.lineWidth = 3; diff --git a/desktop/sources/scripts/tool.js b/desktop/sources/scripts/tool.js index 901e5a3..ff25f68 100644 --- a/desktop/sources/scripts/tool.js +++ b/desktop/sources/scripts/tool.js @@ -4,9 +4,9 @@ function Tool() this.settings = { size:{width:300,height:300} } this.layers = [[],[],[]]; this.styles = [ - { thickness:2,strokeLinecap:"round",strokeLinejoin:"round",color:"#f00",fill:"none",dash:[0,0],mirror_style:0 }, - { thickness:2,strokeLinecap:"round",strokeLinejoin:"round",color:"#0f0",fill:"none",dash:[0,0],mirror_style:0 }, - { thickness:2,strokeLinecap:"round",strokeLinejoin:"round",color:"#00f",fill:"none",dash:[0,0],mirror_style:0 } + { thickness:2,strokeLinecap:"round",strokeLinejoin:"round",color:"#f00",fill:"none",mirror_style:0 }, + { thickness:2,strokeLinecap:"round",strokeLinejoin:"round",color:"#0f0",fill:"none",mirror_style:0 }, + { thickness:2,strokeLinecap:"round",strokeLinejoin:"round",color:"#00f",fill:"none",mirror_style:0 } ]; this.verteces = []; this.reqs = { line:2,arc_c:2,arc_r:2,bezier:3,close:0 };