Fix SVG id collisions by using random UUIDs instead of element IDs

src/main/packages/bpmn/bpmn-flow/bpmn-flow-component.tsx

@@ -2,6 +2,7 @@ import React, { FunctionComponent, SVGProps } from 'react';
 import { Point } from '../../../utils/geometry/point';
 import { BPMNFlow } from './bpmn-flow';
 import { ThemedCircle, ThemedPath, ThemedPolyline } from '../../../components/theme/themedComponents';
+import { uuid } from '../../../utils/uuid';
 
 export const BPMNFlowComponent: FunctionComponent<Props> = ({ element }) => {
   let position = { x: 0, y: 0 };
@@ -45,11 +46,12 @@ export const BPMNFlowComponent: FunctionComponent<Props> = ({ element }) => {
     }
   };
 
+  const id = uuid();
   return (
     <g>
       {element.flowType === 'message' && (
         <marker
-          id={`marker-start-${element.id}`}
+          id={`marker-start-${id}`}
           viewBox={`0 0 ${10} ${10}`}
           markerWidth={10}
           markerHeight={10}
@@ -63,7 +65,7 @@ export const BPMNFlowComponent: FunctionComponent<Props> = ({ element }) => {
       )}
       {(element.flowType === 'sequence' || element.flowType === 'message') && (
         <marker
-          id={`marker-end-${element.id}`}
+          id={`marker-end-${id}`}
           viewBox={`0 0 ${10} ${5}`}
           markerWidth={10}
           markerHeight={10}
@@ -82,7 +84,7 @@ export const BPMNFlowComponent: FunctionComponent<Props> = ({ element }) => {
       )}
       {element.flowType === 'data association' && (
         <marker
-          id={`marker-end-${element.id}`}
+          id={`marker-end-${id}`}
           viewBox={`0 0 ${10} ${5}`}
           markerWidth={10}
           markerHeight={10}
@@ -105,8 +107,8 @@ export const BPMNFlowComponent: FunctionComponent<Props> = ({ element }) => {
         strokeColor={element.strokeColor}
         fillColor="none"
         strokeWidth={1}
-        markerStart={element.flowType === 'message' ? `url(#marker-start-${element.id})` : undefined}
-        markerEnd={element.flowType !== 'association' ? `url(#marker-end-${element.id})` : undefined}
+        markerStart={element.flowType === 'message' ? `url(#marker-start-${id})` : undefined}
+        markerEnd={element.flowType !== 'association' ? `url(#marker-end-${id})` : undefined}
         strokeDasharray={element.flowType !== 'sequence' ? 4 : undefined}
       />
       <text

src/main/packages/common/uml-association/uml-association-component.tsx

@@ -5,6 +5,7 @@ import { ClassRelationshipType } from '../../uml-class-diagram';
 import { UMLAssociation } from './uml-association';
 import { UMLRelationshipType } from '../../uml-relationship-type';
 import { ThemedPath, ThemedPathContrast, ThemedPolyline } from '../../../components/theme/themedComponents';
+import { uuid } from '../../../utils/uuid';
 
 const Marker = {
   Arrow: (id: string, color?: string) => (
@@ -137,7 +138,7 @@ export const UMLAssociationComponent: FunctionComponent<Props> = ({ element }) =
   const path = element.path.map((point) => new Point(point.x, point.y));
   const source: Point = computeTextPositionForUMLAssociation(path);
   const target: Point = computeTextPositionForUMLAssociation(path.reverse(), !!marker);
-  const id = `marker-${element.id}`;
+  const id = `marker-${uuid()}`;
 
   const textFill = element.textColor ? { fill: element.textColor } : {};
   return (

src/main/packages/common/uml-dependency/uml-dependency-component.tsx

@@ -1,31 +1,35 @@
 import React, { FunctionComponent } from 'react';
 import { UMLDependency } from './uml-component-dependency';
 import { ThemedPath, ThemedPolyline } from '../../../components/theme/themedComponents';
+import { uuid } from '../../../utils/uuid';
 
-export const UMLDependencyComponent: FunctionComponent<Props> = ({ element }) => (
-  <g>
-    <marker
-      id={`marker-${element.id}`}
-      viewBox="0 0 30 30"
-      markerWidth="22"
-      markerHeight="30"
-      refX="30"
-      refY="15"
-      orient="auto"
-      markerUnits="strokeWidth"
-    >
-      <ThemedPath d="M0,29 L30,15 L0,1" fillColor="none" strokeColor={element.strokeColor} />
-    </marker>
-    <ThemedPolyline
-      points={element.path.map((point) => `${point.x} ${point.y}`).join(',')}
-      strokeColor={element.strokeColor}
-      fillColor="none"
-      strokeWidth={1}
-      strokeDasharray={7}
-      markerEnd={`url(#marker-${element.id})`}
-    />
-  </g>
-);
+export const UMLDependencyComponent: FunctionComponent<Props> = ({ element }) => {
+  const id = uuid();
+  return (
+    <g>
+      <marker
+        id={`marker-${id}`}
+        viewBox="0 0 30 30"
+        markerWidth="22"
+        markerHeight="30"
+        refX="30"
+        refY="15"
+        orient="auto"
+        markerUnits="strokeWidth"
+      >
+        <ThemedPath d="M0,29 L30,15 L0,1" fillColor="none" strokeColor={element.strokeColor} />
+      </marker>
+      <ThemedPolyline
+        points={element.path.map((point) => `${point.x} ${point.y}`).join(',')}
+        strokeColor={element.strokeColor}
+        fillColor="none"
+        strokeWidth={1}
+        strokeDasharray={7}
+        markerEnd={`url(#marker-${id})`}
+      />
+    </g>
+  );
+};
 
 interface Props {
   element: UMLDependency;

src/main/packages/common/uml-interface-required/uml-interface-required-component.tsx

@@ -6,6 +6,7 @@ import { Direction, getOppositeDirection } from '../../../services/uml-element/u
 import { Point } from '../../../utils/geometry/point';
 import { REQUIRED_INTERFACE_MARKER_SIZE, REQUIRED_INTERFACE_MARKER_TYPE } from './uml-interface-requires-constants';
 import { ThemedPath, ThemedPolyline } from '../../../components/theme/themedComponents';
+import { uuid } from '../../../utils/uuid';
 
 type OwnProps = {
   element: UMLInterfaceRequired;
@@ -89,10 +90,11 @@ const UMLInterfaceRequiredC: FunctionComponent<Props> = (props: Props) => {
     return path;
   };
 
+  const id = uuid();
   return (
     <g>
       <marker
-        id={`marker-${element.id}`}
+        id={`marker-${id}`}
         viewBox={`0 0 ${REQUIRED_INTERFACE_MARKER_SIZE} ${REQUIRED_INTERFACE_MARKER_SIZE}`}
         markerWidth={REQUIRED_INTERFACE_MARKER_SIZE}
         markerHeight={REQUIRED_INTERFACE_MARKER_SIZE}
@@ -116,7 +118,7 @@ const UMLInterfaceRequiredC: FunctionComponent<Props> = (props: Props) => {
         strokeColor={element.strokeColor}
         fillColor="none"
         strokeWidth={1.0}
-        markerEnd={`url(#marker-${element.id})`}
+        markerEnd={`url(#marker-${id})`}
       />
     </g>
   );

src/main/packages/flowchart/flowchart-flowline/flowchart-flowline-component.tsx

@@ -2,6 +2,7 @@ import React, { FunctionComponent } from 'react';
 import { Point } from '../../../utils/geometry/point';
 import { FlowchartFlowline } from './flowchart-flowline';
 import { ThemedPath, ThemedPolyline } from '../../../components/theme/themedComponents';
+import { uuid } from '../../../utils/uuid';
 
 export const FlowchartFlowlineComponent: FunctionComponent<Props> = ({ element }) => {
   let position = { x: 0, y: 0 };
@@ -42,10 +43,11 @@ export const FlowchartFlowlineComponent: FunctionComponent<Props> = ({ element }
   };
   const fill = element.textColor ? { fill: element.textColor } : {};
 
+  const id = uuid();
   return (
     <g>
       <marker
-        id={`marker-${element.id}`}
+        id={`marker-${id}`}
         viewBox="0 0 30 30"
         markerWidth="22"
         markerHeight="30"
@@ -61,7 +63,7 @@ export const FlowchartFlowlineComponent: FunctionComponent<Props> = ({ element }
         strokeColor={element.strokeColor}
         fillColor="none"
         strokeWidth={1}
-        markerEnd={`url(#marker-${element.id})`}
+        markerEnd={`url(#marker-${id})`}
       />
       <text x={position.x} y={position.y} {...layoutText(direction)} pointerEvents="none" style={{ ...fill }}>
         {element.name}

src/main/packages/uml-activity-diagram/uml-activity-control-flow/uml-activity-control-flow-component.tsx

@@ -2,6 +2,7 @@ import React, { FunctionComponent } from 'react';
 import { Point } from '../../../utils/geometry/point';
 import { UMLActivityControlFlow } from './uml-activity-control-flow';
 import { ThemedPath, ThemedPolyline } from '../../../components/theme/themedComponents';
+import { uuid } from '../../../utils/uuid';
 
 export const UMLActivityControlFlowComponent: FunctionComponent<Props> = ({ element }) => {
   let position = { x: 0, y: 0 };
@@ -43,10 +44,11 @@ export const UMLActivityControlFlowComponent: FunctionComponent<Props> = ({ elem
 
   const fill = element.textColor ? { fill: element.textColor } : {};
 
+  const id = uuid();
   return (
     <g>
       <marker
-        id={`marker-${element.id}`}
+        id={`marker-${id}`}
         viewBox="0 0 30 30"
         markerWidth="22"
         markerHeight="30"
@@ -62,7 +64,7 @@ export const UMLActivityControlFlowComponent: FunctionComponent<Props> = ({ elem
         strokeColor={element.strokeColor}
         fillColor="none"
         strokeWidth={1}
-        markerEnd={`url(#marker-${element.id})`}
+        markerEnd={`url(#marker-${id})`}
       />
       <text x={position.x} y={position.y} {...layoutText(direction)} pointerEvents="none" style={{ ...fill }}>
         {element.name}

src/main/packages/uml-petri-net/uml-petri-net-arc/uml-petri-net-arc-component.tsx

@@ -3,6 +3,7 @@ import { Text } from '../../../components/controls/text/text';
 import { Point } from '../../../utils/geometry/point';
 import { UMLPetriNetArc } from './uml-petri-net-arc';
 import { ThemedPathContrast, ThemedPolyline } from '../../../components/theme/themedComponents';
+import { uuid } from '../../../utils/uuid';
 
 export const UMLPetriNetArcComponent: FunctionComponent<Props> = ({ element }) => {
   const [start, end] = element.path.map((p) => new Point(p.x, p.y));
@@ -12,10 +13,11 @@ export const UMLPetriNetArcComponent: FunctionComponent<Props> = ({ element }) =
 
   const displayMultiplicity = element.name !== UMLPetriNetArc.defaultMultiplicity;
 
+  const id = uuid();
   return (
     <g>
       <marker
-        id={`marker-${element.id}`}
+        id={`marker-${id}`}
         viewBox="0 0 30 30"
         markerWidth="22"
         markerHeight="30"
@@ -27,7 +29,7 @@ export const UMLPetriNetArcComponent: FunctionComponent<Props> = ({ element }) =
         <ThemedPathContrast d="M0,1 L0,29 L30,15 z" fill={element.strokeColor} />
       </marker>
       <path
-        id={`textpath-${element.id}`}
+        id={`textpath-${id}`}
         d={`
         M ${start.x} ${start.y - 10}
         L ${end.x} ${end.y - 10}
@@ -49,7 +51,7 @@ export const UMLPetriNetArcComponent: FunctionComponent<Props> = ({ element }) =
               : undefined
           }
         >
-          <textPath xlinkHref={`#textpath-${element.id}`} startOffset="50%">
+          <textPath xlinkHref={`#textpath-${id}`} startOffset="50%">
             {element.name}
           </textPath>
         </Text>
@@ -59,7 +61,7 @@ export const UMLPetriNetArcComponent: FunctionComponent<Props> = ({ element }) =
         strokeColor={element.strokeColor}
         fillColor="none"
         strokeWidth={1}
-        markerEnd={`url(#marker-${element.id})`}
+        markerEnd={`url(#marker-${id})`}
       />
     </g>
   );

src/main/packages/uml-reachability-graph/uml-reachability-graph-arc/uml-reachability-graph-arc-component.tsx

@@ -2,6 +2,7 @@ import React, { FunctionComponent } from 'react';
 import { Point } from '../../../utils/geometry/point';
 import { UMLReachabilityGraphArc } from './uml-reachability-graph-arc';
 import { ThemedPath, ThemedPolyline } from '../../../components/theme/themedComponents';
+import { uuid } from '../../../utils/uuid';
 
 export const UMLReachabilityGraphArcComponent: FunctionComponent<Props> = ({ element }) => {
   let position = { x: 0, y: 0 };
@@ -43,10 +44,11 @@ export const UMLReachabilityGraphArcComponent: FunctionComponent<Props> = ({ ele
 
   const textColor = element.textColor ? { fill: element.textColor } : {};
 
+  const id = uuid();
   return (
     <g>
       <marker
-        id={`marker-${element.id}`}
+        id={`marker-${id}`}
         viewBox={`0 0 ${30} ${30}`}
         markerWidth={22}
         markerHeight={30}
@@ -62,7 +64,7 @@ export const UMLReachabilityGraphArcComponent: FunctionComponent<Props> = ({ ele
         strokeColor={element.strokeColor}
         fillColor="none"
         strokeWidth={1}
-        markerEnd={`url(#marker-${element.id})`}
+        markerEnd={`url(#marker-${id})`}
       />
       <text x={position.x} y={position.y} {...layoutText(direction)} pointerEvents="none" style={{ ...textColor }}>
         {element.name}