refacto table const

Lemoncode · Jan 6, 2024 · 31de394 · 31de394
1 parent 9a36224
commit 31de394
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 66 deletions.
diff --git a/src/core/providers/canvas-schema/canvas-relationycoordinate.bussiness.spec.ts b/src/core/providers/canvas-schema/canvas-relationycoordinate.bussiness.spec.ts
@@ -1,7 +1,7 @@
 import { GUID } from '@/core/model';
 
 import { TableVm } from './canvas-schema.model';
-import { HEADER_HEIGHT, ROW_HEIGHT } from './canvas.const';
+import { TABLE_CONST } from './canvas.const';
 import {
   YRelationCoords,
   calculateRelationYCoordinate,
@@ -33,7 +33,8 @@ describe('canvas.business.calculateRelationYOffset', () => {
       y: 0,
     };
 
-    const expectedYPosition = table.y + HEADER_HEIGHT + ROW_HEIGHT / 2;
+    const expectedYPosition =
+      table.y + TABLE_CONST.HEADER_HEIGHT + TABLE_CONST.ROW_HEIGHT / 2;
 
     // Act
     const result = calculateRelationYOffset(fieldId, table);
@@ -66,9 +67,10 @@ describe('canvas.business.calculateRelationYOffset', () => {
       y: 0,
     };
 
-    const headerOffset = table.y + HEADER_HEIGHT;
+    const headerOffset = table.y + TABLE_CONST.HEADER_HEIGHT;
 
-    const expectedYPosition = headerOffset + ROW_HEIGHT + ROW_HEIGHT / 2;
+    const expectedYPosition =
+      headerOffset + TABLE_CONST.ROW_HEIGHT + TABLE_CONST.ROW_HEIGHT / 2;
 
     // Act
     const result = calculateRelationYOffset(fieldId, table);
@@ -120,9 +122,10 @@ describe('canvas.business.calculateRelationYOffset', () => {
       y: 0,
     };
 
-    const headerOffset = table.y + HEADER_HEIGHT;
+    const headerOffset = table.y + TABLE_CONST.HEADER_HEIGHT;
 
-    const expectedYPosition = headerOffset + ROW_HEIGHT * 2 + ROW_HEIGHT / 2;
+    const expectedYPosition =
+      headerOffset + TABLE_CONST.ROW_HEIGHT * 2 + TABLE_CONST.ROW_HEIGHT / 2;
 
     // Act
     const result = calculateRelationYOffset(fieldId, table);
@@ -174,9 +177,10 @@ describe('canvas.business.calculateRelationYOffset', () => {
       y: 200,
     };
 
-    const headerOffset = table.y + HEADER_HEIGHT;
+    const headerOffset = table.y + TABLE_CONST.HEADER_HEIGHT;
 
-    const expectedYPosition = headerOffset + ROW_HEIGHT * 2 + ROW_HEIGHT / 2;
+    const expectedYPosition =
+      headerOffset + TABLE_CONST.ROW_HEIGHT * 2 + TABLE_CONST.ROW_HEIGHT / 2;
 
     // Act
     const result = calculateRelationYOffset(fieldId, table);
@@ -229,9 +233,10 @@ describe('canvas.business.calculateRelationYOffset', () => {
       y: 0,
     };
 
-    const headerOffset = table.y + HEADER_HEIGHT;
+    const headerOffset = table.y + TABLE_CONST.HEADER_HEIGHT;
 
-    const expectedYPosition = headerOffset + ROW_HEIGHT * 2 + ROW_HEIGHT / 2;
+    const expectedYPosition =
+      headerOffset + TABLE_CONST.ROW_HEIGHT * 2 + TABLE_CONST.ROW_HEIGHT / 2;
 
     // Act
     const result = calculateRelationYOffset(fieldId, table);
@@ -314,8 +319,9 @@ describe('canvas.business.calculateRelationYOffset', () => {
       y: 0,
     };
 
-    const headerOffset = table.y + HEADER_HEIGHT;
-    const expectedYPosition = headerOffset + ROW_HEIGHT * 5 + ROW_HEIGHT / 2;
+    const headerOffset = table.y + TABLE_CONST.HEADER_HEIGHT;
+    const expectedYPosition =
+      headerOffset + TABLE_CONST.ROW_HEIGHT * 5 + TABLE_CONST.ROW_HEIGHT / 2;
 
     // Act
     const result = calculateRelationYOffset(fieldId, table);
@@ -414,8 +420,9 @@ describe('canvas.business.calculateRelationYOffset', () => {
       y: 0,
     };
 
-    const headerOffset = table.y + HEADER_HEIGHT;
-    const expectedYPosition = headerOffset + ROW_HEIGHT * 5 + ROW_HEIGHT / 2;
+    const headerOffset = table.y + TABLE_CONST.HEADER_HEIGHT;
+    const expectedYPosition =
+      headerOffset + TABLE_CONST.ROW_HEIGHT * 5 + TABLE_CONST.ROW_HEIGHT / 2;
 
     // Act
     const result = calculateRelationYOffset(fieldId, table);
@@ -514,8 +521,9 @@ describe('canvas.business.calculateRelationYOffset', () => {
       y: 0,
     };
 
-    const headerOffset = table.y + HEADER_HEIGHT;
-    const expectedYPosition = headerOffset + ROW_HEIGHT * 2 + ROW_HEIGHT / 2;
+    const headerOffset = table.y + TABLE_CONST.HEADER_HEIGHT;
+    const expectedYPosition =
+      headerOffset + TABLE_CONST.ROW_HEIGHT * 2 + TABLE_CONST.ROW_HEIGHT / 2;
 
     // Act
     const result = calculateRelationYOffset(fieldId, table);
@@ -621,8 +629,9 @@ describe('canvas.business.calculateRelationYOffset', () => {
       y: 0,
     };
 
-    const headerOffset = table.y + HEADER_HEIGHT;
-    const expectedYPosition = headerOffset + ROW_HEIGHT * 7 + ROW_HEIGHT / 2;
+    const headerOffset = table.y + TABLE_CONST.HEADER_HEIGHT;
+    const expectedYPosition =
+      headerOffset + TABLE_CONST.ROW_HEIGHT * 7 + TABLE_CONST.ROW_HEIGHT / 2;
 
     // Act
     const result = calculateRelationYOffset(fieldId, table);
@@ -694,13 +703,18 @@ describe(calculateRelationYCoordinate, () => {
       y: 200,
     };
 
-    const headerOffsetOrigin = tableOrigin.y + HEADER_HEIGHT;
-    const headerOffsetDestination = tableDestination.y + HEADER_HEIGHT;
+    const headerOffsetOrigin = tableOrigin.y + TABLE_CONST.HEADER_HEIGHT;
+    const headerOffsetDestination =
+      tableDestination.y + TABLE_CONST.HEADER_HEIGHT;
 
     const expectedYPositionOrigin =
-      headerOffsetOrigin + ROW_HEIGHT * 2 + ROW_HEIGHT / 2;
+      headerOffsetOrigin +
+      TABLE_CONST.ROW_HEIGHT * 2 +
+      TABLE_CONST.ROW_HEIGHT / 2;
     const expectedYPositionDestination =
-      headerOffsetDestination + ROW_HEIGHT + ROW_HEIGHT / 2;
+      headerOffsetDestination +
+      TABLE_CONST.ROW_HEIGHT +
+      TABLE_CONST.ROW_HEIGHT / 2;
 
     const expectedYRelationCoords: YRelationCoords = {
       yOrigin: expectedYPositionOrigin,

diff --git a/src/core/providers/canvas-schema/canvas.business.ts b/src/core/providers/canvas-schema/canvas.business.ts
@@ -4,7 +4,7 @@ import {
   FieldVm,
   TableVm,
 } from '@/core/providers/canvas-schema';
-import { DEFAULT_TABLE_WIDTH, HEADER_HEIGHT, ROW_HEIGHT } from './canvas.const';
+import { TABLE_CONST } from './canvas.const';
 
 export interface UpdateInfo {
   id: GUID;
@@ -27,7 +27,7 @@ export const calculateTablePosition = (
           0,
           Math.min(
             updateInfo.position.x,
-            canvasSize.width - DEFAULT_TABLE_WIDTH
+            canvasSize.width - TABLE_CONST.DEFAULT_TABLE_WIDTH
           )
         ),
         y: Math.max(
@@ -81,15 +81,15 @@ export const calculateRelationXCoordinateOrigin = (
   tableDestination: TableVm
 ): number =>
   tableOrigin.x < tableDestination.x
-    ? tableOrigin.x + DEFAULT_TABLE_WIDTH
+    ? tableOrigin.x + TABLE_CONST.DEFAULT_TABLE_WIDTH
     : tableOrigin.x;
 
 export const calculateRelationXCoordinateEnd = (
   tableOrigin: TableVm,
   tableDestination: TableVm
 ): number =>
   tableDestination.x < tableOrigin.x
-    ? tableDestination.x + DEFAULT_TABLE_WIDTH
+    ? tableDestination.x + TABLE_CONST.DEFAULT_TABLE_WIDTH
     : tableDestination.x;
 
 export interface XRelationCoords {
@@ -126,7 +126,8 @@ const doesFieldContainsChildren = (field: FieldVm) =>
 const addFieldRowHeight = (
   YPosition: number,
   parentCollapsed: boolean
-): number => (!parentCollapsed ? YPosition + ROW_HEIGHT : YPosition);
+): number =>
+  !parentCollapsed ? YPosition + TABLE_CONST.ROW_HEIGHT : YPosition;
 
 const isParentCollapsedOrCurrentNodeCollapsed = (
   parentCollapsed: boolean,
@@ -181,13 +182,13 @@ export const calculateRelationYOffset = (
   fieldId: GUID,
   table: TableVm
 ): number => {
-  const initialYPosition = table.y + HEADER_HEIGHT;
+  const initialYPosition = table.y + TABLE_CONST.HEADER_HEIGHT;
   const result = seekField(
     fieldId,
     { found: false, YPosition: initialYPosition, parentCollapsed: false },
     table.fields
   );
-  const center = result.YPosition + ROW_HEIGHT / 2;
+  const center = result.YPosition + TABLE_CONST.ROW_HEIGHT / 2;
 
   return center;
 };

diff --git a/src/core/providers/canvas-schema/canvas.const.ts b/src/core/providers/canvas-schema/canvas.const.ts
@@ -1,10 +1,23 @@
-export const FONT_SIZE = 14;
-export const ROW_PADDING = 10;
-export const LEVEL_INDENTATION = 20; // Indentation per level in nested view
-export const COLLAPSE_ICON_X = 5; // X position of the collapse icon
-export const FIELD_NAME_X_OFFSET = 20; // Initial X offset for the field name
-export const FIELD_TYPE_X = 160; // X position for the field type
-export const TABLE_WIDTH = 300; // Width of the table rectangle
-export const HEADER_HEIGHT = FONT_SIZE + ROW_PADDING; // Height of the table header
-export const DEFAULT_TABLE_WIDTH = 300;
-export const ROW_HEIGHT = FONT_SIZE + ROW_PADDING; // Height of the table line
+const FONT_SIZE = 14;
+const ROW_PADDING = 10;
+const LEVEL_INDENTATION = 20; // Indentation per level in nested view
+const COLLAPSE_ICON_X = 5; // X position of the collapse icon
+const FIELD_NAME_X_OFFSET = 20; // Initial X offset for the field name
+const FIELD_TYPE_X = 160; // X position for the field type
+const TABLE_WIDTH = 300; // Width of the table rectangle
+const HEADER_HEIGHT = FONT_SIZE + ROW_PADDING; // Height of the table header
+const DEFAULT_TABLE_WIDTH = 300;
+const ROW_HEIGHT = FONT_SIZE + ROW_PADDING; // Height of the table line
+
+export const TABLE_CONST = {
+  FONT_SIZE,
+  ROW_PADDING,
+  LEVEL_INDENTATION,
+  COLLAPSE_ICON_X,
+  FIELD_NAME_X_OFFSET,
+  FIELD_TYPE_X,
+  TABLE_WIDTH,
+  HEADER_HEIGHT,
+  DEFAULT_TABLE_WIDTH,
+  ROW_HEIGHT,
+};
diff --git a/src/pods/canvas/components/table/database-table-row.component.tsx b/src/pods/canvas/components/table/database-table-row.component.tsx
@@ -1,12 +1,6 @@
 import { GUID } from '@/core/model';
 import { FieldVm, TableVm } from '@/core/providers/canvas-schema';
-import {
-  COLLAPSE_ICON_X,
-  FIELD_NAME_X_OFFSET,
-  FIELD_TYPE_X,
-  FONT_SIZE,
-  LEVEL_INDENTATION,
-} from '@/core/providers/canvas-schema';
+import { TABLE_CONST } from '@/core/providers/canvas-schema';
 import classes from './database-table.module.css';
 
 interface Props {
@@ -26,26 +20,30 @@ export const DatabaseTableRow: React.FC<Props> = props => {
 
   return (
     <g key={field.id} transform={`translate(0, ${currentY})`}>
-      <g transform={`translate(${level * LEVEL_INDENTATION}, 0)`}>
+      <g transform={`translate(${level * TABLE_CONST.LEVEL_INDENTATION}, 0)`}>
         {isExpandable && (
           <text
-            x={COLLAPSE_ICON_X}
-            y={FONT_SIZE}
+            x={TABLE_CONST.COLLAPSE_ICON_X}
+            y={TABLE_CONST.FONT_SIZE}
             className={classes.tableTextRow}
             onClick={() => onToggleCollapse(tableInfo.id, field.id)}
           >
             {isExpanded ? '▼' : '►'}
           </text>
         )}
         <text
-          x={FIELD_NAME_X_OFFSET + (isExpandable ? 15 : 0)}
-          y={FONT_SIZE}
+          x={TABLE_CONST.FIELD_NAME_X_OFFSET + (isExpandable ? 15 : 0)}
+          y={TABLE_CONST.FONT_SIZE}
           className={classes.tableTextRow}
         >
           {field.name}
         </text>
       </g>
-      <text x={FIELD_TYPE_X} y={FONT_SIZE} className={classes.tableTextRow}>
+      <text
+        x={TABLE_CONST.FIELD_TYPE_X}
+        y={TABLE_CONST.FONT_SIZE}
+        className={classes.tableTextRow}
+      >
         {field.type}
       </text>
     </g>

diff --git a/src/pods/canvas/components/table/database-table.component.tsx b/src/pods/canvas/components/table/database-table.component.tsx
@@ -4,12 +4,7 @@ import { Coords, GUID, Size } from '@/core/model';
 import { FieldVm, TableVm } from '@/core/providers/canvas-schema';
 import classes from './database-table.module.css';
 import { useDraggable } from './table-drag.hook';
-import {
-  FONT_SIZE,
-  ROW_PADDING,
-  TABLE_WIDTH,
-  HEADER_HEIGHT,
-} from '@/core/providers/canvas-schema';
+import { TABLE_CONST } from '@/core/providers/canvas-schema';
 import { DatabaseTableRow } from './database-table-row.component';
 
 interface Props {
@@ -30,7 +25,7 @@ export const DatabaseTable: React.FC<Props> = ({
   updatePosition,
   onToggleCollapse,
 }) => {
-  const rowHeight = FONT_SIZE + ROW_PADDING;
+  const rowHeight = TABLE_CONST.FONT_SIZE + TABLE_CONST.ROW_PADDING;
 
   const renderRows = (
     fields: FieldVm[],
@@ -75,8 +70,12 @@ export const DatabaseTable: React.FC<Props> = ({
     JSX.Element[],
     number,
   ] => {
-    const [rows, totalY] = renderRows(tableInfo.fields, 0, HEADER_HEIGHT);
-    return [rows, totalY + ROW_PADDING]; // Ajuste para el padding final
+    const [rows, totalY] = renderRows(
+      tableInfo.fields,
+      0,
+      TABLE_CONST.HEADER_HEIGHT
+    );
+    return [rows, totalY + TABLE_CONST.ROW_PADDING]; // Ajuste para el padding final
   }, [tableInfo.fields]);
 
   const { onMouseDown } = useDraggable(
@@ -99,19 +98,19 @@ export const DatabaseTable: React.FC<Props> = ({
       <rect
         x="0"
         y="0"
-        width={TABLE_WIDTH}
+        width={TABLE_CONST.TABLE_WIDTH}
         height={totalHeight}
         className={classes.tableBackground}
       />
       <rect
         x="0"
         y="0"
-        width={TABLE_WIDTH}
-        height={HEADER_HEIGHT}
+        width={TABLE_CONST.TABLE_WIDTH}
+        height={TABLE_CONST.HEADER_HEIGHT}
         className={classes.tableHeader}
         onDoubleClick={handleDoubleClick}
       />
-      <text x="10" y={FONT_SIZE} className={classes.tableText}>
+      <text x="10" y={TABLE_CONST.FONT_SIZE} className={classes.tableText}>
         {tableInfo.tableName}
       </text>
 
@@ -120,7 +119,7 @@ export const DatabaseTable: React.FC<Props> = ({
       <rect
         x="0"
         y="0"
-        width={TABLE_WIDTH}
+        width={TABLE_CONST.TABLE_WIDTH}
         height={totalHeight}
         className={classes.table}
       />