ngx-vflow 2.1.0 → 2.2.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/fesm2022/ngx-vflow-testing.mjs +48 -48
- package/fesm2022/ngx-vflow.mjs +415 -215
- package/fesm2022/ngx-vflow.mjs.map +1 -1
- package/lib/vflow/components/background/background.component.d.ts +2 -1
- package/lib/vflow/directives/node-handles-controller.directive.d.ts +2 -1
- package/lib/vflow/directives/node-resize-controller.directive.d.ts +4 -4
- package/lib/vflow/models/handle.model.d.ts +4 -1
- package/lib/vflow/public-components/handle/handle.component.d.ts +2 -0
- package/lib/vflow/services/offset-batching-cache.service.d.ts +20 -0
- package/lib/vflow/services/request-animation-frame-batching.service.d.ts +8 -0
- package/lib/vflow/services/resize-observer.service.d.ts +13 -0
- package/lib/vflow/types/background.type.d.ts +20 -1
- package/package.json +1 -1
package/fesm2022/ngx-vflow.mjs
CHANGED
|
@@ -165,10 +165,10 @@ class FlowEntitiesService {
|
|
|
165
165
|
getDetachedEdges() {
|
|
166
166
|
return this.edges().filter((e) => e.detached());
|
|
167
167
|
}
|
|
168
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
169
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
168
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FlowEntitiesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
169
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FlowEntitiesService }); }
|
|
170
170
|
}
|
|
171
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
171
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FlowEntitiesService, decorators: [{
|
|
172
172
|
type: Injectable
|
|
173
173
|
}] });
|
|
174
174
|
|
|
@@ -255,10 +255,10 @@ class FlowSettingsService {
|
|
|
255
255
|
this.optimization = signal(DEFAULT_OPTIMIZATION);
|
|
256
256
|
this.selectionMode = signal('default');
|
|
257
257
|
}
|
|
258
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
259
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
258
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FlowSettingsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
259
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FlowSettingsService }); }
|
|
260
260
|
}
|
|
261
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
261
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FlowSettingsService, decorators: [{
|
|
262
262
|
type: Injectable
|
|
263
263
|
}] });
|
|
264
264
|
|
|
@@ -312,10 +312,10 @@ class ViewportService {
|
|
|
312
312
|
.map((nodeId) => this.entitiesService.nodes().find(({ rawNode }) => rawNode.id === nodeId))
|
|
313
313
|
.filter((node) => !!node);
|
|
314
314
|
}
|
|
315
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
316
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
315
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ViewportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
316
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ViewportService }); }
|
|
317
317
|
}
|
|
318
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
318
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ViewportService, decorators: [{
|
|
319
319
|
type: Injectable
|
|
320
320
|
}] });
|
|
321
321
|
|
|
@@ -327,10 +327,10 @@ class RootSvgReferenceDirective {
|
|
|
327
327
|
constructor() {
|
|
328
328
|
this.element = inject(ElementRef).nativeElement;
|
|
329
329
|
}
|
|
330
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
331
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
330
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: RootSvgReferenceDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
331
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: RootSvgReferenceDirective, isStandalone: true, selector: "svg[rootSvgRef]", ngImport: i0 }); }
|
|
332
332
|
}
|
|
333
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
333
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: RootSvgReferenceDirective, decorators: [{
|
|
334
334
|
type: Directive,
|
|
335
335
|
args: [{
|
|
336
336
|
standalone: true,
|
|
@@ -397,10 +397,10 @@ class KeyboardService {
|
|
|
397
397
|
isActiveAction(action) {
|
|
398
398
|
return this.actionsActive[action];
|
|
399
399
|
}
|
|
400
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
401
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
400
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KeyboardService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
401
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KeyboardService }); }
|
|
402
402
|
}
|
|
403
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
403
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KeyboardService, decorators: [{
|
|
404
404
|
type: Injectable
|
|
405
405
|
}], ctorParameters: () => [] });
|
|
406
406
|
|
|
@@ -476,10 +476,10 @@ class SelectionService {
|
|
|
476
476
|
isMultiSelectionActive: this.keyboardService.isActiveAction('multiSelection'),
|
|
477
477
|
});
|
|
478
478
|
}
|
|
479
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
480
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
479
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SelectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
480
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SelectionService }); }
|
|
481
481
|
}
|
|
482
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
482
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SelectionService, decorators: [{
|
|
483
483
|
type: Injectable
|
|
484
484
|
}] });
|
|
485
485
|
|
|
@@ -524,7 +524,7 @@ class MapContextDirective {
|
|
|
524
524
|
.call(this.zoomBehavior.transform, zoomIdentity.translate(state.x, state.y).scale(state.zoom));
|
|
525
525
|
return;
|
|
526
526
|
}
|
|
527
|
-
}
|
|
527
|
+
});
|
|
528
528
|
this.handleZoom = ({ transform }) => {
|
|
529
529
|
// update public signal for user to read
|
|
530
530
|
this.viewportService.readableViewport.set(mapTransformToViewportState(transform));
|
|
@@ -565,10 +565,10 @@ class MapContextDirective {
|
|
|
565
565
|
this.rootSvgSelection.call(this.zoomBehavior).on('dblclick.zoom', null);
|
|
566
566
|
});
|
|
567
567
|
}
|
|
568
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
569
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
568
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: MapContextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
569
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: MapContextDirective, isStandalone: true, selector: "g[mapContext]", host: { properties: { "attr.transform": "transform()" } }, ngImport: i0 }); }
|
|
570
570
|
}
|
|
571
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
571
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: MapContextDirective, decorators: [{
|
|
572
572
|
type: Directive,
|
|
573
573
|
args: [{
|
|
574
574
|
standalone: true,
|
|
@@ -652,10 +652,10 @@ class FlowStatusService {
|
|
|
652
652
|
setNodeDragEndStatus(node) {
|
|
653
653
|
this.status.set({ state: 'node-drag-end', payload: { node } });
|
|
654
654
|
}
|
|
655
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
656
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
655
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FlowStatusService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
656
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FlowStatusService }); }
|
|
657
657
|
}
|
|
658
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
658
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FlowStatusService, decorators: [{
|
|
659
659
|
type: Injectable
|
|
660
660
|
}] });
|
|
661
661
|
function isNodeDragStartStatus(params) {
|
|
@@ -802,10 +802,10 @@ class DraggableService {
|
|
|
802
802
|
});
|
|
803
803
|
});
|
|
804
804
|
}
|
|
805
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
806
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
805
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: DraggableService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
806
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: DraggableService }); }
|
|
807
807
|
}
|
|
808
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
808
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: DraggableService, decorators: [{
|
|
809
809
|
type: Injectable
|
|
810
810
|
}] });
|
|
811
811
|
|
|
@@ -816,10 +816,10 @@ class EdgeTemplateDirective {
|
|
|
816
816
|
static ngTemplateContextGuard(dir, ctx) {
|
|
817
817
|
return true;
|
|
818
818
|
}
|
|
819
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
820
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
819
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: EdgeTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
820
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: EdgeTemplateDirective, isStandalone: true, selector: "ng-template[edge]", ngImport: i0 }); }
|
|
821
821
|
}
|
|
822
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
822
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: EdgeTemplateDirective, decorators: [{
|
|
823
823
|
type: Directive,
|
|
824
824
|
args: [{
|
|
825
825
|
standalone: true,
|
|
@@ -833,10 +833,10 @@ class ConnectionTemplateDirective {
|
|
|
833
833
|
static ngTemplateContextGuard(dir, ctx) {
|
|
834
834
|
return true;
|
|
835
835
|
}
|
|
836
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
837
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
836
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ConnectionTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
837
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: ConnectionTemplateDirective, isStandalone: true, selector: "ng-template[connection]", ngImport: i0 }); }
|
|
838
838
|
}
|
|
839
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
839
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ConnectionTemplateDirective, decorators: [{
|
|
840
840
|
type: Directive,
|
|
841
841
|
args: [{
|
|
842
842
|
standalone: true,
|
|
@@ -850,10 +850,10 @@ class EdgeLabelHtmlTemplateDirective {
|
|
|
850
850
|
static ngTemplateContextGuard(dir, ctx) {
|
|
851
851
|
return true;
|
|
852
852
|
}
|
|
853
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
854
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
853
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: EdgeLabelHtmlTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
854
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: EdgeLabelHtmlTemplateDirective, isStandalone: true, selector: "ng-template[edgeLabelHtml]", ngImport: i0 }); }
|
|
855
855
|
}
|
|
856
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
856
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: EdgeLabelHtmlTemplateDirective, decorators: [{
|
|
857
857
|
type: Directive,
|
|
858
858
|
args: [{
|
|
859
859
|
standalone: true,
|
|
@@ -867,10 +867,10 @@ class NodeHtmlTemplateDirective {
|
|
|
867
867
|
static ngTemplateContextGuard(dir, ctx) {
|
|
868
868
|
return true;
|
|
869
869
|
}
|
|
870
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
871
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
870
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NodeHtmlTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
871
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: NodeHtmlTemplateDirective, isStandalone: true, selector: "ng-template[nodeHtml]", ngImport: i0 }); }
|
|
872
872
|
}
|
|
873
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
873
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NodeHtmlTemplateDirective, decorators: [{
|
|
874
874
|
type: Directive,
|
|
875
875
|
args: [{
|
|
876
876
|
standalone: true,
|
|
@@ -884,10 +884,10 @@ class NodeSvgTemplateDirective {
|
|
|
884
884
|
static ngTemplateContextGuard(dir, ctx) {
|
|
885
885
|
return true;
|
|
886
886
|
}
|
|
887
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
888
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
887
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NodeSvgTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
888
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: NodeSvgTemplateDirective, isStandalone: true, selector: "ng-template[nodeSvg]", ngImport: i0 }); }
|
|
889
889
|
}
|
|
890
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
890
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NodeSvgTemplateDirective, decorators: [{
|
|
891
891
|
type: Directive,
|
|
892
892
|
args: [{
|
|
893
893
|
standalone: true,
|
|
@@ -901,10 +901,10 @@ class GroupNodeTemplateDirective {
|
|
|
901
901
|
static ngTemplateContextGuard(dir, ctx) {
|
|
902
902
|
return true;
|
|
903
903
|
}
|
|
904
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
905
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
904
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: GroupNodeTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
905
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: GroupNodeTemplateDirective, isStandalone: true, selector: "ng-template[groupNode]", ngImport: i0 }); }
|
|
906
906
|
}
|
|
907
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
907
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: GroupNodeTemplateDirective, decorators: [{
|
|
908
908
|
type: Directive,
|
|
909
909
|
args: [{
|
|
910
910
|
standalone: true,
|
|
@@ -915,10 +915,10 @@ class HandleTemplateDirective {
|
|
|
915
915
|
constructor() {
|
|
916
916
|
this.templateRef = inject(TemplateRef);
|
|
917
917
|
}
|
|
918
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
919
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
918
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: HandleTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
919
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: HandleTemplateDirective, isStandalone: true, selector: "ng-template[handle]", ngImport: i0 }); }
|
|
920
920
|
}
|
|
921
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
921
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: HandleTemplateDirective, decorators: [{
|
|
922
922
|
type: Directive,
|
|
923
923
|
args: [{
|
|
924
924
|
standalone: true,
|
|
@@ -955,10 +955,10 @@ class ComponentEventBusService {
|
|
|
955
955
|
pushEvent(event) {
|
|
956
956
|
this._event$.next(event);
|
|
957
957
|
}
|
|
958
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
959
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
958
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ComponentEventBusService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
959
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ComponentEventBusService }); }
|
|
960
960
|
}
|
|
961
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
961
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ComponentEventBusService, decorators: [{
|
|
962
962
|
type: Injectable
|
|
963
963
|
}] });
|
|
964
964
|
|
|
@@ -969,10 +969,10 @@ class NodeAccessorService {
|
|
|
969
969
|
constructor() {
|
|
970
970
|
this.model = signal(null);
|
|
971
971
|
}
|
|
972
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
973
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
972
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NodeAccessorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
973
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NodeAccessorService }); }
|
|
974
974
|
}
|
|
975
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
975
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NodeAccessorService, decorators: [{
|
|
976
976
|
type: Injectable
|
|
977
977
|
}] });
|
|
978
978
|
|
|
@@ -1010,10 +1010,10 @@ class CustomNodeBaseComponent {
|
|
|
1010
1010
|
});
|
|
1011
1011
|
}))));
|
|
1012
1012
|
}
|
|
1013
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1014
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
1013
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: CustomNodeBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1014
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: CustomNodeBaseComponent, isStandalone: true, ngImport: i0 }); }
|
|
1015
1015
|
}
|
|
1016
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1016
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: CustomNodeBaseComponent, decorators: [{
|
|
1017
1017
|
type: Directive
|
|
1018
1018
|
}] });
|
|
1019
1019
|
function outputRefToObservable(ref) {
|
|
@@ -1042,10 +1042,10 @@ class CustomNodeComponent extends CustomNodeBaseComponent {
|
|
|
1042
1042
|
}
|
|
1043
1043
|
super.ngOnInit();
|
|
1044
1044
|
}
|
|
1045
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1046
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.
|
|
1045
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: CustomNodeComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1046
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.18", type: CustomNodeComponent, isStandalone: true, inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
|
|
1047
1047
|
}
|
|
1048
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1048
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: CustomNodeComponent, decorators: [{
|
|
1049
1049
|
type: Directive
|
|
1050
1050
|
}] });
|
|
1051
1051
|
|
|
@@ -1370,10 +1370,10 @@ class NodeRenderingService {
|
|
|
1370
1370
|
// pull children
|
|
1371
1371
|
node.children().forEach((n) => this.pullNode(n));
|
|
1372
1372
|
}
|
|
1373
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1374
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
1373
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NodeRenderingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1374
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NodeRenderingService }); }
|
|
1375
1375
|
}
|
|
1376
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1376
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NodeRenderingService, decorators: [{
|
|
1377
1377
|
type: Injectable
|
|
1378
1378
|
}] });
|
|
1379
1379
|
|
|
@@ -2212,10 +2212,10 @@ class NodesChangeService {
|
|
|
2212
2212
|
// you can't get valid list of detached edges
|
|
2213
2213
|
observeOn(asyncScheduler, DELAY_FOR_SCHEDULER));
|
|
2214
2214
|
}
|
|
2215
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2216
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
2215
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NodesChangeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
2216
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NodesChangeService }); }
|
|
2217
2217
|
}
|
|
2218
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2218
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NodesChangeService, decorators: [{
|
|
2219
2219
|
type: Injectable
|
|
2220
2220
|
}] });
|
|
2221
2221
|
|
|
@@ -2250,10 +2250,10 @@ class EdgeChangesService {
|
|
|
2250
2250
|
// right after [nodes] input change
|
|
2251
2251
|
observeOn(asyncScheduler));
|
|
2252
2252
|
}
|
|
2253
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2254
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
2253
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: EdgeChangesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
2254
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: EdgeChangesService }); }
|
|
2255
2255
|
}
|
|
2256
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2256
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: EdgeChangesService, decorators: [{
|
|
2257
2257
|
type: Injectable
|
|
2258
2258
|
}] });
|
|
2259
2259
|
|
|
@@ -2303,10 +2303,10 @@ class ChangesControllerDirective {
|
|
|
2303
2303
|
edgeChangesOfType(type) {
|
|
2304
2304
|
return this.edgesChangeService.changes$.pipe(map((changes) => changes.filter((c) => c.type === type)), filter((changes) => !!changes.length));
|
|
2305
2305
|
}
|
|
2306
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2307
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
2306
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ChangesControllerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2307
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: ChangesControllerDirective, isStandalone: true, selector: "[changesController]", outputs: { nodesChanges: "nodesChanges", nodesChangesPosition: "nodesChanges.position", nodesChangesSize: "nodesChanges.size", nodesChangesAdd: "nodesChanges.add", nodesChangesRemove: "nodesChanges.remove", nodesChangesSelect: "nodesChanges.select", edgesChanges: "edgesChanges", edgesChangesDetached: "edgesChanges.detached", edgesChangesAdd: "edgesChanges.add", edgesChangesRemove: "edgesChanges.remove", edgesChangesSelect: "edgesChanges.select" }, ngImport: i0 }); }
|
|
2308
2308
|
}
|
|
2309
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2309
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ChangesControllerDirective, decorators: [{
|
|
2310
2310
|
type: Directive,
|
|
2311
2311
|
args: [{
|
|
2312
2312
|
selector: '[changesController]',
|
|
@@ -2358,10 +2358,10 @@ class RootPointerDirective {
|
|
|
2358
2358
|
setInitialTouch(event) {
|
|
2359
2359
|
this.initialTouch$.next(event);
|
|
2360
2360
|
}
|
|
2361
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2362
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
2361
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: RootPointerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2362
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: RootPointerDirective, isStandalone: true, selector: "svg[rootPointer]", ngImport: i0 }); }
|
|
2363
2363
|
}
|
|
2364
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2364
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: RootPointerDirective, decorators: [{
|
|
2365
2365
|
type: Directive,
|
|
2366
2366
|
args: [{
|
|
2367
2367
|
standalone: true,
|
|
@@ -2399,10 +2399,10 @@ class SpacePointContextDirective {
|
|
|
2399
2399
|
point.y = documentPoint.y;
|
|
2400
2400
|
return point.matrixTransform(this.host.getScreenCTM().inverse());
|
|
2401
2401
|
}
|
|
2402
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2403
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
2402
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SpacePointContextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2403
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: SpacePointContextDirective, isStandalone: true, selector: "g[spacePointContext]", ngImport: i0 }); }
|
|
2404
2404
|
}
|
|
2405
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2405
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SpacePointContextDirective, decorators: [{
|
|
2406
2406
|
type: Directive,
|
|
2407
2407
|
args: [{
|
|
2408
2408
|
standalone: true,
|
|
@@ -2443,8 +2443,8 @@ class OverlaysService {
|
|
|
2443
2443
|
removeToolbar(toolbar) {
|
|
2444
2444
|
this.toolbars.update((toolbars) => toolbars.filter((t) => t !== toolbar));
|
|
2445
2445
|
}
|
|
2446
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2447
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
2446
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: OverlaysService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
2447
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: OverlaysService }); }
|
|
2448
2448
|
}
|
|
2449
2449
|
__decorate([
|
|
2450
2450
|
Microtask
|
|
@@ -2452,7 +2452,7 @@ __decorate([
|
|
|
2452
2452
|
__decorate([
|
|
2453
2453
|
Microtask
|
|
2454
2454
|
], OverlaysService.prototype, "removeToolbar", null);
|
|
2455
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2455
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: OverlaysService, decorators: [{
|
|
2456
2456
|
type: Injectable
|
|
2457
2457
|
}], propDecorators: { addToolbar: [], removeToolbar: [] } });
|
|
2458
2458
|
|
|
@@ -2526,10 +2526,10 @@ class EdgeLabelComponent {
|
|
|
2526
2526
|
},
|
|
2527
2527
|
};
|
|
2528
2528
|
}
|
|
2529
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2530
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
2529
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: EdgeLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2530
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: EdgeLabelComponent, isStandalone: true, selector: "g[edgeLabel]", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, edgeModel: { classPropertyName: "edgeModel", publicName: "edgeModel", isSignal: true, isRequired: true, transformFunction: null }, point: { classPropertyName: "point", publicName: "point", isSignal: true, isRequired: false, transformFunction: null }, htmlTemplate: { classPropertyName: "htmlTemplate", publicName: "htmlTemplate", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "edgeLabelWrapperRef", first: true, predicate: ["edgeLabelWrapper"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (model(); as model) {\n @if (model.edgeLabel.type === 'html-template' && htmlTemplate()) {\n @if (htmlTemplate(); as htmlTemplate) {\n <svg:foreignObject\n [attr.x]=\"edgeLabelPoint().x\"\n [attr.y]=\"edgeLabelPoint().y\"\n [attr.width]=\"model.size().width\"\n [attr.height]=\"model.size().height\">\n <div #edgeLabelWrapper class=\"edge-label-wrapper\">\n <ng-container *ngTemplateOutlet=\"htmlTemplate; context: getLabelContext()\" />\n </div>\n </svg:foreignObject>\n }\n }\n\n @if (model.edgeLabel.type === 'default') {\n <svg:foreignObject\n [attr.x]=\"edgeLabelPoint().x\"\n [attr.y]=\"edgeLabelPoint().y\"\n [attr.width]=\"model.size().width\"\n [attr.height]=\"model.size().height\">\n <div #edgeLabelWrapper class=\"edge-label-wrapper\" [style]=\"edgeLabelStyle()\">\n {{ model.edgeLabel.text }}\n </div>\n </svg:foreignObject>\n }\n}\n", styles: [".edge-label-wrapper{width:max-content;margin-top:1px;margin-left:1px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2531
2531
|
}
|
|
2532
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2532
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: EdgeLabelComponent, decorators: [{
|
|
2533
2533
|
type: Component,
|
|
2534
2534
|
args: [{ selector: 'g[edgeLabel]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], template: "@if (model(); as model) {\n @if (model.edgeLabel.type === 'html-template' && htmlTemplate()) {\n @if (htmlTemplate(); as htmlTemplate) {\n <svg:foreignObject\n [attr.x]=\"edgeLabelPoint().x\"\n [attr.y]=\"edgeLabelPoint().y\"\n [attr.width]=\"model.size().width\"\n [attr.height]=\"model.size().height\">\n <div #edgeLabelWrapper class=\"edge-label-wrapper\">\n <ng-container *ngTemplateOutlet=\"htmlTemplate; context: getLabelContext()\" />\n </div>\n </svg:foreignObject>\n }\n }\n\n @if (model.edgeLabel.type === 'default') {\n <svg:foreignObject\n [attr.x]=\"edgeLabelPoint().x\"\n [attr.y]=\"edgeLabelPoint().y\"\n [attr.width]=\"model.size().width\"\n [attr.height]=\"model.size().height\">\n <div #edgeLabelWrapper class=\"edge-label-wrapper\" [style]=\"edgeLabelStyle()\">\n {{ model.edgeLabel.text }}\n </div>\n </svg:foreignObject>\n }\n}\n", styles: [".edge-label-wrapper{width:max-content;margin-top:1px;margin-left:1px}\n"] }]
|
|
2535
2535
|
}] });
|
|
@@ -2774,10 +2774,10 @@ class ConnectionControllerDirective {
|
|
|
2774
2774
|
: this.statusService.setConnectionReleaseStatus(source, target, sourceHandle, targetHandle);
|
|
2775
2775
|
}
|
|
2776
2776
|
}
|
|
2777
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2778
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
2777
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ConnectionControllerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2778
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: ConnectionControllerDirective, isStandalone: true, selector: "[connectStart], [connect], [connectEnd], [reconnectStart], [reconnect], [reconnectEnd]", outputs: { connectStart: "connectStart", connect: "connect", connectEnd: "connectEnd", reconnectStart: "reconnectStart", reconnect: "reconnect", reconnectEnd: "reconnectEnd" }, ngImport: i0 }); }
|
|
2779
2779
|
}
|
|
2780
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2780
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ConnectionControllerDirective, decorators: [{
|
|
2781
2781
|
type: Directive,
|
|
2782
2782
|
args: [{
|
|
2783
2783
|
selector: '[connectStart], [connect], [connectEnd], [reconnectStart], [reconnect], [reconnectEnd]',
|
|
@@ -2844,10 +2844,10 @@ class EdgeRenderingService {
|
|
|
2844
2844
|
// pull node
|
|
2845
2845
|
edge.renderOrder.set(this.maxOrder() + 1);
|
|
2846
2846
|
}
|
|
2847
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2848
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
2847
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: EdgeRenderingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
2848
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: EdgeRenderingService }); }
|
|
2849
2849
|
}
|
|
2850
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2850
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: EdgeRenderingService, decorators: [{
|
|
2851
2851
|
type: Injectable
|
|
2852
2852
|
}] });
|
|
2853
2853
|
|
|
@@ -2907,10 +2907,10 @@ class PointerDirective {
|
|
|
2907
2907
|
this.wasPointerOver = false;
|
|
2908
2908
|
}
|
|
2909
2909
|
}
|
|
2910
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2911
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
2910
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: PointerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2911
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: PointerDirective, isStandalone: true, selector: "[pointerStart], [pointerEnd], [pointerOver], [pointerOut]", outputs: { pointerOver: "pointerOver", pointerOut: "pointerOut", pointerStart: "pointerStart", pointerEnd: "pointerEnd" }, host: { listeners: { "mousedown": "onPointerStart($event)", "touchstart": "onPointerStart($event)", "mouseup": "onPointerEnd($event)", "mouseover": "onMouseOver($event)", "mouseout": "onMouseOut($event)" } }, ngImport: i0 }); }
|
|
2912
2912
|
}
|
|
2913
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2913
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: PointerDirective, decorators: [{
|
|
2914
2914
|
type: Directive,
|
|
2915
2915
|
args: [{
|
|
2916
2916
|
standalone: true,
|
|
@@ -2966,10 +2966,10 @@ class EdgeComponent {
|
|
|
2966
2966
|
event.stopPropagation();
|
|
2967
2967
|
this.connectionController?.startReconnection(handle, this.model());
|
|
2968
2968
|
}
|
|
2969
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2970
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
2969
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: EdgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2970
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", 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().labelModels().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().labelModels().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().labelModels().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 }); }
|
|
2971
2971
|
}
|
|
2972
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2972
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: EdgeComponent, decorators: [{
|
|
2973
2973
|
type: Component,
|
|
2974
2974
|
args: [{ selector: 'g[edge]', changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
2975
2975
|
class: 'selectable',
|
|
@@ -2993,13 +2993,13 @@ class HandleService {
|
|
|
2993
2993
|
node.handles.update((handles) => handles.filter((handle) => handle !== handleToDestoy));
|
|
2994
2994
|
}
|
|
2995
2995
|
}
|
|
2996
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2997
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
2996
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: HandleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
2997
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: HandleService }); }
|
|
2998
2998
|
}
|
|
2999
2999
|
__decorate([
|
|
3000
3000
|
Microtask // TODO fixes rendering of handle for group node
|
|
3001
3001
|
], HandleService.prototype, "createHandle", null);
|
|
3002
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
3002
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: HandleService, decorators: [{
|
|
3003
3003
|
type: Injectable
|
|
3004
3004
|
}], propDecorators: { createHandle: [] } });
|
|
3005
3005
|
|
|
@@ -3019,10 +3019,10 @@ class HandleSizeControllerDirective {
|
|
|
3019
3019
|
height: rect.height + stroke,
|
|
3020
3020
|
});
|
|
3021
3021
|
}
|
|
3022
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
3023
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.
|
|
3022
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: HandleSizeControllerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3023
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.18", type: HandleSizeControllerDirective, isStandalone: true, selector: "[handleSizeController]", inputs: { handleModel: { classPropertyName: "handleModel", publicName: "handleSizeController", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
|
|
3024
3024
|
}
|
|
3025
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
3025
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: HandleSizeControllerDirective, decorators: [{
|
|
3026
3026
|
type: Directive,
|
|
3027
3027
|
args: [{
|
|
3028
3028
|
standalone: true,
|
|
@@ -3046,10 +3046,10 @@ class DefaultNodeComponent {
|
|
|
3046
3046
|
constructor() {
|
|
3047
3047
|
this.selected = input(false);
|
|
3048
3048
|
}
|
|
3049
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
3050
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.
|
|
3049
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: DefaultNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3050
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.18", type: DefaultNodeComponent, isStandalone: true, selector: "default-node", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.selected": "selected()" } }, ngImport: i0, template: "<ng-content />\n", styles: [":host{border:1.5px solid #1b262c;border-radius:5px;display:flex;align-items:center;justify-content:center;color:#000;background-color:#fff}:host(.selected){border-width:2px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3051
3051
|
}
|
|
3052
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
3052
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: DefaultNodeComponent, decorators: [{
|
|
3053
3053
|
type: Component,
|
|
3054
3054
|
args: [{ standalone: true, selector: 'default-node', host: {
|
|
3055
3055
|
'[class.selected]': 'selected()',
|
|
@@ -3094,7 +3094,7 @@ class ResizableComponent {
|
|
|
3094
3094
|
else {
|
|
3095
3095
|
this.model.resizable.set(true);
|
|
3096
3096
|
}
|
|
3097
|
-
}
|
|
3097
|
+
});
|
|
3098
3098
|
}
|
|
3099
3099
|
ngOnInit() {
|
|
3100
3100
|
this.model.controlledByResizer.set(true);
|
|
@@ -3236,13 +3236,13 @@ class ResizableComponent {
|
|
|
3236
3236
|
}
|
|
3237
3237
|
}
|
|
3238
3238
|
}
|
|
3239
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
3240
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.
|
|
3239
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ResizableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3240
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.18", type: ResizableComponent, isStandalone: true, selector: "[resizable]", inputs: { resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, resizerColor: { classPropertyName: "resizerColor", publicName: "resizerColor", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "resizer", first: true, predicate: ["resizer"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #resizer>\n <svg:g>\n <!-- top line -->\n <svg:line\n class=\"top\"\n stroke-width=\"2\"\n [attr.x1]=\"lineGap\"\n [attr.y1]=\"-gap()\"\n [attr.x2]=\"model.size().width - lineGap\"\n [attr.y2]=\"-gap()\"\n [attr.stroke]=\"resizerColor()\"\n (pointerStart)=\"startResize('top', $event)\" />\n <!-- Left line -->\n <svg:line\n class=\"left\"\n stroke-width=\"2\"\n [attr.x1]=\"-gap()\"\n [attr.y1]=\"lineGap\"\n [attr.x2]=\"-gap()\"\n [attr.y2]=\"model.size().height - lineGap\"\n [attr.stroke]=\"resizerColor()\"\n (pointerStart)=\"startResize('left', $event)\" />\n <!-- Bottom line -->\n <svg:line\n class=\"bottom\"\n stroke-width=\"2\"\n [attr.x1]=\"lineGap\"\n [attr.y1]=\"model.size().height + gap()\"\n [attr.x2]=\"model.size().width - lineGap\"\n [attr.y2]=\"model.size().height + gap()\"\n [attr.stroke]=\"resizerColor()\"\n (pointerStart)=\"startResize('bottom', $event)\" />\n <!-- Right line -->\n <svg:line\n class=\"right\"\n stroke-width=\"2\"\n [attr.x1]=\"model.size().width + gap()\"\n [attr.y1]=\"lineGap\"\n [attr.x2]=\"model.size().width + gap()\"\n [attr.y2]=\"model.size().height - lineGap\"\n [attr.stroke]=\"resizerColor()\"\n (pointerStart)=\"startResize('right', $event)\" />\n\n <!-- Top Left -->\n <svg:rect\n class=\"top-left\"\n [attr.x]=\"-(handleSize / 2) - gap()\"\n [attr.y]=\"-(handleSize / 2) - gap()\"\n [attr.width]=\"handleSize\"\n [attr.height]=\"handleSize\"\n [attr.fill]=\"resizerColor()\"\n (pointerStart)=\"startResize('top-left', $event)\" />\n\n <!-- Top right -->\n <svg:rect\n class=\"top-right\"\n [attr.x]=\"model.size().width - handleSize / 2 + gap()\"\n [attr.y]=\"-(handleSize / 2) - gap()\"\n [attr.width]=\"handleSize\"\n [attr.height]=\"handleSize\"\n [attr.fill]=\"resizerColor()\"\n (pointerStart)=\"startResize('top-right', $event)\" />\n\n <!-- Bottom left -->\n <svg:rect\n class=\"bottom-left\"\n [attr.x]=\"-(handleSize / 2) - gap()\"\n [attr.y]=\"model.size().height - handleSize / 2 + gap()\"\n [attr.width]=\"handleSize\"\n [attr.height]=\"handleSize\"\n [attr.fill]=\"resizerColor()\"\n (pointerStart)=\"startResize('bottom-left', $event)\" />\n\n <!-- Bottom right -->\n <svg:rect\n class=\"bottom-right\"\n [attr.x]=\"model.size().width - handleSize / 2 + gap()\"\n [attr.y]=\"model.size().height - handleSize / 2 + gap()\"\n [attr.width]=\"handleSize\"\n [attr.height]=\"handleSize\"\n [attr.fill]=\"resizerColor()\"\n (pointerStart)=\"startResize('bottom-right', $event)\" />\n </svg:g>\n</ng-template>\n\n<ng-content />\n", styles: [".top{cursor:n-resize}.left{cursor:w-resize}.right{cursor:e-resize}.bottom{cursor:s-resize}.top-left{cursor:nw-resize}.top-right{cursor:ne-resize}.bottom-left{cursor:sw-resize}.bottom-right{cursor:se-resize}\n"], dependencies: [{ kind: "directive", type: PointerDirective, selector: "[pointerStart], [pointerEnd], [pointerOver], [pointerOut]", outputs: ["pointerOver", "pointerOut", "pointerStart", "pointerEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3241
3241
|
}
|
|
3242
3242
|
__decorate([
|
|
3243
3243
|
Microtask
|
|
3244
3244
|
], ResizableComponent.prototype, "ngAfterViewInit", null);
|
|
3245
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
3245
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ResizableComponent, decorators: [{
|
|
3246
3246
|
type: Component,
|
|
3247
3247
|
args: [{ selector: '[resizable]', imports: [PointerDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #resizer>\n <svg:g>\n <!-- top line -->\n <svg:line\n class=\"top\"\n stroke-width=\"2\"\n [attr.x1]=\"lineGap\"\n [attr.y1]=\"-gap()\"\n [attr.x2]=\"model.size().width - lineGap\"\n [attr.y2]=\"-gap()\"\n [attr.stroke]=\"resizerColor()\"\n (pointerStart)=\"startResize('top', $event)\" />\n <!-- Left line -->\n <svg:line\n class=\"left\"\n stroke-width=\"2\"\n [attr.x1]=\"-gap()\"\n [attr.y1]=\"lineGap\"\n [attr.x2]=\"-gap()\"\n [attr.y2]=\"model.size().height - lineGap\"\n [attr.stroke]=\"resizerColor()\"\n (pointerStart)=\"startResize('left', $event)\" />\n <!-- Bottom line -->\n <svg:line\n class=\"bottom\"\n stroke-width=\"2\"\n [attr.x1]=\"lineGap\"\n [attr.y1]=\"model.size().height + gap()\"\n [attr.x2]=\"model.size().width - lineGap\"\n [attr.y2]=\"model.size().height + gap()\"\n [attr.stroke]=\"resizerColor()\"\n (pointerStart)=\"startResize('bottom', $event)\" />\n <!-- Right line -->\n <svg:line\n class=\"right\"\n stroke-width=\"2\"\n [attr.x1]=\"model.size().width + gap()\"\n [attr.y1]=\"lineGap\"\n [attr.x2]=\"model.size().width + gap()\"\n [attr.y2]=\"model.size().height - lineGap\"\n [attr.stroke]=\"resizerColor()\"\n (pointerStart)=\"startResize('right', $event)\" />\n\n <!-- Top Left -->\n <svg:rect\n class=\"top-left\"\n [attr.x]=\"-(handleSize / 2) - gap()\"\n [attr.y]=\"-(handleSize / 2) - gap()\"\n [attr.width]=\"handleSize\"\n [attr.height]=\"handleSize\"\n [attr.fill]=\"resizerColor()\"\n (pointerStart)=\"startResize('top-left', $event)\" />\n\n <!-- Top right -->\n <svg:rect\n class=\"top-right\"\n [attr.x]=\"model.size().width - handleSize / 2 + gap()\"\n [attr.y]=\"-(handleSize / 2) - gap()\"\n [attr.width]=\"handleSize\"\n [attr.height]=\"handleSize\"\n [attr.fill]=\"resizerColor()\"\n (pointerStart)=\"startResize('top-right', $event)\" />\n\n <!-- Bottom left -->\n <svg:rect\n class=\"bottom-left\"\n [attr.x]=\"-(handleSize / 2) - gap()\"\n [attr.y]=\"model.size().height - handleSize / 2 + gap()\"\n [attr.width]=\"handleSize\"\n [attr.height]=\"handleSize\"\n [attr.fill]=\"resizerColor()\"\n (pointerStart)=\"startResize('bottom-left', $event)\" />\n\n <!-- Bottom right -->\n <svg:rect\n class=\"bottom-right\"\n [attr.x]=\"model.size().width - handleSize / 2 + gap()\"\n [attr.y]=\"model.size().height - handleSize / 2 + gap()\"\n [attr.width]=\"handleSize\"\n [attr.height]=\"handleSize\"\n [attr.fill]=\"resizerColor()\"\n (pointerStart)=\"startResize('bottom-right', $event)\" />\n </svg:g>\n</ng-template>\n\n<ng-content />\n", styles: [".top{cursor:n-resize}.left{cursor:w-resize}.right{cursor:e-resize}.bottom{cursor:s-resize}.top-left{cursor:nw-resize}.top-right{cursor:ne-resize}.bottom-left{cursor:sw-resize}.bottom-right{cursor:se-resize}\n"] }]
|
|
3248
3248
|
}], ctorParameters: () => [], propDecorators: { ngAfterViewInit: [] } });
|
|
@@ -3314,9 +3314,10 @@ function constrainRect(rect, model, side, minWidth, minHeight, maxWidth, maxHeig
|
|
|
3314
3314
|
}
|
|
3315
3315
|
|
|
3316
3316
|
class HandleModel {
|
|
3317
|
-
constructor(rawHandle, parentNode) {
|
|
3317
|
+
constructor(rawHandle, parentNode, batchingService) {
|
|
3318
3318
|
this.rawHandle = rawHandle;
|
|
3319
3319
|
this.parentNode = parentNode;
|
|
3320
|
+
this.batchingService = batchingService;
|
|
3320
3321
|
this.strokeWidth = 2;
|
|
3321
3322
|
/**
|
|
3322
3323
|
* Pre-computed size for default handle, changed dynamically
|
|
@@ -3339,10 +3340,15 @@ class HandleModel {
|
|
|
3339
3340
|
initialValue: { width: 0, height: 0 },
|
|
3340
3341
|
});
|
|
3341
3342
|
// TODO: for some reason toLazySignal breaks unit tests, so we use toSignal here
|
|
3342
|
-
this.hostPosition = toSignal(this.updateHostSizeAndPosition$.pipe(map(() =>
|
|
3343
|
-
|
|
3344
|
-
|
|
3345
|
-
|
|
3343
|
+
this.hostPosition = toSignal(this.updateHostSizeAndPosition$.pipe(map(() => {
|
|
3344
|
+
const offsets = this.hostReference instanceof HTMLElement
|
|
3345
|
+
? this.batchingService.getElementOffsets(this.hostReference)
|
|
3346
|
+
: undefined;
|
|
3347
|
+
return {
|
|
3348
|
+
x: offsets ? offsets.offsetLeft : 0, // for now just 0 for group nodes
|
|
3349
|
+
y: offsets ? offsets.offsetTop : 0, // for now just 0 for group nodes
|
|
3350
|
+
};
|
|
3351
|
+
})), {
|
|
3346
3352
|
initialValue: { x: 0, y: 0 },
|
|
3347
3353
|
});
|
|
3348
3354
|
this.hostOffset = computed(() => {
|
|
@@ -3390,16 +3396,29 @@ class HandleModel {
|
|
|
3390
3396
|
node: this.parentNode.rawNode,
|
|
3391
3397
|
},
|
|
3392
3398
|
};
|
|
3399
|
+
if (this.hostReference instanceof HTMLElement) {
|
|
3400
|
+
this.batchingService.addElementCache(this.hostReference);
|
|
3401
|
+
}
|
|
3402
|
+
}
|
|
3403
|
+
onDestroy() {
|
|
3404
|
+
if (this.hostReference instanceof HTMLElement) {
|
|
3405
|
+
this.batchingService.removeElementCache(this.hostReference);
|
|
3406
|
+
}
|
|
3393
3407
|
}
|
|
3394
3408
|
updateHost() {
|
|
3409
|
+
this.batchingService.markCacheAsDirty();
|
|
3395
3410
|
this.updateHostSizeAndPosition$.next();
|
|
3396
3411
|
}
|
|
3397
3412
|
getHostSize() {
|
|
3413
|
+
//TODO only get the hist ref width once ?
|
|
3398
3414
|
if (this.hostReference instanceof HTMLElement) {
|
|
3399
|
-
|
|
3400
|
-
|
|
3401
|
-
|
|
3402
|
-
|
|
3415
|
+
const offsets = this.batchingService.getElementOffsets(this.hostReference);
|
|
3416
|
+
if (offsets) {
|
|
3417
|
+
return {
|
|
3418
|
+
width: offsets.offsetWidth,
|
|
3419
|
+
height: offsets.offsetHeight,
|
|
3420
|
+
};
|
|
3421
|
+
}
|
|
3403
3422
|
}
|
|
3404
3423
|
else if (this.hostReference instanceof SVGGraphicsElement) {
|
|
3405
3424
|
return this.hostReference.getBBox();
|
|
@@ -3408,12 +3427,102 @@ class HandleModel {
|
|
|
3408
3427
|
}
|
|
3409
3428
|
}
|
|
3410
3429
|
|
|
3430
|
+
class OffsetBatchingCacheService {
|
|
3431
|
+
constructor() {
|
|
3432
|
+
this.elementOffsetCache = new Map();
|
|
3433
|
+
this.cacheIsDirty = true;
|
|
3434
|
+
this.minMsBetweenDirty = 16; //1000 ms/second to get 60fps = ~16ms
|
|
3435
|
+
this.lastDirty = undefined;
|
|
3436
|
+
}
|
|
3437
|
+
addElementCache(element) {
|
|
3438
|
+
this.elementOffsetCache.set(element, undefined);
|
|
3439
|
+
this.markCacheAsDirty();
|
|
3440
|
+
}
|
|
3441
|
+
removeElementCache(element) {
|
|
3442
|
+
this.elementOffsetCache.delete(element);
|
|
3443
|
+
}
|
|
3444
|
+
getElementOffsets(requestedElement) {
|
|
3445
|
+
let requestedCache = undefined;
|
|
3446
|
+
const cachedOffset = this.elementOffsetCache.get(requestedElement);
|
|
3447
|
+
if (cachedOffset === undefined) {
|
|
3448
|
+
this.addElementCache(requestedElement);
|
|
3449
|
+
}
|
|
3450
|
+
else {
|
|
3451
|
+
requestedCache = cachedOffset;
|
|
3452
|
+
}
|
|
3453
|
+
//When something request to get the offset of a given element, compute the cache of all the elements of interest until we get the next dirty request.
|
|
3454
|
+
if (this.cacheIsDirty) {
|
|
3455
|
+
for (const { [0]: element } of this.elementOffsetCache) {
|
|
3456
|
+
const offsetWidth = element.offsetWidth;
|
|
3457
|
+
const offsetHeight = element.offsetHeight;
|
|
3458
|
+
const offsetLeft = element.offsetLeft;
|
|
3459
|
+
const offsetTop = element.offsetTop;
|
|
3460
|
+
const cacheEntry = { offsetWidth, offsetHeight, offsetLeft, offsetTop };
|
|
3461
|
+
this.elementOffsetCache.set(element, cacheEntry);
|
|
3462
|
+
if (element === requestedElement) {
|
|
3463
|
+
requestedCache = cacheEntry;
|
|
3464
|
+
}
|
|
3465
|
+
}
|
|
3466
|
+
this.cacheIsDirty = false;
|
|
3467
|
+
}
|
|
3468
|
+
return requestedCache;
|
|
3469
|
+
}
|
|
3470
|
+
markCacheAsDirty() {
|
|
3471
|
+
const now = new Date();
|
|
3472
|
+
if (this.lastDirty === undefined) {
|
|
3473
|
+
this.cacheIsDirty = true;
|
|
3474
|
+
this.lastDirty = now;
|
|
3475
|
+
return;
|
|
3476
|
+
}
|
|
3477
|
+
//force the cache ttl to at minimum 16ms before considering it dirty
|
|
3478
|
+
const msSinceLastDirty = now.getTime() - this.lastDirty?.getTime();
|
|
3479
|
+
if (msSinceLastDirty > this.minMsBetweenDirty) {
|
|
3480
|
+
this.cacheIsDirty = true;
|
|
3481
|
+
this.lastDirty = now;
|
|
3482
|
+
}
|
|
3483
|
+
}
|
|
3484
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: OffsetBatchingCacheService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
3485
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: OffsetBatchingCacheService }); }
|
|
3486
|
+
}
|
|
3487
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: OffsetBatchingCacheService, decorators: [{
|
|
3488
|
+
type: Injectable
|
|
3489
|
+
}] });
|
|
3490
|
+
|
|
3491
|
+
class RequestAnimationFrameBatchingService {
|
|
3492
|
+
constructor() {
|
|
3493
|
+
this.callbacks = [];
|
|
3494
|
+
this.requestAnimationFrameStarted = false;
|
|
3495
|
+
}
|
|
3496
|
+
batchAnimationFrame(callback) {
|
|
3497
|
+
this.callbacks.push(callback);
|
|
3498
|
+
if (!this.requestAnimationFrameStarted) {
|
|
3499
|
+
this.requestAnimationFrameStarted = true;
|
|
3500
|
+
requestAnimationFrame(() => {
|
|
3501
|
+
this.callbacks.map((x) => {
|
|
3502
|
+
if (x) {
|
|
3503
|
+
x();
|
|
3504
|
+
}
|
|
3505
|
+
});
|
|
3506
|
+
this.callbacks = [];
|
|
3507
|
+
this.requestAnimationFrameStarted = false;
|
|
3508
|
+
});
|
|
3509
|
+
}
|
|
3510
|
+
}
|
|
3511
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: RequestAnimationFrameBatchingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
3512
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: RequestAnimationFrameBatchingService }); }
|
|
3513
|
+
}
|
|
3514
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: RequestAnimationFrameBatchingService, decorators: [{
|
|
3515
|
+
type: Injectable
|
|
3516
|
+
}] });
|
|
3517
|
+
|
|
3411
3518
|
class HandleComponent {
|
|
3412
3519
|
constructor() {
|
|
3413
3520
|
this.injector = inject(Injector);
|
|
3414
3521
|
this.handleService = inject(HandleService);
|
|
3415
3522
|
this.element = inject(ElementRef).nativeElement;
|
|
3416
3523
|
this.destroyRef = inject(DestroyRef);
|
|
3524
|
+
this.requestAnimationFrameBatchingService = inject(RequestAnimationFrameBatchingService);
|
|
3525
|
+
this.offsetBatchingCacheService = inject(OffsetBatchingCacheService);
|
|
3417
3526
|
/**
|
|
3418
3527
|
* At what side of node this component should be placed
|
|
3419
3528
|
*/
|
|
@@ -3442,41 +3551,104 @@ class HandleComponent {
|
|
|
3442
3551
|
template: this.template(),
|
|
3443
3552
|
userOffsetX: this.offsetX(),
|
|
3444
3553
|
userOffsetY: this.offsetY(),
|
|
3445
|
-
}, node);
|
|
3554
|
+
}, node, this.offsetBatchingCacheService);
|
|
3446
3555
|
this.handleService.createHandle(model);
|
|
3447
|
-
|
|
3448
|
-
|
|
3556
|
+
this.requestAnimationFrameBatchingService.batchAnimationFrame(() => {
|
|
3557
|
+
model.updateHost();
|
|
3558
|
+
});
|
|
3559
|
+
this.destroyRef.onDestroy(() => {
|
|
3560
|
+
this.handleService.destroyHandle(model);
|
|
3561
|
+
model.onDestroy();
|
|
3562
|
+
});
|
|
3449
3563
|
}
|
|
3450
3564
|
});
|
|
3451
3565
|
}
|
|
3452
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
3453
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.
|
|
3566
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: HandleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3567
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.18", type: HandleComponent, isStandalone: true, selector: "handle", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null }, offsetX: { classPropertyName: "offsetX", publicName: "offsetX", isSignal: true, isRequired: false, transformFunction: null }, offsetY: { classPropertyName: "offsetY", publicName: "offsetY", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3454
3568
|
}
|
|
3455
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
3569
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: HandleComponent, decorators: [{
|
|
3456
3570
|
type: Component,
|
|
3457
3571
|
args: [{ standalone: true, selector: 'handle', changeDetection: ChangeDetectionStrategy.OnPush, template: "" }]
|
|
3458
3572
|
}] });
|
|
3459
3573
|
|
|
3574
|
+
class ResizeObserverService {
|
|
3575
|
+
constructor() {
|
|
3576
|
+
this.zone = inject(NgZone);
|
|
3577
|
+
this.thingsToObserve = new Map();
|
|
3578
|
+
this.resizeObserver = new ResizeObserver((entries) => {
|
|
3579
|
+
this.zone.run(() => {
|
|
3580
|
+
for (const entry of entries) {
|
|
3581
|
+
const callbacks = this.thingsToObserve.get(entry.target);
|
|
3582
|
+
if (callbacks !== undefined) {
|
|
3583
|
+
callbacks.forEach((c) => c(entry));
|
|
3584
|
+
}
|
|
3585
|
+
}
|
|
3586
|
+
});
|
|
3587
|
+
});
|
|
3588
|
+
}
|
|
3589
|
+
addObserver(element, callback) {
|
|
3590
|
+
const callbacks = this.thingsToObserve.get(element);
|
|
3591
|
+
if (callbacks === undefined) {
|
|
3592
|
+
this.thingsToObserve.set(element, [callback]);
|
|
3593
|
+
}
|
|
3594
|
+
else {
|
|
3595
|
+
callbacks.push(callback);
|
|
3596
|
+
}
|
|
3597
|
+
this.resizeObserver.observe(element);
|
|
3598
|
+
}
|
|
3599
|
+
removeObserver(element) {
|
|
3600
|
+
this.thingsToObserve.delete(element);
|
|
3601
|
+
if (this.resizeObserver) {
|
|
3602
|
+
this.resizeObserver.unobserve(element);
|
|
3603
|
+
}
|
|
3604
|
+
}
|
|
3605
|
+
ngOnDestroy() {
|
|
3606
|
+
this.resizeObserver.disconnect();
|
|
3607
|
+
}
|
|
3608
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ResizeObserverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
3609
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ResizeObserverService }); }
|
|
3610
|
+
}
|
|
3611
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ResizeObserverService, decorators: [{
|
|
3612
|
+
type: Injectable
|
|
3613
|
+
}], ctorParameters: () => [] });
|
|
3614
|
+
|
|
3460
3615
|
class NodeHandlesControllerDirective {
|
|
3461
3616
|
constructor() {
|
|
3462
3617
|
this.nodeAccessor = inject(NodeAccessorService);
|
|
3463
|
-
this.zone = inject(NgZone);
|
|
3464
3618
|
this.destroyRef = inject(DestroyRef);
|
|
3465
3619
|
this.hostElementRef = inject(ElementRef);
|
|
3620
|
+
this.resizeObserverService = inject(ResizeObserverService);
|
|
3621
|
+
this.requestAnimationFrameBatchingService = inject(RequestAnimationFrameBatchingService);
|
|
3466
3622
|
}
|
|
3467
3623
|
ngOnInit() {
|
|
3468
3624
|
const model = this.nodeAccessor.model();
|
|
3625
|
+
let isTrackingHostElement = false;
|
|
3469
3626
|
model.handles$
|
|
3470
|
-
.pipe(
|
|
3627
|
+
.pipe(pairwise(), tap(([previousHandles, currentHandles]) => {
|
|
3628
|
+
const handlesToRemove = previousHandles.filter((prev) => currentHandles.find((curr) => curr.hostReference === prev.hostReference) === undefined);
|
|
3629
|
+
handlesToRemove.forEach((h) => this.resizeObserverService.removeObserver(h.hostReference));
|
|
3630
|
+
const handlesToAdd = currentHandles.filter((curr) => previousHandles.find((prev) => curr.hostReference === prev.hostReference) === undefined);
|
|
3631
|
+
if (!isTrackingHostElement) {
|
|
3632
|
+
this.resizeObserverService.addObserver(this.hostElementRef.nativeElement, () => {
|
|
3633
|
+
currentHandles.forEach((h) => h.updateHost());
|
|
3634
|
+
});
|
|
3635
|
+
isTrackingHostElement = true;
|
|
3636
|
+
}
|
|
3637
|
+
handlesToAdd.forEach((h) => this.resizeObserverService.addObserver(h.hostReference, () => {
|
|
3638
|
+
currentHandles.forEach((h) => h.updateHost());
|
|
3639
|
+
}));
|
|
3640
|
+
//Here we need this to be in a requestAnimationFrame otherwise the handle can still be present in the dom which throws off the offset cache
|
|
3641
|
+
this.requestAnimationFrameBatchingService.batchAnimationFrame(() => {
|
|
3642
|
+
currentHandles.forEach((h) => h.updateHost());
|
|
3643
|
+
});
|
|
3471
3644
|
// TODO (performance) inspect how to avoid calls of this when flow initially rendered
|
|
3472
|
-
handles.forEach((h) => h.updateHost());
|
|
3473
3645
|
}), takeUntilDestroyed(this.destroyRef))
|
|
3474
3646
|
.subscribe();
|
|
3475
3647
|
}
|
|
3476
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
3477
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
3648
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NodeHandlesControllerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3649
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: NodeHandlesControllerDirective, isStandalone: true, selector: "[nodeHandlesController]", ngImport: i0 }); }
|
|
3478
3650
|
}
|
|
3479
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
3651
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NodeHandlesControllerDirective, decorators: [{
|
|
3480
3652
|
type: Directive,
|
|
3481
3653
|
args: [{
|
|
3482
3654
|
selector: '[nodeHandlesController]',
|
|
@@ -3490,24 +3662,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
3490
3662
|
class NodeResizeControllerDirective {
|
|
3491
3663
|
constructor() {
|
|
3492
3664
|
this.nodeAccessor = inject(NodeAccessorService);
|
|
3493
|
-
this.
|
|
3494
|
-
this.destroyRef = inject(DestroyRef);
|
|
3665
|
+
this.resizeObserverService = inject(ResizeObserverService);
|
|
3495
3666
|
this.hostElementRef = inject(ElementRef);
|
|
3496
3667
|
}
|
|
3497
3668
|
ngOnInit() {
|
|
3498
3669
|
const model = this.nodeAccessor.model();
|
|
3499
|
-
|
|
3500
|
-
|
|
3501
|
-
.
|
|
3502
|
-
|
|
3503
|
-
|
|
3504
|
-
|
|
3505
|
-
|
|
3670
|
+
this.resizeObserverService.addObserver(this.hostElementRef.nativeElement, (resizeEntry) => {
|
|
3671
|
+
model.width.set(resizeEntry.target.clientWidth);
|
|
3672
|
+
model.height.set(resizeEntry.target.clientHeight);
|
|
3673
|
+
});
|
|
3674
|
+
}
|
|
3675
|
+
ngOnDestroy() {
|
|
3676
|
+
this.resizeObserverService.removeObserver(this.hostElementRef.nativeElement);
|
|
3506
3677
|
}
|
|
3507
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
3508
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
3678
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NodeResizeControllerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3679
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: NodeResizeControllerDirective, isStandalone: true, selector: "[nodeResizeController]", ngImport: i0 }); }
|
|
3509
3680
|
}
|
|
3510
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
3681
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NodeResizeControllerDirective, decorators: [{
|
|
3511
3682
|
type: Directive,
|
|
3512
3683
|
args: [{
|
|
3513
3684
|
selector: '[nodeResizeController]',
|
|
@@ -3580,10 +3751,10 @@ class NodeComponent {
|
|
|
3580
3751
|
this.selectionService.select(this.model());
|
|
3581
3752
|
}
|
|
3582
3753
|
}
|
|
3583
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
3584
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
3754
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3755
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", 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 @if (model().componentInstance$ | async; as component) {\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(component)\"\n [ngComponentOutletInputs]=\"model().componentTypeInputs\"\n [ngComponentOutletInjector]=\"injector\" />\n </div>\n </svg:foreignObject>\n }\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 === undefined) {\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 === null) {\n <svg:g\n [handleSizeController]=\"handle\"\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", "offsetX", "offsetY"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { 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]" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3585
3756
|
}
|
|
3586
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
3757
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NodeComponent, decorators: [{
|
|
3587
3758
|
type: Component,
|
|
3588
3759
|
args: [{ selector: 'g[node]', changeDetection: ChangeDetectionStrategy.OnPush, providers: [HandleService, NodeAccessorService], host: {
|
|
3589
3760
|
class: 'vflow-node',
|
|
@@ -3688,8 +3859,8 @@ class ConnectionComponent {
|
|
|
3688
3859
|
allNodes: this.flowEntitiesService.rawNodes(),
|
|
3689
3860
|
};
|
|
3690
3861
|
}
|
|
3691
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
3692
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
3862
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ConnectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3863
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: ConnectionComponent, isStandalone: true, selector: "g[connection]", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
|
|
3693
3864
|
@if (model().type === 'default') {
|
|
3694
3865
|
@if (path(); as path) {
|
|
3695
3866
|
<svg:path
|
|
@@ -3708,7 +3879,7 @@ class ConnectionComponent {
|
|
|
3708
3879
|
}
|
|
3709
3880
|
`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3710
3881
|
}
|
|
3711
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
3882
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ConnectionComponent, decorators: [{
|
|
3712
3883
|
type: Component,
|
|
3713
3884
|
args: [{
|
|
3714
3885
|
selector: 'g[connection]',
|
|
@@ -3756,6 +3927,8 @@ const defaultBg = '#fff';
|
|
|
3756
3927
|
const defaultGap = 20;
|
|
3757
3928
|
const defaultDotSize = 2;
|
|
3758
3929
|
const defaultDotColor = 'rgb(177, 177, 183)';
|
|
3930
|
+
const defaultGridSize = 20;
|
|
3931
|
+
const defaultStrokeWidth = 2;
|
|
3759
3932
|
const defaultImageScale = 0.1;
|
|
3760
3933
|
const defaultRepeated = true;
|
|
3761
3934
|
class BackgroundComponent {
|
|
@@ -3764,21 +3937,16 @@ class BackgroundComponent {
|
|
|
3764
3937
|
this.rootSvg = inject(RootSvgReferenceDirective).element;
|
|
3765
3938
|
this.settingsService = inject(FlowSettingsService);
|
|
3766
3939
|
this.backgroundSignal = this.settingsService.background;
|
|
3767
|
-
|
|
3768
|
-
|
|
3769
|
-
|
|
3770
|
-
|
|
3771
|
-
|
|
3772
|
-
return zoom * (background.gap ?? defaultGap);
|
|
3773
|
-
}
|
|
3774
|
-
return 0;
|
|
3940
|
+
this.x = computed(() => {
|
|
3941
|
+
return this.viewportService.readableViewport().x % this.scaledGap();
|
|
3942
|
+
});
|
|
3943
|
+
this.y = computed(() => {
|
|
3944
|
+
return this.viewportService.readableViewport().y % this.scaledGap();
|
|
3775
3945
|
});
|
|
3776
|
-
this.x = computed(() => this.viewportService.readableViewport().x % this.scaledGap());
|
|
3777
|
-
this.y = computed(() => this.viewportService.readableViewport().y % this.scaledGap());
|
|
3778
3946
|
this.patternColor = computed(() => {
|
|
3779
|
-
const
|
|
3780
|
-
if (
|
|
3781
|
-
return
|
|
3947
|
+
const background = this.backgroundSignal();
|
|
3948
|
+
if (background.type === 'dots' || background.type === 'grid') {
|
|
3949
|
+
return background.color ?? defaultDotColor;
|
|
3782
3950
|
}
|
|
3783
3951
|
return defaultDotColor;
|
|
3784
3952
|
});
|
|
@@ -3787,6 +3955,29 @@ class BackgroundComponent {
|
|
|
3787
3955
|
if (background.type === 'dots') {
|
|
3788
3956
|
return (this.viewportService.readableViewport().zoom * (background.size ?? defaultDotSize)) / 2;
|
|
3789
3957
|
}
|
|
3958
|
+
if (background.type === 'grid') {
|
|
3959
|
+
return this.viewportService.readableViewport().zoom * (background.size ?? defaultGridSize);
|
|
3960
|
+
}
|
|
3961
|
+
return 0;
|
|
3962
|
+
});
|
|
3963
|
+
this.scaledGap = computed(() => {
|
|
3964
|
+
const background = this.backgroundSignal();
|
|
3965
|
+
const zoom = this.viewportService.readableViewport().zoom;
|
|
3966
|
+
if (background.type === 'dots') {
|
|
3967
|
+
return zoom * (background.gap ?? defaultGap);
|
|
3968
|
+
}
|
|
3969
|
+
if (background.type === 'grid') {
|
|
3970
|
+
return zoom * (background.size ?? defaultGridSize);
|
|
3971
|
+
}
|
|
3972
|
+
return 0;
|
|
3973
|
+
});
|
|
3974
|
+
// GRID PATTERN
|
|
3975
|
+
this.strokeWidth = computed(() => {
|
|
3976
|
+
const background = this.backgroundSignal();
|
|
3977
|
+
if (background.type === 'grid') {
|
|
3978
|
+
const zoom = this.viewportService.readableViewport().zoom;
|
|
3979
|
+
return zoom * ((background.strokeWidth ?? defaultStrokeWidth) / 2);
|
|
3980
|
+
}
|
|
3790
3981
|
return 0;
|
|
3791
3982
|
});
|
|
3792
3983
|
// IMAGE PATTERN
|
|
@@ -3844,17 +4035,20 @@ class BackgroundComponent {
|
|
|
3844
4035
|
if (background.type === 'dots') {
|
|
3845
4036
|
this.rootSvg.style.backgroundColor = background.backgroundColor ?? defaultBg;
|
|
3846
4037
|
}
|
|
4038
|
+
if (background.type === 'grid') {
|
|
4039
|
+
this.rootSvg.style.backgroundColor = background.backgroundColor ?? defaultBg;
|
|
4040
|
+
}
|
|
3847
4041
|
if (background.type === 'solid') {
|
|
3848
4042
|
this.rootSvg.style.backgroundColor = background.color;
|
|
3849
4043
|
}
|
|
3850
4044
|
});
|
|
3851
4045
|
}
|
|
3852
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
3853
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
4046
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: BackgroundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4047
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: BackgroundComponent, isStandalone: true, selector: "g[background]", ngImport: i0, template: "@if (backgroundSignal().type === 'dots') {\n <svg:pattern\n patternUnits=\"userSpaceOnUse\"\n [attr.id]=\"patternId\"\n [attr.x]=\"x()\"\n [attr.y]=\"y()\"\n [attr.width]=\"scaledGap()\"\n [attr.height]=\"scaledGap()\">\n <svg:circle\n [attr.cx]=\"patternSize()\"\n [attr.cy]=\"patternSize()\"\n [attr.r]=\"patternSize()\"\n [attr.fill]=\"patternColor()\" />\n </svg:pattern>\n\n <svg:rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" [attr.fill]=\"patternUrl\" />\n}\n\n@if (backgroundSignal().type === 'image') {\n @if (repeated()) {\n <svg:pattern\n patternUnits=\"userSpaceOnUse\"\n [attr.id]=\"patternId\"\n [attr.x]=\"imageX()\"\n [attr.y]=\"imageY()\"\n [attr.width]=\"scaledImageWidth()\"\n [attr.height]=\"scaledImageHeight()\">\n <svg:image [attr.href]=\"bgImageSrc()\" [attr.width]=\"scaledImageWidth()\" [attr.height]=\"scaledImageHeight()\" />\n </svg:pattern>\n\n <svg:rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" [attr.fill]=\"patternUrl\" />\n }\n\n @if (!repeated()) {\n <svg:image\n [attr.x]=\"imageX()\"\n [attr.y]=\"imageY()\"\n [attr.width]=\"scaledImageWidth()\"\n [attr.height]=\"scaledImageHeight()\"\n [attr.href]=\"bgImageSrc()\" />\n }\n}\n\n@if (backgroundSignal().type === 'grid') {\n <svg:pattern\n patternUnits=\"userSpaceOnUse\"\n [attr.id]=\"patternId\"\n [attr.x]=\"x()\"\n [attr.y]=\"y()\"\n [attr.width]=\"patternSize()\"\n [attr.height]=\"patternSize()\">\n <svg:path\n fill=\"none\"\n [attr.d]=\"'M ' + patternSize() + ' 0 L 0 0 0 ' + patternSize()\"\n [attr.stroke]=\"patternColor()\"\n [attr.stroke-width]=\"strokeWidth()\" />\n </svg:pattern>\n\n <svg:rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" [attr.fill]=\"patternUrl\" />\n}\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3854
4048
|
}
|
|
3855
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
4049
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: BackgroundComponent, decorators: [{
|
|
3856
4050
|
type: Component,
|
|
3857
|
-
args: [{ standalone: true, selector: 'g[background]', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (backgroundSignal().type === 'dots') {\n <svg:pattern\n patternUnits=\"userSpaceOnUse\"\n [attr.id]=\"patternId\"\n [attr.x]=\"x()\"\n [attr.y]=\"y()\"\n [attr.width]=\"scaledGap()\"\n [attr.height]=\"scaledGap()\">\n <svg:circle\n [attr.cx]=\"patternSize()\"\n [attr.cy]=\"patternSize()\"\n [attr.r]=\"patternSize()\"\n [attr.fill]=\"patternColor()\" />\n </svg:pattern>\n\n <svg:rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" [attr.fill]=\"patternUrl\" />\n}\n\n@if (backgroundSignal().type === 'image') {\n @if (repeated()) {\n <svg:pattern\n patternUnits=\"userSpaceOnUse\"\n [attr.id]=\"patternId\"\n [attr.x]=\"imageX()\"\n [attr.y]=\"imageY()\"\n [attr.width]=\"scaledImageWidth()\"\n [attr.height]=\"scaledImageHeight()\">\n <svg:image [attr.href]=\"bgImageSrc()\" [attr.width]=\"scaledImageWidth()\" [attr.height]=\"scaledImageHeight()\" />\n </svg:pattern>\n\n <svg:rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" [attr.fill]=\"patternUrl\" />\n }\n\n @if (!repeated()) {\n <svg:image\n [attr.x]=\"imageX()\"\n [attr.y]=\"imageY()\"\n [attr.width]=\"scaledImageWidth()\"\n [attr.height]=\"scaledImageHeight()\"\n [attr.href]=\"bgImageSrc()\" />\n }\n}\n" }]
|
|
4051
|
+
args: [{ standalone: true, selector: 'g[background]', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (backgroundSignal().type === 'dots') {\n <svg:pattern\n patternUnits=\"userSpaceOnUse\"\n [attr.id]=\"patternId\"\n [attr.x]=\"x()\"\n [attr.y]=\"y()\"\n [attr.width]=\"scaledGap()\"\n [attr.height]=\"scaledGap()\">\n <svg:circle\n [attr.cx]=\"patternSize()\"\n [attr.cy]=\"patternSize()\"\n [attr.r]=\"patternSize()\"\n [attr.fill]=\"patternColor()\" />\n </svg:pattern>\n\n <svg:rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" [attr.fill]=\"patternUrl\" />\n}\n\n@if (backgroundSignal().type === 'image') {\n @if (repeated()) {\n <svg:pattern\n patternUnits=\"userSpaceOnUse\"\n [attr.id]=\"patternId\"\n [attr.x]=\"imageX()\"\n [attr.y]=\"imageY()\"\n [attr.width]=\"scaledImageWidth()\"\n [attr.height]=\"scaledImageHeight()\">\n <svg:image [attr.href]=\"bgImageSrc()\" [attr.width]=\"scaledImageWidth()\" [attr.height]=\"scaledImageHeight()\" />\n </svg:pattern>\n\n <svg:rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" [attr.fill]=\"patternUrl\" />\n }\n\n @if (!repeated()) {\n <svg:image\n [attr.x]=\"imageX()\"\n [attr.y]=\"imageY()\"\n [attr.width]=\"scaledImageWidth()\"\n [attr.height]=\"scaledImageHeight()\"\n [attr.href]=\"bgImageSrc()\" />\n }\n}\n\n@if (backgroundSignal().type === 'grid') {\n <svg:pattern\n patternUnits=\"userSpaceOnUse\"\n [attr.id]=\"patternId\"\n [attr.x]=\"x()\"\n [attr.y]=\"y()\"\n [attr.width]=\"patternSize()\"\n [attr.height]=\"patternSize()\">\n <svg:path\n fill=\"none\"\n [attr.d]=\"'M ' + patternSize() + ' 0 L 0 0 0 ' + patternSize()\"\n [attr.stroke]=\"patternColor()\"\n [attr.stroke-width]=\"strokeWidth()\" />\n </svg:pattern>\n\n <svg:rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" [attr.fill]=\"patternUrl\" />\n}\n" }]
|
|
3858
4052
|
}], ctorParameters: () => [] });
|
|
3859
4053
|
function createImage(url) {
|
|
3860
4054
|
const image = new Image();
|
|
@@ -3869,10 +4063,10 @@ class DefsComponent {
|
|
|
3869
4063
|
this.markers = input.required();
|
|
3870
4064
|
this.defaultColor = 'rgb(177, 177, 183)';
|
|
3871
4065
|
}
|
|
3872
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
3873
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
4066
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: DefsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4067
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: DefsComponent, isStandalone: true, selector: "defs[flowDefs]", inputs: { markers: { classPropertyName: "markers", publicName: "markers", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@for (marker of markers() | keyvalue; track marker) {\n <svg:marker\n viewBox=\"-10 -10 20 20\"\n refX=\"0\"\n refY=\"0\"\n [attr.id]=\"marker.key\"\n [attr.markerWidth]=\"marker.value.width ?? 16.5\"\n [attr.markerHeight]=\"marker.value.height ?? 16.5\"\n [attr.orient]=\"marker.value.orient ?? 'auto-start-reverse'\"\n [attr.markerUnits]=\"marker.value.markerUnits ?? 'userSpaceOnUse'\">\n @if (marker.value.type === 'arrow-closed' || !marker.value.type) {\n <polyline\n class=\"marker__arrow_closed\"\n points=\"-5,-4 1,0 -5,4 -5,-4\"\n [style.stroke]=\"marker.value.color ?? defaultColor\"\n [style.stroke-width]=\"marker.value.strokeWidth ?? 2\"\n [style.fill]=\"marker.value.color ?? defaultColor\" />\n }\n\n @if (marker.value.type === 'arrow') {\n <polyline\n class=\"marker__arrow_default\"\n points=\"-5,-4 0,0 -5,4\"\n [style.stroke]=\"marker.value.color ?? defaultColor\"\n [style.stroke-width]=\"marker.value.strokeWidth ?? 2\" />\n }\n </svg:marker>\n}\n", styles: [".marker__arrow_default{stroke-width:1px;stroke-linecap:round;stroke-linejoin:round;fill:none}.marker__arrow_closed{stroke-linecap:round;stroke-linejoin:round}\n"], dependencies: [{ kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3874
4068
|
}
|
|
3875
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
4069
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: DefsComponent, decorators: [{
|
|
3876
4070
|
type: Component,
|
|
3877
4071
|
args: [{ selector: 'defs[flowDefs]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [KeyValuePipe], template: "@for (marker of markers() | keyvalue; track marker) {\n <svg:marker\n viewBox=\"-10 -10 20 20\"\n refX=\"0\"\n refY=\"0\"\n [attr.id]=\"marker.key\"\n [attr.markerWidth]=\"marker.value.width ?? 16.5\"\n [attr.markerHeight]=\"marker.value.height ?? 16.5\"\n [attr.orient]=\"marker.value.orient ?? 'auto-start-reverse'\"\n [attr.markerUnits]=\"marker.value.markerUnits ?? 'userSpaceOnUse'\">\n @if (marker.value.type === 'arrow-closed' || !marker.value.type) {\n <polyline\n class=\"marker__arrow_closed\"\n points=\"-5,-4 1,0 -5,4 -5,-4\"\n [style.stroke]=\"marker.value.color ?? defaultColor\"\n [style.stroke-width]=\"marker.value.strokeWidth ?? 2\"\n [style.fill]=\"marker.value.color ?? defaultColor\" />\n }\n\n @if (marker.value.type === 'arrow') {\n <polyline\n class=\"marker__arrow_default\"\n points=\"-5,-4 0,0 -5,4\"\n [style.stroke]=\"marker.value.color ?? defaultColor\"\n [style.stroke-width]=\"marker.value.strokeWidth ?? 2\" />\n }\n </svg:marker>\n}\n", styles: [".marker__arrow_default{stroke-width:1px;stroke-linecap:round;stroke-linejoin:round;fill:none}.marker__arrow_closed{stroke-linecap:round;stroke-linejoin:round}\n"] }]
|
|
3878
4072
|
}] });
|
|
@@ -3896,10 +4090,10 @@ class FlowSizeControllerDirective {
|
|
|
3896
4090
|
}), takeUntilDestroyed())
|
|
3897
4091
|
.subscribe();
|
|
3898
4092
|
}
|
|
3899
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
3900
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
4093
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FlowSizeControllerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
4094
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: FlowSizeControllerDirective, isStandalone: true, selector: "svg[flowSizeController]", host: { properties: { "attr.width": "flowWidth()", "attr.height": "flowHeight()" } }, ngImport: i0 }); }
|
|
3901
4095
|
}
|
|
3902
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
4096
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FlowSizeControllerDirective, decorators: [{
|
|
3903
4097
|
type: Directive,
|
|
3904
4098
|
args: [{
|
|
3905
4099
|
standalone: true,
|
|
@@ -3926,10 +4120,10 @@ class RootSvgContextDirective {
|
|
|
3926
4120
|
this.flowStatusService.setReconnectionDroppedStatus(status.payload.source, status.payload.sourceHandle, status.payload.oldEdge);
|
|
3927
4121
|
}
|
|
3928
4122
|
}
|
|
3929
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
3930
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
4123
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: RootSvgContextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
4124
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: RootSvgContextDirective, isStandalone: true, selector: "svg[rootSvgContext]", host: { listeners: { "document:mouseup": "resetConnection()", "document:touchend": "resetConnection()", "contextmenu": "resetConnection()" } }, ngImport: i0 }); }
|
|
3931
4125
|
}
|
|
3932
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
4126
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: RootSvgContextDirective, decorators: [{
|
|
3933
4127
|
type: Directive,
|
|
3934
4128
|
args: [{
|
|
3935
4129
|
standalone: true,
|
|
@@ -3972,10 +4166,10 @@ function getSpacePoints(point, groups) {
|
|
|
3972
4166
|
}
|
|
3973
4167
|
|
|
3974
4168
|
class PreviewFlowRenderStrategyService {
|
|
3975
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
3976
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
4169
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: PreviewFlowRenderStrategyService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
4170
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: PreviewFlowRenderStrategyService }); }
|
|
3977
4171
|
}
|
|
3978
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
4172
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: PreviewFlowRenderStrategyService, decorators: [{
|
|
3979
4173
|
type: Injectable
|
|
3980
4174
|
}] });
|
|
3981
4175
|
class ViewportPreviewFlowRenderStrategyService extends PreviewFlowRenderStrategyService {
|
|
@@ -3983,10 +4177,10 @@ class ViewportPreviewFlowRenderStrategyService extends PreviewFlowRenderStrategy
|
|
|
3983
4177
|
// Do not render preview node if the real node is visible
|
|
3984
4178
|
return !node.isVisible();
|
|
3985
4179
|
}
|
|
3986
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
3987
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
4180
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ViewportPreviewFlowRenderStrategyService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
4181
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ViewportPreviewFlowRenderStrategyService }); }
|
|
3988
4182
|
}
|
|
3989
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
4183
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ViewportPreviewFlowRenderStrategyService, decorators: [{
|
|
3990
4184
|
type: Injectable
|
|
3991
4185
|
}] });
|
|
3992
4186
|
|
|
@@ -4133,10 +4327,10 @@ class PreviewFlowComponent {
|
|
|
4133
4327
|
this.ctx.restore();
|
|
4134
4328
|
});
|
|
4135
4329
|
}
|
|
4136
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
4137
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.
|
|
4330
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: PreviewFlowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4331
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.18", type: PreviewFlowComponent, isStandalone: true, selector: "canvas[previewFlow]", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4138
4332
|
}
|
|
4139
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
4333
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: PreviewFlowComponent, decorators: [{
|
|
4140
4334
|
type: Component,
|
|
4141
4335
|
args: [{
|
|
4142
4336
|
standalone: true,
|
|
@@ -4158,10 +4352,10 @@ class FlowRenderingService {
|
|
|
4158
4352
|
this.flowInitialized.set(true);
|
|
4159
4353
|
});
|
|
4160
4354
|
}
|
|
4161
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
4162
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
4355
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FlowRenderingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
4356
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FlowRenderingService }); }
|
|
4163
4357
|
}
|
|
4164
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
4358
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FlowRenderingService, decorators: [{
|
|
4165
4359
|
type: Injectable
|
|
4166
4360
|
}], ctorParameters: () => [] });
|
|
4167
4361
|
// TODO may break on edge cases
|
|
@@ -4284,10 +4478,10 @@ class AlignmentHelperComponent {
|
|
|
4284
4478
|
}), takeUntilDestroyed())
|
|
4285
4479
|
.subscribe();
|
|
4286
4480
|
}
|
|
4287
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
4288
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
4481
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: AlignmentHelperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4482
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: AlignmentHelperComponent, isStandalone: true, selector: "g[alignmentHelper]", inputs: { tolerance: { classPropertyName: "tolerance", publicName: "tolerance", isSignal: true, isRequired: false, transformFunction: null }, lineColor: { classPropertyName: "lineColor", publicName: "lineColor", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (isNodeDragging()) {\n @if (intersections(); as intersections) {\n @for (intersection of intersections.lines; track $index) {\n <svg:line\n [attr.stroke]=\"lineColor()\"\n [attr.stroke-dasharray]=\"intersection.isCenter ? 4 : null\"\n [attr.x1]=\"intersection.x\"\n [attr.y1]=\"intersection.y\"\n [attr.x2]=\"intersection.x2\"\n [attr.y2]=\"intersection.y2\" />\n }\n }\n}\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4289
4483
|
}
|
|
4290
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
4484
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: AlignmentHelperComponent, decorators: [{
|
|
4291
4485
|
type: Component,
|
|
4292
4486
|
args: [{ selector: 'g[alignmentHelper]', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "@if (isNodeDragging()) {\n @if (intersections(); as intersections) {\n @for (intersection of intersections.lines; track $index) {\n <svg:line\n [attr.stroke]=\"lineColor()\"\n [attr.stroke-dasharray]=\"intersection.isCenter ? 4 : null\"\n [attr.x1]=\"intersection.x\"\n [attr.y1]=\"intersection.y\"\n [attr.x2]=\"intersection.x2\"\n [attr.y2]=\"intersection.y2\" />\n }\n }\n}\n" }]
|
|
4293
4487
|
}], ctorParameters: () => [] });
|
|
@@ -4360,10 +4554,10 @@ class AutoPanDirective {
|
|
|
4360
4554
|
});
|
|
4361
4555
|
}
|
|
4362
4556
|
}
|
|
4363
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
4364
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
4557
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: AutoPanDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
4558
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: AutoPanDirective, isStandalone: true, selector: "[autoPan]", ngImport: i0 }); }
|
|
4365
4559
|
}
|
|
4366
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
4560
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: AutoPanDirective, decorators: [{
|
|
4367
4561
|
type: Directive,
|
|
4368
4562
|
args: [{ selector: '[autoPan]', standalone: true }]
|
|
4369
4563
|
}] });
|
|
@@ -4678,8 +4872,8 @@ class VflowComponent {
|
|
|
4678
4872
|
trackEdges(idx, { edge }) {
|
|
4679
4873
|
return edge;
|
|
4680
4874
|
}
|
|
4681
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
4682
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
4875
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: VflowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4876
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: VflowComponent, isStandalone: true, selector: "vflow", inputs: { view: { classPropertyName: "view", publicName: "view", isSignal: false, isRequired: false, transformFunction: null }, minZoom: { classPropertyName: "minZoom", publicName: "minZoom", isSignal: false, isRequired: false, transformFunction: null }, maxZoom: { classPropertyName: "maxZoom", publicName: "maxZoom", isSignal: false, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: false, isRequired: false, transformFunction: null }, optimization: { classPropertyName: "optimization", publicName: "optimization", isSignal: false, isRequired: false, transformFunction: null }, entitiesSelectable: { classPropertyName: "entitiesSelectable", publicName: "entitiesSelectable", isSignal: false, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: false, isRequired: false, transformFunction: null }, keyboardShortcuts: { classPropertyName: "keyboardShortcuts", publicName: "keyboardShortcuts", isSignal: false, isRequired: false, transformFunction: null }, connection: { classPropertyName: "connection", publicName: "connection", isSignal: false, isRequired: false, transformFunction: (settings) => new ConnectionModel(settings) }, snapGrid: { classPropertyName: "snapGrid", publicName: "snapGrid", isSignal: false, isRequired: false, transformFunction: null }, elevateNodesOnSelect: { classPropertyName: "elevateNodesOnSelect", publicName: "elevateNodesOnSelect", isSignal: false, isRequired: false, transformFunction: null }, elevateEdgesOnSelect: { classPropertyName: "elevateEdgesOnSelect", publicName: "elevateEdgesOnSelect", isSignal: false, isRequired: false, transformFunction: null }, autoPan: { classPropertyName: "autoPan", publicName: "autoPan", isSignal: false, isRequired: false, transformFunction: null }, nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: false, isRequired: true, transformFunction: null }, alignmentHelper: { classPropertyName: "alignmentHelper", publicName: "alignmentHelper", isSignal: true, isRequired: false, transformFunction: null }, edges: { classPropertyName: "edges", publicName: "edges", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { componentNodeEvent: "componentNodeEvent" }, providers: [
|
|
4683
4877
|
DraggableService,
|
|
4684
4878
|
ViewportService,
|
|
4685
4879
|
FlowStatusService,
|
|
@@ -4695,9 +4889,12 @@ class VflowComponent {
|
|
|
4695
4889
|
OverlaysService,
|
|
4696
4890
|
{ provide: PreviewFlowRenderStrategyService, useClass: ViewportPreviewFlowRenderStrategyService },
|
|
4697
4891
|
FlowRenderingService,
|
|
4892
|
+
ResizeObserverService,
|
|
4893
|
+
OffsetBatchingCacheService,
|
|
4894
|
+
RequestAnimationFrameBatchingService,
|
|
4698
4895
|
], 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: ["nodesChanges", "nodesChanges", "nodesChanges.position", "nodesChanges.position", "nodesChanges.size", "nodesChanges.size", "nodesChanges.add", "nodesChanges.add", "nodesChanges.remove", "nodesChanges.remove", "nodesChanges.select", "nodesChanges.select", "edgesChanges", "edgesChanges", "edgesChanges.detached", "edgesChanges.detached", "edgesChanges.add", "edgesChanges.add", "edgesChanges.remove", "edgesChanges.remove", "edgesChanges.select", "edgesChanges.select"] }], 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 autoPan>\n @if (alignmentHelper(); as alignmentHelper) {\n @if (alignmentHelper === true) {\n <svg:g alignmentHelper />\n } @else {\n <svg:g alignmentHelper [tolerance]=\"alignmentHelper.tolerance\" [lineColor]=\"alignmentHelper.lineColor\" />\n }\n }\n\n <!-- Connection -->\n <svg:g connection [model]=\"connection\" [template]=\"connectionTemplateDirective()?.templateRef\" />\n\n @if (flowOptimization().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 (!flowOptimization().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 @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\n@if (flowOptimization().virtualization) {\n <canvas previewFlow class=\"preview-flow\" [width]=\"flowWidth()\" [height]=\"flowHeight()\"></canvas>\n}\n", styles: [":host{display:grid;grid-template-columns:1fr;width:100%;height:100%;-webkit-user-select:none;user-select:none}:host ::ng-deep *{box-sizing:border-box}.root-svg{grid-row-start:1;grid-column-start:1}.preview-flow{pointer-events:none;grid-row-start:1;grid-column-start:1}\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"] }, { kind: "component", type: PreviewFlowComponent, selector: "canvas[previewFlow]", inputs: ["width", "height"] }, { kind: "component", type: AlignmentHelperComponent, selector: "g[alignmentHelper]", inputs: ["tolerance", "lineColor"] }, { kind: "directive", type: AutoPanDirective, selector: "[autoPan]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4699
4896
|
}
|
|
4700
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
4897
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: VflowComponent, decorators: [{
|
|
4701
4898
|
type: Component,
|
|
4702
4899
|
args: [{ selector: 'vflow', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
4703
4900
|
DraggableService,
|
|
@@ -4715,6 +4912,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
4715
4912
|
OverlaysService,
|
|
4716
4913
|
{ provide: PreviewFlowRenderStrategyService, useClass: ViewportPreviewFlowRenderStrategyService },
|
|
4717
4914
|
FlowRenderingService,
|
|
4915
|
+
ResizeObserverService,
|
|
4916
|
+
OffsetBatchingCacheService,
|
|
4917
|
+
RequestAnimationFrameBatchingService,
|
|
4718
4918
|
], hostDirectives: [changesControllerHostDirective], imports: [
|
|
4719
4919
|
RootSvgReferenceDirective,
|
|
4720
4920
|
RootSvgContextDirective,
|
|
@@ -4779,10 +4979,10 @@ class DragHandleDirective {
|
|
|
4779
4979
|
this.model.dragHandlesCount.update((count) => count - 1);
|
|
4780
4980
|
});
|
|
4781
4981
|
}
|
|
4782
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
4783
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
4982
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: DragHandleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
4983
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: DragHandleDirective, isStandalone: true, selector: "[dragHandle]", host: { classAttribute: "vflow-drag-handle" }, ngImport: i0 }); }
|
|
4784
4984
|
}
|
|
4785
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
4985
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: DragHandleDirective, decorators: [{
|
|
4786
4986
|
type: Directive,
|
|
4787
4987
|
args: [{
|
|
4788
4988
|
standalone: true,
|
|
@@ -4822,10 +5022,10 @@ class SelectableDirective {
|
|
|
4822
5022
|
getEvent$() {
|
|
4823
5023
|
return fromEvent(this.host.nativeElement, 'click');
|
|
4824
5024
|
}
|
|
4825
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
4826
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
5025
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SelectableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
5026
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: SelectableDirective, isStandalone: true, selector: "[selectable]", ngImport: i0 }); }
|
|
4827
5027
|
}
|
|
4828
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
5028
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SelectableDirective, decorators: [{
|
|
4829
5029
|
type: Directive,
|
|
4830
5030
|
args: [{
|
|
4831
5031
|
standalone: true,
|
|
@@ -4930,10 +5130,10 @@ class MiniMapComponent {
|
|
|
4930
5130
|
trackNodes(idx, { rawNode }) {
|
|
4931
5131
|
return rawNode;
|
|
4932
5132
|
}
|
|
4933
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
4934
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
5133
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: MiniMapComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5134
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: MiniMapComponent, isStandalone: true, selector: "mini-map", inputs: { maskColor: { classPropertyName: "maskColor", publicName: "maskColor", isSignal: true, isRequired: false, transformFunction: null }, strokeColor: { classPropertyName: "strokeColor", publicName: "strokeColor", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, scaleOnHover: { classPropertyName: "scaleOnHover", publicName: "scaleOnHover", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "minimap", first: true, predicate: ["minimap"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #minimap>\n <svg:rect\n fill=\"none\"\n [attr.x]=\"minimapPoint().x\"\n [attr.y]=\"minimapPoint().y\"\n [attr.width]=\"minimapWidth()\"\n [attr.height]=\"minimapHeight()\"\n [attr.stroke]=\"strokeColor()\" />\n\n <svg:svg\n [attr.x]=\"minimapPoint().x\"\n [attr.y]=\"minimapPoint().y\"\n [attr.width]=\"minimapWidth()\"\n [attr.height]=\"minimapHeight()\"\n (mouseover)=\"hovered.set(true)\"\n (mouseleave)=\"hovered.set(false)\">\n <svg:rect [attr.width]=\"minimapWidth()\" [attr.height]=\"minimapHeight()\" [attr.fill]=\"maskColor()\" />\n\n <svg:g [attr.transform]=\"minimapTransform()\">\n <svg:rect\n [attr.fill]=\"viewportColor()\"\n [attr.transform]=\"viewportTransform()\"\n [attr.width]=\"minimapWidth()\"\n [attr.height]=\"minimapHeight()\" />\n\n @for (model of entitiesService.nodes(); track trackNodes($index, model)) {\n <ng-container>\n @if (model.rawNode.type === 'default' || model.rawNode.type === 'html-template' || model.isComponentType) {\n <svg:foreignObject\n [attr.transform]=\"model.pointTransform()\"\n [attr.width]=\"model.size().width\"\n [attr.height]=\"model.size().height\">\n <default-node\n [selected]=\"model.selected()\"\n [style.width.px]=\"model.size().width\"\n [style.height.px]=\"model.size().height\"\n [style.max-width.px]=\"model.size().width\"\n [style.max-height.px]=\"model.size().height\">\n <div [outerHTML]=\"model.text()\"></div>\n </default-node>\n </svg:foreignObject>\n }\n @if (model.rawNode.type === 'default-group' || model.rawNode.type === 'template-group') {\n <svg:rect\n class=\"default-group-node\"\n rx=\"5\"\n ry=\"5\"\n [attr.transform]=\"model.pointTransform()\"\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 }\n </ng-container>\n }\n </svg:g>\n </svg:svg>\n</ng-template>\n", styles: [".default-group-node{stroke-width:1.5px;fill-opacity:.05}.default-group-node_selected{stroke-width:2px}\n"], dependencies: [{ kind: "component", type: DefaultNodeComponent, selector: "default-node", inputs: ["selected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4935
5135
|
}
|
|
4936
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
5136
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: MiniMapComponent, decorators: [{
|
|
4937
5137
|
type: Component,
|
|
4938
5138
|
args: [{ selector: 'mini-map', imports: [DefaultNodeComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #minimap>\n <svg:rect\n fill=\"none\"\n [attr.x]=\"minimapPoint().x\"\n [attr.y]=\"minimapPoint().y\"\n [attr.width]=\"minimapWidth()\"\n [attr.height]=\"minimapHeight()\"\n [attr.stroke]=\"strokeColor()\" />\n\n <svg:svg\n [attr.x]=\"minimapPoint().x\"\n [attr.y]=\"minimapPoint().y\"\n [attr.width]=\"minimapWidth()\"\n [attr.height]=\"minimapHeight()\"\n (mouseover)=\"hovered.set(true)\"\n (mouseleave)=\"hovered.set(false)\">\n <svg:rect [attr.width]=\"minimapWidth()\" [attr.height]=\"minimapHeight()\" [attr.fill]=\"maskColor()\" />\n\n <svg:g [attr.transform]=\"minimapTransform()\">\n <svg:rect\n [attr.fill]=\"viewportColor()\"\n [attr.transform]=\"viewportTransform()\"\n [attr.width]=\"minimapWidth()\"\n [attr.height]=\"minimapHeight()\" />\n\n @for (model of entitiesService.nodes(); track trackNodes($index, model)) {\n <ng-container>\n @if (model.rawNode.type === 'default' || model.rawNode.type === 'html-template' || model.isComponentType) {\n <svg:foreignObject\n [attr.transform]=\"model.pointTransform()\"\n [attr.width]=\"model.size().width\"\n [attr.height]=\"model.size().height\">\n <default-node\n [selected]=\"model.selected()\"\n [style.width.px]=\"model.size().width\"\n [style.height.px]=\"model.size().height\"\n [style.max-width.px]=\"model.size().width\"\n [style.max-height.px]=\"model.size().height\">\n <div [outerHTML]=\"model.text()\"></div>\n </default-node>\n </svg:foreignObject>\n }\n @if (model.rawNode.type === 'default-group' || model.rawNode.type === 'template-group') {\n <svg:rect\n class=\"default-group-node\"\n rx=\"5\"\n ry=\"5\"\n [attr.transform]=\"model.pointTransform()\"\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 }\n </ng-container>\n }\n </svg:g>\n </svg:svg>\n</ng-template>\n", styles: [".default-group-node{stroke-width:1.5px;fill-opacity:.05}.default-group-node_selected{stroke-width:2px}\n"] }]
|
|
4939
5139
|
}] });
|
|
@@ -4980,7 +5180,7 @@ class NodeToolbarComponent {
|
|
|
4980
5180
|
this.position = input('top');
|
|
4981
5181
|
this.toolbarContentTemplate = viewChild.required('toolbar');
|
|
4982
5182
|
this.model = new ToolbarModel(this.nodeService.model());
|
|
4983
|
-
effect(() => this.model.position.set(this.position())
|
|
5183
|
+
effect(() => this.model.position.set(this.position()));
|
|
4984
5184
|
}
|
|
4985
5185
|
ngOnInit() {
|
|
4986
5186
|
this.model.template.set(this.toolbarContentTemplate());
|
|
@@ -4989,8 +5189,8 @@ class NodeToolbarComponent {
|
|
|
4989
5189
|
ngOnDestroy() {
|
|
4990
5190
|
this.overlaysService.removeToolbar(this.model);
|
|
4991
5191
|
}
|
|
4992
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
4993
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.
|
|
5192
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NodeToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5193
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.18", type: NodeToolbarComponent, isStandalone: true, selector: "node-toolbar", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "toolbarContentTemplate", first: true, predicate: ["toolbar"], descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
4994
5194
|
<ng-template #toolbar>
|
|
4995
5195
|
<div class="wrapper" nodeToolbarWrapper [model]="model">
|
|
4996
5196
|
<ng-content />
|
|
@@ -4998,7 +5198,7 @@ class NodeToolbarComponent {
|
|
|
4998
5198
|
</ng-template>
|
|
4999
5199
|
`, isInline: true, styles: [".wrapper{width:max-content}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => NodeToolbarWrapperDirective), selector: "[nodeToolbarWrapper]", inputs: ["model"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5000
5200
|
}
|
|
5001
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
5201
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NodeToolbarComponent, decorators: [{
|
|
5002
5202
|
type: Component,
|
|
5003
5203
|
args: [{ selector: 'node-toolbar', template: `
|
|
5004
5204
|
<ng-template #toolbar>
|
|
@@ -5026,10 +5226,10 @@ class NodeToolbarWrapperDirective {
|
|
|
5026
5226
|
height: this.element.nativeElement.clientHeight,
|
|
5027
5227
|
});
|
|
5028
5228
|
}
|
|
5029
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
5030
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.
|
|
5229
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NodeToolbarWrapperDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
5230
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.18", type: NodeToolbarWrapperDirective, isStandalone: true, selector: "[nodeToolbarWrapper]", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
|
|
5031
5231
|
}
|
|
5032
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
5232
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NodeToolbarWrapperDirective, decorators: [{
|
|
5033
5233
|
type: Directive,
|
|
5034
5234
|
args: [{
|
|
5035
5235
|
selector: '[nodeToolbarWrapper]',
|
|
@@ -5050,10 +5250,10 @@ class CustomTemplateEdgeComponent {
|
|
|
5050
5250
|
this.edgeRenderingService.pull(this.model);
|
|
5051
5251
|
}
|
|
5052
5252
|
}
|
|
5053
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
5054
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
5253
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: CustomTemplateEdgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5254
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: CustomTemplateEdgeComponent, isStandalone: true, selector: "g[customTemplateEdge]", host: { listeners: { "mousedown": "pull()", "touchstart": "pull()" } }, ngImport: i0, template: "<ng-content />\n\n<svg:path #interactiveEdge class=\"interactive-edge\" [attr.d]=\"context.path()\" />\n", styles: [".interactive-edge{fill:none;stroke-width:20;stroke:transparent}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5055
5255
|
}
|
|
5056
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
5256
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: CustomTemplateEdgeComponent, decorators: [{
|
|
5057
5257
|
type: Component,
|
|
5058
5258
|
args: [{ selector: 'g[customTemplateEdge]', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, host: {
|
|
5059
5259
|
'(mousedown)': 'pull()',
|