WIP

Author: naraandrade

modules/apps/object/object-web/src/main/resources/META-INF/resources/js/components/ModelBuilder/Edges/DefaultEdge.tsx

@@ -16,19 +16,22 @@ import {useFolderContext} from '../ModelBuilderContext/objectFolderContext';
 import {TYPES} from '../ModelBuilderContext/typesEnum';
 import {ObjectRelationshipEdgeData} from '../types';
 import {getEdgeParams} from '../utils';
-import ManyMarkerEnd from './ManyMarkerEnd';
-import OneMarkerEnd from './OneMarkerEnd';
+import ManyMarker from './ManyMarker';
+import OneMarker from './OneMarker';
+
+const defaultColor = '#80ACFF';
+const highlightColor = '#0B5FFF';
 
 export function getInitialEdgeStyle(edgeSelected: boolean) {
 	return {
-		stroke: edgeSelected ? '#0B5FFF' : '#80ACFF',
+		stroke: edgeSelected ? highlightColor : defaultColor,
 		strokeWidth: '2px',
 	};
 }
 
 export function getInitialLabelBgStyle(edgeSelected: boolean) {
 	return {
-		fill: edgeSelected ? '#0B5FFF' : '#80ACFF',
+		fill: edgeSelected ? highlightColor : defaultColor,
 		height: '24px',
 	};
 }
@@ -72,23 +75,23 @@ export default function DefaultEdge({
 	useEffect(() => {
 		if (edgeSelected) {
 			setEdgeStyle((style) => {
-				return {...style, stroke: '#0B5FFF'};
+				return {...style, stroke: highlightColor};
 			});
 			setLabelBgStyle((style) => {
 				return {
 					...style,
-					fill: '#0B5FFF',
+					fill: highlightColor,
 				};
 			});
 		}
 		else {
 			setEdgeStyle((style) => {
-				return {...style, stroke: '#80ACFF'};
+				return {...style, stroke: defaultColor};
 			});
 			setLabelBgStyle((style) => {
 				return {
 					...style,
-					fill: '#80ACFF',
+					fill: defaultColor,
 				};
 			});
 		}
@@ -115,33 +118,33 @@ export default function DefaultEdge({
 	const edgePath = getSmoothStepPath({
 		sourcePosition: sourcePos,
 		sourceX,
-		sourceY,
+		sourceY: sourceY + currentSourceY,
 		targetPosition: targetPos,
 		targetX,
-		targetY,
+		targetY: targetY + currentTargetY,
 	});
 
 	const reverseEdgePath = getSmoothStepPath({
 		sourcePosition: targetPos,
-		sourceX,
-		sourceY,
+		sourceX: targetX,
+		sourceY: targetY + currentTargetY,
 		targetPosition: sourcePos,
-		targetX,
-		targetY,
+		targetX: sourceX,
+		targetY: sourceY + currentSourceY,
 	});
 
 	const [edgeCenterX, edgeCenterY] = getEdgeCenter({
 		sourceX,
-		sourceY,
+		sourceY: sourceY + currentSourceY,
 		targetX,
-		targetY,
+		targetY: targetY + currentTargetY,
 	});
 
 	return (
 		<g className="react-flow__connection">
-			<OneMarkerEnd />
+			<OneMarker />
 
-			<ManyMarkerEnd />
+			<ManyMarker />
 
 			<path
 				className="react-flow__edge-path"

modules/apps/object/object-web/src/main/resources/META-INF/resources/js/components/ModelBuilder/Edges/Edge.scss

@@ -1,3 +1,21 @@
-.react-flow__connection {
-	cursor: pointer;
+.lfr-objects__model-builder-self-edge-dropdown-item {
+	align-items: center;
+	display: flex;
+	justify-content: space-between;
+}
+
+.react-flow__edge {
+	.react-flow__connection {
+		cursor: pointer;
+	}
+
+	marker {
+		fill: #80acff;
+	}
+
+	&.selected {
+		marker {
+			fill: #0b5fff !important;
+		}
+	}
 }

…nts/ModelBuilder/Edges/ManyMarkerEnd.tsx …onents/ModelBuilder/Edges/ManyMarker.tsxmodules/apps/object/object-web/src/main/resources/META-INF/resources/js/components/ModelBuilder/Edges/ManyMarkerEnd.tsx renamed to modules/apps/object/object-web/src/main/resources/META-INF/resources/js/components/ModelBuilder/Edges/ManyMarker.tsx modules/apps/object/object-web/src/main/resources/META-INF/resources/js/components/ModelBuilder/Edges/ManyMarkerEnd.tsx renamed to modules/apps/object/object-web/src/main/resources/META-INF/resources/js/components/ModelBuilder/Edges/ManyMarker.tsx

@@ -7,33 +7,25 @@ import React from 'react';
 
 export const manyMarkerId = 'manyMarker';
 
-export default function ManyMarkerEnd() {
+export default function ManyMarker() {
 	return (
 		<defs>
 			<marker
-				fill="none"
 				id={manyMarkerId}
-				markerHeight="8"
-				markerWidth="20"
+				markerHeight="10"
+				markerWidth="22"
 				orient="auto"
-				refX="20"
+				refX="13"
 				refY="9"
 				viewBox="0 0 9 19"
 			>
 				<path
 					clipRule="evenodd"
 					d="M12.4788 17.7526C12.0632 18.1162 11.4314 18.0741 11.0677 17.6585L4.06772 9.65849C3.73783 9.28146 3.73783 8.71851 4.06772 8.34148L11.0677 0.341482C11.4314 -0.074154 12.0632 -0.116272 12.4788 0.24741C12.8944 0.611092 12.9366 1.24286 12.5729 1.65849L6.14907 8.99999L12.5729 16.3415C12.9366 16.7571 12.8944 17.3889 12.4788 17.7526Z"
-					fill="#0B5FFF"
 					fillRule="evenodd"
 				/>
 
-				<rect
-					fill="#0B5FFF"
-					height="18"
-					rx="1"
-					width="2"
-					x="0.820312"
-				/>
+				<rect height="18" rx="1" width="2" x="0.820312" />
 			</marker>
 		</defs>
 	);

modules/apps/object/object-web/src/main/resources/META-INF/resources/js/components/ModelBuilder/Edges/OneMarker.tsx

@@ -0,0 +1,28 @@
+/**
+ * SPDX-FileCopyrightText: (c) 2000 Liferay, Inc. https://liferay.com
+ * SPDX-License-Identifier: LGPL-2.1-or-later OR LicenseRef-Liferay-DXP-EULA-2.0.0-2023-06
+ */
+
+import React from 'react';
+
+export const oneMarkerId = 'oneMarker';
+
+export default function OneMarker() {
+	return (
+		<defs>
+			<marker
+				id={oneMarkerId}
+				markerHeight="10"
+				markerWidth="22"
+				orient="auto"
+				refX="18"
+				refY="9"
+				viewBox="0 0 9 19"
+			>
+				<rect height="18" rx="1" width="2" x="5.17969" />
+
+				<rect height="18" rx="1" width="2" x="10.1797" />
+			</marker>
+		</defs>
+	);
+}