react-path-tooltip - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

dist/react-path-tooltip.cjs.development.js

@@ -44,13 +44,12 @@ 'use strict';
   React.useEffect(function () {
-    var calcTooltipRect = function calcTooltipRect() {
+    var updateTooltip = function updateTooltip(e) {
       if (svgRef && pathRef && textRef && svgRef.current && pathRef.current && textRef.current) {
         var svgRect = svgRef.current.getBoundingClientRect();
-        var pathRect = pathRef.current.getBoundingClientRect();
         var textRect = textRef.current.getBoundingClientRect();
-        var isLeft = pathRect.x - svgRect.x > svgRect.width / 2;
-        var isTop = pathRect.y - svgRect.y > svgRect.height / 2;
+        var isLeft = e.x - svgRect.x > svgRect.width / 2;
+        var isTop = e.y - svgRect.y > svgRect.height / 2;
         var w = textRect.width + 20;
         var h = textRect.height + 20;
-        var x = isLeft ? pathRect.x - svgRect.x + pathRect.height / 2 - 7 - w : pathRect.x - svgRect.x + pathRect.width / 2 + 7;
-        var y = isTop ? pathRect.y - svgRect.y + pathRect.height / 2 - 7 - h : pathRect.y - svgRect.y + pathRect.height / 2 + 7;
+        var x = isLeft ? e.x - svgRect.x + 8 - w : e.x - svgRect.x - 8;
+        var y = isTop ? e.y - svgRect.y - 12 - h : e.y - svgRect.y + 8;
         setTooltipRect({
@@ -69,3 +68,2 @@ x: x,
       pathRef.current.addEventListener('mouseover', function () {
-        calcTooltipRect();
         setHidden(false);
@@ -76,7 +74,10 @@ });
       });
+      pathRef.current.addEventListener('mousemove', function (e) {
+        if (!hidden) updateTooltip(e);
+      });
     }
   }, [pathRef, svgRef, textRef]); // build up tip of tooltip
 
-  var bottomRight = (tooltipRect.x + 7).toString() + "," + (tooltipRect.y - 10).toString() + " " + (tooltipRect.x + 15).toString() + "," + tooltipRect.y.toString() + " " + (tooltipRect.x + 7).toString() + "," + tooltipRect.y.toString();
-  var bottomLeft = (tooltipRect.x + tooltipRect.w - 7).toString() + "," + (tooltipRect.y - 10).toString() + " " + (tooltipRect.x + tooltipRect.w - 15).toString() + "," + tooltipRect.y.toString() + " " + (tooltipRect.x + tooltipRect.w - 7).toString() + "," + tooltipRect.y.toString();
+  var bottomRight = (tooltipRect.x + 7).toString() + "," + (tooltipRect.y - 10).toString() + " " + (tooltipRect.x + 30).toString() + "," + tooltipRect.y.toString() + " " + (tooltipRect.x + 22).toString() + "," + tooltipRect.y.toString();
+  var bottomLeft = (tooltipRect.x + tooltipRect.w - 8).toString() + "," + (tooltipRect.y - 10).toString() + " " + (tooltipRect.x + tooltipRect.w - 25).toString() + "," + tooltipRect.y.toString() + " " + (tooltipRect.x + tooltipRect.w - 15).toString() + "," + tooltipRect.y.toString();
   var topRight = (tooltipRect.x + 7).toString() + "," + (tooltipRect.y + tooltipRect.h + 10).toString() + " " + (tooltipRect.x + 15).toString() + "," + (tooltipRect.y + tooltipRect.h).toString() + " " + (tooltipRect.x + 7).toString() + "," + (tooltipRect.y + tooltipRect.h).toString();
@@ -83,0 +84,0 @@ var topLeft = (tooltipRect.x + tooltipRect.w - 7).toString() + "," + (tooltipRect.y + tooltipRect.h + 10).toString() + " " + (tooltipRect.x + tooltipRect.w - 15).toString() + "," + (tooltipRect.y + tooltipRect.h).toString() + " " + (tooltipRect.x + tooltipRect.w - 7).toString() + "," + (tooltipRect.y + tooltipRect.h).toString();

dist/react-path-tooltip.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t,e=require("react"),i=(t=e)&&"object"==typeof t&&"default"in t?t.default:t;exports.PathTooltip=function(t){var n=e.useState(!0),r=n[0],o=n[1],g=e.useState({x:0,y:0,w:0,h:0,isLeft:!1,isTop:!1}),s=g[0],u=g[1],y=e.useState(t.fontSize||12)[0],h=e.useState(t.fontFamily||"sans-serif")[0],l=e.useState(t.bgColor||"black")[0],S=e.useState(t.textColor||"white")[0],c=t.pathRef,a=t.svgRef,f=i.createRef();e.useEffect((function(){c&&c.current&&(c.current.addEventListener("mouseover",(function(){!function(){if(a&&c&&f&&a.current&&c.current&&f.current){var t=a.current.getBoundingClientRect(),e=c.current.getBoundingClientRect(),i=f.current.getBoundingClientRect(),n=e.x-t.x>t.width/2,r=e.y-t.y>t.height/2,o=i.width+20,g=i.height+20;u({x:n?e.x-t.x+e.height/2-7-o:e.x-t.x+e.width/2+7,y:r?e.y-t.y+e.height/2-7-g:e.y-t.y+e.height/2+7,w:o,h:g,isLeft:n,isTop:r})}}(),o(!1)})),c.current.addEventListener("mouseleave",(function(){o(!0)})))}),[c,a,f]);var x=(s.x+7).toString()+","+(s.y-10).toString()+" "+(s.x+15).toString()+","+s.y.toString()+" "+(s.x+7).toString()+","+s.y.toString(),d=(s.x+s.w-7).toString()+","+(s.y-10).toString()+" "+(s.x+s.w-15).toString()+","+s.y.toString()+" "+(s.x+s.w-7).toString()+","+s.y.toString(),v=(s.x+7).toString()+","+(s.y+s.h+10).toString()+" "+(s.x+15).toString()+","+(s.y+s.h).toString()+" "+(s.x+7).toString()+","+(s.y+s.h).toString(),p=(s.x+s.w-7).toString()+","+(s.y+s.h+10).toString()+" "+(s.x+s.w-15).toString()+","+(s.y+s.h).toString()+" "+(s.x+s.w-7).toString()+","+(s.y+s.h).toString(),w=s.isLeft&&s.isTop?p:s.isTop?v:s.isLeft?d:x;return i.createElement("g",{pointerEvents:"none"},i.createElement("rect",{x:s.x,y:s.y,width:s.w,rx:5,ry:5,height:s.h,fill:l,visibility:r?"hidden":"visible"}),i.createElement("polygon",{fill:l,visibility:r?"hidden":"visible",points:w}),i.createElement("text",{ref:f,x:s.x+10,cursor:"default",y:s.y+s.h/1.66,fontFamily:h,fontSize:y,fill:S,visibility:r?"hidden":"visible"},t.tip))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t,e=require("react"),i=(t=e)&&"object"==typeof t&&"default"in t?t.default:t;exports.PathTooltip=function(t){var n=e.useState(!0),r=n[0],o=n[1],s=e.useState({x:0,y:0,w:0,h:0,isLeft:!1,isTop:!1}),u=s[0],g=s[1],y=e.useState(t.fontSize||12)[0],S=e.useState(t.fontFamily||"sans-serif")[0],l=e.useState(t.bgColor||"black")[0],a=e.useState(t.textColor||"white")[0],c=t.pathRef,f=t.svgRef,x=i.createRef();e.useEffect((function(){c&&c.current&&(c.current.addEventListener("mouseover",(function(){o(!1)})),c.current.addEventListener("mouseleave",(function(){o(!0)})),c.current.addEventListener("mousemove",(function(t){r||function(t){if(f&&c&&x&&f.current&&c.current&&x.current){var e=f.current.getBoundingClientRect(),i=x.current.getBoundingClientRect(),n=t.x-e.x>e.width/2,r=t.y-e.y>e.height/2,o=i.width+20,s=i.height+20;g({x:n?t.x-e.x+8-o:t.x-e.x-8,y:r?t.y-e.y-12-s:t.y-e.y+8,w:o,h:s,isLeft:n,isTop:r})}}(t)})))}),[c,f,x]);var h=(u.x+7).toString()+","+(u.y-10).toString()+" "+(u.x+30).toString()+","+u.y.toString()+" "+(u.x+22).toString()+","+u.y.toString(),d=(u.x+u.w-8).toString()+","+(u.y-10).toString()+" "+(u.x+u.w-25).toString()+","+u.y.toString()+" "+(u.x+u.w-15).toString()+","+u.y.toString(),v=(u.x+7).toString()+","+(u.y+u.h+10).toString()+" "+(u.x+15).toString()+","+(u.y+u.h).toString()+" "+(u.x+7).toString()+","+(u.y+u.h).toString(),p=(u.x+u.w-7).toString()+","+(u.y+u.h+10).toString()+" "+(u.x+u.w-15).toString()+","+(u.y+u.h).toString()+" "+(u.x+u.w-7).toString()+","+(u.y+u.h).toString(),w=u.isLeft&&u.isTop?p:u.isTop?v:u.isLeft?d:h;return i.createElement("g",{pointerEvents:"none"},i.createElement("rect",{x:u.x,y:u.y,width:u.w,rx:5,ry:5,height:u.h,fill:l,visibility:r?"hidden":"visible"}),i.createElement("polygon",{fill:l,visibility:r?"hidden":"visible",points:w}),i.createElement("text",{ref:x,x:u.x+10,cursor:"default",y:u.y+u.h/1.66,fontFamily:S,fontSize:y,fill:a,visibility:r?"hidden":"visible"},t.tip))};
 //# sourceMappingURL=react-path-tooltip.cjs.production.min.js.map

dist/react-path-tooltip.esm.js

@@ -37,13 +37,12 @@ import React, { useState, useEffect } from 'react';
   useEffect(function () {
-    var calcTooltipRect = function calcTooltipRect() {
+    var updateTooltip = function updateTooltip(e) {
       if (svgRef && pathRef && textRef && svgRef.current && pathRef.current && textRef.current) {
         var svgRect = svgRef.current.getBoundingClientRect();
-        var pathRect = pathRef.current.getBoundingClientRect();
         var textRect = textRef.current.getBoundingClientRect();
-        var isLeft = pathRect.x - svgRect.x > svgRect.width / 2;
-        var isTop = pathRect.y - svgRect.y > svgRect.height / 2;
+        var isLeft = e.x - svgRect.x > svgRect.width / 2;
+        var isTop = e.y - svgRect.y > svgRect.height / 2;
         var w = textRect.width + 20;
         var h = textRect.height + 20;
-        var x = isLeft ? pathRect.x - svgRect.x + pathRect.height / 2 - 7 - w : pathRect.x - svgRect.x + pathRect.width / 2 + 7;
-        var y = isTop ? pathRect.y - svgRect.y + pathRect.height / 2 - 7 - h : pathRect.y - svgRect.y + pathRect.height / 2 + 7;
+        var x = isLeft ? e.x - svgRect.x + 8 - w : e.x - svgRect.x - 8;
+        var y = isTop ? e.y - svgRect.y - 12 - h : e.y - svgRect.y + 8;
         setTooltipRect({
@@ -62,3 +61,2 @@ x: x,
       pathRef.current.addEventListener('mouseover', function () {
-        calcTooltipRect();
         setHidden(false);
@@ -69,7 +67,10 @@ });
       });
+      pathRef.current.addEventListener('mousemove', function (e) {
+        if (!hidden) updateTooltip(e);
+      });
     }
   }, [pathRef, svgRef, textRef]); // build up tip of tooltip
 
-  var bottomRight = (tooltipRect.x + 7).toString() + "," + (tooltipRect.y - 10).toString() + " " + (tooltipRect.x + 15).toString() + "," + tooltipRect.y.toString() + " " + (tooltipRect.x + 7).toString() + "," + tooltipRect.y.toString();
-  var bottomLeft = (tooltipRect.x + tooltipRect.w - 7).toString() + "," + (tooltipRect.y - 10).toString() + " " + (tooltipRect.x + tooltipRect.w - 15).toString() + "," + tooltipRect.y.toString() + " " + (tooltipRect.x + tooltipRect.w - 7).toString() + "," + tooltipRect.y.toString();
+  var bottomRight = (tooltipRect.x + 7).toString() + "," + (tooltipRect.y - 10).toString() + " " + (tooltipRect.x + 30).toString() + "," + tooltipRect.y.toString() + " " + (tooltipRect.x + 22).toString() + "," + tooltipRect.y.toString();
+  var bottomLeft = (tooltipRect.x + tooltipRect.w - 8).toString() + "," + (tooltipRect.y - 10).toString() + " " + (tooltipRect.x + tooltipRect.w - 25).toString() + "," + tooltipRect.y.toString() + " " + (tooltipRect.x + tooltipRect.w - 15).toString() + "," + tooltipRect.y.toString();
   var topRight = (tooltipRect.x + 7).toString() + "," + (tooltipRect.y + tooltipRect.h + 10).toString() + " " + (tooltipRect.x + 15).toString() + "," + (tooltipRect.y + tooltipRect.h).toString() + " " + (tooltipRect.x + 7).toString() + "," + (tooltipRect.y + tooltipRect.h).toString();
@@ -76,0 +77,0 @@ var topLeft = (tooltipRect.x + tooltipRect.w - 7).toString() + "," + (tooltipRect.y + tooltipRect.h + 10).toString() + " " + (tooltipRect.x + tooltipRect.w - 15).toString() + "," + (tooltipRect.y + tooltipRect.h).toString() + " " + (tooltipRect.x + tooltipRect.w - 7).toString() + "," + (tooltipRect.y + tooltipRect.h).toString();

package.json

 {
     "name": "react-path-tooltip",
-    "version": "1.0.2",
+    "version": "1.0.3",
     "license": "MIT",
@@ -27,5 +27,3 @@ "displayName": "React Path Tooltip",
         "@types/react": "^16.9.34",
-        "@types/react-dom": "^16.9.6",
-        "react": "^16.13.1",
-        "react-dom": "^16.13.1"
+        "@types/react-dom": "^16.9.6"
     },
@@ -32,0 +30,0 @@ "scripts": {

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

Dev dependency count

7

decreased by-22.22%

Lines of code

283

increased by0.71%

Worsened metrics

Total package byte prevSize

47872

decreased by-1.85%

No dependency changes