Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-xarrows
Advanced tools
react-xarrows - npm Package Compare versions
Comparing version 1.2.1 to 1.2.2
@@ -40,3 +40,3 @@ import React from "react"; | ||
| text: string; | ||
| extra?: React.SVGProps<SVGElement>; | ||
| extra?: React.SVGAttributes<SVGTextElement>; | ||
| }; | ||
@@ -43,0 +43,0 @@ declare type labelType = string | labelPropsType; |
@@ -70,3 +70,7 @@ import React, { useRef, useEffect, useState } from "react"; | ||
| const updateIfNeeded = () => { | ||
| if (!lodash.isEqual(props, prevProps)) { | ||
| if (checkIfAnchorsRefsChanged()) { | ||
| initAnchorsRefs(); | ||
| // initProps(); | ||
| } | ||
| else if (!lodash.isEqual(props, prevProps)) { | ||
| //first check if any properties changed | ||
@@ -86,2 +90,7 @@ if (prevProps) { | ||
| }; | ||
| const checkIfAnchorsRefsChanged = () => { | ||
| var start = getElementByPropGiven(props.start); | ||
| var end = getElementByPropGiven(props.end); | ||
| return !lodash.isEqual(anchorsRefs, { start, end }); | ||
| }; | ||
| const monitorDOMchanges = () => { | ||
@@ -191,68 +200,2 @@ [...anchorsParents.start, ...anchorsParents.end].forEach((elem) => { | ||
| checkAnchor(props.endAnchor, "endAnchor"); | ||
| // const objectTypeCheck = ( | ||
| // obj: object, | ||
| // requiredProps: object, | ||
| // optionalProps: object, | ||
| // objName: string | ||
| // ) => { | ||
| // for (let optPropKey in optionalProps) { | ||
| // if (optPropKey in obj) { | ||
| // if (typeOf(obj[optPropKey]) !== optionalProps[optPropKey]) | ||
| // throwError("error in object " + objName, [ | ||
| // optPropKey, | ||
| // " in object", | ||
| // obj, | ||
| // "is of type", | ||
| // typeOf(obj[optPropKey]), | ||
| // "instead ", | ||
| // optionalProps[optPropKey] | ||
| // ]); | ||
| // } | ||
| // } | ||
| // for (let reqPropKey in requiredProps) { | ||
| // if (reqPropKey in obj) { | ||
| // if (typeOf(obj[reqPropKey]) !== requiredProps[reqPropKey]) | ||
| // throwError("", [ | ||
| // reqPropKey, | ||
| // "in object", | ||
| // obj, | ||
| // "is of type", | ||
| // typeOf(obj[reqPropKey]), | ||
| // "instead", | ||
| // requiredProps[reqPropKey] | ||
| // ]); | ||
| // } else { | ||
| // throwError("", ["key", reqPropKey, "is missing from", obj]); | ||
| // } | ||
| // } | ||
| // }; | ||
| // const checkLabelType = label => { | ||
| // typeCheck(label, ["string", "object"], "label"); | ||
| // if (typeOf(label) === "object") { | ||
| // objectTypeCheck(label, { text: "string" }, { extra: "object" }, "label"); | ||
| // } | ||
| // }; | ||
| // const checkLabel = label => { | ||
| // console.log("?", label); | ||
| // typeCheck(label, ["string", "object"], "label"); | ||
| // if (typeOf(label) === "object") { | ||
| // let keys = Object.keys(label); | ||
| // if (keys.some(key => ["start", "middle", "end"].includes(key))) { | ||
| // for (let labelPos in ["start", "middle", "end"]) { | ||
| // if (labelPos in label) checkLabelType(label[labelPos]); | ||
| // } | ||
| // } else if (keys.some(key => ["text", "extra"].includes(key))) checkLabelType(label); | ||
| // } else | ||
| // throwError(`'label' property error`, [props.label, "in not the expected label object."]); | ||
| // }; | ||
| // if (props.label) { | ||
| // checkLabel(props.label); | ||
| // } | ||
| // const arraySmartIncludes = (arg, array) => { | ||
| // let match = false; | ||
| // array.forEach(a => { | ||
| // if (lodash.isEqual(arg, a)) match = true; | ||
| // }); | ||
| // return match; | ||
| // }; | ||
| }; | ||
@@ -304,3 +247,3 @@ const triggerUpdate = (callback) => { | ||
| useEffect(() => { | ||
| // heppens only at mounting after anchorsParents initialized | ||
| // happens only at mounting after anchorsParents initialized | ||
| if (anchorsParents && props.monitorDOMchanges) { | ||
@@ -323,4 +266,4 @@ monitorDOMchanges(); | ||
| }); | ||
| //initial state | ||
| const [st, setSt] = useState({ | ||
| //initial state | ||
| cx0: 0, | ||
@@ -386,2 +329,3 @@ cy0: 0, | ||
| if (isLabelPropsType(props.label)) { | ||
| labelMiddle = props.label; | ||
| labelMiddleExtra = labelMiddle.extra; | ||
@@ -439,11 +383,2 @@ labelMiddle = labelMiddle.text; | ||
| }; | ||
| // let userCanvExtra = props.advanced.extendSVGcanvas; | ||
| // const extraCanvasSize = { | ||
| // excx: (strokeWidth * headSize) / 2, | ||
| // excy: (strokeWidth * headSize) / 2 | ||
| // }; | ||
| // var { excx, excy } = extraCanvasSize; | ||
| // excy += labalCanvExtraY; | ||
| // excx += userCanvExtra; | ||
| // excy += userCanvExtra; | ||
| const updatePosition = (positions) => { | ||
@@ -450,0 +385,0 @@ // Do NOT call thie function directly. |
| { | ||
| "name": "react-xarrows", | ||
| "version": "1.2.1", | ||
| "version": "1.2.2", | ||
| "author": "Eliav Louski", | ||
@@ -5,0 +5,0 @@ "description": "Draw arrows (or lines) between components in React!", |
| # react-xarrows | ||
| ## introduction | ||
| Draw arrows between components in React! | ||
@@ -9,4 +11,2 @@ | ||
| this component will rerender and will update the anchors position whenever needed(not like other similar npm libraries) - the Xarrow also works inside scrollable windows and working no matter where placed in the DOM relative to his anchors. | ||
| 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?). | ||
@@ -20,2 +20,18 @@ | ||
| #### what to expect | ||
| - this arrows will rerender and will update the arrows position whenever needed(not like other similar npm libraries). | ||
| - works no matter where the Xarrow component placed in the DOM relative to his anchors. | ||
| - works no matter what the type of elemnts the anchors are (like div,p, h1, and so on). | ||
| - nice intellij suggestinons will apear when working with Xarrow. | ||
| - nice errors and warnings. | ||
| - works inside scrollable windows(no matter how many - or even if any anchor element inside diffrent nested scrolling windows). | ||
| - you can give this component simple props or more detailed ones for more custom behavior and looking. | ||
| - please see the examples below to understand better the using and features. | ||
| #### what to NOT expect | ||
| - keep in mind that this is React component. you should adopt React best practices and place the Xarrow under the relevent ancestor(of 'start' and 'end' element), so when the anchors elements rerenders - so do Xarrow(in simple cases at will work anyway because of DOM listerns i've added,but keep in mind). | ||
| - if your component uses 3rd components that uses animations and transformations that changes the anchors DOM positions - the xarrow will not rerender to the latest animated points, but to the firstest. you need to trigger update after all animations ended. | ||
| ## installation | ||
@@ -38,50 +54,26 @@ | ||
| const canvasStyle = { | ||
| position: "relative", | ||
| height: "20vh", | ||
| background: "white", | ||
| display: "flex", | ||
| justifyContent: "space-evenly", | ||
| alignItems: "center", | ||
| }; | ||
| const boxStyle = { | ||
| position: "relative", | ||
| border: "1px #999 solid", | ||
| border: "grey solid 2px", | ||
| borderRadius: "10px", | ||
| textAlign: "center", | ||
| width: "100px", | ||
| height: "30px", | ||
| color: "black", | ||
| padding: "5px", | ||
| }; | ||
| const Box = (props) => { | ||
| function SimpleExample() { | ||
| const box1Ref = useRef(null); | ||
| return ( | ||
| <div ref={props.box.ref} id={props.box.id} style={boxStyle}> | ||
| {props.box.id} | ||
| <div style={{ display: "flex", justifyContent: "space-evenly", width: "100%" }}> | ||
| <div ref={box1Ref} style={boxStyle}> | ||
| hey | ||
| </div> | ||
| <p id="elem2" style={boxStyle}> | ||
| hey2 | ||
| </p> | ||
| <Xarrow | ||
| start={box1Ref} //can be react ref | ||
| end="elem2" //or an id | ||
| /> | ||
| </div> | ||
| ); | ||
| }; | ||
| } | ||
| const SimpleExample = () => { | ||
| const box1 = { id: "box1", ref: useRef(null) }; | ||
| const box2 = { id: "box2", ref: useRef(null) }; | ||
| return ( | ||
| <React.Fragment> | ||
| <h3> | ||
| <u>Simple Example:</u> | ||
| </h3> | ||
| <div style={canvasStyle} id="canvas"> | ||
| <Box box={box1} /> | ||
| <Box box={box2} /> | ||
| <Xarrow | ||
| start="box1" //can be id | ||
| end={box2.ref} //or React ref | ||
| /> | ||
| </div> | ||
| </React.Fragment> | ||
| ); | ||
| }; | ||
| export default SimpleExample; | ||
@@ -94,3 +86,3 @@ ``` | ||
| the properties the xarrow component recieves is as follow(as listed in `xarrowPropsType` in /src/xarrow.d.ts): | ||
| the properties the xarrow component recieves is as follow(as listed in `xarrowPropsType` in /lib/xarrow.d.ts): | ||
@@ -150,7 +142,17 @@ ```jsx | ||
| can be a string that will default to be at the middle or an object that decribes where to place label and how to customize it. see `label` at `xarrowPropsType` above. | ||
| examples: | ||
| - `label="middleLabel"` | ||
| - `label={{ start:"I'm start label",middle: "middleLable",end:{text:"i'm custom end label",extra:{fill:"red"}} }}` | ||
| you can pass to `extra` most of the [svg presentation attributes](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation), with them you can custom your text how you realy wants. | ||
| use the suggestion of visual code(or your IDE) to see all possibilities. | ||
| #### color,lineColor and headColor | ||
| color defines color for all the arrow include head. if lineColor or headColor is given so it overides color specificaly for line or head. | ||
| examples: | ||
| - `headColor="red"` will change the color of the head of the arrow to red. | ||
| #### strokeWidth and headSize | ||
@@ -170,6 +172,10 @@ | ||
| if true default values(for dashness) are choosed. if object is passed then default values are choosed execpt what passed. | ||
| examples: | ||
| - `dashness={true}` will make the line of the arrow to be dashed. | ||
| - `dashness={{ strokeLen: 10, nonStrokeLen: 15, animation: -2 }}` will make a custom looking dashness | ||
| #### monitorDOMchanges | ||
| A boolean. set this property to true to add relevant eventListeners to the DOM so the xarrow component will update anchors position whenever needed(scroll and resize and so on)(experamential). | ||
| A boolean. set this property to true to add relevant eventListeners to the DOM so the xarrow component will update anchors position whenever needed(scroll and resize and so on). | ||
@@ -187,3 +193,3 @@ #### registerEvents | ||
| here i will provide some flexibility to the API for some cases that i may not thought of. | ||
| extendSVGcanvas will extend the svg canvas at all sides. can be usefull if for some reason the arrow(or labels) is cutted though to small svg canvas(should not happen since 1.1.4, if happens please subscribe an issue). | ||
| extendSVGcanvas will extend the svg canvas at all sides. can be usefull if for some reason the arrow(or labels) is cutted though to small svg canvas(should be used in advanced custom arrows, for example if you used `dx` to move one of the labels and at exceeded the canvas). | ||
@@ -228,1 +234,2 @@ ### default props | ||
| - 1.2.1 minor bug fix (intellij suggestinons did not apear) | ||
| - 1.2.2 bug fixes(1#changing anchors refs without remounting broke the arrow. 2#other minors) |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis 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
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Improved metrics
- Number of lines in readme file
- increased by3.17%
228
- Number of medium supply chain risk alerts
- decreased by-100%
0
Worsened metrics
- Total package byte prevSize
- decreased by-2.36%
70581
- Lines of code
- decreased by-8.3%
718
No dependency changes