diff --git a/light9/web/timeline/timeline-elements.html b/light9/web/timeline/timeline-elements.html --- a/light9/web/timeline/timeline-elements.html +++ b/light9/web/timeline/timeline-elements.html @@ -31,16 +31,19 @@ } #coveredByDiagram { position: relative; + display: flex; + flex-direction: column; + height: 100%; } #dia, #adjusters, #cursorCanvas, #adjustersCanvas { position: absolute; left: 0; top: 0; right: 0; bottom: 0; } #debug { - background: white; - font-family: monospace; - font-size: 125%; - height: 15px; + background: white; + font-family: monospace; + font-size: 125%; + height: 15px; }
@@ -86,15 +89,18 @@ :host { display: flex; height: 100%; + flex-direction: column; } - div { - display: flex; - flex-direction: column; + #top { + } + #rows { height: 100%; } #rows.dragging { background: rgba(126, 52, 245, 0.0784); - } + } + light9-timeline-time-axis { + } light9-timeline-audio { width: 100%; height: 100px; @@ -111,9 +117,8 @@ show="{{show}}" zoom="{{zoomFlattened}}"> -
-
+
diff --git a/light9/web/timeline/timeline.coffee b/light9/web/timeline/timeline.coffee --- a/light9/web/timeline/timeline.coffee +++ b/light9/web/timeline/timeline.coffee @@ -276,21 +276,28 @@ class TimeZoomed extends Polymer.Element @observers: [ 'onGraph(graph, dia, setAdjuster, song, zoomInX)' ] + @listeners: {'iron-resize': 'update'} + update: -> + @renderer.resize(@clientWidth, @clientHeight) + @renderer.render(@stage); + onZoom: -> updateZoomFlattened = -> log('updateZoomFlattened') @zoomFlattened = ko.toJS(@zoom) ko.computed(updateZoomFlattened.bind(@)) + connectedCallback: -> super.connectedCallback() - root = @closest('light9-timeline-editor') - stage = new PIXI.Container(); + + @stage = new PIXI.Container() - renderer = PIXI.autoDetectRenderer(300,200, { + @renderer = PIXI.autoDetectRenderer({ backgroundColor: 0xff6060, - }); + autoResize: true, + }) - @$.rows.appendChild(renderer.view); + @$.rows.appendChild(@renderer.view); graphics = new PIXI.Graphics(); graphics.beginFill(0xFF3300); @@ -302,9 +309,11 @@ class TimeZoomed extends Polymer.Element graphics.lineTo(50, 50); graphics.endFill(); - stage.addChild(graphics); - renderer.render(stage); + @stage.addChild(graphics); + @renderer.render(@stage); + # iron-resize should be doing this but it never fires + setInterval(@update.bind(@), 1000) onGraph: -> U = (x) => @graph.Uri(x) log('assign rows',@song)