feat(markers): add option to control orientation of markers

.release-it.json

@@ -7,6 +7,6 @@
   },
   "hooks": {
     "after:bump": "npm run build",
-    "after:release": "echo Successfully released ${name} v${version} to ${repo.repository}."
+    "after:release": "echo Successfully released ${name} v${version}."
   }
 }

example/src/Edges/index.tsx

@@ -41,33 +41,6 @@ const initialElements: Elements = [
   { id: 'e3-4', source: '3', target: '4', type: 'straight', label: 'straight edge' },
   { id: 'e3-3a', source: '3', target: '3a', type: 'straight', label: 'label only edge', style: { stroke: 'none' } },
   { id: 'e3-5', source: '4', target: '5', animated: true, label: 'animated styled edge', style: { stroke: 'red' } },
-  {
-    id: 'e5-6',
-    source: '5',
-    target: '6',
-    label: (
-      <>
-        <tspan>i am using</tspan>
-        <tspan dy={10} x={0}>
-          {'<tspan>'}
-        </tspan>
-      </>
-    ),
-    labelStyle: { fill: 'red', fontWeight: 700 },
-    style: { stroke: '#ffcc00' },
-    markerEnd: {
-      type: ArrowHeadType.Arrow,
-      color: '#FFCC00',
-      units: 'userSpaceOnUse',
-      width: 20,
-      height: 20,
-      strokeWidth: 2,
-    },
-    markerStart: {
-      type: ArrowHeadType.Arrow,
-      color: '#FFCC00',
-    },
-  },
   {
     id: 'e5-7',
     source: '5',
@@ -94,6 +67,37 @@ const initialElements: Elements = [
     type: 'custom2',
     data: { text: 'custom edge 2' },
   },
+  {
+    id: 'e5-6',
+    source: '5',
+    target: '6',
+    label: (
+      <>
+        <tspan>i am using</tspan>
+        <tspan dy={10} x={0}>
+          {'<tspan>'}
+        </tspan>
+      </>
+    ),
+    labelStyle: { fill: 'red', fontWeight: 700 },
+    style: { stroke: '#ffcc00' },
+    markerEnd: {
+      type: ArrowHeadType.Arrow,
+      color: '#FFCC00',
+      units: 'userSpaceOnUse',
+      width: 20,
+      height: 20,
+      strokeWidth: 2,
+    },
+    markerStart: {
+      type: ArrowHeadType.ArrowClosed,
+      color: '#FFCC00',
+      orient: 'auto-start-reverse',
+      units: 'userSpaceOnUse',
+      width: 20,
+      height: 20,
+    },
+  },
 ];
 
 const edgeTypes: EdgeTypesType = {

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "react-flow-renderer",
-  "version": "9.6.9",
+  "version": "10.0.0-next.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "react-flow-renderer",
-      "version": "9.6.9",
+      "version": "10.0.0-next.1",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.15.4",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-flow-renderer",
-  "version": "9.6.9",
+  "version": "10.0.0-next.1",
   "engines": {
     "node": ">=12"
   },
@@ -28,7 +28,7 @@
     "cy:open": "cypress open",
     "release": "npm run test && release-it",
     "release:notest": "release-it",
-    "release:next": "release-it --preRelease=next"
+    "release:next": "release-it --preRelease=next --no-git"
   },
   "dependencies": {
     "@babel/runtime": "^7.15.4",

src/container/EdgeRenderer/MarkerDefinitions.tsx

@@ -42,7 +42,16 @@ const markerSymbols = {
   [ArrowHeadType.ArrowClosed]: ArrowClosedSymbol,
 };
 
-const Marker = ({ id, type, color, width = 12.5, height = 12.5, units = 'strokeWidth', strokeWidth }: MarkerProps) => {
+const Marker = ({
+  id,
+  type,
+  color,
+  width = 12.5,
+  height = 12.5,
+  units = 'strokeWidth',
+  strokeWidth,
+  orient = 'auto',
+}: MarkerProps) => {
   const Symbol = markerSymbols[type];
 
   return (
@@ -53,7 +62,7 @@ const Marker = ({ id, type, color, width = 12.5, height = 12.5, units = 'strokeW
       markerWidth={`${width}`}
       markerHeight={`${height}`}
       viewBox="-10 -10 20 20"
-      orient="auto"
+      orient={orient}
       refX="0"
       refY="0"
     >
@@ -93,6 +102,7 @@ const MarkerDefinitions = ({ defaultColor }: MarkerDefinitionsProps) => {
           height={marker.height}
           units={marker.units}
           strokeWidth={marker.strokeWidth}
+          orient={marker.orient}
         />
       ))}
     </defs>

src/types/index.ts

@@ -62,7 +62,8 @@ export interface EdgeMarker {
   color?: string;
   width?: number;
   height?: number;
-  units?: 'userSpaceOnUse' | 'strokeWidth';
+  units?: string;
+  orient?: string;
   strokeWidth?: number;
 }