2016-12-31 16:35:14 -05:00
function Dotgrid ( width , height , grid _x , grid _y , block _x , block _y , thickness = 3 , linecap = "round" , color = "#000000" )
2016-12-31 10:00:57 -05:00
{
2017-11-06 21:10:09 -05:00
this . theme = new Theme ( ) ;
2016-12-31 10:00:57 -05:00
this . width = width ;
this . height = height ;
2016-12-31 12:18:01 -05:00
this . grid _x = grid _x ;
this . grid _y = grid _y ;
2016-12-31 15:37:13 -05:00
this . block _x = block _x ;
this . block _y = block _y ;
2016-12-31 16:35:14 -05:00
this . thickness = thickness ;
this . linecap = linecap ;
this . color = color ;
2017-11-05 19:18:57 -05:00
this . offset = new Pos ( 0 , 0 ) ;
2016-12-31 16:35:14 -05:00
2017-11-05 20:10:37 -05:00
// Dotgrid
this . element = document . createElement ( "div" ) ;
this . element . id = "dotgrid" ;
this . element . style . width = this . width ;
this . element . style . height = this . height ;
2016-12-31 10:00:57 -05:00
2017-11-12 16:47:34 -05:00
this . wrapper = document . createElement ( "div" ) ;
this . wrapper . id = "wrapper" ;
2016-12-31 12:18:01 -05:00
this . grid _width = this . width / this . grid _x ;
this . grid _height = this . height / this . grid _y ;
2016-12-31 12:37:10 -05:00
var cursor = null ;
var cursor _from = null ;
var cursor _to = null ;
2017-11-04 19:59:11 -04:00
var cursor _end = null ;
2016-12-31 12:18:01 -05:00
var from = null ;
var to = null ;
2017-11-04 19:59:11 -04:00
var end = null ;
this . svg _el = null ;
2017-11-05 14:53:59 -05:00
this . mirror _el = null ;
this . mirror = false ;
2017-11-05 20:10:37 -05:00
this . fill = false ;
2017-11-04 19:59:11 -04:00
2017-11-09 14:47:06 -05:00
this . guide = new Guide ( ) ;
this . render = new Render ( ) ;
2017-11-04 19:59:11 -04:00
this . path = document . createElementNS ( "http://www.w3.org/2000/svg" , "path" ) ;
this . segments = [ ] ;
this . interface = document . createElement ( "div" ) ;
this . interface . id = "interface" ;
2017-11-12 16:47:34 -05:00
this . scale = 1
2016-12-31 12:18:01 -05:00
2016-12-31 10:00:57 -05:00
this . install = function ( )
{
2017-11-12 16:47:34 -05:00
document . body . appendChild ( this . wrapper ) ;
this . wrapper . appendChild ( this . element ) ;
this . wrapper . appendChild ( this . interface ) ;
this . element . appendChild ( this . guide . el ) ;
2017-11-12 22:54:56 -05:00
this . element . appendChild ( this . guide . widgets ) ;
2017-11-12 16:47:34 -05:00
this . wrapper . appendChild ( this . render . el ) ;
2016-12-31 12:18:01 -05:00
// Cursors
this . cursor = document . createElement ( "div" ) ;
this . cursor . id = "cursor" ;
this . element . appendChild ( this . cursor ) ;
2017-11-10 14:46:11 -05:00
this . cursor _coord = document . createElement ( "div" ) ;
this . cursor _coord . id = "cursor_coord" ;
this . cursor _coord . className = "fl"
this . cursor . appendChild ( this . cursor _coord ) ;
2016-12-31 12:37:10 -05:00
cursor _from = document . createElement ( "div" ) ;
cursor _from . id = "cursor_from" ;
this . element . appendChild ( cursor _from ) ;
2016-12-31 12:18:01 -05:00
2016-12-31 12:37:10 -05:00
cursor _to = document . createElement ( "div" ) ;
cursor _to . id = "cursor_to" ;
this . element . appendChild ( cursor _to ) ;
2016-12-31 12:18:01 -05:00
2017-11-04 19:59:11 -04:00
cursor _end = document . createElement ( "div" ) ;
cursor _end . id = "cursor_end" ;
this . element . appendChild ( cursor _end ) ;
2017-11-05 19:18:57 -05:00
this . offset _el = document . createElementNS ( "http://www.w3.org/2000/svg" , "g" ) ;
2017-11-05 14:53:59 -05:00
this . mirror _el = document . createElementNS ( "http://www.w3.org/2000/svg" , "g" ) ;
this . mirror _path = document . createElementNS ( "http://www.w3.org/2000/svg" , "path" ) ;
2017-11-14 06:18:58 -05:00
// Interface
var html = ""
var path _arr = [
[ "line" , "line (d)" , "M50,50 L250,250 " , "" ] ,
[ "arc_c" , "arc clockwise (s)" , "M50,50 A200,200 0 0,1 250,250 " , "" ] ,
[ "arc_r" , "arc reverse (a)" , "M50,50 A200,200 0 0,0 250,250 " , "" ] ,
[ "bezier" , "bezier (f)" , "M50,50 Q50,150 150,150 Q250,150 250,250 " , "" ] ,
[ "close" , "close (r)" , "M50,50 L120,120 M250,250 L180,180 " , "" ] ,
[ "mirror" , "mirror (space)" , "M144,50 L144,250 M48,144 L96,144 M192,144 L240,144 " , "margin-left:35px" ] , // these values are almost all multiples of 12, to get pixel alignment.
[ "export" , "export (ctrl s)" , "M150,50 L50,150 L150,250 L250,150 L150,50 " , "float:right" ]
]
path _arr . forEach ( function ( a ) {
html += '<svg id="' + a [ 0 ] + '" ar="' + a [ 0 ] + '" title="hello" class="icon" viewBox="0 0 300 300" style="' + a [ 3 ] + '"><path class="icon_path" d="' + a [ 2 ] + '" stroke-linecap: square; stroke-width="24px" fill="none" /><rect ar="' + a [ 0 ] + '" width="300" height="300" opacity="0"><title>' + a [ 1 ] + '</title></rect></svg>'
} , this ) ;
this . interface . innerHTML = html
2016-12-31 12:18:01 -05:00
// Vector
2017-11-04 19:59:11 -04:00
this . svg _el = document . createElementNS ( "http://www.w3.org/2000/svg" , "svg" ) ;
2017-11-06 21:10:09 -05:00
this . svg _el . setAttribute ( "class" , "vector fh" ) ;
2017-11-04 19:59:11 -04:00
this . svg _el . setAttribute ( "width" , this . width + "px" ) ;
this . svg _el . setAttribute ( "height" , this . height + "px" ) ;
this . svg _el . setAttribute ( "xmlns" , "http://www.w3.org/2000/svg" ) ;
this . svg _el . setAttribute ( "baseProfile" , "full" ) ;
this . svg _el . setAttribute ( "version" , "1.1" ) ;
this . svg _el . style . width = this . width ;
this . svg _el . style . height = this . height ;
this . svg _el . style . stroke = this . color ;
this . svg _el . style . strokeWidth = this . thickness ;
2017-11-06 21:41:41 -05:00
this . svg _el . style . fill = this . fill ? "black" : "none !important" ;
2017-11-04 19:59:11 -04:00
this . svg _el . style . strokeLinecap = this . linecap ;
this . element . appendChild ( this . svg _el ) ;
2017-11-05 19:18:57 -05:00
2017-11-05 23:35:29 -05:00
this . offset _el . appendChild ( this . path )
2017-11-05 19:18:57 -05:00
this . svg _el . appendChild ( this . offset _el ) ;
2017-11-05 14:53:59 -05:00
this . svg _el . appendChild ( this . mirror _el ) ;
this . mirror _el . appendChild ( this . mirror _path ) ;
2017-11-04 20:52:05 -04:00
2017-11-06 21:10:09 -05:00
this . theme . start ( ) ;
2017-11-09 14:47:06 -05:00
this . guide . start ( ) ;
2017-11-12 15:26:23 -05:00
this . resize ( ) ;
this . draw ( ) ;
2016-12-31 12:18:01 -05:00
}
// Cursor
2017-11-12 22:54:56 -05:00
this . translation = null ;
2016-12-31 12:18:01 -05:00
this . mouse _down = function ( e )
{
2017-11-14 06:18:58 -05:00
var o = e . target . getAttribute ( "ar" ) ;
2017-11-12 22:54:56 -05:00
var pos = this . position _in _grid ( new Pos ( e . clientX , e . clientY ) ) ;
pos = this . position _on _grid ( pos ) ;
2017-11-13 13:52:53 -05:00
if ( e . altKey ) { dotgrid . delete _at ( pos ) ; return ; }
if ( dotgrid . handle _at ( pos ) ) { dotgrid . translation = { from : pos , to : pos } ; return ; }
2017-11-12 22:54:56 -05:00
2017-11-04 20:52:05 -04:00
if ( ! o ) { return ; }
if ( o == "line" ) { this . draw _line ( ) ; }
if ( o == "arc_c" ) { this . draw _arc ( "0,1" ) ; }
2017-11-05 00:58:53 -04:00
if ( o == "arc_r" ) { this . draw _arc ( "0,0" ) ; }
if ( o == "bezier" ) { this . draw _bezier ( ) ; }
2017-11-05 14:38:14 -05:00
if ( o == "close" ) { this . draw _close ( ) ; }
2017-11-10 14:46:11 -05:00
if ( o == "mirror" ) { this . mod _mirror ( ) ; }
2017-11-04 20:52:05 -04:00
if ( o == "export" ) { this . export ( ) ; }
2016-12-31 12:18:01 -05:00
}
this . mouse _move = function ( e )
{
2017-11-07 06:04:47 -05:00
var pos = this . position _in _grid ( new Pos ( e . clientX , e . clientY ) ) ;
pos = this . position _on _grid ( pos ) ;
2016-12-31 12:18:01 -05:00
2017-11-13 13:52:53 -05:00
if ( dotgrid . translation ) { dotgrid . translation . to = pos ; }
2017-11-12 22:54:56 -05:00
2017-11-13 20:28:06 -05:00
if ( pos . x > 0 ) {
this . cursor . style . visibility = "hidden"
} else {
if ( this . cursor . style . visibility == "hidden" ) {
this . cursor . style . transition = "initial"
}
this . cursor . style . visibility = "visible"
this . cursor . style . left = Math . floor ( - ( pos . x - this . grid _width ) ) ;
this . cursor . style . top = Math . floor ( pos . y + this . grid _height ) ;
this . cursor _coord . className = - pos . x > this . width / 2 ? "fl left" : "fl"
this . cursor _coord . textContent = parseInt ( - pos . x / this . grid _width ) + "," + parseInt ( pos . y / this . grid _height ) ;
window . setTimeout ( ( ) => dotgrid . cursor . style . transition = "all 50ms" , 17 /*one frame*/ )
}
2017-11-12 22:54:56 -05:00
dotgrid . guide . update ( ) ;
2017-11-13 20:28:06 -05:00
2016-12-31 12:18:01 -05:00
}
this . mouse _up = function ( e )
{
2017-11-07 06:04:47 -05:00
var pos = this . position _in _grid ( new Pos ( e . clientX , e . clientY ) ) ;
pos = this . position _on _grid ( pos ) ;
2017-11-13 13:52:53 -05:00
if ( e . altKey ) { return ; }
2017-11-13 20:28:06 -05:00
if ( pos . x > 0 ) { dotgrid . translation = null ; return ; }
if ( dotgrid . translation && ! dotgrid . translation . to . is _equal ( dotgrid . translation . from ) ) {
2017-11-12 22:54:56 -05:00
dotgrid . translate ( dotgrid . translation ) ;
return ;
}
2017-11-13 16:16:49 -05:00
dotgrid . translation = null ;
2017-11-05 23:35:29 -05:00
2017-11-12 16:47:34 -05:00
if ( from === null ) { this . set _from ( pos . scale ( 1 / this . scale ) ) ; }
else if ( to === null ) { this . set _to ( pos . scale ( 1 / this . scale ) ) ; }
else { this . set _end ( pos . scale ( 1 / this . scale ) ) ; }
2017-11-04 19:59:11 -04:00
this . draw ( ) ;
2016-12-31 12:18:01 -05:00
}
2017-11-13 13:52:53 -05:00
this . handle _at = function ( pos )
{
for ( id in dotgrid . segments ) {
var segment = dotgrid . segments [ id ] ;
if ( segment . from && segment . from . is _equal ( pos ) ) { return true ; }
if ( segment . to && segment . to . is _equal ( pos ) ) { return true ; }
if ( segment . end && segment . end . is _equal ( pos ) ) { return true ; }
}
return false ;
}
2017-11-12 22:54:56 -05:00
this . translate = function ( t )
{
for ( id in dotgrid . segments ) {
var segment = dotgrid . segments [ id ] ;
if ( segment . from && segment . from . is _equal ( dotgrid . translation . from ) ) { segment . from = new Pos ( - dotgrid . translation . to . x , dotgrid . translation . to . y ) }
if ( segment . to && segment . to . is _equal ( dotgrid . translation . from ) ) { segment . to = new Pos ( - dotgrid . translation . to . x , dotgrid . translation . to . y ) }
if ( segment . end && segment . end . is _equal ( dotgrid . translation . from ) ) { segment . end = new Pos ( - dotgrid . translation . to . x , dotgrid . translation . to . y ) }
}
dotgrid . translation = null ;
2017-11-13 16:41:16 -05:00
dotgrid . reset ( ) ;
2017-11-12 22:54:56 -05:00
dotgrid . draw ( ) ;
}
2016-12-31 12:18:01 -05:00
// Setters
this . set _from = function ( pos )
{
2017-11-13 14:45:31 -05:00
from = pos . mirror ( ) . clamp ( 0 , 300 ) . mirror ( ) ;
2016-12-31 12:18:01 -05:00
2017-11-13 14:45:31 -05:00
cursor _from . style . left = Math . floor ( - from . x * this . scale + this . grid _width ) ;
cursor _from . style . top = Math . floor ( from . y * this . scale + this . grid _height ) ;
2016-12-31 12:18:01 -05:00
}
this . set _to = function ( pos )
{
2017-11-13 14:45:31 -05:00
to = pos . mirror ( ) . clamp ( 0 , 300 ) . mirror ( ) ;
2016-12-31 12:18:01 -05:00
2017-11-13 14:45:31 -05:00
cursor _to . style . left = Math . floor ( - to . x * this . scale + this . grid _width ) ;
cursor _to . style . top = Math . floor ( to . y * this . scale + this . grid _height ) ;
2016-12-31 12:18:01 -05:00
}
2017-11-04 19:59:11 -04:00
this . set _end = function ( pos )
{
2017-11-13 14:45:31 -05:00
end = pos . mirror ( ) . clamp ( 0 , 300 ) . mirror ( ) ;
2017-11-04 19:59:11 -04:00
2017-11-13 14:45:31 -05:00
cursor _end . style . left = Math . floor ( - end . x * this . scale + this . grid _width ) ;
cursor _end . style . top = Math . floor ( end . y * this . scale + this . grid _height ) ;
2017-11-04 19:59:11 -04:00
}
2017-11-07 16:40:13 -05:00
this . delete _at = function ( pos )
{
var segs = [ ] ;
for ( id in this . segments ) {
var s = this . segments [ id ] ;
if ( s . from && s . from . is _equal ( pos ) ) { continue ; }
if ( s . to && s . to . is _equal ( pos ) ) { continue ; }
if ( s . end && s . end . is _equal ( pos ) ) { continue ; }
segs . push ( s ) ;
}
this . segments = segs ;
this . draw ( ) ;
}
2017-11-04 19:59:11 -04:00
this . mod _thickness = function ( mod )
{
2017-11-07 01:59:45 -05:00
this . thickness = Math . max ( this . thickness + mod , 0 ) ;
2017-11-10 14:46:11 -05:00
this . cursor _coord . textContent = this . thickness ;
2017-11-04 19:59:11 -04:00
this . draw ( ) ;
}
this . mod _linecap _index = 1 ;
this . mod _linecap = function ( mod )
{
var a = [ "butt" , "square" , "round" ] ;
this . mod _linecap _index += 1 ;
this . linecap = a [ this . mod _linecap _index % a . length ] ;
this . draw ( ) ;
}
2017-11-07 06:04:47 -05:00
this . mod _move = function ( move )
2017-11-04 19:59:11 -04:00
{
2017-11-05 19:18:57 -05:00
if ( ! to && ! end && from ) {
2017-11-07 06:04:47 -05:00
this . set _from ( new Pos ( from . x - ( move . x ) , from . y + ( move . y ) ) )
2017-11-04 20:52:05 -04:00
this . draw ( ) ;
return ;
}
2017-11-05 19:18:57 -05:00
if ( ! end && to ) {
2017-11-07 06:04:47 -05:00
this . set _to ( new Pos ( to . x - ( move . x ) , to . y + ( move . y ) ) )
2017-11-04 20:52:05 -04:00
this . draw ( ) ;
return ;
2017-11-04 19:59:11 -04:00
}
2017-11-05 19:18:57 -05:00
if ( end ) {
2017-11-07 06:04:47 -05:00
this . set _end ( new Pos ( end . x - ( move . x ) , end . y + ( move . y ) ) )
2017-11-05 19:18:57 -05:00
this . draw ( ) ;
2017-11-05 23:35:29 -05:00
return ;
2017-11-05 19:18:57 -05:00
}
// Move offset
2017-11-12 22:54:56 -05:00
// this.offset = this.offset.add(new Pos(move.x,move.y));
2017-11-04 19:59:11 -04:00
this . draw ( ) ;
}
2017-11-10 14:46:11 -05:00
this . mirror _index = 0 ;
this . mod _mirror = function ( )
{
this . mirror _index += 1 ;
this . mirror _index = this . mirror _index > 3 ? 0 : this . mirror _index ;
this . draw ( ) ;
}
2017-11-05 20:10:37 -05:00
this . toggle _fill = function ( )
{
dotgrid . fill = dotgrid . fill ? false : true ;
this . draw ( ) ;
}
2017-11-12 16:47:34 -05:00
this . draw = function ( exp = false )
2017-11-04 19:59:11 -04:00
{
var d = "" ;
var prev = "" ;
for ( id in this . segments ) {
var segment = this . segments [ id ] ;
d += segment . to _segment ( prev ) + " " ;
prev = segment ;
}
this . path . setAttribute ( "d" , d ) ;
this . svg _el . style . width = this . width ;
this . svg _el . style . height = this . height ;
this . svg _el . style . stroke = this . color ;
this . svg _el . style . strokeLinecap = this . linecap ;
2017-11-12 16:47:34 -05:00
this . svg _el . style . strokeWidth = this . thickness * this . scale ;
2017-11-05 20:10:37 -05:00
this . svg _el . style . fill = this . fill ? "black" : "none" ;
2017-11-04 19:59:11 -04:00
2017-11-12 16:47:34 -05:00
//console.log(this.svg_el)
2017-11-10 14:46:11 -05:00
// Draw Mirror
if ( this . mirror _index == 1 ) {
this . mirror _path . setAttribute ( "d" , d ) ;
2017-11-12 16:47:34 -05:00
this . mirror _path . setAttribute ( "transform" , "translate(" + ( this . width - ( this . offset . x * this . scale ) ) + "," + ( this . offset . y * this . scale ) + "),scale(-1,1)" )
2017-11-10 14:46:11 -05:00
}
else if ( this . mirror _index == 2 ) {
this . mirror _path . setAttribute ( "d" , d ) ;
2017-11-12 16:47:34 -05:00
this . mirror _path . setAttribute ( "transform" , "translate(" + ( ( this . offset . x * this . scale ) ) + "," + ( this . height - ( this . offset . y * this . scale ) ) + "),scale(1,-1)" )
2017-11-10 14:46:11 -05:00
}
else if ( this . mirror _index == 3 ) {
this . mirror _path . setAttribute ( "d" , d ) ;
2017-11-12 16:47:34 -05:00
this . mirror _path . setAttribute ( "transform" , "translate(" + ( this . width - ( this . offset . x * this . scale ) ) + "," + ( this . height - ( this . offset . y * this . scale ) ) + "),scale(-1,-1)" )
2017-11-10 14:46:11 -05:00
}
else {
this . mirror _path . setAttribute ( "d" , 'M0,0' ) ;
this . mirror _path . setAttribute ( "transform" , "" )
}
2017-11-05 19:18:57 -05:00
2017-11-12 16:47:34 -05:00
this . offset _el . setAttribute ( "transform" , "translate(" + ( this . offset . x * this . scale ) + "," + ( this . offset . y * this . scale ) + ")" )
2017-11-05 14:53:59 -05:00
2017-11-09 14:47:06 -05:00
this . render . draw ( ) ;
2017-11-04 19:59:11 -04:00
this . update _interface ( ) ;
2017-11-12 22:54:56 -05:00
this . guide . update ( ) ;
2017-11-04 19:59:11 -04:00
}
2016-12-31 12:18:01 -05:00
// Draw
2017-11-04 20:52:05 -04:00
this . draw _line = function ( )
2016-12-31 12:37:10 -05:00
{
2017-11-06 21:41:41 -05:00
if ( from === null || to === null ) { return ; }
2017-11-05 19:18:57 -05:00
2017-11-07 06:04:47 -05:00
to = new Pos ( to . x * - 1 , to . y ) . sub ( this . offset )
from = new Pos ( from . x * - 1 , from . y ) . sub ( this . offset )
end = end ? new Pos ( end . x * - 1 , end . y ) . sub ( this . offset ) : null ;
2017-11-05 19:18:57 -05:00
2017-11-06 21:41:41 -05:00
this . segments . push ( new Path _Line ( from , to , end ) ) ;
2016-12-31 12:18:01 -05:00
2017-11-14 06:18:58 -05:00
this . reset ( ) ;
2017-11-06 21:41:41 -05:00
this . draw ( ) ;
2017-11-07 16:40:13 -05:00
this . reset ( ) ;
2016-12-31 12:18:01 -05:00
}
2016-12-31 13:16:00 -05:00
this . draw _arc = function ( orientation )
2016-12-31 12:18:01 -05:00
{
2016-12-31 13:29:31 -05:00
if ( from === null || to === null ) { return ; }
2017-11-07 06:04:47 -05:00
to = new Pos ( to . x * - 1 , to . y ) . sub ( this . offset )
from = new Pos ( from . x * - 1 , from . y ) . sub ( this . offset )
2017-11-07 06:25:14 -05:00
end = end ? new Pos ( end . x * - 1 , end . y ) . sub ( this . offset ) : null ;
2017-11-06 00:45:41 -05:00
2017-11-06 21:41:41 -05:00
this . segments . push ( new Path _Arc ( from , to , orientation , end ) ) ;
2017-11-04 19:59:11 -04:00
2017-11-14 06:18:58 -05:00
this . reset ( ) ;
2017-11-04 19:59:11 -04:00
this . draw ( ) ;
2017-11-07 16:40:13 -05:00
this . reset ( ) ;
2017-11-04 19:59:11 -04:00
}
this . draw _bezier = function ( )
{
2017-11-06 00:45:41 -05:00
if ( from === null || to === null || end === null ) { return ; }
2017-11-04 19:59:11 -04:00
2017-11-07 06:04:47 -05:00
to = new Pos ( to . x * - 1 , to . y ) . sub ( this . offset )
from = new Pos ( from . x * - 1 , from . y ) . sub ( this . offset )
end = new Pos ( end . x * - 1 , end . y ) . sub ( this . offset )
2017-11-06 21:41:41 -05:00
this . segments . push ( new Path _Bezier ( from , to , end ) ) ;
2017-01-04 12:48:08 -05:00
2017-11-14 06:18:58 -05:00
this . reset ( ) ;
2017-11-04 19:59:11 -04:00
this . draw ( ) ;
2017-11-07 16:40:13 -05:00
this . reset ( ) ;
2017-01-04 12:48:08 -05:00
}
2017-11-05 00:33:04 -04:00
this . draw _close = function ( )
{
if ( this . segments . length == 0 ) { return ; }
2017-11-05 14:38:14 -05:00
if ( this . segments [ this . segments . length - 1 ] . name == "close" ) { return ; }
2017-11-05 00:33:04 -04:00
this . segments . push ( new Path _Close ( ) ) ;
2017-11-05 23:35:29 -05:00
2017-11-14 06:18:58 -05:00
this . reset ( ) ;
2017-11-05 00:33:04 -04:00
this . draw ( ) ;
2017-11-07 16:40:13 -05:00
this . reset ( ) ;
2017-11-05 00:33:04 -04:00
}
2016-12-31 12:37:10 -05:00
this . reset = function ( )
2016-12-31 12:18:01 -05:00
{
from = null ;
to = null ;
2017-11-04 19:59:11 -04:00
end = null ;
2016-12-31 12:37:10 -05:00
cursor _from . style . left = - 100 ;
cursor _from . style . top = - 100 ;
cursor _to . style . left = - 100 ;
cursor _to . style . top = - 100 ;
2017-11-04 19:59:11 -04:00
cursor _end . style . left = - 100 ;
cursor _end . style . top = - 100 ;
2016-12-31 12:18:01 -05:00
}
2017-11-07 16:40:13 -05:00
this . clear = function ( )
{
this . reset ( ) ;
this . segments = [ ] ;
this . thickness = 10
this . linecap = "square"
this . color = "#000000"
this . draw ( ) ;
}
2016-12-31 12:47:37 -05:00
this . erase = function ( )
{
2017-11-05 14:15:31 -05:00
if ( from || to || end ) {
this . reset ( ) ;
}
else {
2017-11-05 23:35:29 -05:00
this . segments . pop ( ) ;
2017-11-05 14:15:31 -05:00
}
2017-11-04 19:59:11 -04:00
this . draw ( ) ;
2016-12-31 12:47:37 -05:00
}
2016-12-31 15:47:40 -05:00
this . export = function ( )
{
2017-11-05 00:33:04 -04:00
if ( this . segments . length == 0 ) { return ; }
2017-11-12 16:47:34 -05:00
this . scale = 1
this . width = 300
this . height = 300
this . draw ( )
var svg = this . svg _el . outerHTML
dotgrid . resize ( )
2017-11-04 21:06:00 -04:00
dialog . showSaveDialog ( ( fileName ) => {
2017-11-12 16:47:34 -05:00
dotgrid . resize ( )
2017-11-04 21:06:00 -04:00
if ( fileName === undefined ) { return ; }
2017-11-12 16:47:34 -05:00
fs . writeFile ( fileName + ".svg" , svg , ( err ) => {
2017-11-04 21:06:00 -04:00
if ( err ) { alert ( "An error ocurred creating the file " + err . message ) ; return ; }
} ) ;
2017-11-09 14:47:06 -05:00
fs . writeFile ( fileName + '.png' , dotgrid . render . buffer ( ) ) ;
2017-11-05 23:35:29 -05:00
} ) ;
2017-11-04 19:59:11 -04:00
}
this . update _interface = function ( )
{
2017-11-04 20:52:05 -04:00
if ( from && to ) {
2017-11-14 06:18:58 -05:00
document . getElementById ( "line" ) . className . baseVal = "icon" ;
document . getElementById ( "arc_c" ) . className . baseVal = "icon" ;
document . getElementById ( "arc_r" ) . className . baseVal = "icon" ;
} else {
document . getElementById ( "line" ) . className . baseVal = "icon inactive" ;
document . getElementById ( "arc_c" ) . className . baseVal = "icon inactive" ;
document . getElementById ( "arc_r" ) . className . baseVal = "icon inactive" ;
2017-11-04 20:52:05 -04:00
}
2017-11-04 19:59:11 -04:00
2017-11-04 20:52:05 -04:00
if ( from && to && end ) {
2017-11-14 06:18:58 -05:00
document . getElementById ( "bezier" ) . className . baseVal = "icon" ;
} else {
document . getElementById ( "bezier" ) . className . baseVal = "icon inactive" ;
2017-11-05 14:38:14 -05:00
}
2017-11-14 06:18:58 -05:00
let prev = this . segments [ this . segments . length - 1 ]
if ( this . segments . length > 0 && prev . name != "close" && ( prev . name != "line" || prev . end ) ) {
document . getElementById ( "close" ) . className . baseVal = "icon" ;
} else {
document . getElementById ( "close" ) . className . baseVal = "icon inactive" ;
2017-11-05 14:53:59 -05:00
}
2017-11-14 06:18:58 -05:00
if ( this . segments . length > 0 ) {
document . getElementById ( "mirror" ) . className . baseVal = "icon" ;
document . getElementById ( "export" ) . className . baseVal = "icon" ;
} else {
document . getElementById ( "mirror" ) . className . baseVal = "icon inactive" ;
document . getElementById ( "export" ) . className . baseVal = "icon inactive" ;
2017-11-04 20:52:05 -04:00
}
2016-12-31 15:47:40 -05:00
}
2016-12-31 12:18:01 -05:00
// Normalizers
2017-11-07 06:04:47 -05:00
this . position _in _grid = function ( pos )
2016-12-31 12:18:01 -05:00
{
2017-11-12 16:47:34 -05:00
return new Pos ( ( window . innerWidth / 2 ) - ( this . width / 2 ) - pos . x , pos . y - ( 30 + 10 * ( this . scale ) ) )
2016-12-31 12:18:01 -05:00
}
2017-11-12 22:54:56 -05:00
this . position _on _grid = function ( pos )
2016-12-31 12:18:01 -05:00
{
2017-11-07 06:04:47 -05:00
x = Math . round ( pos . x / this . grid _width ) * this . grid _width
2017-11-12 16:47:34 -05:00
y = Math . round ( pos . y / this . grid _height ) * this . grid _height
2017-11-07 01:55:51 -05:00
off = ( x < - this . width || x > 0 || y > this . height || y < 0 )
2017-11-12 22:54:56 -05:00
if ( off ) {
2017-11-07 01:55:51 -05:00
x = 50
y = - 50
}
2017-11-07 06:04:47 -05:00
return new Pos ( x , y ) ;
2016-12-31 10:00:57 -05:00
}
2017-11-12 16:47:34 -05:00
this . resize = function ( )
{
this . scale = Math . min ( ( window . innerWidth - 90 ) / 300 , ( window . innerHeight - 100 ) / 320 )
this . width = dotgrid . scale * 300
this . height = dotgrid . scale * 300
this . element . style . width = this . width
this . element . style . height = this . height
this . element . style . padding = Math . floor ( 10 * this . scale ) + "px"
this . svg _el . setAttribute ( "width" , this . width + "px" ) ;
this . svg _el . setAttribute ( "height" , this . height + "px" ) ;
this . grid _width = dotgrid . width / dotgrid . grid _x ;
this . grid _height = dotgrid . height / dotgrid . grid _y ;
this . guide . update ( )
//cursor updates
if ( from ) {
cursor _from . style . left = Math . floor ( - from . x * this . scale + this . grid _width ) ;
cursor _from . style . top = Math . floor ( from . y * this . scale + this . grid _height ) ;
}
if ( to ) {
cursor _to . style . left = Math . floor ( - to . x * this . scale + this . grid _width ) ;
cursor _to . style . top = Math . floor ( to . y * this . scale + this . grid _height ) ;
}
if ( end ) {
cursor _end . style . left = Math . floor ( - end . x * this . scale + this . grid _width ) ;
cursor _end . style . top = Math . floor ( end . y * this . scale + this . grid _height ) ;
}
}
2017-11-05 23:35:29 -05:00
}
2017-11-06 21:10:09 -05:00
window . addEventListener ( 'dragover' , function ( e )
{
e . preventDefault ( ) ;
e . stopPropagation ( ) ;
e . dataTransfer . dropEffect = 'copy' ;
} ) ;
2017-11-12 16:47:34 -05:00
window . addEventListener ( 'resize' , function ( e )
{
dotgrid . resize ( )
dotgrid . draw ( )
} , false ) ;
2017-11-06 21:10:09 -05:00
window . addEventListener ( 'drop' , function ( e )
{
e . preventDefault ( ) ;
e . stopPropagation ( ) ;
var files = e . dataTransfer . files ;
for ( file _id in files ) {
var file = files [ file _id ] ;
if ( file . name . indexOf ( ".thm" ) == - 1 ) { console . log ( "skipped" , file ) ; continue ; }
var path = file . path ;
var reader = new FileReader ( ) ;
reader . onload = function ( e ) {
var o = JSON . parse ( e . target . result ) ;
dotgrid . theme . install ( o ) ;
} ;
reader . readAsText ( file ) ;
return ;
}
} ) ;