ngx-svg-graphics 2.0.0 → 2.1.0

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/svg-graphics",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -1,14 +1,8 @@
 {
   "name": "ngx-svg-graphics",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Small svg library to link components or svg elements with arrows and allow to drag components.",
-  "keywords": [
-    "Drag",
-    "Arrows",
-    "SVG",
-    "Angular",
-    "EMF"
-  ],
+  "keywords": ["Drag","Arrows", "SVG", "Angular", "EMF"],
   "author": {
     "name": "Susanne Göbel",
     "email": "goebel@uni-koblenz.de"
@@ -25,16 +19,5 @@
   "dependencies": {
     "tslib": "^2.3.0"
   },
-  "sideEffects": false,
-  "module": "fesm2022/ngx-svg-graphics.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "default": "./fesm2022/ngx-svg-graphics.mjs"
-    }
-  }
-}
+  "sideEffects": false
+}

package/src/lib/components/arrows/arrow-between-boxes/arrow-between-boxes.component.spec.ts

@@ -0,0 +1,32 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {ArrowBetweenBoxesComponent} from './arrow-between-boxes.component';
+import {NO_ERRORS_SCHEMA} from "@angular/core";
+import {BoundingBox} from "../../../models/bounding-box";
+
+describe('ArrowBetweenBoxesComponent', () => {
+  let component: ArrowBetweenBoxesComponent;
+  let fixture: ComponentFixture<ArrowBetweenBoxesComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+    imports: [ArrowBetweenBoxesComponent],
+    schemas: [NO_ERRORS_SCHEMA],
+})
+    .compileComponents();
+
+    let start: BoundingBox = {x: 50, y: -20, w: 200, h: 80}
+    let end: BoundingBox = {x: 80, y: 20, w: 100, h: 200}
+
+    fixture = TestBed.createComponent(ArrowBetweenBoxesComponent);
+    component = fixture.componentInstance;
+    component.start = start
+    component.end = end
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+});

package/src/lib/components/arrows/arrow-between-boxes/arrow-between-boxes.component.svg

@@ -0,0 +1,12 @@
+<svg:g>
+  <g arrow-between-points
+     [startX]="x1"
+     [startY]="y1"
+     [endX]="x2"
+     [endY]="y2"
+     [text]="text"
+     [arrowType]="arrowType"
+     [style]="style"
+  >
+  </g>
+</svg:g>

package/src/lib/components/arrows/arrow-between-boxes/arrow-between-boxes.component.ts

@@ -0,0 +1,60 @@
+import { AfterViewInit, ChangeDetectorRef, Component, Input, OnChanges,} from '@angular/core';
+import { Point } from "@angular/cdk/drag-drop";
+import {v4 as uuidv4} from "uuid";
+import {BoundingBox} from "../../../models/bounding-box";
+import {PathLayouter} from "../../../utils/path-layouter";
+import {ArrowBetweenPointsComponent} from "../arrow-between-points/arrow-between-points.component";
+
+@Component({
+    selector: '[arrow-between-boxes]',
+    templateUrl: './arrow-between-boxes.component.svg',
+    styleUrl: './arrow-between-boxes.component.css',
+    imports: [ArrowBetweenPointsComponent]
+})
+export class ArrowBetweenBoxesComponent implements OnChanges, AfterViewInit {
+  @Input() start!: BoundingBox;
+  @Input() end!: BoundingBox;
+  @Input() arrowType?: string;
+  @Input() text?: string;
+  @Input() style?: string;
+
+
+  x1: number = 0;
+  y1: number = 0;
+  x2: number = 5;
+  y2: number = 5;
+
+  id = uuidv4();
+
+  positioned= false;
+
+  constructor(
+    private cdr: ChangeDetectorRef,
+    ) {}
+
+  ngAfterViewInit() {
+    this.computePositions()
+    this.positioned = true;
+    this.cdr.detectChanges();
+  }
+
+  ngOnChanges() {
+    if(this.positioned) {
+      this.computePositions()
+    }
+  }
+
+
+  private computePositions() {
+    let res = PathLayouter.bestPoints(this.start, this.end);
+    this.applyBestPoints(res)
+  }
+
+  private applyBestPoints(res: Point[]) {
+    this.x1 = res[0].x;
+    this.y1 = res[0].y;
+    this.x2 = res[1].x;
+    this.y2 = res[1].y;
+  }
+
+}

package/src/lib/components/arrows/arrow-between-elems/arrow-between-elems.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ArrowBetweenElemsComponent } from './arrow-between-elems.component';
+
+describe('ArrowBetweenElemsComponent', () => {
+  let component: ArrowBetweenElemsComponent;
+  let fixture: ComponentFixture<ArrowBetweenElemsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+    imports: [ArrowBetweenElemsComponent]
+})
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ArrowBetweenElemsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/arrows/arrow-between-elems/arrow-between-elems.component.svg

@@ -0,0 +1,9 @@
+<svg:g #arrow>
+  <g arrow-between-boxes *ngIf="start && end"
+       [start]="start"
+       [end]="end"
+       [arrowType]="arrowType"
+       [text]="text"
+       [style]="style">
+  </g>
+></svg:g>

package/src/lib/components/arrows/arrow-between-elems/arrow-between-elems.component.ts

@@ -0,0 +1,96 @@
+import {
+  AfterViewInit,
+  ChangeDetectorRef,
+  Component, ElementRef,
+  Input, OnChanges, OnDestroy,
+  OnInit, SimpleChanges,
+  ViewChild
+} from '@angular/core';
+import {Observable, Subscription} from "rxjs";
+import { NgIf } from '@angular/common';
+import {BoundingBox} from "../../../models/bounding-box";
+import {ArrowBetweenBoxesComponent} from "../arrow-between-boxes/arrow-between-boxes.component";
+import {SVGAccessService} from "../../../services/svg-access.service";
+
+@Component({
+    selector: '[arrowElems]',
+    templateUrl: './arrow-between-elems.component.svg',
+    styleUrl: './arrow-between-elems.component.css',
+    imports: [NgIf, ArrowBetweenBoxesComponent]
+})
+export class ArrowBetweenElemsComponent implements OnInit, AfterViewInit, OnChanges, OnDestroy {
+
+  @Input() startGID!: string;
+  @Input() startSuffix!: string;
+  @Input() endGID!: string;
+  @Input() endSuffix!: string;
+  @Input() arrowType?: string;
+
+  @Input() breaks: BoundingBox[] = [];
+  @Input() text?: string;
+  @Input() style?: string; //todo move into ArrowStyleConfig?
+
+  startId!: string;
+  endId!: string;
+
+  start?: BoundingBox;
+  end?: BoundingBox;
+
+  positioned= false;
+  @ViewChild('arrow') node!: ElementRef<SVGGraphicsElement>;
+
+  changeNotifier: Observable<string>;
+  changeSubscription: Subscription;
+
+  //idea: compute the two input positions as relative to the current elem
+  constructor(
+    private svgAccessService: SVGAccessService,
+    private cdr: ChangeDetectorRef) {
+    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(_: SimpleChanges) {
+    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()
+  }
+
+  private computePositionsByIds() {
+    if (this.node?.nativeElement){
+      let rel = this.node.nativeElement as SVGGraphicsElement
+      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();
+  }
+
+}

package/src/lib/components/arrows/arrow-between-points/arrow-between-points.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ArrowBetweenPointsComponent } from './arrow-between-points.component';
+
+describe('ArrowBetweenPointsComponent', () => {
+  let component: ArrowBetweenPointsComponent;
+  let fixture: ComponentFixture<ArrowBetweenPointsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ArrowBetweenPointsComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ArrowBetweenPointsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/arrows/arrow-between-points/arrow-between-points.component.svg

@@ -0,0 +1,15 @@
+<svg:g>
+    <path [attr.id]="id+'-path'"
+          [attr.d]="'M '+startX+','+startY+' L '+endX+','+endY"
+          [attr.stroke]="arrowStyleConfiguration.color"
+          [attr.stroke-dasharray]="arrowStyleConfiguration.dashed"
+          [attr.marker-start]='"url(#"+arrowStyleConfiguration.startPointer+")"'
+          [attr.marker-end]='"url(#"+arrowStyleConfiguration.endPointer+")"'
+          style="{{style}}">
+    </path>
+    <text *ngIf="text">
+        <textPath [attr.href]="'#'+id+'-path'">
+            {{text}}
+        </textPath>
+    </text>
+</svg:g>

package/src/lib/components/arrows/arrow-between-points/arrow-between-points.component.ts

@@ -0,0 +1,39 @@
+import {Component, Input, OnChanges} from '@angular/core';
+import {NgIf} from "@angular/common";
+import {ArrowStyleConfigurationService} from "../../../services/arrow-style-configuration.service";
+import {ArrowStyleConfiguration} from "../../../models/arrow-style-configuration";
+import {v4 as uuidv4} from "uuid";
+
+@Component({
+  selector: '[arrow-between-points]',
+  imports: [
+    NgIf
+  ],
+  templateUrl: './arrow-between-points.component.svg',
+  styleUrl: './arrow-between-points.component.css'
+})
+export class ArrowBetweenPointsComponent implements OnChanges {
+
+  @Input() startX!: number;
+  @Input() startY!: number;
+  @Input() endX!: number;
+  @Input() endY!: number;
+  @Input() text?: string;
+  @Input() style?: string;
+
+  @Input() arrowType?: string;
+
+  arrowStyleConfiguration: ArrowStyleConfiguration;
+  id = uuidv4();
+
+  constructor(
+      private arrowStyleConfigService: ArrowStyleConfigurationService,) {
+
+    this.arrowStyleConfiguration = this.arrowStyleConfigService.styleArrow()
+  }
+
+  ngOnChanges() {
+    this.arrowStyleConfiguration = this.arrowStyleConfigService.styleArrow(this.arrowType)
+  }
+
+}

package/src/lib/components/draggable/draggable.component.spec.ts

@@ -0,0 +1,33 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DraggableComponent } from './draggable.component';
+import {Draggable} from "../../models/positionable";
+import {SVGAccessService} from "../../services/svg-access.service";
+
+describe('DraggableComponent', () => {
+  let example = {$gId: "id", position: { x: 1, y: 2, w: 2, h: 1 }};
+  let component: DraggableComponent<Draggable>;
+  let fixture: ComponentFixture<DraggableComponent<Draggable>>;
+
+  class DraggableTestComponent<T extends Draggable> extends DraggableComponent<T> {
+    constructor(svgAccessService: SVGAccessService) {
+      super(svgAccessService);
+    }
+  }
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DraggableComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DraggableTestComponent<Draggable>);
+    component = fixture.componentInstance;
+    component.elem = example;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/draggable/draggable.component.svg

@@ -0,0 +1,8 @@
+<svg:g>
+  <g [attr.id]="elem.$gId"
+     (mousedown)="startDrag($event)"
+     (mousemove)="drag($event)"
+     (mouseup)="endDrag($event)"
+     (click)="clickElem($event)">
+  </g>
+</svg:g>

package/src/lib/components/draggable/draggable.component.ts

@@ -0,0 +1,49 @@
+import {AfterViewInit, Component, EventEmitter, Output} from '@angular/core';
+import {SVGAccessService} from '../../services/svg-access.service';
+import { Draggable } from '../../models/positionable';
+import {Dragger} from "../../models/dragger";
+
+@Component({
+  imports: [],
+  selector: '[draggable]',
+  templateUrl: './draggable.component.svg',
+  styleUrl: './draggable.component.css'
+})
+export abstract class DraggableComponent<T extends Draggable> implements AfterViewInit {
+
+  @Output() chooseElem = new EventEmitter<T>();
+  //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!: T;
+  elemDragger!: Dragger<T>;
+
+  protected constructor(
+    protected svgAccessService: SVGAccessService
+  ) {}
+
+
+  ngAfterViewInit() {
+    this.svgAccessService.notifyPositionChange(this.elem.$gId)
+  }
+
+  startDrag(event: MouseEvent) {
+    this.elemDragger.startDrag(event);
+  }
+
+  drag(event: MouseEvent) {
+    if (this.elemDragger.drag(event)) {
+      this.svgAccessService.notifyPositionChange(this.elem.$gId)
+    }
+  }
+
+  endDrag(event: MouseEvent) {
+    this.elemDragger.endDrag(event);
+  }
+
+  clickElem(event: MouseEvent) {
+    if (this.elemDragger.clickElem(event)) {
+      this.chooseElem.emit(this.elem);
+    }
+  }
+
+}

package/src/lib/components/rectangle/rectangle.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RectangleComponent } from './rectangle.component';
+
+describe('RectangleComponent', () => {
+  let component: RectangleComponent;
+  let fixture: ComponentFixture<RectangleComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [RectangleComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(RectangleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/rectangle/rectangle.component.svg

@@ -0,0 +1,3 @@
+<svg:g>
+    <rect [attr.x]="position.x" [attr.y]="position.y" [attr.width]="position.w" [attr.height]="position.h" [attr.fill]="color"></rect>
+</svg:g>

package/src/lib/components/rectangle/rectangle.component.ts

@@ -0,0 +1,14 @@
+import {Component, Input} from '@angular/core';
+import {BoundingBox} from "../../models/bounding-box";
+
+@Component({
+  selector: '[rectangleG]',
+  imports: [],
+  templateUrl: './rectangle.component.svg',
+  styleUrl: './rectangle.component.css'
+})
+export class RectangleComponent {
+  @Input() position!: BoundingBox
+  @Input() color: string = '#ccffff';
+
+}

package/src/lib/components/text-area-svg/text-area-svg.component.spec.ts

@@ -0,0 +1,59 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TextAreaSvgComponent } from './text-area-svg.component';
+
+describe('TextAreaSvgComponent', () => {
+  let component: TextAreaSvgComponent;
+  let fixture: ComponentFixture<TextAreaSvgComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TextAreaSvgComponent]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TextAreaSvgComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  function initializeDistributedText() {
+    component.x = 20
+    component.y = 40
+    component.h = 50
+    component.w = 200
+
+  }
+
+  function verifyDistributedText(text: string, distributedText: string[]) {
+    component.text = text;
+    component.distributeText()
+    expect(component.distributedText).toEqual(distributedText)
+  }
+
+  it('Should set a two line distributed text', () => {
+    initializeDistributedText();
+
+    verifyDistributedText(
+      'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam',
+      ['Lorem ipsum dolor sit', 'amet, consetetur ...']
+    )
+  })
+
+  it('Should set a short distributed text after setting a longer one', () => {
+    initializeDistributedText();
+
+    verifyDistributedText(
+      'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam',
+      ['Lorem ipsum dolor sit', 'amet, consetetur ...']
+    ) //first set two lines, next set a shorter one
+    verifyDistributedText(
+      'Short',
+      ['Short']
+    )
+  })
+
+});

package/src/lib/components/text-area-svg/text-area-svg.component.svg

@@ -0,0 +1,6 @@
+<svg:text [attr.x]="x" [attr.y]="y" [attr.width]="w" [attr.height]="h" dy="0" [attr.style]="" (click)="handleClick()">
+  <tspan dy="1.2em" [attr.x]="x" *ngFor="let line of distributedText">{{line}}</tspan>
+</svg:text>
+<svg:foreignObject  *ngIf="isActive" [attr.x]="x" [attr.y]="y" [attr.width]="w" [attr.height]="h">
+  <input id="text-area" type="text" [(ngModel)]="this.text" (focusout)="leaveTextInput()"/>
+</svg:foreignObject>

package/src/lib/components/text-area-svg/text-area-svg.component.ts

@@ -0,0 +1,57 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  Output,
+} from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { NgFor, NgIf } from '@angular/common';
+import {TextDistributor} from "../../utils/text-distributor";
+
+@Component({
+    selector: '[text-area-svg]',
+    templateUrl: './text-area-svg.component.svg',
+    styleUrl: './text-area-svg.component.css',
+    imports: [NgFor, NgIf, FormsModule]
+})
+export class TextAreaSvgComponent implements OnChanges {
+  /*
+  a fixed size svg. If the text exceeds the possible size, we will do a ... for now
+   */
+
+  @Input() text!: string
+  @Input() x!: number
+  @Input() y!: number
+  @Input() w!: number
+  @Input() h!: number
+  @Input() singleEdit: boolean = false
+  @Output() textChange = new EventEmitter<string>();
+  //only with singleEdit since that opens an overlay where one can change the text in place
+
+  distributedText: string[] = []
+  isActive: boolean = 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
+    )
+  }
+
+}

package/src/lib/models/arrow-style-configuration.ts

@@ -0,0 +1,8 @@
+export interface ArrowStyleConfiguration {
+  color: string;
+  dashed: number[];
+  //style?: string
+
+  startPointer?: string;
+  endPointer?: string;
+}

package/src/lib/models/bounding-box.ts

@@ -0,0 +1,7 @@
+export interface BoundingBox {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+
+}

package/src/lib/models/dragger.spec.ts

@@ -0,0 +1,9 @@
+import { Dragger } from './dragger';
+
+describe('Dragger', () => {
+  it('should create an instance', () => {
+    let example = {gId: "id", position: { x: 1, y: 2, w: 2, h: 1 }};
+
+    expect(new Dragger(example)).toBeTruthy();
+  });
+});