lmdiagram 0.2.1 → 0.2.3
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 +29 -39
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -3,25 +3,26 @@
|
|
|
3
3
|
[](LICENSE)
|
|
4
4
|
[](https://www.npmjs.com/package/lmdiagram)
|
|
5
5
|
|
|
6
|
-
|
|
6
|
+
React component for **linked-model** diagrams (draggable nodes and **associations** drawn as SVG curves). It exposes a small data-model API (`DiagramModel`, `AssociationModel`, `ControllerLM`) and a themeable UI via CSS variables.
|
|
7
7
|
|
|
8
|
-
**
|
|
8
|
+
**Current version:** 0.2.x · React 17+ (peer dependency)
|
|
9
9
|
|
|
10
10
|
---
|
|
11
|
+
<img width="1035" height="507" alt="image" src="https://github.com/user-attachments/assets/1e255ae6-76f0-4aaa-9cca-6601ec7d47d9" />
|
|
11
12
|
|
|
12
|
-
##
|
|
13
|
+
## Installation
|
|
13
14
|
|
|
14
15
|
```bash
|
|
15
16
|
npm install lmdiagram
|
|
16
17
|
```
|
|
17
18
|
|
|
18
|
-
|
|
19
|
+
Make sure React is installed in your app:
|
|
19
20
|
|
|
20
21
|
```bash
|
|
21
22
|
npm install react react-dom
|
|
22
23
|
```
|
|
23
24
|
|
|
24
|
-
##
|
|
25
|
+
## Quick start
|
|
25
26
|
|
|
26
27
|
```jsx
|
|
27
28
|
import { LMDiagram } from 'lmdiagram';
|
|
@@ -32,7 +33,7 @@ export function App() {
|
|
|
32
33
|
}
|
|
33
34
|
```
|
|
34
35
|
|
|
35
|
-
|
|
36
|
+
`LMDiagram` ships with a built-in sample (three models and two links). For your own graph, pass `buildDiagram` (ideally wrapped in `useCallback` so the controller is not recreated every render).
|
|
36
37
|
|
|
37
38
|
```jsx
|
|
38
39
|
import { useCallback } from 'react';
|
|
@@ -46,13 +47,13 @@ import 'lmdiagram/styles.css';
|
|
|
46
47
|
|
|
47
48
|
export function App() {
|
|
48
49
|
const buildDiagram = useCallback(() => {
|
|
49
|
-
const a = new DiagramModel('
|
|
50
|
+
const a = new DiagramModel('Source', 'Detail A');
|
|
50
51
|
a.setPosition(120, 80);
|
|
51
|
-
const b = new DiagramModel('
|
|
52
|
+
const b = new DiagramModel('Target', 'Detail B');
|
|
52
53
|
b.setPosition(120, 280);
|
|
53
54
|
|
|
54
55
|
const assoc = new AssociationModel();
|
|
55
|
-
assoc.setLink(a, b, '
|
|
56
|
+
assoc.setLink(a, b, 'My label'); // optional third argument: label along the path
|
|
56
57
|
|
|
57
58
|
const controller = new ControllerLM();
|
|
58
59
|
controller.setAssociations(assoc);
|
|
@@ -63,22 +64,22 @@ export function App() {
|
|
|
63
64
|
}
|
|
64
65
|
```
|
|
65
66
|
|
|
66
|
-
##
|
|
67
|
+
## Exports
|
|
67
68
|
|
|
68
|
-
| Export
|
|
69
|
-
|
|
70
|
-
| `LMDiagram`
|
|
71
|
-
| `ModalDiagrama`
|
|
72
|
-
| `DiagramModel`
|
|
73
|
-
| `AssociationModel` | `setLink(
|
|
74
|
-
| `ControllerLM`
|
|
69
|
+
| Export | Description |
|
|
70
|
+
|--------|-------------|
|
|
71
|
+
| `LMDiagram` | Main component. Props: `className`, optional `buildDiagram`. |
|
|
72
|
+
| `ModalDiagrama` | Alias for `LMDiagram` (deprecated). |
|
|
73
|
+
| `DiagramModel` | Node: `header`, `body`, `setPosition(top, left)`, `width`, `height`, etc. |
|
|
74
|
+
| `AssociationModel` | `setLink(modelA, modelB, optionalLabel)` — links and optional SVG label. |
|
|
75
|
+
| `ControllerLM` | `setAssociations(association)` — wrapper consumed by the diagram. |
|
|
75
76
|
|
|
76
|
-
##
|
|
77
|
+
## Styling
|
|
77
78
|
|
|
78
|
-
|
|
79
|
+
Styles ship with `lmdiagram/styles.css`. Customize from a parent container using CSS variables, for example:
|
|
79
80
|
|
|
80
81
|
```css
|
|
81
|
-
.
|
|
82
|
+
.my-wrapper {
|
|
82
83
|
--lm-header: linear-gradient(135deg, #0d9488, #14b8a6);
|
|
83
84
|
--lm-line: #0d9488;
|
|
84
85
|
--lm-link-label: #115e59;
|
|
@@ -86,29 +87,18 @@ Los estilos viven en `lmdiagram/styles.css`. Puedes personalizar el aspecto desd
|
|
|
86
87
|
}
|
|
87
88
|
```
|
|
88
89
|
|
|
89
|
-
##
|
|
90
|
+
## Developing this repo
|
|
90
91
|
|
|
91
|
-
|
|
|
92
|
-
|
|
93
|
-
| `npm run dev`
|
|
94
|
-
| `npm run build`
|
|
95
|
-
| `npm run build:demo` |
|
|
96
|
-
| `npm run preview` |
|
|
92
|
+
| Command | Description |
|
|
93
|
+
|---------|-------------|
|
|
94
|
+
| `npm run dev` | Dev server (Vite demo). |
|
|
95
|
+
| `npm run build` | Build the library to `dist/` (ESM + CJS + CSS). |
|
|
96
|
+
| `npm run build:demo` | Static demo build to `demo-dist/`. |
|
|
97
|
+
| `npm run preview` | Preview the last demo build. |
|
|
97
98
|
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
## Publicar en npm
|
|
101
|
-
|
|
102
|
-
1. `npm login`
|
|
103
|
-
2. `npm version patch` (o `minor` / `major`)
|
|
104
|
-
3. `npm publish`
|
|
105
|
-
|
|
106
|
-
Comprueba que el nombre `lmdiagram` esté libre o usa un nombre con scope, por ejemplo `@tu-usuario/lmdiagram`.
|
|
107
|
-
|
|
108
|
-
## Licencia
|
|
99
|
+
## License
|
|
109
100
|
|
|
110
101
|
MIT
|
|
111
102
|
|
|
112
103
|
---
|
|
113
104
|
|
|
114
|
-
*Capturas o GIF antiguos del proyecto pueden aparecer en issues; la demo actual se ejecuta con `npm run dev`.*
|