ngx-vflow 1.10.0 → 1.10.1
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/esm2022/lib/vflow/components/edge/edge.component.mjs +3 -3
- package/esm2022/lib/vflow/components/node/node.component.mjs +3 -3
- package/esm2022/lib/vflow/components/vflow/vflow.component.mjs +3 -9
- package/esm2022/lib/vflow/directives/selectable.directive.mjs +3 -3
- package/esm2022/lib/vflow/services/edge-rendering.service.mjs +1 -3
- package/esm2022/lib/vflow/services/node-rendering.service.mjs +2 -6
- package/fesm2022/ngx-vflow.mjs +10 -260
- package/fesm2022/ngx-vflow.mjs.map +1 -1
- package/lib/vflow/components/vflow/vflow.component.d.ts +0 -4
- package/lib/vflow/services/edge-rendering.service.d.ts +0 -1
- package/lib/vflow/services/node-rendering.service.d.ts +0 -3
- package/package.json +1 -1
- package/esm2022/lib/vflow/directives/lazy-for.directive.mjs +0 -243
- package/esm2022/lib/vflow/utils/entities-per-frame.mjs +0 -2
- package/lib/vflow/directives/lazy-for.directive.d.ts +0 -94
- package/lib/vflow/utils/entities-per-frame.d.ts +0 -1
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { Injectable, computed, inject } from '@angular/core';
|
|
2
2
|
import { FlowEntitiesService } from './flow-entities.service';
|
|
3
|
-
import { entitiesPerFrame } from '../utils/entities-per-frame';
|
|
4
3
|
import * as i0 from "@angular/core";
|
|
5
4
|
export class EdgeRenderingService {
|
|
6
5
|
constructor() {
|
|
@@ -8,7 +7,6 @@ export class EdgeRenderingService {
|
|
|
8
7
|
this.edges = computed(() => {
|
|
9
8
|
return this.flowEntitiesService.validEdges().sort((aNode, bNode) => aNode.renderOrder() - bNode.renderOrder());
|
|
10
9
|
});
|
|
11
|
-
this.edgesPerFrame = computed(() => entitiesPerFrame(this.edges().length, 10));
|
|
12
10
|
this.maxOrder = computed(() => {
|
|
13
11
|
return Math.max(...this.flowEntitiesService.validEdges().map((n) => n.renderOrder()));
|
|
14
12
|
});
|
|
@@ -27,4 +25,4 @@ export class EdgeRenderingService {
|
|
|
27
25
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EdgeRenderingService, decorators: [{
|
|
28
26
|
type: Injectable
|
|
29
27
|
}] });
|
|
30
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
28
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZWRnZS1yZW5kZXJpbmcuc2VydmljZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC12Zmxvdy1saWIvc3JjL2xpYi92Zmxvdy9zZXJ2aWNlcy9lZGdlLXJlbmRlcmluZy5zZXJ2aWNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxVQUFVLEVBQUUsUUFBUSxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUM3RCxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQzs7QUFJOUQsTUFBTSxPQUFPLG9CQUFvQjtJQURqQztRQUVVLHdCQUFtQixHQUFHLE1BQU0sQ0FBQyxtQkFBbUIsQ0FBQyxDQUFDO1FBRTFDLFVBQUssR0FBRyxRQUFRLENBQUMsR0FBRyxFQUFFO1lBQ3BDLE9BQU8sSUFBSSxDQUFDLG1CQUFtQixDQUFDLFVBQVUsRUFBRSxDQUFDLElBQUksQ0FBQyxDQUFDLEtBQUssRUFBRSxLQUFLLEVBQUUsRUFBRSxDQUFDLEtBQUssQ0FBQyxXQUFXLEVBQUUsR0FBRyxLQUFLLENBQUMsV0FBVyxFQUFFLENBQUMsQ0FBQztRQUNqSCxDQUFDLENBQUMsQ0FBQztRQUVLLGFBQVEsR0FBRyxRQUFRLENBQUMsR0FBRyxFQUFFO1lBQy9CLE9BQU8sSUFBSSxDQUFDLEdBQUcsQ0FBQyxHQUFHLElBQUksQ0FBQyxtQkFBbUIsQ0FBQyxVQUFVLEVBQUUsQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDLEVBQUUsRUFBRSxDQUFDLENBQUMsQ0FBQyxXQUFXLEVBQUUsQ0FBQyxDQUFDLENBQUM7UUFDeEYsQ0FBQyxDQUFDLENBQUM7S0FZSjtJQVZRLElBQUksQ0FBQyxJQUFlO1FBQ3pCLE1BQU0sY0FBYyxHQUFHLElBQUksQ0FBQyxXQUFXLEVBQUUsS0FBSyxDQUFDLElBQUksSUFBSSxDQUFDLFFBQVEsRUFBRSxLQUFLLElBQUksQ0FBQyxXQUFXLEVBQUUsQ0FBQztRQUUxRixJQUFJLGNBQWMsRUFBRSxDQUFDO1lBQ25CLE9BQU87UUFDVCxDQUFDO1FBRUQsWUFBWTtRQUNaLElBQUksQ0FBQyxXQUFXLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxRQUFRLEVBQUUsR0FBRyxDQUFDLENBQUMsQ0FBQztJQUM1QyxDQUFDOytHQXBCVSxvQkFBb0I7bUhBQXBCLG9CQUFvQjs7NEZBQXBCLG9CQUFvQjtrQkFEaEMsVUFBVSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEluamVjdGFibGUsIGNvbXB1dGVkLCBpbmplY3QgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEZsb3dFbnRpdGllc1NlcnZpY2UgfSBmcm9tICcuL2Zsb3ctZW50aXRpZXMuc2VydmljZSc7XG5pbXBvcnQgeyBFZGdlTW9kZWwgfSBmcm9tICcuLi9tb2RlbHMvZWRnZS5tb2RlbCc7XG5cbkBJbmplY3RhYmxlKClcbmV4cG9ydCBjbGFzcyBFZGdlUmVuZGVyaW5nU2VydmljZSB7XG4gIHByaXZhdGUgZmxvd0VudGl0aWVzU2VydmljZSA9IGluamVjdChGbG93RW50aXRpZXNTZXJ2aWNlKTtcblxuICBwdWJsaWMgcmVhZG9ubHkgZWRnZXMgPSBjb21wdXRlZCgoKSA9PiB7XG4gICAgcmV0dXJuIHRoaXMuZmxvd0VudGl0aWVzU2VydmljZS52YWxpZEVkZ2VzKCkuc29ydCgoYU5vZGUsIGJOb2RlKSA9PiBhTm9kZS5yZW5kZXJPcmRlcigpIC0gYk5vZGUucmVuZGVyT3JkZXIoKSk7XG4gIH0pO1xuXG4gIHByaXZhdGUgbWF4T3JkZXIgPSBjb21wdXRlZCgoKSA9PiB7XG4gICAgcmV0dXJuIE1hdGgubWF4KC4uLnRoaXMuZmxvd0VudGl0aWVzU2VydmljZS52YWxpZEVkZ2VzKCkubWFwKChuKSA9PiBuLnJlbmRlck9yZGVyKCkpKTtcbiAgfSk7XG5cbiAgcHVibGljIHB1bGwoZWRnZTogRWRnZU1vZGVsKSB7XG4gICAgY29uc3QgaXNBbHJlYWR5T25Ub3AgPSBlZGdlLnJlbmRlck9yZGVyKCkgIT09IDAgJiYgdGhpcy5tYXhPcmRlcigpID09PSBlZGdlLnJlbmRlck9yZGVyKCk7XG5cbiAgICBpZiAoaXNBbHJlYWR5T25Ub3ApIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG5cbiAgICAvLyBwdWxsIG5vZGVcbiAgICBlZGdlLnJlbmRlck9yZGVyLnNldCh0aGlzLm1heE9yZGVyKCkgKyAxKTtcbiAgfVxufVxuIl19
|
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
import { Injectable, computed, inject } from '@angular/core';
|
|
2
2
|
import { FlowEntitiesService } from './flow-entities.service';
|
|
3
3
|
import { isGroupNode } from '../utils/is-group-node';
|
|
4
|
-
import { entitiesPerFrame } from '../utils/entities-per-frame';
|
|
5
4
|
import * as i0 from "@angular/core";
|
|
6
5
|
export class NodeRenderingService {
|
|
7
6
|
constructor() {
|
|
8
7
|
this.flowEntitiesService = inject(FlowEntitiesService);
|
|
9
8
|
this.nodes = computed(() => {
|
|
10
|
-
return this.flowEntitiesService.nodes().sort((aNode, bNode) => aNode.renderOrder() - bNode.renderOrder());
|
|
9
|
+
return [...this.flowEntitiesService.nodes().sort((aNode, bNode) => aNode.renderOrder() - bNode.renderOrder())];
|
|
11
10
|
});
|
|
12
11
|
this.groups = computed(() => {
|
|
13
12
|
return this.nodes().filter((n) => isGroupNode(n));
|
|
@@ -15,9 +14,6 @@ export class NodeRenderingService {
|
|
|
15
14
|
this.nonGroups = computed(() => {
|
|
16
15
|
return this.nodes().filter((n) => !isGroupNode(n));
|
|
17
16
|
});
|
|
18
|
-
this.nodesPerFrame = computed(() => entitiesPerFrame(this.nodes().length, 10));
|
|
19
|
-
this.groupsPerFrame = computed(() => entitiesPerFrame(this.groups().length, 10));
|
|
20
|
-
this.nonGroupsPerFrame = computed(() => entitiesPerFrame(this.nonGroups().length, 10));
|
|
21
17
|
this.maxOrder = computed(() => {
|
|
22
18
|
return Math.max(...this.flowEntitiesService.nodes().map((n) => n.renderOrder()));
|
|
23
19
|
});
|
|
@@ -34,4 +30,4 @@ export class NodeRenderingService {
|
|
|
34
30
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeRenderingService, decorators: [{
|
|
35
31
|
type: Injectable
|
|
36
32
|
}] });
|
|
37
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
33
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibm9kZS1yZW5kZXJpbmcuc2VydmljZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC12Zmxvdy1saWIvc3JjL2xpYi92Zmxvdy9zZXJ2aWNlcy9ub2RlLXJlbmRlcmluZy5zZXJ2aWNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxVQUFVLEVBQUUsUUFBUSxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUM3RCxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQztBQUU5RCxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sd0JBQXdCLENBQUM7O0FBR3JELE1BQU0sT0FBTyxvQkFBb0I7SUFEakM7UUFFVSx3QkFBbUIsR0FBRyxNQUFNLENBQUMsbUJBQW1CLENBQUMsQ0FBQztRQUUxQyxVQUFLLEdBQUcsUUFBUSxDQUFDLEdBQUcsRUFBRTtZQUNwQyxPQUFPLENBQUMsR0FBRyxJQUFJLENBQUMsbUJBQW1CLENBQUMsS0FBSyxFQUFFLENBQUMsSUFBSSxDQUFDLENBQUMsS0FBSyxFQUFFLEtBQUssRUFBRSxFQUFFLENBQUMsS0FBSyxDQUFDLFdBQVcsRUFBRSxHQUFHLEtBQUssQ0FBQyxXQUFXLEVBQUUsQ0FBQyxDQUFDLENBQUM7UUFDakgsQ0FBQyxDQUFDLENBQUM7UUFFYSxXQUFNLEdBQUcsUUFBUSxDQUFDLEdBQUcsRUFBRTtZQUNyQyxPQUFPLElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLEVBQUUsRUFBRSxDQUFDLFdBQVcsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDO1FBQ3BELENBQUMsQ0FBQyxDQUFDO1FBRWEsY0FBUyxHQUFHLFFBQVEsQ0FBQyxHQUFHLEVBQUU7WUFDeEMsT0FBTyxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxDQUFDLFdBQVcsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDO1FBQ3JELENBQUMsQ0FBQyxDQUFDO1FBRUssYUFBUSxHQUFHLFFBQVEsQ0FBQyxHQUFHLEVBQUU7WUFDL0IsT0FBTyxJQUFJLENBQUMsR0FBRyxDQUFDLEdBQUcsSUFBSSxDQUFDLG1CQUFtQixDQUFDLEtBQUssRUFBRSxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUMsRUFBRSxFQUFFLENBQUMsQ0FBQyxDQUFDLFdBQVcsRUFBRSxDQUFDLENBQUMsQ0FBQztRQUNuRixDQUFDLENBQUMsQ0FBQztLQVNKO0lBUFEsUUFBUSxDQUFDLElBQWU7UUFDN0IsWUFBWTtRQUNaLElBQUksQ0FBQyxXQUFXLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxRQUFRLEVBQUUsR0FBRyxDQUFDLENBQUMsQ0FBQztRQUUxQyxnQkFBZ0I7UUFDaEIsSUFBSSxDQUFDLFFBQVEsRUFBRSxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsRUFBRSxFQUFFLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDO0lBQ25ELENBQUM7K0dBekJVLG9CQUFvQjttSEFBcEIsb0JBQW9COzs0RkFBcEIsb0JBQW9CO2tCQURoQyxVQUFVIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgSW5qZWN0YWJsZSwgY29tcHV0ZWQsIGluamVjdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgRmxvd0VudGl0aWVzU2VydmljZSB9IGZyb20gJy4vZmxvdy1lbnRpdGllcy5zZXJ2aWNlJztcbmltcG9ydCB7IE5vZGVNb2RlbCB9IGZyb20gJy4uL21vZGVscy9ub2RlLm1vZGVsJztcbmltcG9ydCB7IGlzR3JvdXBOb2RlIH0gZnJvbSAnLi4vdXRpbHMvaXMtZ3JvdXAtbm9kZSc7XG5cbkBJbmplY3RhYmxlKClcbmV4cG9ydCBjbGFzcyBOb2RlUmVuZGVyaW5nU2VydmljZSB7XG4gIHByaXZhdGUgZmxvd0VudGl0aWVzU2VydmljZSA9IGluamVjdChGbG93RW50aXRpZXNTZXJ2aWNlKTtcblxuICBwdWJsaWMgcmVhZG9ubHkgbm9kZXMgPSBjb21wdXRlZCgoKSA9PiB7XG4gICAgcmV0dXJuIFsuLi50aGlzLmZsb3dFbnRpdGllc1NlcnZpY2Uubm9kZXMoKS5zb3J0KChhTm9kZSwgYk5vZGUpID0+IGFOb2RlLnJlbmRlck9yZGVyKCkgLSBiTm9kZS5yZW5kZXJPcmRlcigpKV07XG4gIH0pO1xuXG4gIHB1YmxpYyByZWFkb25seSBncm91cHMgPSBjb21wdXRlZCgoKSA9PiB7XG4gICAgcmV0dXJuIHRoaXMubm9kZXMoKS5maWx0ZXIoKG4pID0+IGlzR3JvdXBOb2RlKG4pKTtcbiAgfSk7XG5cbiAgcHVibGljIHJlYWRvbmx5IG5vbkdyb3VwcyA9IGNvbXB1dGVkKCgpID0+IHtcbiAgICByZXR1cm4gdGhpcy5ub2RlcygpLmZpbHRlcigobikgPT4gIWlzR3JvdXBOb2RlKG4pKTtcbiAgfSk7XG5cbiAgcHJpdmF0ZSBtYXhPcmRlciA9IGNvbXB1dGVkKCgpID0+IHtcbiAgICByZXR1cm4gTWF0aC5tYXgoLi4udGhpcy5mbG93RW50aXRpZXNTZXJ2aWNlLm5vZGVzKCkubWFwKChuKSA9PiBuLnJlbmRlck9yZGVyKCkpKTtcbiAgfSk7XG5cbiAgcHVibGljIHB1bGxOb2RlKG5vZGU6IE5vZGVNb2RlbCkge1xuICAgIC8vIHB1bGwgbm9kZVxuICAgIG5vZGUucmVuZGVyT3JkZXIuc2V0KHRoaXMubWF4T3JkZXIoKSArIDEpO1xuXG4gICAgLy8gcHVsbCBjaGlsZHJlblxuICAgIG5vZGUuY2hpbGRyZW4oKS5mb3JFYWNoKChuKSA9PiB0aGlzLnB1bGxOb2RlKG4pKTtcbiAgfVxufVxuIl19
|
package/fesm2022/ngx-vflow.mjs
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { signal, computed, Injectable, inject, ElementRef, Directive, effect, untracked, TemplateRef, DestroyRef, EventEmitter, OutputEmitterRef, input, NgZone, viewChild, Component, ChangeDetectionStrategy, output, HostListener, Injector, runInInjectionContext,
|
|
2
|
+
import { signal, computed, Injectable, inject, ElementRef, Directive, effect, untracked, TemplateRef, DestroyRef, EventEmitter, OutputEmitterRef, input, NgZone, viewChild, Component, ChangeDetectionStrategy, output, HostListener, Injector, runInInjectionContext, contentChild, Input, forwardRef } from '@angular/core';
|
|
3
3
|
import { select } from 'd3-selection';
|
|
4
4
|
import { zoomIdentity, zoom } from 'd3-zoom';
|
|
5
|
-
import { switchMap, merge, fromEvent, tap, Subject, Observable, skip, map, pairwise, filter, distinctUntilChanged, observeOn, asyncScheduler, zip, animationFrameScheduler, share, startWith
|
|
5
|
+
import { switchMap, merge, fromEvent, tap, Subject, Observable, skip, map, pairwise, filter, distinctUntilChanged, observeOn, asyncScheduler, zip, animationFrameScheduler, share, startWith } from 'rxjs';
|
|
6
6
|
import { toObservable, takeUntilDestroyed, outputFromObservable, toSignal } from '@angular/core/rxjs-interop';
|
|
7
7
|
import { drag } from 'd3-drag';
|
|
8
8
|
import { __decorate } from 'tslib';
|
|
@@ -1737,13 +1737,11 @@ function isGroupNode(node) {
|
|
|
1737
1737
|
return node.rawNode.type === 'default-group' || node.rawNode.type === 'template-group';
|
|
1738
1738
|
}
|
|
1739
1739
|
|
|
1740
|
-
const entitiesPerFrame = (total, perFrame) => Math.max(1, Math.ceil(total / perFrame));
|
|
1741
|
-
|
|
1742
1740
|
class NodeRenderingService {
|
|
1743
1741
|
constructor() {
|
|
1744
1742
|
this.flowEntitiesService = inject(FlowEntitiesService);
|
|
1745
1743
|
this.nodes = computed(() => {
|
|
1746
|
-
return this.flowEntitiesService.nodes().sort((aNode, bNode) => aNode.renderOrder() - bNode.renderOrder());
|
|
1744
|
+
return [...this.flowEntitiesService.nodes().sort((aNode, bNode) => aNode.renderOrder() - bNode.renderOrder())];
|
|
1747
1745
|
});
|
|
1748
1746
|
this.groups = computed(() => {
|
|
1749
1747
|
return this.nodes().filter((n) => isGroupNode(n));
|
|
@@ -1751,9 +1749,6 @@ class NodeRenderingService {
|
|
|
1751
1749
|
this.nonGroups = computed(() => {
|
|
1752
1750
|
return this.nodes().filter((n) => !isGroupNode(n));
|
|
1753
1751
|
});
|
|
1754
|
-
this.nodesPerFrame = computed(() => entitiesPerFrame(this.nodes().length, 10));
|
|
1755
|
-
this.groupsPerFrame = computed(() => entitiesPerFrame(this.groups().length, 10));
|
|
1756
|
-
this.nonGroupsPerFrame = computed(() => entitiesPerFrame(this.nonGroups().length, 10));
|
|
1757
1752
|
this.maxOrder = computed(() => {
|
|
1758
1753
|
return Math.max(...this.flowEntitiesService.nodes().map((n) => n.renderOrder()));
|
|
1759
1754
|
});
|
|
@@ -2152,7 +2147,6 @@ class EdgeRenderingService {
|
|
|
2152
2147
|
this.edges = computed(() => {
|
|
2153
2148
|
return this.flowEntitiesService.validEdges().sort((aNode, bNode) => aNode.renderOrder() - bNode.renderOrder());
|
|
2154
2149
|
});
|
|
2155
|
-
this.edgesPerFrame = computed(() => entitiesPerFrame(this.edges().length, 10));
|
|
2156
2150
|
this.maxOrder = computed(() => {
|
|
2157
2151
|
return Math.max(...this.flowEntitiesService.validEdges().map((n) => n.renderOrder()));
|
|
2158
2152
|
});
|
|
@@ -2288,14 +2282,14 @@ class EdgeComponent {
|
|
|
2288
2282
|
this.connectionController?.startReconnection(handle, this.model());
|
|
2289
2283
|
}
|
|
2290
2284
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EdgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2291
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: EdgeComponent, isStandalone: true, selector: "g[edge]", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, edgeTemplate: { classPropertyName: "edgeTemplate", publicName: "edgeTemplate", isSignal: true, isRequired: false, transformFunction: null }, edgeLabelHtmlTemplate: { classPropertyName: "edgeLabelHtmlTemplate", publicName: "edgeLabelHtmlTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.visibility": "isReconnecting() ? \"hidden\" : \"visible\"" }, classAttribute: "selectable" }, ngImport: i0, template: "@if (model().type === 'default') {\n <svg:path\n class=\"edge\"\n [attr.d]=\"model().path().path\"\n [attr.marker-start]=\"model().markerStartUrl()\"\n [attr.marker-end]=\"model().markerEndUrl()\"\n [class.edge_selected]=\"model().selected()\" />\n\n <svg:path class=\"interactive-edge\" [attr.d]=\"model().path().path\" (
|
|
2285
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: EdgeComponent, isStandalone: true, selector: "g[edge]", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, edgeTemplate: { classPropertyName: "edgeTemplate", publicName: "edgeTemplate", isSignal: true, isRequired: false, transformFunction: null }, edgeLabelHtmlTemplate: { classPropertyName: "edgeLabelHtmlTemplate", publicName: "edgeLabelHtmlTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.visibility": "isReconnecting() ? \"hidden\" : \"visible\"" }, classAttribute: "selectable" }, ngImport: i0, template: "@if (model().type === 'default') {\n <svg:path\n class=\"edge\"\n [attr.d]=\"model().path().path\"\n [attr.marker-start]=\"model().markerStartUrl()\"\n [attr.marker-end]=\"model().markerEndUrl()\"\n [class.edge_selected]=\"model().selected()\" />\n\n <svg:path class=\"interactive-edge\" [attr.d]=\"model().path().path\" (click)=\"select(); pull()\" />\n}\n\n@if (model().type === 'template' && edgeTemplate()) {\n @if (edgeTemplate(); as edgeTemplate) {\n <ng-container\n [ngTemplateOutlet]=\"edgeTemplate\"\n [ngTemplateOutletContext]=\"model().context\"\n [ngTemplateOutletInjector]=\"injector\" />\n }\n}\n\n@if (model().edgeLabels.start; as label) {\n @if (model().path().labelPoints?.start; as point) {\n <svg:g edgeLabel [model]=\"label\" [point]=\"point\" [edgeModel]=\"model()\" [htmlTemplate]=\"edgeLabelHtmlTemplate()\" />\n }\n}\n\n@if (model().edgeLabels.center; as label) {\n @if (model().path().labelPoints?.center; as point) {\n <svg:g edgeLabel [model]=\"label\" [point]=\"point\" [edgeModel]=\"model()\" [htmlTemplate]=\"edgeLabelHtmlTemplate()\" />\n }\n}\n\n@if (model().edgeLabels.end; as label) {\n @if (model().path().labelPoints?.end; as point) {\n <svg:g edgeLabel [model]=\"label\" [point]=\"point\" [edgeModel]=\"model()\" [htmlTemplate]=\"edgeLabelHtmlTemplate()\" />\n }\n}\n\n@if (model().sourceHandle() && model().targetHandle()) {\n @if (model().reconnectable === true || model().reconnectable === 'source') {\n <svg:circle\n class=\"reconnect-handle\"\n r=\"10\"\n [attr.cx]=\"model().sourceHandle()!.pointAbsolute().x\"\n [attr.cy]=\"model().sourceHandle()!.pointAbsolute().y\"\n (pointerStart)=\"startReconnection($event, model().targetHandle()!)\" />\n }\n\n @if (model().reconnectable === true || model().reconnectable === 'target') {\n <svg:circle\n class=\"reconnect-handle\"\n r=\"10\"\n [attr.cx]=\"model().targetHandle()!.pointAbsolute().x\"\n [attr.cy]=\"model().targetHandle()!.pointAbsolute().y\"\n (pointerStart)=\"startReconnection($event, model().sourceHandle()!)\" />\n }\n}\n", styles: [".edge{fill:none;stroke-width:2;stroke:#b1b1b7}.edge_selected{stroke-width:2.5;stroke:#0f4c75}.interactive-edge{fill:none;stroke-width:20;stroke:transparent}.reconnect-handle{fill:transparent;cursor:move}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: EdgeLabelComponent, selector: "g[edgeLabel]", inputs: ["model", "edgeModel", "point", "htmlTemplate"] }, { kind: "directive", type: PointerDirective, selector: "[pointerStart], [pointerEnd], [pointerOver], [pointerOut]", outputs: ["pointerOver", "pointerOut", "pointerStart", "pointerEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2292
2286
|
}
|
|
2293
2287
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EdgeComponent, decorators: [{
|
|
2294
2288
|
type: Component,
|
|
2295
2289
|
args: [{ standalone: true, selector: 'g[edge]', changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
2296
2290
|
class: 'selectable',
|
|
2297
2291
|
'[style.visibility]': 'isReconnecting() ? "hidden" : "visible"',
|
|
2298
|
-
}, imports: [NgTemplateOutlet, EdgeLabelComponent, PointerDirective], template: "@if (model().type === 'default') {\n <svg:path\n class=\"edge\"\n [attr.d]=\"model().path().path\"\n [attr.marker-start]=\"model().markerStartUrl()\"\n [attr.marker-end]=\"model().markerEndUrl()\"\n [class.edge_selected]=\"model().selected()\" />\n\n <svg:path class=\"interactive-edge\" [attr.d]=\"model().path().path\" (
|
|
2292
|
+
}, imports: [NgTemplateOutlet, EdgeLabelComponent, PointerDirective], template: "@if (model().type === 'default') {\n <svg:path\n class=\"edge\"\n [attr.d]=\"model().path().path\"\n [attr.marker-start]=\"model().markerStartUrl()\"\n [attr.marker-end]=\"model().markerEndUrl()\"\n [class.edge_selected]=\"model().selected()\" />\n\n <svg:path class=\"interactive-edge\" [attr.d]=\"model().path().path\" (click)=\"select(); pull()\" />\n}\n\n@if (model().type === 'template' && edgeTemplate()) {\n @if (edgeTemplate(); as edgeTemplate) {\n <ng-container\n [ngTemplateOutlet]=\"edgeTemplate\"\n [ngTemplateOutletContext]=\"model().context\"\n [ngTemplateOutletInjector]=\"injector\" />\n }\n}\n\n@if (model().edgeLabels.start; as label) {\n @if (model().path().labelPoints?.start; as point) {\n <svg:g edgeLabel [model]=\"label\" [point]=\"point\" [edgeModel]=\"model()\" [htmlTemplate]=\"edgeLabelHtmlTemplate()\" />\n }\n}\n\n@if (model().edgeLabels.center; as label) {\n @if (model().path().labelPoints?.center; as point) {\n <svg:g edgeLabel [model]=\"label\" [point]=\"point\" [edgeModel]=\"model()\" [htmlTemplate]=\"edgeLabelHtmlTemplate()\" />\n }\n}\n\n@if (model().edgeLabels.end; as label) {\n @if (model().path().labelPoints?.end; as point) {\n <svg:g edgeLabel [model]=\"label\" [point]=\"point\" [edgeModel]=\"model()\" [htmlTemplate]=\"edgeLabelHtmlTemplate()\" />\n }\n}\n\n@if (model().sourceHandle() && model().targetHandle()) {\n @if (model().reconnectable === true || model().reconnectable === 'source') {\n <svg:circle\n class=\"reconnect-handle\"\n r=\"10\"\n [attr.cx]=\"model().sourceHandle()!.pointAbsolute().x\"\n [attr.cy]=\"model().sourceHandle()!.pointAbsolute().y\"\n (pointerStart)=\"startReconnection($event, model().targetHandle()!)\" />\n }\n\n @if (model().reconnectable === true || model().reconnectable === 'target') {\n <svg:circle\n class=\"reconnect-handle\"\n r=\"10\"\n [attr.cx]=\"model().targetHandle()!.pointAbsolute().x\"\n [attr.cy]=\"model().targetHandle()!.pointAbsolute().y\"\n (pointerStart)=\"startReconnection($event, model().sourceHandle()!)\" />\n }\n}\n", styles: [".edge{fill:none;stroke-width:2;stroke:#b1b1b7}.edge_selected{stroke-width:2.5;stroke:#0f4c75}.interactive-edge{fill:none;stroke-width:20;stroke:transparent}.reconnect-handle{fill:transparent;cursor:move}\n"] }]
|
|
2299
2293
|
}] });
|
|
2300
2294
|
|
|
2301
2295
|
class HandleService {
|
|
@@ -2883,7 +2877,7 @@ class NodeComponent {
|
|
|
2883
2877
|
}
|
|
2884
2878
|
}
|
|
2885
2879
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2886
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: NodeComponent, isStandalone: true, selector: "g[node]", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, nodeTemplate: { classPropertyName: "nodeTemplate", publicName: "nodeTemplate", isSignal: true, isRequired: false, transformFunction: null }, nodeSvgTemplate: { classPropertyName: "nodeSvgTemplate", publicName: "nodeSvgTemplate", isSignal: true, isRequired: false, transformFunction: null }, groupNodeTemplate: { classPropertyName: "groupNodeTemplate", publicName: "groupNodeTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "vflow-node" }, providers: [HandleService, NodeAccessorService], ngImport: i0, template: "<!-- Default node -->\n@if (model().rawNode.type === 'default') {\n <svg:foreignObject\n class=\"selectable\"\n [attr.width]=\"model().foWidth()\"\n [attr.height]=\"model().foHeight()\"\n (
|
|
2880
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: NodeComponent, isStandalone: true, selector: "g[node]", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, nodeTemplate: { classPropertyName: "nodeTemplate", publicName: "nodeTemplate", isSignal: true, isRequired: false, transformFunction: null }, nodeSvgTemplate: { classPropertyName: "nodeSvgTemplate", publicName: "nodeSvgTemplate", isSignal: true, isRequired: false, transformFunction: null }, groupNodeTemplate: { classPropertyName: "groupNodeTemplate", publicName: "groupNodeTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "vflow-node" }, providers: [HandleService, NodeAccessorService], ngImport: i0, template: "<!-- Default node -->\n@if (model().rawNode.type === 'default') {\n <svg:foreignObject\n class=\"selectable\"\n [attr.width]=\"model().foWidth()\"\n [attr.height]=\"model().foHeight()\"\n (click)=\"pullNode(); selectNode()\">\n <default-node\n nodeHandlesController\n [selected]=\"model().selected()\"\n [style.width]=\"model().styleWidth()\"\n [style.height]=\"model().styleHeight()\"\n [style.max-width]=\"model().styleWidth()\"\n [style.max-height]=\"model().styleHeight()\">\n <div [outerHTML]=\"model().text()\"></div>\n\n <handle type=\"source\" position=\"right\" />\n <handle type=\"target\" position=\"left\" />\n </default-node>\n </svg:foreignObject>\n}\n\n<!-- HTML Template node -->\n@if (model().rawNode.type === 'html-template' && nodeTemplate()) {\n <svg:foreignObject\n class=\"selectable\"\n [attr.width]=\"model().foWidth()\"\n [attr.height]=\"model().foHeight()\"\n (click)=\"pullNode()\">\n <div\n nodeHandlesController\n nodeResizeController\n class=\"wrapper\"\n [style.width]=\"model().styleWidth()\"\n [style.height]=\"model().styleHeight()\">\n <ng-container\n [ngTemplateOutlet]=\"nodeTemplate() ?? null\"\n [ngTemplateOutletContext]=\"model().context\"\n [ngTemplateOutletInjector]=\"injector\" />\n </div>\n </svg:foreignObject>\n}\n\n<!-- SVG Template node -->\n@if (model().rawNode.type === 'svg-template' && nodeSvgTemplate()) {\n <svg:g class=\"selectable\" nodeHandlesController (click)=\"pullNode()\">\n <ng-container\n [ngTemplateOutlet]=\"nodeSvgTemplate() ?? null\"\n [ngTemplateOutletContext]=\"model().context\"\n [ngTemplateOutletInjector]=\"injector\" />\n </svg:g>\n}\n\n<!-- Component node -->\n@if (model().isComponentType) {\n <svg:foreignObject\n class=\"selectable\"\n [attr.width]=\"model().foWidth()\"\n [attr.height]=\"model().foHeight()\"\n (click)=\"pullNode()\">\n <div\n nodeHandlesController\n nodeResizeController\n class=\"wrapper\"\n [style.width]=\"model().styleWidth()\"\n [style.height]=\"model().styleHeight()\">\n <ng-container\n [ngComponentOutlet]=\"$any(model().rawNode.type)\"\n [ngComponentOutletInputs]=\"model().componentTypeInputs\"\n [ngComponentOutletInjector]=\"injector\" />\n </div>\n </svg:foreignObject>\n}\n\n<!-- Default group node -->\n@if (model().rawNode.type === 'default-group') {\n <svg:rect\n class=\"default-group-node\"\n rx=\"5\"\n ry=\"5\"\n [resizable]=\"model().resizable()\"\n [gap]=\"3\"\n [resizerColor]=\"model().color()\"\n [class.default-group-node_selected]=\"model().selected()\"\n [attr.width]=\"model().size().width\"\n [attr.height]=\"model().size().height\"\n [style.stroke]=\"model().color()\"\n [style.fill]=\"model().color()\"\n (click)=\"pullNode(); selectNode()\" />\n}\n\n<!-- Template group node -->\n@if (model().rawNode.type === 'template-group' && groupNodeTemplate()) {\n <svg:g class=\"selectable\" nodeHandlesController (click)=\"pullNode()\">\n <ng-container\n [ngTemplateOutlet]=\"groupNodeTemplate() ?? null\"\n [ngTemplateOutletContext]=\"model().context\"\n [ngTemplateOutletInjector]=\"injector\" />\n </svg:g>\n}\n\n<!-- Resizer -->\n@if (model().resizerTemplate(); as template) {\n @if (model().resizable()) {\n <ng-template [ngTemplateOutlet]=\"template\" />\n }\n}\n\n<!-- Handles -->\n@for (handle of model().handles(); track handle) {\n @if (!handle.template) {\n <svg:circle\n class=\"default-handle\"\n r=\"5\"\n [attr.cx]=\"handle.hostOffset().x\"\n [attr.cy]=\"handle.hostOffset().y\"\n [attr.stroke-width]=\"handle.strokeWidth\"\n (pointerStart)=\"startConnection($event, handle)\"\n (pointerEnd)=\"endConnection()\" />\n }\n\n @if (handle.template) {\n <svg:g\n [handleSizeController]=\"handle\"\n (pointerStart)=\"startConnection($event, handle)\"\n (pointerEnd)=\"endConnection()\">\n <ng-container *ngTemplateOutlet=\"handle.template; context: handle.templateContext\" />\n </svg:g>\n }\n\n @if (showMagnet()) {\n <svg:circle\n class=\"magnet\"\n [attr.r]=\"model().magnetRadius\"\n [attr.cx]=\"handle.hostOffset().x\"\n [attr.cy]=\"handle.hostOffset().y\"\n (pointerEnd)=\"endConnection(); resetValidateConnection(handle)\"\n (pointerOver)=\"validateConnection(handle)\"\n (pointerOut)=\"resetValidateConnection(handle)\" />\n }\n}\n\n<!-- Toolbar -->\n@for (toolbar of toolbars(); track toolbar) {\n <svg:foreignObject\n [attr.width]=\"toolbar.size().width\"\n [attr.height]=\"toolbar.size().height\"\n [attr.transform]=\"toolbar.transform()\">\n <ng-container [ngTemplateOutlet]=\"toolbar.template()\" />\n </svg:foreignObject>\n}\n", styles: [".magnet{opacity:0}.wrapper{display:table-cell}.default-group-node{stroke-width:1.5px;fill-opacity:.05}.default-group-node_selected{stroke-width:2px}.default-handle{stroke:#fff;fill:#1b262c}\n"], dependencies: [{ kind: "directive", type: PointerDirective, selector: "[pointerStart], [pointerEnd], [pointerOver], [pointerOut]", outputs: ["pointerOver", "pointerOut", "pointerStart", "pointerEnd"] }, { kind: "component", type: DefaultNodeComponent, selector: "default-node", inputs: ["selected"] }, { kind: "component", type: HandleComponent, selector: "handle", inputs: ["position", "type", "id", "template"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "component", type: ResizableComponent, selector: "[resizable]", inputs: ["resizable", "resizerColor", "gap"] }, { kind: "directive", type: HandleSizeControllerDirective, selector: "[handleSizeController]", inputs: ["handleSizeController"] }, { kind: "directive", type: NodeHandlesControllerDirective, selector: "[nodeHandlesController]" }, { kind: "directive", type: NodeResizeControllerDirective, selector: "[nodeResizeController]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2887
2881
|
}
|
|
2888
2882
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeComponent, decorators: [{
|
|
2889
2883
|
type: Component,
|
|
@@ -2899,7 +2893,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
2899
2893
|
HandleSizeControllerDirective,
|
|
2900
2894
|
NodeHandlesControllerDirective,
|
|
2901
2895
|
NodeResizeControllerDirective,
|
|
2902
|
-
], template: "<!-- Default node -->\n@if (model().rawNode.type === 'default') {\n <svg:foreignObject\n class=\"selectable\"\n [attr.width]=\"model().foWidth()\"\n [attr.height]=\"model().foHeight()\"\n (
|
|
2896
|
+
], template: "<!-- Default node -->\n@if (model().rawNode.type === 'default') {\n <svg:foreignObject\n class=\"selectable\"\n [attr.width]=\"model().foWidth()\"\n [attr.height]=\"model().foHeight()\"\n (click)=\"pullNode(); selectNode()\">\n <default-node\n nodeHandlesController\n [selected]=\"model().selected()\"\n [style.width]=\"model().styleWidth()\"\n [style.height]=\"model().styleHeight()\"\n [style.max-width]=\"model().styleWidth()\"\n [style.max-height]=\"model().styleHeight()\">\n <div [outerHTML]=\"model().text()\"></div>\n\n <handle type=\"source\" position=\"right\" />\n <handle type=\"target\" position=\"left\" />\n </default-node>\n </svg:foreignObject>\n}\n\n<!-- HTML Template node -->\n@if (model().rawNode.type === 'html-template' && nodeTemplate()) {\n <svg:foreignObject\n class=\"selectable\"\n [attr.width]=\"model().foWidth()\"\n [attr.height]=\"model().foHeight()\"\n (click)=\"pullNode()\">\n <div\n nodeHandlesController\n nodeResizeController\n class=\"wrapper\"\n [style.width]=\"model().styleWidth()\"\n [style.height]=\"model().styleHeight()\">\n <ng-container\n [ngTemplateOutlet]=\"nodeTemplate() ?? null\"\n [ngTemplateOutletContext]=\"model().context\"\n [ngTemplateOutletInjector]=\"injector\" />\n </div>\n </svg:foreignObject>\n}\n\n<!-- SVG Template node -->\n@if (model().rawNode.type === 'svg-template' && nodeSvgTemplate()) {\n <svg:g class=\"selectable\" nodeHandlesController (click)=\"pullNode()\">\n <ng-container\n [ngTemplateOutlet]=\"nodeSvgTemplate() ?? null\"\n [ngTemplateOutletContext]=\"model().context\"\n [ngTemplateOutletInjector]=\"injector\" />\n </svg:g>\n}\n\n<!-- Component node -->\n@if (model().isComponentType) {\n <svg:foreignObject\n class=\"selectable\"\n [attr.width]=\"model().foWidth()\"\n [attr.height]=\"model().foHeight()\"\n (click)=\"pullNode()\">\n <div\n nodeHandlesController\n nodeResizeController\n class=\"wrapper\"\n [style.width]=\"model().styleWidth()\"\n [style.height]=\"model().styleHeight()\">\n <ng-container\n [ngComponentOutlet]=\"$any(model().rawNode.type)\"\n [ngComponentOutletInputs]=\"model().componentTypeInputs\"\n [ngComponentOutletInjector]=\"injector\" />\n </div>\n </svg:foreignObject>\n}\n\n<!-- Default group node -->\n@if (model().rawNode.type === 'default-group') {\n <svg:rect\n class=\"default-group-node\"\n rx=\"5\"\n ry=\"5\"\n [resizable]=\"model().resizable()\"\n [gap]=\"3\"\n [resizerColor]=\"model().color()\"\n [class.default-group-node_selected]=\"model().selected()\"\n [attr.width]=\"model().size().width\"\n [attr.height]=\"model().size().height\"\n [style.stroke]=\"model().color()\"\n [style.fill]=\"model().color()\"\n (click)=\"pullNode(); selectNode()\" />\n}\n\n<!-- Template group node -->\n@if (model().rawNode.type === 'template-group' && groupNodeTemplate()) {\n <svg:g class=\"selectable\" nodeHandlesController (click)=\"pullNode()\">\n <ng-container\n [ngTemplateOutlet]=\"groupNodeTemplate() ?? null\"\n [ngTemplateOutletContext]=\"model().context\"\n [ngTemplateOutletInjector]=\"injector\" />\n </svg:g>\n}\n\n<!-- Resizer -->\n@if (model().resizerTemplate(); as template) {\n @if (model().resizable()) {\n <ng-template [ngTemplateOutlet]=\"template\" />\n }\n}\n\n<!-- Handles -->\n@for (handle of model().handles(); track handle) {\n @if (!handle.template) {\n <svg:circle\n class=\"default-handle\"\n r=\"5\"\n [attr.cx]=\"handle.hostOffset().x\"\n [attr.cy]=\"handle.hostOffset().y\"\n [attr.stroke-width]=\"handle.strokeWidth\"\n (pointerStart)=\"startConnection($event, handle)\"\n (pointerEnd)=\"endConnection()\" />\n }\n\n @if (handle.template) {\n <svg:g\n [handleSizeController]=\"handle\"\n (pointerStart)=\"startConnection($event, handle)\"\n (pointerEnd)=\"endConnection()\">\n <ng-container *ngTemplateOutlet=\"handle.template; context: handle.templateContext\" />\n </svg:g>\n }\n\n @if (showMagnet()) {\n <svg:circle\n class=\"magnet\"\n [attr.r]=\"model().magnetRadius\"\n [attr.cx]=\"handle.hostOffset().x\"\n [attr.cy]=\"handle.hostOffset().y\"\n (pointerEnd)=\"endConnection(); resetValidateConnection(handle)\"\n (pointerOver)=\"validateConnection(handle)\"\n (pointerOut)=\"resetValidateConnection(handle)\" />\n }\n}\n\n<!-- Toolbar -->\n@for (toolbar of toolbars(); track toolbar) {\n <svg:foreignObject\n [attr.width]=\"toolbar.size().width\"\n [attr.height]=\"toolbar.size().height\"\n [attr.transform]=\"toolbar.transform()\">\n <ng-container [ngTemplateOutlet]=\"toolbar.template()\" />\n </svg:foreignObject>\n}\n", styles: [".magnet{opacity:0}.wrapper{display:table-cell}.default-group-node{stroke-width:1.5px;fill-opacity:.05}.default-group-node_selected{stroke-width:2px}.default-handle{stroke:#fff;fill:#1b262c}\n"] }]
|
|
2903
2897
|
}] });
|
|
2904
2898
|
|
|
2905
2899
|
class ConnectionComponent {
|
|
@@ -3270,245 +3264,6 @@ function getSpacePoints(point, groups) {
|
|
|
3270
3264
|
return result;
|
|
3271
3265
|
}
|
|
3272
3266
|
|
|
3273
|
-
/** Enum with lazy render directive state */
|
|
3274
|
-
var LazyForState;
|
|
3275
|
-
(function (LazyForState) {
|
|
3276
|
-
/** Directive is in idle state */
|
|
3277
|
-
LazyForState["idle"] = "idle";
|
|
3278
|
-
/** Directive is rendering */
|
|
3279
|
-
LazyForState["rendering"] = "rendering";
|
|
3280
|
-
})(LazyForState || (LazyForState = {}));
|
|
3281
|
-
/**
|
|
3282
|
-
* Context for an element in lazyFor
|
|
3283
|
-
*/
|
|
3284
|
-
class LazyForContextModel {
|
|
3285
|
-
/** Whether the element is first */
|
|
3286
|
-
get first() {
|
|
3287
|
-
return this.index === 0;
|
|
3288
|
-
}
|
|
3289
|
-
/** Whether the element is last */
|
|
3290
|
-
get last() {
|
|
3291
|
-
return this.index === this.count - 1;
|
|
3292
|
-
}
|
|
3293
|
-
/** Whether the element is even */
|
|
3294
|
-
get even() {
|
|
3295
|
-
return this.index % 2 === 0;
|
|
3296
|
-
}
|
|
3297
|
-
/** Whether the element is odd */
|
|
3298
|
-
get odd() {
|
|
3299
|
-
return !this.even;
|
|
3300
|
-
}
|
|
3301
|
-
constructor($implicit, lazyFor, index, count) {
|
|
3302
|
-
this.$implicit = $implicit;
|
|
3303
|
-
this.lazyFor = lazyFor;
|
|
3304
|
-
this.index = index;
|
|
3305
|
-
this.count = count;
|
|
3306
|
-
}
|
|
3307
|
-
}
|
|
3308
|
-
class LazyForDirective {
|
|
3309
|
-
/**
|
|
3310
|
-
* Asserts the correct type of the context for the template that `lazyFor` will render.
|
|
3311
|
-
*
|
|
3312
|
-
* The presence of this method is a signal to the Ivy template type-check compiler that the
|
|
3313
|
-
* `lazyFor` structural directive renders its template with a specific context type.
|
|
3314
|
-
*/
|
|
3315
|
-
static ngTemplateContextGuard(dir, ctx) {
|
|
3316
|
-
return true;
|
|
3317
|
-
}
|
|
3318
|
-
//#region INPUTS
|
|
3319
|
-
/** Setter for the array to be rendered by the directive */
|
|
3320
|
-
set lazyForOf(lazyFor) {
|
|
3321
|
-
this._lazyFor = lazyFor;
|
|
3322
|
-
this._lazyForDirty = true;
|
|
3323
|
-
}
|
|
3324
|
-
/**
|
|
3325
|
-
* Input - setter for TrackBy function
|
|
3326
|
-
* @description is required
|
|
3327
|
-
*/
|
|
3328
|
-
set lazyForTrackBy(fn) {
|
|
3329
|
-
if (isDevMode() && fn !== null && typeof fn !== 'function') {
|
|
3330
|
-
console.warn(`trackBy must be a function, but received ${JSON.stringify(fn)}. ` +
|
|
3331
|
-
`See https://angular.io/api/common/NgForOf#change-propagation for more information.`);
|
|
3332
|
-
}
|
|
3333
|
-
this._trackByFn = fn;
|
|
3334
|
-
}
|
|
3335
|
-
/**
|
|
3336
|
-
* Setter for the number of items that will be rendered per frame
|
|
3337
|
-
* @param value number of items that will be rendered per frame
|
|
3338
|
-
*/
|
|
3339
|
-
set lazyForItemsPerFrame(value) {
|
|
3340
|
-
if (value <= 0) {
|
|
3341
|
-
if (isDevMode()) {
|
|
3342
|
-
console.warn('Items per frame parameter cannot be lower than 0! Input value was ignored');
|
|
3343
|
-
}
|
|
3344
|
-
return;
|
|
3345
|
-
}
|
|
3346
|
-
this._itemsPerFrame = value;
|
|
3347
|
-
}
|
|
3348
|
-
/** Setter for array item template */
|
|
3349
|
-
set lazyForTemplate(value) {
|
|
3350
|
-
if (value) {
|
|
3351
|
-
this._template = value;
|
|
3352
|
-
}
|
|
3353
|
-
}
|
|
3354
|
-
/** Getter for TrackBy function */
|
|
3355
|
-
get lazyForTrackBy() {
|
|
3356
|
-
return this._trackByFn;
|
|
3357
|
-
}
|
|
3358
|
-
//#endregion
|
|
3359
|
-
constructor() {
|
|
3360
|
-
this._template = inject(TemplateRef);
|
|
3361
|
-
this._viewContainer = inject(ViewContainerRef);
|
|
3362
|
-
this._differs = inject(IterableDiffers);
|
|
3363
|
-
this._cdr = inject(ChangeDetectorRef);
|
|
3364
|
-
this._destroyRef$ = inject(DestroyRef);
|
|
3365
|
-
//#region PROPERTIES
|
|
3366
|
-
/** Array for rendering */
|
|
3367
|
-
this._lazyFor = null;
|
|
3368
|
-
/** lazyFor initialization flag */
|
|
3369
|
-
this._lazyForDirty = true;
|
|
3370
|
-
/** Differ for tracking changes in input array */
|
|
3371
|
-
this._differ = null;
|
|
3372
|
-
/** Number of items to be rendered per frame */
|
|
3373
|
-
this._itemsPerFrame = 5;
|
|
3374
|
-
/** Directive state */
|
|
3375
|
-
this._lazyForState = LazyForState.idle;
|
|
3376
|
-
//#endregion
|
|
3377
|
-
//#region RXJS
|
|
3378
|
-
/** Private subject for stopping dynamic render process */
|
|
3379
|
-
this._rerenderUnsub$ = new Subject();
|
|
3380
|
-
this._destroyRef$.onDestroy(() => this._viewContainer.clear());
|
|
3381
|
-
}
|
|
3382
|
-
/** ngDoCheck hook */
|
|
3383
|
-
ngDoCheck() {
|
|
3384
|
-
if (this._lazyForDirty) {
|
|
3385
|
-
this._lazyForDirty = false;
|
|
3386
|
-
const value = this._lazyFor;
|
|
3387
|
-
if (!this._differ && value) {
|
|
3388
|
-
this._differ = this._differs.find(value).create(this.lazyForTrackBy);
|
|
3389
|
-
}
|
|
3390
|
-
}
|
|
3391
|
-
if (this._differ) {
|
|
3392
|
-
let changes = this._differ.diff(this._lazyFor);
|
|
3393
|
-
if (changes) {
|
|
3394
|
-
if (this._lazyForState === LazyForState.rendering) {
|
|
3395
|
-
/**
|
|
3396
|
-
* If the array changed during an active render process
|
|
3397
|
-
* Need to clear container of all views
|
|
3398
|
-
* And restart rendering from the beginning.
|
|
3399
|
-
*/
|
|
3400
|
-
this._rerenderUnsub$.next();
|
|
3401
|
-
changes = this._differ.diff([]);
|
|
3402
|
-
changes = this._differ.diff(this._lazyFor);
|
|
3403
|
-
this._viewContainer.clear();
|
|
3404
|
-
if (changes) {
|
|
3405
|
-
this.applyChanges(changes);
|
|
3406
|
-
}
|
|
3407
|
-
}
|
|
3408
|
-
else {
|
|
3409
|
-
this.applyChanges(changes);
|
|
3410
|
-
}
|
|
3411
|
-
}
|
|
3412
|
-
}
|
|
3413
|
-
}
|
|
3414
|
-
/**
|
|
3415
|
-
* Apply changes detected by differ
|
|
3416
|
-
* @param changes changes
|
|
3417
|
-
*/
|
|
3418
|
-
applyChanges(changes) {
|
|
3419
|
-
const itemDataListToRender = [];
|
|
3420
|
-
changes.forEachOperation((item, adjustedPreviousIndex, currentIndex) => {
|
|
3421
|
-
const itemToPush = {
|
|
3422
|
-
item: { ...item },
|
|
3423
|
-
adjustedPreviousIndex,
|
|
3424
|
-
currentIndex,
|
|
3425
|
-
};
|
|
3426
|
-
itemDataListToRender.push(itemToPush);
|
|
3427
|
-
});
|
|
3428
|
-
this.performLazyRender(itemDataListToRender, changes);
|
|
3429
|
-
}
|
|
3430
|
-
/**
|
|
3431
|
-
* Perform lazy rendering
|
|
3432
|
-
* @param itemDataListToRender list of items to render
|
|
3433
|
-
* @param changes changes
|
|
3434
|
-
*/
|
|
3435
|
-
performLazyRender(itemDataListToRender, changes) {
|
|
3436
|
-
this.updateLazyForState(LazyForState.rendering);
|
|
3437
|
-
this._rerenderUnsub$.next();
|
|
3438
|
-
from(itemDataListToRender)
|
|
3439
|
-
.pipe(bufferCount(this._itemsPerFrame), concatMap((itemList) => of(itemList).pipe(delayWhen(() => animationFrames()))), tap((itemList) => {
|
|
3440
|
-
for (let i = 0; i < itemList.length; i++) {
|
|
3441
|
-
const data = itemList[i];
|
|
3442
|
-
if (data.item.previousIndex === null) {
|
|
3443
|
-
this._viewContainer.createEmbeddedView(this._template, new LazyForContextModel(data.item.item, this._lazyFor, -1, -1), data.currentIndex === null ? undefined : data.currentIndex);
|
|
3444
|
-
}
|
|
3445
|
-
else if (data.currentIndex === null) {
|
|
3446
|
-
this._viewContainer.remove(data.adjustedPreviousIndex === null ? undefined : data.adjustedPreviousIndex);
|
|
3447
|
-
}
|
|
3448
|
-
else if (data.adjustedPreviousIndex !== null) {
|
|
3449
|
-
const view = this._viewContainer.get(data.adjustedPreviousIndex);
|
|
3450
|
-
this._viewContainer.move(view, data.currentIndex);
|
|
3451
|
-
this.applyViewChange(view, data.item);
|
|
3452
|
-
}
|
|
3453
|
-
}
|
|
3454
|
-
this.updateViewContext();
|
|
3455
|
-
this._cdr.markForCheck();
|
|
3456
|
-
}),
|
|
3457
|
-
/** Using take we automatically unsubscribe from the stream when rendering is complete */
|
|
3458
|
-
take(Math.ceil(itemDataListToRender.length / this._itemsPerFrame)), takeUntil(this._rerenderUnsub$), takeUntilDestroyed(this._destroyRef$), finalize(() => {
|
|
3459
|
-
changes.forEachIdentityChange((record) => {
|
|
3460
|
-
const viewRef = (this._viewContainer.get(record.currentIndex));
|
|
3461
|
-
this.applyViewChange(viewRef, record);
|
|
3462
|
-
});
|
|
3463
|
-
this.updateLazyForState(LazyForState.idle);
|
|
3464
|
-
}))
|
|
3465
|
-
.subscribe();
|
|
3466
|
-
}
|
|
3467
|
-
/** Update context (without implicit$) for elements inside view */
|
|
3468
|
-
updateViewContext() {
|
|
3469
|
-
for (let i = 0, ilen = this._viewContainer.length; i < ilen; i++) {
|
|
3470
|
-
const viewRef = (this._viewContainer.get(i));
|
|
3471
|
-
const context = viewRef.context;
|
|
3472
|
-
context.index = i;
|
|
3473
|
-
context.count = ilen;
|
|
3474
|
-
context.lazyFor = this._lazyFor;
|
|
3475
|
-
}
|
|
3476
|
-
}
|
|
3477
|
-
/**
|
|
3478
|
-
* Apply implicit$ context
|
|
3479
|
-
* @param view view
|
|
3480
|
-
* @param record data
|
|
3481
|
-
*/
|
|
3482
|
-
applyViewChange(view, record) {
|
|
3483
|
-
view.context.$implicit = record.item;
|
|
3484
|
-
}
|
|
3485
|
-
/**
|
|
3486
|
-
* Update directive state
|
|
3487
|
-
* @param stateToSet state to set
|
|
3488
|
-
*/
|
|
3489
|
-
updateLazyForState(stateToSet) {
|
|
3490
|
-
this._lazyForState = stateToSet;
|
|
3491
|
-
}
|
|
3492
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LazyForDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3493
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: LazyForDirective, isStandalone: true, selector: "[lazyFor][lazyForOf]", inputs: { lazyForOf: "lazyForOf", lazyForTrackBy: "lazyForTrackBy", lazyForItemsPerFrame: "lazyForItemsPerFrame", lazyForTemplate: "lazyForTemplate" }, ngImport: i0 }); }
|
|
3494
|
-
}
|
|
3495
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LazyForDirective, decorators: [{
|
|
3496
|
-
type: Directive,
|
|
3497
|
-
args: [{
|
|
3498
|
-
selector: '[lazyFor][lazyForOf]',
|
|
3499
|
-
standalone: true,
|
|
3500
|
-
}]
|
|
3501
|
-
}], ctorParameters: () => [], propDecorators: { lazyForOf: [{
|
|
3502
|
-
type: Input
|
|
3503
|
-
}], lazyForTrackBy: [{
|
|
3504
|
-
type: Input,
|
|
3505
|
-
args: [{ required: true }]
|
|
3506
|
-
}], lazyForItemsPerFrame: [{
|
|
3507
|
-
type: Input
|
|
3508
|
-
}], lazyForTemplate: [{
|
|
3509
|
-
type: Input
|
|
3510
|
-
}] } });
|
|
3511
|
-
|
|
3512
3267
|
const changesControllerHostDirective = {
|
|
3513
3268
|
directive: ChangesControllerDirective,
|
|
3514
3269
|
outputs: [
|
|
@@ -3560,13 +3315,9 @@ class VflowComponent {
|
|
|
3560
3315
|
detachedGroupsLayer: false,
|
|
3561
3316
|
});
|
|
3562
3317
|
this.nodeModels = this.nodeRenderingService.nodes;
|
|
3563
|
-
this.nodesPerFrame = this.nodeRenderingService.nodesPerFrame;
|
|
3564
3318
|
this.groups = this.nodeRenderingService.groups;
|
|
3565
|
-
this.groupsPerFrame = this.nodeRenderingService.groupsPerFrame;
|
|
3566
3319
|
this.nonGroups = this.nodeRenderingService.nonGroups;
|
|
3567
|
-
this.nonGroupsPerFrame = this.nodeRenderingService.nonGroupsPerFrame;
|
|
3568
3320
|
this.edgeModels = this.edgeRenderingService.edges;
|
|
3569
|
-
this.edgesPerFrame = this.edgeRenderingService.edgesPerFrame;
|
|
3570
3321
|
// #endregion
|
|
3571
3322
|
// #region OUTPUTS
|
|
3572
3323
|
/**
|
|
@@ -3827,7 +3578,7 @@ class VflowComponent {
|
|
|
3827
3578
|
ComponentEventBusService,
|
|
3828
3579
|
KeyboardService,
|
|
3829
3580
|
OverlaysService,
|
|
3830
|
-
], queries: [{ propertyName: "nodeTemplateDirective", first: true, predicate: NodeHtmlTemplateDirective, descendants: true, isSignal: true }, { propertyName: "nodeSvgTemplateDirective", first: true, predicate: NodeSvgTemplateDirective, descendants: true, isSignal: true }, { propertyName: "groupNodeTemplateDirective", first: true, predicate: GroupNodeTemplateDirective, descendants: true, isSignal: true }, { propertyName: "edgeTemplateDirective", first: true, predicate: EdgeTemplateDirective, descendants: true, isSignal: true }, { propertyName: "edgeLabelHtmlDirective", first: true, predicate: EdgeLabelHtmlTemplateDirective, descendants: true, isSignal: true }, { propertyName: "connectionTemplateDirective", first: true, predicate: ConnectionTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "mapContext", first: true, predicate: MapContextDirective, descendants: true, isSignal: true }, { propertyName: "spacePointContext", first: true, predicate: SpacePointContextDirective, descendants: true, isSignal: true }], hostDirectives: [{ directive: ChangesControllerDirective, outputs: ["onNodesChange", "onNodesChange", "onNodesChange.position", "onNodesChange.position", "onNodesChange.position.single", "onNodesChange.position.single", "onNodesChange.position.many", "onNodesChange.position.many", "onNodesChange.size", "onNodesChange.size", "onNodesChange.size.single", "onNodesChange.size.single", "onNodesChange.size.many", "onNodesChange.size.many", "onNodesChange.add", "onNodesChange.add", "onNodesChange.add.single", "onNodesChange.add.single", "onNodesChange.add.many", "onNodesChange.add.many", "onNodesChange.remove", "onNodesChange.remove", "onNodesChange.remove.single", "onNodesChange.remove.single", "onNodesChange.remove.many", "onNodesChange.remove.many", "onNodesChange.select", "onNodesChange.select", "onNodesChange.select.single", "onNodesChange.select.single", "onNodesChange.select.many", "onNodesChange.select.many", "onEdgesChange", "onEdgesChange", "onEdgesChange.detached", "onEdgesChange.detached", "onEdgesChange.detached.single", "onEdgesChange.detached.single", "onEdgesChange.detached.many", "onEdgesChange.detached.many", "onEdgesChange.add", "onEdgesChange.add", "onEdgesChange.add.single", "onEdgesChange.add.single", "onEdgesChange.add.many", "onEdgesChange.add.many", "onEdgesChange.remove", "onEdgesChange.remove", "onEdgesChange.remove.single", "onEdgesChange.remove.single", "onEdgesChange.remove.many", "onEdgesChange.remove.many", "onEdgesChange.select", "onEdgesChange.select", "onEdgesChange.select.single", "onEdgesChange.select.single", "onEdgesChange.select.many", "onEdgesChange.select.many"] }], ngImport: i0, template: "<svg:svg #flow rootSvgRef rootSvgContext rootPointer flowSizeController class=\"root-svg\">\n <defs flowDefs [markers]=\"markers()\" />\n\n <g background />\n\n <svg:g mapContext spacePointContext>\n <!-- Connection -->\n <svg:g connection [model]=\"connection\" [template]=\"connectionTemplateDirective()?.templateRef\" />\n\n @if (optimization().detachedGroupsLayer) {\n <!-- Groups -->\n
|
|
3581
|
+
], queries: [{ propertyName: "nodeTemplateDirective", first: true, predicate: NodeHtmlTemplateDirective, descendants: true, isSignal: true }, { propertyName: "nodeSvgTemplateDirective", first: true, predicate: NodeSvgTemplateDirective, descendants: true, isSignal: true }, { propertyName: "groupNodeTemplateDirective", first: true, predicate: GroupNodeTemplateDirective, descendants: true, isSignal: true }, { propertyName: "edgeTemplateDirective", first: true, predicate: EdgeTemplateDirective, descendants: true, isSignal: true }, { propertyName: "edgeLabelHtmlDirective", first: true, predicate: EdgeLabelHtmlTemplateDirective, descendants: true, isSignal: true }, { propertyName: "connectionTemplateDirective", first: true, predicate: ConnectionTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "mapContext", first: true, predicate: MapContextDirective, descendants: true, isSignal: true }, { propertyName: "spacePointContext", first: true, predicate: SpacePointContextDirective, descendants: true, isSignal: true }], hostDirectives: [{ directive: ChangesControllerDirective, outputs: ["onNodesChange", "onNodesChange", "onNodesChange.position", "onNodesChange.position", "onNodesChange.position.single", "onNodesChange.position.single", "onNodesChange.position.many", "onNodesChange.position.many", "onNodesChange.size", "onNodesChange.size", "onNodesChange.size.single", "onNodesChange.size.single", "onNodesChange.size.many", "onNodesChange.size.many", "onNodesChange.add", "onNodesChange.add", "onNodesChange.add.single", "onNodesChange.add.single", "onNodesChange.add.many", "onNodesChange.add.many", "onNodesChange.remove", "onNodesChange.remove", "onNodesChange.remove.single", "onNodesChange.remove.single", "onNodesChange.remove.many", "onNodesChange.remove.many", "onNodesChange.select", "onNodesChange.select", "onNodesChange.select.single", "onNodesChange.select.single", "onNodesChange.select.many", "onNodesChange.select.many", "onEdgesChange", "onEdgesChange", "onEdgesChange.detached", "onEdgesChange.detached", "onEdgesChange.detached.single", "onEdgesChange.detached.single", "onEdgesChange.detached.many", "onEdgesChange.detached.many", "onEdgesChange.add", "onEdgesChange.add", "onEdgesChange.add.single", "onEdgesChange.add.single", "onEdgesChange.add.many", "onEdgesChange.add.many", "onEdgesChange.remove", "onEdgesChange.remove", "onEdgesChange.remove.single", "onEdgesChange.remove.single", "onEdgesChange.remove.many", "onEdgesChange.remove.many", "onEdgesChange.select", "onEdgesChange.select", "onEdgesChange.select.single", "onEdgesChange.select.single", "onEdgesChange.select.many", "onEdgesChange.select.many"] }], ngImport: i0, template: "<svg:svg #flow rootSvgRef rootSvgContext rootPointer flowSizeController class=\"root-svg\">\n <defs flowDefs [markers]=\"markers()\" />\n\n <g background />\n\n <svg:g mapContext spacePointContext>\n <!-- Connection -->\n <svg:g connection [model]=\"connection\" [template]=\"connectionTemplateDirective()?.templateRef\" />\n\n @if (optimization().detachedGroupsLayer) {\n <!-- Groups -->\n @for (model of groups(); track trackNodes($index, model)) {\n <svg:g\n node\n [model]=\"model\"\n [groupNodeTemplate]=\"groupNodeTemplateDirective()?.templateRef\"\n [attr.transform]=\"model.pointTransform()\" />\n }\n <!-- Edges -->\n @for (model of edgeModels(); track trackEdges($index, model)) {\n <svg:g\n edge\n [model]=\"model\"\n [edgeTemplate]=\"edgeTemplateDirective()?.templateRef\"\n [edgeLabelHtmlTemplate]=\"edgeLabelHtmlDirective()?.templateRef\" />\n }\n <!-- Nodes -->\n @for (model of nonGroups(); track trackNodes($index, model)) {\n <svg:g\n node\n [model]=\"model\"\n [nodeTemplate]=\"nodeTemplateDirective()?.templateRef\"\n [nodeSvgTemplate]=\"nodeSvgTemplateDirective()?.templateRef\"\n [attr.transform]=\"model.pointTransform()\" />\n }\n }\n\n @if (!optimization().detachedGroupsLayer) {\n <!-- Edges -->\n @for (model of edgeModels(); track trackEdges($index, model)) {\n <svg:g\n edge\n [model]=\"model\"\n [edgeTemplate]=\"edgeTemplateDirective()?.templateRef\"\n [edgeLabelHtmlTemplate]=\"edgeLabelHtmlDirective()?.templateRef\" />\n }\n\n <!-- Nodes -->\n @for (model of nodeModels(); track trackNodes($index, model)) {\n <svg:g\n node\n [model]=\"model\"\n [nodeTemplate]=\"nodeTemplateDirective()?.templateRef\"\n [nodeSvgTemplate]=\"nodeSvgTemplateDirective()?.templateRef\"\n [groupNodeTemplate]=\"groupNodeTemplateDirective()?.templateRef\"\n [attr.transform]=\"model.pointTransform()\" />\n }\n }\n </svg:g>\n\n <!-- Minimap -->\n @if (minimap(); as minimap) {\n <ng-container [ngTemplateOutlet]=\"minimap.template()\" />\n }\n</svg:svg>\n", styles: [":host{display:block;width:100%;height:100%;-webkit-user-select:none;user-select:none}:host ::ng-deep *{box-sizing:border-box}\n"], dependencies: [{ kind: "directive", type: RootSvgReferenceDirective, selector: "svg[rootSvgRef]" }, { kind: "directive", type: RootSvgContextDirective, selector: "svg[rootSvgContext]" }, { kind: "directive", type: RootPointerDirective, selector: "svg[rootPointer]" }, { kind: "directive", type: FlowSizeControllerDirective, selector: "svg[flowSizeController]" }, { kind: "component", type: DefsComponent, selector: "defs[flowDefs]", inputs: ["markers"] }, { kind: "component", type: BackgroundComponent, selector: "g[background]" }, { kind: "directive", type: MapContextDirective, selector: "g[mapContext]" }, { kind: "directive", type: SpacePointContextDirective, selector: "g[spacePointContext]" }, { kind: "component", type: ConnectionComponent, selector: "g[connection]", inputs: ["model", "template"] }, { kind: "component", type: NodeComponent, selector: "g[node]", inputs: ["model", "nodeTemplate", "nodeSvgTemplate", "groupNodeTemplate"] }, { kind: "component", type: EdgeComponent, selector: "g[edge]", inputs: ["model", "edgeTemplate", "edgeLabelHtmlTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3831
3582
|
}
|
|
3832
3583
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VflowComponent, decorators: [{
|
|
3833
3584
|
type: Component,
|
|
@@ -3858,8 +3609,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
3858
3609
|
NodeComponent,
|
|
3859
3610
|
EdgeComponent,
|
|
3860
3611
|
NgTemplateOutlet,
|
|
3861
|
-
|
|
3862
|
-
], template: "<svg:svg #flow rootSvgRef rootSvgContext rootPointer flowSizeController class=\"root-svg\">\n <defs flowDefs [markers]=\"markers()\" />\n\n <g background />\n\n <svg:g mapContext spacePointContext>\n <!-- Connection -->\n <svg:g connection [model]=\"connection\" [template]=\"connectionTemplateDirective()?.templateRef\" />\n\n @if (optimization().detachedGroupsLayer) {\n <!-- Groups -->\n <svg:g\n *lazyFor=\"let model of groups(); trackBy: trackNodes; itemsPerFrame: groupsPerFrame()\"\n node\n [model]=\"model\"\n [groupNodeTemplate]=\"groupNodeTemplateDirective()?.templateRef\"\n [attr.transform]=\"model.pointTransform()\" />\n\n <!-- Edges -->\n <svg:g\n *lazyFor=\"let model of edgeModels(); trackBy: trackEdges; itemsPerFrame: edgesPerFrame()\"\n edge\n [model]=\"model\"\n [edgeTemplate]=\"edgeTemplateDirective()?.templateRef\"\n [edgeLabelHtmlTemplate]=\"edgeLabelHtmlDirective()?.templateRef\" />\n\n <!-- Nodes -->\n <svg:g\n *lazyFor=\"let model of nonGroups(); trackBy: trackNodes; itemsPerFrame: nonGroupsPerFrame()\"\n node\n [model]=\"model\"\n [nodeTemplate]=\"nodeTemplateDirective()?.templateRef\"\n [nodeSvgTemplate]=\"nodeSvgTemplateDirective()?.templateRef\"\n [attr.transform]=\"model.pointTransform()\" />\n }\n\n @if (!optimization().detachedGroupsLayer) {\n <!-- Edges -->\n <svg:g\n *lazyFor=\"let model of edgeModels(); trackBy: trackEdges; itemsPerFrame: edgesPerFrame()\"\n edge\n [model]=\"model\"\n [edgeTemplate]=\"edgeTemplateDirective()?.templateRef\"\n [edgeLabelHtmlTemplate]=\"edgeLabelHtmlDirective()?.templateRef\" />\n\n <!-- Nodes -->\n <svg:g\n *lazyFor=\"let model of nodeModels(); trackBy: trackNodes; itemsPerFrame: nodesPerFrame()\"\n node\n [model]=\"model\"\n [nodeTemplate]=\"nodeTemplateDirective()?.templateRef\"\n [nodeSvgTemplate]=\"nodeSvgTemplateDirective()?.templateRef\"\n [groupNodeTemplate]=\"groupNodeTemplateDirective()?.templateRef\"\n [attr.transform]=\"model.pointTransform()\" />\n }\n </svg:g>\n\n <!-- Minimap -->\n @if (minimap(); as minimap) {\n <ng-container [ngTemplateOutlet]=\"minimap.template()\" />\n }\n</svg:svg>\n", styles: [":host{display:block;width:100%;height:100%;-webkit-user-select:none;user-select:none}:host ::ng-deep *{box-sizing:border-box}\n"] }]
|
|
3612
|
+
], template: "<svg:svg #flow rootSvgRef rootSvgContext rootPointer flowSizeController class=\"root-svg\">\n <defs flowDefs [markers]=\"markers()\" />\n\n <g background />\n\n <svg:g mapContext spacePointContext>\n <!-- Connection -->\n <svg:g connection [model]=\"connection\" [template]=\"connectionTemplateDirective()?.templateRef\" />\n\n @if (optimization().detachedGroupsLayer) {\n <!-- Groups -->\n @for (model of groups(); track trackNodes($index, model)) {\n <svg:g\n node\n [model]=\"model\"\n [groupNodeTemplate]=\"groupNodeTemplateDirective()?.templateRef\"\n [attr.transform]=\"model.pointTransform()\" />\n }\n <!-- Edges -->\n @for (model of edgeModels(); track trackEdges($index, model)) {\n <svg:g\n edge\n [model]=\"model\"\n [edgeTemplate]=\"edgeTemplateDirective()?.templateRef\"\n [edgeLabelHtmlTemplate]=\"edgeLabelHtmlDirective()?.templateRef\" />\n }\n <!-- Nodes -->\n @for (model of nonGroups(); track trackNodes($index, model)) {\n <svg:g\n node\n [model]=\"model\"\n [nodeTemplate]=\"nodeTemplateDirective()?.templateRef\"\n [nodeSvgTemplate]=\"nodeSvgTemplateDirective()?.templateRef\"\n [attr.transform]=\"model.pointTransform()\" />\n }\n }\n\n @if (!optimization().detachedGroupsLayer) {\n <!-- Edges -->\n @for (model of edgeModels(); track trackEdges($index, model)) {\n <svg:g\n edge\n [model]=\"model\"\n [edgeTemplate]=\"edgeTemplateDirective()?.templateRef\"\n [edgeLabelHtmlTemplate]=\"edgeLabelHtmlDirective()?.templateRef\" />\n }\n\n <!-- Nodes -->\n @for (model of nodeModels(); track trackNodes($index, model)) {\n <svg:g\n node\n [model]=\"model\"\n [nodeTemplate]=\"nodeTemplateDirective()?.templateRef\"\n [nodeSvgTemplate]=\"nodeSvgTemplateDirective()?.templateRef\"\n [groupNodeTemplate]=\"groupNodeTemplateDirective()?.templateRef\"\n [attr.transform]=\"model.pointTransform()\" />\n }\n }\n </svg:g>\n\n <!-- Minimap -->\n @if (minimap(); as minimap) {\n <ng-container [ngTemplateOutlet]=\"minimap.template()\" />\n }\n</svg:svg>\n", styles: [":host{display:block;width:100%;height:100%;-webkit-user-select:none;user-select:none}:host ::ng-deep *{box-sizing:border-box}\n"] }]
|
|
3863
3613
|
}], propDecorators: { view: [{
|
|
3864
3614
|
type: Input
|
|
3865
3615
|
}], minZoom: [{
|
|
@@ -3942,7 +3692,7 @@ class SelectableDirective {
|
|
|
3942
3692
|
return null;
|
|
3943
3693
|
}
|
|
3944
3694
|
getEvent$() {
|
|
3945
|
-
return
|
|
3695
|
+
return fromEvent(this.host.nativeElement, 'click');
|
|
3946
3696
|
}
|
|
3947
3697
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3948
3698
|
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: SelectableDirective, isStandalone: true, selector: "[selectable]", ngImport: i0 }); }
|