META-INF.resources.js.components.ModelBuilder.ObjectDefinitionNode.ObjectDefinitionNode.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 {stringUtils} from '@liferay/object-js-components-web';
import classNames from 'classnames';
import React, {useRef} from 'react';
import {Handle, NodeProps, Position, useStore} from 'react-flow-renderer';

import {getObjectDefinitionNodeActions} from '../../ViewObjectDefinitions/objectDefinitionUtil';
import {useObjectFolderContext} from '../ModelBuilderContext/objectFolderContext';
import {TYPES} from '../ModelBuilderContext/typesEnum';
import {ObjectDefinitionNodeFields} from './ObjectDefinitionNodeFields';
import ObjectDefinitionNodeFooter from './ObjectDefinitionNodeFooter';
import ObjectDefinitionNodeHeader from './ObjectDefinitionNodeHeader';

import './NodeContainer.scss';

const selfRelationshipHandleStyle = {
	background: 'transparent',
	border: '2px transparent',
	borderRadius: '50%',
};
export function ObjectDefinitionNode({
	data: {
		dbTableName,
		defaultLanguageId,
		externalReferenceCode,
		hasObjectDefinitionDeleteResourcePermission,
		hasObjectDefinitionManagePermissionsResourcePermission,
		hasObjectDefinitionUpdateResourcePermission,
		id,
		label,
		linkedObjectDefinition,
		name,
		objectFields,
		rootObjectDefinitionExternalReferenceCode,
		selected,
		showAllObjectFields,
		status,
		system,
	},
}: NodeProps) {
	const [
		{
			baseResourceURL,
			nodeHandleConnectable,
			objectDefinitionPermissionsURL,
			objectFolders,
		},
		dispatch,
	] = useObjectFolderContext();

	const store = useStore();

	const nodeHandlePosition: {
		[key: string]: Position;
	} = {
		bottom: Position.Bottom,
		left: Position.Left,
		right: Position.Right,
		top: Position.Top,
	};

	const nodeHandleRefs: {
		[key: string]: React.RefObject;
	} = {
		bottom: useRef(null),
		left: useRef(null),
		right: useRef(null),
		top: useRef(null),
	};

	const displayNodeHandles = (display: boolean) => {
		for (const key in nodeHandleRefs) {
			const handleRef = nodeHandleRefs[key].current;

			if (handleRef) {
				handleRef.style.opacity = display ? '1' : '0';
			}
		}
	};

	const isTreeStructure = !!rootObjectDefinitionExternalReferenceCode;

	const isRootNode =
		externalReferenceCode === rootObjectDefinitionExternalReferenceCode;

	const isRootDescendantNode = isTreeStructure && !isRootNode;

	const handleSelectObjectDefinitionNode = () => {
		const {edges, nodes} = store.getState();

		dispatch({
			payload: {
				objectDefinitionNodes: nodes,
				objectRelationshipEdges: edges,
				selectedObjectDefinitionId: id.toString(),
			},
			type: TYPES.SET_SELECTED_OBJECT_DEFINITION_NODE,
		});
	};

	return (
		<>
			 {
					displayNodeHandles(true);
				}}
				onMouseLeave={() => {
					displayNodeHandles(false);
				}}
			>
				

				

				

				<>
					{Object.keys(nodeHandleRefs).map((position) => (
						
					))}
				
				<>
					

					
					
				
			
		
	);
}