-
-
Notifications
You must be signed in to change notification settings - Fork 9
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat: add partial handling for touches * fix: fix edge creation with touches * refactor: refactor root pointer api * fix: add sharing of observables and todos * fix: do not show old curve when touch is started * refactor: move elementFromPoint to root-pointer * refactor: move handling touch over and out to separate function * feat: add schedulers * feat: add changes filtering api * fix: fix types * docs: add handling changes page
- Loading branch information
1 parent
19ef16d
commit 7504af6
Showing
22 changed files
with
685 additions
and
43 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
13 changes: 13 additions & 0 deletions
13
...es/pages/handling-changes/demo/handling-changes-demo/handling-changes-demo.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| <vflow | ||
| [nodes]="nodes" | ||
| [edges]="edges" | ||
| (onConnect)="createEdge($event)" | ||
| (onNodesChange)="handleNodeChanges($event)" | ||
| (onEdgesChange)="handleEdgeChanges($event)" | ||
| /> | ||
|
|
||
| <ng-template #toast let-ctx> | ||
| <h3>{{ ctx.data.title }}</h3> | ||
|
|
||
| <pre>{{ ctx.data.json }}</pre> | ||
| </ng-template> |
59 changes: 59 additions & 0 deletions
59
...ples/pages/handling-changes/demo/handling-changes-demo/handling-changes-demo.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| import { ChangeDetectionStrategy, Component, TemplateRef, ViewChild, inject } from '@angular/core'; | ||
| import { HotToastService } from '@ngneat/hot-toast'; | ||
| import { Connection, Edge, EdgeChange, Node, NodeChange, VflowModule } from 'projects/ngx-vflow-lib/src/public-api'; | ||
|
|
||
| @Component({ | ||
| templateUrl: './handling-changes-demo.component.html', | ||
| changeDetection: ChangeDetectionStrategy.OnPush, | ||
| standalone: true, | ||
| imports: [VflowModule], | ||
| }) | ||
| export class HandlingChangesDemoComponent { | ||
| private toast = inject(HotToastService); | ||
|
|
||
| @ViewChild('toast') | ||
| public toastTemplate!: TemplateRef<unknown>; | ||
|
|
||
| public nodes: Node[] = [ | ||
| { | ||
| id: '1', | ||
| point: { x: 100, y: 100 }, | ||
| type: 'default', | ||
| text: `1`, | ||
| }, | ||
| { | ||
| id: '2', | ||
| point: { x: 200, y: 200 }, | ||
| type: 'default', | ||
| text: `2` | ||
| }, | ||
| ] | ||
|
|
||
| public edges: Edge[] = [] | ||
|
|
||
| public createEdge({ source, target }: Connection) { | ||
| this.edges = [...this.edges, { | ||
| id: `${source} -> ${target}`, | ||
| source, | ||
| target | ||
| }] | ||
| } | ||
|
|
||
| public handleNodeChanges(changes: NodeChange[]) { | ||
| this.toast.info(this.toastTemplate, { | ||
| data: { | ||
| title: '(onNodesChange)', | ||
| json: JSON.stringify(changes, null, 2) | ||
| }, | ||
| }) | ||
| } | ||
|
|
||
| public handleEdgeChanges(changes: EdgeChange[]) { | ||
| this.toast.info(this.toastTemplate, { | ||
| data: { | ||
| title: '(onEdgesChange)', | ||
| json: JSON.stringify(changes, null, 2) | ||
| }, | ||
| }) | ||
| } | ||
| } |
18 changes: 18 additions & 0 deletions
18
...changes/demo/handling-changes-filtered-demo/handling-changes-filtered-demo.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| <button (click)="addNodes()">Add nodes</button> | ||
|
|
||
| <vflow | ||
| [nodes]="nodes" | ||
| [edges]="edges" | ||
| (onConnect)="createEdge($event)" | ||
| (onNodesChange.position.single)="handleNodePositionChange($event)" | ||
| (onNodesChange.select.single)="handleNodeSelectChange($event)" | ||
| (onNodesChange.add.many)="handleNodesAddChange($event)" | ||
| (onEdgesChange.add)="handleEdgesAddChange($event)" | ||
| /> | ||
|
|
||
| <ng-template #toast let-ctx> | ||
| <h3>{{ ctx.data.title }}</h3> | ||
|
|
||
| <pre>{{ ctx.data.json }}</pre> | ||
| </ng-template> | ||
|
|
94 changes: 94 additions & 0 deletions
94
...g-changes/demo/handling-changes-filtered-demo/handling-changes-filtered-demo.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,94 @@ | ||
| import { ChangeDetectionStrategy, Component, TemplateRef, ViewChild, inject } from '@angular/core'; | ||
| import { HotToastModule, HotToastService, provideHotToastConfig } from '@ngneat/hot-toast'; | ||
| import { Connection, Edge, EdgeChange, Node, NodeAddChange, NodeChange, NodePositionChange, NodeSelectedChange, VflowModule } from 'projects/ngx-vflow-lib/src/public-api'; | ||
|
|
||
| @Component({ | ||
| templateUrl: './handling-changes-filtered-demo.component.html', | ||
| changeDetection: ChangeDetectionStrategy.OnPush, | ||
| standalone: true, | ||
| imports: [VflowModule], | ||
| }) | ||
| export class HandlingChangesFilteredDemoComponent { | ||
| private toast = inject(HotToastService); | ||
|
|
||
| @ViewChild('toast') | ||
| public toastTemplate!: TemplateRef<unknown>; | ||
|
|
||
| public nodes: Node[] = [ | ||
| { | ||
| id: '1', | ||
| point: { x: 100, y: 100 }, | ||
| type: 'default', | ||
| text: `1`, | ||
| }, | ||
| { | ||
| id: '2', | ||
| point: { x: 200, y: 200 }, | ||
| type: 'default', | ||
| text: `2` | ||
| }, | ||
| ] | ||
|
|
||
| public edges: Edge[] = [] | ||
|
|
||
| public createEdge({ source, target }: Connection) { | ||
| this.edges = [...this.edges, { | ||
| id: `${source} -> ${target}`, | ||
| source, | ||
| target | ||
| }] | ||
| } | ||
|
|
||
| public handleNodePositionChange(change: NodePositionChange) { | ||
| this.toast.info(this.toastTemplate, { | ||
| data: { | ||
| title: '(onNodesChange.position.single)', | ||
| json: JSON.stringify(change, null, 2) | ||
| }, | ||
| }) | ||
| } | ||
|
|
||
| public handleNodeSelectChange(change: NodeSelectedChange) { | ||
| this.toast.info(this.toastTemplate, { | ||
| data: { | ||
| title: '(onNodesChange.select.single)', | ||
| json: JSON.stringify(change, null, 2) | ||
| }, | ||
| }) | ||
| } | ||
|
|
||
| public handleNodesAddChange(changes: NodeAddChange[]) { | ||
| this.toast.info(this.toastTemplate, { | ||
| data: { | ||
| title: '(onNodesChange.add.many)', | ||
| json: JSON.stringify(changes, null, 2) | ||
| }, | ||
| }) | ||
| } | ||
|
|
||
| public handleEdgesAddChange(changes: EdgeChange[]) { | ||
| this.toast.info(this.toastTemplate, { | ||
| data: { | ||
| title: '(onEdgesChange.add)', | ||
| json: JSON.stringify(changes, null, 2) | ||
| }, | ||
| }) | ||
| } | ||
|
|
||
| public addNodes() { | ||
| this.nodes = [...this.nodes, | ||
| { | ||
| id: crypto.randomUUID(), | ||
| point: { x: 0, y: 0 }, | ||
| type: 'default', | ||
| text: `random`, | ||
| }, | ||
| { | ||
| id: crypto.randomUUID(), | ||
| point: { x: 300, y: 300 }, | ||
| type: 'default', | ||
| text: `random` | ||
| }, | ||
| ] | ||
| } | ||
| } |
105 changes: 105 additions & 0 deletions
105
...ects/ngx-vflow-demo/src/app/categories/examples/pages/handling-changes/index.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,105 @@ | ||
| # {{ NgDocPage.title }} | ||
|
|
||
| > **Info** | ||
| > You can observe changes in the toasts. It's also better to see this page in desktop | ||
| You can observe a lot of changes of nodes and edges. | ||
|
|
||
| Types of `NodeChange`s: | ||
| - `position` - new node position (after drag and drop) | ||
| - `add` - when node was created | ||
| - `remove` - when node was removed | ||
| - `select` - when node was selected (also triggers for unselected nodes) | ||
|
|
||
| Types of `EdgeChange`s: | ||
| - `add` - when edge was created | ||
| - `remove` - when edge was removed | ||
| - `select` - when edge was selected (also triggers for unselected edges) | ||
| - `detached` - when edge became invisible due to unexistance of source or target node. It will help you | ||
| to delete such edges from edges list | ||
|
|
||
| There are a couple ways to receive these changes: | ||
|
|
||
| ## From (onNodesChange) and (onEdgesChange) outputs | ||
|
|
||
| This is a way to get every possible change. Changes came as non empty arrays: | ||
| - `(onNodesChange)` emits `NodeChange[]` | ||
| - `(onEdgesChange)` emits `EdgeChange[]` | ||
|
|
||
| {{ NgDocActions.demo("HandlingChangesDemoComponent", { expanded: false }) }} | ||
|
|
||
| ## From filtered outputs | ||
|
|
||
| For your convenience there is a filtering scheme for changes based on `(onNodesChange)` and `(onEdgesChange)` events: | ||
|
|
||
| - `(onNodesChange.[NodeChangeType])` - a list of node changes of certain type | ||
| - `(onNodesChange.[EdgeChangeType])` - a list of edge changes of certain type | ||
| - `(onNodesChange.[NodeChangeType].[Count])` - a list (`many`) of or single (`single`) node change of certain type | ||
| - `(onEdgesChange.[EdgeChangeType].[Count])` - a list (`many`) of or single (`single`) edge change of certain type | ||
|
|
||
| Where: | ||
|
|
||
| ```ts | ||
| type NodeChangeType = 'position' | 'add' | 'remove' | 'select' | ||
|
|
||
| type EdgeChangeType = 'detached' | 'add' | 'remove' | 'select' | ||
|
|
||
| // single - when there is only one change of this type (for example if you drag and drop some node, it's consireder as single change) | ||
| // many - when there is more than one change of this type (for example if you deleted several nodes at the same time) | ||
| type Count = 'single' | 'many' | ||
| ``` | ||
| {{ NgDocActions.demo("HandlingChangesFilteredDemoComponent", { expanded: false }) }} | ||
| List of all possible filter outputs: | ||
| ``` | ||
| 'onNodesChange.position', | ||
| 'onNodesChange.position.single', | ||
| 'onNodesChange.position.many', | ||
| 'onNodesChange.add', | ||
| 'onNodesChange.add.single', | ||
| 'onNodesChange.add.many', | ||
| 'onNodesChange.remove', | ||
| 'onNodesChange.remove.single', | ||
| 'onNodesChange.remove.many', | ||
| 'onNodesChange.select', | ||
| 'onNodesChange.select.single', | ||
| 'onNodesChange.select.many', | ||
|
|
||
| 'onEdgesChange.detached', | ||
| 'onEdgesChange.detached.single', | ||
| 'onEdgesChange.detached.many', | ||
| 'onEdgesChange.add', | ||
| 'onEdgesChange.add.single', | ||
| 'onEdgesChange.add.many', | ||
| 'onEdgesChange.remove', | ||
| 'onEdgesChange.remove.single', | ||
| 'onEdgesChange.remove.many', | ||
| 'onEdgesChange.select', | ||
| 'onEdgesChange.select.single', | ||
| 'onEdgesChange.select.many', | ||
| ``` | ||
|
|
||
| ## From componenet itself | ||
|
|
||
| ```ts | ||
| { | ||
| ... | ||
| @ViewChild(VflowComponent) | ||
| vflow: VflowComponent | ||
|
|
||
| ngAfterViewInit() { | ||
| this.vflow.nodesChange$.subscribe((changes) => { | ||
| // handle node changes | ||
| }) | ||
|
|
||
| this.vflow.edgesChange$.subscribe((changes) => { | ||
| // handle edges changes | ||
| }) | ||
| } | ||
| ... | ||
| } | ||
| ``` | ||
|
|
||
|
|
14 changes: 14 additions & 0 deletions
14
projects/ngx-vflow-demo/src/app/categories/examples/pages/handling-changes/ng-doc.page.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| import { NgDocPage } from '@ng-doc/core'; | ||
| import ExamplesCategory from '../../ng-doc.category'; | ||
| import { HandlingChangesDemoComponent } from './demo/handling-changes-demo/handling-changes-demo.component'; | ||
| import { HandlingChangesFilteredDemoComponent } from './demo/handling-changes-filtered-demo/handling-changes-filtered-demo.component'; | ||
|
|
||
| const TestPage: NgDocPage = { | ||
| title: `Handling changes`, | ||
| mdFile: './index.md', | ||
| category: ExamplesCategory, | ||
| demos: { HandlingChangesDemoComponent, HandlingChangesFilteredDemoComponent }, | ||
| order: 3 | ||
| }; | ||
|
|
||
| export default TestPage; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.