Version 1?

This commit is contained in:
Devine Lu Linvega
2017-11-05 17:33:04 +13:00
parent a8833095b2
commit 0db55f4ba4
12 changed files with 64 additions and 282 deletions

View File

@@ -1,27 +0,0 @@
# Dotgrid
Minimalist vector drawing tool to create grid based SVGs. There isn't much to it at the moment. Enjoy!
## Functions
```
q CLEAR
w DELETE LAST
e EXPORT(Not working atm, just copy the DOM element)
```
## Tools
```
aA CLOCKWISE
sS COUNTERWISE
d LINE
```
## Shapes
```
z DOT
x CIRCLE
c RECT
```

View File

@@ -4,6 +4,7 @@
<script type="text/javascript" src="scripts/path_line.js"></script>
<script type="text/javascript" src="scripts/path_arc.js"></script>
<script type="text/javascript" src="scripts/path_bezier.js"></script>
<script type="text/javascript" src="scripts/path_close.js"></script>
<script type="text/javascript" src="scripts/dotgrid.js"></script>
<script type="text/javascript" src="scripts/keyboard.js"></script>
<link rel="stylesheet" type="text/css" href="links/reset.css"/>

View File

@@ -1,4 +1,4 @@
body { background:#fff; padding:30px; font-family: 'input_mono_regular'; -webkit-user-select: none;-webkit-app-region: drag;}
body { background:#fff; padding:30px; font-family: 'input_mono_regular'; -webkit-user-select: none;-webkit-app-region: drag; overflow: hidden;}
#dotgrid { margin:0px auto; position:relative; border:0px solid white; background:white; overflow: hidden; padding:10px;}
#dotgrid .marker { width:2px; height:2px; background:#ddd; position:absolute; margin-top:-1px; margin-left:-1px; border-radius:4px; z-index:50;}

View File

@@ -244,6 +244,16 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
reset();
}
this.draw_close = function()
{
if(this.segments.length == 0){ return; }
this.segments.push(new Path_Close());
this.draw();
reset();
}
this.draw_dot = function()
{
var s = document.createElementNS("http://www.w3.org/2000/svg", "circle");
@@ -310,6 +320,8 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
this.export = function()
{
if(this.segments.length == 0){ return; }
dialog.showSaveDialog((fileName) => {
if (fileName === undefined){ return; }
fs.writeFile(fileName+".svg", dotgrid.svg_el.outerHTML, (err) => {

View File

@@ -2,12 +2,13 @@ function Keyboard()
{
this.listen = function(event)
{
// console.log(event.keyCode)
console.log(event.keyCode)
switch (event.keyCode) {
case 65 : dotgrid.draw_arc(event.shiftKey ? "1,1" : "0,1"); break;
case 83 : dotgrid.draw_arc(event.shiftKey ? "1,0" : "0,0"); break;
case 83 : dotgrid.draw_arc(event.shiftKey ? "1,1" : "0,1"); break;
case 65 : dotgrid.draw_arc(event.shiftKey ? "1,0" : "0,0"); break;
case 68 : dotgrid.draw_line(); break;
case 70 : dotgrid.draw_bezier(); break;
case 82 : dotgrid.draw_close(); break;
case 187 : dotgrid.mod_thickness(1); break;
case 189 : dotgrid.mod_thickness(-1); break;
case 191 : dotgrid.mod_linecap(1); break;

View File

@@ -13,11 +13,11 @@ function Path_Arc(from,to,orientation,end)
html += "M"+this.from+" ";
}
else if(prev){
if(prev.to.x != this.from.x && prev.to.y != this.from.y && !prev.end){
html += "M"+this.from+" ";
if(prev.end && !prev.end.is_equal(this.from)){
html += "M"+this.from+" ";
}
else if(prev.end && prev.end.x != this.from.x && prev.end.y != this.from.y){
html += "M"+this.from+" ";
else if(prev.to && !prev.to.is_equal(this.from)){
html += "M"+this.from+" ";
}
}

View File

@@ -12,11 +12,11 @@ function Path_Bezier(from,to,end)
html += "M"+this.from+" ";
}
else if(prev){
if(prev.to.x != this.from.x && prev.to.y != this.from.y && !prev.end){
html += "M"+this.from+" ";
if(prev.end && !prev.end.is_equal(this.from)){
html += "M"+this.from+" ";
}
else if(prev.end && prev.end.x != this.from.x && prev.end.y != this.from.y){
html += "M"+this.from+" ";
else if(prev.to && !prev.to.is_equal(this.from)){
html += "M"+this.from+" ";
}
}

View File

@@ -0,0 +1,7 @@
function Path_Close()
{
this.to_segment = function(prev)
{
return "Z ";
}
}

View File

@@ -12,11 +12,15 @@ function Path_Line(from,to,end = null)
html += "M"+this.from+" ";
}
else if(prev){
if(prev.to.x != this.from.x && prev.to.y != this.from.y && !prev.end){
html += "M"+this.from+" ";
if(prev.end){
if(!prev.end.is_equal(this.from)){
html += "M"+this.from+" ";
}
}
else if(prev.end && prev.end.x != this.from.x && prev.end.y != this.from.y){
html += "M"+this.from+" ";
else if(prev.to){
if(!prev.to.is_equal(this.from)){
html += "M"+this.from+" ";
}
}
}

View File

@@ -12,4 +12,9 @@ function Pos(x,y)
{
return new Pos(this.x - pos2.x,this.y - pos2.y)
}
this.is_equal = function(pos2)
{
return pos2.x == this.x && pos2.y == this.y;
}
}