changeset 1337:34c9c4568c88

support touch drags Ignore-this: c8218f5691751d4bd17542a9d65d88d4
author Drew Perttula <drewp@bigasterisk.com>
date Sat, 04 Jun 2016 22:10:32 +0000
parents 2d77dc9436c3
children 5ba5afe30817
files light9/web/adjustable.coffee light9/web/timeline.coffee
diffstat 2 files changed, 24 insertions(+), 4 deletions(-) [+]
line wrap: on
line diff
--- a/light9/web/adjustable.coffee	Sat Jun 04 21:23:58 2016 +0000
+++ b/light9/web/adjustable.coffee	Sat Jun 04 22:10:32 2016 +0000
@@ -53,6 +53,9 @@
     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
--- a/light9/web/timeline.coffee	Sat Jun 04 21:23:58 2016 +0000
+++ b/light9/web/timeline.coffee	Sat Jun 04 22:10:32 2016 +0000
@@ -26,6 +26,8 @@
         t2: ko.observable(161)
       cursor:
         t: ko.observable(105)
+      mouse:
+        pos: ko.observable($V([0,0]))
 
     ko.computed =>
       @debug = ko.toJSON(@viewState)
@@ -45,6 +47,21 @@
                        @$.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: ->
@@ -230,10 +247,10 @@
     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]