ngx-vflow 0.9.1 → 0.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/vflow/components/custom-node-base/custom-node-base.component.mjs +48 -0
- package/esm2022/lib/vflow/components/node/node.component.mjs +13 -12
- package/esm2022/lib/vflow/components/vflow/vflow.component.mjs +1 -1
- package/esm2022/lib/vflow/interfaces/component-node-event.interface.mjs +1 -1
- package/esm2022/lib/vflow/interfaces/node.interface.mjs +27 -2
- package/esm2022/lib/vflow/models/node.model.mjs +65 -16
- package/esm2022/lib/vflow/public-components/custom-dynamic-node.component.mjs +19 -0
- package/esm2022/lib/vflow/public-components/custom-node.component.mjs +9 -41
- package/esm2022/lib/vflow/services/draggable.service.mjs +14 -8
- package/esm2022/lib/vflow/utils/reference-keeper.mjs +1 -1
- package/esm2022/public-api.mjs +2 -1
- package/fesm2022/ngx-vflow.mjs +150 -41
- package/fesm2022/ngx-vflow.mjs.map +1 -1
- package/lib/vflow/components/custom-node-base/custom-node-base.component.d.ts +21 -0
- package/lib/vflow/components/vflow/vflow.component.d.ts +4 -4
- package/lib/vflow/interfaces/component-node-event.interface.d.ts +2 -1
- package/lib/vflow/interfaces/node.interface.d.ts +34 -5
- package/lib/vflow/models/edge.model.d.ts +17 -1
- package/lib/vflow/models/node.model.d.ts +22 -22
- package/lib/vflow/public-components/custom-dynamic-node.component.d.ts +13 -0
- package/lib/vflow/public-components/custom-node.component.d.ts +6 -13
- package/lib/vflow/services/draggable.service.d.ts +9 -3
- package/lib/vflow/services/node-changes.service.d.ts +1 -4
- package/lib/vflow/utils/reference-keeper.d.ts +2 -2
- package/package.json +1 -1
- package/public-api.d.ts +1 -0
|
@@ -1,51 +1,19 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import { merge, tap } from "rxjs";
|
|
4
|
-
import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
|
|
1
|
+
import { Directive, Input } from "@angular/core";
|
|
2
|
+
import { CustomNodeBaseComponent } from "../components/custom-node-base/custom-node-base.component";
|
|
5
3
|
import * as i0 from "@angular/core";
|
|
6
|
-
export class CustomNodeComponent {
|
|
7
|
-
constructor() {
|
|
8
|
-
this.eventBus = inject(ComponentEventBusService);
|
|
9
|
-
this.destroyRef = inject(DestroyRef);
|
|
10
|
-
/**
|
|
11
|
-
* Signal with selected state of node
|
|
12
|
-
*/
|
|
13
|
-
this.selected = signal(false);
|
|
14
|
-
}
|
|
15
|
-
set _selected(value) {
|
|
16
|
-
this.selected.set(value);
|
|
17
|
-
}
|
|
4
|
+
export class CustomNodeComponent extends CustomNodeBaseComponent {
|
|
18
5
|
ngOnInit() {
|
|
19
|
-
this.
|
|
20
|
-
|
|
21
|
-
trackEvents() {
|
|
22
|
-
const props = Object.getOwnPropertyNames(this);
|
|
23
|
-
const emitters = new Map();
|
|
24
|
-
for (const prop of props) {
|
|
25
|
-
const field = this[prop];
|
|
26
|
-
if (field instanceof EventEmitter) {
|
|
27
|
-
emitters.set(field, prop);
|
|
28
|
-
}
|
|
6
|
+
if (this.node.data) {
|
|
7
|
+
this.data.set(this.node.data);
|
|
29
8
|
}
|
|
30
|
-
|
|
31
|
-
this.eventBus.pushEvent({
|
|
32
|
-
nodeId: this.node.id,
|
|
33
|
-
eventName: emitters.get(emitter),
|
|
34
|
-
eventPayload: event
|
|
35
|
-
});
|
|
36
|
-
}))))
|
|
37
|
-
.pipe(takeUntilDestroyed(this.destroyRef))
|
|
38
|
-
.subscribe();
|
|
9
|
+
super.ngOnInit();
|
|
39
10
|
}
|
|
40
|
-
;
|
|
41
|
-
static { this.ɵ
|
|
42
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: CustomNodeComponent, inputs: { node: "node", _selected: "_selected" }, ngImport: i0 }); }
|
|
11
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomNodeComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
12
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: CustomNodeComponent, inputs: { node: "node" }, usesInheritance: true, ngImport: i0 }); }
|
|
43
13
|
}
|
|
44
14
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomNodeComponent, decorators: [{
|
|
45
15
|
type: Directive
|
|
46
16
|
}], propDecorators: { node: [{
|
|
47
17
|
type: Input
|
|
48
|
-
}], _selected: [{
|
|
49
|
-
type: Input
|
|
50
18
|
}] } });
|
|
51
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
19
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY3VzdG9tLW5vZGUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXZmbG93LWxpYi9zcmMvbGliL3ZmbG93L3B1YmxpYy1jb21wb25lbnRzL2N1c3RvbS1ub2RlLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBVSxNQUFNLGVBQWUsQ0FBQTtBQUV4RCxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsTUFBTSwyREFBMkQsQ0FBQzs7QUFHcEcsTUFBTSxPQUFnQixtQkFBaUMsU0FBUSx1QkFBMEI7SUFPdkUsUUFBUTtRQUN0QixJQUFJLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxFQUFFO1lBQ2xCLElBQUksQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUE7U0FDOUI7UUFFRCxLQUFLLENBQUMsUUFBUSxFQUFFLENBQUE7SUFDbEIsQ0FBQzsrR0FibUIsbUJBQW1CO21HQUFuQixtQkFBbUI7OzRGQUFuQixtQkFBbUI7a0JBRHhDLFNBQVM7OEJBTVEsSUFBSTtzQkFEbkIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IERpcmVjdGl2ZSwgSW5wdXQsIE9uSW5pdCB9IGZyb20gXCJAYW5ndWxhci9jb3JlXCJcbmltcG9ydCB7IENvbXBvbmVudE5vZGUgfSBmcm9tICcuLi9pbnRlcmZhY2VzL25vZGUuaW50ZXJmYWNlJztcbmltcG9ydCB7IEN1c3RvbU5vZGVCYXNlQ29tcG9uZW50IH0gZnJvbSBcIi4uL2NvbXBvbmVudHMvY3VzdG9tLW5vZGUtYmFzZS9jdXN0b20tbm9kZS1iYXNlLmNvbXBvbmVudFwiO1xuXG5ARGlyZWN0aXZlKClcbmV4cG9ydCBhYnN0cmFjdCBjbGFzcyBDdXN0b21Ob2RlQ29tcG9uZW50PFQgPSB1bmtub3duPiBleHRlbmRzIEN1c3RvbU5vZGVCYXNlQ29tcG9uZW50PFQ+IGltcGxlbWVudHMgT25Jbml0IHtcbiAgLyoqXG4gICAqIFJlZmVyZW5jZSB0byBub2RlIGJvdW5kIHRvIHRoaXMgY29tcG9uZW50XG4gICAqL1xuICBASW5wdXQoKVxuICBwdWJsaWMgb3ZlcnJpZGUgbm9kZSE6IENvbXBvbmVudE5vZGU8VD5cblxuICBwdWJsaWMgb3ZlcnJpZGUgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgaWYgKHRoaXMubm9kZS5kYXRhKSB7XG4gICAgICB0aGlzLmRhdGEuc2V0KHRoaXMubm9kZS5kYXRhKVxuICAgIH1cblxuICAgIHN1cGVyLm5nT25Jbml0KClcbiAgfVxufVxuXG4iXX0=
|
|
@@ -5,18 +5,24 @@ import { round } from '../utils/round';
|
|
|
5
5
|
import * as i0 from "@angular/core";
|
|
6
6
|
export class DraggableService {
|
|
7
7
|
/**
|
|
8
|
-
* Enable
|
|
9
|
-
* model contains draggable flag which declares if draggable should be enabled or not
|
|
8
|
+
* Enable draggable behavior for element.
|
|
10
9
|
*
|
|
11
10
|
* @param element target element for toggling draggable
|
|
12
11
|
* @param model model with data for this element
|
|
13
12
|
*/
|
|
14
|
-
|
|
13
|
+
enable(element, model) {
|
|
15
14
|
const d3Element = select(element);
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
15
|
+
d3Element.call(this.getDragBehavior(model));
|
|
16
|
+
}
|
|
17
|
+
/**
|
|
18
|
+
* Disable draggable behavior for element.
|
|
19
|
+
*
|
|
20
|
+
* @param element target element for toggling draggable
|
|
21
|
+
* @param model model with data for this element
|
|
22
|
+
*/
|
|
23
|
+
disable(element) {
|
|
24
|
+
const d3Element = select(element);
|
|
25
|
+
d3Element.call(this.getIgnoreDragBehavior());
|
|
20
26
|
}
|
|
21
27
|
/**
|
|
22
28
|
* TODO: not shure if this work, need to check
|
|
@@ -63,4 +69,4 @@ export class DraggableService {
|
|
|
63
69
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DraggableService, decorators: [{
|
|
64
70
|
type: Injectable
|
|
65
71
|
}] });
|
|
66
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
72
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJhZ2dhYmxlLnNlcnZpY2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtdmZsb3ctbGliL3NyYy9saWIvdmZsb3cvc2VydmljZXMvZHJhZ2dhYmxlLnNlcnZpY2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFVBQVUsRUFBVSxNQUFNLGVBQWUsQ0FBQztBQUNuRCxPQUFPLEVBQUUsTUFBTSxFQUFFLE1BQU0sY0FBYyxDQUFDO0FBQ3RDLE9BQU8sRUFBZSxJQUFJLEVBQUUsTUFBTSxTQUFTLENBQUM7QUFFNUMsT0FBTyxFQUFFLEtBQUssRUFBRSxNQUFNLGdCQUFnQixDQUFDOztBQUt2QyxNQUFNLE9BQU8sZ0JBQWdCO0lBQzNCOzs7OztPQUtHO0lBQ0ksTUFBTSxDQUFDLE9BQWdCLEVBQUUsS0FBZ0I7UUFDOUMsTUFBTSxTQUFTLEdBQUcsTUFBTSxDQUFDLE9BQU8sQ0FBQyxDQUFBO1FBRWpDLFNBQVMsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLGVBQWUsQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFBO0lBQzdDLENBQUM7SUFFRDs7Ozs7T0FLRztJQUNJLE9BQU8sQ0FBQyxPQUFnQjtRQUM3QixNQUFNLFNBQVMsR0FBRyxNQUFNLENBQUMsT0FBTyxDQUFDLENBQUE7UUFFakMsU0FBUyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMscUJBQXFCLEVBQUUsQ0FBQyxDQUFBO0lBQzlDLENBQUM7SUFFRDs7OztPQUlHO0lBQ0ksT0FBTyxDQUFDLE9BQWdCO1FBQzdCLE1BQU0sQ0FBQyxPQUFPLENBQUMsQ0FBQyxFQUFFLENBQUMsT0FBTyxFQUFFLElBQUksQ0FBQyxDQUFBO0lBQ25DLENBQUM7SUFFRDs7Ozs7T0FLRztJQUNLLGVBQWUsQ0FBQyxLQUFnQjtRQUN0QyxJQUFJLE1BQWMsQ0FBQTtRQUNsQixJQUFJLE1BQWMsQ0FBQTtRQUVsQixPQUFPLElBQUksRUFBRTthQUNWLEVBQUUsQ0FBQyxPQUFPLEVBQUUsQ0FBQyxLQUFnQixFQUFFLEVBQUU7WUFDaEMsTUFBTSxHQUFHLEtBQUssQ0FBQyxLQUFLLEVBQUUsQ0FBQyxDQUFDLEdBQUcsS0FBSyxDQUFDLENBQUMsQ0FBQTtZQUNsQyxNQUFNLEdBQUcsS0FBSyxDQUFDLEtBQUssRUFBRSxDQUFDLENBQUMsR0FBRyxLQUFLLENBQUMsQ0FBQyxDQUFBO1FBQ3BDLENBQUMsQ0FBQzthQUVELEVBQUUsQ0FBQyxNQUFNLEVBQUUsQ0FBQyxLQUFnQixFQUFFLEVBQUU7WUFDL0IsS0FBSyxDQUFDLFFBQVEsQ0FDWjtnQkFDRSxDQUFDLEVBQUUsS0FBSyxDQUFDLEtBQUssQ0FBQyxDQUFDLEdBQUcsTUFBTSxDQUFDO2dCQUMxQixDQUFDLEVBQUUsS0FBSyxDQUFDLEtBQUssQ0FBQyxDQUFDLEdBQUcsTUFBTSxDQUFDO2FBQzNCLENBQ0YsQ0FBQTtRQUNILENBQUMsQ0FBQyxDQUFBO0lBQ04sQ0FBQztJQUVEOzs7T0FHRztJQUNLLHFCQUFxQjtRQUMzQixPQUFPLElBQUksRUFBRTthQUNWLEVBQUUsQ0FBQyxNQUFNLEVBQUUsQ0FBQyxLQUFnQixFQUFFLEVBQUU7WUFDOUIsS0FBSyxDQUFDLFdBQXFCLENBQUMsZUFBZSxFQUFFLENBQUE7UUFDaEQsQ0FBQyxDQUFDLENBQUE7SUFDTixDQUFDOytHQXJFVSxnQkFBZ0I7bUhBQWhCLGdCQUFnQjs7NEZBQWhCLGdCQUFnQjtrQkFENUIsVUFBVSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEluamVjdGFibGUsIGVmZmVjdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgc2VsZWN0IH0gZnJvbSAnZDMtc2VsZWN0aW9uJztcbmltcG9ydCB7IEQzRHJhZ0V2ZW50LCBkcmFnIH0gZnJvbSAnZDMtZHJhZyc7XG5pbXBvcnQgeyBOb2RlTW9kZWwgfSBmcm9tICcuLi9tb2RlbHMvbm9kZS5tb2RlbCc7XG5pbXBvcnQgeyByb3VuZCB9IGZyb20gJy4uL3V0aWxzL3JvdW5kJztcblxudHlwZSBEcmFnRXZlbnQgPSBEM0RyYWdFdmVudDxFbGVtZW50LCB1bmtub3duLCB1bmtub3duPlxuXG5ASW5qZWN0YWJsZSgpXG5leHBvcnQgY2xhc3MgRHJhZ2dhYmxlU2VydmljZSB7XG4gIC8qKlxuICAgKiBFbmFibGUgZHJhZ2dhYmxlIGJlaGF2aW9yIGZvciBlbGVtZW50LlxuICAgKlxuICAgKiBAcGFyYW0gZWxlbWVudCB0YXJnZXQgZWxlbWVudCBmb3IgdG9nZ2xpbmcgZHJhZ2dhYmxlXG4gICAqIEBwYXJhbSBtb2RlbCBtb2RlbCB3aXRoIGRhdGEgZm9yIHRoaXMgZWxlbWVudFxuICAgKi9cbiAgcHVibGljIGVuYWJsZShlbGVtZW50OiBFbGVtZW50LCBtb2RlbDogTm9kZU1vZGVsKSB7XG4gICAgY29uc3QgZDNFbGVtZW50ID0gc2VsZWN0KGVsZW1lbnQpXG5cbiAgICBkM0VsZW1lbnQuY2FsbCh0aGlzLmdldERyYWdCZWhhdmlvcihtb2RlbCkpXG4gIH1cblxuICAvKipcbiAgICogRGlzYWJsZSBkcmFnZ2FibGUgYmVoYXZpb3IgZm9yIGVsZW1lbnQuXG4gICAqXG4gICAqIEBwYXJhbSBlbGVtZW50IHRhcmdldCBlbGVtZW50IGZvciB0b2dnbGluZyBkcmFnZ2FibGVcbiAgICogQHBhcmFtIG1vZGVsIG1vZGVsIHdpdGggZGF0YSBmb3IgdGhpcyBlbGVtZW50XG4gICAqL1xuICBwdWJsaWMgZGlzYWJsZShlbGVtZW50OiBFbGVtZW50KSB7XG4gICAgY29uc3QgZDNFbGVtZW50ID0gc2VsZWN0KGVsZW1lbnQpXG5cbiAgICBkM0VsZW1lbnQuY2FsbCh0aGlzLmdldElnbm9yZURyYWdCZWhhdmlvcigpKVxuICB9XG5cbiAgLyoqXG4gICAqIFRPRE86IG5vdCBzaHVyZSBpZiB0aGlzIHdvcmssIG5lZWQgdG8gY2hlY2tcbiAgICpcbiAgICogQHBhcmFtIGVsZW1lbnRcbiAgICovXG4gIHB1YmxpYyBkZXN0cm95KGVsZW1lbnQ6IEVsZW1lbnQpIHtcbiAgICBzZWxlY3QoZWxlbWVudCkub24oJy5kcmFnJywgbnVsbClcbiAgfVxuXG4gIC8qKlxuICAgKiBOb2RlIGRyYWcgYmVoYXZpb3IuIFVwZGF0ZWQgbm9kZSdzIGNvb3JkaW5hdGUgYWNjb3JkaW5nIHRvIGRyYWdnaW5nXG4gICAqXG4gICAqIEBwYXJhbSBtb2RlbFxuICAgKiBAcmV0dXJuc1xuICAgKi9cbiAgcHJpdmF0ZSBnZXREcmFnQmVoYXZpb3IobW9kZWw6IE5vZGVNb2RlbCkge1xuICAgIGxldCBkZWx0YVg6IG51bWJlclxuICAgIGxldCBkZWx0YVk6IG51bWJlclxuXG4gICAgcmV0dXJuIGRyYWcoKVxuICAgICAgLm9uKCdzdGFydCcsIChldmVudDogRHJhZ0V2ZW50KSA9PiB7XG4gICAgICAgIGRlbHRhWCA9IG1vZGVsLnBvaW50KCkueCAtIGV2ZW50LnhcbiAgICAgICAgZGVsdGFZID0gbW9kZWwucG9pbnQoKS55IC0gZXZlbnQueVxuICAgICAgfSlcblxuICAgICAgLm9uKCdkcmFnJywgKGV2ZW50OiBEcmFnRXZlbnQpID0+IHtcbiAgICAgICAgbW9kZWwuc2V0UG9pbnQoXG4gICAgICAgICAge1xuICAgICAgICAgICAgeDogcm91bmQoZXZlbnQueCArIGRlbHRhWCksXG4gICAgICAgICAgICB5OiByb3VuZChldmVudC55ICsgZGVsdGFZKVxuICAgICAgICAgIH1cbiAgICAgICAgKVxuICAgICAgfSlcbiAgfVxuXG4gIC8qKlxuICAgKiBTcGVjaWZ5IGlnbm9yaW5nIGRyYWcgYmVoYXZpb3IuIEl0J3MgcmVzcG9uc2libGUgZm9yIG5vdCBtb3ZpbmcgdGhlIG1hcCB3aGVuIHVzZXIgdHJpZXMgdG8gZHJhZyBub2RlXG4gICAqIHdpdGggZGlzYWJsZWQgZHJhZyBiZWhhdmlvclxuICAgKi9cbiAgcHJpdmF0ZSBnZXRJZ25vcmVEcmFnQmVoYXZpb3IoKSB7XG4gICAgcmV0dXJuIGRyYWcoKVxuICAgICAgLm9uKCdkcmFnJywgKGV2ZW50OiBEcmFnRXZlbnQpID0+IHtcbiAgICAgICAgKGV2ZW50LnNvdXJjZUV2ZW50IGFzIEV2ZW50KS5zdG9wUHJvcGFnYXRpb24oKVxuICAgICAgfSlcbiAgfVxufVxuIl19
|
|
@@ -28,4 +28,4 @@ export class ReferenceKeeper {
|
|
|
28
28
|
});
|
|
29
29
|
}
|
|
30
30
|
}
|
|
31
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
31
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmVmZXJlbmNlLWtlZXBlci5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC12Zmxvdy1saWIvc3JjL2xpYi92Zmxvdy91dGlscy9yZWZlcmVuY2Uta2VlcGVyLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQztBQUVqRCxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sc0JBQXNCLENBQUM7QUFHakQsTUFBTSxPQUFPLGVBQWU7SUFDMUI7O09BRUc7SUFDSSxNQUFNLENBQUMsS0FBSyxDQUFDLFFBQWdDLEVBQUUsYUFBMEI7UUFDOUUsTUFBTSxXQUFXLEdBQXVDLElBQUksR0FBRyxFQUFFLENBQUE7UUFDakUsYUFBYSxDQUFDLE9BQU8sQ0FBQyxLQUFLLENBQUMsRUFBRSxDQUFDLFdBQVcsQ0FBQyxHQUFHLENBQUMsS0FBSyxDQUFDLElBQUksRUFBRSxLQUFLLENBQUMsQ0FBQyxDQUFBO1FBRWxFLE9BQU8sUUFBUSxDQUFDLEdBQUcsQ0FBQyxPQUFPLENBQUMsRUFBRTtZQUM1QixJQUFJLFdBQVcsQ0FBQyxHQUFHLENBQUMsT0FBTyxDQUFDO2dCQUFFLE9BQU8sV0FBVyxDQUFDLEdBQUcsQ0FBQyxPQUFPLENBQUUsQ0FBQTs7Z0JBQ3pELE9BQU8sSUFBSSxTQUFTLENBQUMsT0FBTyxDQUFDLENBQUE7UUFDcEMsQ0FBQyxDQUFDLENBQUE7SUFDSixDQUFDO0lBRUQ7O09BRUc7SUFDSSxNQUFNLENBQUMsS0FBSyxDQUFDLFFBQWdCLEVBQUUsYUFBMEI7UUFDOUQsTUFBTSxXQUFXLEdBQXlCLElBQUksR0FBRyxFQUFFLENBQUE7UUFDbkQsYUFBYSxDQUFDLE9BQU8sQ0FBQyxLQUFLLENBQUMsRUFBRSxDQUFDLFdBQVcsQ0FBQyxHQUFHLENBQUMsS0FBSyxDQUFDLElBQUksRUFBRSxLQUFLLENBQUMsQ0FBQyxDQUFBO1FBRWxFLE9BQU8sUUFBUSxDQUFDLEdBQUcsQ0FBQyxPQUFPLENBQUMsRUFBRTtZQUM1QixJQUFJLFdBQVcsQ0FBQyxHQUFHLENBQUMsT0FBTyxDQUFDO2dCQUFFLE9BQU8sV0FBVyxDQUFDLEdBQUcsQ0FBQyxPQUFPLENBQUUsQ0FBQTs7Z0JBQ3pELE9BQU8sSUFBSSxTQUFTLENBQUMsT0FBTyxDQUFDLENBQUE7UUFDcEMsQ0FBQyxDQUFDLENBQUE7SUFDSixDQUFDO0NBQ0YiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBOb2RlTW9kZWwgfSBmcm9tIFwiLi4vbW9kZWxzL25vZGUubW9kZWxcIjtcbmltcG9ydCB7IER5bmFtaWNOb2RlLCBOb2RlIH0gZnJvbSAnLi4vaW50ZXJmYWNlcy9ub2RlLmludGVyZmFjZSc7XG5pbXBvcnQgeyBFZGdlTW9kZWwgfSBmcm9tIFwiLi4vbW9kZWxzL2VkZ2UubW9kZWxcIjtcbmltcG9ydCB7IEVkZ2UgfSBmcm9tIFwiLi4vaW50ZXJmYWNlcy9lZGdlLmludGVyZmFjZVwiO1xuXG5leHBvcnQgY2xhc3MgUmVmZXJlbmNlS2VlcGVyIHtcbiAgLyoqXG4gICAqIENyZWF0ZSBuZXcgbW9kZWxzIGZvciBuZXcgbm9kZSByZWZlcmVuY2VzIGFuZCBrZWVwIG9sZCBtb2RlbHMgZm9yIG9sZCBub2RlIHJlZmVyZW5jZXNcbiAgICovXG4gIHB1YmxpYyBzdGF0aWMgbm9kZXMobmV3Tm9kZXM6IE5vZGVbXSB8IER5bmFtaWNOb2RlW10sIG9sZE5vZGVNb2RlbHM6IE5vZGVNb2RlbFtdKSB7XG4gICAgY29uc3Qgb2xkTm9kZXNNYXA6IE1hcDxOb2RlIHwgRHluYW1pY05vZGUsIE5vZGVNb2RlbD4gPSBuZXcgTWFwKClcbiAgICBvbGROb2RlTW9kZWxzLmZvckVhY2gobW9kZWwgPT4gb2xkTm9kZXNNYXAuc2V0KG1vZGVsLm5vZGUsIG1vZGVsKSlcblxuICAgIHJldHVybiBuZXdOb2Rlcy5tYXAobmV3Tm9kZSA9PiB7XG4gICAgICBpZiAob2xkTm9kZXNNYXAuaGFzKG5ld05vZGUpKSByZXR1cm4gb2xkTm9kZXNNYXAuZ2V0KG5ld05vZGUpIVxuICAgICAgZWxzZSByZXR1cm4gbmV3IE5vZGVNb2RlbChuZXdOb2RlKVxuICAgIH0pXG4gIH1cblxuICAvKipcbiAgICogQ3JlYXRlIG5ldyBtb2RlbHMgZm9yIG5ldyBlZGdlIHJlZmVyZW5jZXMgYW5kIGtlZXAgb2xkIG1vZGVscyBmb3Igb2xkIGVkZ2UgcmVmZXJlbmNlc1xuICAgKi9cbiAgcHVibGljIHN0YXRpYyBlZGdlcyhuZXdFZGdlczogRWRnZVtdLCBvbGRFZGdlTW9kZWxzOiBFZGdlTW9kZWxbXSkge1xuICAgIGNvbnN0IG9sZEVkZ2VzTWFwOiBNYXA8RWRnZSwgRWRnZU1vZGVsPiA9IG5ldyBNYXAoKVxuICAgIG9sZEVkZ2VNb2RlbHMuZm9yRWFjaChtb2RlbCA9PiBvbGRFZGdlc01hcC5zZXQobW9kZWwuZWRnZSwgbW9kZWwpKVxuXG4gICAgcmV0dXJuIG5ld0VkZ2VzLm1hcChuZXdFZGdlID0+IHtcbiAgICAgIGlmIChvbGRFZGdlc01hcC5oYXMobmV3RWRnZSkpIHJldHVybiBvbGRFZGdlc01hcC5nZXQobmV3RWRnZSkhXG4gICAgICBlbHNlIHJldHVybiBuZXcgRWRnZU1vZGVsKG5ld0VkZ2UpXG4gICAgfSlcbiAgfVxufVxuIl19
|
package/esm2022/public-api.mjs
CHANGED
|
@@ -22,9 +22,10 @@ export * from './lib/vflow/types/connection-mode.type';
|
|
|
22
22
|
export * from './lib/vflow/components/vflow/vflow.component';
|
|
23
23
|
export * from './lib/vflow/components/handle/handle.component';
|
|
24
24
|
export * from './lib/vflow/public-components/custom-node.component';
|
|
25
|
+
export * from './lib/vflow/public-components/custom-dynamic-node.component';
|
|
25
26
|
// Directives
|
|
26
27
|
export * from './lib/vflow/directives/template.directive';
|
|
27
28
|
export * from './lib/vflow/directives/connection-controller.directive';
|
|
28
29
|
export * from './lib/vflow/directives/changes-controller.directive';
|
|
29
30
|
export * from './lib/vflow/directives/selectable.directive';
|
|
30
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
31
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL25neC12Zmxvdy1saWIvc3JjL3B1YmxpYy1hcGkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsVUFBVTtBQUNWLGNBQWMsMEJBQTBCLENBQUM7QUFFekMsYUFBYTtBQUNiLGNBQWMsdUNBQXVDLENBQUM7QUFDdEQsY0FBYyx3Q0FBd0MsQ0FBQztBQUN2RCxjQUFjLHVDQUF1QyxDQUFDO0FBQ3RELGNBQWMsNkNBQTZDLENBQUM7QUFDNUQsY0FBYyw2Q0FBNkMsQ0FBQztBQUM1RCxjQUFjLDZDQUE2QyxDQUFDO0FBQzVELGNBQWMsc0RBQXNELENBQUM7QUFDckUsY0FBYyxtREFBbUQsQ0FBQztBQUNsRSxjQUFjLHlDQUF5QyxDQUFDO0FBRXhELGNBQWMsdURBQXVELENBQUM7QUFDdEUsY0FBYyxtREFBbUQsQ0FBQztBQUVsRSxRQUFRO0FBQ1IsY0FBYyxvQ0FBb0MsQ0FBQztBQUNuRCxjQUFjLG9DQUFvQyxDQUFDO0FBQ25ELGNBQWMsaUNBQWlDLENBQUM7QUFDaEQsY0FBYyxtQ0FBbUMsQ0FBQztBQUNsRCxjQUFjLHdDQUF3QyxDQUFDO0FBRXZELGFBQWE7QUFDYixjQUFjLDhDQUE4QyxDQUFDO0FBQzdELGNBQWMsZ0RBQWdELENBQUM7QUFDL0QsY0FBYyxxREFBcUQsQ0FBQztBQUNwRSxjQUFjLDZEQUE2RCxDQUFDO0FBRTVFLGFBQWE7QUFDYixjQUFjLDJDQUEyQyxDQUFDO0FBQzFELGNBQWMsd0RBQXdELENBQUM7QUFDdkUsY0FBYyxxREFBcUQsQ0FBQztBQUNwRSxjQUFjLDZDQUE2QyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLy8gTW9kdWxlc1xuZXhwb3J0ICogZnJvbSAnLi9saWIvdmZsb3cvdmZsb3cubW9kdWxlJztcblxuLy8gSW50ZXJmYWNlc1xuZXhwb3J0ICogZnJvbSAnLi9saWIvdmZsb3cvaW50ZXJmYWNlcy9ub2RlLmludGVyZmFjZSc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi92Zmxvdy9pbnRlcmZhY2VzL3BvaW50LmludGVyZmFjZSc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi92Zmxvdy9pbnRlcmZhY2VzL2VkZ2UuaW50ZXJmYWNlJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL3ZmbG93L2ludGVyZmFjZXMvZWRnZS1sYWJlbC5pbnRlcmZhY2UnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvdmZsb3cvaW50ZXJmYWNlcy9jb25uZWN0aW9uLmludGVyZmFjZSc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi92Zmxvdy9pbnRlcmZhY2VzL2Nvbm5lY3Rpb24uaW50ZXJmYWNlJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL3ZmbG93L2ludGVyZmFjZXMvY29ubmVjdGlvbi1zZXR0aW5ncy5pbnRlcmZhY2UnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvdmZsb3cvaW50ZXJmYWNlcy9oYW5kbGUtcG9zaXRpb25zLmludGVyZmFjZSc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi92Zmxvdy9pbnRlcmZhY2VzL21hcmtlci5pbnRlcmZhY2UnO1xuZXhwb3J0IHsgVmlld3BvcnRTdGF0ZSB9IGZyb20gJy4vbGliL3ZmbG93L2ludGVyZmFjZXMvdmlld3BvcnQuaW50ZXJmYWNlJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL3ZmbG93L2ludGVyZmFjZXMvY29tcG9uZW50LW5vZGUtZXZlbnQuaW50ZXJmYWNlJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL3ZmbG93L2ludGVyZmFjZXMvZml0LXZpZXctb3B0aW9ucy5pbnRlcmZhY2UnO1xuXG4vLyBUeXBlc1xuZXhwb3J0ICogZnJvbSAnLi9saWIvdmZsb3cvdHlwZXMvbm9kZS1jaGFuZ2UudHlwZSc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi92Zmxvdy90eXBlcy9lZGdlLWNoYW5nZS50eXBlJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL3ZmbG93L3R5cGVzL3Bvc2l0aW9uLnR5cGUnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvdmZsb3cvdHlwZXMvYmFja2dyb3VuZC50eXBlJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL3ZmbG93L3R5cGVzL2Nvbm5lY3Rpb24tbW9kZS50eXBlJztcblxuLy8gQ29tcG9uZW50c1xuZXhwb3J0ICogZnJvbSAnLi9saWIvdmZsb3cvY29tcG9uZW50cy92Zmxvdy92Zmxvdy5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvdmZsb3cvY29tcG9uZW50cy9oYW5kbGUvaGFuZGxlLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi92Zmxvdy9wdWJsaWMtY29tcG9uZW50cy9jdXN0b20tbm9kZS5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvdmZsb3cvcHVibGljLWNvbXBvbmVudHMvY3VzdG9tLWR5bmFtaWMtbm9kZS5jb21wb25lbnQnO1xuXG4vLyBEaXJlY3RpdmVzXG5leHBvcnQgKiBmcm9tICcuL2xpYi92Zmxvdy9kaXJlY3RpdmVzL3RlbXBsYXRlLmRpcmVjdGl2ZSc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi92Zmxvdy9kaXJlY3RpdmVzL2Nvbm5lY3Rpb24tY29udHJvbGxlci5kaXJlY3RpdmUnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvdmZsb3cvZGlyZWN0aXZlcy9jaGFuZ2VzLWNvbnRyb2xsZXIuZGlyZWN0aXZlJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL3ZmbG93L2RpcmVjdGl2ZXMvc2VsZWN0YWJsZS5kaXJlY3RpdmUnO1xuIl19
|
package/fesm2022/ngx-vflow.mjs
CHANGED
|
@@ -4,8 +4,8 @@ import * as i0 from '@angular/core';
|
|
|
4
4
|
import { signal, computed, Injectable, inject, ElementRef, Directive, effect, untracked, TemplateRef, EventEmitter, Output, DestroyRef, Input, runInInjectionContext, Injector, Component, ChangeDetectionStrategy, HostListener, ViewChild, HostBinding, ContentChild, NgModule } from '@angular/core';
|
|
5
5
|
import { select } from 'd3-selection';
|
|
6
6
|
import { zoomIdentity, zoom } from 'd3-zoom';
|
|
7
|
-
import { Subject, tap, merge,
|
|
8
|
-
import { takeUntilDestroyed,
|
|
7
|
+
import { Subject, tap, merge, observeOn, animationFrameScheduler, switchMap, skip, map, pairwise, filter, distinctUntilChanged, asyncScheduler, zip, fromEvent, share, Observable, startWith } from 'rxjs';
|
|
8
|
+
import { takeUntilDestroyed, toObservable, toSignal } from '@angular/core/rxjs-interop';
|
|
9
9
|
import { drag } from 'd3-drag';
|
|
10
10
|
import { path } from 'd3-path';
|
|
11
11
|
import { __decorate } from 'tslib';
|
|
@@ -378,18 +378,24 @@ const round = (num) => Math.round(num * 100) / 100;
|
|
|
378
378
|
|
|
379
379
|
class DraggableService {
|
|
380
380
|
/**
|
|
381
|
-
* Enable
|
|
382
|
-
* model contains draggable flag which declares if draggable should be enabled or not
|
|
381
|
+
* Enable draggable behavior for element.
|
|
383
382
|
*
|
|
384
383
|
* @param element target element for toggling draggable
|
|
385
384
|
* @param model model with data for this element
|
|
386
385
|
*/
|
|
387
|
-
|
|
386
|
+
enable(element, model) {
|
|
388
387
|
const d3Element = select(element);
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
388
|
+
d3Element.call(this.getDragBehavior(model));
|
|
389
|
+
}
|
|
390
|
+
/**
|
|
391
|
+
* Disable draggable behavior for element.
|
|
392
|
+
*
|
|
393
|
+
* @param element target element for toggling draggable
|
|
394
|
+
* @param model model with data for this element
|
|
395
|
+
*/
|
|
396
|
+
disable(element) {
|
|
397
|
+
const d3Element = select(element);
|
|
398
|
+
d3Element.call(this.getIgnoreDragBehavior());
|
|
393
399
|
}
|
|
394
400
|
/**
|
|
395
401
|
* TODO: not shure if this work, need to check
|
|
@@ -706,7 +712,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
706
712
|
type: Injectable
|
|
707
713
|
}] });
|
|
708
714
|
|
|
709
|
-
class
|
|
715
|
+
class CustomNodeBaseComponent {
|
|
710
716
|
constructor() {
|
|
711
717
|
this.eventBus = inject(ComponentEventBusService);
|
|
712
718
|
this.destroyRef = inject(DestroyRef);
|
|
@@ -714,12 +720,13 @@ class CustomNodeComponent {
|
|
|
714
720
|
* Signal with selected state of node
|
|
715
721
|
*/
|
|
716
722
|
this.selected = signal(false);
|
|
723
|
+
this.data = signal(undefined);
|
|
717
724
|
}
|
|
718
725
|
set _selected(value) {
|
|
719
726
|
this.selected.set(value);
|
|
720
727
|
}
|
|
721
728
|
ngOnInit() {
|
|
722
|
-
this.trackEvents();
|
|
729
|
+
this.trackEvents().pipe(takeUntilDestroyed(this.destroyRef)).subscribe();
|
|
723
730
|
}
|
|
724
731
|
trackEvents() {
|
|
725
732
|
const props = Object.getOwnPropertyNames(this);
|
|
@@ -730,40 +737,91 @@ class CustomNodeComponent {
|
|
|
730
737
|
emitters.set(field, prop);
|
|
731
738
|
}
|
|
732
739
|
}
|
|
733
|
-
merge(...Array.from(emitters.keys()).map(emitter => emitter.pipe(tap((event) => {
|
|
740
|
+
return merge(...Array.from(emitters.keys()).map(emitter => emitter.pipe(tap((event) => {
|
|
734
741
|
this.eventBus.pushEvent({
|
|
735
742
|
nodeId: this.node.id,
|
|
736
743
|
eventName: emitters.get(emitter),
|
|
737
744
|
eventPayload: event
|
|
738
745
|
});
|
|
739
|
-
}))))
|
|
740
|
-
.pipe(takeUntilDestroyed(this.destroyRef))
|
|
741
|
-
.subscribe();
|
|
746
|
+
}))));
|
|
742
747
|
}
|
|
743
748
|
;
|
|
744
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type:
|
|
745
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type:
|
|
749
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomNodeBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
750
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: CustomNodeBaseComponent, inputs: { _selected: "_selected" }, ngImport: i0 }); }
|
|
751
|
+
}
|
|
752
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomNodeBaseComponent, decorators: [{
|
|
753
|
+
type: Directive
|
|
754
|
+
}], propDecorators: { _selected: [{
|
|
755
|
+
type: Input
|
|
756
|
+
}] } });
|
|
757
|
+
|
|
758
|
+
class CustomNodeComponent extends CustomNodeBaseComponent {
|
|
759
|
+
ngOnInit() {
|
|
760
|
+
if (this.node.data) {
|
|
761
|
+
this.data.set(this.node.data);
|
|
762
|
+
}
|
|
763
|
+
super.ngOnInit();
|
|
764
|
+
}
|
|
765
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomNodeComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
766
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: CustomNodeComponent, inputs: { node: "node" }, usesInheritance: true, ngImport: i0 }); }
|
|
746
767
|
}
|
|
747
768
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomNodeComponent, decorators: [{
|
|
748
769
|
type: Directive
|
|
749
770
|
}], propDecorators: { node: [{
|
|
750
771
|
type: Input
|
|
751
|
-
}]
|
|
772
|
+
}] } });
|
|
773
|
+
|
|
774
|
+
class CustomDynamicNodeComponent extends CustomNodeBaseComponent {
|
|
775
|
+
ngOnInit() {
|
|
776
|
+
if (this.node.data) {
|
|
777
|
+
this.data = this.node.data;
|
|
778
|
+
}
|
|
779
|
+
super.ngOnInit();
|
|
780
|
+
}
|
|
781
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomDynamicNodeComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
782
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: CustomDynamicNodeComponent, inputs: { node: "node" }, usesInheritance: true, ngImport: i0 }); }
|
|
783
|
+
}
|
|
784
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomDynamicNodeComponent, decorators: [{
|
|
785
|
+
type: Directive
|
|
786
|
+
}], propDecorators: { node: [{
|
|
752
787
|
type: Input
|
|
753
788
|
}] } });
|
|
754
789
|
|
|
790
|
+
function isStaticNode(node) {
|
|
791
|
+
return typeof node.point !== 'function';
|
|
792
|
+
}
|
|
793
|
+
function isDynamicNode(node) {
|
|
794
|
+
return typeof node.point === 'function';
|
|
795
|
+
}
|
|
796
|
+
function isComponentStaticNode(node) {
|
|
797
|
+
return CustomNodeComponent.isPrototypeOf(node.type);
|
|
798
|
+
}
|
|
799
|
+
function isComponentDynamicNode(node) {
|
|
800
|
+
return CustomDynamicNodeComponent.isPrototypeOf(node.type);
|
|
801
|
+
}
|
|
802
|
+
function isTemplateStaticNode(node) {
|
|
803
|
+
return node.type === 'html-template';
|
|
804
|
+
}
|
|
805
|
+
function isTemplateDynamicNode(node) {
|
|
806
|
+
return node.type === 'html-template';
|
|
807
|
+
}
|
|
808
|
+
function isDefaultStaticNode(node) {
|
|
809
|
+
return node.type === 'default';
|
|
810
|
+
}
|
|
811
|
+
function isDefaultDynamicNode(node) {
|
|
812
|
+
return node.type === 'default';
|
|
813
|
+
}
|
|
814
|
+
|
|
755
815
|
class NodeModel {
|
|
756
|
-
static { this.
|
|
757
|
-
|
|
758
|
-
height: 50
|
|
759
|
-
}; }
|
|
816
|
+
static { this.defaultWidth = 100; }
|
|
817
|
+
static { this.defaultHeight = 50; }
|
|
760
818
|
constructor(node) {
|
|
761
819
|
this.node = node;
|
|
762
820
|
this.flowSettingsService = inject(FlowSettingsService);
|
|
763
|
-
this.internalPoint
|
|
764
|
-
this.throttledPoint$ = this.internalPoint
|
|
821
|
+
this.internalPoint = this.createInternalPointSignal();
|
|
822
|
+
this.throttledPoint$ = toObservable(this.internalPoint).pipe(observeOn(animationFrameScheduler));
|
|
765
823
|
this.point = toSignal(this.throttledPoint$, {
|
|
766
|
-
initialValue: this.internalPoint
|
|
824
|
+
initialValue: this.internalPoint()
|
|
767
825
|
});
|
|
768
826
|
this.point$ = this.throttledPoint$;
|
|
769
827
|
this.size = signal({ width: 0, height: 0 });
|
|
@@ -776,22 +834,71 @@ class NodeModel {
|
|
|
776
834
|
this.targetPosition = computed(() => this.flowSettingsService.handlePositions().target);
|
|
777
835
|
this.handles = signal([]);
|
|
778
836
|
this.handles$ = toObservable(this.handles);
|
|
779
|
-
this.draggable = true;
|
|
837
|
+
this.draggable = signal(true);
|
|
780
838
|
// disabled for configuration for now
|
|
781
839
|
this.magnetRadius = 20;
|
|
782
|
-
|
|
840
|
+
// TODO: not sure if we need to statically store it
|
|
841
|
+
this.isComponentType = CustomNodeComponent.isPrototypeOf(this.node.type) ||
|
|
842
|
+
CustomDynamicNodeComponent.isPrototypeOf(this.node.type);
|
|
843
|
+
// Default node specific thing
|
|
844
|
+
this.text = this.createTextSignal();
|
|
845
|
+
// Component node specific thing
|
|
783
846
|
this.componentTypeInputs = computed(() => {
|
|
784
847
|
return {
|
|
785
848
|
node: this.node,
|
|
786
849
|
_selected: this.selected()
|
|
787
850
|
};
|
|
788
851
|
});
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
852
|
+
if (isDefined(node.draggable)) {
|
|
853
|
+
if (isDynamicNode(node)) {
|
|
854
|
+
this.draggable = node.draggable;
|
|
855
|
+
}
|
|
856
|
+
else {
|
|
857
|
+
this.draggable.set(node.draggable);
|
|
858
|
+
}
|
|
859
|
+
}
|
|
792
860
|
}
|
|
793
861
|
setPoint(point) {
|
|
794
|
-
this.internalPoint
|
|
862
|
+
this.internalPoint.set(point);
|
|
863
|
+
}
|
|
864
|
+
/**
|
|
865
|
+
* TODO find the way to implement this better
|
|
866
|
+
*/
|
|
867
|
+
linkDefaultNodeSizeWithModelSize() {
|
|
868
|
+
const node = this.node;
|
|
869
|
+
if (node.type === 'default') {
|
|
870
|
+
if (isDynamicNode(node)) {
|
|
871
|
+
effect(() => {
|
|
872
|
+
this.size.set({
|
|
873
|
+
width: node.width?.() ?? NodeModel.defaultWidth,
|
|
874
|
+
height: node.height?.() ?? NodeModel.defaultHeight,
|
|
875
|
+
});
|
|
876
|
+
}, { allowSignalWrites: true });
|
|
877
|
+
}
|
|
878
|
+
else {
|
|
879
|
+
this.size.set({
|
|
880
|
+
width: node.width ?? NodeModel.defaultWidth,
|
|
881
|
+
height: node.height ?? NodeModel.defaultHeight
|
|
882
|
+
});
|
|
883
|
+
}
|
|
884
|
+
}
|
|
885
|
+
}
|
|
886
|
+
createTextSignal() {
|
|
887
|
+
const node = this.node;
|
|
888
|
+
if (node.type === 'default') {
|
|
889
|
+
if (isDynamicNode(node)) {
|
|
890
|
+
return node.text ?? signal('');
|
|
891
|
+
}
|
|
892
|
+
else {
|
|
893
|
+
return signal(node.text ?? '');
|
|
894
|
+
}
|
|
895
|
+
}
|
|
896
|
+
return signal('');
|
|
897
|
+
}
|
|
898
|
+
createInternalPointSignal() {
|
|
899
|
+
return isDynamicNode(this.node)
|
|
900
|
+
? this.node.point
|
|
901
|
+
: signal({ x: this.node.point.x, y: this.node.point.y });
|
|
795
902
|
}
|
|
796
903
|
}
|
|
797
904
|
|
|
@@ -1637,7 +1744,14 @@ class NodeComponent {
|
|
|
1637
1744
|
}
|
|
1638
1745
|
ngOnInit() {
|
|
1639
1746
|
this.handleService.node.set(this.nodeModel);
|
|
1640
|
-
|
|
1747
|
+
effect(() => {
|
|
1748
|
+
if (this.nodeModel.draggable()) {
|
|
1749
|
+
this.draggableService.enable(this.hostRef.nativeElement, this.nodeModel);
|
|
1750
|
+
}
|
|
1751
|
+
else {
|
|
1752
|
+
this.draggableService.disable(this.hostRef.nativeElement);
|
|
1753
|
+
}
|
|
1754
|
+
});
|
|
1641
1755
|
this.nodeModel.handles$
|
|
1642
1756
|
.pipe(switchMap((handles) => resizable(handles.map(h => h.parentReference)).pipe(map(() => handles))), tap((handles) => {
|
|
1643
1757
|
// TODO (performance) inspect how to avoid calls of this when flow initially rendered
|
|
@@ -1646,12 +1760,7 @@ class NodeComponent {
|
|
|
1646
1760
|
.subscribe();
|
|
1647
1761
|
}
|
|
1648
1762
|
ngAfterViewInit() {
|
|
1649
|
-
|
|
1650
|
-
this.nodeModel.size.set({
|
|
1651
|
-
width: this.nodeModel.node.width ?? NodeModel.defaultTypeSize.width,
|
|
1652
|
-
height: this.nodeModel.node.height ?? NodeModel.defaultTypeSize.height
|
|
1653
|
-
});
|
|
1654
|
-
}
|
|
1763
|
+
this.nodeModel.linkDefaultNodeSizeWithModelSize();
|
|
1655
1764
|
if (this.nodeModel.node.type === 'html-template' || this.nodeModel.isComponentType) {
|
|
1656
1765
|
resizable([this.htmlWrapperRef.nativeElement])
|
|
1657
1766
|
.pipe(startWith(null), tap(() => {
|
|
@@ -1687,7 +1796,7 @@ class NodeComponent {
|
|
|
1687
1796
|
}
|
|
1688
1797
|
}
|
|
1689
1798
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1690
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NodeComponent, selector: "g[node]", inputs: { nodeModel: "nodeModel", nodeHtmlTemplate: "nodeHtmlTemplate" }, providers: [HandleService], viewQueries: [{ propertyName: "nodeContentRef", first: true, predicate: ["nodeContent"], descendants: true }, { propertyName: "htmlWrapperRef", first: true, predicate: ["htmlWrapper"], descendants: true }], ngImport: i0, template: "<svg:foreignObject\n *ngIf=\"nodeModel.node.type === 'default'\"\n class=\"selectable\"\n #nodeContent\n [attr.width]=\"nodeModel.size().width\"\n [attr.height]=\"nodeModel.size().height\"\n (mousedown)=\"pullNode(); selectNode()\"\n>\n <div\n #htmlWrapper\n class=\"default-node\"\n [class.default-node_selected]=\"nodeModel.selected()\"\n [style.width]=\"styleWidth()\"\n [style.height]=\"styleHeight()\"\n [style.max-width]=\"styleWidth()\"\n [style.max-height]=\"styleHeight()\"\n >\n <div [outerHTML]=\"nodeModel.
|
|
1799
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NodeComponent, selector: "g[node]", inputs: { nodeModel: "nodeModel", nodeHtmlTemplate: "nodeHtmlTemplate" }, providers: [HandleService], viewQueries: [{ propertyName: "nodeContentRef", first: true, predicate: ["nodeContent"], descendants: true }, { propertyName: "htmlWrapperRef", first: true, predicate: ["htmlWrapper"], descendants: true }], ngImport: i0, template: "<svg:foreignObject\n *ngIf=\"nodeModel.node.type === 'default'\"\n class=\"selectable\"\n #nodeContent\n [attr.width]=\"nodeModel.size().width\"\n [attr.height]=\"nodeModel.size().height\"\n (mousedown)=\"pullNode(); selectNode()\"\n>\n <div\n #htmlWrapper\n class=\"default-node\"\n [class.default-node_selected]=\"nodeModel.selected()\"\n [style.width]=\"styleWidth()\"\n [style.height]=\"styleHeight()\"\n [style.max-width]=\"styleWidth()\"\n [style.max-height]=\"styleHeight()\"\n >\n <div [outerHTML]=\"nodeModel.text()\"></div>\n\n <handle type=\"source\" [position]=\"nodeModel.sourcePosition()\" />\n <handle type=\"target\" [position]=\"nodeModel.targetPosition()\" />\n </div>\n</svg:foreignObject>\n\n<svg:foreignObject\n *ngIf=\"nodeModel.node.type === 'html-template' && nodeHtmlTemplate\"\n class=\"selectable\"\n [attr.width]=\"nodeModel.size().width\"\n [attr.height]=\"nodeModel.size().height\"\n (mousedown)=\"pullNode()\"\n>\n <div #htmlWrapper class=\"wrapper\">\n <ng-container\n [ngTemplateOutlet]=\"nodeHtmlTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: { node: nodeModel.node, selected: nodeModel.selected } }\"\n [ngTemplateOutletInjector]=\"injector\"\n />\n </div>\n</svg:foreignObject>\n\n<svg:foreignObject\n *ngIf=\"nodeModel.isComponentType\"\n class=\"selectable\"\n [attr.width]=\"nodeModel.size().width\"\n [attr.height]=\"nodeModel.size().height\"\n (mousedown)=\"pullNode()\"\n>\n <div #htmlWrapper class=\"wrapper\">\n <ng-container\n [ngComponentOutlet]=\"$any(nodeModel.node.type)\"\n [ngComponentOutletInputs]=\"nodeModel.componentTypeInputs()\"\n [ngComponentOutletInjector]=\"injector\"\n />\n </div>\n</svg:foreignObject>\n\n<ng-container *ngFor=\"let handle of nodeModel.handles()\">\n <svg:circle\n *ngIf=\"!handle.template\"\n class=\"default-handle\"\n [attr.cx]=\"handle.offset().x\"\n [attr.cy]=\"handle.offset().y\"\n [attr.stroke-width]=\"handle.strokeWidth\"\n r=\"5\"\n (pointerStart)=\"startConnection($event, handle)\"\n (pointerEnd)=\"endConnection(handle)\"\n />\n\n <svg:g\n *ngIf=\"handle.template\"\n [handleSizeController]=\"handle\"\n (pointerStart)=\"startConnection($event, handle)\"\n (pointerEnd)=\"endConnection(handle)\"\n >\n <ng-container *ngTemplateOutlet=\"handle.template; context: handle.templateContext\" />\n </svg:g>\n\n <svg:circle\n *ngIf=\"showMagnet()\"\n class=\"magnet\"\n [attr.r]=\"nodeModel.magnetRadius\"\n [attr.cx]=\"handle.offset().x\"\n [attr.cy]=\"handle.offset().y\"\n (pointerEnd)=\"endConnection(handle); resetValidateConnection(handle)\"\n (pointerOver)=\"validateConnection(handle)\"\n (pointerOut)=\"resetValidateConnection(handle)\"\n />\n</ng-container>\n", styles: [".wrapper{width:max-content}.magnet{opacity:0}.default-node{border:1.5px solid #1b262c;border-radius:5px;display:flex;align-items:center;justify-content:center;color:#000;background-color:#fff}.default-node_selected{border-width:2px}.default-handle{stroke:#fff;fill:#1b262c}\n"], dependencies: [{ kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: HandleComponent, selector: "handle", inputs: ["position", "type", "id", "template"] }, { kind: "directive", type: HandleSizeControllerDirective, selector: "[handleSizeController]", inputs: ["handleSizeController"] }, { kind: "directive", type: PointerDirective, selector: "[pointerStart], [pointerEnd], [pointerOver], [pointerOut]", outputs: ["pointerOver", "pointerOut", "pointerStart", "pointerEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1691
1800
|
}
|
|
1692
1801
|
__decorate([
|
|
1693
1802
|
InjectionContext
|
|
@@ -1699,7 +1808,7 @@ __decorate([
|
|
|
1699
1808
|
], NodeComponent.prototype, "ngAfterViewInit", null);
|
|
1700
1809
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodeComponent, decorators: [{
|
|
1701
1810
|
type: Component,
|
|
1702
|
-
args: [{ selector: 'g[node]', changeDetection: ChangeDetectionStrategy.OnPush, providers: [HandleService], template: "<svg:foreignObject\n *ngIf=\"nodeModel.node.type === 'default'\"\n class=\"selectable\"\n #nodeContent\n [attr.width]=\"nodeModel.size().width\"\n [attr.height]=\"nodeModel.size().height\"\n (mousedown)=\"pullNode(); selectNode()\"\n>\n <div\n #htmlWrapper\n class=\"default-node\"\n [class.default-node_selected]=\"nodeModel.selected()\"\n [style.width]=\"styleWidth()\"\n [style.height]=\"styleHeight()\"\n [style.max-width]=\"styleWidth()\"\n [style.max-height]=\"styleHeight()\"\n >\n <div [outerHTML]=\"nodeModel.
|
|
1811
|
+
args: [{ selector: 'g[node]', changeDetection: ChangeDetectionStrategy.OnPush, providers: [HandleService], template: "<svg:foreignObject\n *ngIf=\"nodeModel.node.type === 'default'\"\n class=\"selectable\"\n #nodeContent\n [attr.width]=\"nodeModel.size().width\"\n [attr.height]=\"nodeModel.size().height\"\n (mousedown)=\"pullNode(); selectNode()\"\n>\n <div\n #htmlWrapper\n class=\"default-node\"\n [class.default-node_selected]=\"nodeModel.selected()\"\n [style.width]=\"styleWidth()\"\n [style.height]=\"styleHeight()\"\n [style.max-width]=\"styleWidth()\"\n [style.max-height]=\"styleHeight()\"\n >\n <div [outerHTML]=\"nodeModel.text()\"></div>\n\n <handle type=\"source\" [position]=\"nodeModel.sourcePosition()\" />\n <handle type=\"target\" [position]=\"nodeModel.targetPosition()\" />\n </div>\n</svg:foreignObject>\n\n<svg:foreignObject\n *ngIf=\"nodeModel.node.type === 'html-template' && nodeHtmlTemplate\"\n class=\"selectable\"\n [attr.width]=\"nodeModel.size().width\"\n [attr.height]=\"nodeModel.size().height\"\n (mousedown)=\"pullNode()\"\n>\n <div #htmlWrapper class=\"wrapper\">\n <ng-container\n [ngTemplateOutlet]=\"nodeHtmlTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: { node: nodeModel.node, selected: nodeModel.selected } }\"\n [ngTemplateOutletInjector]=\"injector\"\n />\n </div>\n</svg:foreignObject>\n\n<svg:foreignObject\n *ngIf=\"nodeModel.isComponentType\"\n class=\"selectable\"\n [attr.width]=\"nodeModel.size().width\"\n [attr.height]=\"nodeModel.size().height\"\n (mousedown)=\"pullNode()\"\n>\n <div #htmlWrapper class=\"wrapper\">\n <ng-container\n [ngComponentOutlet]=\"$any(nodeModel.node.type)\"\n [ngComponentOutletInputs]=\"nodeModel.componentTypeInputs()\"\n [ngComponentOutletInjector]=\"injector\"\n />\n </div>\n</svg:foreignObject>\n\n<ng-container *ngFor=\"let handle of nodeModel.handles()\">\n <svg:circle\n *ngIf=\"!handle.template\"\n class=\"default-handle\"\n [attr.cx]=\"handle.offset().x\"\n [attr.cy]=\"handle.offset().y\"\n [attr.stroke-width]=\"handle.strokeWidth\"\n r=\"5\"\n (pointerStart)=\"startConnection($event, handle)\"\n (pointerEnd)=\"endConnection(handle)\"\n />\n\n <svg:g\n *ngIf=\"handle.template\"\n [handleSizeController]=\"handle\"\n (pointerStart)=\"startConnection($event, handle)\"\n (pointerEnd)=\"endConnection(handle)\"\n >\n <ng-container *ngTemplateOutlet=\"handle.template; context: handle.templateContext\" />\n </svg:g>\n\n <svg:circle\n *ngIf=\"showMagnet()\"\n class=\"magnet\"\n [attr.r]=\"nodeModel.magnetRadius\"\n [attr.cx]=\"handle.offset().x\"\n [attr.cy]=\"handle.offset().y\"\n (pointerEnd)=\"endConnection(handle); resetValidateConnection(handle)\"\n (pointerOver)=\"validateConnection(handle)\"\n (pointerOut)=\"resetValidateConnection(handle)\"\n />\n</ng-container>\n", styles: [".wrapper{width:max-content}.magnet{opacity:0}.default-node{border:1.5px solid #1b262c;border-radius:5px;display:flex;align-items:center;justify-content:center;color:#000;background-color:#fff}.default-node_selected{border-width:2px}.default-handle{stroke:#fff;fill:#1b262c}\n"] }]
|
|
1703
1812
|
}], propDecorators: { nodeModel: [{
|
|
1704
1813
|
type: Input
|
|
1705
1814
|
}], nodeHtmlTemplate: [{
|
|
@@ -2463,5 +2572,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
2463
2572
|
* Generated bundle index. Do not edit.
|
|
2464
2573
|
*/
|
|
2465
2574
|
|
|
2466
|
-
export { ChangesControllerDirective, ConnectionControllerDirective, ConnectionTemplateDirective, CustomNodeComponent, EdgeLabelHtmlTemplateDirective, EdgeTemplateDirective, HandleComponent, HandleTemplateDirective, NodeHtmlTemplateDirective, SelectableDirective, VflowComponent, VflowModule };
|
|
2575
|
+
export { ChangesControllerDirective, ConnectionControllerDirective, ConnectionTemplateDirective, CustomDynamicNodeComponent, CustomNodeComponent, EdgeLabelHtmlTemplateDirective, EdgeTemplateDirective, HandleComponent, HandleTemplateDirective, NodeHtmlTemplateDirective, SelectableDirective, VflowComponent, VflowModule, isComponentDynamicNode, isComponentStaticNode, isDefaultDynamicNode, isDefaultStaticNode, isDynamicNode, isStaticNode, isTemplateDynamicNode, isTemplateStaticNode };
|
|
2467
2576
|
//# sourceMappingURL=ngx-vflow.mjs.map
|