light9 Changeset - db84c1ee6b09

Changeset - db84c1ee6b09

Parent rev.

Child rev.

[Not reviewed]

default

0 2 1

Drew Perttula - 8 years ago 2017-06-09 05:36:07
drewp@bigasterisk.com

refactor to drawing.coffee
Ignore-this: 6c83abf137d0f6b10b68903070435814

3 files changed with 45 insertions and 42 deletions:

light9/web/timeline/drawing.coffee

light9/web/timeline/timeline-elements.html

light9/web/timeline/timeline.coffee

0 comments (0 inline, 0 general)

light9/web/timeline/drawing.coffee

➞

Show inline comments

@@ new file 100644 @@
 window.Drawing = {}
 window.Drawing.svgPathFromPoints = (pts) ->
   out = ''
   pts.forEach (p) ->
     p = p.elements if p.elements # for vec2
     if out.length == 0
       out = 'M '
     else
       out += 'L '
     out += '' + p[0] + ',' + p[1] + ' '
     return
   out
 window.Drawing.line = (ctx, p1, p2) ->
   ctx.moveTo(p1.e(1), p1.e(2))
   ctx.lineTo(p2.e(1), p2.e(2))
 # http://stackoverflow.com/a/4959890
 window.Drawing.roundRect = (ctx, sx,sy,ex,ey,r) ->
     d2r = Math.PI/180
     r = ( ( ex - sx ) / 2 ) if ( ex - sx ) - ( 2 * r ) < 0 # ensure that the radius isn't too large for x
     r = ( ( ey - sy ) / 2 ) if ( ey - sy ) - ( 2 * r ) < 0 # ensure that the radius isn't too large for y
     ctx.beginPath();
     ctx.moveTo(sx+r,sy);
     ctx.lineTo(ex-r,sy);
     ctx.arc(ex-r,sy+r,r,d2r*270,d2r*360,false);
     ctx.lineTo(ex,ey-r);
     ctx.arc(ex-r,ey-r,r,d2r*0,d2r*90,false);
     ctx.lineTo(sx+r,ey);
     ctx.arc(sx+r,ey-r,r,d2r*90,d2r*180,false);
     ctx.lineTo(sx,sy+r);
     ctx.arc(sx+r,sy+r,r,d2r*180,d2r*270,false);
     ctx.closePath();

light9/web/timeline/timeline-elements.html

➞

Show inline comments

@@ @@ -304,4 +304,5 @@ @@
 <script src="/lib/async/dist/async.js"></script>
 <script src="/lib/underscore/underscore-min.js"></script>
 <script src="adjustable.js"></script>
 <script src="drawing.js"></script>
 <script src="timeline.js"></script>

light9/web/timeline/timeline.coffee

➞

Show inline comments

 log = console.log
 RDF = 'http://www.w3.org/1999/02/22-rdf-syntax-ns#'
+Drawing = window.Drawing
 ROW_COUNT = 7
 # polymer dom-repeat is happy to shuffle children by swapping their
@@ @@ -640,39 +640,6 @@ Polymer @@
     patch = {delQuads: [{subject: @song, predicate: @graph.Uri(':note'), object: @uri, graph: @song}], addQuads: []}
     @graph.applyAndSendPatch(patch)
 svgPathFromPoints = (pts) ->
   out = ''
   pts.forEach (p) ->
     p = p.elements if p.elements # for vec2
     if out.length == 0
       out = 'M '
     else
       out += 'L '
     out += '' + p[0] + ',' + p[1] + ' '
     return
   out
 _line = (ctx, p1, p2) ->
   ctx.moveTo(p1.e(1), p1.e(2))
   ctx.lineTo(p2.e(1), p2.e(2))
 # http://stackoverflow.com/a/4959890
 _roundRect = (ctx, sx,sy,ex,ey,r) ->
     d2r = Math.PI/180
     r = ( ( ex - sx ) / 2 ) if ( ex - sx ) - ( 2 * r ) < 0 # ensure that the radius isn't too large for x
     r = ( ( ey - sy ) / 2 ) if ( ey - sy ) - ( 2 * r ) < 0 # ensure that the radius isn't too large for y
     ctx.beginPath();
     ctx.moveTo(sx+r,sy);
     ctx.lineTo(ex-r,sy);
     ctx.arc(ex-r,sy+r,r,d2r*270,d2r*360,false);
     ctx.lineTo(ex,ey-r);
     ctx.arc(ex-r,ey-r,r,d2r*0,d2r*90,false);
     ctx.lineTo(sx+r,ey);
     ctx.arc(sx+r,ey-r,r,d2r*90,d2r*180,false);
     ctx.lineTo(sx,sy+r);
     ctx.arc(sx+r,sy+r,r,d2r*180,d2r*270,false);
     ctx.closePath();
 Polymer
   is: 'light9-cursor-canvas'
@@ @@ -718,15 +685,15 @@ Polymer @@
     @ctx.strokeStyle = '#fff'
     @ctx.lineWidth = 0.5
     @ctx.beginPath()
     _line(@ctx, $V([0, @mouseY]), $V([@$.canvas.width, @mouseY]))
     _line(@ctx, $V([@mouseX, 0]), $V([@mouseX, @$.canvas.height]))
     Drawing.line(@ctx, $V([0, @mouseY]), $V([@$.canvas.width, @mouseY]))
     Drawing.line(@ctx, $V([@mouseX, 0]), $V([@mouseX, @$.canvas.height]))
     @ctx.stroke()
     if @cursorPath
       @ctx.strokeStyle = '#ff0303'
       @ctx.lineWidth = 1.5
       @ctx.beginPath()
-      _line(@ctx, @cursorPath.top0, @cursorPath.top1)
+      Drawing.line(@ctx, @cursorPath.top0, @cursorPath.top1)
       @ctx.stroke()
       @ctx.fillStyle = '#9c0303'
@@ @@ -739,7 +706,7 @@ Polymer @@
       @ctx.strokeStyle = '#ff0303'
       @ctx.lineWidth = 3
       @ctx.beginPath()
-      _line(@ctx, @cursorPath.bot0, @cursorPath.bot1, '#ff0303', '3px')
+      Drawing.line(@ctx, @cursorPath.bot0, @cursorPath.bot1, '#ff0303', '3px')
       @ctx.stroke()
 Polymer
@@ @@ -859,7 +826,7 @@ Polymer @@
     @ctx.strokeStyle = '#aaa'
     @ctx.lineWidth = 2
     @ctx.beginPath()
-    _line(@ctx, ctr, target)
+    Drawing.line(@ctx, ctr, target)
     @ctx.stroke()
   _drawAdjuster: (label, x1, y1, x2, y2) ->
@@ @@ -872,7 +839,7 @@ Polymer @@
     @ctx.fillStyle = 'rgba(255, 255, 0, 0.5)'
     @ctx.beginPath()
-    _roundRect(@ctx, x1, y1, x2, y2, radius)
+    Drawing.roundRect(@ctx, x1, y1, x2, y2, radius)
     @ctx.fill()
     @ctx.shadowColor = 'rgba(0,0,0,0)'
@@ @@ -881,7 +848,7 @@ Polymer @@
     @ctx.lineWidth = 2
     @ctx.setLineDash([3, 3])
     @ctx.beginPath()
-    _roundRect(@ctx, x1, y1, x2, y2, radius)
+    Drawing.roundRect(@ctx, x1, y1, x2, y2, radius)
     @ctx.stroke()
     @ctx.setLineDash([])
@@ @@ -975,7 +942,7 @@ Polymer @@
         @selection.selected(sel)
       elem.addEventListener 'mouseleave', =>
         @selection.hover(null)
     elem.setAttribute('d', svgPathFromPoints(curvePts))
+    elem.setAttribute('d', Drawing.svgPathFromPoints(curvePts))
     @updateNotePathClasses(uri, elem)
   updateNotePathClasses: (uri, elem) ->

0 comments (0 inline, 0 general)