@eccenca/gui-elements 23.0.0-rc.0 → 23.0.0-rc.1

package/src/cmem/react-flow/ReactFlow/ReactFlow.stories.tsx

@@ -1,7 +1,8 @@
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useState, useEffect, useCallback, FC } from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { ReactFlow } from "./ReactFlow";
-import { Elements } from 'react-flow-renderer';
+import IconButton from "../../../components/Icon/IconButton";
+import { ReactFlow, ReactFlowProps } from "./ReactFlow";
+import { ArrowHeadType, Elements, getMarkerEnd } from "react-flow-renderer";
 
 export default {
     title: "CMEM/React Flow/Configurations",
@@ -13,7 +14,7 @@ export default {
 const nodeExamples = {
     unspecified: [
         {
-            id: 1,
+            id: 'unspecified-1',
             type: "default",
             data: {
                 label: "Default ", content: "Example content.", minimalShape: "none"
@@ -21,7 +22,7 @@ const nodeExamples = {
             position: { x: 200, y: 50 },
         },
         {
-            id: 2,
+            id: 'unspecified-2',
             type: "default",
             data: {
                 label: "Default ", content: "Example content.", minimalShape: "none",
@@ -30,15 +31,15 @@ const nodeExamples = {
             position: { x: 200, y: 300 },
         },
         {
-            id: 'e1', type: 'straight', label: "straight edge", arrowHeadType: "arrowclosed",source: '1', target: '2',
+            id: 'unspecified-e1', type: 'straight', label: "straight edge", arrowHeadType: "arrowclosed",source: 'unspecified-1', target: 'unspecified-2',
         },
         {
-            id: 'e2', type: 'step', label: "step edge", arrowHeadType: "arrowclosed",source: '2', target: '1',
+            id: 'unspecified-e2', type: 'step', label: "step edge", arrowHeadType: "arrowclosed",source: 'unspecified-2', target: 'unspecified-1',
         }
     ],
     linking: [
         {
-            id: 1,
+            id: 'linking-1',
             type: "sourcepath",
             data: {
                 label: "Source path", content: "Example content.", minimalShape: "none"
@@ -46,7 +47,7 @@ const nodeExamples = {
             position: { x: 100, y: 50 },
         },
         {
-            id: 2,
+            id: 'linking-2',
             type: "targetpath",
             data: {
                 label: "Target path", content: "Example content.", minimalShape: "none"
@@ -54,7 +55,7 @@ const nodeExamples = {
             position: { x: 400, y: 200 },
         },
         {
-            id: 3,
+            id: 'linking-3',
             type: "transformation",
             data: {
                 label: "Transformation", content: "Example content.", minimalShape: "none"
@@ -62,7 +63,7 @@ const nodeExamples = {
             position: { x: 700, y: 50 },
         },
         {
-            id: 4,
+            id: 'linking-4',
             type: "comparator",
             data: {
                 label: "Comparation", content: "Example content.", minimalShape: "none",
@@ -71,7 +72,7 @@ const nodeExamples = {
             position: { x: 750, y: 300 },
         },
         {
-            id: 5,
+            id: 'linking-5',
             type: "aggregator",
             data: {
                 label: "Aggregation", content: "Example content.", minimalShape: "none",
@@ -79,15 +80,15 @@ const nodeExamples = {
             },
             position: { x: 50, y: 300 },
         },
-        { id: 'e1', type: 'value', label: "value edge", arrowHeadType: "arrowclosed",source: '1', target: '2' },
-        { id: 'e2', type: 'score', label: "score edge", arrowHeadType: "arrowclosed",source: '2', target: '3' },
-        { id: 'e3', type: 'success', label: "success edge", arrowHeadType: "arrowclosed",source: '3', target: '4' },
-        { id: 'e4', type: 'warning', label: "warning edge", arrowHeadType: "arrowclosed",source: '4', target: '5' },
-        { id: 'e5', type: 'danger', label: "danger edge", arrowHeadType: "arrowclosed",source: '5', target: '1' },
+        { id: 'linking-e1', type: 'value', label: "value edge", arrowHeadType: "arrowclosed",source: 'linking-1', target: 'linking-2' },
+        { id: 'linking-e2', type: 'score', label: "score edge", arrowHeadType: "arrowclosed",source: 'linking-2', target: 'linking-3' },
+        { id: 'linking-e3', type: 'success', label: "success edge", arrowHeadType: "arrowclosed",source: 'linking-3', target: 'linking-4' },
+        { id: 'linking-e4', type: 'warning', label: "warning edge", arrowHeadType: "arrowclosed",source: 'linking-4', target: 'linking-5' },
+        { id: 'linking-e5', type: 'danger', label: "danger edge", arrowHeadType: "arrowclosed",source: 'linking-5', target: 'linking-1' },
     ],
     workflow: [
         {
-            id: 1,
+            id: 'workflow-1',
             type: "dataset",
             data: {
                 label: "Dataset", content: "Example content.", minimalShape: "none"
@@ -95,7 +96,7 @@ const nodeExamples = {
             position: { x: 100, y: 50 },
         },
         {
-            id: 2,
+            id: 'workflow-2',
             type: "linking",
             data: {
                 label: "Linking", content: "Example content.", minimalShape: "none"
@@ -103,7 +104,7 @@ const nodeExamples = {
             position: { x: 400, y: 200 },
         },
         {
-            id: 3,
+            id: 'workflow-3',
             type: "transform",
             data: {
                 label: "Transform", content: "Example content.", minimalShape: "none"
@@ -111,7 +112,7 @@ const nodeExamples = {
             position: { x: 700, y: 50 },
         },
         {
-            id: 4,
+            id: 'workflow-4',
             type: "task",
             data: {
                 label: "Task", content: "Example content.", minimalShape: "none",
@@ -120,7 +121,7 @@ const nodeExamples = {
             position: { x: 750, y: 300 },
         },
         {
-            id: 5,
+            id: 'workflow-5',
             type: "workflow",
             data: {
                 label: "Workflow", content: "Example content.", minimalShape: "none",
@@ -128,15 +129,15 @@ const nodeExamples = {
             },
             position: { x: 50, y: 300 },
         },
-        { id: 'e1', arrowHeadType: "arrowclosed",source: '1', target: '2' },
-        { id: 'e2', arrowHeadType: "arrowclosed",source: '2', target: '3' },
-        { id: 'e3', type: 'success', label: "success edge", arrowHeadType: "arrowclosed",source: '3', target: '4' },
-        { id: 'e4', type: 'warning', label: "warning edge", arrowHeadType: "arrowclosed",source: '4', target: '5' },
-        { id: 'e5', type: 'danger', label: "danger edge", arrowHeadType: "arrowclosed",source: '5', target: '1' },
+        { id: 'workflow-e1', arrowHeadType: "arrowclosed",source: 'workflow-1', target: 'workflow-2' },
+        { id: 'workflow-e2', arrowHeadType: "arrowclosed",source: 'workflow-2', target: 'workflow-3' },
+        { id: 'workflow-e3', type: 'success', label: "success edge", arrowHeadType: "arrowclosed",source: 'workflow-3', target: 'workflow-4' },
+        { id: 'workflow-e4', type: 'warning', label: "warning edge", arrowHeadType: "arrowclosed",source: 'workflow-4', target: 'workflow-5' },
+        { id: 'workflow-e5', type: 'danger', label: "danger edge", arrowHeadType: "arrowclosed",source: 'workflow-5', target: 'workflow-1' },
     ],
     graph: [
         {
-            id: 1,
+            id: 'graph-1',
             type: "default",
             data: {
                 label: "Default ", content: "Example content.", minimalShape: "none"
@@ -144,7 +145,7 @@ const nodeExamples = {
             position: { x: 100, y: 50 },
         },
         {
-            id: 2,
+            id: 'graph-2',
             type: "graph",
             data: {
                 label: "Graph", content: "Example content.", minimalShape: "none"
@@ -152,7 +153,7 @@ const nodeExamples = {
             position: { x: 400, y: 200 },
         },
         {
-            id: 3,
+            id: 'graph-3',
             type: "class",
             data: {
                 label: "Class", content: "Example content.", minimalShape: "none"
@@ -160,7 +161,7 @@ const nodeExamples = {
             position: { x: 700, y: 50 },
         },
         {
-            id: 4,
+            id: 'graph-4',
             type: "instance",
             data: {
                 label: "Instance", content: "Example content.", minimalShape: "none",
@@ -169,7 +170,7 @@ const nodeExamples = {
             position: { x: 750, y: 300 },
         },
         {
-            id: 5,
+            id: 'graph-5',
             type: "property",
             data: {
                 label: "Property", content: "Example content.", minimalShape: "none",
@@ -177,21 +178,96 @@ const nodeExamples = {
             },
             position: { x: 50, y: 300 },
         },
-        { id: 'e1', type: 'implicit', label: "implicit edge", arrowHeadType: "arrowclosed",source: '1', target: '2' },
-        { id: 'e2', type: 'import', label: "import edge", arrowHeadType: "arrowclosed",source: '2', target: '3' },
-        { id: 'e3', type: 'subclass', label: "subclass edge", arrowHeadType: "arrowclosed",source: '3', target: '4' },
-        { id: 'e4', type: 'subproperty', label: "subproperty edge", arrowHeadType: "arrowclosed",source: '4', target: '5' },
-        { id: 'e5', type: 'rdftype', label: "rdftype edge", arrowHeadType: "arrowclosed",source: '5', target: '1' },
+        { id: 'graph-e1', type: 'implicit', label: "implicit edge", arrowHeadType: "arrowclosed",source: 'graph-1', target: 'graph-2' },
+        { id: 'graph-e2', type: 'import', label: "import edge", arrowHeadType: "arrowclosed",source: 'graph-2', target: 'graph-3' },
+        { id: 'graph-e3', type: 'subclass', label: "subclass edge", arrowHeadType: "arrowclosed",source: 'graph-3', target: 'graph-4' },
+        { id: 'graph-e4', type: 'subproperty', label: "subproperty edge", arrowHeadType: "arrowclosed",source: 'graph-4', target: 'graph-5' },
+        { id: 'graph-e5', type: 'rdftype', label: "rdftype edge", arrowHeadType: "arrowclosed",source: 'graph-5', target: 'graph-1' },
     ],
+    inverseEdge: [
+        {
+            id: 'inverseEdge-1',
+            type: "default",
+            data: {
+                label: "Default ", content: "Example content.", minimalShape: "none"
+            },
+            position: { x: 200, y: 50 },
+        },
+        {
+            id: 'inverseEdge-2',
+            type: "default",
+            data: {
+                label: "Default ", content: "Example content.", minimalShape: "none",
+                handles: [ { type: "source", position: "left" }, { type: "target", position: "right" } ],
+                inversePath: true,
+            },
+            position: { x: 200, y: 300 },
+        },
+        {
+            id: 'inverseEdge-e1', type: 'straight', label: "straight edge", arrowHeadType: "arrowclosed",source: 'inverseEdge-1', target: 'inverseEdge-2',
+        },
+        {
+            id: 'inverseEdge-e2', type: 'default', label: "inverse edge", source: 'inverseEdge-2', target: 'inverseEdge-1',
+            data: {
+                markerStart: getMarkerEnd(
+                    `${ArrowHeadType.ArrowClosed}-inverse` as ArrowHeadType
+                ),
+            }
+        }
+    ],
+    customLabel: [
+        {
+            id: 'customLabel-1',
+            type: "default",
+            data: {
+                label: "Default ", content: "Example content.", minimalShape: "none"
+            },
+            position: { x: 200, y: 50 },
+        },
+        {
+            id: 'customLabel-2',
+            type: "default",
+            data: {
+                label: "Default ", content: "Example content.", minimalShape: "none",
+                handles: [ { type: "source", position: "left" }, { type: "target", position: "right" } ],
+                inversePath: true,
+            },
+            position: { x: 200, y: 300 },
+        },
+        {
+            id: 'customLabel-e1', type: 'straight', label: "straight edge", arrowHeadType: "arrowclosed", source: 'customLabel-1', target: 'customLabel-2',
+        },
+        {
+            id: 'customLabel-e2', type: 'default', label: "custom edge", arrowHeadType: "arrowclosed", source: 'customLabel-2', target: 'customLabel-1',
+            data: {
+                renderLabel: (
+                    edgeCenter: [number, number, number, number]
+                ) => (
+                    <foreignObject
+                        width={30}
+                        height={30}
+                        x={edgeCenter[0] - 15}
+                        y={edgeCenter[1] - 15}
+                        className="instance-viz-multiedge"
+                        requiredExtensions="http://www.w3.org/1999/xhtml"
+                    >
+                        <body>
+                            <IconButton name="navigation-close" />
+                        </body>
+                    </foreignObject>
+                )
+            }
+        }
+    ]
 }
 
-const ReactFlowExample = (args) => {
+const ReactFlowExample: FC<ReactFlowProps> = (args) => {
     const [reactflowInstance, setReactflowInstance] = useState(null);
     const [elements, setElements] = useState([] as Elements);
     //const [edgeTools, setEdgeTools] = useState<JSX.Element>(<></>);
 
     useEffect(() => {
-        setElements(nodeExamples[args.configuration] as Elements);
+        setElements(nodeExamples[args.configuration ?? "unspecified"] as Elements);
     }, [args]);
 
     const onLoad = useCallback(

package/src/cmem/react-flow/ReactFlow/ReactFlow.tsx

@@ -1,15 +1,18 @@
 import React from "react";
 import {default as ReactFlowOriginal, ReactFlowProps as ReactFlowOriginalProps} from "react-flow-renderer";
+import { ReactFlowMarkers } from "../../../extensions/react-flow/markers/ReactFlowMarkers";
 import * as unspecifiedConfig from "./../configuration/unspecified";
 import * as graphConfig from "./../configuration/graph";
 import * as workflowConfig from "./../configuration/workflow";
 import * as linkingConfig from "./../configuration/linking";
+import * as inverseEdgeConfig from "./../configuration/inverseEdge";
+import * as customLabelConfig from "./../configuration/customLabel";
 
-interface ReactFlowProps extends ReactFlowOriginalProps {
+export interface ReactFlowProps extends ReactFlowOriginalProps {
     /**
      * Load `ReactFlow` component with pre-configured values for `nodeTypes` and `edgeTypes`
      */
-    configuration?: "unspecified" | "graph" | "workflow" | "linking";
+    configuration?: "unspecified" | "graph" | "workflow" | "linking" | "inverseEdge" | "customLabel";
 }
 
 /**
@@ -27,6 +30,8 @@ export const ReactFlow = React.forwardRef<HTMLDivElement, ReactFlowProps>((
         graph: graphConfig,
         workflow: workflowConfig,
         linking: linkingConfig,
+        inverseEdge: inverseEdgeConfig,
+        customLabel: customLabelConfig,
     }
 
     return (
@@ -35,6 +40,8 @@ export const ReactFlow = React.forwardRef<HTMLDivElement, ReactFlowProps>((
             nodeTypes={ configReactFlow[configuration].nodeTypes }
             edgeTypes={ configReactFlow[configuration].edgeTypes }
             {...originalProps}
-        />
+        >
+            <ReactFlowMarkers />
+        </ReactFlowOriginal>
     );
 })

package/src/cmem/react-flow/configuration/customLabel.ts

@@ -0,0 +1,11 @@
+import { EdgeDefault } from "./../../../extensions/react-flow/edges/EdgeDefault";
+import { NodeDefault } from "./../../../extensions/react-flow/nodes/NodeDefault";
+
+export const edgeTypes = {
+    default: EdgeDefault,
+    straight: EdgeDefault,
+};
+
+export const nodeTypes = {
+    default: NodeDefault,
+};

package/src/cmem/react-flow/configuration/inverseEdge.ts

@@ -0,0 +1,11 @@
+import { EdgeDefault } from "./../../../extensions/react-flow/edges/EdgeDefault";
+import { NodeDefault } from "./../../../extensions/react-flow/nodes/NodeDefault";
+
+export const edgeTypes = {
+    default: EdgeDefault,
+    straight: EdgeDefault,
+};
+
+export const nodeTypes = {
+    default: NodeDefault,
+};

package/src/common/utils/CssCustomProperties.ts

@@ -41,7 +41,7 @@ export default class CssCustomProperties {
         return customprops;
     }
 
-    static listLocalStylesheets = () => {
+    static listLocalStylesheets = (): CSSStyleSheet[] => {
         if (document && document.styleSheets) {
             return Array.from(document.styleSheets)
                 .filter((stylesheet) => {
@@ -56,7 +56,7 @@ export default class CssCustomProperties {
         return [];
     }
 
-    static listLocalCssRules = () => {
+    static listLocalCssRules = (): CSSRule[] => {
         return CssCustomProperties.listLocalStylesheets()
             .map((stylesheet) => {
                 return Array.from(stylesheet.cssRules);
@@ -64,14 +64,24 @@ export default class CssCustomProperties {
             .flat();
     }
 
-    static listLocalCssStyleRules = (filter: getLocalCssStyleRulesProps = {}) => {
+    static listLocalCssStyleRules = (filter: getLocalCssStyleRulesProps = {}): CSSStyleRule[] => {
         const {cssRuleType = "CSSStyleRule", selectorText} = filter;
-        return CssCustomProperties.listLocalCssRules()
+        const cssStyleRules = CssCustomProperties.listLocalCssRules()
             .filter((cssrule) => {
-                if (cssrule.constructor.name !== cssRuleType) { return false; }
-                if (!!selectorText && cssrule.selectorText !== selectorText) { return false; }
-                return true;
+                if((cssrule as CSSStyleRule).style) {
+                    const cssStyleRule = cssrule as CSSStyleRule
+                    if (cssStyleRule.constructor.name !== cssRuleType) {
+                        return false;
+                    }
+                    if (!!selectorText && cssStyleRule.selectorText !== selectorText) {
+                        return false;
+                    }
+                    return true;
+                } else {
+                    return false;
+                }
             })
+        return cssStyleRules as CSSStyleRule[]
     }
 
     static listLocalCssStyleRuleProperties = (filter: getLocalCssStyleRulePropertiesProps = {}) => {

package/src/components/Dialog/SimpleDialog.tsx

@@ -16,6 +16,7 @@ import {
 import Divider from "./../Separation/Divider";
 import Modal, { ModalProps } from "./Modal";
 import {TestableComponent} from "../interfaces";
+import IconButton from "../Icon/IconButton";
 
 export interface SimpleDialogProps extends ModalProps, TestableComponent {
     /**
@@ -49,6 +50,10 @@ export interface SimpleDialogProps extends ModalProps, TestableComponent {
     intent?: IntentTypes;
     /** Optional props for the wrapper div element inside the modal. */
     wrapperDivProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
+    /** If a full screen toggler is shown that will allow to switch to full screen mode. */
+    showFullScreenToggler?: boolean
+    /** Starts the modal in full screen mode. The show full screen toggler will be automatically enabled. */
+    startInFullScreenMode?: boolean
 }
 
 /**
@@ -66,8 +71,13 @@ function SimpleDialog({
     preventSimpleClosing = false,
     intent,
     headerOptions,
+    showFullScreenToggler = false,
+    startInFullScreenMode = false,
+    size,
     ...otherProps
 }: SimpleDialogProps) {
+    const [displayFullscreen, setDisplayFullscreen] = React.useState<boolean>(startInFullScreenMode);
+    const showToggler = startInFullScreenMode || showFullScreenToggler
     const intentClassName = intent ? `${eccgui}-intent--${intent}` : "";
     return (
         <Modal
@@ -76,21 +86,32 @@ function SimpleDialog({
             data-test-id={otherProps["data-test-id"] ?? "simpleDialogWidget"}
             canOutsideClickClose={canOutsideClickClose || !preventSimpleClosing}
             canEscapeKeyClose={canEscapeKeyClose || !preventSimpleClosing}
+            size={displayFullscreen ? "fullscreen" : size}
         >
             <Card className={intentClassName}
             >
-                {(title || headerOptions) && (
+                {(title || headerOptions || showToggler) ? (
                     <CardHeader>
                         <CardTitle
                             className={intentClassName}
                         >
                             {title}
                         </CardTitle>
-                        {headerOptions && (
-                            <CardOptions>{headerOptions}</CardOptions>
+                        {(headerOptions || showToggler) ? (
+                            <CardOptions>
+                                { headerOptions }
+                                {showToggler && (
+                                    <IconButton
+                                        name={displayFullscreen ? "toggler-minimize" : "toggler-maximize"}
+                                        onClick={() => setDisplayFullscreen(!displayFullscreen)}
+                                    />
+                                )}
+                            </CardOptions>
+                        ) : (
+                            <></>
                         )}
                     </CardHeader>
-                )}
+                ) : null}
                 {hasBorder && <Divider />}
                 <CardContent>{children}</CardContent>
                 {hasBorder && <Divider />}

package/src/components/Icon/canonicalIconNames.tsx

@@ -67,6 +67,8 @@ export type ValidIconName = "application-dataintegration"
     | "operation-comparison"
     | "operation-transform"
     | "operation-aggregation"
+    | "operation-commit"
+    | "operation-sharelink"
     | "data-sourcepath"
     | "data-targetpath"
     | "list-sort"
@@ -453,6 +455,16 @@ const canonicalIconNames: Record<ValidIconName, IconSized> = {
         normal: icons.DataCollection20,
         large: icons.DataCollection32
     },
+    "operation-commit": {
+        small: icons.Commit16,
+        normal: icons.Commit20,
+        large: icons.Commit32
+    },
+    "operation-sharelink": {
+        small: icons.CopyLink16,
+        normal: icons.CopyLink20,
+        large: icons.CopyLink32
+    },
 
     "data-sourcepath": {
         small: icons.Data_216,

package/src/components/Iframe/IframeModal.tsx

@@ -1,8 +1,7 @@
 import React from "react";
-import SimpleDialog, { SimpleDialogProps } from "../Dialog/SimpleDialog";
-import IconButton from "../Icon/IconButton";
-import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-import { Iframe, IframeProps } from "./Iframe";
+import SimpleDialog, {SimpleDialogProps} from "../Dialog/SimpleDialog";
+import {CLASSPREFIX as eccgui} from "../../configuration/constants";
+import {Iframe, IframeProps} from "./Iframe";
 
 export interface IframeModalProps extends Omit<SimpleDialogProps, "children"> {
     // The title of the dialog
@@ -29,7 +28,6 @@ export function IframeModal({
     size = "large",
     ...otherSimpleDialogProps
 }: IframeModalProps) {
-    const [displayFullscreen, setDisplayFullscreen] = React.useState<boolean>(startFullscreen);
     const {
         useViewportHeight,
         useAvailableSpace,
@@ -44,22 +42,13 @@ export function IframeModal({
         <SimpleDialog
             hasBorder
             title={title}
-            headerOptions={(
-                <>
-                    <IconButton
-                        name={displayFullscreen ? "toggler-minimize" : "toggler-maximize"}
-                        onClick={()=>setDisplayFullscreen(!displayFullscreen)}
-                    />
-                    <>
-                        {headerOptions}
-                    </>
-                </>
-            )}
+            headerOptions={headerOptions}
             className={
                 `${eccgui}-iframemodal` +
                 (className ? ` ${className}` : "")
             }
-            size={displayFullscreen ? "fullscreen" : size}
+            showFullScreenToggler={true}
+            startInFullScreenMode={startFullscreen}
             {...otherSimpleDialogProps}
         >
             <Iframe

package/src/extensions/react-flow/edges/EdgeDefault.tsx

@@ -11,6 +11,9 @@ import { drawEdgeStraight} from "./utils";
 
 export interface EdgeDefaultDataProps {
     pathGlowWidth?: number;
+    inversePath?: boolean;
+    markerStart?: string;
+    renderLabel?: (edgeCenter: [number, number, number, number]) => React.ReactNode;
 }
 
 export interface EdgeDefaultProps extends ReactFlowEdgeProps {
@@ -27,6 +30,7 @@ export const EdgeDefault = memo(
         } = edge;
         const {
             pathGlowWidth = 10,
+            markerStart
         } = data;
 
         const pathDisplay = drawSvgPath({...edgeOriginalProperties, data});
@@ -41,7 +45,7 @@ export const EdgeDefault = memo(
             targetY: edgeOriginalProperties.targetY,
         });
 
-        const edgeLabel = edgeOriginalProperties.label ? (
+        const edgeLabel = data.renderLabel?.(edgeCenter) ?? (edgeOriginalProperties.label ? (
             <EdgeText
                 x={edgeCenter[0]}
                 y={edgeCenter[1]}
@@ -52,7 +56,7 @@ export const EdgeDefault = memo(
                 labelBgPadding={edgeOriginalProperties.labelBgPadding || [5, 5]}
                 labelBgBorderRadius={edgeOriginalProperties.labelBgBorderRadius || 3}
             />
-        ) : null;
+        ) : null);
 
         const edgeStyle = edgeOriginalProperties.style ?? {};
         return (
@@ -67,6 +71,7 @@ export const EdgeDefault = memo(
                 <path
                     d={pathDisplay}
                     className="react-flow__edge-path"
+                    markerStart={markerStart}
                     markerEnd={markerEnd}
                 />
                 { edgeLabel }

package/src/extensions/react-flow/index.ts

@@ -7,6 +7,8 @@ export { EdgeDefault } from "./edges/EdgeDefault";
 export { EdgeStep } from "./edges/EdgeStep";
 export { EdgeTools } from "./edges/EdgeTools";
 export { edgeTypes } from "./edges/edgeTypes";
+export { MarkerArrowClosedInverse } from "./markers/MarkerArrowClosedInverse";
+export { ReactFlowMarkers } from "./markers/ReactFlowMarkers";
 export { MiniMap } from "./minimap/MiniMap";
 export { minimapNodeClassName, minimapNodeColor } from "./minimap/utils";
 

package/src/extensions/react-flow/markers/MarkerArrowClosedInverse.tsx

@@ -0,0 +1,25 @@
+import React, { FC } from "react";
+
+export const MarkerArrowClosedInverse: FC = () => {
+    return (
+        <marker
+            className="react-flow__arrowhead"
+            id="react-flow__arrowclosed-inverse"
+            markerWidth="12.5"
+            markerHeight="12.5"
+            viewBox="-10 -10 20 20"
+            orient="auto"
+            refX="0"
+            refY="0"
+        >
+            <polyline
+                stroke="#b1b1b7"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="1"
+                fill="#b1b1b7"
+                points="5,-4 0,0 5,4 5,-4"
+            ></polyline>
+        </marker>
+    );
+};

package/src/extensions/react-flow/markers/ReactFlowMarkers.tsx

@@ -0,0 +1,13 @@
+import React, { FC } from "react";
+
+import { MarkerArrowClosedInverse } from "./MarkerArrowClosedInverse";
+
+export const ReactFlowMarkers: FC = () => {
+    return (
+        <svg>
+            <defs>
+                <MarkerArrowClosedInverse />
+            </defs>
+        </svg>
+    );
+};