Version 1?
This commit is contained in:
@@ -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
|
||||
```
|
||||
@@ -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"/>
|
||||
|
||||
@@ -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;}
|
||||
|
||||
@@ -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) => {
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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+" ";
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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+" ";
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
7
sources/scripts/path_close.js
Normal file
7
sources/scripts/path_close.js
Normal file
@@ -0,0 +1,7 @@
|
||||
function Path_Close()
|
||||
{
|
||||
this.to_segment = function(prev)
|
||||
{
|
||||
return "Z ";
|
||||
}
|
||||
}
|
||||
@@ -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+" ";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user