Atlas48/pointvec
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added linejoin toggle

Browse Source
This commit is contained in:
Devine Lu Linvega
2018-02-05 11:45:58 +13:00
parent e98978249c
commit b1da9c8154
3 changed files with 21 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
sources/links/main.css
View File

@@ -16,7 +16,7 @@ body { padding: 5px; font-family: 'din_regular'; -webkit-user-select: none; over
#widgets { z-index: 9000; margin-left: 0; margin-top: 0; }
#render { display: none }
.icon { width:25px; height:25px; margin-right:5px; opacity: 1}
.icon { width:30px; height:30px; margin-right:-2px; opacity: 1}
.icon:hover { cursor: pointer; opacity: 1 }
svg.vector { z-index: 1000;position: relative; left:10px; top:10px; width:300px; height:300px; }
@@ -24,7 +24,7 @@ svg.vector { z-index: 1000;position: relative; left:10px; top:10px; width:300px;
#interface { font-size: 11px;line-height: 30px;text-transform: uppercase;-webkit-app-region: no-drag; transition: all 150ms; width: 315px; position:fixed; bottom:20px; left:calc(50vw - 155px);}
#interface svg.inactive { opacity: 0.2 }
#interface svg:hover { opacity: 0.5 }
#interface svg.icon:last-child { margin-right: 0; margin-left: 15px; }
#interface svg.icon:last-child { margin-right: 0; }
#interface.hidden { bottom:10px;opacity: 0 }
#interface.visible { bottom:20px; opacity: 1 }

18
sources/scripts/dotgrid.js
View File

@@ -1,4 +1,4 @@
function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,linecap = "round", color = "#000000")
function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,linecap = "round",linejoin = "round", color = "#000000")
{
this.controller = new Controller();
this.theme = new Theme();
@@ -14,6 +14,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
this.thickness = thickness;
this.linecap = linecap;
this.linejoin = linejoin;
this.color = color;
this.offset = new Pos(0,0);
@@ -105,6 +106,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
this.svg_el.style.strokeWidth = this.thickness;
this.svg_el.style.fill = "none";
this.svg_el.style.strokeLinecap = this.linecap;
this.svg_el.style.strokeLinejoin = this.linejoin;
this.element.appendChild(this.svg_el);
// Preview
this.preview_el = document.createElementNS("http://www.w3.org/2000/svg", "svg");
@@ -166,6 +168,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
this.controller.add("default","Effect","Thicker +5",() => { dotgrid.mod_thickness(5,true) },"]");
this.controller.add("default","Effect","Thinner -5",() => { dotgrid.mod_thickness(-5,true) },"[");
this.controller.add("default","Effect","Linecap",() => { dotgrid.mod_linecap(); },"Y");
this.controller.add("default","Effect","Linejoin",() => { dotgrid.mod_linejoin(); },"T");
this.controller.add("default","Effect","Mirror",() => { dotgrid.mod_mirror(); },"Space");
this.controller.add("default","Effect","Fill",() => { dotgrid.toggle_fill(); },"G");
@@ -380,6 +383,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
if(o == "thickness"){ this.mod_thickness(); }
if(o == "linecap"){ this.mod_linecap(); }
if(o == "linejoin"){ this.mod_linejoin(); }
if(o == "mirror"){ this.mod_mirror(); }
if(o == "fill"){ this.toggle_fill(); }
if(o == "export"){ this.save(); }
@@ -535,6 +539,16 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
this.draw();
}
this.mod_linejoin_index = 1;
this.mod_linejoin = function(mod)
{
var a = ["miter","round","bevel"];
this.mod_linejoin_index += 1;
this.linejoin = a[this.mod_linejoin_index % a.length];
this.draw();
}
this.mod_move = function(move)
{
if(!to && !end && from){
@@ -615,6 +629,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
this.svg_el.style.height = this.height;
this.svg_el.style.stroke = this.color;
this.svg_el.style.strokeLinecap = this.linecap;
this.svg_el.style.strokeLinejoin = this.linejoin;
this.svg_el.style.strokeWidth = this.thickness*this.scale;
this.svg_el.style.fill = this.fill ? this.theme.active.f_high : "none";
@@ -666,6 +681,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
this.segments = [];
this.thickness = 10
this.linecap = "square"
this.linejoin = "round"
this.color = "#000000"
this.draw();
}

2
sources/scripts/interface.js
View File

@@ -18,6 +18,7 @@ function Interface()
["thickness","thickness","M60,60 L240,240","stroke-dasharray: 30,15"],
["linecap","linecap","M60,60 L240,240 M240,180 L240,240 M180,240 L240,240"],
["linejoin","linejoin","M60,60 L120,120 L180,120 M120,180 L180,180 L240,240"],
["mirror","mirror","M60,60 L240,240 M180,120 L210,90 M120,180 L90,210 "],
["fill","fill","M60,60 L60,150 L150,150 L240,150 L240,240 Z "],
@@ -40,6 +41,7 @@ function Interface()
document.getElementById("thickness").className.baseVal = dotgrid.segments.length < 1 ? "icon inactive" : "icon";
document.getElementById("linecap").className.baseVal = dotgrid.segments.length < 1 ? "icon inactive" : "icon";
document.getElementById("linejoin").className.baseVal = dotgrid.segments.length < 1 ? "icon inactive" : "icon";
document.getElementById("mirror").className.baseVal = dotgrid.segments.length < 1 ? "icon inactive" : "icon";
document.getElementById("fill").className.baseVal = dotgrid.segments.length < 1 ? "icon inactive" : "icon";
document.getElementById("close").className.baseVal = dotgrid.segments.length < 1 || (prev && prev.name == "close") ? "icon inactive" : "icon";