Merge pull request #648 from rojasadrian012/601-Add-editable-title-to…

…-modal-dialog Feature/#601 Add editable title to modal dialog
Lemoncode · Jan 4, 2025 · 25c2ad1 · 25c2ad1
2 parents 1f4c4f2 + 10ad433
commit 25c2ad1
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 2 deletions.
diff --git a/src/common/components/mock-components/front-containers/modal-dialog-shape.tsx b/src/common/components/mock-components/front-containers/modal-dialog-shape.tsx
@@ -4,6 +4,7 @@ import { ShapeSizeRestrictions, ShapeType } from '@/core/model';
 import { ShapeProps } from '../shape.model';
 import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
 import { useGroupShapeProps } from '../mock-components.utils';
+import { BASIC_SHAPE } from '../front-components/shape.const';
 
 const modalDialogShapeSizeRestrictions: ShapeSizeRestrictions = {
   minWidth: 250,
@@ -21,14 +22,14 @@ const shapeType: ShapeType = 'modalDialog';
 
 export const ModalDialogContainer = forwardRef<any, ShapeProps>(
   (props, ref) => {
-    const { x, y, width, height, id, onSelected, ...shapeProps } = props;
+    const { x, y, width, height, id, onSelected, text, ...shapeProps } = props;
     const restrictedSize = fitSizeToShapeSizeRestrictions(
       modalDialogShapeSizeRestrictions,
       width,
       height
     );
     const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
-
+    const margin = 10;
     const titleBarHeight = 50;
 
     const commonGroupProps = useGroupShapeProps(
@@ -61,6 +62,16 @@ export const ModalDialogContainer = forwardRef<any, ShapeProps>(
           strokeWidth={2}
           fill="lightgray"
         />
+        <Text
+          x={margin * 3}
+          y={margin * 2}
+          text={text}
+          fontFamily={BASIC_SHAPE.DEFAULT_FONT_FAMILY}
+          fontSize={12}
+          fill="black"
+          ellipsis={true}
+          wrap="none"
+        />
 
         {/* (X) */}
         <Group x={restrictedWidth - 40} y={10}>

diff --git a/src/pods/canvas/model/inline-editable.model.ts b/src/pods/canvas/model/inline-editable.model.ts
@@ -35,6 +35,7 @@ const inlineEditableShapes = new Set<ShapeType>([
   'timepickerinput',
   'datepickerinput',
   'browser',
+  'modalDialog',
 ]);
 
 // Check if a shape type allows inline editing
@@ -74,6 +75,7 @@ const shapeTypesWithDefaultText = new Set<ShapeType>([
   'timepickerinput',
   'datepickerinput',
   'browser',
+  'modalDialog',
 ]);
 
 // Map of ShapeTypes to their default text values
@@ -110,6 +112,7 @@ const defaultTextValueMap: Partial<Record<ShapeType, string>> = {
   timepickerinput: 'hh:mm',
   datepickerinput: new Date().toLocaleDateString(),
   browser: 'https://example.com',
+  modalDialog: 'Title here...',
 };
 
 export const generateDefaultTextValue = (

diff --git a/src/pods/canvas/shape-renderer/simple-container/modal-dialog-container.renderer.tsx b/src/pods/canvas/shape-renderer/simple-container/modal-dialog-container.renderer.tsx
@@ -24,6 +24,8 @@ export const renderModalDialogContainer = (
       onDragEnd={handleDragEnd(shape.id)}
       onTransform={handleTransform}
       onTransformEnd={handleTransform}
+      isEditable={shape.allowsInlineEdition}
+      text={shape.text}
     />
   );
 };