dragselect - npm Package Compare versions

Comparing version 1.7.16 to 1.7.17

changelog.md

@@ -1,3 +0,4 @@
-# 1.7.16
+# 1.7.16 + 1.7.17
 
+- Fix selection algorithm issue reported in issue #9
 - Improve `.addSelection`, `.removeSelection` and `.setSelection` by adding a third option (see docs).
@@ -4,0 +5,0 @@

dist/DragSelect.js

@@ -48,3 +48,3 @@ // v 1.7.16
   ** .clearSelection    ([nodes], bool)       remove all elements from the selection. If boolean is set to true: callback will be called afterwards.
-  ** .addSelectables    ([nodes])             add elements that can be selected. Intelligent algorythm never adds elements twice.
+  ** .addSelectables    ([nodes])             add elements that can be selected. Intelligent algorithm never adds elements twice.
   ** .removeSelectables ([nodes])             remove elements that can be selected. Also removes the 'selected' class from those elements.
@@ -99,2 +99,3 @@ ** .getSelectables    ()                    returns all nodes that can be selected.
   this.selected = [];
+  this._prevSelected = [];  // memory to fix #9
 
@@ -210,3 +211,5 @@ this._createBindings();
 
-  this.isMultiSelectKeyPressed( event );
+  if(this.isMultiSelectKeyPressed( event )) { this._prevSelected = this.selected.slice(); }  // #9
+  else { this._prevSelected = []; }  // #9
+
   this.checkIfInsideSelection( true );  // reset selection if no multiselectionkeypressed
@@ -267,3 +270,4 @@
 
-  this.isMultiSelectKeyPressed( event );
+  if(this.isMultiSelectKeyPressed( event )) { this._prevSelected = this.selected.slice(); }  // #9
+  else { this._prevSelected = []; }  // #9
 
@@ -506,5 +510,15 @@ // move element on location
   var posInSelectedArray = this.selected.indexOf( item );
+  var isInPrevSelection = this._prevSelected.indexOf( item );  // #9
 
-  if( posInSelectedArray > -1 && !this.multiSelectKeyPressed ) {
+  /**
+   * Special algorithm for issue #9.
+   * if a multiselectkey is pressed, ds 'remembers' the last selection and reverts
+   * to that state if the selection is not kept, to mimic the natural OS behaviour
+   * = if item was selected and is not in selection anymore, reselect it
+   * = if item was not selected and is not in selection anymore, unselect it
+   */
+  if( posInSelectedArray > -1 && isInPrevSelection < 0 ) {
     this.unselect( item );
+  } else if ( posInSelectedArray < 0 && isInPrevSelection > -1 ) {
+    this.select( item );
   }
@@ -837,3 +851,3 @@
  * Add nodes that can be selected.
- * The algorythm makes sure that no node is added twice
+ * The algorithm makes sure that no node is added twice
  * 
@@ -840,0 +854,0 @@ * @param {Nodes} _nodes – dom nodes

dist/ds.min.js

@@ -1,1 +0,1 @@
-function DragSelect(t){this.multiSelectKeyPressed,this.initialCursorPos,this.initialScroll,this.selected=[],this._createBindings(),this._setupOptions(t),this.start()}DragSelect.prototype._createBindings=function(){this._startUp=this._startUp.bind(this),this._handleMove=this._handleMove.bind(this),this.reset=this.reset.bind(this),this._onClick=this._onClick.bind(this)},DragSelect.prototype._setupOptions=function(t){if(this.selectables=[],this._handleSelectables(this.toArray(t.selectables)),this.multiSelectKeys=t.multiSelectKeys||["ctrlKey","shiftKey","metaKey"],this.autoScrollSpeed=t.autoScrollSpeed||1,this.selectCallback=t.onElementSelect||function(){},this.unselectCallback=t.onElementUnselect||function(){},this.moveStartCallback=t.onDragStart||function(){},this.moveCallback=t.onDragMove||function(){},this.callback=t.callback||function(){},this.area=t.area||document,this.customStyles=t.customStyles,this.area!==document){var e=getComputedStyle(this.area);"absolute"===e.position||"relative"===e.position||"fixed"===e.position||(this.area.style.position="relative")}this.selector=t.selector||this._createSelector(),this.addClass(this.selector,"ds-selector")},DragSelect.prototype._handleSelectables=function(t,e,s){for(var i=0;i<t.length;i++){var o=t[i],r=this.selectables.indexOf(o);r<0&&!e?(this.addClass(o,"ds-selectable"),o.addEventListener("click",this._onClick),this.selectables.push(o),s&&this.selected.indexOf(o)<0&&(this.addClass(o,"ds-selected"),this.selected.push(o))):r>-1&&e&&(this.removeClass(o,"ds-hover"),this.removeClass(o,"ds-selectable"),o.removeEventListener("click",this._onClick),this.selectables.splice(r,1),s&&this.selected.indexOf(o)>-1&&(this.removeClass(o,"ds-selected"),this.selected.splice(this.selected.indexOf(o),1)))}},DragSelect.prototype._onClick=function(t){if(!this.mouseInteraction){var e=t.target;this.isMultiSelectKeyPressed(t),this.checkIfInsideSelection(!0),this.selectables.indexOf(e)>-1&&(this.toggle(e),this.reset())}},DragSelect.prototype._createSelector=function(){var t=document.createElement("div");return t.style.position="absolute",this.customStyles||(t.style.background="rgba(0, 0, 255, 0.1)",t.style.border="1px solid rgba(0, 0, 255, 0.45)",t.style.display="none",t.style.pointerEvents="none"),(this.area===document?document.body:this.area).appendChild(t),t},DragSelect.prototype.start=function(){this.area.addEventListener("mousedown",this._startUp)},DragSelect.prototype._startUp=function(t){if(this.mouseInteraction=!0,this.selector.style.display="block",this.isMultiSelectKeyPressed(t),this._getStartingPositions(t),this.checkIfInsideSelection(!0),this.selector.style.display="none",this.moveStartCallback(t),this._breaked)return!1;this.area.removeEventListener("mousedown",this._startUp),this.area.addEventListener("mousemove",this._handleMove),this.area.addEventListener("mouseup",this.reset)},DragSelect.prototype.isMultiSelectKeyPressed=function(t){this.multiSelectKeyPressed=!1;for(var e=0;e<this.multiSelectKeys.length;e++){t[this.multiSelectKeys[e]]&&(this.multiSelectKeyPressed=!0)}return this.multiSelectKeyPressed},DragSelect.prototype._getStartingPositions=function(t){this.initialCursorPos=this.getCursorPos(t,this.area),this.initialScroll=this.getScroll(this.area);var e={};e.x=this.initialCursorPos.x+this.initialScroll.x,e.y=this.initialCursorPos.y+this.initialScroll.y,e.w=0,e.h=0,this.updatePos(this.selector,e)},DragSelect.prototype._handleMove=function(t){var e=this.getPosition(t);if(this.moveCallback(t),this._breaked)return!1;this.selector.style.display="block",this.updatePos(this.selector,e),this.checkIfInsideSelection(),this._autoScroll(t)},DragSelect.prototype.getPosition=function(t){var e=this.getCursorPos(t,this.area),s=this.getScroll(this.area);this.newCursorPos=e;var i={x:s.x-this.initialScroll.x,y:s.y-this.initialScroll.y},o={};return e.x>this.initialCursorPos.x-i.x?(o.x=this.initialCursorPos.x+this.initialScroll.x,o.w=e.x-this.initialCursorPos.x+i.x):(o.x=e.x+s.x,o.w=this.initialCursorPos.x-e.x-i.x),e.y>this.initialCursorPos.y-i.y?(o.y=this.initialCursorPos.y+this.initialScroll.y,o.h=e.y-this.initialCursorPos.y+i.y):(o.y=e.y+s.y,o.h=this.initialCursorPos.y-e.y-i.y),o},DragSelect.prototype.checkIfInsideSelection=function(t){for(var e=!1,s=0,i=this.selectables.length;s<i;s++){var o=this.selectables[s];this.isElementTouching(o,this.selector,this.area)?(this._handleSelection(o,t),e=!0):this._handleUnselection(o,t)}return e},DragSelect.prototype._handleSelection=function(t,e){if(this.hasClass(t,"ds-hover")&&!e)return!1;var s=this.selected.indexOf(t);s<0?this.select(t):s>-1&&this.multiSelectKeyPressed&&this.unselect(t),this.addClass(t,"ds-hover")},DragSelect.prototype._handleUnselection=function(t,e){if(!this.hasClass(t,"ds-hover")&&!e)return!1;this.selected.indexOf(t)>-1&&!this.multiSelectKeyPressed&&this.unselect(t),this.removeClass(t,"ds-hover")},DragSelect.prototype.select=function(t){return!(this.selected.indexOf(t)>-1)&&(this.selected.push(t),this.addClass(t,"ds-selected"),this.selectCallback(t),!this._breaked&&t)},DragSelect.prototype.unselect=function(t){return!(this.selected.indexOf(t)<0)&&(this.selected.splice(this.selected.indexOf(t),1),this.removeClass(t,"ds-selected"),this.unselectCallback(t),!this._breaked&&t)},DragSelect.prototype.toggle=function(t){return this.selected.indexOf(t)>-1?this.unselect(t):this.select(t),t},DragSelect.prototype.isElementTouching=function(t,e,s){var i=this.getScroll(s),o={y:e.getBoundingClientRect().top+i.y,x:e.getBoundingClientRect().left+i.x,h:e.offsetHeight||t.getBoundingClientRect().height,w:e.offsetWidth||t.getBoundingClientRect().width},r={y:t.getBoundingClientRect().top+i.y,x:t.getBoundingClientRect().left+i.x,h:t.offsetHeight||t.getBoundingClientRect().height,w:t.offsetWidth||t.getBoundingClientRect().width};return o.x<r.x+r.w&&o.x+o.w>r.x&&o.y<r.y+r.h&&o.h+o.y>r.y},DragSelect.prototype._autoScroll=function(t){var e=this.isCursorNearEdge(t,this.area),s=this.area===document?this.area.body:this.area;"top"===e&&s.scrollTop>0?s.scrollTop-=1*this.autoScrollSpeed:"bottom"===e?s.scrollTop+=1*this.autoScrollSpeed:"left"===e&&s.scrollLeft>0?s.scrollLeft-=1*this.autoScrollSpeed:"right"===e&&(s.scrollLeft+=1*this.autoScrollSpeed)},DragSelect.prototype.isCursorNearEdge=function(t,e){var s=this.getCursorPos(t,e),i=this.getAreaRect(e),o={x:Math.max(i.width/10,30),y:Math.max(i.height/10,30)};return s.y<o.y?"top":i.height-s.y<o.y?"bottom":i.width-s.x<o.x?"right":s.x<o.x&&"left"},DragSelect.prototype.reset=function(t){if(this.area.removeEventListener("mousemove",this._handleMove),this.area.addEventListener("mousedown",this._startUp),this.callback(this.selected,t),this._breaked)return!1;this.selector.style.width="0",this.selector.style.height="0",this.selector.style.display="none",setTimeout(function(){this.mouseInteraction=!1}.bind(this),100)},DragSelect.prototype.break=function(){this._breaked=!0,setTimeout(function(){this._breaked=!1}.bind(this),100)},DragSelect.prototype.stop=function(){this.reset(),this.area.removeEventListener("mousedown",this._startUp),this.area.removeEventListener("mouseup",this.reset)},DragSelect.prototype.getSelection=function(){return this.selected},DragSelect.prototype.addSelection=function(t,e,s){for(var i=this.toArray(t),o=0,r=i.length;o<r;o++){var l=i[o];this.select(l)}return s||this.addSelectables(i),e&&this.callback(this.selected,!1),this.selected},DragSelect.prototype.removeSelection=function(t,e,s){for(var i=this.toArray(t),o=0,r=i.length;o<r;o++){var l=i[o];this.unselect(l)}return s&&this.removeSelectables(i),e&&this.callback(this.selected,!1),this.selected},DragSelect.prototype.setSelection=function(t,e,s){return this.clearSelection(),this.addSelection(t,e,s),this.selected},DragSelect.prototype.clearSelection=function(t){for(var e=this.selected.slice(),s=0,i=e.length;s<i;s++){var o=e[s];this.unselect(o)}return t&&this.callback(this.selected,!1),this.selected},DragSelect.prototype.addSelectables=function(t,e){var s=this.toArray(t);return this._handleSelectables(s,!1,e),t},DragSelect.prototype.getSelectables=function(){return this.selectables},DragSelect.prototype.removeSelectables=function(t,e){var s=this.toArray(t);return this._handleSelectables(s,!0,e),t},DragSelect.prototype.addClass=function(t,e){if(t.classList)return t.classList.add(e);var s=t.getAttribute("class")||"";return-1!==s.indexOf(e)?t:(""!==s&&(e=" "+e),t.setAttribute("class",s+e),t)},DragSelect.prototype.removeClass=function(t,e){if(t.classList)return t.classList.remove(e);var s=t.getAttribute("class")||"",i=new RegExp(e+"\\b","g");return s=s.replace(i,""),t.setAttribute("class",s),t},DragSelect.prototype.hasClass=function(t,e){return t.classList?t.classList.contains(e):(t.getAttribute("class")||"").indexOf(e)>-1},DragSelect.prototype.toArray=function(t){if(!t)return!1;if(!t.length&&this.isElement(t))return[t];for(var e=[],s=t.length-1;s>=0;s--)e[s]=t[s];return e},DragSelect.prototype.isElement=function(t){try{return t instanceof HTMLElement||t instanceof SVGElement}catch(e){return"object"==typeof t&&1===t.nodeType&&"object"==typeof t.style&&"object"==typeof t.ownerDocument}},DragSelect.prototype.getCursorPos=function(t,e){var s={x:t.pageX||t.clientX,y:t.pageY||t.clientY},i=this.getAreaRect(e||document),o=this.getScroll();return{x:s.x-i.left-o.x,y:s.y-i.top-o.y}},DragSelect.prototype.getInitialCursorPosition=function(){return this.initialCursorPos},DragSelect.prototype.getCurrentCursorPosition=function(){return this.newCursorPos},DragSelect.prototype.getCursorPositionDifference=function(){var t=this.getInitialCursorPosition(),e=this.getCurrentCursorPosition();return{x:t.x-e.x,y:t.y-e.y}},DragSelect.prototype.getScroll=function(t){var e={top:document.body.scrollTop>0?document.body.scrollTop:document.documentElement.scrollTop,left:document.body.scrollLeft>0?document.body.scrollLeft:document.documentElement.scrollLeft};return{y:t&&t.scrollTop>=0?t.scrollTop:e.top,x:t&&t.scrollLeft>=0?t.scrollLeft:e.left}},DragSelect.prototype.getAreaRect=function(t){if(t===document){var e={y:t.documentElement.clientHeight>0?t.documentElement.clientHeight:window.innerHeight,x:t.documentElement.clientWidth>0?t.documentElement.clientWidth:window.innerWidth};return{top:0,left:0,bottom:0,right:0,width:e.x,height:e.y}}return{top:t.getBoundingClientRect().top,left:t.getBoundingClientRect().left,bottom:t.getBoundingClientRect().bottom,right:t.getBoundingClientRect().right,width:t.offsetWidth,height:t.offsetHeight}},DragSelect.prototype.updatePos=function(t,e){return t.style.left=e.x+"px",t.style.top=e.y+"px",t.style.width=e.w+"px",t.style.height=e.h+"px",t},"undefined"!=typeof module&&null!==module?module.exports=DragSelect:"undefined"!=typeof define&&"function"==typeof define&&define?define(function(){return DragSelect}):window.DragSelect=DragSelect;
+function DragSelect(e){this.multiSelectKeyPressed,this.initialCursorPos,this.initialScroll,this.selected=[],this._prevSelected=[],this._createBindings(),this._setupOptions(e),this.start()}DragSelect.prototype._createBindings=function(){this._startUp=this._startUp.bind(this),this._handleMove=this._handleMove.bind(this),this.reset=this.reset.bind(this),this._onClick=this._onClick.bind(this)},DragSelect.prototype._setupOptions=function(e){if(this.selectables=[],this._handleSelectables(this.toArray(e.selectables)),this.multiSelectKeys=e.multiSelectKeys||["ctrlKey","shiftKey","metaKey"],this.autoScrollSpeed=e.autoScrollSpeed||1,this.selectCallback=e.onElementSelect||function(){},this.unselectCallback=e.onElementUnselect||function(){},this.moveStartCallback=e.onDragStart||function(){},this.moveCallback=e.onDragMove||function(){},this.callback=e.callback||function(){},this.area=e.area||document,this.customStyles=e.customStyles,this.area!==document){var t=getComputedStyle(this.area);"absolute"===t.position||"relative"===t.position||"fixed"===t.position||(this.area.style.position="relative")}this.selector=e.selector||this._createSelector(),this.addClass(this.selector,"ds-selector")},DragSelect.prototype._handleSelectables=function(e,t,s){for(var i=0;i<e.length;i++){var o=e[i],r=this.selectables.indexOf(o);r<0&&!t?(this.addClass(o,"ds-selectable"),o.addEventListener("click",this._onClick),this.selectables.push(o),s&&this.selected.indexOf(o)<0&&(this.addClass(o,"ds-selected"),this.selected.push(o))):r>-1&&t&&(this.removeClass(o,"ds-hover"),this.removeClass(o,"ds-selectable"),o.removeEventListener("click",this._onClick),this.selectables.splice(r,1),s&&this.selected.indexOf(o)>-1&&(this.removeClass(o,"ds-selected"),this.selected.splice(this.selected.indexOf(o),1)))}},DragSelect.prototype._onClick=function(e){if(!this.mouseInteraction){var t=e.target;this.isMultiSelectKeyPressed(e)?this._prevSelected=this.selected.slice():this._prevSelected=[],this.checkIfInsideSelection(!0),this.selectables.indexOf(t)>-1&&(this.toggle(t),this.reset())}},DragSelect.prototype._createSelector=function(){var e=document.createElement("div");return e.style.position="absolute",this.customStyles||(e.style.background="rgba(0, 0, 255, 0.1)",e.style.border="1px solid rgba(0, 0, 255, 0.45)",e.style.display="none",e.style.pointerEvents="none"),(this.area===document?document.body:this.area).appendChild(e),e},DragSelect.prototype.start=function(){this.area.addEventListener("mousedown",this._startUp)},DragSelect.prototype._startUp=function(e){if(this.mouseInteraction=!0,this.selector.style.display="block",this.isMultiSelectKeyPressed(e)?this._prevSelected=this.selected.slice():this._prevSelected=[],this._getStartingPositions(e),this.checkIfInsideSelection(!0),this.selector.style.display="none",this.moveStartCallback(e),this._breaked)return!1;this.area.removeEventListener("mousedown",this._startUp),this.area.addEventListener("mousemove",this._handleMove),this.area.addEventListener("mouseup",this.reset)},DragSelect.prototype.isMultiSelectKeyPressed=function(e){this.multiSelectKeyPressed=!1;for(var t=0;t<this.multiSelectKeys.length;t++){e[this.multiSelectKeys[t]]&&(this.multiSelectKeyPressed=!0)}return this.multiSelectKeyPressed},DragSelect.prototype._getStartingPositions=function(e){this.initialCursorPos=this.getCursorPos(e,this.area),this.initialScroll=this.getScroll(this.area);var t={};t.x=this.initialCursorPos.x+this.initialScroll.x,t.y=this.initialCursorPos.y+this.initialScroll.y,t.w=0,t.h=0,this.updatePos(this.selector,t)},DragSelect.prototype._handleMove=function(e){var t=this.getPosition(e);if(this.moveCallback(e),this._breaked)return!1;this.selector.style.display="block",this.updatePos(this.selector,t),this.checkIfInsideSelection(),this._autoScroll(e)},DragSelect.prototype.getPosition=function(e){var t=this.getCursorPos(e,this.area),s=this.getScroll(this.area);this.newCursorPos=t;var i={x:s.x-this.initialScroll.x,y:s.y-this.initialScroll.y},o={};return t.x>this.initialCursorPos.x-i.x?(o.x=this.initialCursorPos.x+this.initialScroll.x,o.w=t.x-this.initialCursorPos.x+i.x):(o.x=t.x+s.x,o.w=this.initialCursorPos.x-t.x-i.x),t.y>this.initialCursorPos.y-i.y?(o.y=this.initialCursorPos.y+this.initialScroll.y,o.h=t.y-this.initialCursorPos.y+i.y):(o.y=t.y+s.y,o.h=this.initialCursorPos.y-t.y-i.y),o},DragSelect.prototype.checkIfInsideSelection=function(e){for(var t=!1,s=0,i=this.selectables.length;s<i;s++){var o=this.selectables[s];this.isElementTouching(o,this.selector,this.area)?(this._handleSelection(o,e),t=!0):this._handleUnselection(o,e)}return t},DragSelect.prototype._handleSelection=function(e,t){if(this.hasClass(e,"ds-hover")&&!t)return!1;var s=this.selected.indexOf(e);s<0?this.select(e):s>-1&&this.multiSelectKeyPressed&&this.unselect(e),this.addClass(e,"ds-hover")},DragSelect.prototype._handleUnselection=function(e,t){if(!this.hasClass(e,"ds-hover")&&!t)return!1;var s=this.selected.indexOf(e),i=this._prevSelected.indexOf(e);s>-1&&i<0?this.unselect(e):s<0&&i>-1&&this.select(e),this.removeClass(e,"ds-hover")},DragSelect.prototype.select=function(e){return!(this.selected.indexOf(e)>-1)&&(this.selected.push(e),this.addClass(e,"ds-selected"),this.selectCallback(e),!this._breaked&&e)},DragSelect.prototype.unselect=function(e){return!(this.selected.indexOf(e)<0)&&(this.selected.splice(this.selected.indexOf(e),1),this.removeClass(e,"ds-selected"),this.unselectCallback(e),!this._breaked&&e)},DragSelect.prototype.toggle=function(e){return this.selected.indexOf(e)>-1?this.unselect(e):this.select(e),e},DragSelect.prototype.isElementTouching=function(e,t,s){var i=this.getScroll(s),o={y:t.getBoundingClientRect().top+i.y,x:t.getBoundingClientRect().left+i.x,h:t.offsetHeight||e.getBoundingClientRect().height,w:t.offsetWidth||e.getBoundingClientRect().width},r={y:e.getBoundingClientRect().top+i.y,x:e.getBoundingClientRect().left+i.x,h:e.offsetHeight||e.getBoundingClientRect().height,w:e.offsetWidth||e.getBoundingClientRect().width};return o.x<r.x+r.w&&o.x+o.w>r.x&&o.y<r.y+r.h&&o.h+o.y>r.y},DragSelect.prototype._autoScroll=function(e){var t=this.isCursorNearEdge(e,this.area),s=this.area===document?this.area.body:this.area;"top"===t&&s.scrollTop>0?s.scrollTop-=1*this.autoScrollSpeed:"bottom"===t?s.scrollTop+=1*this.autoScrollSpeed:"left"===t&&s.scrollLeft>0?s.scrollLeft-=1*this.autoScrollSpeed:"right"===t&&(s.scrollLeft+=1*this.autoScrollSpeed)},DragSelect.prototype.isCursorNearEdge=function(e,t){var s=this.getCursorPos(e,t),i=this.getAreaRect(t),o={x:Math.max(i.width/10,30),y:Math.max(i.height/10,30)};return s.y<o.y?"top":i.height-s.y<o.y?"bottom":i.width-s.x<o.x?"right":s.x<o.x&&"left"},DragSelect.prototype.reset=function(e){if(this.area.removeEventListener("mousemove",this._handleMove),this.area.addEventListener("mousedown",this._startUp),this.callback(this.selected,e),this._breaked)return!1;this.selector.style.width="0",this.selector.style.height="0",this.selector.style.display="none",setTimeout(function(){this.mouseInteraction=!1}.bind(this),100)},DragSelect.prototype.break=function(){this._breaked=!0,setTimeout(function(){this._breaked=!1}.bind(this),100)},DragSelect.prototype.stop=function(){this.reset(),this.area.removeEventListener("mousedown",this._startUp),this.area.removeEventListener("mouseup",this.reset)},DragSelect.prototype.getSelection=function(){return this.selected},DragSelect.prototype.addSelection=function(e,t,s){for(var i=this.toArray(e),o=0,r=i.length;o<r;o++){var l=i[o];this.select(l)}return s||this.addSelectables(i),t&&this.callback(this.selected,!1),this.selected},DragSelect.prototype.removeSelection=function(e,t,s){for(var i=this.toArray(e),o=0,r=i.length;o<r;o++){var l=i[o];this.unselect(l)}return s&&this.removeSelectables(i),t&&this.callback(this.selected,!1),this.selected},DragSelect.prototype.setSelection=function(e,t,s){return this.clearSelection(),this.addSelection(e,t,s),this.selected},DragSelect.prototype.clearSelection=function(e){for(var t=this.selected.slice(),s=0,i=t.length;s<i;s++){var o=t[s];this.unselect(o)}return e&&this.callback(this.selected,!1),this.selected},DragSelect.prototype.addSelectables=function(e,t){var s=this.toArray(e);return this._handleSelectables(s,!1,t),e},DragSelect.prototype.getSelectables=function(){return this.selectables},DragSelect.prototype.removeSelectables=function(e,t){var s=this.toArray(e);return this._handleSelectables(s,!0,t),e},DragSelect.prototype.addClass=function(e,t){if(e.classList)return e.classList.add(t);var s=e.getAttribute("class")||"";return-1!==s.indexOf(t)?e:(""!==s&&(t=" "+t),e.setAttribute("class",s+t),e)},DragSelect.prototype.removeClass=function(e,t){if(e.classList)return e.classList.remove(t);var s=e.getAttribute("class")||"",i=new RegExp(t+"\\b","g");return s=s.replace(i,""),e.setAttribute("class",s),e},DragSelect.prototype.hasClass=function(e,t){return e.classList?e.classList.contains(t):(e.getAttribute("class")||"").indexOf(t)>-1},DragSelect.prototype.toArray=function(e){if(!e)return!1;if(!e.length&&this.isElement(e))return[e];for(var t=[],s=e.length-1;s>=0;s--)t[s]=e[s];return t},DragSelect.prototype.isElement=function(e){try{return e instanceof HTMLElement||e instanceof SVGElement}catch(t){return"object"==typeof e&&1===e.nodeType&&"object"==typeof e.style&&"object"==typeof e.ownerDocument}},DragSelect.prototype.getCursorPos=function(e,t){var s={x:e.pageX||e.clientX,y:e.pageY||e.clientY},i=this.getAreaRect(t||document),o=this.getScroll();return{x:s.x-i.left-o.x,y:s.y-i.top-o.y}},DragSelect.prototype.getInitialCursorPosition=function(){return this.initialCursorPos},DragSelect.prototype.getCurrentCursorPosition=function(){return this.newCursorPos},DragSelect.prototype.getCursorPositionDifference=function(){var e=this.getInitialCursorPosition(),t=this.getCurrentCursorPosition();return{x:e.x-t.x,y:e.y-t.y}},DragSelect.prototype.getScroll=function(e){var t={top:document.body.scrollTop>0?document.body.scrollTop:document.documentElement.scrollTop,left:document.body.scrollLeft>0?document.body.scrollLeft:document.documentElement.scrollLeft};return{y:e&&e.scrollTop>=0?e.scrollTop:t.top,x:e&&e.scrollLeft>=0?e.scrollLeft:t.left}},DragSelect.prototype.getAreaRect=function(e){if(e===document){var t={y:e.documentElement.clientHeight>0?e.documentElement.clientHeight:window.innerHeight,x:e.documentElement.clientWidth>0?e.documentElement.clientWidth:window.innerWidth};return{top:0,left:0,bottom:0,right:0,width:t.x,height:t.y}}return{top:e.getBoundingClientRect().top,left:e.getBoundingClientRect().left,bottom:e.getBoundingClientRect().bottom,right:e.getBoundingClientRect().right,width:e.offsetWidth,height:e.offsetHeight}},DragSelect.prototype.updatePos=function(e,t){return e.style.left=t.x+"px",e.style.top=t.y+"px",e.style.width=t.w+"px",e.style.height=t.h+"px",e},"undefined"!=typeof module&&null!==module?module.exports=DragSelect:"undefined"!=typeof define&&"function"==typeof define&&define?define(function(){return DragSelect}):window.DragSelect=DragSelect;

package.json

 {
   "name": "dragselect",
-  "version": "1.7.16",
-  "description": "easy javascript drag select functionality to your projects",
+  "version": "1.7.17",
+  "description": "easy javascript drag select functionality for your projects",
   "main": "./dist/ds.min.js",
@@ -6,0 +6,0 @@ "dependencies": {},

README.md

@@ -11,3 +11,3 @@ ```
 # DragSelect
-easily add a selection algorythm to your application/website.
+easily add a selection algorithm to your application/website.
 
@@ -97,3 +97,3 @@ # Project Page: Demo & Info
 ds.getSelection();  // returns all currently selected nodes
-ds.addSelectables(document.getElementsByClassName('selectable-node'));  // adds elements that can be selected. Intelligent algorythm never adds elements twice.
+ds.addSelectables(document.getElementsByClassName('selectable-node'));  // adds elements that can be selected. Intelligent algorithm never adds elements twice.
 ds.break();  // used in callbacks to disable the execution of the upcoming code. It will not teardown the functionality.
@@ -114,3 +114,3 @@ ds.stop();  // will teardown/stop the whole functionality
 
-Obviously, keyboard users won’t get the full visual experience but it works similarely to the OS default behaviour. You can select items using the default select keys (usually space or enter) and also multiselect when using a modifier key at the same time. There is one little thing you have to do tho’: the `selectables` have to be pressable (clickable)! To achieve this, they should be of type `<button type="button"></button>`.  
+Obviously, keyboard users won’t get the full visual experience but it works similarely to the OS default behaviour. You can select items using the default select keys (usually space or enter) and also multiselect when using a modifier key at the same time (unfortunately this does not work in firefox for now since FF doesn’t add the modifier key in the event object when using the keyboard). There is one little thing you have to do tho’: the `selectables` have to be pressable (clickable)! To achieve this, they should be of type `<button type="button"></button>`.  
 
@@ -147,3 +147,3 @@
 |clearSelection |DOM elements (nodes), Boolean (callback) |remove all elements from the selection. If boolean is set to true: callback will be called afterwards. |
-|addSelectables |DOM elements (nodes), Boolean (addToSelection) |Adds elements that can be selected. Don’t worry, a smart algorythm makes sure that nodes are never added twice. If boolean is set to true: elements will also be added to current selection. |
+|addSelectables |DOM elements (nodes), Boolean (addToSelection) |Adds elements that can be selected. Don’t worry, a smart algorithm makes sure that nodes are never added twice. If boolean is set to true: elements will also be added to current selection. |
 |removeSelectables |DOM elements (nodes), Boolean (removeFromSelection) |Remove elements that can be selected. If boolean is set to true: elements will also be removed from current selection. |
@@ -150,0 +150,0 @@ |getSelectables |/ |Returns array with all nodes that can be selected. |

src/DragSelect.js

@@ -1,2 +0,2 @@
-// v 1.7.16
+// v 1.7.17
 /* 
@@ -48,3 +48,3 @@ ____                   _____      __          __
   ** .clearSelection    ([nodes], bool)       remove all elements from the selection. If boolean is set to true: callback will be called afterwards.
-  ** .addSelectables    ([nodes])             add elements that can be selected. Intelligent algorythm never adds elements twice.
+  ** .addSelectables    ([nodes])             add elements that can be selected. Intelligent algorithm never adds elements twice.
   ** .removeSelectables ([nodes])             remove elements that can be selected. Also removes the 'selected' class from those elements.
@@ -99,2 +99,3 @@ ** .getSelectables    ()                    returns all nodes that can be selected.
   this.selected = [];
+  this._prevSelected = [];  // memory to fix #9
 
@@ -210,3 +211,5 @@ this._createBindings();
 
-  this.isMultiSelectKeyPressed( event );
+  if(this.isMultiSelectKeyPressed( event )) { this._prevSelected = this.selected.slice(); }  // #9
+  else { this._prevSelected = []; }  // #9
+
   this.checkIfInsideSelection( true );  // reset selection if no multiselectionkeypressed
@@ -267,3 +270,4 @@
 
-  this.isMultiSelectKeyPressed( event );
+  if(this.isMultiSelectKeyPressed( event )) { this._prevSelected = this.selected.slice(); }  // #9
+  else { this._prevSelected = []; }  // #9
 
@@ -506,5 +510,15 @@ // move element on location
   var posInSelectedArray = this.selected.indexOf( item );
+  var isInPrevSelection = this._prevSelected.indexOf( item );  // #9
 
-  if( posInSelectedArray > -1 && !this.multiSelectKeyPressed ) {
+  /**
+   * Special algorithm for issue #9.
+   * if a multiselectkey is pressed, ds 'remembers' the last selection and reverts
+   * to that state if the selection is not kept, to mimic the natural OS behaviour
+   * = if item was selected and is not in selection anymore, reselect it
+   * = if item was not selected and is not in selection anymore, unselect it
+   */
+  if( posInSelectedArray > -1 && isInPrevSelection < 0 ) {
     this.unselect( item );
+  } else if ( posInSelectedArray < 0 && isInPrevSelection > -1 ) {
+    this.select( item );
   }
@@ -837,3 +851,3 @@
  * Add nodes that can be selected.
- * The algorythm makes sure that no node is added twice
+ * The algorithm makes sure that no node is added twice
  * 
@@ -840,0 +854,0 @@ * @param {Nodes} _nodes – dom nodes

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1205035

increased by0.18%

Lines of code

2074

increased by1.27%

No dependency changes