ngx-vflow 0.1.12 → 0.1.13

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.
Files changed (2) hide show
  1. package/README.md +64 -12
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,24 +1,76 @@
1
1
  # ngx-vflow
2
2
 
3
- This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.2.0.
3
+ ngx-vflow is an Angular library for creating node-based applications. It aims to assist you in building anything from a static diagram to a visual editor. You can utilize the default design or apply your own by customizing everything using familiar technologies.
4
4
 
5
- ## Code scaffolding
5
+ ## Installation
6
6
 
7
- Run `ng generate component component-name --project ngx-vflow-lib` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ngx-vflow-lib`.
8
- > Note: Don't forget to add `--project ngx-vflow-lib` or else it will be added to the default project in your `angular.json` file.
7
+ ```
8
+ npm i ngx-vflow --save
9
+ ```
9
10
 
10
- ## Build
11
+ ## Basic Example
11
12
 
12
- Run `ng build ngx-vflow-lib` to build the project. The build artifacts will be stored in the `dist/` directory.
13
+ The following code describes 3 nodes and creates 2 edges between them.
13
14
 
14
- ## Publishing
15
+ ```ts
16
+ @Component({
17
+ template: `<vflow [nodes]="nodes" [edges]="edges" />`,
18
+ changeDetection: ChangeDetectionStrategy.OnPush,
19
+ standalone: true,
20
+ imports: [VflowModule]
21
+ })
22
+ export class DefaultEdgesDemoComponent {
23
+ public nodes: Node[] = [
24
+ {
25
+ id: '1',
26
+ point: { x: 10, y: 200 },
27
+ type: 'default',
28
+ text: '1'
29
+ },
30
+ {
31
+ id: '2',
32
+ point: { x: 200, y: 100 },
33
+ type: 'default',
34
+ text: '2'
35
+ },
36
+ {
37
+ id: '3',
38
+ point: { x: 200, y: 300 },
39
+ type: 'default',
40
+ text: '3'
41
+ },
42
+ ]
15
43
 
16
- After building your library with `ng build ngx-vflow-lib`, go to the dist folder `cd dist/ngx-vflow-lib` and run `npm publish`.
44
+ public edges: Edge[] = [
45
+ {
46
+ id: '1 -> 2',
47
+ source: '1',
48
+ target: '2'
49
+ },
50
+ {
51
+ id: '1 -> 3',
52
+ source: '1',
53
+ target: '3'
54
+ },
55
+ ]
56
+ }
57
+ ```
17
58
 
18
- ## Running unit tests
59
+ The code above renders to this:
19
60
 
20
- Run `ng test ngx-vflow-lib` to execute the unit tests via [Karma](https://karma-runner.github.io).
61
+ <img width="400" alt="image" src="https://github.com/artem-mangilev/ngx-vflow/assets/53087914/d9a920d8-5114-489a-acb4-031239fcdf35">
21
62
 
22
- ## Further help
63
+ For more complex example you may see the documentation: https://www.ngx-vflow.org/
23
64
 
24
- To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
65
+ ## API
66
+
67
+ `vflow` component API is described here: https://www.ngx-vflow.org/api/ngx-vflow/classes/VflowComponent
68
+
69
+ Host directives for `vflow` that you may find helpful:
70
+
71
+ - https://www.ngx-vflow.org/api/ngx-vflow/classes/ConnectionControllerDirective
72
+ - https://www.ngx-vflow.org/api/ngx-vflow/classes/ChangesControllerDirective
73
+
74
+ ## License
75
+
76
+ MIT
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ngx-vflow",
3
- "version": "0.1.12",
3
+ "version": "0.1.13",
4
4
  "license": "MIT",
5
5
  "homepage": "https://github.com/artem-mangilev/ngx-vflow#readme",
6
6
  "author": "Artem Mangilev",