Lemoncode · brauliodiez · Aug 20, 2024 · Aug 20, 2024 · Aug 20, 2024 · Aug 20, 2024
diff --git a/public/shapes/image.svg b/public/shapes/image.svg
diff --git a/src/common/components/inline-edit/components/html-edit.widget.tsx b/src/common/components/inline-edit/components/html-edit.widget.tsx
@@ -1,16 +1,19 @@
 import { Html } from 'react-konva-utils';
 import { forwardRef } from 'react';
-import { EditType, StyleDivProps } from '../inline-edit.model';
+import { StyleDivProps } from '../inline-edit.model';
+import { EditType } from '@/core/model';
+import { ImageUploadWidget } from './image-upload.widget';
 
 interface Props {
   divProps: StyleDivProps;
   value: string;
   editType: EditType;
   onSetEditText: (e: string) => void;
+  onSetImageSrc: (e: string) => void;
 }
 
 export const HtmlEditWidget = forwardRef<any, Props>(
-  ({ divProps, onSetEditText, value, editType }, ref) => {
+  ({ divProps, onSetEditText, onSetImageSrc, value, editType }, ref) => {
     return (
       <Html
         divProps={{
@@ -39,6 +42,9 @@ export const HtmlEditWidget = forwardRef<any, Props>(
             onChange={e => onSetEditText(e.target.value)}
           />
         )}
+        {editType === 'imageupload' && (
+          <ImageUploadWidget onImageUploaded={onSetImageSrc} ref={ref} />
+        )}
       </Html>
     );
   }

diff --git a/src/common/components/inline-edit/components/image-upload.widget.module.css b/src/common/components/inline-edit/components/image-upload.widget.module.css
@@ -0,0 +1,33 @@
+.uploadContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  background-color: rgba(200, 200, 200, 0.3); /* Gris claro con opacidad */
+  border-radius: 8px; /* Bordes redondeados */
+  position: relative;
+  padding: 20px;
+}
+
+.fileInput {
+  display: none; /* Escondemos el input de archivo */
+}
+
+.uploadButton {
+  background-color: #4caf50; /* Verde */
+  border: none;
+  color: white;
+  padding: 15px 32px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  cursor: pointer;
+  border-radius: 8px;
+  transition: background-color 0.3s ease;
+}
+
+.uploadButton:hover {
+  background-color: #45a049; /* Verde más oscuro cuando se pasa el ratón por encima */
+}
diff --git a/src/common/components/inline-edit/components/image-upload.widget.tsx b/src/common/components/inline-edit/components/image-upload.widget.tsx
@@ -0,0 +1,46 @@
+import { forwardRef, useRef } from 'react';
+import classes from './image-upload.widget.module.css';
+
+interface Props {
+  onImageUploaded: (srcData: string) => void;
+}
+
+export const ImageUploadWidget = forwardRef<HTMLInputElement, Props>(
+  (props, ref) => {
+    const { onImageUploaded } = props;
+    const fileInputRef = useRef<HTMLInputElement>(null);
+
+    const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const file = e.target.files?.[0];
+      if (file) {
+        const reader = new FileReader();
+        reader.onloadend = () => {
+          if (reader.result) {
+            onImageUploaded(reader.result as string);
+          }
+        };
+        reader.readAsDataURL(file);
+      }
+    };
+
+    const handleClick = () => {
+      if (fileInputRef.current) {
+        fileInputRef.current.click();
+      }
+    };
+
+    return (
+      <div className={classes.uploadContainer} ref={ref}>
+        <input
+          type="file"
+          onChange={handleFileChange}
+          ref={fileInputRef}
+          className={classes.fileInput}
+        />
+        <button onClick={handleClick} className={classes.uploadButton}>
+          Click to upload an image
+        </button>
+      </div>
+    );
+  }
+);
diff --git a/src/common/components/inline-edit/hooks/use-submit-cancel-hook.ts b/src/common/components/inline-edit/hooks/use-submit-cancel-hook.ts
@@ -1,5 +1,5 @@
+import { EditType } from '@/core/model';
 import { useEffect, useRef, useState } from 'react';
-import { EditType } from '../inline-edit.model';
 
 interface Configuration {
   editType: EditType | undefined;
@@ -15,13 +15,26 @@ export const useSubmitCancelHook = (
   const { editType, isEditable, text, onTextSubmit } = configuration;
   const inputRef = useRef<HTMLInputElement>(null);
   const textAreaRef = useRef<HTMLTextAreaElement>(null);
+  const divRef = useRef<HTMLDivElement>(null);
+
   const [isEditing, setIsEditing] = useState(false);
 
   const getActiveInputRef = ():
     | HTMLInputElement
     | HTMLTextAreaElement
-    | null => (editType === 'input' ? inputRef.current : textAreaRef.current);
-
+    | HTMLDivElement
+    | null => {
+    switch (editType) {
+      case 'input':
+        return inputRef.current;
+      case 'textarea':
+        return textAreaRef.current;
+      case 'imageupload':
+        return divRef.current;
+      default:
+        return null;
+    }
+  };
   // handle click outside of the input when editing
   useEffect(() => {
     if (!isEditable) return;
@@ -32,7 +45,10 @@ export const useSubmitCancelHook = (
         !getActiveInputRef()?.contains(event.target as Node)
       ) {
         setIsEditing(false);
-        onTextSubmit(getActiveInputRef()?.value || '');
+        if (editType === 'input' || editType === 'textarea') {
+          const inputRef = getActiveInputRef() as any;
+          onTextSubmit(inputRef?.value || '');
+        }
       }
     };
 
@@ -44,13 +60,19 @@ export const useSubmitCancelHook = (
 
       if (editType === 'input' && isEditable && event.key === 'Enter') {
         setIsEditing(false);
-        onTextSubmit(getActiveInputRef()?.value || '');
+        if (editType === 'input' || editType === 'textarea') {
+          const inputRef = getActiveInputRef() as any;
+          onTextSubmit(inputRef?.value || '');
+        }
       }
     };
 
     if (isEditing) {
-      getActiveInputRef()?.focus();
-      getActiveInputRef()?.select();
+      if (editType === 'input' || editType === 'textarea') {
+        const inputRef = getActiveInputRef() as any;
+        inputRef?.focus();
+        inputRef?.select();
+      }
       document.addEventListener('mousedown', handleClickOutside);
       document.addEventListener('keydown', handleKeyDown);
     } else {
@@ -69,6 +91,7 @@ export const useSubmitCancelHook = (
     setIsEditing,
     inputRef,
     textAreaRef,
+    divRef,
     getActiveInputRef,
   };
 };
diff --git a/src/common/components/inline-edit/inline-edit.model.tsx b/src/common/components/inline-edit/inline-edit.model.tsx
@@ -1,4 +1,4 @@
-export type EditType = 'input' | 'textarea';
+export type EditType = 'input' | 'textarea' | 'imageupload';
 
 type PositionType = 'absolute' | 'relative' | 'fixed' | 'static';
 

diff --git a/src/common/components/inline-edit/inline-edit.tsx b/src/common/components/inline-edit/inline-edit.tsx
@@ -1,8 +1,7 @@
 import React, { useState } from 'react';
 import { Group } from 'react-konva';
-import { Coord, Size } from '@/core/model';
+import { Coord, EditType, Size } from '@/core/model';
 import { HtmlEditWidget } from './components';
-import { EditType } from './inline-edit.model';
 import { useSubmitCancelHook, usePositionHook } from './hooks';
 
 interface Props {
@@ -13,6 +12,7 @@ interface Props {
   text: string;
   scale: number;
   onTextSubmit: (text: string) => void;
+  onImageSrcSubmit: (e: string) => void;
   children: React.ReactNode;
 }
 
@@ -23,13 +23,14 @@ export const EditableComponent: React.FC<Props> = props => {
     isEditable,
     text,
     onTextSubmit,
+    onImageSrcSubmit,
     scale,
     children,
     editType,
   } = props;
   const [editText, setEditText] = useState(text);
 
-  const { inputRef, textAreaRef, isEditing, setIsEditing } =
+  const { inputRef, textAreaRef, divRef, isEditing, setIsEditing } =
     useSubmitCancelHook(
       {
         editType,
@@ -53,6 +54,11 @@ export const EditableComponent: React.FC<Props> = props => {
     calculateHeight,
   } = usePositionHook(coords, size, scale);
 
+  const handleImageSrcSubmit = (src: string) => {
+    onImageSrcSubmit(src);
+    setIsEditing(false);
+  };
+
   return (
     <>
       <Group onDblClick={handleDoubleClick}>{children}</Group>
@@ -65,9 +71,16 @@ export const EditableComponent: React.FC<Props> = props => {
             width: calculateWidth(),
             height: calculateHeight(),
           }}
-          ref={editType === 'input' ? inputRef : textAreaRef}
+          ref={
+            editType === 'input'
+              ? inputRef
+              : editType === 'imageupload'
+                ? divRef
+                : textAreaRef
+          }
           value={editText}
           onSetEditText={setEditText}
+          onSetImageSrc={handleImageSrcSubmit}
           editType={editType ?? 'input'}
         />
       ) : null}

diff --git a/src/core/model/index.ts b/src/core/model/index.ts
@@ -91,7 +91,7 @@ export const ShapeDisplayName: Record<ShapeType, string> = {
   image: 'Image',
 };
 
-export type EditType = 'input' | 'textarea';
+export type EditType = 'input' | 'textarea' | 'imageupload';
 
 export type ShapeRefs = {
   [key: string]: React.RefObject<any>;

diff --git a/src/pods/basic-shapes-gallery/basic-gallery-data/index.ts b/src/pods/basic-shapes-gallery/basic-gallery-data/index.ts
@@ -9,4 +9,5 @@ export const mockBasicShapesCollection: ItemInfo[] = [
   { thumbnailSrc: '/shapes/circle.svg', type: 'circle' },
   { thumbnailSrc: '/shapes/star.svg', type: 'star' },
   { thumbnailSrc: '/shapes/largeArrow.svg', type: 'largeArrow' },
+  { thumbnailSrc: '/shapes/image.svg', type: 'image' },
 ];
diff --git a/src/pods/canvas/canvas.model.ts b/src/pods/canvas/canvas.model.ts
@@ -272,6 +272,7 @@ const doesShapeAllowInlineEdition = (shapeType: ShapeType): boolean => {
     case 'smalltext':
     case 'paragraph':
     case 'listbox':
+    case 'image':
       return true;
     default:
       return false;
@@ -354,6 +355,9 @@ const getShapeEditInlineType = (shapeType: ShapeType): EditType | undefined => {
     case 'listbox':
       return 'textarea';
       break;
+    case 'image':
+      return 'imageupload';
+      break;
   }
   return result;
 };

diff --git a/src/pods/canvas/canvas.pod.tsx b/src/pods/canvas/canvas.pod.tsx
@@ -35,6 +35,7 @@ export const CanvasPod = () => {
     selectedShapeRef,
     selectedShapeId,
     updateTextOnSelected,
+    updateOtherPropsOnSelected,
   } = selectionInfo;
 
   const addNewShapeAndSetSelected = (type: ShapeType, x: number, y: number) => {
@@ -144,6 +145,9 @@ export const CanvasPod = () => {
                   isEditable={shape.allowsInlineEdition}
                   text={shape.text ?? ''}
                   onTextSubmit={updateTextOnSelected}
+                  onImageSrcSubmit={srcData =>
+                    updateOtherPropsOnSelected('imageSrc', srcData)
+                  }
                   scale={scale}
                   editType={shape.editType ?? 'input'}
                 >

diff --git a/src/pods/canvas/shape-renderer/simple-basic-shapes/image.renderer.tsx b/src/pods/canvas/shape-renderer/simple-basic-shapes/image.renderer.tsx
@@ -24,6 +24,8 @@ export const renderImage = (
       onDragEnd={handleDragEnd(shape.id)}
       onTransform={handleTransform}
       onTransformEnd={handleTransform}
+      isEditable={shape.allowsInlineEdition}
+      editType={shape.editType}
       otherProps={shape.otherProps}
     />
   );