ngx-svg-graphics 2.1.0 → 3.0.0

package/fesm2022/ngx-svg-graphics.mjs

@@ -0,0 +1,595 @@
+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 {
+    elem;
+    dragActive = false;
+    wasReallyDragged = false;
+    dragStartX = 0;
+    dragStartY = 0;
+    constructor(element) {
+        this.elem = element;
+    }
+    startDrag(event) {
+        this.dragStartX = event.clientX;
+        this.dragStartY = event.clientY;
+        this.dragActive = true;
+    }
+    // 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) {
+        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 getSvgBBPosition(elem, node) {
+        let abs = PositionHelper.absolutePosition(elem);
+        PositionHelper.makeRelativeToElem(abs, node);
+        return abs;
+    }
+    static absolutePosition(elem) {
+        let relativePosition = elem.getBBox();
+        const svg = elem.ownerSVGElement;
+        const toSvg = svg.getScreenCTM().inverse();
+        const toScreen = elem.getCTM();
+        let translationMatrix = toSvg.multiply(toScreen);
+        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 * translationMatrix.a, h: relativePosition.height * translationMatrix.d };
+    }
+    static makeRelativeToElem(p, elem) {
+        const svg = elem.ownerSVGElement;
+        const fromSvg = svg.getScreenCTM();
+        const fromScreen = elem.getCTM().inverse();
+        const transformer = fromScreen.multiply(fromSvg);
+        this.matrixTransform(p, transformer);
+    }
+    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 };
+    }
+    static computeOffset(index, length) {
+        const middle = (length - 1) / 2;
+        return index - middle;
+    }
+    static computeChildBBox(index, length, parentBox) {
+        return {
+            x: parentBox.x + this.computeOffset(index, length) * (parentBox.w + 5),
+            y: parentBox.y + parentBox.h * 2,
+            w: parentBox.w,
+            h: parentBox.h
+        };
+    }
+}
+
+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) {
+            return PositionHelper.getSvgBBPosition(elem, node);
+        }
+        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     (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     (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]', 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]', 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
+            }] } });
+
+class RectangleComponent {
+    position;
+    color = '#ccffff';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RectangleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: RectangleComponent, isStandalone: true, selector: "[rectangleG]", inputs: { position: "position", color: "color" }, ngImport: i0, template: "<svg:g>\n    <rect [attr.x]=\"position.x\" [attr.y]=\"position.y\" [attr.width]=\"position.w\" [attr.height]=\"position.h\" [attr.fill]=\"color\"></rect>\n</svg:g>\n", styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RectangleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: '[rectangleG]', imports: [], template: "<svg:g>\n    <rect [attr.x]=\"position.x\" [attr.y]=\"position.y\" [attr.width]=\"position.w\" [attr.height]=\"position.h\" [attr.fill]=\"color\"></rect>\n</svg:g>\n" }]
+        }], propDecorators: { position: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }] } });
+
+class RectangleWithTextComponent {
+    id;
+    text;
+    textChange = new EventEmitter();
+    position;
+    color;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RectangleWithTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: RectangleWithTextComponent, isStandalone: true, selector: "[rectangle-with-text]", inputs: { id: "id", text: "text", position: "position", color: "color" }, outputs: { textChange: "textChange" }, ngImport: i0, template: "<svg:g [attr.id]=\"id\">\n    <g rectangleG\n       [position]=\"position\"\n       [color]=\"color\">\n    </g>\n    <!-- class name -->\n    <g text-area-svg\n       [(text)]=\"text\"\n       [x]=\"position.x\"\n       [y]=\"position.y\"\n       [w]=\"position.w\"\n       [h]=\"position.h\">\n    </g>\n</svg:g>", styles: [""], dependencies: [{ kind: "component", type: TextAreaSvgComponent, selector: "[text-area-svg]", inputs: ["text", "x", "y", "w", "h", "singleEdit"], outputs: ["textChange"] }, { kind: "component", type: RectangleComponent, selector: "[rectangleG]", inputs: ["position", "color"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RectangleWithTextComponent, decorators: [{
+            type: Component,
+            args: [{ selector: '[rectangle-with-text]', imports: [
+                        TextAreaSvgComponent,
+                        RectangleComponent
+                    ], template: "<svg:g [attr.id]=\"id\">\n    <g rectangleG\n       [position]=\"position\"\n       [color]=\"color\">\n    </g>\n    <!-- class name -->\n    <g text-area-svg\n       [(text)]=\"text\"\n       [x]=\"position.x\"\n       [y]=\"position.y\"\n       [w]=\"position.w\"\n       [h]=\"position.h\">\n    </g>\n</svg:g>" }]
+        }], propDecorators: { id: [{
+                type: Input
+            }], text: [{
+                type: Input
+            }], textChange: [{
+                type: Output
+            }], position: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }] } });
+
+/*
+ * Public API Surface of arrows
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ArrowBetweenBoxesComponent, ArrowBetweenElemsComponent, ArrowBetweenPointsComponent, ArrowStyleConfigurationService, DraggableComponent, Dragger, PathLayouter, PositionHelper, RectangleComponent, RectangleWithTextComponent, SVGAccessService, TextAreaSvgComponent, TextDistributor };
+//# sourceMappingURL=ngx-svg-graphics.mjs.map