Launch Week Day 5: Introducing Reachability for PHP.Learn More →
Socket
Book a DemoSign in
Socket
Book a DemoSign in

react-path-marker

Package Overview
Dependencies
Maintainers
1
Versions
9
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-path-marker - npm Package Compare versions

Comparing version
1.0.6
 to
1.0.7
+4
-1
CHANGELOG.md

@@ -18,2 +18,5 @@ # CHANGELOG

## 1.0.6
* Fixed bug causing highlight to not work when selecting the marker itself
* Fixed bug causing highlight to not work when selecting the marker itself
## 1.0.7
* Allow passing optional reference if you want to use the reference outside for listeners (adding a tooltip to it)
+8
-4
dist/react-path-marker.esm.js

@@ -14,7 +14,11 @@ import React, { useState, useEffect } from 'react';

var markerRef = React.createRef();
var optionalNoRef = React.createRef();
var _useState4 = useState(props["markerRef"] || optionalNoRef),
markerRef = _useState4[0];
var pathRef = props.pathRef;
var svgRef = props.svgRef;
var _useState4 = useState({
var _useState5 = useState({
x: 0,

@@ -25,4 +29,4 @@ y: 0,

}),
markerRect = _useState4[0],
setMarkerRect = _useState4[1];
markerRect = _useState5[0],
setMarkerRect = _useState5[1];

@@ -29,0 +33,0 @@ useEffect(function () {

+1
-1
dist/react-path-marker.esm.js.map

@@ -1,1 +0,1 @@

{"version":3,"file":"react-path-marker.esm.js","sources":["../src/ReactPathMarker.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react'\n\ninterface IProps {\n pathRef: React.RefObject<SVGElement>,\n svgRef: React.RefObject<SVGSVGElement>,\n color?: string,\n borderColor?: string\n}\n\nexport const PathMarker: React.FC<IProps> = (props) => {\n const [radius, setRadius] = useState(3)\n const [color, ] = useState (props[\"color\"] || \"#ADD8E6\")\n const [borderColor, ] = useState (props[\"borderColor\"] || \"#EEEEEE\")\n const markerRef = React.createRef<SVGCircleElement>()\n const pathRef = props.pathRef\n const svgRef = props.svgRef\n const [markerRect, setMarkerRect] = useState({ x: 0, y: 0, w: 0, h: 0})\n \n useEffect(() => {\n const updateMarker = () => {\n if(svgRef && pathRef && svgRef.current && pathRef.current && markerRef && markerRef.current) {\n const svgRect = svgRef.current.getBoundingClientRect()\n const pathRect = pathRef.current.getBoundingClientRect()\n const markerRect = markerRef.current.getBoundingClientRect()\n\n const w = markerRect.width\n const h = markerRect.height\n const x = (pathRect.x + 0.5 * pathRect.width - svgRect.x)\n const y = (pathRect.y + 0.5 * pathRect.height - svgRect.y)\n\n setMarkerRect({ x: x, y: y, w: w, h: h})\n }\n }\n\n if (pathRef && pathRef.current) {\n window.addEventListener('resize', () => { updateMarker() })\n window.addEventListener(\"load\", () => { updateMarker() })\n pathRef.current.addEventListener(\"mouseover\", () => {if (markerRef && markerRef.current) { markerRef.current.style.strokeWidth = \"2\"; markerRef.current.style.strokeOpacity = \"0.5\"; setRadius(5); }})\n pathRef.current.addEventListener(\"mouseout\", () => {if (markerRef && markerRef.current) { markerRef.current.style.strokeWidth = \"1\"; markerRef.current.style.strokeOpacity = \"0.2\"; setRadius(3); }})\n }\n }, [pathRef, svgRef, markerRef, markerRect])\n\n return (\n <g>\n <circle \n r={radius}\n fill={color}\n stroke={borderColor}\n cx={markerRect.x}\n cy={markerRect.y} \n onMouseOver={(event) => { event.currentTarget.style.strokeWidth = \"2\"; event.currentTarget.style.strokeOpacity = \"0.5\"; setRadius(5)}}\n onMouseOut={(event) => { event.currentTarget.style.strokeWidth = \"1\"; event.currentTarget.style.strokeOpacity = \"0.2\"; setRadius(3)}}\n ref={markerRef}\n />\n </g>\n )\n}"],"names":["PathMarker","props","useState","radius","setRadius","color","borderColor","markerRef","React","createRef","pathRef","svgRef","x","y","w","h","markerRect","setMarkerRect","useEffect","updateMarker","current","svgRect","getBoundingClientRect","pathRect","width","height","window","addEventListener","style","strokeWidth","strokeOpacity","r","fill","stroke","cx","cy","onMouseOver","event","currentTarget","onMouseOut","ref"],"mappings":"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"}
{"version":3,"file":"react-path-marker.esm.js","sources":["../src/ReactPathMarker.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react'\n\ninterface IProps {\n pathRef: React.RefObject<SVGElement>,\n svgRef: React.RefObject<SVGSVGElement>,\n markerRef?: React.RefObject<SVGCircleElement>;\n color?: string,\n borderColor?: string\n}\n\nexport const PathMarker: React.FC<IProps> = (props) => {\n const [radius, setRadius] = useState(3)\n const [color, ] = useState (props[\"color\"] || \"#ADD8E6\")\n const [borderColor, ] = useState (props[\"borderColor\"] || \"#EEEEEE\")\n const optionalNoRef = React.createRef<SVGCircleElement>()\n const [markerRef, ] = useState (props[\"markerRef\"] || optionalNoRef)\n const pathRef = props.pathRef\n const svgRef = props.svgRef\n const [markerRect, setMarkerRect] = useState({ x: 0, y: 0, w: 0, h: 0})\n \n useEffect(() => {\n const updateMarker = () => {\n if(svgRef && pathRef && svgRef.current && pathRef.current && markerRef && markerRef.current) {\n const svgRect = svgRef.current.getBoundingClientRect()\n const pathRect = pathRef.current.getBoundingClientRect()\n const markerRect = markerRef.current.getBoundingClientRect()\n\n const w = markerRect.width\n const h = markerRect.height\n const x = (pathRect.x + 0.5 * pathRect.width - svgRect.x)\n const y = (pathRect.y + 0.5 * pathRect.height - svgRect.y)\n\n setMarkerRect({ x: x, y: y, w: w, h: h})\n }\n }\n\n if (pathRef && pathRef.current) {\n window.addEventListener('resize', () => { updateMarker() })\n window.addEventListener(\"load\", () => { updateMarker() })\n pathRef.current.addEventListener(\"mouseover\", () => {if (markerRef && markerRef.current) { markerRef.current.style.strokeWidth = \"2\"; markerRef.current.style.strokeOpacity = \"0.5\"; setRadius(5); }})\n pathRef.current.addEventListener(\"mouseout\", () => {if (markerRef && markerRef.current) { markerRef.current.style.strokeWidth = \"1\"; markerRef.current.style.strokeOpacity = \"0.2\"; setRadius(3); }})\n }\n }, [pathRef, svgRef, markerRef, markerRect])\n\n return (\n <g>\n <circle \n r={radius}\n fill={color}\n stroke={borderColor}\n cx={markerRect.x}\n cy={markerRect.y} \n onMouseOver={(event) => { event.currentTarget.style.strokeWidth = \"2\"; event.currentTarget.style.strokeOpacity = \"0.5\"; setRadius(5)}}\n onMouseOut={(event) => { event.currentTarget.style.strokeWidth = \"1\"; event.currentTarget.style.strokeOpacity = \"0.2\"; setRadius(3)}}\n ref={markerRef}\n />\n </g>\n )\n}"],"names":["PathMarker","props","useState","radius","setRadius","color","borderColor","optionalNoRef","React","createRef","markerRef","pathRef","svgRef","x","y","w","h","markerRect","setMarkerRect","useEffect","updateMarker","current","svgRect","getBoundingClientRect","pathRect","width","height","window","addEventListener","style","strokeWidth","strokeOpacity","r","fill","stroke","cx","cy","onMouseOver","event","currentTarget","onMouseOut","ref"],"mappings":"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"}
+1
-0
dist/ReactPathMarker.d.ts

@@ -5,2 +5,3 @@ import React from 'react';

svgRef: React.RefObject<SVGSVGElement>;
markerRef?: React.RefObject<SVGCircleElement>;
color?: string;

@@ -7,0 +8,0 @@ borderColor?: string;

+1
-1
package.json
{
"name": "react-path-marker",
"version": "1.0.6",
"version": "1.0.7",
"license": "MIT",

@@ -5,0 +5,0 @@ "displayName": "React Path Marker",

+1
-0
README.md

@@ -54,2 +54,3 @@ # react-path-marker [![License: MIT](https://img.shields.io/badge/license-MIT-yellow.svg)](https://opensource.org/licenses/MIT) [![npm version](https://img.shields.io/npm/v/react-path-marker.svg?style=flat)](https://www.npmjs.com/package/react-path-marker) [![Demo: Simple Example](https://img.shields.io/badge/demo-live-red.svg)](https://react-path-marker-simple-example.imfast.io)

| pathRef | React.RefObject<SVGSVGElement> | Mandatory. A React reference object to the path element bounded to the marker |
| markerRef | React.RefObject<SVGCircleElement> | Optional. A React reference object to the marker itself. Default: new reference |
| borderColor | string | Optional. Color for marker border. Default: "black" |

@@ -56,0 +57,0 @@ | color | string | Optional. Color for marker background. Default: "black" |