Mercurial > code > home > repos > light9
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