rete-angular-plugin
Version:
Rete.js Angular plugin ==== [](https://stand-with-ukraine.pp.ua) [](ht
949 lines (931 loc) • 79.7 kB
JavaScript
import { __awaiter } from 'tslib';
import { getUID, ClassicPreset, Scope } from 'rete';
import { getDOMSocketPosition, loopConnectionPath, classicConnectionPath } from 'rete-render-utils';
import * as i0 from '@angular/core';
import { Directive, Input, Pipe, Component, HostBinding, HostListener, EventEmitter, Output, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import { BaseAreaPlugin } from 'rete-area-plugin';
import { createCustomElement } from '@angular/elements';
class RefDirective {
constructor(el) {
this.el = el;
}
ngOnChanges() {
this.emit({ type: 'render', data: Object.assign(Object.assign({}, this.data), { element: this.el.nativeElement }) });
}
ngOnDestroy() {
this.emit({ type: 'unmount', data: { element: this.el.nativeElement } });
}
}
RefDirective.ɵfac = function RefDirective_Factory(t) { return new (t || RefDirective)(i0.ɵɵdirectiveInject(i0.ElementRef)); };
RefDirective.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: RefDirective, selectors: [["", "refComponent", ""]], inputs: { data: "data", emit: "emit" }, features: [i0.ɵɵNgOnChangesFeature] });
(function () {
(typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RefDirective, [{
type: Directive,
args: [{
selector: '[refComponent]'
}]
}], function () { return [{ type: i0.ElementRef }]; }, { data: [{
type: Input
}], emit: [{
type: Input
}] });
})();
class ImpureKeyvaluePipe {
transform(value, compareFn) {
if (!value || typeof value !== 'object') {
return [];
}
const result = Object.entries(value).map(([key, val]) => ({ key, value: val }));
if (compareFn) {
result.sort(compareFn);
}
return result;
}
}
ImpureKeyvaluePipe.ɵfac = function ImpureKeyvaluePipe_Factory(t) { return new (t || ImpureKeyvaluePipe)(); };
ImpureKeyvaluePipe.ɵpipe = /*@__PURE__*/ i0.ɵɵdefinePipe({ name: "keyvalueimpure", type: ImpureKeyvaluePipe, pure: false });
(function () {
(typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ImpureKeyvaluePipe, [{
type: Pipe,
args: [{
name: 'keyvalueimpure',
pure: false
}]
}], null, null);
})();
const _c0$1 = function (a2, a3, a4, a5) { return { type: "socket", side: "output", key: a2, nodeId: a3, payload: a4, seed: a5 }; };
function NodeComponent_div_2_Template(rf, ctx) {
if (rf & 1) {
i0.ɵɵelementStart(0, "div", 4)(1, "div", 5);
i0.ɵɵtext(2);
i0.ɵɵelementEnd();
i0.ɵɵelement(3, "div", 6);
i0.ɵɵelementEnd();
}
if (rf & 2) {
const output_r3 = ctx.$implicit;
const ctx_r0 = i0.ɵɵnextContext();
i0.ɵɵattribute("data-testid", "output-" + output_r3.key);
i0.ɵɵadvance(2);
i0.ɵɵtextInterpolate(output_r3.value == null ? null : output_r3.value.label);
i0.ɵɵadvance(1);
i0.ɵɵproperty("data", i0.ɵɵpureFunction4(4, _c0$1, output_r3.key, ctx_r0.data.id, output_r3.value == null ? null : output_r3.value.socket, ctx_r0.seed))("emit", ctx_r0.emit);
}
}
const _c1 = function (a1) { return { type: "control", payload: a1 }; };
function NodeComponent_div_4_Template(rf, ctx) {
if (rf & 1) {
i0.ɵɵelement(0, "div", 7);
}
if (rf & 2) {
const control_r4 = ctx.$implicit;
const ctx_r1 = i0.ɵɵnextContext();
i0.ɵɵproperty("data", i0.ɵɵpureFunction1(3, _c1, control_r4.value))("emit", ctx_r1.emit);
i0.ɵɵattribute("data-testid", "control-" + control_r4.key);
}
}
function NodeComponent_div_6_div_2_Template(rf, ctx) {
if (rf & 1) {
i0.ɵɵelementStart(0, "div", 12);
i0.ɵɵtext(1);
i0.ɵɵelementEnd();
}
if (rf & 2) {
const input_r5 = i0.ɵɵnextContext().$implicit;
i0.ɵɵadvance(1);
i0.ɵɵtextInterpolate(input_r5.value == null ? null : input_r5.value.label);
}
}
const _c2 = function (a2, a3, a4, a5) { return { type: "socket", side: "input", key: a2, nodeId: a3, payload: a4, seed: a5 }; };
function NodeComponent_div_6_Template(rf, ctx) {
if (rf & 1) {
i0.ɵɵelementStart(0, "div", 8);
i0.ɵɵelement(1, "div", 9);
i0.ɵɵtemplate(2, NodeComponent_div_6_div_2_Template, 2, 1, "div", 10);
i0.ɵɵelement(3, "div", 11);
i0.ɵɵelementEnd();
}
if (rf & 2) {
const input_r5 = ctx.$implicit;
const ctx_r2 = i0.ɵɵnextContext();
i0.ɵɵattribute("data-testid", "input-" + input_r5.key);
i0.ɵɵadvance(1);
i0.ɵɵproperty("data", i0.ɵɵpureFunction4(8, _c2, input_r5.key, ctx_r2.data.id, input_r5.value == null ? null : input_r5.value.socket, ctx_r2.seed))("emit", ctx_r2.emit);
i0.ɵɵadvance(1);
i0.ɵɵproperty("ngIf", !(input_r5.value == null ? null : input_r5.value.control) || !(input_r5.value == null ? null : input_r5.value.showControl));
i0.ɵɵadvance(1);
i0.ɵɵstyleProp("display", (input_r5.value == null ? null : input_r5.value.control) && (input_r5.value == null ? null : input_r5.value.showControl) ? "" : "none");
i0.ɵɵproperty("data", i0.ɵɵpureFunction1(13, _c1, input_r5.value == null ? null : input_r5.value.control))("emit", ctx_r2.emit);
}
}
class NodeComponent {
constructor(cdr) {
this.cdr = cdr;
this.seed = 0;
this.cdr.detach();
}
get width() {
return this.data.width;
}
get height() {
return this.data.height;
}
get selected() {
return this.data.selected;
}
ngOnChanges() {
this.cdr.detectChanges();
requestAnimationFrame(() => this.rendered());
this.seed++; // force render sockets
}
sortByIndex(a, b) {
var _a, _b;
const ai = ((_a = a.value) === null || _a === void 0 ? void 0 : _a.index) || 0;
const bi = ((_b = b.value) === null || _b === void 0 ? void 0 : _b.index) || 0;
return ai - bi;
}
}
NodeComponent.ɵfac = function NodeComponent_Factory(t) { return new (t || NodeComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
NodeComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: NodeComponent, selectors: [["ng-component"]], hostAttrs: ["data-testid", "node"], hostVars: 6, hostBindings: function NodeComponent_HostBindings(rf, ctx) {
if (rf & 2) {
i0.ɵɵstyleProp("width", ctx.width, "px")("height", ctx.height, "px");
i0.ɵɵclassProp("selected", ctx.selected);
}
}, inputs: { data: "data", emit: "emit", rendered: "rendered" }, features: [i0.ɵɵNgOnChangesFeature], decls: 8, vars: 13, consts: [["data-testid", "title", 1, "title"], ["class", "output", 4, "ngFor", "ngForOf"], ["class", "control", "refComponent", "", 3, "data", "emit", 4, "ngFor", "ngForOf"], ["class", "input", 4, "ngFor", "ngForOf"], [1, "output"], ["data-testid", "output-title", 1, "output-title"], ["refComponent", "", "data-testid", "output-socket", 1, "output-socket", 3, "data", "emit"], ["refComponent", "", 1, "control", 3, "data", "emit"], [1, "input"], ["refComponent", "", "data-testid", "input-socket", 1, "input-socket", 3, "data", "emit"], ["class", "input-title", "data-testid", "input-title", 4, "ngIf"], ["refComponent", "", "data-testid", "input-control", 1, "input-control", 3, "data", "emit"], ["data-testid", "input-title", 1, "input-title"]], template: function NodeComponent_Template(rf, ctx) {
if (rf & 1) {
i0.ɵɵelementStart(0, "div", 0);
i0.ɵɵtext(1);
i0.ɵɵelementEnd();
i0.ɵɵtemplate(2, NodeComponent_div_2_Template, 4, 9, "div", 1);
i0.ɵɵpipe(3, "keyvalueimpure");
i0.ɵɵtemplate(4, NodeComponent_div_4_Template, 1, 5, "div", 2);
i0.ɵɵpipe(5, "keyvalueimpure");
i0.ɵɵtemplate(6, NodeComponent_div_6_Template, 4, 15, "div", 3);
i0.ɵɵpipe(7, "keyvalueimpure");
}
if (rf & 2) {
i0.ɵɵadvance(1);
i0.ɵɵtextInterpolate(ctx.data.label);
i0.ɵɵadvance(1);
i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBind2(3, 4, ctx.data.outputs, ctx.sortByIndex));
i0.ɵɵadvance(2);
i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBind2(5, 7, ctx.data.controls, ctx.sortByIndex));
i0.ɵɵadvance(2);
i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBind2(7, 10, ctx.data.inputs, ctx.sortByIndex));
}
}, dependencies: [i1.NgForOf, i1.NgIf, RefDirective, ImpureKeyvaluePipe], styles: ["[_nghost-%COMP%]{display:block;background:rgba(110,136,255,.8);border:2px solid #4e58bf;border-radius:10px;cursor:pointer;box-sizing:border-box;width:180px;height:auto;padding-bottom:6px;position:relative;-webkit-user-select:none;user-select:none;line-height:initial;font-family:Arial}[_nghost-%COMP%]:hover{background:rgba(130,153,255,.8)}.selected[_nghost-%COMP%]{background:#ffd92c;border-color:#e3c000}[_nghost-%COMP%] .title[_ngcontent-%COMP%]{color:#fff;font-family:sans-serif;font-size:18px;padding:8px}[_nghost-%COMP%] .output[_ngcontent-%COMP%]{text-align:right}[_nghost-%COMP%] .input[_ngcontent-%COMP%]{text-align:left}[_nghost-%COMP%] .input-title[_ngcontent-%COMP%], [_nghost-%COMP%] .output-title[_ngcontent-%COMP%]{vertical-align:middle;color:#fff;display:inline-block;font-family:sans-serif;font-size:14px;margin:6px;line-height:24px}[_nghost-%COMP%] .input-title[hidden][_ngcontent-%COMP%], [_nghost-%COMP%] .output-title[hidden][_ngcontent-%COMP%]{display:none}[_nghost-%COMP%] .output-socket[_ngcontent-%COMP%]{text-align:right;margin-right:-18px;display:inline-block}[_nghost-%COMP%] .input-socket[_ngcontent-%COMP%]{text-align:left;margin-left:-18px;display:inline-block}[_nghost-%COMP%] .input-control[_ngcontent-%COMP%]{z-index:1;width:calc(100% - 36px);vertical-align:middle;display:inline-block}[_nghost-%COMP%] .control[_ngcontent-%COMP%]{padding:6px 18px}"] });
(function () {
(typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NodeComponent, [{
type: Component,
args: [{ host: {
'data-testid': 'node'
}, template: "<div class=\"title\" data-testid=\"title\">{{data.label}}</div>\n<div class=\"output\" *ngFor=\"let output of data.outputs | keyvalueimpure: sortByIndex\" [attr.data-testid]=\"'output-'+output.key\">\n <div class=\"output-title\" data-testid=\"output-title\">{{output.value?.label}}</div>\n <div\n class=\"output-socket\"\n refComponent\n [data]=\"{type: 'socket', side: 'output', key: output.key, nodeId: data.id, payload: output.value?.socket, seed: seed }\"\n [emit]=\"emit\"\n data-testid=\"output-socket\"\n ></div>\n</div>\n<div\n class=\"control\"\n *ngFor=\"let control of data.controls | keyvalueimpure: sortByIndex\"\n refComponent\n [data]=\"{type: 'control', payload: control.value }\"\n [emit]=\"emit\"\n [attr.data-testid]=\"'control-'+control.key\"\n></div>\n<div class=\"input\" *ngFor=\"let input of data.inputs | keyvalueimpure: sortByIndex\" [attr.data-testid]=\"'input-'+input.key\">\n <div\n class=\"input-socket\"\n refComponent\n [data]=\"{type: 'socket', side: 'input', key: input.key, nodeId: data.id, payload: input.value?.socket, seed: seed }\"\n [emit]=\"emit\"\n data-testid=\"input-socket\"\n ></div>\n <div class=\"input-title\" data-testid=\"input-title\" *ngIf=\"!input.value?.control || !input.value?.showControl\">{{input.value?.label}}</div>\n <div\n class=\"input-control\"\n [style.display]=\"input.value?.control && input.value?.showControl ? '' : 'none'\"\n refComponent\n [data]=\"{type: 'control', payload: input.value?.control }\"\n [emit]=\"emit\"\n data-testid=\"input-control\"\n ></div>\n</div>\n", styles: [":host{display:block;background:rgba(110,136,255,.8);border:2px solid #4e58bf;border-radius:10px;cursor:pointer;box-sizing:border-box;width:180px;height:auto;padding-bottom:6px;position:relative;-webkit-user-select:none;user-select:none;line-height:initial;font-family:Arial}:host:hover{background:rgba(130,153,255,.8)}:host.selected{background:#ffd92c;border-color:#e3c000}:host .title{color:#fff;font-family:sans-serif;font-size:18px;padding:8px}:host .output{text-align:right}:host .input{text-align:left}:host .input-title,:host .output-title{vertical-align:middle;color:#fff;display:inline-block;font-family:sans-serif;font-size:14px;margin:6px;line-height:24px}:host .input-title[hidden],:host .output-title[hidden]{display:none}:host .output-socket{text-align:right;margin-right:-18px;display:inline-block}:host .input-socket{text-align:left;margin-left:-18px;display:inline-block}:host .input-control{z-index:1;width:calc(100% - 36px);vertical-align:middle;display:inline-block}:host .control{padding:6px 18px}\n"] }]
}], function () { return [{ type: i0.ChangeDetectorRef }]; }, { data: [{
type: Input
}], emit: [{
type: Input
}], rendered: [{
type: Input
}], width: [{
type: HostBinding,
args: ['style.width.px']
}], height: [{
type: HostBinding,
args: ['style.height.px']
}], selected: [{
type: HostBinding,
args: ['class.selected']
}] });
})();
class SocketComponent {
constructor(cdr) {
this.cdr = cdr;
this.cdr.detach();
}
get title() {
return this.data.name;
}
ngOnChanges() {
this.cdr.detectChanges();
requestAnimationFrame(() => this.rendered());
}
}
SocketComponent.ɵfac = function SocketComponent_Factory(t) { return new (t || SocketComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
SocketComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SocketComponent, selectors: [["ng-component"]], hostVars: 1, hostBindings: function SocketComponent_HostBindings(rf, ctx) {
if (rf & 2) {
i0.ɵɵhostProperty("title", ctx.title);
}
}, inputs: { data: "data", rendered: "rendered" }, features: [i0.ɵɵNgOnChangesFeature], decls: 0, vars: 0, template: function SocketComponent_Template(rf, ctx) { }, styles: ["[_nghost-%COMP%]{display:inline-block;cursor:pointer;border:1px solid white;border-radius:12px;width:24px;height:24px;margin:6px;vertical-align:middle;background:#96b38a;z-index:2;box-sizing:border-box}[_nghost-%COMP%]:hover{border-width:4px}.multiple[_nghost-%COMP%]{border-color:#ff0}.output[_nghost-%COMP%]{margin-right:-12px}.input[_nghost-%COMP%]{margin-left:-12px}"] });
(function () {
(typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SocketComponent, [{
type: Component,
args: [{ template: ``, styles: [":host{display:inline-block;cursor:pointer;border:1px solid white;border-radius:12px;width:24px;height:24px;margin:6px;vertical-align:middle;background:#96b38a;z-index:2;box-sizing:border-box}:host:hover{border-width:4px}:host.multiple{border-color:#ff0}:host.output{margin-right:-12px}:host.input{margin-left:-12px}\n"] }]
}], function () { return [{ type: i0.ChangeDetectorRef }]; }, { data: [{
type: Input
}], rendered: [{
type: Input
}], title: [{
type: HostBinding,
args: ['title']
}] });
})();
class ControlComponent {
constructor(cdr) {
this.cdr = cdr;
this.cdr.detach();
}
pointerdown(event) {
event.stopPropagation();
}
ngOnChanges(changes) {
const seed = changes['seed'];
const data = changes['data'];
if ((seed && seed.currentValue !== seed.previousValue)
|| (data && data.currentValue !== data.previousValue)) {
this.cdr.detectChanges();
}
requestAnimationFrame(() => this.rendered());
}
onChange(e) {
const target = e.target;
const value = (this.data.type === 'number'
? +target.value
: target.value);
this.data.setValue(value);
this.cdr.detectChanges();
}
}
ControlComponent.ɵfac = function ControlComponent_Factory(t) { return new (t || ControlComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
ControlComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ControlComponent, selectors: [["ng-component"]], hostBindings: function ControlComponent_HostBindings(rf, ctx) {
if (rf & 1) {
i0.ɵɵlistener("pointerdown", function ControlComponent_pointerdown_HostBindingHandler($event) { return ctx.pointerdown($event); });
}
}, inputs: { data: "data", rendered: "rendered" }, features: [i0.ɵɵNgOnChangesFeature], decls: 1, vars: 3, consts: [[3, "value", "readonly", "type", "input"]], template: function ControlComponent_Template(rf, ctx) {
if (rf & 1) {
i0.ɵɵelementStart(0, "input", 0);
i0.ɵɵlistener("input", function ControlComponent_Template_input_input_0_listener($event) { return ctx.onChange($event); });
i0.ɵɵelementEnd();
}
if (rf & 2) {
i0.ɵɵproperty("value", ctx.data.value)("readonly", ctx.data.readonly)("type", ctx.data.type);
}
}, styles: ["input[_ngcontent-%COMP%]{width:100%;border-radius:30px;background-color:#fff;padding:2px 6px;border:1px solid #999;font-size:110%;box-sizing:border-box}"] });
(function () {
(typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ControlComponent, [{
type: Component,
args: [{ template: "<input\n [value]=\"data.value\"\n [readonly]=\"data.readonly\"\n [type]=\"data.type\"\n (input)=\"onChange($event)\"\n/>\n", styles: ["input{width:100%;border-radius:30px;background-color:#fff;padding:2px 6px;border:1px solid #999;font-size:110%;box-sizing:border-box}\n"] }]
}], function () { return [{ type: i0.ChangeDetectorRef }]; }, { data: [{
type: Input
}], rendered: [{
type: Input
}], pointerdown: [{
type: HostListener,
args: ['pointerdown', ['$event']]
}] });
})();
class ConnectionComponent {
}
ConnectionComponent.ɵfac = function ConnectionComponent_Factory(t) { return new (t || ConnectionComponent)(); };
ConnectionComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ConnectionComponent, selectors: [["connection"]], inputs: { data: "data", start: "start", end: "end", path: "path" }, decls: 2, vars: 1, consts: [["data-testid", "connection"]], template: function ConnectionComponent_Template(rf, ctx) {
if (rf & 1) {
i0.ɵɵnamespaceSVG();
i0.ɵɵelementStart(0, "svg", 0);
i0.ɵɵelement(1, "path");
i0.ɵɵelementEnd();
}
if (rf & 2) {
i0.ɵɵadvance(1);
i0.ɵɵattribute("d", ctx.path);
}
}, styles: ["svg[_ngcontent-%COMP%]{overflow:visible!important;position:absolute;pointer-events:none;width:9999px;height:9999px}svg[_ngcontent-%COMP%] path[_ngcontent-%COMP%]{fill:none;stroke-width:5px;stroke:#4682b4;pointer-events:auto}"] });
(function () {
(typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ConnectionComponent, [{
type: Component,
args: [{ selector: 'connection', template: "<svg data-testid=\"connection\">\n <path [attr.d]=\"path\" />\n</svg>\n", styles: ["svg{overflow:visible!important;position:absolute;pointer-events:none;width:9999px;height:9999px}svg path{fill:none;stroke-width:5px;stroke:#4682b4;pointer-events:auto}\n"] }]
}], null, { data: [{
type: Input
}], start: [{
type: Input
}], end: [{
type: Input
}], path: [{
type: Input
}] });
})();
class ConnectionWrapperComponent {
constructor(cdr, viewContainerRef, componentFactoryResolver) {
this.cdr = cdr;
this.viewContainerRef = viewContainerRef;
this.componentFactoryResolver = componentFactoryResolver;
this.startOb = null;
this.endOb = null;
this.cdr.detach();
}
get _start() {
return 'x' in this.start ? this.start : this.startOb;
}
get _end() {
return 'x' in this.end ? this.end : this.endOb;
}
ngOnChanges() {
return __awaiter(this, void 0, void 0, function* () {
yield this.updatePath();
requestAnimationFrame(() => this.rendered());
this.cdr.detectChanges();
this.update();
});
}
updatePath() {
return __awaiter(this, void 0, void 0, function* () {
if (this._start && this._end) {
this._path = yield this.path(this._start, this._end);
}
});
}
ngOnInit() {
if (typeof this.start === 'function') {
this.start((value) => __awaiter(this, void 0, void 0, function* () {
this.startOb = value;
yield this.updatePath();
this.cdr.detectChanges();
this.update();
}));
}
if (typeof this.end === 'function') {
this.end((value) => __awaiter(this, void 0, void 0, function* () {
this.endOb = value;
yield this.updatePath();
this.cdr.detectChanges();
this.update();
}));
}
const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.connectionComponent);
this.viewContainerRef.clear();
this.ref = this.viewContainerRef.createComponent(componentFactory);
this.update();
}
update() {
this.ref.instance.data = this.data;
this.ref.instance.start = this._start;
this.ref.instance.end = this._end;
this.ref.instance.path = this._path;
this.ref.changeDetectorRef.markForCheck();
}
}
ConnectionWrapperComponent.ɵfac = function ConnectionWrapperComponent_Factory(t) { return new (t || ConnectionWrapperComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(i0.ComponentFactoryResolver)); };
ConnectionWrapperComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ConnectionWrapperComponent, selectors: [["ng-component"]], inputs: { data: "data", start: "start", end: "end", path: "path", rendered: "rendered", connectionComponent: "connectionComponent" }, features: [i0.ɵɵNgOnChangesFeature], decls: 0, vars: 0, template: function ConnectionWrapperComponent_Template(rf, ctx) { }, encapsulation: 2 });
(function () {
(typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ConnectionWrapperComponent, [{
type: Component,
args: [{
template: ''
}]
}], function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ViewContainerRef }, { type: i0.ComponentFactoryResolver }]; }, { data: [{
type: Input
}], start: [{
type: Input
}], end: [{
type: Input
}], path: [{
type: Input
}], rendered: [{
type: Input
}], connectionComponent: [{
type: Input
}] });
})();
/**
* Classic preset for rendering nodes, connections, controls and sockets.
*/
function setup$3(props) {
const positionWatcher = typeof (props === null || props === void 0 ? void 0 : props.socketPositionWatcher) === 'undefined'
? getDOMSocketPosition() // fix Type instantiation is excessively deep and possibly infinite.
: props === null || props === void 0 ? void 0 : props.socketPositionWatcher;
const { node, connection, socket, control } = (props === null || props === void 0 ? void 0 : props.customize) || {};
return {
attach(plugin) {
positionWatcher.attach(plugin);
},
update(context) {
const data = context.data.payload;
if (context.data.type === 'connection') {
const { start, end } = context.data;
return Object.assign(Object.assign({ data }, (start ? { start } : {})), (end ? { end } : {}));
}
return { data };
},
mount(context, plugin) {
const parent = plugin.parentScope();
const emit = parent.emit.bind(parent);
const rendered = () => {
emit({ type: 'rendered', data: context.data });
};
if (context.data.type === 'node') {
const component = node ? node(context.data) : NodeComponent;
return {
key: `node-${context.data.payload.id}`,
component,
props: {
data: context.data.payload,
emit,
rendered
}
};
}
if (context.data.type === 'connection') {
const component = connection ? connection(context.data) : ConnectionComponent;
const id = context.data.payload.id;
const { sourceOutput, targetInput, source, target } = context.data.payload;
const { start, end, payload } = context.data;
return {
key: `connection-${id}`,
component: ConnectionWrapperComponent,
props: {
connectionComponent: component,
data: payload,
start: start || ((change) => positionWatcher.listen(source, 'output', sourceOutput, change)),
end: end || ((change) => positionWatcher.listen(target, 'input', targetInput, change)),
path: (start, end) => __awaiter(this, void 0, void 0, function* () {
const response = yield plugin.emit({ type: 'connectionpath', data: { payload, points: [start, end] } });
if (!response)
return '';
const { path, points } = response.data;
const curvature = 0.3;
if (!path && points.length !== 2)
throw new Error('cannot render connection with a custom number of points');
if (!path)
return payload.isLoop
? loopConnectionPath(points, curvature, 120)
: classicConnectionPath(points, curvature);
return path;
}),
rendered
}
};
}
if (context.data.type === 'socket') {
const component = socket ? socket(context.data) : SocketComponent;
return {
key: `socket-${getUID()}`,
component,
props: {
data: context.data.payload,
rendered
}
};
}
if (context.data.type === 'control') {
const component = control
? control(context.data)
: (context.data.payload instanceof ClassicPreset.InputControl
? ControlComponent
: null);
if (component) {
return {
key: `control-${context.data.payload.id}`,
component,
props: {
data: context.data.payload,
rendered
}
};
}
return;
}
return;
}
};
}
var index$4 = /*#__PURE__*/Object.freeze({
__proto__: null,
setup: setup$3
});
function debounce(cb) {
return {
timeout: null,
cancel() {
if (this.timeout) {
window.clearTimeout(this.timeout);
this.timeout = null;
}
},
call(delay) {
this.timeout = window.setTimeout(() => {
cb();
}, delay);
}
};
}
class ContextMenuSearchComponent {
constructor() {
this.update = new EventEmitter();
}
}
ContextMenuSearchComponent.ɵfac = function ContextMenuSearchComponent_Factory(t) { return new (t || ContextMenuSearchComponent)(); };
ContextMenuSearchComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ContextMenuSearchComponent, selectors: [["context-menu-search"]], inputs: { value: "value" }, outputs: { update: "update" }, decls: 1, vars: 1, consts: [["data-testid", "context-menu-search-input", 1, "search", 3, "value", "input"]], template: function ContextMenuSearchComponent_Template(rf, ctx) {
if (rf & 1) {
i0.ɵɵelementStart(0, "input", 0);
i0.ɵɵlistener("input", function ContextMenuSearchComponent_Template_input_input_0_listener($event) { let tmp_b_0; return ctx.update.emit(((tmp_b_0 = $event.target) == null ? null : tmp_b_0.value) || ""); });
i0.ɵɵelementEnd();
}
if (rf & 2) {
i0.ɵɵproperty("value", ctx.value);
}
}, styles: [".search[_ngcontent-%COMP%]{color:#fff;padding:1px 8px;border:1px solid white;border-radius:10px;font-size:16px;font-family:serif;width:100%;box-sizing:border-box;background:transparent}"] });
(function () {
(typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ContextMenuSearchComponent, [{
type: Component,
args: [{ selector: 'context-menu-search', template: "<input class=\"search\" [value]=\"value\" (input)=\"update.emit($any($event.target)?.value || '')\"\n data-testid=\"context-menu-search-input\" />\n", styles: [".search{color:#fff;padding:1px 8px;border:1px solid white;border-radius:10px;font-size:16px;font-family:serif;width:100%;box-sizing:border-box;background:transparent}\n"] }]
}], null, { value: [{
type: Input
}], update: [{
type: Output
}] });
})();
function ContextMenuItemComponent_div_1_context_menu_item_1_Template(rf, ctx) {
if (rf & 1) {
const _r4 = i0.ɵɵgetCurrentView();
i0.ɵɵelementStart(0, "context-menu-item", 3);
i0.ɵɵlistener("select", function ContextMenuItemComponent_div_1_context_menu_item_1_Template_context_menu_item_select_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r4); const item_r2 = restoredCtx.$implicit; return i0.ɵɵresetView(item_r2.handler()); })("hide", function ContextMenuItemComponent_div_1_context_menu_item_1_Template_context_menu_item_hide_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r5 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r5.hide.emit()); });
i0.ɵɵtext(1);
i0.ɵɵelementEnd();
}
if (rf & 2) {
const item_r2 = ctx.$implicit;
const ctx_r1 = i0.ɵɵnextContext(2);
i0.ɵɵproperty("delay", ctx_r1.delay);
i0.ɵɵadvance(1);
i0.ɵɵtextInterpolate1(" ", item_r2.label, " ");
}
}
function ContextMenuItemComponent_div_1_Template(rf, ctx) {
if (rf & 1) {
i0.ɵɵelementStart(0, "div", 1);
i0.ɵɵtemplate(1, ContextMenuItemComponent_div_1_context_menu_item_1_Template, 2, 2, "context-menu-item", 2);
i0.ɵɵelementEnd();
}
if (rf & 2) {
const ctx_r0 = i0.ɵɵnextContext();
i0.ɵɵadvance(1);
i0.ɵɵproperty("ngForOf", ctx_r0.subitems);
}
}
const _c0 = ["*"];
// [imports]
class ContextMenuItemComponent {
constructor(cdr) {
this.cdr = cdr;
this.select = new EventEmitter();
this.hide = new EventEmitter();
this.hideSubitems = debounce(() => {
this.visibleSubitems = false;
this.cdr.detectChanges();
});
this.visibleSubitems = false;
this.cdr.detach();
}
get block() { return true; }
get hasSubitems() { return this.subitems; }
click(event) {
event.stopPropagation();
this.select.emit();
this.hide.emit();
}
pointerdown(event) {
event.stopPropagation();
}
wheel(event) {
event.stopPropagation();
}
pointerover() {
this.hideSubitems.cancel();
this.visibleSubitems = true;
this.cdr.detectChanges();
}
pointerleave() {
this.hideSubitems.call(this.delay);
this.cdr.detectChanges();
}
}
ContextMenuItemComponent.ɵfac = function ContextMenuItemComponent_Factory(t) { return new (t || ContextMenuItemComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
ContextMenuItemComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ContextMenuItemComponent, selectors: [["context-menu-item"]], hostAttrs: ["data-testid", "context-menu-item"], hostVars: 4, hostBindings: function ContextMenuItemComponent_HostBindings(rf, ctx) {
if (rf & 1) {
i0.ɵɵlistener("click", function ContextMenuItemComponent_click_HostBindingHandler($event) { return ctx.click($event); })("pointerdown", function ContextMenuItemComponent_pointerdown_HostBindingHandler($event) { return ctx.pointerdown($event); })("wheel", function ContextMenuItemComponent_wheel_HostBindingHandler($event) { return ctx.wheel($event); })("pointerover", function ContextMenuItemComponent_pointerover_HostBindingHandler() { return ctx.pointerover(); })("pointerleave", function ContextMenuItemComponent_pointerleave_HostBindingHandler() { return ctx.pointerleave(); });
}
if (rf & 2) {
i0.ɵɵclassProp("block", ctx.block)("hasSubitems", ctx.hasSubitems);
}
}, inputs: { subitems: "subitems", delay: "delay" }, outputs: { select: "select", hide: "hide" }, ngContentSelectors: _c0, decls: 2, vars: 1, consts: [["class", "subitems", 4, "ngIf"], [1, "subitems"], [3, "delay", "select", "hide", 4, "ngFor", "ngForOf"], [3, "delay", "select", "hide"]], template: function ContextMenuItemComponent_Template(rf, ctx) {
if (rf & 1) {
i0.ɵɵprojectionDef();
i0.ɵɵprojection(0);
i0.ɵɵtemplate(1, ContextMenuItemComponent_div_1_Template, 2, 1, "div", 0);
}
if (rf & 2) {
i0.ɵɵadvance(1);
i0.ɵɵproperty("ngIf", ctx.subitems && ctx.visibleSubitems);
}
}, dependencies: [i1.NgForOf, i1.NgIf, ContextMenuItemComponent], styles: ["@charset \"UTF-8\";.hasSubitems[_nghost-%COMP%]:after{content:\"\\25ba\";position:absolute;opacity:.6;right:5px;top:5px;font-family:initial}.subitems[_ngcontent-%COMP%]{position:absolute;top:0;left:100%;width:120px}", ".block[_ngcontent-%COMP%]{display:block;color:#fff;padding:4px;border-bottom:1px solid rgba(69,103,255,.8);background-color:#6e88ffcc;cursor:pointer;width:100%;position:relative}.block[_ngcontent-%COMP%]:first-child{border-top-left-radius:5px;border-top-right-radius:5px}.block[_ngcontent-%COMP%]:last-child{border-bottom-left-radius:5px;border-bottom-right-radius:5px}.block[_ngcontent-%COMP%]:hover{background-color:#8299ffcc}"] });
(function () {
(typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ContextMenuItemComponent, [{
type: Component,
args: [{ selector: 'context-menu-item', host: {
'data-testid': 'context-menu-item'
}, template: "<ng-content></ng-content>\n<div class=\"subitems\" *ngIf=\"subitems && visibleSubitems\">\n <context-menu-item *ngFor=\"let item of subitems\" [delay]=\"delay\" (select)=\"item.handler()\" (hide)=\"hide.emit()\">\n {{ item.label }}\n </context-menu-item>\n</div>\n", styles: ["@charset \"UTF-8\";:host(.hasSubitems):after{content:\"\\25ba\";position:absolute;opacity:.6;right:5px;top:5px;font-family:initial}.subitems{position:absolute;top:0;left:100%;width:120px}\n", ".block{display:block;color:#fff;padding:4px;border-bottom:1px solid rgba(69,103,255,.8);background-color:#6e88ffcc;cursor:pointer;width:100%;position:relative}.block:first-child{border-top-left-radius:5px;border-top-right-radius:5px}.block:last-child{border-bottom-left-radius:5px;border-bottom-right-radius:5px}.block:hover{background-color:#8299ffcc}\n"] }]
}], function () { return [{ type: i0.ChangeDetectorRef }]; }, { subitems: [{
type: Input
}], delay: [{
type: Input
}], select: [{
type: Output
}], hide: [{
type: Output
}], block: [{
type: HostBinding,
args: ['class.block']
}], hasSubitems: [{
type: HostBinding,
args: ['class.hasSubitems']
}], click: [{
type: HostListener,
args: ['click', ['$event']]
}], pointerdown: [{
type: HostListener,
args: ['pointerdown', ['$event']]
}], wheel: [{
type: HostListener,
args: ['wheel', ['$event']]
}], pointerover: [{
type: HostListener,
args: ['pointerover']
}], pointerleave: [{
type: HostListener,
args: ['pointerleave']
}] });
})();
function ContextMenuComponent_div_0_Template(rf, ctx) {
if (rf & 1) {
const _r3 = i0.ɵɵgetCurrentView();
i0.ɵɵelementStart(0, "div", 2)(1, "context-menu-search", 3);
i0.ɵɵlistener("update", function ContextMenuComponent_div_0_Template_context_menu_search_update_1_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.setFilter($event)); });
i0.ɵɵelementEnd()();
}
if (rf & 2) {
const ctx_r0 = i0.ɵɵnextContext();
i0.ɵɵadvance(1);
i0.ɵɵproperty("value", ctx_r0.filter);
}
}
function ContextMenuComponent_context_menu_item_1_Template(rf, ctx) {
if (rf & 1) {
const _r6 = i0.ɵɵgetCurrentView();
i0.ɵɵelementStart(0, "context-menu-item", 4);
i0.ɵɵlistener("select", function ContextMenuComponent_context_menu_item_1_Template_context_menu_item_select_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r6); const item_r4 = restoredCtx.$implicit; return i0.ɵɵresetView(item_r4.handler()); })("hide", function ContextMenuComponent_context_menu_item_1_Template_context_menu_item_hide_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r7 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r7.onHide()); });
i0.ɵɵtext(1);
i0.ɵɵelementEnd();
}
if (rf & 2) {
const item_r4 = ctx.$implicit;
const ctx_r1 = i0.ɵɵnextContext();
i0.ɵɵproperty("delay", ctx_r1.delay)("subitems", item_r4.subitems);
i0.ɵɵadvance(1);
i0.ɵɵtextInterpolate1(" ", item_r4.label, "\n");
}
}
// [imports]
class ContextMenuComponent {
constructor(cdr) {
this.cdr = cdr;
this.filter = '';
this.hide = debounce(() => {
this.onHide();
this.cdr.detectChanges();
});
this.customAttribute = '';
this.cdr.detach();
}
pointerover() {
this.hide.cancel();
this.cdr.detectChanges();
}
pointerleave() {
this.hide.call(this.delay);
this.cdr.detectChanges();
}
ngOnChanges() {
this.cdr.detectChanges();
requestAnimationFrame(() => this.rendered());
}
setFilter(value) {
this.filter = value;
this.cdr.detectChanges();
}
getItems() {
const filterRegexp = new RegExp(this.filter, 'i');
const filteredList = this.items.filter(item => (item.label.match(filterRegexp)));
return filteredList;
}
ngOnDestroy() {
if (this.hide)
this.hide.cancel();
}
}
ContextMenuComponent.ɵfac = function ContextMenuComponent_Factory(t) { return new (t || ContextMenuComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
ContextMenuComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ContextMenuComponent, selectors: [["ng-component"]], hostAttrs: ["data-testid", "context-menu"], hostVars: 1, hostBindings: function ContextMenuComponent_HostBindings(rf, ctx) {
if (rf & 1) {
i0.ɵɵlistener("mouseover", function ContextMenuComponent_mouseover_HostBindingHandler() { return ctx.pointerover(); })("mouseleave", function ContextMenuComponent_mouseleave_HostBindingHandler() { return ctx.pointerleave(); });
}
if (rf & 2) {
i0.ɵɵattribute("rete-context-menu", ctx.customAttribute);
}
}, inputs: { items: "items", delay: "delay", searchBar: "searchBar", onHide: "onHide", rendered: "rendered" }, features: [i0.ɵɵNgOnChangesFeature], decls: 2, vars: 2, consts: [["class", "block", 4, "ngIf"], [3, "delay", "subitems", "select", "hide", 4, "ngFor", "ngForOf"], [1, "block"], [3, "value", "update"], [3, "delay", "subitems", "select", "hide"]], template: function ContextMenuComponent_Template(rf, ctx) {
if (rf & 1) {
i0.ɵɵtemplate(0, ContextMenuComponent_div_0_Template, 2, 1, "div", 0);
i0.ɵɵtemplate(1, ContextMenuComponent_context_menu_item_1_Template, 2, 3, "context-menu-item", 1);
}
if (rf & 2) {
i0.ɵɵproperty("ngIf", ctx.searchBar);
i0.ɵɵadvance(1);
i0.ɵɵproperty("ngForOf", ctx.getItems());
}
}, dependencies: [i1.NgForOf, i1.NgIf, ContextMenuSearchComponent, ContextMenuItemComponent], styles: ["[_nghost-%COMP%]{display:block;padding:10px;width:120px;margin-top:-20px;margin-left:-60px}", ".block[_ngcontent-%COMP%]{display:block;color:#fff;padding:4px;border-bottom:1px solid rgba(69,103,255,.8);background-color:#6e88ffcc;cursor:pointer;width:100%;position:relative}.block[_ngcontent-%COMP%]:first-child{border-top-left-radius:5px;border-top-right-radius:5px}.block[_ngcontent-%COMP%]:last-child{border-bottom-left-radius:5px;border-bottom-right-radius:5px}.block[_ngcontent-%COMP%]:hover{background-color:#8299ffcc}"] });
(function () {
(typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ContextMenuComponent, [{
type: Component,
args: [{ host: {
'data-testid': 'context-menu'
}, template: "<div class=\"block\" *ngIf=\"searchBar\">\n <context-menu-search [value]=\"filter\" (update)=\"setFilter($event)\"></context-menu-search>\n</div>\n\n<context-menu-item *ngFor=\"let item of getItems()\" [delay]=\"delay\" (select)=\"item.handler()\" [subitems]=\"item.subitems\"\n (hide)=\"onHide()\">\n {{ item.label }}\n</context-menu-item>\n", styles: [":host{display:block;padding:10px;width:120px;margin-top:-20px;margin-left:-60px}\n", ".block{display:block;color:#fff;padding:4px;border-bottom:1px solid rgba(69,103,255,.8);background-color:#6e88ffcc;cursor:pointer;width:100%;position:relative}.block:first-child{border-top-left-radius:5px;border-top-right-radius:5px}.block:last-child{border-bottom-left-radius:5px;border-bottom-right-radius:5px}.block:hover{background-color:#8299ffcc}\n"] }]
}], function () { return [{ type: i0.ChangeDetectorRef }]; }, { items: [{
type: Input
}], delay: [{
type: Input
}], searchBar: [{
type: Input
}], onHide: [{
type: Input
}], rendered: [{
type: Input
}], customAttribute: [{
type: HostBinding,
args: ['attr.rete-context-menu']
}], pointerover: [{
type: HostListener,
args: ['mouseover']
}], pointerleave: [{
type: HostListener,
args: ['mouseleave']
}] });
})();
/**
* Preset for rendering context menu.
*/
function setup$2(props) {
const delay = typeof (props === null || props === void 0 ? void 0 : props.delay) === 'undefined' ? 1000 : props.delay;
return {
update(context) {
if (context.data.type === 'contextmenu') {
return {
items: context.data.items,
delay,
searchBar: context.data.searchBar,
onHide: context.data.onHide
};
}
},
mount(context, plugin) {
const parent = plugin.parentScope();
const emit = parent.emit.bind(parent);
const rendered = () => {
emit({ type: 'rendered', data: context.data });
};
if (context.data.type === 'contextmenu') {
return {
key: 'context-menu',
component: ContextMenuComponent,
props: {
items: context.data.items,
delay,
searchBar: context.data.searchBar,
onHide: context.data.onHide,
rendered
}
};
}
return null;
}
};
}
var index$3 = /*#__PURE__*/Object.freeze({
__proto__: null,
setup: setup$2
});
function useDrag(translate, getPointer) {
return {
start(e) {
let previous = Object.assign({}, getPointer(e));
function move(moveEvent) {
const current = Object.assign({}, getPointer(moveEvent));
const dx = current.x - previous.x;
const dy = current.y - previous.y;
previous = current;
translate(dx, dy);
}
function up() {
window.removeEventListener('pointermove', move);
window.removeEventListener('pointerup', up);
window.removeEventListener('pointercancel', up);
}
window.addEventListener('pointermove', move);
window.addEventListener('pointerup', up);
window.addEventListener('pointercancel', up);
}
};
}
class MiniViewportComponent {
constructor() {
this.drag = useDrag((dx, dy) => this.onDrag(dx, dy), e => ({ x: e.pageX, y: e.pageY }));
}
get styleLeft() {
return this.px(this.scale(this.left));
}
get styleTop() {
return this.px(this.scale(this.top));
}
get styleWidth() {
return this.px(this.scale(this.width));
}
get styleHeight() {
return this.px(this.scale(this.height));
}
pointerdown(event) {
event.stopPropagation();
this.drag.start(event);
}
px(value) {
return `${value}px`;
}
scale(v) {
return v * this.containerWidth;
}
invert(v) {
return v / this.containerWidth;
}
onDrag(dx, dy) {
this.translate(this.invert(-dx), this.invert(-dy));
}
}
MiniViewportComponent.ɵfac = function MiniViewportComponent_Factory(t) { return new (t || MiniViewportComponent)(); };
MiniViewportComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MiniViewportComponent, selectors: [["minimap-mini-viewport"]], hostAttrs: ["data-testid", "minimap-viewport"], hostVars: 8, hostBindings: function MiniViewportComponent_HostBindings(rf, ctx) {
if (rf & 1) {
i0.ɵɵlistener("pointerdown", function MiniViewportComponent_pointerdown_HostBindingHandler($event) { return ctx.pointerdown($event); });
}
if (rf & 2) {
i0.ɵɵstyleProp("left", ctx.styleLeft)("top", ctx.styleTop)("width", ctx.styleWidth)("height", ctx.styleHeight);
}
}, inputs: { left: "left", top: "top", width: "width", height: "height", containerWidth: "containerWidth", translate: "translate" }, decls: 0, vars: 0, template: function MiniViewportComponent_Template(rf, ctx) { }, styles: ["[_nghost-%COMP%]{display:block;position:absolute;background:rgba(255,251,128,.32);border:1px solid #ffe52b}"] });
(function () {
(typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MiniViewportComponent, [{
type: Component,
args: [{ selector: 'minimap-mini-viewport', host: {
'data-testid': 'minimap-viewport'
}, template: "", styles: [":host{display:block;position:absolute;background:rgba(255,251,128,.32);border:1px solid #ffe52b}\n"] }]
}], null, { left: [{
type: Input
}], top: [{
type: Input
}], width: [{
type: Input
}], height: [{
type: Input
}], containerWidth: [{
type: Input
}], translate: [{
type: Input
}], styleLeft: [{
type: HostBinding,
args: ['style.left']
}], styleTop: [{
type: HostBinding,
args: ['style.top']
}], styleWidth: [{
type: HostBinding,
args: ['style.width']
}], styleHeight: [{
type: HostBinding,
args: ['style.height']
}], pointerdown: [{
type: HostListener,
args: ['pointerdown', ['$event']]
}] });
})();
class MiniNodeComponent {
get styleLeft() {
return this.px(this.left);
}
get styleTop() {
return this.px(this.top);
}
get styleWidth() {
ret