Finished bulk of the zooming functionality. Cleanup needed now

QutEcoacoustics · Nov 30, 2015 · 25aa8d1 · 25aa8d1
1 parent 4bf609f
commit 25aa8d1
Show file tree

Hide file tree

Showing 8 changed files with 196 additions and 101 deletions.
diff --git a/src/app/d3Bindings/eventDistribution/_eventDistribution.scss b/src/app/d3Bindings/eventDistribution/_eventDistribution.scss
@@ -50,7 +50,7 @@ $legend-size: 2em;
 
 $standard-brush-fill: rgba(30, 144, 255, 0.2);
 $visualization-brush-fill: rgba(mix($standard-brush-fill, white), 0.7);
-$visualization-brush-lane-overlay-fill: rgba(255,255,255, 0.0);
+$visualization-brush-lane-overlay-fill: rgba(255, 255, 255, 0.0);
 $visualization-brush-stroke: $gray-light;
 
 event-distribution-overview, event-distribution-detail {
@@ -132,6 +132,20 @@ event-distribution-detail {
     stroke: $visualization-brush-stroke;
     fill: $visualization-brush-lane-overlay-fill;
   }
+
+  .tiles {
+    cursor: pointer;
+
+    .tile rect {
+      //stroke: rgba(0, 0, 0, 0.5);
+      //stroke-width: 1px;
+      //border-left: rgba(255, 0, 0, 0.5) solid 1px;
+      //border-right: rgba(0, 255, 0, 0.5) solid 1px;
+
+      fill: rgba(255, 255, 255, 0.5);
+    }
+
+  }
 }
 
 event-distribution-visualisation, event-distribution-visualisation-multi-scale {
@@ -167,6 +181,13 @@ event-distribution-visualisation, event-distribution-visualisation-multi-scale {
         //border-left: deeppink solid 1px;
         //border-right: blue solid 1px;
         fill: $tile-background-color;
+
+        //stroke: rgba(0, 0, 0, 0.5);
+        //stroke-width: 1px;
+        //
+        //border-left: rgba(255, 0, 0, 0.5) solid 1px;
+        //border-right: rgba(0, 255, 0, 0.5) solid 1px;
+        //fill: rgba(0, 0, 255, 0.2);
       }
 
       .tile text {

diff --git a/src/app/d3Bindings/eventDistribution/distributionCommon.js b/src/app/d3Bindings/eventDistribution/distributionCommon.js
@@ -35,11 +35,9 @@ angular
 
                         return `m-${hw} 0 l0 ${s} l${w} 0 l0 -${s} m-${hw} ${s} l0 ${r}`;
                     },
-                    getNavigateUrl(dataFunctions, category, tileSizeSeconds, tileWidthPixels, d, offset) {
+                    getNavigateUrl(dataFunctions, tileWidthPixels, d, offset) {
                         var url = dataFunctions.getNavigateUrl(
                             offset,
-                            category,
-                            tileSizeSeconds,
                             tileWidthPixels,
                             d
                         );
@@ -50,16 +48,7 @@ angular
 
                         return;
                     },
-                    /**
-                     * Get the best number of tiles for a given width.
-                     * @param width
-                     * @param tileWidthPixels
-                     */
-                    getTileCountForWidth(width, tileWidthPixels) {
-                        // round high so that we always have enough tiles
-                        // to fill a surface
-                        return Math.ceil(width / tileWidthPixels);
-                    },
+
                     getWidth(element, margin) {
                         var containerWidth = element.node().parentNode.getBoundingClientRect().width,
                             availableWidth = containerWidth - (margin.left + margin.right);
@@ -109,7 +98,7 @@ angular
                     isImageSuccessful(tile) {
                         return !successfulImages.has(tile.tileImageUrl);
                     },
-                    isNavigatable(dataFunctions, visibleTiles, clickDate) {
+                    isNavigatable(tilingFunctions, dataFunctions, visibleTiles, clickDate) {
                         // round to nearest 30 seconds for navigation urls
                         const navigationOffsetRounding = 30;
                         let roundedDate = roundDate.round(navigationOffsetRounding, clickDate);
@@ -120,14 +109,14 @@ angular
 
                         // reuse filtering method but don't allow for padding
                         var matchedTiles = visibleTiles.filter(tile => {
-                            return TilingFunctions.isTileVisible(searchRange, tile);
+                            return tilingFunctions.isTileVisible(searchRange, tile);
                         });
 
                         var url;
                         if (matchedTiles.length) {
                             // the source item that owns the tile
                             let itemFound = matchedTiles.find(tile => {
-                                return TilingFunctions.isItemVisible(dataFunctions, searchRange, tile.source);
+                                return tilingFunctions.isItemVisible(dataFunctions, searchRange, tile.source);
                             });
 
                             // the tile could still be outside of the item's actual range
@@ -149,12 +138,12 @@ angular
                     middle(interval) {
                         return +interval[0] + ((+interval[1] - +interval[0]) / 2.0);
                     },
-                    navigateTo(dataFunctions, visibleTiles, xScale, source) {
+                    navigateTo(tilingFunctions, dataFunctions, visibleTiles, xScale, source) {
                         var coordinates = d3.mouse(source.node()),
                             clickDate = xScale.invert(coordinates[0]);
 
                         // now see if there is a match for the date!
-                        var {url} = this.isNavigatable(dataFunctions, visibleTiles, clickDate);
+                        var {url} = this.isNavigatable(tilingFunctions, dataFunctions, visibleTiles, clickDate);
 
                         if (url) {
                             console.warn(