lmdiagram 0.2.0 → 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 +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
|
+
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.
|
|
8
7
|
|
|
9
|
-
|
|
8
|
+
**Current version:** 0.2.x · React 17+ (peer dependency)
|
|
10
9
|
|
|
11
|
-
|
|
10
|
+
---
|
|
12
11
|
|
|
12
|
+
## Installation
|
|
13
13
|
|
|
14
|
-
|
|
14
|
+
```bash
|
|
15
|
+
npm install lmdiagram
|
|
16
|
+
```
|
|
15
17
|
|
|
16
|
-
|
|
18
|
+
Make sure React is installed in your app:
|
|
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
|
+
## Quick start
|
|
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
|
+
`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).
|
|
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('Source', 'Detail A');
|
|
50
|
+
a.setPosition(120, 80);
|
|
51
|
+
const b = new DiagramModel('Target', 'Detail B');
|
|
52
|
+
b.setPosition(120, 280);
|
|
35
53
|
|
|
36
|
-
|
|
37
|
-
|
|
54
|
+
const assoc = new AssociationModel();
|
|
55
|
+
assoc.setLink(a, b, 'My label'); // optional third argument: label along the path
|
|
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
|
+
## Exports
|
|
44
67
|
|
|
45
|
-
|
|
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. |
|
|
46
75
|
|
|
47
|
-
|
|
76
|
+
## Styling
|
|
48
77
|
|
|
49
|
-
|
|
78
|
+
Styles ship with `lmdiagram/styles.css`. Customize from a parent container using CSS variables, for example:
|
|
50
79
|
|
|
51
|
-
|
|
80
|
+
```css
|
|
81
|
+
.my-wrapper {
|
|
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
|
+
## Developing this repo
|
|
54
90
|
|
|
55
|
-
|
|
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. |
|
|
56
97
|
|
|
57
|
-
|
|
98
|
+
Before publishing, `prepublishOnly` runs `npm run build` automatically.
|
|
58
99
|
|
|
59
|
-
|
|
100
|
+
## Publishing to npm
|
|
60
101
|
|
|
61
|
-
|
|
102
|
+
1. `npm login`
|
|
103
|
+
2. `npm version patch` (or `minor` / `major`)
|
|
104
|
+
3. `npm publish`
|
|
62
105
|
|
|
63
|
-
|
|
106
|
+
Confirm the name `lmdiagram` is available, or use a scoped name such as `@your-username/lmdiagram`.
|
|
64
107
|
|
|
65
|
-
|
|
108
|
+
## License
|
|
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
|
+
*Older screenshots or GIFs may appear in issues; run the current demo with `npm run dev`.*
|