neogestify-ui-components 2.0.0 → 2.0.1

package/README.md

@@ -491,17 +491,53 @@ Los elementos que aparecen en la paleta del editor se definen en archivos JSON q
 }
 ```
 
+#### Formas personalizadas SVG (`shape: "path"`)
+
+Ahora puedes definir cualquier figura SVG usando un path:
+
+```json
+{
+  "mi_libreria": {
+    "name": "Mi librería",
+    "objects": [
+      {
+        "id": "STAR",
+        "label": "Estrella",
+        "shape": "path",
+        "svgPath": "M50 5 L61 35 L95 35 L68 57 L79 91 L50 70 L21 91 L32 57 L5 35 L39 35 Z",
+        "viewBox": "0 0 100 100",
+        "defaultWidth": 60,
+        "defaultHeight": 60,
+        "color": "#facc15",
+        "strokeColor": "#ca8a04"
+      }
+    ]
+  }
+}
+```
+
+**Propiedades para `shape: "path"`:**
+
+| Campo | Tipo | Default | Descripción |
+|-------|------|---------|-------------|
+| `svgPath` | `string` | **requerido** | El atributo `d` del elemento `<path>` SVG |
+| `viewBox` | `string` | `"0 0 100 100"` | Espacio de coordenadas del path (formato: `"minX minY width height"`) |
+
+> **Nota:** El path se escala automáticamente para llenar el bounding box `width × height` del elemento. El `strokeWidth` se compensa por el factor de escala para que sea visualmente consistente con los otros shapes.
+
 #### Propiedades de cada objeto
 
 | Campo | Tipo | Descripción |
 |-------|------|-------------|
 | `id` | `string` | Identificador único del tipo. Debe ser **único en toda la librería**. Se usa como key en `onElementTypeClick`. |
 | `label` | `string` | Nombre visible en la paleta. |
-| `shape` | `"rect" \| "circle" \| "arrow"` | Forma del objeto en el canvas. |
+| `shape` | `"rect" \| "circle" \| "arrow" \| "path"` | Forma del objeto en el canvas. |
 | `defaultWidth` | `number` | Ancho inicial al colocar el elemento (unidades de canvas ≈ píxeles a zoom 1×). |
 | `defaultHeight` | `number` | Alto inicial. |
 | `color` | `string` | Color de relleno (cualquier valor CSS: `#hex`, `rgb()`, `hsl()`, etc.). |
 | `strokeColor` | `string` | Color del borde. |
+| `svgPath` | `string` | **Requerido si `shape="path"`**. Atributo `d` del path SVG. |
+| `viewBox` | `string` | **Opcional si `shape="path"`**. ViewBox del path (default: `"0 0 100 100"`). |
 
 #### Formas disponibles
 
@@ -510,6 +546,11 @@ Los elementos que aparecen en la paleta del editor se definen en archivos JSON q
 | `rect` | Rectángulo | Mesas, espacios de parqueo, habitaciones |
 | `circle` | Elipse (círculo si `width === height`) | Mesas redondas, columnas, plantas |
 | `arrow` | Flecha apuntando a la derecha | Entradas, salidas, sentidos de circulación |
+| `path` | Forma SVG personalizada | Logos, iconos, estrellas, formas complejas |
+
+#### Colisión con el piso
+
+La detección de colisión con el piso usa un **cuadrado de lado `min(width, height)` centrado en el elemento**, en vez del bounding box completo. Esto evita que formas que no llenan su bounding box (estrellas, iconos, logos) queden excesivamente restringidas al moverse cerca del borde del piso.
 
 #### Varios grupos en un archivo
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "neogestify-ui-components",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Biblioteca de componentes UI reutilizables con React, Tailwind y SweetAlert, con VenueMapEditor o editor de mapas basico",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",