feat(file-tree): Implement dynamic height adaptation based on content

Author: gustedeveloper

src/common/components/mock-components/front-rich-components/file-tree/file-tree.business.ts

@@ -1,3 +1,6 @@
+import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes';
+import { ShapeSizeRestrictions, Size } from '@/core/model';
+
 export const joinTextContent = (text: string): string[] => {
   return text.split(', ');
 };
@@ -8,6 +11,14 @@ export interface FileTreeItem {
   text: string;
 }
 
+interface FileTreeDynamicSizeParams {
+  width: number;
+  height: number;
+  elementHeight: number;
+  paddingY: number;
+  baseRestrictions: ShapeSizeRestrictions;
+}
+
 export const parseFileTreeText = (text: string): FileTreeItem[] => {
   return text
     .split(',')
@@ -46,3 +57,32 @@ export const parseFileTreeText = (text: string): FileTreeItem[] => {
     })
     .filter((item): item is FileTreeItem => item !== null);
 };
+
+export const calculateFileTreeDynamicSize = (
+  treeItems: FileTreeItem[],
+  params: FileTreeDynamicSizeParams
+): Size => {
+  const { width, height, elementHeight, paddingY, baseRestrictions } = params;
+
+  // Calculate minimum height required based on content
+  const minContentHeight = treeItems.length * elementHeight + paddingY * 2;
+
+  // Create dynamic constraints with adaptive minimum height
+  const dynamicRestrictions: ShapeSizeRestrictions = {
+    ...baseRestrictions,
+    minHeight: minContentHeight,
+    defaultHeight: Math.max(
+      baseRestrictions.defaultHeight || 280,
+      minContentHeight
+    ),
+  };
+
+  // Use the user's current height, but ensure that it is not less than minContentHeight.
+  const finalHeight = Math.max(height, minContentHeight);
+
+  return fitSizeToShapeSizeRestrictions(
+    dynamicRestrictions,
+    width,
+    finalHeight
+  );
+};

src/common/components/mock-components/front-rich-components/file-tree/file-tree.tsx

@@ -2,12 +2,14 @@ import { ShapeSizeRestrictions, ShapeType } from '@/core/model';
 import { forwardRef, useEffect, useState } from 'react';
 import { Group, Image, Rect, Text } from 'react-konva';
 import { ShapeProps } from '../../shape.model';
-import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes';
 import { useGroupShapeProps } from '../../mock-components.utils';
 import { loadSvgWithFill } from '@/common/utils/svg.utils';
 import { useShapeProps } from '@/common/components/shapes/use-shape-props.hook';
 import { BASIC_SHAPE } from '../../front-components/shape.const';
-import { parseFileTreeText } from './file-tree.business';
+import {
+  calculateFileTreeDynamicSize,
+  parseFileTreeText,
+} from './file-tree.business';
 
 const fileTreeShapeRestrictions: ShapeSizeRestrictions = {
   minWidth: 220,
@@ -51,20 +53,23 @@ export const FileTreeShape = forwardRef<any, FileTreeShapeProps>(
       }
     );
 
-    const restrictedSize = fitSizeToShapeSizeRestrictions(
-      fileTreeShapeRestrictions,
-      width,
-      height
-    );
-    const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
-
     const iconWidth = 50;
     const elementHeight = 60;
     const paddingX = 40;
-    const paddingTop = 30;
+    const paddingY = 30;
     const fileX = 50 + paddingX;
     const iconTextSpacing = 10;
 
+    const restrictedSize = calculateFileTreeDynamicSize(treeItems, {
+      width,
+      height,
+      elementHeight,
+      paddingY,
+      baseRestrictions: fileTreeShapeRestrictions,
+    });
+
+    const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
+
     const folderTextX = iconWidth + iconTextSpacing + paddingX;
     const fileTextX = fileX + iconWidth + iconTextSpacing;
 
@@ -102,7 +107,7 @@ export const FileTreeShape = forwardRef<any, FileTreeShapeProps>(
           x={0}
           y={0}
           width={restrictedWidth}
-          height={restrictedHeight + 20}
+          height={restrictedHeight}
           stroke={stroke}
           strokeWidth={2}
           fill={fill}
@@ -116,14 +121,14 @@ export const FileTreeShape = forwardRef<any, FileTreeShapeProps>(
               <Image
                 image={icons[item.type]!}
                 x={item.type === 'file' ? fileX : paddingX}
-                y={paddingTop + elementHeight * index}
+                y={paddingY + elementHeight * index}
                 width={iconWidth}
                 height={iconWidth}
               />
             )}
             <Text
               x={item.type === 'file' ? fileTextX : folderTextX}
-              y={paddingTop + elementHeight * index + 20}
+              y={paddingY + elementHeight * index + 20}
               text={item.text}
               width={
                 item.type === 'file' ? fileAvailableWidth : folderAvailableWidth