From c36233071e68272297775f1db478532b3e1abe2e Mon Sep 17 00:00:00 2001 From: Harsimar Singh Date: Sun, 10 Nov 2024 22:12:55 -0500 Subject: [PATCH] Implemented node resizing correctly --- client/src/components/UMLClassNode.tsx | 191 ++--- client/src/components/UMLInterfaceNode.tsx | 96 ++- client/src/pages/Editor.tsx | 11 +- package-lock.json | 918 +++++++++++++++++++-- package.json | 3 +- 5 files changed, 1035 insertions(+), 184 deletions(-) diff --git a/client/src/components/UMLClassNode.tsx b/client/src/components/UMLClassNode.tsx index 548eb03..9c6a1b6 100644 --- a/client/src/components/UMLClassNode.tsx +++ b/client/src/components/UMLClassNode.tsx @@ -1,7 +1,6 @@ -import React, { useState, useEffect, useRef } from 'react'; -import { Handle, Position, NodeProps } from '@xyflow/react'; +import { useState, useEffect, useRef } from 'react'; +import { Handle, Position, NodeProps, NodeResizer, NodeResizeControl } from '@xyflow/react'; import { memo } from 'react'; -import { NodeResizer, NodeResizeControl } from '@xyflow/react'; interface UMLNodeData { label?: string; @@ -15,7 +14,7 @@ interface UMLNodeData { interface UMLNodeProps extends NodeProps {} -const UMLClassNode: React.FC = ({ data, id }) => { +const UMLClassNode: React.FC = ({ data, id, selected }) => { const [label, setLabel] = useState(data.label || 'ClassName'); const [attributes, setAttributes] = useState(data.attributes?.join('\n') || ''); const [methods, setMethods] = useState(data.methods?.join('\n') || ''); @@ -26,36 +25,28 @@ const UMLClassNode: React.FC = ({ data, id }) => { const labelRef = useRef(null); const nodeRef = useRef(null); - - const [nodeWidth, setNodeWidth] = useState(200); // Initial width - + const [nodeWidth, setNodeWidth] = useState(200); + const [nodeHeight, setNodeHeight] = useState(200); useEffect(() => { - // Dynamically adjust the width based on content let maxWidth = 150; - - if (methodsRef.current) { - methodsRef.current.style.height = 'auto'; - methodsRef.current.style.height = `${methodsRef.current.scrollHeight}px`; - } - if (attributesRef.current) { - attributesRef.current.style.height = 'auto'; - attributesRef.current.style.height = `${attributesRef.current.scrollHeight}px`; - } const fontSize = 14; const fontFamily = 'Arial, sans-serif'; const font = `${fontSize}px ${fontFamily}`; + let labelWidth = 0; if (labelRef.current) { const labelText = labelRef.current.value; labelWidth = measureTextWidth(labelText, font); } + let attributesMaxWidth = 0; const attributesLines = attributes.split('\n'); attributesLines.forEach(line => { const lineWidth = measureTextWidth(line, font); attributesMaxWidth = Math.max(attributesMaxWidth, lineWidth); }); + let methodsMaxWidth = 0; const methodsLines = methods.split('\n'); methodsLines.forEach(line => { @@ -95,32 +86,51 @@ const UMLClassNode: React.FC = ({ data, id }) => { data.updateNodeData?.(id, { methods: newMethods.split('\n') }); }; - const updateMinHeightandWidth = () => { - const attributesHeight = attributesRef.current?.scrollHeight || 0; - const methodsHeight = methodsRef.current?.scrollHeight || 0; - if (nodeRef.current){ - nodeRef.current.style.height = `${attributesHeight + methodsHeight + 100}px`; - } - }; - - - useEffect(() => { - updateMinHeightandWidth(); // Update height on initial load and whenever text changes - }, [attributes, methods]); + const controlStyle = { + background: 'transparent', + border: 'none', + }; + function ResizeIcon() { + return ( + + + + + + + + ); + } return ( <> + + + +
= ({ data, id }) => { textAlign: 'center', fontWeight: 'bold', position: 'relative', + flexShrink: 0, }} > = ({ data, id }) => { placeholder="Class Name" style={{ width: '100%', - height: '100%', border: 'none', backgroundColor: 'transparent', textAlign: 'center', @@ -166,43 +176,58 @@ const UMLClassNode: React.FC = ({ data, id }) => { X
-
-