added new Event

README.md

@@ -22,7 +22,8 @@ Best regards
       minSize: [30, 30],    // Minimum size of a selection
       maxSize: [400, 300],  // Maximum size of a selection
       onChanged: $.noop,    // fired when a selection is released
-      onChanging: $.noop    // fired during the modification of a selection
+      onChanging: $.noop,    // fired during the modification of a selection
+      onDeleted: $.noop    // fired during the item deletion
     });
 
 
@@ -68,6 +69,7 @@ Here is a list of available options for selectAreas, with their *default value*:
  - **areas** (*[]*) : list of areas to add to the image from the beginning  (id will be ignored)
  - **onChanging** (*null*) : triggered when the event "changing" is fired
  - **onChanged** (*null*) : triggered when the event "changed" is fired
+ - **onDeleted** (*null*) : triggered when the event "deleted" is fired
  - **onLoaded** (*null*) : triggered when the event "loaded" is fired
  - **width** (*0*) : When not 0, scale the image to this width (px). The coordinates of the areas on the full image can be retrieved with method relativeAreas()
 
@@ -76,6 +78,7 @@ Three events are fired by the plugin:
  - **loaded** : fired when plugin is loaded
  - **changing** : fired during the modification of a selection. arguments : (event, id, areas)
  - **changed**  : fired when a selection is released. arguments : (event, id, areas)
+ - **deleted**  : fired when a selection is deleted. arguments : (event, id, areas)
 
 ## Methods
 Once you added a *selectAreas* plugin on an image, several method are exposed to help you
@@ -88,3 +91,4 @@ manipulate and retrieve these areas:
  - **destroy ()** : remove the *selectAreas* plugin
  - **blurAll ()** : blur (unfocus) all the areas
  - **contains (point)** : return true or false whether or not a point ({x: X, y: Y}) is included in at least one area
+ - **focus (id)** : highlights an element by passing its id

jquery.selectareas.js

@@ -3,6 +3,10 @@
  * @author 360Learning
  * @author Catalin Dogaru (https://github.com/cdog - http://code.tutsplus.com/tutorials/how-to-create-a-jquery-image-cropping-plugin-from-scratch-part-i--net-20994)
  * @author Adrien David-Sivelle (https://github.com/AdrienDS - Refactoring, Multiselections & Mobile compatibility)
+ * @updates Victor Manuel Agudelo (victor.agudelo@enterdev.com.co)
+ * changelog 
+ * 2019-05-30: event onDelete,method focus (id)
+ * 
  */
 (function($) {
     $.imageArea = function(parent, id) {
@@ -424,11 +428,11 @@
                 $.each($resizeHandlers, function(card, $handler) {
                     $handler.remove();
                 });
-                if ($btDelete) {
-                    $btDelete.remove();    
-                } 
+                $btDelete.remove();
                 parent._remove(id);
                 fireEvent("changed");
+                fireEvent("deleted");
+                //alert('deleted');
             },
             getElementOffset = function (object) {
                 var offset = $(object).offset();
@@ -474,7 +478,7 @@
             .addClass("select-areas-background-area")
             .css({
                 background : "#fff url(" + $image.attr("src") + ") no-repeat",
-                backgroundSize : $image.width() + "px " + $image.height() + "px",
+                backgroundSize : $image.width() + "px",
                 position : "absolute"
             })
             .insertAfter($outline);
@@ -573,7 +577,8 @@
                 overlayOpacity: 0.5,
                 areas: [],
                 onChanging: null,
-                onChanged: null
+                onChanged: null,
+                onDeleted: null
             };
 
         this.options = $.extend(defaultOptions, customOptions);
@@ -599,6 +604,10 @@
         if (this.options.onChanged) {
             this.$image.on("changed", this.options.onChanged);
         }
+
+        if (this.options.onDeleted) {
+            this.$image.on("deleted", this.options.onDeleted);
+        }
         if (this.options.onLoaded) {
             this.$image.on("loaded", this.options.onLoaded);
         }
@@ -774,7 +783,6 @@
         this.$trigger.remove();
         this.$image.css("width", "").css("position", "").unwrap();
         this.$image.removeData("mainImageSelectAreas");
-        this.$image.off('changing changed loaded');
     };
 
     $.imageSelectAreas.prototype.areas = function () {
@@ -819,6 +827,13 @@
         });
         return res;
     };
+
+     $.imageSelectAreas.prototype.focus = function (id) {
+        if (this._areas[id]) {
+            //this._areas[id].deleteSelection();
+             this._areas[id].focus();
+        }
+    };
 
     $.selectAreas = function(object, options) {
         var $object = $(object);