Merge branch 'v10' into refactor/nodes-edges-state

example/src_oldapi/Edges/index.tsx

@@ -41,6 +41,32 @@ 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-7',
+    source: '5',
+    target: '7',
+    label: 'label with styled bg',
+    labelBgPadding: [8, 4],
+    labelBgBorderRadius: 4,
+    labelBgStyle: { fill: '#FFCC00', color: '#fff', fillOpacity: 0.7 },
+    markerEnd: {
+      type: ArrowHeadType.ArrowClosed,
+    },
+  },
+  {
+    id: 'e5-8',
+    source: '5',
+    target: '8',
+    type: 'custom',
+    data: { text: 'custom edge' },
+  },
+  {
+    id: 'e5-9',
+    source: '5',
+    target: '9',
+    type: 'custom2',
+    data: { text: 'custom edge 2' },
+  },
   {
     id: 'e5-6',
     source: '5',
@@ -54,32 +80,23 @@ const initialElements: Elements = [
       </>
     ),
     labelStyle: { fill: 'red', fontWeight: 700 },
-    arrowHeadType: ArrowHeadType.Arrow,
-  },
-  {
-    id: 'e5-7',
-    source: '5',
-    target: '7',
-    label: 'label with styled bg',
-    labelBgPadding: [8, 4],
-    labelBgBorderRadius: 4,
-    labelBgStyle: { fill: '#FFCC00', color: '#fff', fillOpacity: 0.7 },
-    arrowHeadType: ArrowHeadType.ArrowClosed,
-  },
-  {
-    id: 'e5-8',
-    source: '5',
-    target: '8',
-    type: 'custom',
-    data: { text: 'custom edge' },
-    arrowHeadType: ArrowHeadType.ArrowClosed,
-  },
-  {
-    id: 'e5-9',
-    source: '5',
-    target: '9',
-    type: 'custom2',
-    data: { text: 'custom edge 2' },
+    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,
+    },
   },
 ];