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

@@ @@ -295,13 +295,14 @@ @@
 <script src="/lib/d3/build/d3.min.js"></script>
 <!-- version with https://github.com/RubenVerborgh/N3.js/pull/61 -->
 <script src="/lib/N3.js-pull61/browser/n3-browser.js"></script>
 <!-- master version -->
 <xxscript src="/lib/N3.js/browser/n3-browser.js"></script>
 <script src="/lib/knockout/dist/knockout.debug.js"></script>
 <script src="/lib/shortcut/index.js"></script>
 <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
 # attribute values, and it's hard to correctly setup/teardown your
 # side effects if your attributes are changing before the detach
 # call. This alternative to dom-repeat never reassigns
 # attributes. But, it can't set up property bindings.
 updateChildren = (parent, newUris, makeChild) ->
   childUris = []
   childByUri = {}
   for e in parent.children
     childUris.push(e.uri)
@@ @@ -631,57 +631,24 @@ Polymer @@
         @colorScale = value
         @existingColorScaleSetting = setting
     if @existingColorScaleSetting == null
       @colorScaleFromGraph = '#ffffff'
       @colorScale = '#ffffff'
     console.timeEnd('attrs update')
   onDel: ->
     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'
   behaviors: [ Polymer.IronResizableBehavior ]
   listeners: 'iron-resize': 'update'
   ready: ->
     @mouseX = 0
     @mouseY = 0
     @cursorPath = null
     @ctx = @$.canvas.getContext('2d')
@@ @@ -709,46 +676,46 @@ Polymer @@
       mid3: $V([xZoomedOut + 1, y1 + h1])
       bot0: $V([xZoomedIn, y2 + h2])
       bot1: $V([xZoomedIn, @offsetParent.offsetHeight])
+    }
     @redraw()
   redraw: ->
     @ctx.clearRect(0, 0, @$.canvas.width, @$.canvas.height)
     @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'
       @ctx.beginPath()
       @ctx.moveTo(@cursorPath.mid0.e(1), @cursorPath.mid0.e(2))
       @ctx.lineTo(p.e(1), p.e(2)) for p in [
         @cursorPath.mid1, @cursorPath.mid2, @cursorPath.mid3]
       @ctx.fill()
       @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
   is: 'light9-adjusters-canvas'
   behaviors: [ Polymer.IronResizableBehavior ]
   properties:
     adjs: { type: Object, notify: true }, # adjId: Adjustable
   observers: [
     'updateAllCoords(adjs)'
+  ]
   listeners:
     'iron-resize': 'resizeUpdate'
@@ @@ -850,47 +817,47 @@ Polymer @@
         output.setElements([
           Math.max(20, output.e(1)),
           output.e(2)])
       adj.centerOffset = output.subtract(adj.getTarget())
       output.adj = adj
       @qt.add(output)
   _drawConnector: (ctr, target) ->
     @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) ->
     radius = 8
     @ctx.shadowColor = 'black'
     @ctx.shadowBlur = 15
     @ctx.shadowOffsetX = 5
     @ctx.shadowOffsetY = 9
     @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)'
     @ctx.strokeStyle = 'yellow'
     @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([])
     @ctx.font = "12px sans"
     @ctx.fillStyle = '#000'
     @ctx.fillText(label, x1 + 5, y2 - 5, x2 - x1 - 10)
     # coords from a center that's passed in
     # # special layout for the thaeter ones with middinh
     # l/r arrows
     # mouse arrow cursor upon hover, and accent the hovered adjuster
     # connector
@@ @@ -966,24 +933,24 @@ Polymer @@
       elem.addEventListener 'mousedown', (ev) =>
         sel = @selection.selected()
         if ev.getModifierState('Control')
           if uri in sel
             sel = _.without(sel, uri)
           else
             sel.push(uri)
         else
           sel = [uri]
         @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) ->
     ko.computed =>
       classes = 'light9-timeline-diagram-layer ' + (if @selection.hover() == uri then 'hover' else '') + ' '  + (if uri in @selection.selected() then 'selected' else '')
       elem.setAttribute('class', classes)
     #elem = @getOrCreateElem(uri+'/label', 'noteLabels', 'text', {style: "font-size:13px;line-height:125%;font-family:'Verana Sans';text-align:start;text-anchor:start;fill:#000000;"})
     #elem.setAttribute('x', curvePts[0].e(1)+20)
     #elem.setAttribute('y', curvePts[0].e(2)-10)
     #elem.innerHTML = effectLabel;

0 comments (0 inline, 0 general)