react-image-marker - npm Package Compare versions

Comparing version 1.0.6 to 1.1.0

build/index.d.ts

@@ -17,4 +17,6 @@ import * as React from 'react';
     markerComponent?: React.FC<MarkerComponentProps>;
+    bufferLeft?: number;
+    bufferTop?: number;
 };
 declare const ImageMarker: React.FC<Props>;
 export default ImageMarker;

build/index.js

@@ -51,4 +51,19 @@
 
+var calculateMarkerPosition = function (mousePosition, imagePosition, scrollY, bufferLeft, bufferTop) {
+    var pixelsLeft = mousePosition.clientX - imagePosition.left;
+    var pixelsTop;
+    if (imagePosition.top < 0) {
+        pixelsTop = mousePosition.pageY - scrollY + imagePosition.top * -1;
+    }
+    else {
+        pixelsTop = mousePosition.pageY - scrollY - imagePosition.top;
+    }
+    var top = ((pixelsTop - bufferTop) * 100) / imagePosition.height;
+    var left = ((pixelsLeft - bufferLeft) * 100) / imagePosition.width;
+    return [top, left];
+};
+
+var DEFAULT_BUFFER = 12;
 var ImageMarker = function (_a) {
-    var src = _a.src, markers = _a.markers, onAddMarker = _a.onAddMarker, MarkerComponent = _a.markerComponent;
+    var src = _a.src, markers = _a.markers, onAddMarker = _a.onAddMarker, MarkerComponent = _a.markerComponent, _b = _a.bufferLeft, bufferLeft = _b === void 0 ? DEFAULT_BUFFER : _b, _c = _a.bufferTop, bufferTop = _c === void 0 ? DEFAULT_BUFFER : _c;
     var imageRef = React.useRef(null);
@@ -59,18 +74,8 @@ var handleImageClick = function (event) {
         }
-        var imageSize = imageRef.current.getBoundingClientRect();
-        var width = imageSize.width, height = imageSize.height, top = imageSize.top, left = imageSize.left;
-        var buffer = 12;
-        var pixelsLeft = event.clientX - left;
-        var pixelsTop;
-        if (top < 0) {
-            pixelsTop = event.pageY - window.scrollY + top * -1;
-        }
-        else {
-            pixelsTop = event.pageY - window.scrollY - top;
-        }
-        var position = {
-            top: ((pixelsTop - buffer) * 100) / height,
-            left: ((pixelsLeft - buffer) * 100) / width,
-        };
-        onAddMarker(position);
+        var imageDimentions = imageRef.current.getBoundingClientRect();
+        var _a = calculateMarkerPosition(event, imageDimentions, window.scrollY, bufferLeft, bufferTop), top = _a[0], left = _a[1];
+        onAddMarker({
+            top: top,
+            left: left,
+        });
     };
@@ -77,0 +82,0 @@ var getItemPosition = function (marker) {

package.json

 {
     "name": "react-image-marker",
-    "version": "1.0.6",
+    "version": "1.1.0",
     "description": "Allows to add markers to an image",
@@ -8,2 +8,3 @@ "main": "build/index.js",
     "scripts": {
+        "test": "jest",
         "prebuild": "rm -rf build",
@@ -33,2 +34,3 @@ "build": "rollup -c",
     "devDependencies": {
+        "@types/jest": "^26.0.14",
         "@types/react": "^16.3.13",
@@ -38,2 +40,3 @@ "@types/react-dom": "^16.0.5",
         "babel-runtime": "^6.26.0",
+        "jest": "^26.4.2",
         "react": "^16.12.0",
@@ -44,2 +47,3 @@ "react-dom": "^16.12.0",
         "rollup-plugin-typescript2": "^0.25.3",
+        "ts-jest": "^26.4.0",
         "typescript": "^2.8.3"
@@ -46,0 +50,0 @@ },

README.md

@@ -1,2 +0,111 @@
-# react-image-marker
-It allows to be able to set markers on an image
+<p align="center">
+  <img src="https://firebasestorage.googleapis.com/v0/b/heroes-49297.appspot.com/o/react-image-marker-01.png?alt=media&token=801dd48d-28c4-4795-9695-b89049f034cb">
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/react-image-marker" target="_blank">
+    <img src="https://badgen.net/npm/v/react-image-marker" alt="">
+  </a>
+  <a href="LICENSE.md" target="_blank">
+    <img src="https://badgen.net/badge/license/MIT/blue" alt="">
+  </a>
+  <a href="https://www.npmjs.com/package/react-image-marker" target="_blank">
+    <img src="https://badgen.net/npm/dt/react-image-marker" alt="">
+  </a>
+</p>
+
+`react-image-marker` makes it easy to add markers and tags to any image.
+
+## Why ?
+
+Adding markers to images seems something really simple, isn't it? You just need to do some hacks with CSS to position your marker where it was clicked and it is done, right? NO!
+
+There is a bunch of edge cases that need to be addressed:
+
+-   When the screen size is changed, the markers need to keep the same reference.
+-   When the image is half shown on the screen (let's suppose the user has scrolled down), clicking on the image should position the marker correctly.
+-   Much more.
+
+## Install
+
+Install with [npm](https://www.npmjs.com/), or [Yarn](https://yarnpkg.com/):
+
+```bash
+# via npm
+npm install react-image-marker
+
+# or Yarn (note that it will automatically save the package to your `dependencies` in `package.json`)
+yarn add react-image-marker
+```
+
+## Usage
+
+First, you will need to import the `ImageMarker`. If you are using `typescript` on your project you can also import the type `Marker`.
+
+```js
+// import the dependencies
+import ImageMarker, { Marker } from 'react-image-marker';
+```
+
+Now you will need to provide an array of `Markers`. In this example, we are storing them with `useState`. `top` and `left` are numbers that represent the PERCENTAGE the marker is positioned in relation to the image size.
+
+```js
+//Define the markers
+const [markers, setMarkers] =
+    useState <
+    Array <
+    Marker >>
+        [
+            {
+                top: 10, //10% of the image relative size from top
+                left: 50, //50% of the image relative size from left
+            },
+        ];
+```
+
+Now you just need to use the `ImageMarker` to render your markers
+
+```js
+<ImageMarker
+    src="my-image-path"
+    markers={markers}
+    onAddMarker={(marker: Marker) => setMarkers([...markers, marker])}
+/>
+```
+
+It is going to render something like this
+
+<p align="center">
+  <img src="https://firebasestorage.googleapis.com/v0/b/heroes-49297.appspot.com/o/react-image-marker-default.gif?alt=media&token=f13ba5b8-eabc-4ded-8bed-9016b0bbd2e5">
+</p>
+
+## Usage - Custom Markers
+
+You can also use a custom marker if you want.
+First, you will need to create a custom marker component.
+
+```js
+// import the dependencies
+import ImageMarker, { Marker, MarkerComponentProps } from 'react-image-marker';
+
+const CustomMarker = (props: MarkerComponentProps) => {
+    return (
+        <p className="custom-marker">My custom marker - {props.itemNumber}</p>
+    );
+};
+```
+
+Now you just need to pass it through the prop `markerComponent`
+
+```js
+<ImageMarker
+    src="my-image-path"
+    markers={markers}
+    onAddMarker={(marker: Marker) => setMarkers([...markers, marker])}
+    markerComponent={CustomMarker}
+/>
+```
+
+<p align="center">
+  <img src="https://firebasestorage.googleapis.com/v0/b/heroes-49297.appspot.com/o/react-image-marker-custom-marker.gif?alt=media&token=9cad6f01-d982-41f9-8401-d69d826618bd">
+</p>

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

16171

increased by51.02%

Number of package files

8

increased by33.33%

Lines of code

113

increased by18.95%

Number of lines in readme file

112

increased by3633.33%

Worsened metrics

Dev dependency count

13

increased by30%

No dependency changes