light9 Changeset - bb4cd6d7d274

Changeset - bb4cd6d7d274

Parent rev.

Child rev.

[Not reviewed]

default

0 2 0

Drew Perttula - 9 years ago 2016-06-04 01:41:25
drewp@bigasterisk.com

move diagram code to coffee
Ignore-this: b9e495a5622bb5ddc8df2f9ed4c39322

2 files changed with 60 insertions and 59 deletions:

light9/web/timeline-elements.html

light9/web/timeline.coffee

0 comments (0 inline, 0 general)

light9/web/timeline-elements.html

➞

Show inline comments

@@ @@ -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>

light9/web/timeline.coffee

➞

Show inline comments

@@ @@ -207,4 +207,62 @@ Polymer @@
     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

0 comments (0 inline, 0 general)