META-INF.resources.js.components.ModelBuilder.Edges.SimpleObjectRelationshipEdge.tsx Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of com.liferay.object.web

Liferay Object Web

The newest version!

/**
 * 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 ClayButton from '@clayui/button';
import ClayIcon from '@clayui/icon';
import React, {useEffect, useRef, useState} from 'react';

import {useObjectFolderContext} from '../ModelBuilderContext/objectFolderContext';
import {TYPES} from '../ModelBuilderContext/typesEnum';
import ManyMarker from './ManyMarker';
import {BaseObjectRepationShipEdgeProps} from './ObjectRelationshipEdge';
import OneMarker from './OneMarker';

import './Edge.scss';

interface SimpleObjectRelationshipEdgeProps
	extends BaseObjectRepationShipEdgeProps {
	id: number;
	isRootStructure: boolean;
	label: string;
	markerEndId: string;
	markerStartId: string;
	reverseEdgePath?: string;
}

export function SimpleObjectRelationshipEdge({
	edgeCenterX,
	edgeCenterY,
	edgeId,
	edgePath,
	id,
	isRootStructure,
	label,
	labelBgStyle,
	labelStyle,
	markerEndId,
	markerStartId,
	objectRelationshipEdgeStyle,
	reverseEdgePath,
}: SimpleObjectRelationshipEdgeProps) {
	const buttonRef = useRef(null);
	const [_, dispatch] = useObjectFolderContext();
	const [foreignObjectWidth, setForeignObjectWidth] = useState(0);

	const foreignObjectHeight = 25;

	useEffect(() => {
		if (buttonRef.current) {
			const buttonWidth = (buttonRef.current as HTMLButtonElement)
				.offsetWidth;
			setForeignObjectWidth(buttonWidth);
		}
	}, [buttonRef, label]);

	return (
		<>
			

			
			

			
			
				 {
						dispatch({
							payload: {
								selectedObjectRelationshipId: id,
							},
							type: TYPES.SET_SELECTED_OBJECT_RELATIONSHIP_EDGE,
						});
					}}
					ref={buttonRef}
					style={{
						backgroundColor: labelBgStyle.fill,
						...labelBgStyle,
						...labelStyle,
					}}
				>
					{label}

					{isRootStructure && (
						<>
							 
							
						
					)}
				
			
		
	);
}