add phrases to arr visual

linxmix · Oct 22, 2016 · 1c8bdde · 1c8bdde
1 parent 65907d8
commit 1c8bdde
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 2 deletions.
diff --git a/app/components/arrangement-visual.js b/app/components/arrangement-visual.js
@@ -24,6 +24,7 @@ export default DataVisual.extend(
   // optional params
   followPlayhead: false,
   showBarGrid: true,
+  showPhaseGrid: true,
   isReady: true,
   showLastPlayMarker: false,
   zoom: Ember.computed(() => d3.behavior.zoom()),
@@ -117,6 +118,12 @@ export default DataVisual.extend(
     return d3.scale.linear().domain([0, domainMax + 0]).range([this.get('minX'), this.get('maxX')]);
   }).readOnly(),
 
+  phraseScale: Ember.computed('arrangement.barCount', 'minX', 'maxX', function () {
+    let domainMax = this.get('arrangement.barCount') / 8;
+
+    return d3.scale.linear().domain([0, domainMax + 0]).range([this.get('minX'), this.get('maxX')]);
+  }).readOnly(),
+
   _didZoom: _.throttle(function() {
     const { zoom, minX, maxX, minY, maxY } = this.getProperties('zoom', 'minX', 'maxX', 'minY', 'maxY');
     const translate = zoom.translate();

diff --git a/app/styles/components/_arrangement-visual.scss b/app/styles/components/_arrangement-visual.scss
@@ -20,7 +20,7 @@
   stroke: rgba(#0000ff, 1);
 }
 
-.ArrangementVisual-beatAxis, .ArrangementVisual-barAxis {
+.ArrangementVisual-beatAxis, .ArrangementVisual-barAxis, .ArrangementVisual-phraseAxis {
   height: 30px;
   color: white;
   stroke: white;
@@ -45,5 +45,9 @@
 }
 
 .ArrangementVisual-barAxis {
-  stroke: rgba(#fff, 0.3);
+  stroke: rgba(#fff, 0.2);
+}
+
+.ArrangementVisual-phraseAxis {
+  stroke: rgba(#fff, 1.0);
 }
diff --git a/app/templates/components/arrangement-visual.hbs b/app/templates/components/arrangement-visual.hbs
@@ -24,6 +24,16 @@
   tickSize=height
 }}
 
+{{d3-axis
+  isD3Visible=showPhaseGrid
+  select=select.ArrangementVisual-phraseAxis
+  transform=(svg-translate 0 height)
+  scale=phraseScale
+  orient="top"
+  ticks=(multiply arrangement.barCount 0.125)
+  tickSize=height
+}}
+
 {{yield select maxX maxY}}
 
 {{arrangement-visual/playhead