dragselect - npm Package Compare versions

Comparing version 1.7.18 to 1.7.19

changelog.md

@@ -0,1 +1,7 @@
+# 1.7.19
+
+- Solve issue [#10](https://github.com/ThibaultJanBeyer/DragSelect/issues/10)
+- Improve public .getCursorPos() method and made initial one private
+- Add more local tests representing different scenarios for proper manual testing
+
 # 1.7.18
@@ -8,3 +14,3 @@
 
-- Fix selection algorithm issue reported in issue #9
+- Fix selection algorithm issue reported in issue [#9](https://github.com/ThibaultJanBeyer/DragSelect/issues/9)
 - Improve `.addSelection`, `.removeSelection` and `.setSelection` by adding a third option (see docs).
@@ -11,0 +17,0 @@

dist/DragSelect.js

@@ -1,2 +0,2 @@
-// v 1.7.18
+// v 1.7.19
 /* 
@@ -51,2 +51,6 @@ ____                   _____      __          __
   ** .getSelectables    ()                    returns all nodes that can be selected.
+  ** .getCurrentCursorPosition    ()          returns the last seen position of the cursor/selector
+  ** .getInitialCursorPosition    ()          returns the first position of the cursor/selector
+  ** .getCursorPositionDifference ()          returns the cursor position difference between start and now
+  ** .getCursorPos      (event, node, bool)   returns the cursor x, y coordinates based on a click event object. The click event object is required. By default, takes scroll and area into consideration. Area is this.area by default and can be fully ignored by setting the second argument explicitely to false. Scroll can be ignored by setting the third argument to true.
   ** and everything else
@@ -96,3 +100,4 @@
   this.multiSelectKeyPressed;
-  this.initialCursorPos;
+  this.initialCursorPos = {x: 0, y: 0};
+  this.newCursorPos = {x: 0, y: 0};
   this.initialScroll;
@@ -318,3 +323,3 @@ this.selected = [];
 
-  this.initialCursorPos = this.getCursorPos( event, this.area );
+  this.initialCursorPos = this._getCursorPos( event, this.area );
   this.initialScroll = this.getScroll( this.area );
@@ -366,3 +371,3 @@
 
-  var cursorPosNew = this.getCursorPos( event, this.area );
+  var cursorPosNew = this._getCursorPos( event, this.area );
   var scrollNew = this.getScroll( this.area );
@@ -679,3 +684,3 @@
 
-  var cursorPosition = this.getCursorPos( event, area );
+  var cursorPosition = this._getCursorPos( event, area );
   var areaRect = this.getAreaRect( area );
@@ -763,2 +768,24 @@
 /**
+ * Returns cursor x, y position based on event object
+ * Will be relative to an area including the scroll unless advised otherwise
+ * 
+ * @param {Object} event
+ * @param {Node} _area – containing area / this.area if none / document if === false
+ * @param {Node} ignoreScroll – if true, the scroll will be ignored
+ * @return {Object} cursor { x/y }
+ */
+DragSelect.prototype.getCursorPos = function( event, _area, ignoreScroll ) {
+  if(!event) { return false; }
+
+  var area = _area || _area !== false && this.area;
+  var pos = this._getCursorPos( event, area );
+  var scroll = ignoreScroll ? { x: 0, y: 0 } : this.getScroll( area );
+
+  return {
+    x: pos.x + scroll.x,
+    y: pos.y + scroll.y
+  };
+};
+
+/**
  * Adds several items to the selection list
@@ -1031,2 +1058,5 @@ * also adds the specific classes and take into account
  * Returns cursor x, y position based on event object
+ * /!\ for internal calculation reasons it does _not_ take
+ * the AREA scroll into consideration unless it’s the outer Document.
+ * Use the public .getCursorPos() from outside, it’s more flexible
  * 
@@ -1037,3 +1067,3 @@ * @param {Object} event
  */
-DragSelect.prototype.getCursorPos = function( event, area ) {
+DragSelect.prototype._getCursorPos = function( event, area ) {
 
@@ -1046,3 +1076,3 @@ var cPos = {  // event.clientX/Y fallback for <IE8
   var areaRect = this.getAreaRect( area || document );
-  var docScroll = this.getScroll();
+  var docScroll = this.getScroll();  // needed when document is scrollable but area is not
 
@@ -1066,3 +1096,3 @@ return {  // if it’s constrained in an area the area should be substracted calculate
 /**
- * Returns the starting/initial position of the cursor/selector
+ * Returns the last seen position of the cursor/selector
  * 
@@ -1069,0 +1099,0 @@ * @return {Object} initialPos.

dist/ds.min.js

@@ -1,1 +0,1 @@
-function DragSelect(t){this.multiSelectKeyPressed,this.initialCursorPos,this.initialScroll,this.selected=[],this._prevSelected=[],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&&!this.isRightClick(t)){var e=t.target;this.isMultiSelectKeyPressed(t)?this._prevSelected=this.selected.slice():this._prevSelected=[],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.isRightClick(t)){if(this.mouseInteraction=!0,this.selector.style.display="block",this.isMultiSelectKeyPressed(t)?this._prevSelected=this.selected.slice():this._prevSelected=[],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),document.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;var s=this.selected.indexOf(t),i=this._prevSelected.indexOf(t);s>-1&&i<0?this.unselect(t):s<0&&i>-1&&this.select(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.isRightClick=function(t){if(!t)return!1;var e=!1;return"which"in t?e=3===t.which:"button"in t&&(e=2===t.button),e},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(t){this.multiSelectKeyPressed,this.initialCursorPos={x:0,y:0},this.newCursorPos={x:0,y:0},this.initialScroll,this.selected=[],this._prevSelected=[],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&&!this.isRightClick(t)){var e=t.target;this.isMultiSelectKeyPressed(t)?this._prevSelected=this.selected.slice():this._prevSelected=[],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.isRightClick(t)){if(this.mouseInteraction=!0,this.selector.style.display="block",this.isMultiSelectKeyPressed(t)?this._prevSelected=this.selected.slice():this._prevSelected=[],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),document.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;var s=this.selected.indexOf(t),i=this._prevSelected.indexOf(t);s>-1&&i<0?this.unselect(t):s<0&&i>-1&&this.select(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.getCursorPos=function(t,e,s){if(!t)return!1;var i=e||!1!==e&&this.area,o=this._getCursorPos(t,i),r=s?{x:0,y:0}:this.getScroll(i);return{x:o.x+r.x,y:o.y+r.y}},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.isRightClick=function(t){if(!t)return!1;var e=!1;return"which"in t?e=3===t.which:"button"in t&&(e=2===t.button),e},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;

package.json

 {
   "name": "dragselect",
-  "version": "1.7.18",
+  "version": "1.7.19",
   "description": "easy javascript drag select functionality for your projects",
@@ -11,3 +11,3 @@ "main": "./dist/ds.min.js",
     "deploy": "gulp; gulp deploy;",
-    "test": "open src/quicktest.html -a 'Google Chrome'"
+    "test": "open tests/quicktest.html -a 'Google Chrome'"
   },
@@ -14,0 +14,0 @@ "devDependencies": {

README.md

@@ -147,5 +147,6 @@ ```
 |getSelectables |/ |Returns array with all nodes that can be selected. |
-|getInitialCursorPosition |/ |Returns the x, y coordinates the cursor had when first clicked |
-|getCurrentCursorPosition |/ |Returns current/last x, y coordinates of the cursor |
+|getInitialCursorPosition |/ |Returns the registered x, y coordinates the cursor had when first clicked |
+|getCurrentCursorPosition |/ |Returns current/last registered x, y coordinates of the cursor |
 |getCursorPositionDifference |/ |Returns object with the x, y difference between the initial and the last cursor position |
+|getCursorPos |Event, Node (_area), Boolean (ignoreScroll) |Returns the cursor x, y coordinates *based on a click event object*. The click event object is required. By default, takes scroll and area into consideration. Area is this.area by default and can be fully ignored by setting the second argument explicitely to false. Scroll can be ignored by setting the third argument to true. |
 
@@ -152,0 +153,0 @@ # Classes

src/DragSelect.js

@@ -1,2 +0,2 @@
-// v 1.7.18
+// v 1.7.19
 /* 
@@ -51,2 +51,6 @@ ____                   _____      __          __
   ** .getSelectables    ()                    returns all nodes that can be selected.
+  ** .getCurrentCursorPosition    ()          returns the last seen position of the cursor/selector
+  ** .getInitialCursorPosition    ()          returns the first position of the cursor/selector
+  ** .getCursorPositionDifference ()          returns the cursor position difference between start and now
+  ** .getCursorPos      (event, node, bool)   returns the cursor x, y coordinates based on a click event object. The click event object is required. By default, takes scroll and area into consideration. Area is this.area by default and can be fully ignored by setting the second argument explicitely to false. Scroll can be ignored by setting the third argument to true.
   ** and everything else
@@ -96,3 +100,4 @@
   this.multiSelectKeyPressed;
-  this.initialCursorPos;
+  this.initialCursorPos = {x: 0, y: 0};
+  this.newCursorPos = {x: 0, y: 0};
   this.initialScroll;
@@ -318,3 +323,3 @@ this.selected = [];
 
-  this.initialCursorPos = this.getCursorPos( event, this.area );
+  this.initialCursorPos = this._getCursorPos( event, this.area );
   this.initialScroll = this.getScroll( this.area );
@@ -366,3 +371,3 @@
 
-  var cursorPosNew = this.getCursorPos( event, this.area );
+  var cursorPosNew = this._getCursorPos( event, this.area );
   var scrollNew = this.getScroll( this.area );
@@ -679,3 +684,3 @@
 
-  var cursorPosition = this.getCursorPos( event, area );
+  var cursorPosition = this._getCursorPos( event, area );
   var areaRect = this.getAreaRect( area );
@@ -763,2 +768,24 @@
 /**
+ * Returns cursor x, y position based on event object
+ * Will be relative to an area including the scroll unless advised otherwise
+ * 
+ * @param {Object} event
+ * @param {Node} _area – containing area / this.area if none / document if === false
+ * @param {Node} ignoreScroll – if true, the scroll will be ignored
+ * @return {Object} cursor { x/y }
+ */
+DragSelect.prototype.getCursorPos = function( event, _area, ignoreScroll ) {
+  if(!event) { return false; }
+
+  var area = _area || _area !== false && this.area;
+  var pos = this._getCursorPos( event, area );
+  var scroll = ignoreScroll ? { x: 0, y: 0 } : this.getScroll( area );
+
+  return {
+    x: pos.x + scroll.x,
+    y: pos.y + scroll.y
+  };
+};
+
+/**
  * Adds several items to the selection list
@@ -1031,2 +1058,5 @@ * also adds the specific classes and take into account
  * Returns cursor x, y position based on event object
+ * /!\ for internal calculation reasons it does _not_ take
+ * the AREA scroll into consideration unless it’s the outer Document.
+ * Use the public .getCursorPos() from outside, it’s more flexible
  * 
@@ -1037,3 +1067,3 @@ * @param {Object} event
  */
-DragSelect.prototype.getCursorPos = function( event, area ) {
+DragSelect.prototype._getCursorPos = function( event, area ) {
 
@@ -1046,3 +1076,3 @@ var cPos = {  // event.clientX/Y fallback for <IE8
   var areaRect = this.getAreaRect( area || document );
-  var docScroll = this.getScroll();
+  var docScroll = this.getScroll();  // needed when document is scrollable but area is not
 
@@ -1066,3 +1096,3 @@ return {  // if it’s constrained in an area the area should be substracted calculate
 /**
- * Returns the starting/initial position of the cursor/selector
+ * Returns the last seen position of the cursor/selector
  * 
@@ -1069,0 +1099,0 @@ * @return {Object} initialPos.

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

1229929

increased by1.93%

Number of package files

26

increased by36.84%

Lines of code

2170

increased by2.65%

Number of lines in readme file

163

increased by0.62%

No dependency changes