ngx-svg-graphics/fesm2022/ngx-svg-graphics.mjs

Small svg library to link components or svg elements with arrows and allow to drag components.

import * as i0 from '@angular/core';
import { Injectable, EventEmitter, Output, Component, Input, ViewChild } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { NgIf, NgFor } from '@angular/common';
import { v4 } from 'uuid';
import * as i1 from '@angular/forms';
import { FormsModule } from '@angular/forms';

class Dragger {
    element;
    elem;
    dragActive = false;
    wasReallyDragged = false;
    dragStartX = 0;
    dragStartY = 0;
    constructor(element) {
        this.element = element;
        this.elem = element;
    }
    startDrag(event) {
        console.log('startDrag');
        this.dragActive = true;
        this.dragStartX = event.clientX;
        this.dragStartY = event.clientY;
    }
    // returns true in the case of a real drag event, false otherwise
    drag(event) {
        if (this.dragActive) {
            this.wasReallyDragged = true;
            event.preventDefault();
            const dragX = event.clientX;
            this.elem.position.x += (dragX - this.dragStartX);
            this.dragStartX = dragX;
            const dragY = event.clientY;
            this.elem.position.y += (dragY - this.dragStartY);
            this.dragStartY = dragY;
            return true;
        }
        return false;
    }
    endDrag(event) {
        console.log('endDrag');
        this.dragActive = false;
        // todo was working for click vs drag, not now setTimeout(() => {this.dragActive = false;}, 50);
        event.preventDefault();
    }
    //returns true if the click should be treated as click, false if it was from drag
    clickElem(event) {
        if (this.wasReallyDragged) {
            this.wasReallyDragged = false;
            return false;
        }
        else {
            event.preventDefault();
            return true;
        }
    }
}

class PositionHelper {
    static absolutePosition(elem) {
        let relativePosition = elem.getBBox();
        let translationMatrix = elem.getCTM();
        let x = relativePosition.x;
        let y = relativePosition.y;
        let x_abs = translationMatrix.a * x + translationMatrix.c * y + translationMatrix.e;
        let y_abs = translationMatrix.b * x + translationMatrix.d * y + translationMatrix.f;
        return { x: x_abs, y: y_abs, w: relativePosition.width, h: relativePosition.height };
    }
    static makeRelativeToElem(p, elem) {
        this.matrixTransform(p, elem.getCTM().inverse());
    }
    static matrixTransform(p, translationMatrix) {
        let x = p.x;
        let y = p.y;
        let x_trans = translationMatrix.a * x + translationMatrix.c * y + translationMatrix.e;
        let y_trans = translationMatrix.b * x + translationMatrix.d * y + translationMatrix.f;
        p.x = x_trans;
        p.y = y_trans;
    }
    static newBoundingBox(x = 0, y = 0, width = 5, height = 5) {
        return { x: x, y: y, w: width, h: height };
    }
}

class SVGAccessService {
    positionChange = new BehaviorSubject('');
    constructor() { }
    notifyPositionChange(id) {
        this.positionChange.next(id);
    }
    listenToPositionChange() {
        return this.positionChange.asObservable();
    }
    getElemById(id) {
        let elem = document.getElementById(id);
        return elem;
    }
    getRelativePosition(id, node) {
        let elem = this.getElemById(id);
        if (elem) {
            let abs = PositionHelper.absolutePosition(elem);
            PositionHelper.makeRelativeToElem(abs, node);
            return abs;
        }
        return undefined;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: SVGAccessService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: SVGAccessService, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: SVGAccessService, decorators: [{
            type: Injectable,
            args: [{
                    providedIn: 'root'
                }]
        }], ctorParameters: () => [] });

class DraggableComponent {
    svgAccessService;
    chooseElem = new EventEmitter();
    //the caller must initialize both required elements (elem and elementDragger) either in the constructor
    // (or if they are inputs) in the ngOnInit life cycle hook
    elem;
    elemDragger;
    constructor(svgAccessService) {
        this.svgAccessService = svgAccessService;
    }
    ngAfterViewInit() {
        this.svgAccessService.notifyPositionChange(this.elem.gId);
    }
    startDrag(event) {
        this.elemDragger.startDrag(event);
    }
    drag(event) {
        if (this.elemDragger.drag(event)) {
            this.svgAccessService.notifyPositionChange(this.elem.gId);
        }
    }
    endDrag(event) {
        this.elemDragger.endDrag(event);
    }
    clickElem(event) {
        if (this.elemDragger.clickElem(event)) {
            this.chooseElem.emit(this.elem);
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DraggableComponent, deps: [{ token: SVGAccessService }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: DraggableComponent, isStandalone: true, selector: "[draggable]", outputs: { chooseElem: "chooseElem" }, ngImport: i0, template: "<svg:g>\n  <g [attr.id]=\"elem.gId\"\n     (mousedown)=\"startDrag($event)\"\n     (mousemove)=\"drag($event)\"\n     (mouseup)=\"endDrag($event)\"\n     (mouseleave)=\"endDrag($event)\"\n     (click)=\"clickElem($event)\">\n  </g>\n</svg:g>\n", styles: [""] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DraggableComponent, decorators: [{
            type: Component,
            args: [{ imports: [], selector: '[draggable]', template: "<svg:g>\n  <g [attr.id]=\"elem.gId\"\n     (mousedown)=\"startDrag($event)\"\n     (mousemove)=\"drag($event)\"\n     (mouseup)=\"endDrag($event)\"\n     (mouseleave)=\"endDrag($event)\"\n     (click)=\"clickElem($event)\">\n  </g>\n</svg:g>\n" }]
        }], ctorParameters: () => [{ type: SVGAccessService }], propDecorators: { chooseElem: [{
                type: Output
            }] } });

class PathLayouter {
    static bestPoints(p1, p2) {
        //assumption is that both boxes do not intersect
        //since we only deal with bounding boxes, all relevant lines are parallel/orthogonal
        let xPoints = this.getPointsInOneDimension(p1.x, p1.w, p2.x, p2.w);
        let yPoints = this.getPointsInOneDimension(p1.y, p1.h, p2.y, p2.h);
        let result1 = { x: xPoints[0], y: yPoints[0] };
        let result2 = { x: xPoints[1], y: yPoints[1] };
        return [result1, result2];
    }
    // assumes that x1 is smaller than x2
    //works for width (careful with height, y axis is wrong way)
    static determineOverlapX(x1, w1, x2, w2) {
        let x1right = x1 + w1;
        if (x1right >= x2) {
            //find end of overlap
            let x2right = x2 + w2;
            let end = Math.min(x1right, x2right);
            //overlap interval is [x2, end]
            let middle = (x2 + end) / 2;
            return [middle, middle];
        }
        else
            return [x1right, x2];
    }
    static getPointsInOneDimension(x1, w1, x2, w2) {
        //determine overlap (and then middle of it) or closest points in one dimension
        if (x1 < x2) {
            return this.determineOverlapX(x1, w1, x2, w2);
        }
        else {
            return this.determineOverlapX(x2, w2, x1, w1).reverse();
        }
    }
}

/*****
 default implementation
 You can extend this base case with an own service implementation.
 Make sure to configure DI to use your service instead of this one
 In 20205, the way to do so is to declare it as provider in app.config.ts or app.component.ts
 providers: [{ provide: ArrowStyleConfigurationService, useClass: YourServiceImplementation }],
 See https://angular.dev/guide/di/dependency-injection-providers
 ***/
class ArrowStyleConfigurationService {
    constructor() { }
    styleArrow(arrowType) {
        return {
            color: 'black',
            dashed: [0]
        };
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ArrowStyleConfigurationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ArrowStyleConfigurationService, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ArrowStyleConfigurationService, decorators: [{
            type: Injectable,
            args: [{
                    providedIn: 'root'
                }]
        }], ctorParameters: () => [] });

class ArrowBetweenPointsComponent {
    arrowStyleConfigService;
    startX;
    startY;
    endX;
    endY;
    text;
    style;
    arrowType;
    arrowStyleConfiguration;
    id = v4();
    constructor(arrowStyleConfigService) {
        this.arrowStyleConfigService = arrowStyleConfigService;
        this.arrowStyleConfiguration = this.arrowStyleConfigService.styleArrow();
    }
    ngOnChanges() {
        this.arrowStyleConfiguration = this.arrowStyleConfigService.styleArrow(this.arrowType);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ArrowBetweenPointsComponent, deps: [{ token: ArrowStyleConfigurationService }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: ArrowBetweenPointsComponent, isStandalone: true, selector: "[arrow-between-points]", inputs: { startX: "startX", startY: "startY", endX: "endX", endY: "endY", text: "text", style: "style", arrowType: "arrowType" }, usesOnChanges: true, ngImport: i0, template: "<svg:g>\n    <path [attr.id]=\"id+'-path'\"\n          [attr.d]=\"'M '+startX+','+startY+' L '+endX+','+endY\"\n          [attr.stroke]=\"arrowStyleConfiguration.color\"\n          [attr.stroke-dasharray]=\"arrowStyleConfiguration.dashed\"\n          [attr.marker-start]='\"url(#\"+arrowStyleConfiguration.startPointer+\")\"'\n          [attr.marker-end]='\"url(#\"+arrowStyleConfiguration.endPointer+\")\"'\n          style=\"{{style}}\">\n    </path>\n    <text *ngIf=\"text\">\n        <textPath [attr.href]=\"'#'+id+'-path'\">\n            {{text}}\n        </textPath>\n    </text>\n</svg:g>", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ArrowBetweenPointsComponent, decorators: [{
            type: Component,
            args: [{ selector: '[arrow-between-points]', imports: [
                        NgIf
                    ], template: "<svg:g>\n    <path [attr.id]=\"id+'-path'\"\n          [attr.d]=\"'M '+startX+','+startY+' L '+endX+','+endY\"\n          [attr.stroke]=\"arrowStyleConfiguration.color\"\n          [attr.stroke-dasharray]=\"arrowStyleConfiguration.dashed\"\n          [attr.marker-start]='\"url(#\"+arrowStyleConfiguration.startPointer+\")\"'\n          [attr.marker-end]='\"url(#\"+arrowStyleConfiguration.endPointer+\")\"'\n          style=\"{{style}}\">\n    </path>\n    <text *ngIf=\"text\">\n        <textPath [attr.href]=\"'#'+id+'-path'\">\n            {{text}}\n        </textPath>\n    </text>\n</svg:g>" }]
        }], ctorParameters: () => [{ type: ArrowStyleConfigurationService }], propDecorators: { startX: [{
                type: Input
            }], startY: [{
                type: Input
            }], endX: [{
                type: Input
            }], endY: [{
                type: Input
            }], text: [{
                type: Input
            }], style: [{
                type: Input
            }], arrowType: [{
                type: Input
            }] } });

class ArrowBetweenBoxesComponent {
    cdr;
    start;
    end;
    arrowType;
    text;
    style;
    x1 = 0;
    y1 = 0;
    x2 = 5;
    y2 = 5;
    id = v4();
    positioned = false;
    constructor(cdr) {
        this.cdr = cdr;
    }
    ngAfterViewInit() {
        this.computePositions();
        this.positioned = true;
        this.cdr.detectChanges();
    }
    ngOnChanges() {
        if (this.positioned) {
            this.computePositions();
        }
    }
    computePositions() {
        let res = PathLayouter.bestPoints(this.start, this.end);
        this.applyBestPoints(res);
    }
    applyBestPoints(res) {
        this.x1 = res[0].x;
        this.y1 = res[0].y;
        this.x2 = res[1].x;
        this.y2 = res[1].y;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ArrowBetweenBoxesComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: ArrowBetweenBoxesComponent, isStandalone: true, selector: "[arrow-between-boxes]", inputs: { start: "start", end: "end", arrowType: "arrowType", text: "text", style: "style" }, usesOnChanges: true, ngImport: i0, template: "<svg:g>\n  <g arrow-between-points\n     [startX]=\"x1\"\n     [startY]=\"y1\"\n     [endX]=\"x2\"\n     [endY]=\"y2\"\n     [text]=\"text\"\n     [arrowType]=\"arrowType\"\n     [style]=\"style\"\n  >\n  </g>\n</svg:g>\n", styles: [""], dependencies: [{ kind: "component", type: ArrowBetweenPointsComponent, selector: "[arrow-between-points]", inputs: ["startX", "startY", "endX", "endY", "text", "style", "arrowType"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ArrowBetweenBoxesComponent, decorators: [{
            type: Component,
            args: [{ selector: '[arrow-between-boxes]', standalone: true, imports: [ArrowBetweenPointsComponent], template: "<svg:g>\n  <g arrow-between-points\n     [startX]=\"x1\"\n     [startY]=\"y1\"\n     [endX]=\"x2\"\n     [endY]=\"y2\"\n     [text]=\"text\"\n     [arrowType]=\"arrowType\"\n     [style]=\"style\"\n  >\n  </g>\n</svg:g>\n" }]
        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { start: [{
                type: Input
            }], end: [{
                type: Input
            }], arrowType: [{
                type: Input
            }], text: [{
                type: Input
            }], style: [{
                type: Input
            }] } });

class ArrowBetweenElemsComponent {
    svgAccessService;
    cdr;
    startGID;
    startSuffix;
    endGID;
    endSuffix;
    arrowType;
    breaks = [];
    text;
    style; //todo move into ArrowStyleConfig?
    startId;
    endId;
    start;
    end;
    positioned = false;
    node;
    changeNotifier;
    changeSubscription;
    //idea: compute the two input positions as relative to the current elem
    constructor(svgAccessService, cdr) {
        this.svgAccessService = svgAccessService;
        this.cdr = cdr;
        this.changeNotifier = this.svgAccessService.listenToPositionChange();
        this.changeSubscription = this.changeNotifier.subscribe(nextString => {
            if (nextString == this.startGID || nextString == this.endGID) {
                setTimeout(() => {
                    this.computePositionsByIds();
                    this.cdr.detectChanges();
                }, 0);
            }
        });
    }
    ngOnInit() {
        this.startId = this.startGID + this.startSuffix;
        this.endId = this.endGID + this.endSuffix;
    }
    ngOnChanges(_) {
        this.startId = this.startGID + this.startSuffix;
        this.endId = this.endGID + this.endSuffix;
        this.computePositionsByIds();
        this.cdr.detectChanges();
    }
    ngAfterViewInit() {
        this.positioned = true;
        this.computePositionsByIds();
        this.cdr.detectChanges();
    }
    computePositionsByIds() {
        if (this.node?.nativeElement) {
            let rel = this.node.nativeElement;
            let startOpt = this.svgAccessService.getRelativePosition(this.startId, rel);
            if (startOpt) {
                this.start = startOpt;
            }
            let endOpt = this.svgAccessService.getRelativePosition(this.endId, rel);
            if (endOpt) {
                this.end = endOpt;
            }
        }
        else
            console.log('No native element yet');
    }
    ngOnDestroy() {
        this.changeSubscription.unsubscribe();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ArrowBetweenElemsComponent, deps: [{ token: SVGAccessService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: ArrowBetweenElemsComponent, isStandalone: true, selector: "[arrowElems]", inputs: { startGID: "startGID", startSuffix: "startSuffix", endGID: "endGID", endSuffix: "endSuffix", arrowType: "arrowType", breaks: "breaks", text: "text", style: "style" }, viewQueries: [{ propertyName: "node", first: true, predicate: ["arrow"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<svg:g #arrow>\n  <g arrow-between-boxes *ngIf=\"start && end\"\n       [start]=\"start\"\n       [end]=\"end\"\n       [arrowType]=\"arrowType\"\n       [text]=\"text\"\n       [style]=\"style\">\n  </g>\n></svg:g>\n", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ArrowBetweenBoxesComponent, selector: "[arrow-between-boxes]", inputs: ["start", "end", "arrowType", "text", "style"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ArrowBetweenElemsComponent, decorators: [{
            type: Component,
            args: [{ selector: '[arrowElems]', standalone: true, imports: [NgIf, ArrowBetweenBoxesComponent], template: "<svg:g #arrow>\n  <g arrow-between-boxes *ngIf=\"start && end\"\n       [start]=\"start\"\n       [end]=\"end\"\n       [arrowType]=\"arrowType\"\n       [text]=\"text\"\n       [style]=\"style\">\n  </g>\n></svg:g>\n" }]
        }], ctorParameters: () => [{ type: SVGAccessService }, { type: i0.ChangeDetectorRef }], propDecorators: { startGID: [{
                type: Input
            }], startSuffix: [{
                type: Input
            }], endGID: [{
                type: Input
            }], endSuffix: [{
                type: Input
            }], arrowType: [{
                type: Input
            }], breaks: [{
                type: Input
            }], text: [{
                type: Input
            }], style: [{
                type: Input
            }], node: [{
                type: ViewChild,
                args: ['arrow']
            }] } });

class TextDistributor {
    static determineHowManyChars(w) {
        return Math.floor(w / 7.6);
    }
    static determineLines(h) {
        return Math.floor(h / 20);
    }
    // idea: distribute words over lines,
    // if a single word is too long for a line, cut it early enough to have three dots afterwards
    // if you need to indicate that there is more text after the last complete word, also use three dots, but after a break
    static distributeText(text, w, h) {
        let distributedText = [];
        let broken = text?.split(' ');
        let maxLines = this.determineLines(h);
        if (maxLines <= 0) {
            console.error('Text area too low for text ' + text);
            distributedText = ['...'];
        }
        for (let i = 0; i < maxLines; i++) {
            if (broken.length > 0) {
                distributedText[i] = this.takeNextLine(broken, w);
            }
        }
        // now deal with last line: here we need special care for adding ... if necessary
        if (broken.length > 0) {
            // we need to indicate that there is more text - this could be the 4 signs to many...
            distributedText[maxLines - 1] += ' ...';
        }
        return distributedText.filter(w => w != '');
    }
    // if a single word is too long for a line, cut it early enough to have three dots afterwards
    static limitSingleWord(word, w) {
        let maxSize = this.determineHowManyChars(w);
        if (word.length > maxSize) {
            let ending = '...';
            // care for far too short width:
            if (maxSize <= 3) {
                return ending.substring(0, maxSize);
            }
            else {
                return word.substring(0, maxSize - 3) + '...';
            }
        }
        else {
            return word;
        }
    }
    // adapts input words array in place by removing all those that are taken into the result
    static takeNextLine(words, w) {
        if (words?.length > 0) {
            let res = this.limitSingleWord(words[0], w);
            let i = 1;
            let maxSize = this.determineHowManyChars(w);
            let testRes = res + ' ' + words[i];
            while (testRes.length <= maxSize && i < words.length - 1) {
                res = testRes;
                i++;
                testRes = res + ' ' + words[i];
            }
            words.splice(0, i);
            return res;
        }
        else
            return '';
    }
}

class TextAreaSvgComponent {
    /*
    a fixed size svg. If the text exceeds the possible size, we will do a ... for now
     */
    text;
    x;
    y;
    w;
    h;
    singleEdit = false;
    textChange = new EventEmitter();
    //only with singleEdit since that opens an overlay where one can change the text in place
    distributedText = [];
    isActive = false;
    ngOnChanges() {
        this.distributeText();
    }
    handleClick() {
        if (this.singleEdit) {
            this.isActive = true;
        }
    }
    leaveTextInput() {
        this.textChange.emit(this.text);
        this.isActive = false;
    }
    distributeText() {
        this.distributedText = TextDistributor.distributeText(this.text, this.w, this.h);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: TextAreaSvgComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: TextAreaSvgComponent, isStandalone: true, selector: "[text-area-svg]", inputs: { text: "text", x: "x", y: "y", w: "w", h: "h", singleEdit: "singleEdit" }, outputs: { textChange: "textChange" }, usesOnChanges: true, ngImport: i0, template: "<svg:text [attr.x]=\"x\" [attr.y]=\"y\" [attr.width]=\"w\" [attr.height]=\"h\" dy=\"0\" [attr.style]=\"\" (click)=\"handleClick()\">\n  <tspan dy=\"1.2em\" [attr.x]=\"x\" *ngFor=\"let line of distributedText\">{{line}}</tspan>\n</svg:text>\n<svg:foreignObject  *ngIf=\"isActive\" [attr.x]=\"x\" [attr.y]=\"y\" [attr.width]=\"w\" [attr.height]=\"h\">\n  <input id=\"text-area\" type=\"text\" [(ngModel)]=\"this.text\" (focusout)=\"leaveTextInput()\"/>\n</svg:foreignObject>\n", styles: [""], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: TextAreaSvgComponent, decorators: [{
            type: Component,
            args: [{ selector: '[text-area-svg]', imports: [NgFor, NgIf, FormsModule], template: "<svg:text [attr.x]=\"x\" [attr.y]=\"y\" [attr.width]=\"w\" [attr.height]=\"h\" dy=\"0\" [attr.style]=\"\" (click)=\"handleClick()\">\n  <tspan dy=\"1.2em\" [attr.x]=\"x\" *ngFor=\"let line of distributedText\">{{line}}</tspan>\n</svg:text>\n<svg:foreignObject  *ngIf=\"isActive\" [attr.x]=\"x\" [attr.y]=\"y\" [attr.width]=\"w\" [attr.height]=\"h\">\n  <input id=\"text-area\" type=\"text\" [(ngModel)]=\"this.text\" (focusout)=\"leaveTextInput()\"/>\n</svg:foreignObject>\n" }]
        }], propDecorators: { text: [{
                type: Input
            }], x: [{
                type: Input
            }], y: [{
                type: Input
            }], w: [{
                type: Input
            }], h: [{
                type: Input
            }], singleEdit: [{
                type: Input
            }], textChange: [{
                type: Output
            }] } });

/*
 * Public API Surface of arrows
 */

/**
 * Generated bundle index. Do not edit.
 */

export { ArrowBetweenBoxesComponent, ArrowBetweenElemsComponent, ArrowBetweenPointsComponent, ArrowStyleConfigurationService, DraggableComponent, Dragger, PathLayouter, PositionHelper, SVGAccessService, TextAreaSvgComponent, TextDistributor };
//# sourceMappingURL=ngx-svg-graphics.mjs.map