lmdiagram 0.2.0 → 0.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +82 -47
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,79 +1,114 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
# lmdiagram
|
|
4
2
|
|
|
5
|
-
|
|
3
|
+
[](LICENSE)
|
|
4
|
+
[](https://www.npmjs.com/package/lmdiagram)
|
|
6
5
|
|
|
7
|
-
|
|
6
|
+
Componente React para diagramas con **modelos enlazados** (nodos arrastrables y **asociaciones** con curvas SVG). Incluye API basada en clases de datos (`DiagramModel`, `AssociationModel`, `ControllerLM`) y una UI actualizable con variables CSS.
|
|
8
7
|
|
|
9
|
-
|
|
8
|
+
**Versión actual:** 0.2.x · React 17+ (peer dependency)
|
|
10
9
|
|
|
11
|
-
|
|
10
|
+
---
|
|
12
11
|
|
|
12
|
+
## Instalación
|
|
13
13
|
|
|
14
|
-
|
|
14
|
+
```bash
|
|
15
|
+
npm install lmdiagram
|
|
16
|
+
```
|
|
15
17
|
|
|
16
|
-
|
|
18
|
+
Asegúrate de tener React en tu proyecto:
|
|
17
19
|
|
|
18
|
-
|
|
20
|
+
```bash
|
|
21
|
+
npm install react react-dom
|
|
22
|
+
```
|
|
19
23
|
|
|
20
|
-
|
|
21
|
-
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
|
|
24
|
+
## Uso rápido
|
|
22
25
|
|
|
23
|
-
|
|
24
|
-
|
|
26
|
+
```jsx
|
|
27
|
+
import { LMDiagram } from 'lmdiagram';
|
|
28
|
+
import 'lmdiagram/styles.css';
|
|
25
29
|
|
|
26
|
-
|
|
30
|
+
export function App() {
|
|
31
|
+
return <LMDiagram />;
|
|
32
|
+
}
|
|
33
|
+
```
|
|
27
34
|
|
|
28
|
-
|
|
29
|
-
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
|
|
35
|
+
El componente `LMDiagram` incluye un ejemplo por defecto (tres modelos y dos enlaces). Para un grafo propio, usa `buildDiagram` (idealmente con `useCallback` para no recrear el objeto en cada render).
|
|
30
36
|
|
|
31
|
-
|
|
37
|
+
```jsx
|
|
38
|
+
import { useCallback } from 'react';
|
|
39
|
+
import {
|
|
40
|
+
LMDiagram,
|
|
41
|
+
DiagramModel,
|
|
42
|
+
AssociationModel,
|
|
43
|
+
ControllerLM,
|
|
44
|
+
} from 'lmdiagram';
|
|
45
|
+
import 'lmdiagram/styles.css';
|
|
32
46
|
|
|
33
|
-
|
|
34
|
-
|
|
47
|
+
export function App() {
|
|
48
|
+
const buildDiagram = useCallback(() => {
|
|
49
|
+
const a = new DiagramModel('Origen', 'Detalle A');
|
|
50
|
+
a.setPosition(120, 80);
|
|
51
|
+
const b = new DiagramModel('Destino', 'Detalle B');
|
|
52
|
+
b.setPosition(120, 280);
|
|
35
53
|
|
|
36
|
-
|
|
37
|
-
|
|
54
|
+
const assoc = new AssociationModel();
|
|
55
|
+
assoc.setLink(a, b, 'Mi etiqueta'); // tercer argumento opcional: texto sobre el trazo
|
|
38
56
|
|
|
39
|
-
|
|
57
|
+
const controller = new ControllerLM();
|
|
58
|
+
controller.setAssociations(assoc);
|
|
59
|
+
return controller;
|
|
60
|
+
}, []);
|
|
40
61
|
|
|
41
|
-
|
|
62
|
+
return <LMDiagram buildDiagram={buildDiagram} />;
|
|
63
|
+
}
|
|
64
|
+
```
|
|
42
65
|
|
|
43
|
-
|
|
66
|
+
## API exportada
|
|
44
67
|
|
|
45
|
-
|
|
68
|
+
| Export | Descripción |
|
|
69
|
+
|-------------------|-------------|
|
|
70
|
+
| `LMDiagram` | Componente principal. Props: `className`, `buildDiagram` (opcional). |
|
|
71
|
+
| `ModalDiagrama` | Alias de `LMDiagram` (deprecado). |
|
|
72
|
+
| `DiagramModel` | Nodo: `header`, `body`, `setPosition(top, left)`, `width`, `height`, etc. |
|
|
73
|
+
| `AssociationModel` | `setLink(modeloA, modeloB, etiquetaOpcional)` — enlaces y etiqueta en SVG. |
|
|
74
|
+
| `ControllerLM` | `setAssociations(association)` — contenedor que usa el diagrama. |
|
|
46
75
|
|
|
47
|
-
|
|
76
|
+
## Estados y estilos
|
|
48
77
|
|
|
49
|
-
|
|
78
|
+
Los estilos viven en `lmdiagram/styles.css`. Puedes personalizar el aspecto desde un contenedor padre usando variables CSS, por ejemplo:
|
|
50
79
|
|
|
51
|
-
|
|
80
|
+
```css
|
|
81
|
+
.mi-contenedor {
|
|
82
|
+
--lm-header: linear-gradient(135deg, #0d9488, #14b8a6);
|
|
83
|
+
--lm-line: #0d9488;
|
|
84
|
+
--lm-link-label: #115e59;
|
|
85
|
+
--lm-link-label-stroke: #ffffff;
|
|
86
|
+
}
|
|
87
|
+
```
|
|
52
88
|
|
|
53
|
-
|
|
89
|
+
## Desarrollo en este repositorio
|
|
54
90
|
|
|
55
|
-
|
|
91
|
+
| Comando | Descripción |
|
|
92
|
+
|----------------|-------------|
|
|
93
|
+
| `npm run dev` | Servidor de desarrollo (demo con Vite). |
|
|
94
|
+
| `npm run build` | Genera la librería en `dist/` (ESM + CJS + CSS). |
|
|
95
|
+
| `npm run build:demo` | Build estático de la demo en `demo-dist/`. |
|
|
96
|
+
| `npm run preview` | Previsualiza el último build de demo. |
|
|
56
97
|
|
|
57
|
-
|
|
98
|
+
Antes de publicar en npm, `prepublishOnly` ejecuta automáticamente `npm run build`.
|
|
58
99
|
|
|
59
|
-
|
|
100
|
+
## Publicar en npm
|
|
60
101
|
|
|
61
|
-
|
|
102
|
+
1. `npm login`
|
|
103
|
+
2. `npm version patch` (o `minor` / `major`)
|
|
104
|
+
3. `npm publish`
|
|
62
105
|
|
|
63
|
-
|
|
106
|
+
Comprueba que el nombre `lmdiagram` esté libre o usa un nombre con scope, por ejemplo `@tu-usuario/lmdiagram`.
|
|
64
107
|
|
|
65
|
-
|
|
108
|
+
## Licencia
|
|
66
109
|
|
|
67
|
-
|
|
110
|
+
MIT
|
|
68
111
|
|
|
69
|
-
|
|
112
|
+
---
|
|
70
113
|
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
### Deployment
|
|
74
|
-
|
|
75
|
-
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
|
|
76
|
-
|
|
77
|
-
### `npm run build` fails to minify
|
|
78
|
-
|
|
79
|
-
This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify
|
|
114
|
+
*Capturas o GIF antiguos del proyecto pueden aparecer en issues; la demo actual se ejecuta con `npm run dev`.*
|