light9 Changeset - 338ea27aeb23

Changeset - 338ea27aeb23

Parent rev.

Child rev.

[Not reviewed]

default

0 2 0

Drew Perttula - 7 years ago 2018-05-12 09:22:00
drewp@bigasterisk.com

fix axis and cursor
Ignore-this: c53185c841b29ce43356c2858d275e0e

2 files changed with 44 insertions and 33 deletions:

light9/web/timeline/timeline-elements.html

light9/web/timeline/timeline.coffee

0 comments (0 inline, 0 general)

light9/web/timeline/timeline-elements.html

➞

Show inline comments

@@ @@ -110,7 +110,7 @@ @@
+     }
     </style>
     <div id="top">
       <light9-timeline-time-axis id="time"></light9-timeline-time-axis>
+      <light9-timeline-time-axis id="time" view-state="{{viewState}}"></light9-timeline-time-axis>
       <light9-timeline-audio id="audio"
                              graph="{{graph}}"
                              song="{{song}}"
@@ @@ -143,7 +143,6 @@ @@
       height: 100%;
+      }
       #notes > path {
       stroke:#000000;
       stroke-width:1.5;
+      }
@@ @@ -167,7 +166,7 @@ @@
             y="631.3988"
             id="text4290"
             sodipodi:linespacing="125%" ><tspan sodipodi:role="line" id="tspan4292" x="-338.38403" y="631.3988">spotchase</tspan></text>
-        <g id="timeAxis" transform="translate(0,40)"></g>
+        <g id="zzztimeAxis" transform="translate(0,40)"></g>
         <g id="mouse"></g>
         <g id="notes"></g>
       </g>
@@ @@ -206,8 +205,14 @@ @@
          width: 100%;
          height: 31px;
+     }
       svg {
           width: 100%;
           height: 30px;
+      }
     </style>
     <div></div>
     <svg id="timeAxis" xmlns="http://www.w3.org/2000/svg">
       <g id="axis" transform="translate(0,30)"></g>
     </svg>
   </template>
 </dom-module>

light9/web/timeline/timeline.coffee

➞

Show inline comments

@@ @@ -110,6 +110,10 @@ class ViewState @@
     ko.computed(@zoomOrLayoutChanged.bind(@))
   setWidth: (w) ->
     @width(w)
     @zoomOrLayoutChanged() # before other handleers run
   zoomOrLayoutChanged: () ->
     log('zoomOrLayoutChanged')
     # not for cursor updates
@@ @@ -124,11 +128,9 @@ class ViewState @@
     @fullZoomX.domain([0, @zoomSpec.duration()])
     @fullZoomX.range([0, @width()])
     # had trouble making notes update when this changes
     zoomInX = d3.scaleLinear()
     zoomInX.domain([@zoomSpec.t1(), @zoomSpec.t2()])
     zoomInX.range([0, @width()])
     @zoomInX = zoomInX
     @zoomInX.domain([@zoomSpec.t1(), @zoomSpec.t2()])
     @zoomInX.range([0, @width()])
     log('update zoomInX')
   latestMouseTime: ->
     @zoomInX.invert(@mouse.pos().e(1))
@@ @@ -165,9 +167,8 @@ class ViewState @@
         @zoomSpec.t2(newT2)
       , lastTime + 10)
 class TimelineEditor extends Polymer.Element
+class TimelineEditor extends Polymer.mixinBehaviors([Polymer.IronResizableBehavior], Polymer.Element)
   @is: 'light9-timeline-editor'
   @behaviors: [ Polymer.IronResizableBehavior ]
   @properties:
     viewState: { type: Object }
     debug: {type: String}
@@ @@ -178,12 +179,10 @@ class TimelineEditor extends Polymer.Ele @@
     followPlayerSong: {type: Boolean, notify: true, value: true}
     song: {type: String, notify: true}
     show: {value: 'http://light9.bigasterisk.com/show/dance2017'}
     songTime: {type: Number, notify: true, observer: '_onSongTime'}
     songDuration: {type: Number, notify: true, observer: '_onSongDuration'}
     songTime: {type: Number, notify: true},#, observer: '_onSongTime'}
     songDuration: {type: Number, notify: true},#, observer: '_onSongDuration'}
     songPlaying: {type: Boolean, notify: true}
     selection: {type: Object, notify: true}
   @listeners:
     'iron-resize': '_onIronResize'
   @observers: [
     'setSong(playerSong, followPlayerSong)',
     'onGraph(graph)',
@@ @@ -191,6 +190,7 @@ class TimelineEditor extends Polymer.Ele @@
   connectedCallback: ->
     super.connectedCallback()
     ko.options.deferUpdates = true;
     @dia = @$.dia
@@ @@ -207,8 +207,8 @@ class TimelineEditor extends Polymer.Ele @@
       ac = @$.adjustersCanvas
       setTimeout((()=>ac.setAdjuster(adjId, makeAdjustable)),10)
     ko.computed(@zoomOrLayoutChanged.bind(@))
     setTimeout =>
       ko.computed(@zoomOrLayoutChanged.bind(@))
       ko.computed(@songTimeChanged.bind(@))
       @trackMouse()
@@ @@ -227,13 +227,17 @@ class TimelineEditor extends Polymer.Ele @@
       setInterval(@updateDebugSummary.bind(@), 100)
     , 500
     @addEventListener('iron-resize', @_onIronResize.bind(@))
     @_onIronResize()
     #if anchor == loadtest
     #  add note and delete it repeatedly
     #  disconnect the graph, make many notes, drag a point over many steps, measure lag somewhere
   _onIronResize: ->
     log('set w to',   @offsetWidth)
     @viewState.width(@offsetWidth)
     @viewState.setWidth(@offsetWidth)
     log('changed width')
   _onSongTime: (t) ->
     @viewState.cursor.t(t)
   _onSongDuration: (d) ->
@@ @@ -262,7 +266,8 @@ class TimelineEditor extends Polymer.Ele @@
     # todo: these run a lot of work purely for a time change
     if @$.zoomed?.$?.audio?
       @dia.setTimeAxis(vs.width(), @$.zoomed.$.audio.offsetTop, vs.zoomInX)
       vs.zoomSpec.t1()
       #@dia.setTimeAxis(vs.width(), @$.zoomed.$.audio.offsetTop, vs.zoomInX)
       @$.adjustersCanvas.updateAllCoords()
     # cursor needs update when layout changes, but I don't want
@@ @@ -273,7 +278,7 @@ class TimelineEditor extends Polymer.Ele @@
     return unless @$.zoomed?.$?.time?
     @$.cursorCanvas.setCursor(@$.audio.offsetTop, @$.audio.offsetHeight,
                               @$.zoomed.$.time.offsetTop,
                               @$.zoomed.$.time.offsetHeight,
+,#@$.zoomed.$.time.offsetHeight,
                               @viewState)
   trackMouse: ->
@@ @@ -286,8 +291,8 @@ class TimelineEditor extends Polymer.Ele @@
         if ev.touches?.length
           ev = ev.touches[0]
         @root = @getBoundingClientRect()
         @viewState.mouse.pos($V([ev.pageX - @root.left, ev.pageY - @root.top]))
         root = @$.cursorCanvas.getBoundingClientRect()
         @viewState.mouse.pos($V([ev.pageX - root.left, ev.pageY - root.top]))
         @$.cursorCanvas.setMouse(@viewState.mouse.pos())
         # should be controlled by a checkbox next to follow-player-song-choice
@@ @@ -384,7 +389,7 @@ customElements.define(TimelineEditor.is, @@
 # plan: in here, turn all the notes into simple js objects with all
 # their timing data and whatever's needed for adjusters. From that, do
 # the brick layout. update only changing adjusters.
 class TimeZoomed extends Polymer.Element
+class TimeZoomed extends Polymer.mixinBehaviors([Polymer.IronResizableBehavior], Polymer.Element)
   @is: 'light9-timeline-time-zoomed'
   @behaviors: [ Polymer.IronResizableBehavior ]
   @properties:
@@ @@ -398,7 +403,6 @@ class TimeZoomed extends Polymer.Element @@
     'onGraph(graph, setAdjuster, song, viewState, project)',
     'onZoom(viewState)',
+  ]
   @listeners: {'iron-resize': 'update'}
   update: ->
     @renderer.resize(@clientWidth, @clientHeight)
     @renderer.render(@stage)
@@ @@ -420,10 +424,10 @@ class TimeZoomed extends Polymer.Element @@
   connectedCallback: ->
     super.connectedCallback()
     @$.rows.appendChild(@renderer.view);
     @addEventListener('iron-resize', @update.bind(@))
     @update()
     # iron-resize should be doing this but it never fires
     setInterval(@update.bind(@), 1000)
     @$.rows.appendChild(@renderer.view);
   onGraph: ->
     @graph.runHandler(@gatherNotes.bind(@), 'zoom notes')
@@ @@ -487,8 +491,14 @@ customElements.define(TimeZoomed.is, Tim @@
 class TimeAxis extends Polymer.Element
   @is: "light9-timeline-time-axis",
   # for now since it's just one line calling dia,
   # light9-timeline-editor does our drawing work.
   @properties:
     viewState: { type: Object, notify: true, observer: "onViewState" }
   onViewState: ->
     ko.computed =>
       dependOn = [@viewState.zoomSpec.t1(), @viewState.zoomSpec.t2()]
       pxPerTick = 50
       axis = d3.axisTop(@viewState.zoomInX).ticks(@viewState.width() / pxPerTick)
       d3.select(@$.axis).call(axis)
 customElements.define(TimeAxis.is, TimeAxis)
@@ @@ -706,10 +716,6 @@ class DiagramLayer extends Polymer.Eleme @@
     super.connectedCallback()
     @elemById = {}
   setTimeAxis: (width, yTop, scale) ->
     pxPerTick = 50
     axis = d3.axisTop(scale).ticks(width / pxPerTick)
     d3.select(@$.timeAxis).attr('transform', 'translate(0,'+yTop+')').call(axis)
   getOrCreateElem: (uri, groupId, tag, attrs, moreBuild) ->
     elem = @elemById[uri]

0 comments (0 inline, 0 general)