react-input-position - npm Package Compare versions

Comparing version 1.0.1 to 1.1.0

dist/index.js

@@ -169,3 +169,4 @@ "use strict";
           linkItemToActive = _props2.linkItemToActive,
-          itemMovementMultiplier = _props2.itemMovementMultiplier;
+          itemMovementMultiplier = _props2.itemMovementMultiplier,
+          alignItemOnActivePos = _props2.alignItemOnActivePos;
 
@@ -223,4 +224,4 @@
         stateUpdate.itemPosition = {
-          x: convertRange(0, width, 0, -(stateUpdate.itemDimensions.width || 0) + width, stateUpdate.activePosition.x) + (width / 2 - stateUpdate.activePosition.x),
-          y: convertRange(0, height, 0, -(stateUpdate.itemDimensions.height || 0) + height, stateUpdate.activePosition.y) + (height / 2 - stateUpdate.activePosition.y)
+          x: _utils2.default.convertRange(0, width, 0, -(stateUpdate.itemDimensions.width || 0) + width, stateUpdate.activePosition.x) + (width / 2 - stateUpdate.activePosition.x),
+          y: _utils2.default.convertRange(0, height, 0, -(stateUpdate.itemDimensions.height || 0) + height, stateUpdate.activePosition.y) + (height / 2 - stateUpdate.activePosition.y)
         };
@@ -230,2 +231,10 @@ shouldLimitItem = true;
 
+      if (trackItemPosition && alignItemOnActivePos) {
+        stateUpdate.itemPosition = {
+          x: _utils2.default.convertRange(0, Math.ceil(width) - 1, 0, -(stateUpdate.itemDimensions.width || 0) + width, stateUpdate.activePosition.x),
+          y: _utils2.default.convertRange(0, Math.ceil(height) - 1, 0, -(stateUpdate.itemDimensions.height || 0) + height, stateUpdate.activePosition.y)
+        };
+        shouldLimitItem = true;
+      }
+
       if (shouldLimitItem || centerItem) {
@@ -294,3 +303,2 @@ stateUpdate.itemPosition = this.limitItemPosition(stateUpdate.itemPosition, activate && centerItemOnActivate || centerItem, stateUpdate.elementDimensions.width, stateUpdate.elementDimensions.height, stateUpdate.itemDimensions && stateUpdate.itemDimensions.width, stateUpdate.itemDimensions && stateUpdate.itemDimensions.height);
         } else if (itemWidth || itemHeight) {
-
           itemPositionMaxX = 0;
@@ -501,2 +509,3 @@ itemPositionMaxY = 0;
   centerItemOnLoad: _propTypes2.default.bool,
+  alignItemOnActivePos: _propTypes2.default.bool,
   itemMovementMultiplier: _propTypes2.default.number,
@@ -519,11 +528,4 @@ cursorStyle: _propTypes2.default.string,
 };
-
-
-function convertRange(oldMin, oldMax, newMin, newMax, oldValue) {
-  var percent = (oldValue - oldMin) / (oldMax - oldMin);
-  return percent * (newMax - newMin) + newMin;
-}
-
 exports.MOUSE_ACTIVATION = _constants.MOUSE_ACTIVATION;
 exports.TOUCH_ACTIVATION = _constants.TOUCH_ACTIVATION;
 exports.default = ReactInputPosition;

dist/mouseActivation/click.js

@@ -18,3 +18,3 @@ "use strict";
   this.clickMoveStartRef = e.clientX + e.clientY;
-};
+}
 
@@ -30,3 +30,5 @@ function mouseUp(e) {
   var clickMoveEnd = position.x + position.y;
-  if (Math.abs(this.clickMoveStartRef - clickMoveEnd) < this.props.clickMoveLimit) {
+  var diff = Math.abs(this.clickMoveStartRef - clickMoveEnd);
+
+  if (diff < this.props.clickMoveLimit) {
     this.toggleActive(position);
@@ -33,0 +35,0 @@ }

dist/mouseActivation/doubleClick.js

@@ -16,3 +16,3 @@ "use strict";
   this.mouseJustDown = true;
-};
+}
 
@@ -19,0 +19,0 @@ function mouseUp() {

dist/mouseActivation/hover.js

@@ -16,3 +16,3 @@ "use strict";
   this.mouseJustDown = true;
-};
+}
 
@@ -19,0 +19,0 @@ function mouseUp() {

dist/mouseActivation/mouseDown.js

@@ -17,3 +17,3 @@ "use strict";
   this.activate(position);
-};
+}
 
@@ -20,0 +20,0 @@ function mouseUp() {

dist/touchActivation/doubleTap.js

@@ -10,3 +10,3 @@ "use strict";
   this.startTapTimer();
-};
+}
 
@@ -13,0 +13,0 @@ function touchEnd(e) {

dist/touchActivation/longTouch.js

@@ -16,3 +16,3 @@ "use strict";
   this.startLongTouchTimer(position);
-};
+}
 
@@ -19,0 +19,0 @@ function touchEnd(e) {

dist/touchActivation/tap.js

@@ -10,3 +10,3 @@ "use strict";
   this.startTapTimer();
-};
+}
 
@@ -13,0 +13,0 @@ function touchEnd(e) {

dist/touchActivation/touch.js

@@ -13,3 +13,3 @@ "use strict";
   this.activate(position);
-};
+}
 
@@ -16,0 +16,0 @@ function touchEnd(e) {

dist/utils.js

@@ -31,5 +31,11 @@ "use strict";
 
+function convertRange(oldMin, oldMax, newMin, newMax, oldValue) {
+  var percent = (oldValue - oldMin) / (oldMax - oldMin);
+  return percent * (newMax - newMin) + newMin;
+}
+
 exports.default = {
   decorateChildren: decorateChildren,
-  preventDefault: preventDefault
+  preventDefault: preventDefault,
+  convertRange: convertRange
 };

package.json

 {
   "name": "react-input-position",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "A React component that decorates it's children with mouse/touch position tracking, a status toggle fired by click/gesture events, and more.",
@@ -26,2 +26,3 @@ "keywords": [
   },
+  "homepage": "https://myniztan.github.io/react-input-position",
   "main": "dist/index.js",
@@ -28,0 +29,0 @@ "scripts": {

README.md

@@ -114,3 +114,3 @@ # react-input-position
 
-**minUpdateSpeedInMs:** Throttles the state updates. Setting this to zero can create performance issues in IE. Type: number, Default: 1.
+**minUpdateSpeedInMs:** Throttles the mouse/touch position updates. For example, setting this to 10 will force a 10ms delay between position updates. A minimum of 10ms (since it's asynchronous). This won't actually cause updates every 10ms, it simply adds a delay to the natural rate. Note: Setting this to zero can create performance issues in IE. Raising this number too high will cause animations tied to positions to become choppy. Type: number, Default: 1.
 
@@ -123,8 +123,10 @@ **trackPassivePosition:** Provides mouse position regardless of active/inactive state. Type: boolean, Default: false.
 
-**centerItemOnActivate:** Centers the item's position whenever the component switches to an active state. Requires limits to be set for both min/max of both axis or limit by size. Type: boolean, Default: false. 
+**centerItemOnLoad:** Centers the item position on component mount. Requires limits to be set for both min/max of both axis or limit by size. Type: boolean, Default: false. 
 
-**centerItemOnActivatePos:** Centers the item's position whenever the component switches to an active state based on the mouse/touch position. Requires use of the itemRef prop (see "Item Position Feature"). Type: boolean, Default: false. 
+**centerItemOnActivate:** Centers the item position whenever the component switches to an active state. Requires limits to be set for both min/max of both axis or limit by size. Type: boolean, Default: false. 
 
-**centerItemOnLoad:** Centers the item's position on component mount. Requires limits to be set for both min/max of both axis or limit by size. Type: boolean, Default: false. 
+**centerItemOnActivatePos:** Centers the item based on the current mouse/touch position whenever the component switches to an active state. Achieved by scaling the input position based on the sizes of the component and item. Useful for image zoom style components where you want to display a larger version of an image, centered on the spot where the user clicked/tapped. Requires use of the itemRef prop (see "Item Position Feature"). Type: boolean, Default: false. 
 
+**alignItemOnActivePos:** Links and aligns the item position with the active position. Achieved by scaling the active position based on the sizes of the component and item. Useful for creating components like a magnifying glass where a larger version of an image needs to stay aligned with a smaller version based on the current mouse/touch position. Requires use of the itemRef prop (see "Item Position Feature"). Type: boolean, Default: false.
+
 **itemMovementMultiplier:** Multiplier to adjust the item's movement. Can also be used to reverse item movement by using a negative number. Type: number, Default: 1.
@@ -131,0 +133,0 @@

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

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

43552

increased by4.05%

Lines of code

847

increased by1.32%

Number of lines in readme file

174

increased by1.16%

No dependency changes