Prototipo DnD

Descripción del componente

Usuarios: Médicos

El prototipo permite generar marcas que ayudarán al médico a guardar información sobre zonas específicas del paciente.

Descripción de la funcionalidad

El usuario puede ingresar descripciones de lo que quieren señalar, y agregarlas al gráfico, estas marcas mostrarán el contenido ingresado al pasar el mouse sobre ellas. El usuario tendrá además la capacidad de guardar estas marcas en una base de datos, y de eliminarlas arrastrándolas a la esquina inferior derecha.

Diagrama de flujo

Diagrama

Librerías utilizadas

React
react-dnd
reactstrap
- tooltip
firebase

Estructura del proyecto y descripción general

Se utilizo como base el Ejemplo de custom drag layer de la documentación de react DnD

📦src

┣ 📂components

┃ ┗ 📂DragAndDrop

┃ ┃ ┣ 📂box

┃ ┃ ┃ ┣ 📜Box.jsx: Contenido y estructura de las marcas

┃ ┃ ┃ ┣ 📜BoxDragPreview.jsx: Animación de la marca al ser arastrada

┃ ┃ ┃ ┗ 📜DraggableBox.jsx: Logica de movimiento de la marca

┃ ┃ ┣ 📂call: Llamada de la aplicación

┃ ┃ ┃ ┣ 📜example.js

┃ ┃ ┃ ┗ 📜Example.jsx

┃ ┃ ┣ 📂Container

┃ ┃ ┃ ┣ 📜Container.jsx: Contenedor de la aplicación

┃ ┃ ┃ ┗ 📜CustomDragLayer.jsx: Genera la drag layer

┃ ┃ ┗ 📂itemTypes

┃ ┃ ┃ ┗ 📜ItemTypes.js: Identifica la etiqueta Box

┣ 📂Config

┃ ┗ 📜firebase.js: Configuración de la base de datos

┣ 📂Consultas

┃ ┗ 📜dnd-Medic.js: Consulta a la base de datos

┗ 📜index.js: Main

Código relevante

Para cambiar la imagen de fondo tenemos que cambiar la variable “backgroundImageURL” ubicada en el archivo “Container.jsx”.

const backgroundImageURL = "https://image.com/background.png";
const styles = {
  width: 750,
  height: 750,
  border: "1px solid black",
  position: "relative",
  backgroundImage: `url(${backgroundImageURL})`,
  backgroundRepeat: "no-repeat",
  backgroundPosition: "center",
};

Para cambiar la imagen de las marcas, tenemos que modificar la variable “boxImage” del archivo “Box.jsx”

 const boxImage= "https://image.com/marca.png"
    return (
      <div
        style={{ ...styles, backgroundColor }}
        role={preview ? "BoxPreview" : "Box"}
      >
        <img
          src={boxImage}
          alt="crossair"
          style={{
            height: "30px",
            display: "flex",
            justifyContent: "center",
            // filter: "invert(100%)",
          }}
        />
      </div>
    );

by : @chey3002

chey3002 / Drag-And-Drop-React-prototype