feat(file-tree): enable manual height resizing while preserving content adaptation when switching between sizes

Author: gustedeveloper

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

@@ -1,6 +1,7 @@
 import { ElementSize, Size } from '@/core/model';
 import { useCanvasContext } from '@/core/providers';
 import { useEffect, useRef } from 'react';
+import { FileTreeItem, FileTreeSizeValues } from './file-tree.model';
 
 // Hook to resize edition text area based on content
 const useFileTreeResizeOnContentChange = (
@@ -54,6 +55,8 @@ const useFileTreeResizeOnSizeChange = (
   id: string,
   coords: { x: number; y: number },
   currentSize: Size,
+  treeItems: FileTreeItem[],
+  sizeValues: FileTreeSizeValues,
   size?: ElementSize
 ) => {
   const previousSize = useRef(size);
@@ -66,22 +69,34 @@ const useFileTreeResizeOnSizeChange = (
 
       const newWidth = size === 'XS' ? 150 : 230;
 
-      if (currentSize.width !== newWidth) {
+      const minContentHeight =
+        treeItems && sizeValues
+          ? treeItems.length * sizeValues.elementHeight +
+            sizeValues.paddingY * 2
+          : currentSize.height;
+
+      if (
+        currentSize.width !== newWidth ||
+        currentSize.height !== minContentHeight
+      ) {
         updateShapeSizeAndPosition(
           id,
           coords,
-          { width: newWidth, height: currentSize.height },
+          { width: newWidth, height: minContentHeight },
           false
         );
       }
     }
   }, [
     size,
     currentSize.width,
+    currentSize.height,
     id,
     coords.x,
     coords.y,
     updateShapeSizeAndPosition,
+    treeItems,
+    sizeValues,
   ]);
 };
 
@@ -92,6 +107,8 @@ export const useFileTreeResize = (
   currentSize: Size,
   calculatedSize: Size,
   minHeight: number,
+  treeItems: FileTreeItem[],
+  sizeValues: FileTreeSizeValues,
   size?: ElementSize
 ) => {
   useFileTreeResizeOnContentChange(
@@ -103,5 +120,13 @@ export const useFileTreeResize = (
     minHeight
   );
 
-  useFileTreeResizeOnSizeChange(id, coords, currentSize, size);
+  useFileTreeResizeOnSizeChange(
+    id,
+    coords,
+    currentSize,
+
+    treeItems,
+    sizeValues,
+    size
+  );
 };

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

@@ -1,17 +1,11 @@
 import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes';
 import { ElementSize, ShapeSizeRestrictions, Size } from '@/core/model';
 import { FONT_SIZE_VALUES } from '../../front-components/shape.const';
-
-interface FileTreeSizeValues {
-  fontSize: number;
-  iconDimension: number;
-  elementHeight: number;
-  paddingX: number;
-  paddingY: number;
-  extraTextTopPadding: number;
-  iconTextSpacing: number;
-  indentationStep: number;
-}
+import {
+  FileTreeDynamicSizeParams,
+  FileTreeItem,
+  FileTreeSizeValues,
+} from './file-tree.model';
 
 export const getFileTreeSizeValues = (
   size?: ElementSize
@@ -53,28 +47,6 @@ export const getFileTreeSizeValues = (
   }
 };
 
-export const joinTextContent = (text: string): string[] => {
-  return text.split(', ');
-};
-
-// Symbol -> + Folder - Subfolder * File
-// Level -> Level 0: no indentation in Folder / Level 1: 1 indentation (3 spaces) in Subfolder / Level 2: 2 indentations (6 spaces) in File
-export interface FileTreeItem {
-  type: 'folder' | 'subfolder' | 'file';
-  text: string;
-  level: number;
-}
-
-interface FileTreeDynamicSizeParams {
-  width: number;
-  elementHeight: number;
-  paddingY: number;
-  paddingX: number;
-  iconDimension: number;
-  indentationStep: number;
-  baseRestrictions: ShapeSizeRestrictions;
-}
-
 export const parseFileTreeText = (text: string): FileTreeItem[] => {
   return text
     .split('\n')
@@ -128,6 +100,7 @@ export const calculateFileTreeDynamicSize = (
 ): Size => {
   const {
     width,
+    height,
     elementHeight,
     paddingY,
     paddingX,
@@ -151,7 +124,7 @@ export const calculateFileTreeDynamicSize = (
     defaultHeight: minContentHeight,
   };
 
-  const finalHeight = minContentHeight;
+  const finalHeight = Math.max(height, minContentHeight);
 
   return fitSizeToShapeSizeRestrictions(
     dynamicRestrictions,

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

@@ -8,11 +8,11 @@ import { useShapeProps } from '@/common/components/shapes/use-shape-props.hook';
 import { BASIC_SHAPE } from '../../front-components/shape.const';
 import {
   calculateFileTreeDynamicSize,
-  FileTreeItem,
   getFileTreeSizeValues,
   parseFileTreeText,
 } from './file-tree.business';
 import { useFileTreeResize } from './file-tree-resize.hook';
+import { FileTreeItem } from './file-tree.model';
 
 const fileTreeShapeRestrictions: ShapeSizeRestrictions = {
   minWidth: 150,
@@ -74,6 +74,7 @@ export const FileTreeShape = forwardRef<any, FileTreeShapeProps>(
 
     const restrictedSize = calculateFileTreeDynamicSize(treeItems, {
       width,
+      height,
       elementHeight,
       paddingY,
       paddingX,
@@ -89,6 +90,17 @@ export const FileTreeShape = forwardRef<any, FileTreeShapeProps>(
       { width, height },
       restrictedSize,
       fileTreeShapeRestrictions.minHeight,
+      treeItems,
+      {
+        fontSize,
+        iconDimension,
+        elementHeight,
+        extraTextTopPadding,
+        paddingX,
+        paddingY,
+        iconTextSpacing,
+        indentationStep,
+      },
       otherProps?.size
     );