react-xarrows - npm Package Compare versions

Comparing version 1.4.3 to 1.4.4

lib/index.d.ts

@@ -13,3 +13,3 @@ import React from "react";
     headSize?: number;
-    path?: "smooth" | "grid" | "straight";
+    path: "smooth" | "grid" | "straight";
     curveness?: number;
@@ -29,3 +29,2 @@ dashness?: boolean | {
             arrowHead?: React.SVGProps<SVGPathElement>;
-            divContainer?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
         };
@@ -32,0 +31,0 @@ };

lib/index.js

@@ -330,4 +330,4 @@ var __rest = (this && this.__rest) || function (s, e) {
     }
-    let { passProps: adPassProps = { SVGcanvas: {}, arrowHead: {}, arrowBody: {}, divContainer: {} }, extendSVGcanvas: extendSVGcanvas = 0, } = props.advanced;
-    let { SVGcanvas = {}, arrowBody = {}, arrowHead = {}, divContainer = {} } = adPassProps;
+    let { passProps: adPassProps = { SVGcanvas: {}, arrowHead: {}, arrowBody: {} }, extendSVGcanvas: extendSVGcanvas = 0, } = props.advanced;
+    let { SVGcanvas = {}, arrowBody = {}, arrowHead = {} } = adPassProps;
     const getSelfPos = () => {
@@ -363,2 +363,5 @@ let { x: xarrowElemX, y: xarrowElemY } = selfRef.current.getBoundingClientRect();
     const updatePosition = (positions) => {
+        // Do NOT call this function directly.
+        // you should set position by 'setPrevPosState(posState)' and that will trigger
+        // this function in the useEffect hook.
         let { start: sPos } = positions;
@@ -708,3 +711,3 @@ let { end: ePos } = positions;
     // console.log("test");
-    return (React.createElement("div", Object.assign({ style: { position: "absolute" } }, divContainer),
+    return (React.createElement("div", { style: { position: "absolute" } },
         React.createElement("svg", Object.assign({ ref: selfRef, width: st.cw, height: st.ch, style: {
@@ -720,3 +723,5 @@ // border: "2px yellow dashed",
                 pointerEvents: "visibleStroke" }, props.passProps, arrowBody), animationSpeed ? (React.createElement("animate", { attributeName: "stroke-dashoffset", values: `${dashoffset * animationDirection};0`, dur: `${1 / animationSpeed}s`, repeatCount: "indefinite" })) : null),
-            React.createElement("path", Object.assign({ d: `M 0 0 L ${fHeadSize} ${fHeadSize / 2} L 0 ${fHeadSize} L ${fHeadSize / 4} ${fHeadSize / 2} z`, fill: headColor, pointerEvents: "all", transform: `translate(${xOffsetHead},${yOffsetHead}) rotate(${st.headOrient})` }, props.passProps, arrowHead))),
+            React.createElement("path", Object.assign({ d: `M 0 0 L ${fHeadSize} ${fHeadSize / 2} L 0 ${fHeadSize} L ${fHeadSize / 4} ${fHeadSize / 2} z`, fill: headColor, 
+                // pointerEvents="all"
+                transform: `translate(${xOffsetHead},${yOffsetHead}) rotate(${st.headOrient})` }, props.passProps, arrowHead))),
         labelStart ? (React.createElement("div", { style: {
@@ -759,3 +764,3 @@ transform: st.dx < 0 ? "translate(-100% , -50%)" : "translate(-0% , -50%)",
     passProps: {},
-    advanced: { extendSVGcanvas: 0, passProps: { arrowBody: {}, arrowHead: {}, SVGcanvas: {}, divContainer: {} } },
+    advanced: { extendSVGcanvas: 0, passProps: { arrowBody: {}, arrowHead: {}, SVGcanvas: {} } },
     monitorDOMchanges: true,
@@ -762,0 +767,0 @@ registerEvents: [],

package.json

 {
   "name": "react-xarrows",
-  "version": "1.4.3",
+  "version": "1.4.4",
   "author": "Eliav Louski",
@@ -5,0 +5,0 @@ "description": "Draw arrows (or lines) between components in React!",

README.md

@@ -7,8 +7,11 @@ # react-xarrows
 
-This library is all about customizable and reliable arrows(or lines) between DOM elements in React.
+#### main features
 
-I've needed such a components in one of my projects - and found out(surprisingly enough) that there is no such(good) lib, so I've decided to create one from scratch, and share it.
+- Connect between elements by passing a ref or an id for startElement and endElement.
+- Automatic anchoring based on smallest path.
+- can add customizable labels
+- relatively fast algorithm to find path and to adjust canvas.
+- Easily customize the look and behavior of the arrow.
+- Written in typescript so you get nice props suggestions(but support js also of course).
 
-now (since v1.1.4) i can say, after a lot of tests and improvements- the arrows should work and act naturally under any normal circumstances(but don't try put some negative curveness ha?).
-
 found a problem? not a problem! post a new issue([here](https://github.com/Eliav2/react-xarrows/issues)) and i will do my best to fix it.
@@ -27,6 +30,9 @@
 
+#### Demos
+
 [see here!](https://codesandbox.io/embed/github/Eliav2/react-xarrows/tree/master/examples?fontsize=14&hidenavigation=1&theme=dark) codebox of few examples(in this repo at /examples).
 
-![Image of xarrows](https://github.com/Eliav2/react-xarrows/blob/master/examples/images/react-xarrow-picture-1.2.0.png)
+![react-xarrow-picture-1 4 2](https://user-images.githubusercontent.com/47307889/87698325-facfc480-c79b-11ea-976a-dbad0ecd9b48.png)
 
+
 ### simple example:
@@ -47,3 +53,5 @@
   return (
-    <div style={{ display: "flex", justifyContent: "space-evenly", width: "100%" }}>
+    <div
+      style={{ display: "flex", justifyContent: "space-evenly", width: "100%" }}
+    >
       <div ref={box1Ref} style={boxStyle}>
@@ -120,5 +128,7 @@ hey
 you can keep things simple or provide more detailed props for more custom behavior - the API except both.
-for example - you can provide `label:"middleLabel"` and the string will appear as middle label or customize the labels as you please: `label:{end:{text:"end",extra:{fill:"red",dx:-10}}}`.
+for example - you can provide:<br/> `label:"middleLabel"` and the string will appear as middle label.<br/> or customize the labels as you please: `label:{end:<div style={{ fontSize: "1.3em", fontFamily: "fantasy", fontStyle: "italic" }}>big end label</div>}}`.
 see typescript types above for detailed descriptions of what type excepts every prop.
 
+### Properties
+
 #### 'start' and 'end'
@@ -125,0 +135,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

Improved metrics

Total package byte prevSize

80266

increased by1.37%

Lines of code

823

increased by0.37%

Number of lines in readme file

274

increased by3.79%

No dependency changes