@foblex/flow
Version:
An Angular library designed to simplify the creation and manipulation of dynamic flow. Provides components for flows, nodes, and connections, automating node manipulation and inter-node connections.
65 lines • 11.7 kB
JavaScript
import { ChangeDetectionStrategy, Component, Inject } from "@angular/core";
import { Point } from '@foblex/2d';
import { F_CONNECTION_IDENTIFIERS } from '../f-connection-identifiers';
import { F_CONNECTION } from '../f-connection.injection-token';
import { CONNECTION_GRADIENT } from './i-connection-gradient';
import * as i0 from "@angular/core";
export class FConnectionGradientComponent {
elementReference;
base;
get gradientId() {
return F_CONNECTION_IDENTIFIERS.gradientId(this.base.fId + this.base.fOutputId + this.base.fInputId);
}
get hostElement() {
return this.elementReference.nativeElement;
}
get stop1Element() {
return this.elementReference.nativeElement.children.item(0);
}
get stop2Element() {
return this.elementReference.nativeElement.children.item(1);
}
constructor(elementReference, base) {
this.elementReference = elementReference;
this.base = base;
}
initialize() {
this.stop1Element.setAttribute('offset', '0%');
this.stop2Element.setAttribute('offset', '100%');
}
updateGradient() {
this.setFromColor(this.base.fStartColor);
this.setToColor(this.base.fEndColor);
}
setFromColor(color) {
this.stop1Element.setAttribute('stop-color', color || 'transparent');
}
setToColor(color) {
this.stop2Element.setAttribute('stop-color', color || 'transparent');
}
redraw(line) {
const x = line.point2.x - line.point1.x;
const y = line.point2.y - line.point1.y;
const distance = Math.sqrt(x * x + y * y) || 0.01;
const from = new Point(0.5 - (0.5 * x) / distance, 0.5 - (0.5 * y) / distance);
this.hostElement.setAttribute('x1', from.x.toString());
this.hostElement.setAttribute('y1', from.y.toString());
const to = new Point(0.5 + (0.5 * x) / distance, 0.5 + (0.5 * y) / distance);
this.hostElement.setAttribute('x2', to.x.toString());
this.hostElement.setAttribute('y2', to.y.toString());
this.updateGradient();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FConnectionGradientComponent, deps: [{ token: i0.ElementRef }, { token: F_CONNECTION }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FConnectionGradientComponent, selector: "linearGradient[fConnectionGradient]", host: { properties: { "attr.id": "gradientId" }, classAttribute: "f-component f-connection-gradient" }, providers: [{ provide: CONNECTION_GRADIENT, useExisting: FConnectionGradientComponent }], ngImport: i0, template: "<ng-container xmlns:svg=\"http://www.w3.org/2000/svg\">\n <svg:stop/>\n <svg:stop/>\n</ng-container>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FConnectionGradientComponent, decorators: [{
type: Component,
args: [{ selector: "linearGradient[fConnectionGradient]", changeDetection: ChangeDetectionStrategy.OnPush, host: {
class: "f-component f-connection-gradient",
'[attr.id]': 'gradientId'
}, providers: [{ provide: CONNECTION_GRADIENT, useExisting: FConnectionGradientComponent }], template: "<ng-container xmlns:svg=\"http://www.w3.org/2000/svg\">\n <svg:stop/>\n <svg:stop/>\n</ng-container>\n" }]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: undefined, decorators: [{
type: Inject,
args: [F_CONNECTION]
}] }] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZi1jb25uZWN0aW9uLWdyYWRpZW50LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2YtZmxvdy9zcmMvZi1jb25uZWN0aW9uL2NvbW1vbi9mLWdyYWRpZW50L2YtY29ubmVjdGlvbi1ncmFkaWVudC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9mLWZsb3cvc3JjL2YtY29ubmVjdGlvbi9jb21tb24vZi1ncmFkaWVudC9mLWNvbm5lY3Rpb24tZ3JhZGllbnQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBYyxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDdkYsT0FBTyxFQUFTLEtBQUssRUFBRSxNQUFNLFlBQVksQ0FBQztBQUMxQyxPQUFPLEVBQUUsd0JBQXdCLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQUd2RSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUNBQWlDLENBQUM7QUFDL0QsT0FBTyxFQUFFLG1CQUFtQixFQUF1QixNQUFNLHlCQUF5QixDQUFDOztBQVluRixNQUFNLE9BQU8sNEJBQTRCO0lBcUI3QjtJQUNzQjtJQXBCaEMsSUFBVyxVQUFVO1FBQ25CLE9BQU8sd0JBQXdCLENBQUMsVUFBVSxDQUN4QyxJQUFJLENBQUMsSUFBSSxDQUFDLEdBQUcsR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDLFNBQVMsR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FDekQsQ0FBQztJQUNKLENBQUM7SUFFRCxJQUFXLFdBQVc7UUFDcEIsT0FBTyxJQUFJLENBQUMsZ0JBQWdCLENBQUMsYUFBYSxDQUFDO0lBQzdDLENBQUM7SUFFRCxJQUFXLFlBQVk7UUFDckIsT0FBTyxJQUFJLENBQUMsZ0JBQWdCLENBQUMsYUFBYSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMs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NEI7a0JBVnhDLFNBQVM7K0JBQ0UscUNBQXFDLG1CQUU5Qix1QkFBdUIsQ0FBQyxNQUFNLFFBQ3pDO3dCQUNKLEtBQUssRUFBRSxtQ0FBbUM7d0JBQzFDLFdBQVcsRUFBRSxZQUFZO3FCQUMxQixhQUNVLENBQUUsRUFBRSxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsV0FBVyw4QkFBOEIsRUFBRSxDQUFFOzswQkF3QnZGLE1BQU07MkJBQUMsWUFBWSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIEVsZW1lbnRSZWYsIEluamVjdCB9IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XG5pbXBvcnQgeyBJTGluZSwgUG9pbnQgfSBmcm9tICdAZm9ibGV4LzJkJztcbmltcG9ydCB7IEZfQ09OTkVDVElPTl9JREVOVElGSUVSUyB9IGZyb20gJy4uL2YtY29ubmVjdGlvbi1pZGVudGlmaWVycyc7XG5pbXBvcnQgeyBJSGFzQ29ubmVjdGlvbkZyb21UbyB9IGZyb20gJy4uL2ktaGFzLWNvbm5lY3Rpb24tZnJvbS10byc7XG5pbXBvcnQgeyBJSGFzQ29ubmVjdGlvbkNvbG9yIH0gZnJvbSAnLi4vaS1oYXMtY29ubmVjdGlvbi1jb2xvcic7XG5pbXBvcnQgeyBGX0NPTk5FQ1RJT04gfSBmcm9tICcuLi9mLWNvbm5lY3Rpb24uaW5qZWN0aW9uLXRva2VuJztcbmltcG9ydCB7IENPTk5FQ1RJT05fR1JBRElFTlQsIElDb25uZWN0aW9uR3JhZGllbnQgfSBmcm9tICcuL2ktY29ubmVjdGlvbi1ncmFkaWVudCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogXCJsaW5lYXJHcmFkaWVudFtmQ29ubmVjdGlvbkdyYWRpZW50XVwiLFxuICB0ZW1wbGF0ZVVybDogXCIuL2YtY29ubmVjdGlvbi1ncmFkaWVudC5jb21wb25lbnQuaHRtbFwiLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgaG9zdDoge1xuICAgIGNsYXNzOiBcImYtY29tcG9uZW50IGYtY29ubmVjdGlvbi1ncmFkaWVudFwiLFxuICAgICdbYXR0ci5pZF0nOiAnZ3JhZGllbnRJZCdcbiAgfSxcbiAgcHJvdmlkZXJzOiBbIHsgcHJvdmlkZTogQ09OTkVDVElPTl9HUkFESUVOVCwgdXNlRXhpc3Rpbmc6IEZDb25uZWN0aW9uR3JhZGllbnRDb21wb25lbnQgfSBdLFxufSlcbmV4cG9ydCBjbGFzcyBGQ29ubmVjdGlvbkdyYWRpZW50Q29tcG9uZW50IGltcGxlbWVudHMgSUNvbm5lY3Rpb25HcmFkaWVudCB7XG5cbiAgcHVibGljIGdldCBncmFkaWVudElkKCk6IHN0cmluZyB7XG4gICAgcmV0dXJuIEZfQ09OTkVDVElPTl9JREVOVElGSUVSUy5ncmFkaWVudElkKFxuICAgICAgdGhpcy5iYXNlLmZJZCArIHRoaXMuYmFzZS5mT3V0cHV0SWQgKyB0aGlzLmJhc2UuZklucHV0SWRcbiAgICApO1xuICB9XG5cbiAgcHVibGljIGdldCBob3N0RWxlbWVudCgpOiBTVkdMaW5lYXJHcmFkaWVudEVsZW1lbnQge1xuICAgIHJldHVybiB0aGlzLmVsZW1lbnRSZWZlcmVuY2UubmF0aXZlRWxlbWVudDtcbiAgfVxuXG4gIHB1YmxpYyBnZXQgc3RvcDFFbGVtZW50KCk6IFNWR1N0b3BFbGVtZW50IHtcbiAgICByZXR1cm4gdGhpcy5lbGVtZW50UmVmZXJlbmNlLm5hdGl2ZUVsZW1lbnQuY2hpbGRyZW4uaXRlbSgwKSBhcyBTVkdTdG9wRWxlbWVudDtcbiAgfVxuXG4gIHB1YmxpYyBnZXQgc3RvcDJFbGVtZW50KCk6IFNWR1N0b3BFbGVtZW50IHtcbiAgICByZXR1cm4gdGhpcy5lbGVtZW50UmVmZXJlbmNlLm5hdGl2ZUVsZW1lbnQuY2hpbGRyZW4uaXRlbSgxKSBhcyBTVkdTdG9wRWxlbWVudDtcbiAgfVxuXG4gIGNvbnN0cnVjdG9yKFxuICAgIHByaXZhdGUgZWxlbWVudFJlZmVyZW5jZTogRWxlbWVudFJlZjxTVkdMaW5lYXJHcmFkaWVudEVsZW1lbnQ+LFxuICAgIEBJbmplY3QoRl9DT05ORUNUSU9OKSBwcml2YXRlIGJhc2U6IElIYXNDb25uZWN0aW9uQ29sb3IgJiBJSGFzQ29ubmVjdGlvbkZyb21UbyxcbiAgKSB7XG4gIH1cblxuICBwdWJsaWMgaW5pdGlhbGl6ZSgpOiB2b2lkIHtcbiAgICB0aGlzLnN0b3AxRWxlbWVudC5zZXRBdHRyaWJ1dGUoJ29mZnNldCcsICcwJScpO1xuICAgIHRoaXMuc3RvcDJFbGVtZW50LnNldEF0dHJpYnV0ZSgnb2Zmc2V0JywgJzEwMCUnKTtcbiAgfVxuXG4gIHByaXZhdGUgdXBkYXRlR3JhZGllbnQoKTogdm9pZCB7XG4gICAgdGhpcy5zZXRGcm9tQ29sb3IodGhpcy5iYXNlLmZTdGFydENvbG9yKTtcbiAgICB0aGlzLnNldFRvQ29sb3IodGhpcy5iYXNlLmZFbmRDb2xvcik7XG4gIH1cblxuICBwcml2YXRlIHNldEZyb21Db2xvcihjb2xvcjogc3RyaW5nIHwgdW5kZWZpbmVkKTogdm9pZCB7XG4gICAgdGhpcy5zdG9wMUVsZW1lbnQuc2V0QXR0cmlidXRlKCdzdG9wLWNvbG9yJywgY29sb3IgfHwgJ3RyYW5zcGFyZW50Jyk7XG4gIH1cblxuICBwcml2YXRlIHNldFRvQ29sb3IoY29sb3I6IHN0cmluZyB8IHVuZGVmaW5lZCk6IHZvaWQge1xuICAgIHRoaXMuc3RvcDJFbGVtZW50LnNldEF0dHJpYnV0ZSgnc3RvcC1jb2xvcicsIGNvbG9yIHx8ICd0cmFuc3BhcmVudCcpO1xuICB9XG5cbiAgcHVibGljIHJlZHJhdyhsaW5lOiBJTGluZSk6IHZvaWQge1xuICAgIGNvbnN0IHg6IG51bWJlciA9IGxpbmUucG9pbnQyLnggLSBsaW5lLnBvaW50MS54O1xuICAgIGNvbnN0IHk6IG51bWJlciA9IGxpbmUucG9pbnQyLnkgLSBsaW5lLnBvaW50MS55O1xuICAgIGNvbnN0IGRpc3RhbmNlOiBudW1iZXIgPSBNYXRoLnNxcnQoeCAqIHggKyB5ICogeSkgfHwgMC4wMTtcblxuICAgIGNvbnN0IGZyb20gPSBuZXcgUG9pbnQoMC41IC0gKDAuNSAqIHgpIC8gZGlzdGFuY2UsIDAuNSAtICgwLjUgKiB5KSAvIGRpc3RhbmNlKTtcblxuICAgIHRoaXMuaG9zdEVsZW1lbnQuc2V0QXR0cmlidXRlKCd4MScsIGZyb20ueC50b1N0cmluZygpKTtcbiAgICB0aGlzLmhvc3RFbGVtZW50LnNldEF0dHJpYnV0ZSgneTEnLCBmcm9tLnkudG9TdHJpbmcoKSk7XG5cbiAgICBjb25zdCB0byA9IG5ldyBQb2ludCgwLjUgKyAoMC41ICogeCkgLyBkaXN0YW5jZSwgMC41ICsgKDAuNSAqIHkpIC8gZGlzdGFuY2UpO1xuICAgIHRoaXMuaG9zdEVsZW1lbnQuc2V0QXR0cmlidXRlKCd4MicsIHRvLngudG9TdHJpbmcoKSk7XG4gICAgdGhpcy5ob3N0RWxlbWVudC5zZXRBdHRyaWJ1dGUoJ3kyJywgdG8ueS50b1N0cmluZygpKTtcbiAgICB0aGlzLnVwZGF0ZUdyYWRpZW50KCk7XG4gIH1cbn1cblxuIiwiPG5nLWNvbnRhaW5lciB4bWxuczpzdmc9XCJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Z1wiPlxuICAgIDxzdmc6c3RvcC8+XG4gICAgPHN2ZzpzdG9wLz5cbjwvbmctY29udGFpbmVyPlxuIl19