image hide and image isolate publiclab#6

jywarren · Dec 16, 2014 · c3b5f8d · c3b5f8d
1 parent c46a050
commit c3b5f8d
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 23 deletions.
diff --git a/DistortableImageOverlay.js b/DistortableImageOverlay.js
@@ -13,6 +13,12 @@ $L = {
 
     $(window).keydown(function(e){
       switch (e.which) {
+        case 73: // i
+          $L.selected.toggleIsolate()
+          break;
+        case 72: // h
+          $L.selected.toggleVisibility()
+          break;
         case 68: // d
           $L.selected.toggleMode.apply($L.selected)
           break;
@@ -35,10 +41,9 @@ $L = {
     // this runs *as well as* image.click events, 
     // when you click an image
     map.on('click', function(e) {
-//      $L.clearImageButtons()
-//      $.each($L.images,function(i,d) {
-//        d.deselect.apply(d)
-//      })
+      $.each($L.images,function(i,d) {
+        d.deselect.apply(d)
+      })
     })
 
     map.on('mousemove',function(e) {
@@ -305,7 +310,8 @@ L.DistortableImageOverlay = L.ImageOverlay.extend({
 
       // the zoom level at the time the image was created:
       this.defaultZoom = map._zoom; 
-      this.opaque = false;
+      this.transparent = false;
+      this.hidden = false;
       this.outlined = false;
       this._url = url;
       this._bounds = L.latLngBounds(bounds);// (LatLngBounds, Object)
@@ -449,10 +455,8 @@ L.DistortableImageOverlay = L.ImageOverlay.extend({
     this.outlined = !this.outlined;
     if (this.outlined) {
       $('#'+this._image.id).css('border','1px solid red');
-      $('#'+this._image.id).css('background-image','url('+this._image.src+')');
     } else {
       $('#'+this._image.id).css('border', 'none');
-      $('#'+this._image.id).css('background-image','none');
     }
   },
 
@@ -465,7 +469,34 @@ L.DistortableImageOverlay = L.ImageOverlay.extend({
     }
   },
 
+  toggleIsolate: function() {
+    this.isolated = !this.isolated
+    if (this.isolated) {
+      $.each($L.images,function(i,img) {
+        img.hidden = false
+        img.setOpacity(1)
+      })
+    } else {
+      $.each($L.images,function(i,img) {
+        img.hidden = true
+        img.setOpacity(0)
+      })
+    }
+    this.hidden = false
+    this.setOpacity(1);
+  },
+
+  toggleVisibility: function() {
+    this.hidden = !this.hidden;
+    if (this.hidden) {
+      this.setOpacity(1);
+    } else {
+      this.setOpacity(0);
+    }
+  },
+
   deselect: function() {
+    $L.selected = false
     for (i in this.markers) {
       // this isn't a good way to hide markers:
       map.removeLayer(this.markers[i])
@@ -479,18 +510,17 @@ L.DistortableImageOverlay = L.ImageOverlay.extend({
   },
 
   select: function() {
-    $L.selected = this
     // deselect other images
     $.each($L.images,function(i,d) {
       d.deselect.apply(d)
     })
+    $L.selected = this
     // show corner markers
     for (i in this.markers) {
       this.markers[i].addTo(map)
     }
-    // create buttons
 
-    // this doesn't work
+    // create buttons
     this.transparencyBtn = L.easyButton('fa-adjust', 
       (function (s) {
         return function() {
@@ -524,15 +554,16 @@ L.DistortableImageOverlay = L.ImageOverlay.extend({
 
   // has scope of img element; use this.parentObj
   onclick: function(e) {
+    this.parentObj.bringToFront()
     if ($L.selected == this.parentObj) {
       // switch modes
       if (this.parentObj.draggable._enabled) {
-        this.parentObj.bringToFront()
         this.parentObj.toggleMode.apply(this.parentObj)
       }
     } else {
       this.parentObj.select.apply(this.parentObj)
     }
+    L.DomEvent.stopPropagation(e);
   },
 
   rotateStart: function(e) {

diff --git a/README.md b/README.md
@@ -28,8 +28,8 @@ This plugin is not yet complete!
 ##To do:
 
 * fix outlining without outline being transparent -- maybe use leaflet poly
-* map.on('click') should deselect all images, but is unfort. triggered even when you click directly on an image
 * fix image ordering -- bringToFront() kinda janky? check event sequence
+  * ordering is done with css z-index: http://stackoverflow.com/questions/12848812/layer-ordering-in-leaflet-js
 * figure out what `_bounds` is for and if we really need to update it
 * ensure it's easy to attach event callback to 'deselect' for saving
   * and/or mouseup?

diff --git a/src/DistortableImageOverlay.js b/src/DistortableImageOverlay.js
@@ -117,7 +117,8 @@ L.DistortableImageOverlay = L.ImageOverlay.extend({
 
       // the zoom level at the time the image was created:
       this.defaultZoom = map._zoom; 
-      this.opaque = false;
+      this.transparent = false;
+      this.hidden = false;
       this.outlined = false;
       this._url = url;
       this._bounds = L.latLngBounds(bounds);// (LatLngBounds, Object)
@@ -261,10 +262,8 @@ L.DistortableImageOverlay = L.ImageOverlay.extend({
     this.outlined = !this.outlined;
     if (this.outlined) {
       $('#'+this._image.id).css('border','1px solid red');
-      $('#'+this._image.id).css('background-image','url('+this._image.src+')');
     } else {
       $('#'+this._image.id).css('border', 'none');
-      $('#'+this._image.id).css('background-image','none');
     }
   },
 
@@ -277,7 +276,34 @@ L.DistortableImageOverlay = L.ImageOverlay.extend({
     }
   },
 
+  toggleIsolate: function() {
+    this.isolated = !this.isolated
+    if (this.isolated) {
+      $.each($L.images,function(i,img) {
+        img.hidden = false
+        img.setOpacity(1)
+      })
+    } else {
+      $.each($L.images,function(i,img) {
+        img.hidden = true
+        img.setOpacity(0)
+      })
+    }
+    this.hidden = false
+    this.setOpacity(1);
+  },
+
+  toggleVisibility: function() {
+    this.hidden = !this.hidden;
+    if (this.hidden) {
+      this.setOpacity(1);
+    } else {
+      this.setOpacity(0);
+    }
+  },
+
   deselect: function() {
+    $L.selected = false
     for (i in this.markers) {
       // this isn't a good way to hide markers:
       map.removeLayer(this.markers[i])
@@ -291,18 +317,17 @@ L.DistortableImageOverlay = L.ImageOverlay.extend({
   },
 
   select: function() {
-    $L.selected = this
     // deselect other images
     $.each($L.images,function(i,d) {
       d.deselect.apply(d)
     })
+    $L.selected = this
     // show corner markers
     for (i in this.markers) {
       this.markers[i].addTo(map)
     }
-    // create buttons
 
-    // this doesn't work
+    // create buttons
     this.transparencyBtn = L.easyButton('fa-adjust', 
       (function (s) {
         return function() {
@@ -336,15 +361,16 @@ L.DistortableImageOverlay = L.ImageOverlay.extend({
 
   // has scope of img element; use this.parentObj
   onclick: function(e) {
+    this.parentObj.bringToFront()
     if ($L.selected == this.parentObj) {
       // switch modes
       if (this.parentObj.draggable._enabled) {
-        this.parentObj.bringToFront()
         this.parentObj.toggleMode.apply(this.parentObj)
       }
     } else {
       this.parentObj.select.apply(this.parentObj)
     }
+    L.DomEvent.stopPropagation(e);
   },
 
   rotateStart: function(e) {

diff --git a/src/config.js b/src/config.js
@@ -13,6 +13,12 @@ $L = {
 
     $(window).keydown(function(e){
       switch (e.which) {
+        case 73: // i
+          $L.selected.toggleIsolate()
+          break;
+        case 72: // h
+          $L.selected.toggleVisibility()
+          break;
         case 68: // d
           $L.selected.toggleMode.apply($L.selected)
           break;
@@ -35,10 +41,9 @@ $L = {
     // this runs *as well as* image.click events, 
     // when you click an image
     map.on('click', function(e) {
-//      $L.clearImageButtons()
-//      $.each($L.images,function(i,d) {
-//        d.deselect.apply(d)
-//      })
+      $.each($L.images,function(i,d) {
+        d.deselect.apply(d)
+      })
     })
 
     map.on('mousemove',function(e) {