@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.
70 lines • 12.9 kB
JavaScript
import { ChangeDetectionStrategy, Component, Inject, ViewChild } from "@angular/core";
import { PointExtensions } from '@foblex/2d';
import { FConnectionTextPathDirective } from './f-connection-text-path.directive';
import { F_CONNECTION_IDENTIFIERS } from '../f-connection-identifiers';
import { F_CONNECTION } from '../f-connection.injection-token';
import { CONNECTION_TEXT } from './i-connection-text';
import * as i0 from "@angular/core";
import * as i1 from "./f-connection-text-path.directive";
export class FConnectionTextComponent {
elementReference;
base;
get textId() {
return F_CONNECTION_IDENTIFIERS.textId(this.base.fId + this.base.fOutputId + this.base.fInputId);
}
get hostElement() {
return this.elementReference.nativeElement;
}
get text() {
return this.base.fText || '';
}
textPathDirective;
constructor(elementReference, base) {
this.elementReference = elementReference;
this.base = base;
}
redraw(line) {
this.textPathDirective.redraw();
const isTextReverse = FConnectionTextComponent.isTextReverse(line);
const dyValue = this.calculateDy(this.textPathDirective.fontSize, isTextReverse);
this.hostElement.setAttribute('dy', dyValue);
const textRect = this.textPathDirective.getBBox();
const textRectCenter = [textRect.x + textRect.width / 2, textRect.y + textRect.height / 2];
this.hostElement.setAttribute('transform', isTextReverse ? `rotate(180, ${textRectCenter})` : '');
const startOffset = FConnectionTextComponent.getTextStartOffset(line, this.base.fText || '', this.textPathDirective.symbolWidth);
if (startOffset < 0) {
this.hostElement.style.display = 'none';
}
else {
this.hostElement.style.display = 'unset';
}
}
calculateDy(fontSize, isTextReverse) {
const fontSizeNumber = parseFloat(fontSize);
const dyValue = isTextReverse ? fontSizeNumber * 1.5 : fontSizeNumber * -0.8;
return dyValue.toString();
}
static isTextReverse(line) {
return line.point1.x > line.point2.x;
}
static getTextStartOffset(line, name, symbolWidth) {
const vectorLength = PointExtensions.hypotenuse(line.point1, line.point2);
return vectorLength / 2 - ((name || '').length * symbolWidth) / 2;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FConnectionTextComponent, deps: [{ token: i0.ElementRef }, { token: F_CONNECTION }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FConnectionTextComponent, selector: "text[f-connection-text]", host: { properties: { "attr.id": "textId" }, classAttribute: "f-component f-connection-text" }, providers: [{ provide: CONNECTION_TEXT, useExisting: FConnectionTextComponent }], viewQueries: [{ propertyName: "textPathDirective", first: true, predicate: FConnectionTextPathDirective, descendants: true, static: true }], ngImport: i0, template: "<ng-container xmlns:svg=\"http://www.w3.org/2000/svg\">\n <svg:textPath f-connection-text-path>\n {{ text }}\n </svg:textPath>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1.FConnectionTextPathDirective, selector: "textPath[f-connection-text-path]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FConnectionTextComponent, decorators: [{
type: Component,
args: [{ selector: "text[f-connection-text]", changeDetection: ChangeDetectionStrategy.OnPush, host: {
class: "f-component f-connection-text",
'[attr.id]': 'textId',
}, providers: [{ provide: CONNECTION_TEXT, useExisting: FConnectionTextComponent }], template: "<ng-container xmlns:svg=\"http://www.w3.org/2000/svg\">\n <svg:textPath f-connection-text-path>\n {{ text }}\n </svg:textPath>\n</ng-container>\n" }]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: undefined, decorators: [{
type: Inject,
args: [F_CONNECTION]
}] }], propDecorators: { textPathDirective: [{
type: ViewChild,
args: [FConnectionTextPathDirective, { static: true }]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZi1jb25uZWN0aW9uLXRleHQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZi1mbG93L3NyYy9mLWNvbm5lY3Rpb24vY29tbW9uL2YtY29ubmVjdGlvbi10ZXh0L2YtY29ubmVjdGlvbi10ZXh0LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2YtZmxvdy9zcmMvZi1jb25uZWN0aW9uL2NvbW1vbi9mLWNvbm5lY3Rpb24tdGV4dC9mLWNvbm5lY3Rpb24tdGV4dC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFBYyxNQUFNLEVBQUUsU0FBUyxFQUN6QyxNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQVMsZUFBZSxFQUFFLE1BQU0sWUFBWSxDQUFDO0FBQ3BELE9BQU8sRUFBRSw0QkFBNEIsRUFBRSxNQUFNLG9DQUFvQyxDQUFDO0FBQ2xGLE9BQU8sRUFBRSx3QkFBd0IsRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBR3ZFLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQ0FBaUMsQ0FBQztBQUMvRCxPQUFPLEVBQUUsZUFBZSxFQUFtQixNQUFNLHFCQUFxQixDQUFDOzs7QUFZdkUsTUFBTSxPQUFPLHdCQUF3QjtJQW9CdkI7SUFDc0I7SUFuQmxDLElBQVcsTUFBTTtRQUNmLE9BQU8sd0JBQXdCLENBQUMsTUFBTSxDQUNwQyxJQUFJLENBQUMsSUFBSSxDQUFDLEdBQUcsR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDLFNBQVMsR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FDekQsQ0FBQztJQUNKLENBQUM7SUFFRCxJQUFXLFdBQVc7UUFDcEIsT0FBTyxJQUFJLENBQUMsZ0JBQWdCLENBQUMsYUFBYSxDQUFDO0lBQzdDLENBQUM7SUFFRCxJQUFXLElBQUk7UUFDYixP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QVZwQyxTQUFTOytCQUNFLHlCQUF5QixtQkFFbEIsdUJBQXVCLENBQUMsTUFBTSxRQUN6Qzt3QkFDSixLQUFLLEVBQUUsK0JBQStCO3dCQUN0QyxXQUFXLEVBQUUsUUFBUTtxQkFDdEIsYUFDVSxDQUFFLEVBQUUsT0FBTyxFQUFFLGVBQWUsRUFBRSxXQUFXLDBCQUEwQixFQUFFLENBQUU7OzBCQXVCN0UsTUFBTTsyQkFBQyxZQUFZO3lDQUpqQixpQkFBaUI7c0JBRHZCLFNBQVM7dUJBQUMsNEJBQTRCLEVBQUUsRUFBRSxNQUFNLEVBQUUsSUFBSSxFQUFFIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENvbXBvbmVudCwgRWxlbWVudFJlZiwgSW5qZWN0LCBWaWV3Q2hpbGRcbn0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcbmltcG9ydCB7IElMaW5lLCBQb2ludEV4dGVuc2lvbnMgfSBmcm9tICdAZm9ibGV4LzJkJztcbmltcG9ydCB7IEZDb25uZWN0aW9uVGV4dFBhdGhEaXJlY3RpdmUgfSBmcm9tICcuL2YtY29ubmVjdGlvbi10ZXh0LXBhdGguZGlyZWN0aXZlJztcbmltcG9ydCB7IEZfQ09OTkVDVElPTl9JREVOVElGSUVSUyB9IGZyb20gJy4uL2YtY29ubmVjdGlvbi1pZGVudGlmaWVycyc7XG5pbXBvcnQgeyBJSGFzQ29ubmVjdGlvblRleHQgfSBmcm9tICcuLi9pLWhhcy1jb25uZWN0aW9uLXRleHQnO1xuaW1wb3J0IHsgSUhhc0Nvbm5lY3Rpb25Gcm9tVG8gfSBmcm9tICcuLi9pLWhhcy1jb25uZWN0aW9uLWZyb20tdG8nO1xuaW1wb3J0IHsgRl9DT05ORUNUSU9OIH0gZnJvbSAnLi4vZi1jb25uZWN0aW9uLmluamVjdGlvbi10b2tlbic7XG5pbXBvcnQgeyBDT05ORUNUSU9OX1RFWFQsIElDb25uZWN0aW9uVGV4dCB9IGZyb20gJy4vaS1jb25uZWN0aW9uLXRleHQnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6IFwidGV4dFtmLWNvbm5lY3Rpb24tdGV4dF1cIixcbiAgdGVtcGxhdGVVcmw6IFwiLi9mLWNvbm5lY3Rpb24tdGV4dC5jb21wb25lbnQuaHRtbFwiLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgaG9zdDoge1xuICAgIGNsYXNzOiBcImYtY29tcG9uZW50IGYtY29ubmVjdGlvbi10ZXh0XCIsXG4gICAgJ1thdHRyLmlkXSc6ICd0ZXh0SWQnLFxuICB9LFxuICBwcm92aWRlcnM6IFsgeyBwcm92aWRlOiBDT05ORUNUSU9OX1RFWFQsIHVzZUV4aXN0aW5nOiBGQ29ubmVjdGlvblRleHRDb21wb25lbnQgfSBdLFxufSlcbmV4cG9ydCBjbGFzcyBGQ29ubmVjdGlvblRleHRDb21wb25lbnQgaW1wbGVtZW50cyBJQ29ubmVjdGlvblRleHQge1xuXG4gIHB1YmxpYyBnZXQgdGV4dElkKCk6IHN0cmluZyB7XG4gICAgcmV0dXJuIEZfQ09OTkVDVElPTl9JREVOVElGSUVSUy50ZXh0SWQoXG4gICAgICB0aGlzLmJhc2UuZklkICsgdGhpcy5iYXNlLmZPdXRwdXRJZCArIHRoaXMuYmFzZS5mSW5wdXRJZFxuICAgICk7XG4gIH1cblxuICBwdWJsaWMgZ2V0IGhvc3RFbGVtZW50KCk6IFNWR1RleHRFbGVtZW50IHtcbiAgICByZXR1cm4gdGhpcy5lbGVtZW50UmVmZXJlbmNlLm5hdGl2ZUVsZW1lbnQ7XG4gIH1cblxuICBwdWJsaWMgZ2V0IHRleHQoKTogc3RyaW5nIHtcbiAgICByZXR1cm4gdGhpcy5iYXNlLmZUZXh0IHx8ICcnO1xuICB9XG5cbiAgQFZpZXdDaGlsZChGQ29ubmVjdGlvblRleHRQYXRoRGlyZWN0aXZlLCB7IHN0YXRpYzogdHJ1ZSB9KVxuICBwdWJsaWMgdGV4dFBhdGhEaXJlY3RpdmUhOiBGQ29ubmVjdGlvblRleHRQYXRoRGlyZWN0aXZlO1xuXG4gIGNvbnN0cnVjdG9yKFxuICAgICAgcHJpdmF0ZSBlbGVtZW50UmVmZXJlbmNlOiBFbGVtZW50UmVmPFNWR1RleHRFbGVtZW50PixcbiAgICAgIEBJbmplY3QoRl9DT05ORUNUSU9OKSBwcml2YXRlIGJhc2U6IElIYXNDb25uZWN0aW9uVGV4dCAmIElIYXNDb25uZWN0aW9uRnJvbVRvLFxuICApIHtcbiAgfVxuXG4gIHB1YmxpYyByZWRyYXcobGluZTogSUxpbmUpOiB2b2lkIHtcbiAgICB0aGlzLnRleHRQYXRoRGlyZWN0aXZlLnJlZHJhdygpO1xuICAgIGNvbnN0IGlzVGV4dFJldmVyc2U6IGJvb2xlYW4gPSBGQ29ubmVjdGlvblRleHRDb21wb25lbnQuaXNUZXh0UmV2ZXJzZShsaW5lKTtcbiAgICBjb25zdCBkeVZhbHVlID0gdGhpcy5jYWxjdWxhdGVEeSh0aGlzLnRleHRQYXRoRGlyZWN0aXZlLmZvbnRTaXplLCBpc1RleHRSZXZlcnNlKTtcblxuICAgIHRoaXMuaG9zdEVsZW1lbnQuc2V0QXR0cmlidXRlKCdkeScsIGR5VmFsdWUpO1xuXG4gICAgY29uc3QgdGV4dFJlY3QgPSB0aGlzLnRleHRQYXRoRGlyZWN0aXZlLmdldEJCb3goKTtcbiAgICBjb25zdCB0ZXh0UmVjdENlbnRlciA9IFsgdGV4dFJlY3QueCArIHRleHRSZWN0LndpZHRoIC8gMiwgdGV4dFJlY3QueSArIHRleHRSZWN0LmhlaWdodCAvIDIgXTtcbiAgICB0aGlzLmhvc3RFbGVtZW50LnNldEF0dHJpYnV0ZSgndHJhbnNmb3JtJywgaXNUZXh0UmV2ZXJzZSA/IGByb3RhdGUoMTgwLCAkeyB0ZXh0UmVjdENlbnRlciB9KWAgOiAnJyk7XG4gICAgY29uc3Qgc3RhcnRPZmZzZXQgPSBGQ29ubmVjdGlvblRleHRDb21wb25lbnQuZ2V0VGV4dFN0YXJ0T2Zmc2V0KGxpbmUsIHRoaXMuYmFzZS5mVGV4dCB8fCAnJywgdGhpcy50ZXh0UGF0aERpcmVjdGl2ZS5zeW1ib2xXaWR0aCk7XG4gICAgaWYgKHN0YXJ0T2Zmc2V0IDwgMCkge1xuXG4gICAgICB0aGlzLmhvc3RFbGVtZW50LnN0eWxlLmRpc3BsYXkgPSAnbm9uZSc7XG4gICAgfSBlbHNlIHtcblxuICAgICAgdGhpcy5ob3N0RWxlbWVudC5zdHlsZS5kaXNwbGF5ID0gJ3Vuc2V0JztcbiAgICB9XG4gIH1cblxuICBwcml2YXRlIGNhbGN1bGF0ZUR5KGZvbnRTaXplOiBzdHJpbmcsIGlzVGV4dFJldmVyc2U6IGJvb2xlYW4pOiBzdHJpbmcge1xuICAgIGNvbnN0IGZvbnRTaXplTnVtYmVyID0gcGFyc2VGbG9hdChmb250U2l6ZSk7XG5cbiAgICBjb25zdCBkeVZhbHVlID0gaXNUZXh0UmV2ZXJzZSA/IGZvbnRTaXplTnVtYmVyICogMS41IDogZm9udFNpemVOdW1iZXIgKiAtMC44O1xuXG4gICAgcmV0dXJuIGR5VmFsdWUudG9TdHJpbmcoKTtcbiAgfVxuXG4gIHByaXZhdGUgc3RhdGljIGlzVGV4dFJldmVyc2UobGluZTogSUxpbmUpOiBib29sZWFuIHtcbiAgICByZXR1cm4gbGluZS5wb2ludDEueCA+IGxpbmUucG9pbnQyLng7XG4gIH1cblxuICBwcml2YXRlIHN0YXRpYyBnZXRUZXh0U3RhcnRPZmZzZXQobGluZTogSUxpbmUsIG5hbWU6IHN0cmluZywgc3ltYm9sV2lkdGg6IG51bWJlcik6IG51bWJlciB7XG4gICAgY29uc3QgdmVjdG9yTGVuZ3RoOiBudW1iZXIgPSBQb2ludEV4dGVuc2lvbnMuaHlwb3RlbnVzZShsaW5lLnBvaW50MSwgbGluZS5wb2ludDIpO1xuICAgIHJldHVybiB2ZWN0b3JMZW5ndGggLyAyIC0gKChuYW1lIHx8ICcnKS5sZW5ndGggKiBzeW1ib2xXaWR0aCkgLyAyO1xuICB9XG59XG5cbiIsIjxuZy1jb250YWluZXIgeG1sbnM6c3ZnPVwiaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmdcIj5cbiAgICA8c3ZnOnRleHRQYXRoIGYtY29ubmVjdGlvbi10ZXh0LXBhdGg+XG4gICAgICAgIHt7IHRleHQgfX1cbiAgICA8L3N2Zzp0ZXh0UGF0aD5cbjwvbmctY29udGFpbmVyPlxuIl19