light9 Changeset - 34c9c4568c88

Changeset - 34c9c4568c88

Parent rev.

Child rev.

[Not reviewed]

default

0 2 0

Drew Perttula - 9 years ago 2016-06-04 22:10:32
drewp@bigasterisk.com

support touch drags
Ignore-this: c8218f5691751d4bd17542a9d65d88d4

2 files changed with 24 insertions and 4 deletions:

light9/web/adjustable.coffee

light9/web/timeline.coffee

0 comments (0 inline, 0 general)

light9/web/adjustable.coffee

➞

Show inline comments

@@ @@ -50,12 +50,15 @@ class Adjustable @@
     if ev.target.tagName == "LIGHT9-TIMELINE-EDITOR"
       rootElem = ev.target
     else
       rootElem = ev.target.closest('light9-timeline-editor')
     if ev.touches?.length
       ev = ev.touches[0]
     # storing root on the object to remember it across calls in case
     # you drag outside the editor.
     @root = rootElem.getBoundingClientRect() if rootElem
     offsetParentPos = $V([ev.pageX - @root.left, ev.pageY - @root.top])
     setMouse(offsetParentPos) # for debugging

light9/web/timeline.coffee

➞

Show inline comments

@@ @@ -23,12 +23,14 @@ Polymer @@
       zoomSpec:
         duration: ko.observable(190)
         t1: ko.observable(102)
         t2: ko.observable(161)
       cursor:
         t: ko.observable(105)
       mouse:
         pos: ko.observable($V([0,0]))
     ko.computed =>
       @debug = ko.toJSON(@viewState)
     ko.computed =>
       @fullZoomX = d3.scaleLinear().domain([0, @viewState.zoomSpec.duration()]).range([0, @width()])
@@ @@ -42,12 +44,27 @@ Polymer @@
       @$.dia.setCursor(@$.audio.offsetTop, @$.audio.offsetHeight,
                        @$.zoomed.$.time.offsetTop,
                        @$.zoomed.$.time.offsetHeight,
                        @fullZoomX, @zoomInX, @viewState.cursor)
     # this isn't firing on phone during pen drag
     for evName in ['mousemove', 'touchmove']
       @addEventListener evName, (ev) =>
         ev.preventDefault()
         if ev.touches?.length
           ev = ev.touches[0]
         # consolidate with _editorCoordinates version
         @root = @getBoundingClientRect()
         @viewState.mouse.pos($V([ev.pageX - @root.left, ev.pageY - @root.top]))
         @$.dia.setMouse(@viewState.mouse.pos())
         @debug = evName + ' ' + ev.clientX + ' ' + ev.layerX + ' ' + ev.movementX + ' ' + ev.offsetX + ' ' + ev.pageX + ' ' + ev.x
     @adjs = @makeZoomAdjs().concat(@persistDemo())
   persistDemo: ->
     ctx = @graph.Uri('http://example.com/')
     adjs = []
     for n in [0..7]
@@ @@ -227,16 +244,16 @@ Polymer @@
   setTimeAxis: (width, yTop, scale) ->
     pxPerTick = 50
     axis = d3.axisTop(scale).ticks(width / pxPerTick)
     d3.select(@$.timeAxis).attr('transform', 'translate(0,'+yTop+')').call(axis)
   setMouse: (pos) ->
     elem = @getOrCreateElem('mouse-x', 'mouse', 'path', {style: "fill:none;stroke:#333;stroke-width:0.5;"})
     elem.setAttribute('d', svgPathFromPoints([[-999, pos.e(2)], [999, pos.e(2)]]))
     elem = @getOrCreateElem('mouse-y', 'mouse', 'path', {style: "fill:none;stroke:#333;stroke-width:0.5;"})
     elem.setAttribute('d', svgPathFromPoints([[pos.e(1), -999], [pos.e(1), 999]]))
     elem = @getOrCreateElem('mouse-x', 'mouse', 'path', {style: "fill:none;stroke:#fff;stroke-width:0.5;"})
     elem.setAttribute('d', svgPathFromPoints([[-9999, pos.e(2)], [9999, pos.e(2)]]))
     elem = @getOrCreateElem('mouse-y', 'mouse', 'path', {style: "fill:none;stroke:#fff;stroke-width:0.5;"})
     elem.setAttribute('d', svgPathFromPoints([[pos.e(1), -9999], [pos.e(1), 9999]]))
   getOrCreateElem: (uri, groupId, tag, attrs) ->
     elem = @elemById[uri]
     if !elem
       elem = @elemById[uri] = document.createElementNS("http://www.w3.org/2000/svg", tag)
       @$[groupId].appendChild(elem)

0 comments (0 inline, 0 general)