Fixes

• Add support for react 17 types https://github.com/pierpo/react-archer/pull/149 (thanks @bluemelodybox)

Fixes

• Add missing typescript definition: noCurves property for ArcherContainer was missing

Features

• You can now disable the end marker of the arrows, thanks @ThiloAschebrock! (https://github.com/pierpo/react-archer/pull/139)

Features

• Add React 17 support
• Add a new option to draw straight lines (many thanks to @oskari for the amazing job! https://github.com/pierpo/react-archer/pull/135)
• Add a new option to draw arrow markers on both ends of the arrow (thanks @oskari again! https://github.com/pierpo/react-archer/pull/134)

New features

• You can now use circles as arrow ends! Many thanks to @damonbauer for his amazing contribution! https://github.com/pierpo/react-archer/pull/111
• pointer-events are now set to none as default so that you can click through the SVG containers. Thank you @viztor! https://github.com/pierpo/react-archer/pull/107

Breaking changes

• If you've been using the default pointer-events value in your ArcherContainers, you may want to put back the previous default value:

 <ArcherContainer
+   svgContainerStyle={{ pointerEvents: 'auto' }}
 >
   {/* stuff */}
 </ArcherContainer>

• The arrow end styling API has changed. You should update them to fit the new API :blush:

 <ArcherElement
   id="root"
   relations={[
     {
       ...
       style: {
         strokeDasharray: "5,5",
-        arrowLength: 10,
-        arrowThickness: 20
+        endShape: {
+          arrow: {
+            arrowLength: 10,
+            arrowThickness: 20
+          }
         }
       }
     }
   ]}
>
  <div style={boxStyle}>Root</div>
</ArcherElement>;

Bugfixes/features

• You can now retrieve the Archer Context to have Archer Elements in an out-of-context component (it happens in some render functions). Many thanks to @jfo84 for this. Solves https://github.com/pierpo/react-archer/issues/100

Typescript

• Updated types

Breaking changes

:warning: Do not worry, you can put everything back to something strictly equivalent at what was here before.

No more multiple children to ArcherElement

You can no longer use multiple children elements for ArcherElement.

• If you really need multiple children, then you need to wrap them in a <div />. It used to be done like this internally but this was causing drawing issues, so now to achieve the same as before you should now wrap your elements yourself.

If your layout broke, try the following. We used to add an artificial div internally with ArcherElement, which has been removed. A quick fix is to add back the div yourself:

<ArcherElement>
-  <Content />
+  <div>
+    <Content />
+  </div>
</ArcherElement>

No more custom components as direct children of ArcherElement without tweaking

• You can no longer use custom components as a direct child of ArcherElement out of the box. Two fixes possible:
  • wrap it in a div, as mentioned above. Ok if it doesn't break your layout.
  • forward the reference of your component to the DOM element in your component that will act as a drawing reference. See below:

- const MyComponent = (props) => {
+ const MyComponent = React.forwardRef((props, ref) => {
   return (
-    <div>
+    <div ref={ref}>
       <span>fixed</span>
     </div>
   );
- };
+ });

// ...

<ArcherElement><MyComponent /></ArcherElement>

Bugfixes

• Solved an issue with arrows not drawing to the proper element #93
  • This was probably the root of many problems. If you had problems with arrows not drawing properly, try this new release :wink:

Renamed to release 2.0.0.

Bugfixes

• Fix Failed to execute 'unobserve' on 'ResizeObserver' error (https://github.com/pierpo/react-archer/issues/84)
• Fix arrowLength not working properly when value is 0