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)