lmdiagram 0.2.1 → 0.2.2
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 +33 -33
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -3,25 +3,25 @@
|
|
|
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
11
|
|
|
12
|
-
##
|
|
12
|
+
## Installation
|
|
13
13
|
|
|
14
14
|
```bash
|
|
15
15
|
npm install lmdiagram
|
|
16
16
|
```
|
|
17
17
|
|
|
18
|
-
|
|
18
|
+
Make sure React is installed in your app:
|
|
19
19
|
|
|
20
20
|
```bash
|
|
21
21
|
npm install react react-dom
|
|
22
22
|
```
|
|
23
23
|
|
|
24
|
-
##
|
|
24
|
+
## Quick start
|
|
25
25
|
|
|
26
26
|
```jsx
|
|
27
27
|
import { LMDiagram } from 'lmdiagram';
|
|
@@ -32,7 +32,7 @@ export function App() {
|
|
|
32
32
|
}
|
|
33
33
|
```
|
|
34
34
|
|
|
35
|
-
|
|
35
|
+
`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
36
|
|
|
37
37
|
```jsx
|
|
38
38
|
import { useCallback } from 'react';
|
|
@@ -46,13 +46,13 @@ import 'lmdiagram/styles.css';
|
|
|
46
46
|
|
|
47
47
|
export function App() {
|
|
48
48
|
const buildDiagram = useCallback(() => {
|
|
49
|
-
const a = new DiagramModel('
|
|
49
|
+
const a = new DiagramModel('Source', 'Detail A');
|
|
50
50
|
a.setPosition(120, 80);
|
|
51
|
-
const b = new DiagramModel('
|
|
51
|
+
const b = new DiagramModel('Target', 'Detail B');
|
|
52
52
|
b.setPosition(120, 280);
|
|
53
53
|
|
|
54
54
|
const assoc = new AssociationModel();
|
|
55
|
-
assoc.setLink(a, b, '
|
|
55
|
+
assoc.setLink(a, b, 'My label'); // optional third argument: label along the path
|
|
56
56
|
|
|
57
57
|
const controller = new ControllerLM();
|
|
58
58
|
controller.setAssociations(assoc);
|
|
@@ -63,22 +63,22 @@ export function App() {
|
|
|
63
63
|
}
|
|
64
64
|
```
|
|
65
65
|
|
|
66
|
-
##
|
|
66
|
+
## Exports
|
|
67
67
|
|
|
68
|
-
| Export
|
|
69
|
-
|
|
70
|
-
| `LMDiagram`
|
|
71
|
-
| `ModalDiagrama`
|
|
72
|
-
| `DiagramModel`
|
|
73
|
-
| `AssociationModel` | `setLink(
|
|
74
|
-
| `ControllerLM`
|
|
68
|
+
| Export | Description |
|
|
69
|
+
|--------|-------------|
|
|
70
|
+
| `LMDiagram` | Main component. Props: `className`, optional `buildDiagram`. |
|
|
71
|
+
| `ModalDiagrama` | Alias for `LMDiagram` (deprecated). |
|
|
72
|
+
| `DiagramModel` | Node: `header`, `body`, `setPosition(top, left)`, `width`, `height`, etc. |
|
|
73
|
+
| `AssociationModel` | `setLink(modelA, modelB, optionalLabel)` — links and optional SVG label. |
|
|
74
|
+
| `ControllerLM` | `setAssociations(association)` — wrapper consumed by the diagram. |
|
|
75
75
|
|
|
76
|
-
##
|
|
76
|
+
## Styling
|
|
77
77
|
|
|
78
|
-
|
|
78
|
+
Styles ship with `lmdiagram/styles.css`. Customize from a parent container using CSS variables, for example:
|
|
79
79
|
|
|
80
80
|
```css
|
|
81
|
-
.
|
|
81
|
+
.my-wrapper {
|
|
82
82
|
--lm-header: linear-gradient(135deg, #0d9488, #14b8a6);
|
|
83
83
|
--lm-line: #0d9488;
|
|
84
84
|
--lm-link-label: #115e59;
|
|
@@ -86,29 +86,29 @@ Los estilos viven en `lmdiagram/styles.css`. Puedes personalizar el aspecto desd
|
|
|
86
86
|
}
|
|
87
87
|
```
|
|
88
88
|
|
|
89
|
-
##
|
|
89
|
+
## Developing this repo
|
|
90
90
|
|
|
91
|
-
|
|
|
92
|
-
|
|
93
|
-
| `npm run dev`
|
|
94
|
-
| `npm run build`
|
|
95
|
-
| `npm run build:demo` |
|
|
96
|
-
| `npm run preview` |
|
|
91
|
+
| Command | Description |
|
|
92
|
+
|---------|-------------|
|
|
93
|
+
| `npm run dev` | Dev server (Vite demo). |
|
|
94
|
+
| `npm run build` | Build the library to `dist/` (ESM + CJS + CSS). |
|
|
95
|
+
| `npm run build:demo` | Static demo build to `demo-dist/`. |
|
|
96
|
+
| `npm run preview` | Preview the last demo build. |
|
|
97
97
|
|
|
98
|
-
|
|
98
|
+
Before publishing, `prepublishOnly` runs `npm run build` automatically.
|
|
99
99
|
|
|
100
|
-
##
|
|
100
|
+
## Publishing to npm
|
|
101
101
|
|
|
102
102
|
1. `npm login`
|
|
103
|
-
2. `npm version patch` (
|
|
103
|
+
2. `npm version patch` (or `minor` / `major`)
|
|
104
104
|
3. `npm publish`
|
|
105
105
|
|
|
106
|
-
|
|
106
|
+
Confirm the name `lmdiagram` is available, or use a scoped name such as `@your-username/lmdiagram`.
|
|
107
107
|
|
|
108
|
-
##
|
|
108
|
+
## License
|
|
109
109
|
|
|
110
110
|
MIT
|
|
111
111
|
|
|
112
112
|
---
|
|
113
113
|
|
|
114
|
-
*
|
|
114
|
+
*Older screenshots or GIFs may appear in issues; run the current demo with `npm run dev`.*
|