ngx-svg-graphics 1.0.0

package/README.md

@@ -0,0 +1,63 @@
+# Arrows
+
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.1.0.
+
+## Code scaffolding
+
+Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+
+```bash
+ng generate component component-name
+```
+
+For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+
+```bash
+ng generate --help
+```
+
+## Building
+
+To build the library, run:
+
+```bash
+ng build arrows
+```
+
+This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
+
+### Publishing the Library
+
+Once the project is built, you can publish your library by following these steps:
+
+1. Navigate to the `dist` directory:
+   ```bash
+   cd dist/arrows
+   ```
+
+2. Run the `npm publish` command to publish your library to the npm registry:
+   ```bash
+   npm publish
+   ```
+
+## Running unit tests
+
+To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+
+```bash
+ng test
+```
+
+## Running end-to-end tests
+
+For end-to-end (e2e) testing, run:
+
+```bash
+ng e2e
+```
+
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+
+## Additional Resources
+
+For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

package/ng-package.json

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

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "ngx-svg-graphics",
+  "version": "1.0.0",
+  "description": "Small svg library to link components or svg elements with arrows and allow to drag components.",
+  "keywords": ["Drag","Arrows", "SVG", "Angular", "EMF"],
+  "author": {
+    "name": "Susanne Göbel",
+    "email": "goebel@uni-koblenz.de"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/softlang/EMFular/tree/main/projects/arrows"
+  },
+  "peerDependencies": {
+    "@angular/common": "^19.2.4",
+    "@angular/core": "^19.2.4",
+    "@types/uuid": "^10.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "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,61 @@
+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',
+    standalone: true,
+  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,97 @@
+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',
+    standalone: true,
+    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,9 @@
+<svg:g>
+  <g [attr.id]="elem.gId"
+     (mousedown)="startDrag($event)"
+     (mousemove)="drag($event)"
+     (mouseup)="endDrag($event)"
+     (mouseleave)="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/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();
+  });
+});

package/src/lib/models/dragger.ts

@@ -0,0 +1,57 @@
+import {Positionable} from './positionable';
+
+export class Dragger<T extends Positionable> {
+  elem: T;
+
+  dragActive = false;
+  wasReallyDragged = false;
+  dragStartX: number = 0;
+  dragStartY: number = 0;
+
+  constructor(private element: T) {
+    this.elem = element;
+  }
+
+  startDrag(event: MouseEvent) {
+    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: MouseEvent): boolean {
+    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: MouseEvent) {
+    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: MouseEvent): boolean {
+    if (this.wasReallyDragged) {
+      this.wasReallyDragged = false;
+      return false;
+    } else {
+      event.preventDefault();
+      return true;
+    }
+  }
+
+
+}

package/src/lib/models/identifiable.ts

@@ -0,0 +1,3 @@
+export interface Identifiable {
+  gId: string;
+}

package/src/lib/models/positionable.ts

@@ -0,0 +1,8 @@
+import {BoundingBox} from './bounding-box';
+import {Identifiable} from './identifiable';
+
+export interface Positionable {
+  position: BoundingBox
+}
+
+export type Draggable = Positionable & Identifiable;

package/src/lib/services/arrow-style-configuration.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ArrowStyleConfigurationService } from './arrow-style-configuration.service';
+
+describe('ArrowStyleConfigurationService', () => {
+  let service: ArrowStyleConfigurationService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ArrowStyleConfigurationService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

package/src/lib/services/arrow-style-configuration.service.ts

@@ -0,0 +1,25 @@
+import { Injectable } from '@angular/core';
+import {ArrowStyleConfiguration} from "../models/arrow-style-configuration";
+
+/*****
+ 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
+ ***/
+@Injectable({
+  providedIn: 'root'
+})
+export class ArrowStyleConfigurationService {
+
+  constructor() { }
+
+  styleArrow(arrowType?: string): ArrowStyleConfiguration {
+    return {
+      color: 'black',
+      dashed: [0]
+    };
+  }
+}

package/src/lib/services/svg-access.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { SVGAccessService } from './svg-access.service';
+
+describe('SVGAccessService', () => {
+  let service: SVGAccessService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(SVGAccessService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

package/src/lib/services/svg-access.service.ts

@@ -0,0 +1,37 @@
+import { Injectable } from '@angular/core';
+import {BehaviorSubject, Observable} from "rxjs";
+import {BoundingBox} from "../models/bounding-box";
+import {PositionHelper} from "../utils/position-helper";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SVGAccessService {
+
+  positionChange: BehaviorSubject<string> = new BehaviorSubject<string>('');
+
+  constructor() { }
+
+  notifyPositionChange(id: string) {
+    this.positionChange.next(id);
+  }
+
+  listenToPositionChange(): Observable<string> {
+    return this.positionChange.asObservable()
+  }
+
+  getElemById(id: string): SVGGraphicsElement | undefined {
+    let elem = document.getElementById(id)
+    return elem as unknown as SVGGraphicsElement
+  }
+
+  getRelativePosition(id: string, node: SVGGraphicsElement): BoundingBox | undefined {
+    let elem = this.getElemById(id)
+    if (elem) {
+      let abs = PositionHelper.absolutePosition(elem)
+      PositionHelper.makeRelativeToElem(abs, node)
+      return abs;
+    }
+    return undefined
+  }
+}

package/src/lib/utils/path-layouter.spec.ts

@@ -0,0 +1,7 @@
+import { PathLayouter } from './path-layouter';
+
+describe('PathLayouter', () => {
+  it('should create an instance', () => {
+    expect(new PathLayouter()).toBeTruthy();
+  });
+});

package/src/lib/utils/path-layouter.ts

@@ -0,0 +1,41 @@
+import {BoundingBox} from "../models/bounding-box";
+import {Point} from "@angular/cdk/drag-drop";
+
+export class PathLayouter {
+
+  static bestPoints(p1: BoundingBox, p2: BoundingBox) {
+    //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: Point = {x: xPoints[0], y: yPoints[0]}
+    let result2: Point = {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: number, w1: number, x2: number, w2: number): number[] {
+    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: number, w1: number, x2: number, w2: number): number[] {
+    //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()
+    }
+  }
+
+}

package/src/lib/utils/position-helper.spec.ts

@@ -0,0 +1,7 @@
+import { PositionHelper } from './position-helper';
+
+describe('PositionHelper', () => {
+  it('should create an instance', () => {
+    expect(new PositionHelper()).toBeTruthy();
+  });
+});

package/src/lib/utils/position-helper.ts

@@ -0,0 +1,32 @@
+import {Point} from "@angular/cdk/drag-drop";
+import {BoundingBox} from "../models/bounding-box";
+
+export class PositionHelper {
+
+  static absolutePosition(elem: SVGGraphicsElement): BoundingBox {
+    let relativePosition: DOMRect = elem.getBBox();
+    let translationMatrix: DOMMatrix = 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: Point, elem: SVGGraphicsElement): void {
+    this.matrixTransform(p, elem.getCTM()!.inverse())
+  }
+
+  static matrixTransform(p: Point, translationMatrix: DOMMatrix): void {
+    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: number = 0, y: number = 0, width: number = 5, height: number = 5): BoundingBox {
+    return {x: x, y: y, w: width, h: height};
+  }
+}

package/src/public-api.ts

@@ -0,0 +1,18 @@
+/*
+ * Public API Surface of arrows
+ */
+
+export * from './lib/models/dragger'
+export * from './lib/components/draggable/draggable.component';
+export * from './lib/components/arrows/arrow-between-elems/arrow-between-elems.component';
+export * from './lib/components/arrows/arrow-between-boxes/arrow-between-boxes.component';
+export * from './lib/components/arrows/arrow-between-points/arrow-between-points.component';
+export * from './lib/utils/position-helper';
+export * from './lib/services/arrow-style-configuration.service';
+export * from './lib/services/svg-access.service';
+
+export type {BoundingBox} from './lib/models/bounding-box';
+export type {ArrowStyleConfiguration} from './lib/models/arrow-style-configuration';
+export type {Identifiable} from './lib/models/identifiable'; //gId: string - soft connection to Referencable
+export type {Positionable, Draggable} from './lib/models/positionable';
+

package/tsconfig.lib.json

@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": [
+    "**/*.spec.ts"
+  ]
+}

package/tsconfig.lib.prod.json

@@ -0,0 +1,11 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/tsconfig.spec.json

@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}