From c3b5f8d6edc4a3f1a074a4be0f29bd6b343d2622 Mon Sep 17 00:00:00 2001 From: jywarren Date: Tue, 16 Dec 2014 00:30:37 -0500 Subject: [PATCH] image hide and image isolate #6 --- DistortableImageOverlay.js | 53 +++++++++++++++++++++++++++------- README.md | 2 +- src/DistortableImageOverlay.js | 40 ++++++++++++++++++++----- src/config.js | 13 ++++++--- 4 files changed, 85 insertions(+), 23 deletions(-) diff --git a/DistortableImageOverlay.js b/DistortableImageOverlay.js index c23d0608b..c4641dad6 100644 --- 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 index 3cf291b11..bdf13ae70 100644 --- 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 index 9ddb4b7de..40d64effc 100644 --- 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 index 23c3ca06b..ec073470c 100644 --- 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) {