changeset 1324:bb4cd6d7d274

move diagram code to coffee Ignore-this: b9e495a5622bb5ddc8df2f9ed4c39322
author Drew Perttula <drewp@bigasterisk.com>
date Sat, 04 Jun 2016 01:41:25 +0000
parents a77bb5bf9d89
children 4210bbaf528f
files light9/web/timeline-elements.html light9/web/timeline.coffee
diffstat 2 files changed, 60 insertions(+), 59 deletions(-) [+]
line wrap: on
line diff
--- a/light9/web/timeline-elements.html	Sat Jun 04 01:39:16 2016 +0000
+++ b/light9/web/timeline-elements.html	Sat Jun 04 01:41:25 2016 +0000
@@ -162,64 +162,7 @@
     </svg>
 
   </template>
-  <script>
-   function svgPathFromPoints(pts) {
-       var out = "";
-       pts.forEach(function(p) {
-           if (out.length == 0) {
-               out = 'M ';
-           } else {
-               out += 'L ';
-           }
-           out += '' + p[0] + ',' + p[1] + ' ';
-       });
-       return out;
-   }
-   
-   Polymer({
-       is: "light9-timeline-diagram-layer",
-       properties: {
-       },
-       ready: function() {
-           window.setNote = this.setNote.bind(this);
-
-           this.cursorPath = {
-               top: this.querySelector("#cursor1"),
-               mid: this.querySelector("#cursor2"),
-               bot: this.querySelector("#cursor3")
-               };
-
-           this.noteById = {};
-       },
-       setNote: function(uri, x1, x2, y1, y2) {
-           var elem = this.noteById[uri];
-           if (!elem) {
-               var s = '<path id="'+uri+'" style="fill:#53774b; stroke:#000000; stroke-width:1.5;"/>';
-               this.$.notes.innerHTML += s;
-               elem = this.noteById[uri] = this.$.notes.lastChild;
-           }
-           
-           var d = svgPathFromPoints([[x1, y2], [x1*.75 + x2*.25, y1], [x1*.25 + x2*.75, y1], [x2, y2]]);
-           elem.setAttribute('d', d);
-       },
-       setCursor: function(y1, h1, y2, h2, fullZoomX, zoomInX, cursor) {
-           var xZoomedOut = fullZoomX(cursor.t);
-           var xZoomedIn = zoomInX(cursor.t);
-           this.cursorPath.top.setAttribute('d', svgPathFromPoints([
-               [xZoomedOut, y1],
-               [xZoomedOut, y1 + h1]]));
-           this.cursorPath.mid.setAttribute('d', svgPathFromPoints([
-               [xZoomedIn + 2, y2 + h2],
-               [xZoomedIn - 2, y2 + h2],
-               [xZoomedOut - 1, y1 + h1],
-               [xZoomedOut + 1, y1 + h1]]) + ' Z');
-           this.cursorPath.bot.setAttribute('d', svgPathFromPoints([
-               [xZoomedIn, y2 + h2],
-               [xZoomedIn, this.offsetParent.offsetHeight]]));
-
-       }
-   });
-  </script>
+ 
 </dom-module>
 
 
--- a/light9/web/timeline.coffee	Sat Jun 04 01:39:16 2016 +0000
+++ b/light9/web/timeline.coffee	Sat Jun 04 01:41:25 2016 +0000
@@ -207,4 +207,62 @@
     drag.on 'drag', () =>
       @adj?.continueDrag($V([d3.event.x, d3.event.y]))
     drag.on('end', () => @adj?.endDrag())
-  
\ No newline at end of file
+
+
+svgPathFromPoints = (pts) ->
+  out = ''
+  pts.forEach (p) ->
+    if out.length == 0
+      out = 'M '
+    else
+      out += 'L '
+    out += '' + p[0] + ',' + p[1] + ' '
+    return
+  out
+
+Polymer
+  is: 'light9-timeline-diagram-layer'
+  properties: {}
+  ready: ->
+    window.setNote = @setNote.bind(this)
+    @cursorPath =
+      top: @querySelector('#cursor1')
+      mid: @querySelector('#cursor2')
+      bot: @querySelector('#cursor3')
+    @noteById = {}
+    return
+  setNote: (uri, x1, x2, y1, y2) ->
+    elem = @noteById[uri]
+    if !elem
+      s = '<path id="' + uri + '" style="fill:#53774b; stroke:#000000; stroke-width:1.5;"/>'
+      @$.notes.innerHTML += s
+      elem = @noteById[uri] = @$.notes.lastChild
+    d = svgPathFromPoints([
+      [x1, y2]
+      [x1 * .75 + x2 * .25, y1]
+      [x1 * .25 + x2 * .75, y1]
+      [x2, y2]
+    ])
+    elem.setAttribute 'd', d
+    return
+  setCursor: (y1, h1, y2, h2, fullZoomX, zoomInX, cursor) ->
+    xZoomedOut = fullZoomX(cursor.t)
+    xZoomedIn = zoomInX(cursor.t)
+    @cursorPath.top.setAttribute 'd', svgPathFromPoints([
+      [xZoomedOut, y1]
+      [xZoomedOut, y1 + h1]
+    ])
+    @cursorPath.mid.setAttribute 'd', svgPathFromPoints([
+      [xZoomedIn + 2, y2 + h2]
+      [xZoomedIn - 2, y2 + h2]
+      [xZoomedOut - 1, y1 + h1]
+      [xZoomedOut + 1, y1 + h1]
+    ]) + ' Z'
+    @cursorPath.bot.setAttribute 'd', svgPathFromPoints([
+      [xZoomedIn, y2 + h2]
+      [xZoomedIn, @offsetParent.offsetHeight]
+    ])
+    return
+  setAdjusterConnector: (id, center, target) ->
+    console.log 'setAdjusterConnector', id, center, target
+    return