From 3b9ef4946ff92aef4ff501542e49dcb2c36b11c1 Mon Sep 17 00:00:00 2001
From: Thomas Simmer <thomas.simmer@hotmail.fr>
Date: Tue, 12 Mar 2024 17:41:05 +0100
Subject: [PATCH] Customize both end and start shapes + disabling system more
 explicit

---
 README.md                                     |  10 +-
 example/App.tsx                               |   6 +-
 example/EighthExample.tsx                     |   2 +-
 example/NinthExample.tsx                      |   4 +-
 example/TenthExample.tsx                      | 101 ++++++++++
 .../ArcherContainer.constants.ts              |   2 +-
 .../ArcherContainer.helpers.tsx               |  35 ++--
 src/ArcherContainer/ArcherContainer.tsx       |  25 ++-
 src/ArcherContainer/ArcherContainer.types.ts  |  15 +-
 .../__tests__/ArcherContainer.test.tsx        |  51 ++++-
 .../ArcherContainer.test.tsx.snap             | 129 +++++++++++--
 src/ArcherContainer/components/Markers.tsx    | 177 ++++++++++++------
 src/ArcherContainer/components/SvgArrows.tsx  |  27 +--
 src/SvgArrow/SvgArrow.test.tsx                |  21 ++-
 src/SvgArrow/SvgArrow.tsx                     |  29 ++-
 .../Archer-integration.test.tsx.snap          |  12 +-
 src/types.ts                                  |   5 +-
 17 files changed, 491 insertions(+), 160 deletions(-)
 create mode 100644 example/TenthExample.tsx

diff --git a/README.md b/README.md
index 7d29a67..5ee86dc 100644
--- a/README.md
+++ b/README.md
@@ -100,9 +100,10 @@ export default App;
 | `offset` | `number` | Optional number for space between element and start/end of stroke
 | `svgContainerStyle` | `Style` | Style of the SVG container element. Useful if you want to add a z-index to your SVG container to draw the arrows under your elements, for example.
 | `children` | `React.Node` |
+| `startShape` | `Object` | An object containing the props to configure the "start shape" of the arrow. Can be one of `arrow` (default) or `circle`. See [`ShapeType`](flow-typed/archer-types.js) for a complete list of available options.
 | `endShape` | `Object` | An object containing the props to configure the "end shape" of the arrow. Can be one of `arrow` (default) or `circle`. See [`ShapeType`](flow-typed/archer-types.js) for a complete list of available options.
-| `startMarker` | `boolean` | Optional flag (default `false`) to also add a marker at the start of the arrow.
-| `endMarker` | `boolean` | Optional flag (default `true`) to remove the marker at the end of the arrow.
+| `enableStartMarker` | `boolean` | Optional flag (default `false`) to also add a marker at the start of the arrow.
+| `enableEndMarker` | `boolean` | Optional flag (default `true`) to remove the marker at the end of the arrow.
 
 #### Instance methods
 
@@ -144,9 +145,10 @@ The `ArcherStyle` type has the following shape:
   strokeDasharray: number,
   noCurves: boolean,
   lineStyle: string,
+  startShape: Object,
   endShape: Object,
-  startMarker: boolean,
-  endMarker: boolean,
+  enableStartMarker: boolean,
+  enableEndMarker: boolean,
 }
 ```
 
diff --git a/example/App.tsx b/example/App.tsx
index cf5ad83..8e69807 100644
--- a/example/App.tsx
+++ b/example/App.tsx
@@ -8,6 +8,7 @@ import SixthExample from './SixthExample';
 import SeventhExample from './SeventhExample';
 import EighthExample from './EighthExample';
 import NinthExample from './NinthExample';
+import TenthExample from './TenthExample';
 
 const getExample = (id: number) => {
   switch (id) {
@@ -38,6 +39,9 @@ const getExample = (id: number) => {
     case 9:
       return NinthExample;
 
+    case 10:
+      return TenthExample;
+
     default:
       return SecondExample;
   }
@@ -54,7 +58,7 @@ const App = () => {
         <div>
           <h2>Example {exampleId}</h2>
           <p>Choose an example:</p>
-          {[...Array(9).keys()].map((value) => (
+          {[...Array(10).keys()].map((value) => (
             <button
               key={value}
               onClick={() => setExampleId(value + 1)}
diff --git a/example/EighthExample.tsx b/example/EighthExample.tsx
index aa9f326..23bf1f6 100644
--- a/example/EighthExample.tsx
+++ b/example/EighthExample.tsx
@@ -23,7 +23,7 @@ const FirstExample = () => {
         margin: '50px',
       }}
     >
-      <ArcherContainer strokeColor="red" lineStyle="straight" offset={0} startMarker>
+      <ArcherContainer strokeColor="red" lineStyle="straight" offset={0} enableStartMarker>
         <div style={rootStyle}>
           <ArcherElement
             id="root"
diff --git a/example/NinthExample.tsx b/example/NinthExample.tsx
index f1f802b..e1c5185 100644
--- a/example/NinthExample.tsx
+++ b/example/NinthExample.tsx
@@ -27,8 +27,8 @@ const FirstExample = () => {
         strokeColor="red"
         lineStyle="straight"
         offset={0}
-        startMarker
-        endMarker={false}
+        enableStartMarker
+        enableEndMarker={false}
       >
         <div style={rootStyle}>
           <ArcherElement
diff --git a/example/TenthExample.tsx b/example/TenthExample.tsx
new file mode 100644
index 0000000..b54ca33
--- /dev/null
+++ b/example/TenthExample.tsx
@@ -0,0 +1,101 @@
+import React from 'react';
+import ArcherContainer from '../src/ArcherContainer/ArcherContainer';
+import ArcherElement from '../src/ArcherElement/ArcherElement';
+const rootStyle = {
+  display: 'flex',
+  justifyContent: 'center',
+};
+const rowStyle = {
+  margin: '200px 0',
+  display: 'flex',
+  justifyContent: 'space-between',
+};
+const boxStyle = {
+  padding: '10px',
+  border: '1px solid black',
+};
+
+const TenthExample = () => {
+  return (
+    <div
+      style={{
+        height: '500px',
+        margin: '50px',
+      }}
+    >
+      <ArcherContainer strokeColor="red" lineStyle="straight" offset={0} enableStartMarker>
+        <div style={rootStyle}>
+          <ArcherElement
+            id="root"
+            relations={[
+              {
+                targetId: 'element2',
+                targetAnchor: 'top',
+                sourceAnchor: 'bottom',
+                style: {
+                  strokeDasharray: '5,5',
+                  startShape: {
+                    circle: {
+                      radius: 3,
+                    },
+                  },
+                },
+              },
+            ]}
+          >
+            <div style={boxStyle}>Root</div>
+          </ArcherElement>
+        </div>
+
+        <div style={rowStyle}>
+          <ArcherElement
+            id="element2"
+            relations={[
+              {
+                targetId: 'element3',
+                targetAnchor: 'left',
+                sourceAnchor: 'right',
+                style: {
+                  strokeColor: 'blue',
+                  strokeWidth: 1,
+                  enableStartMarker: false,
+                },
+                label: (
+                  <div
+                    style={{
+                      marginTop: '-20px',
+                    }}
+                  >
+                    Arrow 2
+                  </div>
+                ),
+              },
+            ]}
+          >
+            <div style={boxStyle}>Element 2</div>
+          </ArcherElement>
+
+          <ArcherElement id="element3">
+            <div style={boxStyle}>Element 3</div>
+          </ArcherElement>
+
+          <ArcherElement
+            id="element4"
+            relations={[
+              {
+                targetId: 'root',
+                targetAnchor: 'right',
+                sourceAnchor: 'left',
+                label: 'Arrow 3',
+              },
+            ]}
+          >
+            <div style={boxStyle}>Element 4</div>
+          </ArcherElement>
+        </div>
+      </ArcherContainer>
+    </div>
+  );
+};
+
+export default TenthExample;
diff --git a/src/ArcherContainer/ArcherContainer.constants.ts b/src/ArcherContainer/ArcherContainer.constants.ts
index 33aa203..71cc544 100644
--- a/src/ArcherContainer/ArcherContainer.constants.ts
+++ b/src/ArcherContainer/ArcherContainer.constants.ts
@@ -1,4 +1,4 @@
-export const endShapeDefaultProp = {
+export const shapeDefaultProp = {
   arrow: {
     arrowLength: 10,
     arrowThickness: 6,
diff --git a/src/ArcherContainer/ArcherContainer.helpers.tsx b/src/ArcherContainer/ArcherContainer.helpers.tsx
index a32c57c..c706832 100644
--- a/src/ArcherContainer/ArcherContainer.helpers.tsx
+++ b/src/ArcherContainer/ArcherContainer.helpers.tsx
@@ -1,21 +1,26 @@
 import {
-  ValidShapeTypes,
+  EntityRelationType,
   LineType,
-  SourceToTargetType,
   ShapeType,
-  EntityRelationType,
+  SourceToTargetType,
+  ValidShapeTypes,
 } from '../types';
 import { SourceToTargetsArrayType } from './ArcherContainer.types';
 
 const possibleShapes: Array<ValidShapeTypes> = ['arrow', 'circle'];
 
-export const getEndShapeFromStyle = (shapeObj: LineType) => {
-  if (!shapeObj.endShape) {
+export const getShapeStyleFromShape = (style: LineType, isStartShape: boolean) => {
+  return isStartShape ? style.startShape : style.endShape;
+};
+
+export const getShapeFromStyle = (shapeObj: LineType, isStartShape: boolean) => {
+  const shapeStyle = getShapeStyleFromShape(shapeObj, isStartShape);
+  if (!shapeStyle) {
     return possibleShapes[0];
   }
 
   return (
-    (Object.keys(shapeObj.endShape) as ValidShapeTypes[]).filter((key) =>
+    (Object.keys(shapeStyle) as ValidShapeTypes[]).filter((key) =>
       possibleShapes.includes(key),
     )[0] || possibleShapes[0]
   );
@@ -34,23 +39,24 @@ export const getSourceToTargets = (
     .sort((a, b) => a.order - b.order);
 };
 
-export const createShapeObj = (style: LineType, endShape: ShapeType) => {
-  const chosenEndShape = getEndShapeFromStyle(style);
+export const createShapeObj = (style: LineType, shape: ShapeType, isStartShape: boolean) => {
+  const chosenShape = getShapeFromStyle(style, isStartShape);
+  const shapeStyle = getShapeStyleFromShape(style, isStartShape);
   const shapeObjMap = {
     arrow: () => ({
       arrow: {
-        ...endShape?.arrow,
-        ...style.endShape?.arrow,
+        ...shape?.arrow,
+        ...shapeStyle?.arrow,
       },
     }),
     circle: () => ({
       circle: {
-        ...endShape?.circle,
-        ...style.endShape?.circle,
+        ...shape?.circle,
+        ...shapeStyle?.circle,
       },
     }),
   };
-  return shapeObjMap[chosenEndShape]();
+  return shapeObjMap[chosenShape]();
 };
 
 /** Generates an id for an arrow marker
@@ -61,6 +67,7 @@ export const getMarkerId = (
   uniqueId: string,
   source: EntityRelationType,
   target: EntityRelationType,
+  isStartShape: boolean,
 ): string => {
-  return `${uniqueId}${source.id}${target.id}`;
+  return `${uniqueId}${source.id}${target.id}-${isStartShape ? 'start' : 'end'}`;
 };
diff --git a/src/ArcherContainer/ArcherContainer.tsx b/src/ArcherContainer/ArcherContainer.tsx
index b5da4b3..edd82f2 100644
--- a/src/ArcherContainer/ArcherContainer.tsx
+++ b/src/ArcherContainer/ArcherContainer.tsx
@@ -1,16 +1,16 @@
 import React, { useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import ResizeObserver from 'resize-observer-polyfill';
 import { SourceToTargetType } from '../types';
+import { shapeDefaultProp } from './ArcherContainer.constants';
 import { ArcherContainerContext, ArcherContainerContextProvider } from './ArcherContainer.context';
+import { useObserveElements, useResizeListener } from './ArcherContainer.hooks';
 import {
-  SourceToTargetsArrayType,
-  ArcherContainerProps,
   ArcherContainerHandle,
+  ArcherContainerProps,
+  SourceToTargetsArrayType,
 } from './ArcherContainer.types';
-import { SvgArrows } from './components/SvgArrows';
-import { endShapeDefaultProp } from './ArcherContainer.constants';
 import { ArrowMarkers } from './components/Markers';
-import { useObserveElements, useResizeListener } from './ArcherContainer.hooks';
+import { SvgArrows } from './components/SvgArrows';
 
 const defaultSvgContainerStyle = {
   position: 'absolute',
@@ -24,17 +24,18 @@ const defaultSvgContainerStyle = {
 const ArcherContainer = React.forwardRef<ArcherContainerHandle, ArcherContainerProps>(
   (
     {
-      endShape = endShapeDefaultProp,
+      startShape = shapeDefaultProp,
+      endShape = shapeDefaultProp,
       strokeColor = '#f00',
       strokeWidth = 2,
       svgContainerStyle = {},
+      enableStartMarker = false,
+      enableEndMarker = true,
       noCurves,
       children,
       className,
-      endMarker,
       lineStyle,
       offset,
-      startMarker,
       strokeDasharray,
       style,
     }: ArcherContainerProps,
@@ -145,6 +146,9 @@ const ArcherContainer = React.forwardRef<ArcherContainerHandle, ArcherContainerP
           <svg style={_svgContainerStyle}>
             <defs>
               <ArrowMarkers
+                enableStartMarker={enableStartMarker}
+                enableEndMarker={enableEndMarker}
+                startShape={startShape}
                 endShape={endShape}
                 sourceToTargetsMap={sourceToTargetsMap}
                 strokeColor={strokeColor}
@@ -152,8 +156,9 @@ const ArcherContainer = React.forwardRef<ArcherContainerHandle, ArcherContainerP
               />
             </defs>
             <SvgArrows
-              startMarker={startMarker}
-              endMarker={endMarker}
+              enableStartMarker={enableStartMarker}
+              enableEndMarker={enableEndMarker}
+              startShape={startShape}
               endShape={endShape}
               strokeColor={strokeColor}
               strokeWidth={strokeWidth}
diff --git a/src/ArcherContainer/ArcherContainer.types.ts b/src/ArcherContainer/ArcherContainer.types.ts
index fc3c17e..c5c461f 100644
--- a/src/ArcherContainer/ArcherContainer.types.ts
+++ b/src/ArcherContainer/ArcherContainer.types.ts
@@ -1,4 +1,4 @@
-import { ShapeType, ValidLineStyles, SourceToTargetType } from '../types';
+import { ShapeType, SourceToTargetType, ValidLineStyles } from '../types';
 import { ArcherContainerContextType } from './ArcherContainer.context';
 
 type FunctionChild = (context: React.Context<ArcherContainerContextType | null>) => React.ReactNode;
@@ -36,20 +36,25 @@ export type ArcherContainerProps = {
    */
   offset?: number;
 
+  /**
+   * Customize the start shape of the line. Defaults to a traditional "arrow" (triangle) shape.
+   */
+  startShape?: ShapeType;
+
   /**
    * Customize the end shape of the line. Defaults to a traditional "arrow" (triangle) shape.
    */
   endShape?: ShapeType;
 
   /**
-   * Set this to true of you want to render a marker at the start of the line
+   * Set this to true if you want to render a marker at the start of the line
    */
-  startMarker?: boolean;
+  enableStartMarker?: boolean;
 
   /**
-   * Set this to false of you do not want to render a marker at the end of the line
+   * Set this to true if you want to render a marker at the end of the line
    */
-  endMarker?: boolean;
+  enableEndMarker?: boolean;
 
   /**
    * Define how the line is drawn, grid for angles, straight for direct line and curve for curves
diff --git a/src/ArcherContainer/__tests__/ArcherContainer.test.tsx b/src/ArcherContainer/__tests__/ArcherContainer.test.tsx
index 65bfb9b..a845aff 100644
--- a/src/ArcherContainer/__tests__/ArcherContainer.test.tsx
+++ b/src/ArcherContainer/__tests__/ArcherContainer.test.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
 import { render } from '@testing-library/react';
-import ArcherContainer from '../ArcherContainer';
-import ArcherElement from '../../ArcherElement/ArcherElement';
+import React from 'react';
 import { act } from 'react-dom/test-utils';
+import ArcherElement from '../../ArcherElement/ArcherElement';
+import ArcherContainer from '../ArcherContainer';
 
 const originalConsoleWarn = console.warn;
 
@@ -91,7 +91,7 @@ describe('ArcherContainer', () => {
 
     it('should render the arrow on both ends', () => {
       const screen = render(
-        <ArcherContainer startMarker>
+        <ArcherContainer enableStartMarker>
           <ArcherElement
             id="elem-left"
             relations={[
@@ -114,7 +114,7 @@ describe('ArcherContainer', () => {
 
     it('should render an arrow with className', () => {
       const screen = render(
-        <ArcherContainer startMarker>
+        <ArcherContainer enableStartMarker>
           <ArcherElement
             id="elem-left"
             relations={[
@@ -138,7 +138,7 @@ describe('ArcherContainer', () => {
 
     it('should render the arrows with labels', () => {
       const screen = render(
-        <ArcherContainer startMarker endMarker={false}>
+        <ArcherContainer enableStartMarker enableEndMarker={false}>
           <ArcherElement
             id="elem-left"
             relations={[
@@ -162,7 +162,7 @@ describe('ArcherContainer', () => {
 
     it('should render the arrow only at start', () => {
       const screen = render(
-        <ArcherContainer startMarker endMarker={false}>
+        <ArcherContainer enableStartMarker enableEndMarker={false}>
           <ArcherElement
             id="elem-left"
             relations={[
@@ -187,7 +187,7 @@ describe('ArcherContainer', () => {
       console.warn = jest.fn();
 
       const screen = render(
-        <ArcherContainer startMarker endMarker={false}>
+        <ArcherContainer enableStartMarker enableEndMarker={false}>
           <ArcherElement
             id="elem-left"
             relations={[
@@ -211,12 +211,45 @@ describe('ArcherContainer', () => {
         expect.stringMatching('Could not find target element'),
       );
     });
+
+    it('should render the arrow at start with a circle end when provided and at end with a triangle when not provided', () => {
+      const screen = render(
+        <ArcherContainer enableStartMarker>
+          <ArcherElement
+            id="elem-left"
+            relations={[
+              {
+                sourceAnchor: 'left',
+                targetAnchor: 'right',
+                targetId: 'elem-right',
+                style: {
+                  startShape: {
+                    circle: {
+                      radius: 11,
+                      strokeWidth: 2,
+                      strokeColor: 'tomato',
+                      fillColor: '#c0ffee',
+                    },
+                  },
+                },
+              },
+            ]}
+          >
+            <div>element 1</div>
+          </ArcherElement>
+          <ArcherElement id="elem-right">
+            <div>element 2</div>
+          </ArcherElement>
+        </ArcherContainer>,
+      );
+      expect(screen.baseElement).toMatchSnapshot();
+    });
   });
 
   describe('Event Listeners', () => {
     it('should move elements on window resize', () => {
       const screen = render(
-        <ArcherContainer startMarker endMarker={false}>
+        <ArcherContainer enableStartMarker enableEndMarker={false}>
           <div
             style={{
               display: 'flex',
diff --git a/src/ArcherContainer/__tests__/__snapshots__/ArcherContainer.test.tsx.snap b/src/ArcherContainer/__tests__/__snapshots__/ArcherContainer.test.tsx.snap
index 1b6ee36..8eee42b 100644
--- a/src/ArcherContainer/__tests__/__snapshots__/ArcherContainer.test.tsx.snap
+++ b/src/ArcherContainer/__tests__/__snapshots__/ArcherContainer.test.tsx.snap
@@ -11,7 +11,21 @@ exports[`ArcherContainer rendering an svg with the marker element used to draw a
       >
         <defs>
           <marker
-            id="arrow00001elem-leftelem-right"
+            id="arrow00001elem-leftelem-right-start"
+            markerHeight="6"
+            markerUnits="strokeWidth"
+            markerWidth="10"
+            orient="auto-start-reverse"
+            refX="0"
+            refY="3"
+          >
+            <path
+              d="M0,0 L0,6 L10,3 z"
+              fill="#f00"
+            />
+          </marker>
+          <marker
+            id="arrow00001elem-leftelem-right-end"
             markerHeight="6"
             markerUnits="strokeWidth"
             markerWidth="10"
@@ -30,8 +44,8 @@ exports[`ArcherContainer rendering an svg with the marker element used to draw a
         >
           <path
             d="M-20,0 C0,0 0,0 20,0"
-            marker-end="url(#arrow00001elem-leftelem-right)"
-            marker-start="url(#arrow00001elem-leftelem-right)"
+            marker-end="url(#arrow00001elem-leftelem-right-end)"
+            marker-start="url(#arrow00001elem-leftelem-right-start)"
             style="fill: none; stroke: #f00; stroke-width: 2;"
           />
         </g>
@@ -62,7 +76,7 @@ exports[`ArcherContainer rendering an svg with the marker element used to draw a
       >
         <defs>
           <marker
-            id="arrow00001elem-leftoh_20no"
+            id="arrow00001elem-leftoh_20no-start"
             markerHeight="6"
             markerUnits="strokeWidth"
             markerWidth="10"
@@ -103,7 +117,7 @@ exports[`ArcherContainer rendering an svg with the marker element used to draw a
       >
         <defs>
           <marker
-            id="arrow00001elem-leftelem-right"
+            id="arrow00001elem-leftelem-right-end"
             markerHeight="6"
             markerUnits="strokeWidth"
             markerWidth="10"
@@ -120,7 +134,7 @@ exports[`ArcherContainer rendering an svg with the marker element used to draw a
         <g>
           <path
             d="M0,0 C10,0 10,0 20,0"
-            marker-end="url(#arrow00001elem-leftelem-right)"
+            marker-end="url(#arrow00001elem-leftelem-right-end)"
             style="fill: none; stroke: #f00; stroke-width: 2;"
           />
         </g>
@@ -151,7 +165,21 @@ exports[`ArcherContainer rendering an svg with the marker element used to draw a
       >
         <defs>
           <marker
-            id="arrow00001elem-leftelem-right"
+            id="arrow00001elem-leftelem-right-start"
+            markerHeight="6"
+            markerUnits="strokeWidth"
+            markerWidth="10"
+            orient="auto-start-reverse"
+            refX="0"
+            refY="3"
+          >
+            <path
+              d="M0,0 L0,6 L10,3 z"
+              fill="#f00"
+            />
+          </marker>
+          <marker
+            id="arrow00001elem-leftelem-right-end"
             markerHeight="6"
             markerUnits="strokeWidth"
             markerWidth="10"
@@ -168,8 +196,8 @@ exports[`ArcherContainer rendering an svg with the marker element used to draw a
         <g>
           <path
             d="M-20,0 C0,0 0,0 20,0"
-            marker-end="url(#arrow00001elem-leftelem-right)"
-            marker-start="url(#arrow00001elem-leftelem-right)"
+            marker-end="url(#arrow00001elem-leftelem-right-end)"
+            marker-start="url(#arrow00001elem-leftelem-right-start)"
             style="fill: none; stroke: #f00; stroke-width: 2;"
           />
         </g>
@@ -200,7 +228,7 @@ exports[`ArcherContainer rendering an svg with the marker element used to draw a
       >
         <defs>
           <marker
-            id="arrow00001elem-leftelem-right"
+            id="arrow00001elem-leftelem-right-start"
             markerHeight="6"
             markerUnits="strokeWidth"
             markerWidth="10"
@@ -217,7 +245,7 @@ exports[`ArcherContainer rendering an svg with the marker element used to draw a
         <g>
           <path
             d="M-20,0 C-10,0 -10,0 0,0"
-            marker-start="url(#arrow00001elem-leftelem-right)"
+            marker-start="url(#arrow00001elem-leftelem-right-start)"
             style="fill: none; stroke: #f00; stroke-width: 2;"
           />
         </g>
@@ -248,7 +276,7 @@ exports[`ArcherContainer rendering an svg with the marker element used to draw a
       >
         <defs>
           <marker
-            id="arrow00001elem-leftelem-right"
+            id="arrow00001elem-leftelem-right-end"
             markerHeight="44"
             markerUnits="strokeWidth"
             markerWidth="44"
@@ -269,7 +297,7 @@ exports[`ArcherContainer rendering an svg with the marker element used to draw a
         <g>
           <path
             d="M0,0 C11,0 11,0 22,0"
-            marker-end="url(#arrow00001elem-leftelem-right)"
+            marker-end="url(#arrow00001elem-leftelem-right-end)"
             style="fill: none; stroke: #f00; stroke-width: 2;"
           />
         </g>
@@ -300,7 +328,7 @@ exports[`ArcherContainer rendering an svg with the marker element used to draw a
       >
         <defs>
           <marker
-            id="arrow00001elem-rightelem-left"
+            id="arrow00001elem-rightelem-left-end"
             markerHeight="6"
             markerUnits="strokeWidth"
             markerWidth="10"
@@ -317,7 +345,7 @@ exports[`ArcherContainer rendering an svg with the marker element used to draw a
         <g>
           <path
             d="M0,0 C-10,0 -10,0 -20,0"
-            marker-end="url(#arrow00001elem-rightelem-left)"
+            marker-end="url(#arrow00001elem-rightelem-left-end)"
             style="fill: none; stroke: #f00; stroke-width: 2;"
           />
         </g>
@@ -348,7 +376,7 @@ exports[`ArcherContainer rendering an svg with the marker element used to draw a
       >
         <defs>
           <marker
-            id="arrow00001elem-leftelem-right"
+            id="arrow00001elem-leftelem-right-start"
             markerHeight="6"
             markerUnits="strokeWidth"
             markerWidth="10"
@@ -365,7 +393,7 @@ exports[`ArcherContainer rendering an svg with the marker element used to draw a
         <g>
           <path
             d="M-20,0 C-10,0 -10,0 0,0"
-            marker-start="url(#arrow00001elem-leftelem-right)"
+            marker-start="url(#arrow00001elem-leftelem-right-start)"
             style="fill: none; stroke: #f00; stroke-width: 2;"
           />
           <foreignobject
@@ -401,3 +429,70 @@ exports[`ArcherContainer rendering an svg with the marker element used to draw a
   </div>
 </body>
 `;
+
+exports[`ArcherContainer rendering an svg with the marker element used to draw an svg arrow should render the arrow at start with a circle end when provided and at end with a triangle when not provided 1`] = `
+<body>
+  <div>
+    <div
+      style="position: relative;"
+    >
+      <svg
+        style="position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; pointer-events: none;"
+      >
+        <defs>
+          <marker
+            id="arrow00001elem-leftelem-right-start"
+            markerHeight="44"
+            markerUnits="strokeWidth"
+            markerWidth="44"
+            orient="auto-start-reverse"
+            refX="24"
+            refY="22"
+          >
+            <circle
+              cx="22"
+              cy="22"
+              fill="#c0ffee"
+              r="11"
+              stroke="tomato"
+              stroke-width="2"
+            />
+          </marker>
+          <marker
+            id="arrow00001elem-leftelem-right-end"
+            markerHeight="6"
+            markerUnits="strokeWidth"
+            markerWidth="10"
+            orient="auto-start-reverse"
+            refX="0"
+            refY="3"
+          >
+            <path
+              d="M0,0 L0,6 L10,3 z"
+              fill="#f00"
+            />
+          </marker>
+        </defs>
+        <g>
+          <path
+            d="M-22,0 C-1,0 -1,0 20,0"
+            marker-end="url(#arrow00001elem-leftelem-right-end)"
+            marker-start="url(#arrow00001elem-leftelem-right-start)"
+            style="fill: none; stroke: #f00; stroke-width: 2;"
+          />
+        </g>
+      </svg>
+      <div
+        style="height: 100%;"
+      >
+        <div>
+          element 1
+        </div>
+        <div>
+          element 2
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+`;
diff --git a/src/ArcherContainer/components/Markers.tsx b/src/ArcherContainer/components/Markers.tsx
index eca8f71..c6ee30e 100644
--- a/src/ArcherContainer/components/Markers.tsx
+++ b/src/ArcherContainer/components/Markers.tsx
@@ -1,29 +1,34 @@
 import React from 'react';
-import { LineType, ShapeType, SourceToTargetType } from '../../types';
-import { endShapeDefaultProp } from '../ArcherContainer.constants';
-import { getEndShapeFromStyle, getSourceToTargets, getMarkerId } from '../ArcherContainer.helpers';
+import { EntityRelationType, LineType, ShapeType, SourceToTargetType } from '../../types';
+import { shapeDefaultProp } from '../ArcherContainer.constants';
+import {
+  getMarkerId,
+  getShapeFromStyle,
+  getShapeStyleFromShape,
+  getSourceToTargets,
+} from '../ArcherContainer.helpers';
 import { SourceToTargetsArrayType } from '../ArcherContainer.types';
 
-const circleMarker = (style: LineType, endShape: ShapeType) => () => {
+const circleMarker = (style: LineType, isStartShape: boolean, shape: ShapeType) => () => {
   // TODO idea to merge params: we could use a deep merge function that keeps the first non-undefined values obtained
 
+  const shapeStyle = getShapeStyleFromShape(style, isStartShape);
+
   const radius =
-    style.endShape?.circle?.radius || endShape.circle?.radius || endShapeDefaultProp.circle.radius;
+    shapeStyle?.circle?.radius || shape.circle?.radius || shapeDefaultProp.circle.radius;
 
   const strokeWidth =
-    style.endShape?.circle?.strokeWidth ||
-    endShape.circle?.strokeWidth ||
-    endShapeDefaultProp.circle.strokeWidth;
+    shapeStyle?.circle?.strokeWidth ||
+    shape.circle?.strokeWidth ||
+    shapeDefaultProp.circle.strokeWidth;
 
   const strokeColor =
-    style.endShape?.circle?.strokeColor ||
-    endShape.circle?.strokeColor ||
-    endShapeDefaultProp.circle.strokeColor;
+    shapeStyle?.circle?.strokeColor ||
+    shape.circle?.strokeColor ||
+    shapeDefaultProp.circle.strokeColor;
 
   const fillColor =
-    style.endShape?.circle?.fillColor ||
-    endShape.circle?.fillColor ||
-    endShapeDefaultProp.circle.fillColor;
+    shapeStyle?.circle?.fillColor || shape.circle?.fillColor || shapeDefaultProp.circle.fillColor;
 
   return {
     markerWidth: radius * 4,
@@ -43,35 +48,39 @@ const circleMarker = (style: LineType, endShape: ShapeType) => () => {
   };
 };
 
-const arrowMarker = (style: LineType, endShape: ShapeType, strokeColor: string) => () => {
-  const newStrokeColor = style.strokeColor || strokeColor;
-  const newArrowLength =
-    style.endShape?.arrow?.arrowLength ??
-    endShape?.arrow?.arrowLength ??
-    endShapeDefaultProp.arrow.arrowLength;
-  const newArrowThickness =
-    style.endShape?.arrow?.arrowThickness ||
-    endShape?.arrow?.arrowThickness ||
-    endShapeDefaultProp.arrow.arrowThickness;
-  const arrowPath = `M0,0 L0,${newArrowThickness} L${newArrowLength},${newArrowThickness / 2} z`;
+const arrowMarker =
+  (style: LineType, isStartShape: boolean, shape: ShapeType, strokeColor: string) => () => {
+    const shapeStyle = getShapeStyleFromShape(style, isStartShape);
+    const newStrokeColor = style.strokeColor || strokeColor;
+    const newArrowLength =
+      shapeStyle?.arrow?.arrowLength ??
+      shape?.arrow?.arrowLength ??
+      shapeDefaultProp.arrow.arrowLength;
+    const newArrowThickness =
+      shapeStyle?.arrow?.arrowThickness ||
+      shape?.arrow?.arrowThickness ||
+      shapeDefaultProp.arrow.arrowThickness;
+    const arrowPath = `M0,0 L0,${newArrowThickness} L${newArrowLength},${newArrowThickness / 2} z`;
 
-  return {
-    markerWidth: newArrowLength,
-    markerHeight: newArrowThickness,
-    refX: 0,
-    refY: newArrowThickness / 2,
-    path: <path d={arrowPath} fill={newStrokeColor} />,
+    return {
+      markerWidth: newArrowLength,
+      markerHeight: newArrowThickness,
+      refX: 0,
+      refY: newArrowThickness / 2,
+      path: <path d={arrowPath} fill={newStrokeColor} />,
+    };
   };
-};
 
 const buildShape = ({
   style,
+  isStartShape,
   strokeColor,
-  endShape,
+  shape,
 }: {
   style: LineType;
+  isStartShape: boolean;
   strokeColor: string;
-  endShape: ShapeType;
+  shape: ShapeType;
 }): {
   markerHeight: number;
   markerWidth: number;
@@ -79,13 +88,53 @@ const buildShape = ({
   refX: number;
   refY: number;
 } => {
-  const chosenEndShape = getEndShapeFromStyle(style);
+  const chosenShape = getShapeFromStyle(style, isStartShape);
 
   const shapeMap = {
-    circle: circleMarker(style, endShape),
-    arrow: arrowMarker(style, endShape, strokeColor),
+    circle: circleMarker(style, isStartShape, shape),
+    arrow: arrowMarker(style, isStartShape, shape, strokeColor),
   };
-  return shapeMap[chosenEndShape]();
+  return shapeMap[chosenShape]();
+};
+
+const buildMarker = ({
+  style,
+  isStartShape,
+  strokeColor,
+  shape,
+  uniqueId,
+  source,
+  target,
+}: {
+  style: LineType;
+  isStartShape: boolean;
+  strokeColor: string;
+  shape: ShapeType;
+  uniqueId: string;
+  source: EntityRelationType;
+  target: EntityRelationType;
+}) => {
+  const { markerWidth, markerHeight, path, refX, refY } = buildShape({
+    style,
+    isStartShape,
+    strokeColor,
+    shape,
+  });
+
+  return (
+    <marker
+      id={getMarkerId(uniqueId, source, target, isStartShape)}
+      key={getMarkerId(uniqueId, source, target, isStartShape)}
+      markerWidth={markerWidth}
+      markerHeight={markerHeight}
+      refX={refX}
+      refY={refY}
+      orient="auto-start-reverse"
+      markerUnits="strokeWidth"
+    >
+      {path}
+    </marker>
+  );
 };
 
 /** Generates all the markers
@@ -93,12 +142,18 @@ const buildShape = ({
  * a different color or size
  * */
 export const ArrowMarkers = ({
+  enableStartMarker,
+  enableEndMarker,
   sourceToTargetsMap,
+  startShape,
   endShape,
   strokeColor,
   uniqueId,
 }: {
+  enableStartMarker: boolean;
+  enableEndMarker: boolean;
   sourceToTargetsMap: Record<string, SourceToTargetsArrayType>;
+  startShape: ShapeType;
   endShape: ShapeType;
   strokeColor: string;
   uniqueId: string;
@@ -106,28 +161,30 @@ export const ArrowMarkers = ({
   return (
     <>
       {getSourceToTargets(sourceToTargetsMap).map(
-        ({ source, target, style = {} }: SourceToTargetType) => {
-          const { markerHeight, markerWidth, path, refX, refY } = buildShape({
-            style,
-            endShape,
-            strokeColor,
-          });
-
-          return (
-            <marker
-              id={getMarkerId(uniqueId, source, target)}
-              key={getMarkerId(uniqueId, source, target)}
-              markerWidth={markerWidth}
-              markerHeight={markerHeight}
-              refX={refX}
-              refY={refY}
-              orient="auto-start-reverse"
-              markerUnits="strokeWidth"
-            >
-              {path}
-            </marker>
-          );
-        },
+        ({ source, target, style = {} }: SourceToTargetType, index: number) => (
+          <React.Fragment key={`${uniqueId}-${index}`}>
+            {enableStartMarker &&
+              buildMarker({
+                shape: startShape,
+                isStartShape: true,
+                style,
+                strokeColor,
+                uniqueId,
+                source,
+                target,
+              })}
+            {enableEndMarker &&
+              buildMarker({
+                shape: endShape,
+                isStartShape: false,
+                style,
+                strokeColor,
+                uniqueId,
+                source,
+                target,
+              })}
+          </React.Fragment>
+        ),
       )}
     </>
   );
diff --git a/src/ArcherContainer/components/SvgArrows.tsx b/src/ArcherContainer/components/SvgArrows.tsx
index c6ed4a4..9846fb2 100644
--- a/src/ArcherContainer/components/SvgArrows.tsx
+++ b/src/ArcherContainer/components/SvgArrows.tsx
@@ -1,17 +1,18 @@
 import React from 'react';
+import SvgArrow from '../../SvgArrow/SvgArrow';
 import Vector2 from '../../geometry/Vector2';
 import {
   getPointCoordinatesFromAnchorPosition,
   getPointFromElement,
 } from '../../geometry/rectHelper';
-import SvgArrow from '../../SvgArrow/SvgArrow';
 import { SourceToTargetType } from '../../types';
 import { createShapeObj, getMarkerId, getSourceToTargets } from '../ArcherContainer.helpers';
 import { ArcherContainerProps, SourceToTargetsArrayType } from '../ArcherContainer.types';
 
 interface CommonProps {
-  startMarker: ArcherContainerProps['startMarker'];
-  endMarker: ArcherContainerProps['endMarker'];
+  enableStartMarker: ArcherContainerProps['enableStartMarker'];
+  enableEndMarker: ArcherContainerProps['enableEndMarker'];
+  startShape: NonNullable<ArcherContainerProps['startShape']>;
   endShape: NonNullable<ArcherContainerProps['endShape']>;
   strokeColor: NonNullable<ArcherContainerProps['strokeColor']>;
   strokeWidth: NonNullable<ArcherContainerProps['strokeWidth']>;
@@ -30,10 +31,11 @@ const AdaptedArrow = (
     },
 ) => {
   const style = props.style || {};
-  const newStartMarker = style.startMarker || props.startMarker;
-  const newEndMarker = style.endMarker ?? props.endMarker ?? true;
+  const enableStartMarker = style.enableStartMarker ?? props.enableStartMarker ?? false;
+  const enableEndMarker = style.enableEndMarker ?? props.enableEndMarker ?? true;
 
-  const newEndShape = createShapeObj(style, props.endShape);
+  const newStartShape = createShapeObj(style, props.startShape, true);
+  const newEndShape = createShapeObj(style, props.endShape, false);
 
   const newStrokeColor = style.strokeColor || props.strokeColor;
   const newStrokeWidth = style.strokeWidth || props.strokeWidth;
@@ -80,11 +82,13 @@ const AdaptedArrow = (
       strokeWidth={newStrokeWidth}
       strokeDasharray={newStrokeDasharray}
       arrowLabel={props.label}
-      arrowMarkerId={getMarkerId(props.uniqueId, props.source, props.target)}
+      startArrowMarkerId={getMarkerId(props.uniqueId, props.source, props.target, true)}
+      endArrowMarkerId={getMarkerId(props.uniqueId, props.source, props.target, false)}
       lineStyle={newLineStyle}
       offset={newOffset}
-      enableStartMarker={!!newStartMarker}
-      disableEndMarker={!newEndMarker}
+      enableStartMarker={enableStartMarker}
+      enableEndMarker={enableEndMarker}
+      startShape={newStartShape}
       endShape={newEndShape}
     />
   );
@@ -116,8 +120,9 @@ export const SvgArrows = (
           className={currentRelation.className}
           label={currentRelation.label}
           style={currentRelation.style || {}}
-          startMarker={props.startMarker}
-          endMarker={props.endMarker}
+          enableStartMarker={props.enableStartMarker}
+          enableEndMarker={props.enableEndMarker}
+          startShape={props.startShape}
           endShape={props.endShape}
           strokeColor={props.strokeColor}
           strokeWidth={props.strokeWidth}
diff --git a/src/SvgArrow/SvgArrow.test.tsx b/src/SvgArrow/SvgArrow.test.tsx
index 0939514..bf91d86 100644
--- a/src/SvgArrow/SvgArrow.test.tsx
+++ b/src/SvgArrow/SvgArrow.test.tsx
@@ -1,12 +1,12 @@
+import { render } from '@testing-library/react';
 import React from 'react';
+import Vector2 from '../geometry/Vector2';
 import SvgArrow, {
   computeArrowPointAccordingToArrowHead,
-  computeStartingAnchorPosition,
   computeEndingAnchorPosition,
   computeLabelDimensions,
+  computeStartingAnchorPosition,
 } from './SvgArrow';
-import Vector2 from '../geometry/Vector2';
-import { render } from '@testing-library/react';
 
 const expectAttribute = (attributes: NamedNodeMap, key: string, expectedValue: string) => {
   expect(attributes?.getNamedItem(key)?.value).toEqual(expectedValue);
@@ -231,13 +231,20 @@ describe('SvgArrow', () => {
       endingAnchorOrientation: 'top',
       strokeColor: 'blue',
       strokeWidth: 2,
-      arrowMarkerId: 'arrow123123',
+      startArrowMarkerId: 'arrow123123-start',
+      endArrowMarkerId: 'arrow123123-end',
       lineStyle: 'curve',
       endShape: {
         arrow: {
           arrowLength: 10,
         },
       },
+      startShape: {
+        arrow: {
+          arrowLength: 10,
+        },
+      },
+      enableEndMarker: true,
     } as const;
 
     it('should render path with proper coordinates', () => {
@@ -249,7 +256,7 @@ describe('SvgArrow', () => {
       const path = getBySelector('path');
       const attributes = path?.attributes;
       expectAttribute(attributes, 'd', 'M10,10 C10,10 30,10 30,10');
-      expectAttribute(attributes, 'marker-end', 'url(#arrow123123)');
+      expectAttribute(attributes, 'marker-end', 'url(#arrow123123-end)');
       expectAttribute(attributes, 'style', 'fill: none; stroke: blue; stroke-width: 2;');
     });
 
@@ -263,7 +270,7 @@ describe('SvgArrow', () => {
       const path = getBySelector('path');
       const attributes = path?.attributes;
       expectAttribute(attributes, 'd', 'M10,10 C10,10 30,10 30,10');
-      expectAttribute(attributes, 'marker-end', 'url(#arrow123123)');
+      expectAttribute(attributes, 'marker-end', 'url(#arrow123123-end)');
       expectAttribute(attributes, 'style', 'fill: none; stroke: blue; stroke-width: 2;');
     });
 
@@ -276,7 +283,7 @@ describe('SvgArrow', () => {
       const path = getBySelector('path');
       const attributes = path?.attributes;
       expectAttribute(attributes, 'd', 'M10,10 15.85786437626905,15.857864376269049');
-      expectAttribute(attributes, 'marker-end', 'url(#arrow123123)');
+      expectAttribute(attributes, 'marker-end', 'url(#arrow123123-end)');
       expectAttribute(attributes, 'style', 'fill: none; stroke: blue; stroke-width: 2;');
     });
   });
diff --git a/src/SvgArrow/SvgArrow.tsx b/src/SvgArrow/SvgArrow.tsx
index 7800257..29f2b19 100644
--- a/src/SvgArrow/SvgArrow.tsx
+++ b/src/SvgArrow/SvgArrow.tsx
@@ -13,11 +13,13 @@ type Props = {
   strokeWidth: number;
   strokeDasharray?: string;
   arrowLabel?: React.ReactNode | null | undefined;
-  arrowMarkerId: string;
+  startArrowMarkerId: string;
+  endArrowMarkerId: string;
   lineStyle: ValidLineStyles;
   offset?: number;
   enableStartMarker?: boolean;
-  disableEndMarker?: boolean;
+  enableEndMarker?: boolean;
+  startShape: Record<string, any>;
   endShape: Record<string, any>;
 };
 
@@ -192,14 +194,20 @@ const SvgArrow = ({
   strokeWidth,
   strokeDasharray,
   arrowLabel,
-  arrowMarkerId,
+  startArrowMarkerId,
+  endArrowMarkerId,
   lineStyle,
   offset,
   enableStartMarker,
-  disableEndMarker,
+  enableEndMarker,
+  startShape,
   endShape,
 }: Props) => {
-  const actualArrowLength = endShape.circle
+  const actualStartArrowLength = startShape.circle
+    ? startShape.circle.radius * 2
+    : startShape.arrow.arrowLength * 2;
+
+  const actualEndArrowLength = endShape.circle
     ? endShape.circle.radius * 2
     : endShape.arrow.arrowLength * 2;
 
@@ -207,7 +215,7 @@ const SvgArrow = ({
   const { xPoint: xStart, yPoint: yStart } = computeArrowPointAccordingToArrowHead(
     startingPoint.x,
     startingPoint.y,
-    enableStartMarker ? actualArrowLength : 0,
+    enableStartMarker ? actualStartArrowLength : 0,
     strokeWidth,
     startingAnchorOrientation,
     lineStyle,
@@ -219,7 +227,7 @@ const SvgArrow = ({
   const { xPoint: xEnd, yPoint: yEnd } = computeArrowPointAccordingToArrowHead(
     endingPoint.x,
     endingPoint.y,
-    disableEndMarker ? 0 : actualArrowLength,
+    enableEndMarker ? actualEndArrowLength : 0,
     strokeWidth,
     endingAnchorOrientation,
     lineStyle,
@@ -265,7 +273,8 @@ const SvgArrow = ({
     yEnd,
   );
 
-  const markerUrl = `url(#${arrowMarkerId})`;
+  const startMarkerUrl = `url(#${startArrowMarkerId})`;
+  const endMarkerUrl = `url(#${endArrowMarkerId})`;
 
   return (
     <g className={className}>
@@ -277,8 +286,8 @@ const SvgArrow = ({
           strokeWidth,
           strokeDasharray,
         }}
-        markerStart={enableStartMarker ? markerUrl : undefined}
-        markerEnd={disableEndMarker ? undefined : markerUrl}
+        markerStart={enableStartMarker ? startMarkerUrl : undefined}
+        markerEnd={enableEndMarker ? endMarkerUrl : undefined}
       />
       {arrowLabel && (
         <foreignObject
diff --git a/src/__tests__/__snapshots__/Archer-integration.test.tsx.snap b/src/__tests__/__snapshots__/Archer-integration.test.tsx.snap
index 1ad4d02..f1bba90 100644
--- a/src/__tests__/__snapshots__/Archer-integration.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Archer-integration.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`Archer Integration Uses a functional child API to work with third party
         >
           <defs>
             <marker
-              id="arrow00001rootelement2"
+              id="arrow00001rootelement2-end"
               markerHeight="6"
               markerUnits="strokeWidth"
               markerWidth="10"
@@ -28,7 +28,7 @@ exports[`Archer Integration Uses a functional child API to work with third party
               />
             </marker>
             <marker
-              id="arrow00001element2element3"
+              id="arrow00001element2element3-end"
               markerHeight="12"
               markerUnits="strokeWidth"
               markerWidth="12"
@@ -46,7 +46,7 @@ exports[`Archer Integration Uses a functional child API to work with third party
               />
             </marker>
             <marker
-              id="arrow00001element4root"
+              id="arrow00001element4root-end"
               markerHeight="8"
               markerUnits="strokeWidth"
               markerWidth="8"
@@ -67,14 +67,14 @@ exports[`Archer Integration Uses a functional child API to work with third party
           <g>
             <path
               d="M0,0 C0,-10 0,-10 0,-20"
-              marker-end="url(#arrow00001rootelement2)"
+              marker-end="url(#arrow00001rootelement2-end)"
               style="fill: none; stroke: red; stroke-width: 2; stroke-dasharray: 5,5;"
             />
           </g>
           <g>
             <path
               d="M0,0 C-1.5,0 -1.5,0 -3,0"
-              marker-end="url(#arrow00001element2element3)"
+              marker-end="url(#arrow00001element2element3-end)"
               style="fill: none; stroke: blue; stroke-width: 1;"
             />
             <foreignobject
@@ -100,7 +100,7 @@ exports[`Archer Integration Uses a functional child API to work with third party
           <g>
             <path
               d="M0,0 C2,0 2,0 4,0"
-              marker-end="url(#arrow00001element4root)"
+              marker-end="url(#arrow00001element4root-end)"
               style="fill: none; stroke: red; stroke-width: 2;"
             />
             <foreignobject
diff --git a/src/types.ts b/src/types.ts
index a854cb2..5308111 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -44,13 +44,14 @@ export type ShapeType = {
 };
 
 export type LineType = {
+  startShape?: ShapeType;
   endShape?: ShapeType;
   strokeColor?: string;
   strokeWidth?: number;
   strokeDasharray?: string;
   noCurves?: boolean;
-  startMarker?: boolean;
-  endMarker?: boolean;
+  enableStartMarker?: boolean;
+  enableEndMarker?: boolean;
   lineStyle?: ValidLineStyles;
 };