ngx-svg-graphics 1.0.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -3
- package/fesm2022/ngx-svg-graphics.mjs +415 -0
- package/fesm2022/ngx-svg-graphics.mjs.map +1 -0
- package/index.d.ts +5 -0
- package/lib/components/arrows/arrow-between-boxes/arrow-between-boxes.component.d.ts +24 -0
- package/lib/components/arrows/arrow-between-elems/arrow-between-elems.component.d.ts +33 -0
- package/lib/components/arrows/arrow-between-points/arrow-between-points.component.d.ts +20 -0
- package/lib/components/draggable/draggable.component.d.ts +19 -0
- package/lib/models/arrow-style-configuration.d.ts +6 -0
- package/lib/models/bounding-box.d.ts +6 -0
- package/lib/models/dragger.d.ts +14 -0
- package/{src/lib/models/identifiable.ts → lib/models/identifiable.d.ts} +1 -1
- package/lib/models/positionable.d.ts +6 -0
- package/{src/lib/services/arrow-style-configuration.service.ts → lib/services/arrow-style-configuration.service.d.ts} +7 -16
- package/lib/services/svg-access.service.d.ts +13 -0
- package/lib/utils/path-layouter.d.ts +7 -0
- package/lib/utils/position-helper.d.ts +8 -0
- package/package.json +21 -4
- package/{src/public-api.ts → public-api.d.ts} +5 -11
- package/ng-package.json +0 -7
- package/src/lib/components/arrows/arrow-between-boxes/arrow-between-boxes.component.css +0 -0
- package/src/lib/components/arrows/arrow-between-boxes/arrow-between-boxes.component.spec.ts +0 -32
- package/src/lib/components/arrows/arrow-between-boxes/arrow-between-boxes.component.svg +0 -12
- package/src/lib/components/arrows/arrow-between-boxes/arrow-between-boxes.component.ts +0 -61
- package/src/lib/components/arrows/arrow-between-elems/arrow-between-elems.component.css +0 -0
- package/src/lib/components/arrows/arrow-between-elems/arrow-between-elems.component.spec.ts +0 -23
- package/src/lib/components/arrows/arrow-between-elems/arrow-between-elems.component.svg +0 -9
- package/src/lib/components/arrows/arrow-between-elems/arrow-between-elems.component.ts +0 -97
- package/src/lib/components/arrows/arrow-between-points/arrow-between-points.component.css +0 -0
- package/src/lib/components/arrows/arrow-between-points/arrow-between-points.component.spec.ts +0 -23
- package/src/lib/components/arrows/arrow-between-points/arrow-between-points.component.svg +0 -15
- package/src/lib/components/arrows/arrow-between-points/arrow-between-points.component.ts +0 -39
- package/src/lib/components/draggable/draggable.component.css +0 -0
- package/src/lib/components/draggable/draggable.component.spec.ts +0 -33
- package/src/lib/components/draggable/draggable.component.svg +0 -9
- package/src/lib/components/draggable/draggable.component.ts +0 -49
- package/src/lib/models/arrow-style-configuration.ts +0 -8
- package/src/lib/models/bounding-box.ts +0 -7
- package/src/lib/models/dragger.spec.ts +0 -9
- package/src/lib/models/dragger.ts +0 -57
- package/src/lib/models/positionable.ts +0 -8
- package/src/lib/services/arrow-style-configuration.service.spec.ts +0 -16
- package/src/lib/services/svg-access.service.spec.ts +0 -16
- package/src/lib/services/svg-access.service.ts +0 -37
- package/src/lib/utils/path-layouter.spec.ts +0 -7
- package/src/lib/utils/path-layouter.ts +0 -41
- package/src/lib/utils/position-helper.spec.ts +0 -7
- package/src/lib/utils/position-helper.ts +0 -32
- package/tsconfig.lib.json +0 -15
- package/tsconfig.lib.prod.json +0 -11
- package/tsconfig.spec.json +0 -15
package/README.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
#
|
|
1
|
+
# SVG-Graphics
|
|
2
2
|
|
|
3
3
|
This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.1.0.
|
|
4
4
|
|
|
@@ -21,7 +21,7 @@ ng generate --help
|
|
|
21
21
|
To build the library, run:
|
|
22
22
|
|
|
23
23
|
```bash
|
|
24
|
-
ng build
|
|
24
|
+
ng build svg-graphics
|
|
25
25
|
```
|
|
26
26
|
|
|
27
27
|
This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
|
|
@@ -32,7 +32,7 @@ Once the project is built, you can publish your library by following these steps
|
|
|
32
32
|
|
|
33
33
|
1. Navigate to the `dist` directory:
|
|
34
34
|
```bash
|
|
35
|
-
cd dist/
|
|
35
|
+
cd dist/svg-graphics
|
|
36
36
|
```
|
|
37
37
|
|
|
38
38
|
2. Run the `npm publish` command to publish your library to the npm registry:
|
|
@@ -0,0 +1,415 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { Injectable, EventEmitter, Output, Component, Input, ViewChild } from '@angular/core';
|
|
3
|
+
import { BehaviorSubject } from 'rxjs';
|
|
4
|
+
import { NgIf } from '@angular/common';
|
|
5
|
+
import { v4 } from 'uuid';
|
|
6
|
+
|
|
7
|
+
class Dragger {
|
|
8
|
+
element;
|
|
9
|
+
elem;
|
|
10
|
+
dragActive = false;
|
|
11
|
+
wasReallyDragged = false;
|
|
12
|
+
dragStartX = 0;
|
|
13
|
+
dragStartY = 0;
|
|
14
|
+
constructor(element) {
|
|
15
|
+
this.element = element;
|
|
16
|
+
this.elem = element;
|
|
17
|
+
}
|
|
18
|
+
startDrag(event) {
|
|
19
|
+
console.log('startDrag');
|
|
20
|
+
this.dragActive = true;
|
|
21
|
+
this.dragStartX = event.clientX;
|
|
22
|
+
this.dragStartY = event.clientY;
|
|
23
|
+
}
|
|
24
|
+
// returns true in the case of a real drag event, false otherwise
|
|
25
|
+
drag(event) {
|
|
26
|
+
if (this.dragActive) {
|
|
27
|
+
this.wasReallyDragged = true;
|
|
28
|
+
event.preventDefault();
|
|
29
|
+
const dragX = event.clientX;
|
|
30
|
+
this.elem.position.x += (dragX - this.dragStartX);
|
|
31
|
+
this.dragStartX = dragX;
|
|
32
|
+
const dragY = event.clientY;
|
|
33
|
+
this.elem.position.y += (dragY - this.dragStartY);
|
|
34
|
+
this.dragStartY = dragY;
|
|
35
|
+
return true;
|
|
36
|
+
}
|
|
37
|
+
return false;
|
|
38
|
+
}
|
|
39
|
+
endDrag(event) {
|
|
40
|
+
console.log('endDrag');
|
|
41
|
+
this.dragActive = false;
|
|
42
|
+
// todo was working for click vs drag, not now setTimeout(() => {this.dragActive = false;}, 50);
|
|
43
|
+
event.preventDefault();
|
|
44
|
+
}
|
|
45
|
+
//returns true if the click should be treated as click, false if it was from drag
|
|
46
|
+
clickElem(event) {
|
|
47
|
+
if (this.wasReallyDragged) {
|
|
48
|
+
this.wasReallyDragged = false;
|
|
49
|
+
return false;
|
|
50
|
+
}
|
|
51
|
+
else {
|
|
52
|
+
event.preventDefault();
|
|
53
|
+
return true;
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
class PositionHelper {
|
|
59
|
+
static absolutePosition(elem) {
|
|
60
|
+
let relativePosition = elem.getBBox();
|
|
61
|
+
let translationMatrix = elem.getCTM();
|
|
62
|
+
let x = relativePosition.x;
|
|
63
|
+
let y = relativePosition.y;
|
|
64
|
+
let x_abs = translationMatrix.a * x + translationMatrix.c * y + translationMatrix.e;
|
|
65
|
+
let y_abs = translationMatrix.b * x + translationMatrix.d * y + translationMatrix.f;
|
|
66
|
+
return { x: x_abs, y: y_abs, w: relativePosition.width, h: relativePosition.height };
|
|
67
|
+
}
|
|
68
|
+
static makeRelativeToElem(p, elem) {
|
|
69
|
+
this.matrixTransform(p, elem.getCTM().inverse());
|
|
70
|
+
}
|
|
71
|
+
static matrixTransform(p, translationMatrix) {
|
|
72
|
+
let x = p.x;
|
|
73
|
+
let y = p.y;
|
|
74
|
+
let x_trans = translationMatrix.a * x + translationMatrix.c * y + translationMatrix.e;
|
|
75
|
+
let y_trans = translationMatrix.b * x + translationMatrix.d * y + translationMatrix.f;
|
|
76
|
+
p.x = x_trans;
|
|
77
|
+
p.y = y_trans;
|
|
78
|
+
}
|
|
79
|
+
static newBoundingBox(x = 0, y = 0, width = 5, height = 5) {
|
|
80
|
+
return { x: x, y: y, w: width, h: height };
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
class SVGAccessService {
|
|
85
|
+
positionChange = new BehaviorSubject('');
|
|
86
|
+
constructor() { }
|
|
87
|
+
notifyPositionChange(id) {
|
|
88
|
+
this.positionChange.next(id);
|
|
89
|
+
}
|
|
90
|
+
listenToPositionChange() {
|
|
91
|
+
return this.positionChange.asObservable();
|
|
92
|
+
}
|
|
93
|
+
getElemById(id) {
|
|
94
|
+
let elem = document.getElementById(id);
|
|
95
|
+
return elem;
|
|
96
|
+
}
|
|
97
|
+
getRelativePosition(id, node) {
|
|
98
|
+
let elem = this.getElemById(id);
|
|
99
|
+
if (elem) {
|
|
100
|
+
let abs = PositionHelper.absolutePosition(elem);
|
|
101
|
+
PositionHelper.makeRelativeToElem(abs, node);
|
|
102
|
+
return abs;
|
|
103
|
+
}
|
|
104
|
+
return undefined;
|
|
105
|
+
}
|
|
106
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: SVGAccessService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
107
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: SVGAccessService, providedIn: 'root' });
|
|
108
|
+
}
|
|
109
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: SVGAccessService, decorators: [{
|
|
110
|
+
type: Injectable,
|
|
111
|
+
args: [{
|
|
112
|
+
providedIn: 'root'
|
|
113
|
+
}]
|
|
114
|
+
}], ctorParameters: () => [] });
|
|
115
|
+
|
|
116
|
+
class DraggableComponent {
|
|
117
|
+
svgAccessService;
|
|
118
|
+
chooseElem = new EventEmitter();
|
|
119
|
+
//the caller must initialize both required elements (elem and elementDragger) either in the constructor
|
|
120
|
+
// (or if they are inputs) in the ngOnInit life cycle hook
|
|
121
|
+
elem;
|
|
122
|
+
elemDragger;
|
|
123
|
+
constructor(svgAccessService) {
|
|
124
|
+
this.svgAccessService = svgAccessService;
|
|
125
|
+
}
|
|
126
|
+
ngAfterViewInit() {
|
|
127
|
+
this.svgAccessService.notifyPositionChange(this.elem.gId);
|
|
128
|
+
}
|
|
129
|
+
startDrag(event) {
|
|
130
|
+
this.elemDragger.startDrag(event);
|
|
131
|
+
}
|
|
132
|
+
drag(event) {
|
|
133
|
+
if (this.elemDragger.drag(event)) {
|
|
134
|
+
this.svgAccessService.notifyPositionChange(this.elem.gId);
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
endDrag(event) {
|
|
138
|
+
this.elemDragger.endDrag(event);
|
|
139
|
+
}
|
|
140
|
+
clickElem(event) {
|
|
141
|
+
if (this.elemDragger.clickElem(event)) {
|
|
142
|
+
this.chooseElem.emit(this.elem);
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DraggableComponent, deps: [{ token: SVGAccessService }], target: i0.ɵɵFactoryTarget.Component });
|
|
146
|
+
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: [""] });
|
|
147
|
+
}
|
|
148
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DraggableComponent, decorators: [{
|
|
149
|
+
type: Component,
|
|
150
|
+
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" }]
|
|
151
|
+
}], ctorParameters: () => [{ type: SVGAccessService }], propDecorators: { chooseElem: [{
|
|
152
|
+
type: Output
|
|
153
|
+
}] } });
|
|
154
|
+
|
|
155
|
+
class PathLayouter {
|
|
156
|
+
static bestPoints(p1, p2) {
|
|
157
|
+
//assumption is that both boxes do not intersect
|
|
158
|
+
//since we only deal with bounding boxes, all relevant lines are parallel/orthogonal
|
|
159
|
+
let xPoints = this.getPointsInOneDimension(p1.x, p1.w, p2.x, p2.w);
|
|
160
|
+
let yPoints = this.getPointsInOneDimension(p1.y, p1.h, p2.y, p2.h);
|
|
161
|
+
let result1 = { x: xPoints[0], y: yPoints[0] };
|
|
162
|
+
let result2 = { x: xPoints[1], y: yPoints[1] };
|
|
163
|
+
return [result1, result2];
|
|
164
|
+
}
|
|
165
|
+
// assumes that x1 is smaller than x2
|
|
166
|
+
//works for width (careful with height, y axis is wrong way)
|
|
167
|
+
static determineOverlapX(x1, w1, x2, w2) {
|
|
168
|
+
let x1right = x1 + w1;
|
|
169
|
+
if (x1right >= x2) {
|
|
170
|
+
//find end of overlap
|
|
171
|
+
let x2right = x2 + w2;
|
|
172
|
+
let end = Math.min(x1right, x2right);
|
|
173
|
+
//overlap interval is [x2, end]
|
|
174
|
+
let middle = (x2 + end) / 2;
|
|
175
|
+
return [middle, middle];
|
|
176
|
+
}
|
|
177
|
+
else
|
|
178
|
+
return [x1right, x2];
|
|
179
|
+
}
|
|
180
|
+
static getPointsInOneDimension(x1, w1, x2, w2) {
|
|
181
|
+
//determine overlap (and then middle of it) or closest points in one dimension
|
|
182
|
+
if (x1 < x2) {
|
|
183
|
+
return this.determineOverlapX(x1, w1, x2, w2);
|
|
184
|
+
}
|
|
185
|
+
else {
|
|
186
|
+
return this.determineOverlapX(x2, w2, x1, w1).reverse();
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
/*****
|
|
192
|
+
default implementation
|
|
193
|
+
You can extend this base case with an own service implementation.
|
|
194
|
+
Make sure to configure DI to use your service instead of this one
|
|
195
|
+
In 20205, the way to do so is to declare it as provider in app.config.ts or app.component.ts
|
|
196
|
+
providers: [{ provide: ArrowStyleConfigurationService, useClass: YourServiceImplementation }],
|
|
197
|
+
See https://angular.dev/guide/di/dependency-injection-providers
|
|
198
|
+
***/
|
|
199
|
+
class ArrowStyleConfigurationService {
|
|
200
|
+
constructor() { }
|
|
201
|
+
styleArrow(arrowType) {
|
|
202
|
+
return {
|
|
203
|
+
color: 'black',
|
|
204
|
+
dashed: [0]
|
|
205
|
+
};
|
|
206
|
+
}
|
|
207
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ArrowStyleConfigurationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
208
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ArrowStyleConfigurationService, providedIn: 'root' });
|
|
209
|
+
}
|
|
210
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ArrowStyleConfigurationService, decorators: [{
|
|
211
|
+
type: Injectable,
|
|
212
|
+
args: [{
|
|
213
|
+
providedIn: 'root'
|
|
214
|
+
}]
|
|
215
|
+
}], ctorParameters: () => [] });
|
|
216
|
+
|
|
217
|
+
class ArrowBetweenPointsComponent {
|
|
218
|
+
arrowStyleConfigService;
|
|
219
|
+
startX;
|
|
220
|
+
startY;
|
|
221
|
+
endX;
|
|
222
|
+
endY;
|
|
223
|
+
text;
|
|
224
|
+
style;
|
|
225
|
+
arrowType;
|
|
226
|
+
arrowStyleConfiguration;
|
|
227
|
+
id = v4();
|
|
228
|
+
constructor(arrowStyleConfigService) {
|
|
229
|
+
this.arrowStyleConfigService = arrowStyleConfigService;
|
|
230
|
+
this.arrowStyleConfiguration = this.arrowStyleConfigService.styleArrow();
|
|
231
|
+
}
|
|
232
|
+
ngOnChanges() {
|
|
233
|
+
this.arrowStyleConfiguration = this.arrowStyleConfigService.styleArrow(this.arrowType);
|
|
234
|
+
}
|
|
235
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ArrowBetweenPointsComponent, deps: [{ token: ArrowStyleConfigurationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
236
|
+
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"] }] });
|
|
237
|
+
}
|
|
238
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ArrowBetweenPointsComponent, decorators: [{
|
|
239
|
+
type: Component,
|
|
240
|
+
args: [{ selector: '[arrow-between-points]', imports: [
|
|
241
|
+
NgIf
|
|
242
|
+
], 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>" }]
|
|
243
|
+
}], ctorParameters: () => [{ type: ArrowStyleConfigurationService }], propDecorators: { startX: [{
|
|
244
|
+
type: Input
|
|
245
|
+
}], startY: [{
|
|
246
|
+
type: Input
|
|
247
|
+
}], endX: [{
|
|
248
|
+
type: Input
|
|
249
|
+
}], endY: [{
|
|
250
|
+
type: Input
|
|
251
|
+
}], text: [{
|
|
252
|
+
type: Input
|
|
253
|
+
}], style: [{
|
|
254
|
+
type: Input
|
|
255
|
+
}], arrowType: [{
|
|
256
|
+
type: Input
|
|
257
|
+
}] } });
|
|
258
|
+
|
|
259
|
+
class ArrowBetweenBoxesComponent {
|
|
260
|
+
cdr;
|
|
261
|
+
start;
|
|
262
|
+
end;
|
|
263
|
+
arrowType;
|
|
264
|
+
text;
|
|
265
|
+
style;
|
|
266
|
+
x1 = 0;
|
|
267
|
+
y1 = 0;
|
|
268
|
+
x2 = 5;
|
|
269
|
+
y2 = 5;
|
|
270
|
+
id = v4();
|
|
271
|
+
positioned = false;
|
|
272
|
+
constructor(cdr) {
|
|
273
|
+
this.cdr = cdr;
|
|
274
|
+
}
|
|
275
|
+
ngAfterViewInit() {
|
|
276
|
+
this.computePositions();
|
|
277
|
+
this.positioned = true;
|
|
278
|
+
this.cdr.detectChanges();
|
|
279
|
+
}
|
|
280
|
+
ngOnChanges() {
|
|
281
|
+
if (this.positioned) {
|
|
282
|
+
this.computePositions();
|
|
283
|
+
}
|
|
284
|
+
}
|
|
285
|
+
computePositions() {
|
|
286
|
+
let res = PathLayouter.bestPoints(this.start, this.end);
|
|
287
|
+
this.applyBestPoints(res);
|
|
288
|
+
}
|
|
289
|
+
applyBestPoints(res) {
|
|
290
|
+
this.x1 = res[0].x;
|
|
291
|
+
this.y1 = res[0].y;
|
|
292
|
+
this.x2 = res[1].x;
|
|
293
|
+
this.y2 = res[1].y;
|
|
294
|
+
}
|
|
295
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ArrowBetweenBoxesComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
296
|
+
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"] }] });
|
|
297
|
+
}
|
|
298
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ArrowBetweenBoxesComponent, decorators: [{
|
|
299
|
+
type: Component,
|
|
300
|
+
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" }]
|
|
301
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { start: [{
|
|
302
|
+
type: Input
|
|
303
|
+
}], end: [{
|
|
304
|
+
type: Input
|
|
305
|
+
}], arrowType: [{
|
|
306
|
+
type: Input
|
|
307
|
+
}], text: [{
|
|
308
|
+
type: Input
|
|
309
|
+
}], style: [{
|
|
310
|
+
type: Input
|
|
311
|
+
}] } });
|
|
312
|
+
|
|
313
|
+
class ArrowBetweenElemsComponent {
|
|
314
|
+
svgAccessService;
|
|
315
|
+
cdr;
|
|
316
|
+
startGID;
|
|
317
|
+
startSuffix;
|
|
318
|
+
endGID;
|
|
319
|
+
endSuffix;
|
|
320
|
+
arrowType;
|
|
321
|
+
breaks = [];
|
|
322
|
+
text;
|
|
323
|
+
style; //todo move into ArrowStyleConfig?
|
|
324
|
+
startId;
|
|
325
|
+
endId;
|
|
326
|
+
start;
|
|
327
|
+
end;
|
|
328
|
+
positioned = false;
|
|
329
|
+
node;
|
|
330
|
+
changeNotifier;
|
|
331
|
+
changeSubscription;
|
|
332
|
+
//idea: compute the two input positions as relative to the current elem
|
|
333
|
+
constructor(svgAccessService, cdr) {
|
|
334
|
+
this.svgAccessService = svgAccessService;
|
|
335
|
+
this.cdr = cdr;
|
|
336
|
+
this.changeNotifier = this.svgAccessService.listenToPositionChange();
|
|
337
|
+
this.changeSubscription = this.changeNotifier.subscribe(nextString => {
|
|
338
|
+
if (nextString == this.startGID || nextString == this.endGID) {
|
|
339
|
+
setTimeout(() => {
|
|
340
|
+
this.computePositionsByIds();
|
|
341
|
+
this.cdr.detectChanges();
|
|
342
|
+
}, 0);
|
|
343
|
+
}
|
|
344
|
+
});
|
|
345
|
+
}
|
|
346
|
+
ngOnInit() {
|
|
347
|
+
this.startId = this.startGID + this.startSuffix;
|
|
348
|
+
this.endId = this.endGID + this.endSuffix;
|
|
349
|
+
}
|
|
350
|
+
ngOnChanges(_) {
|
|
351
|
+
this.startId = this.startGID + this.startSuffix;
|
|
352
|
+
this.endId = this.endGID + this.endSuffix;
|
|
353
|
+
this.computePositionsByIds();
|
|
354
|
+
this.cdr.detectChanges();
|
|
355
|
+
}
|
|
356
|
+
ngAfterViewInit() {
|
|
357
|
+
this.positioned = true;
|
|
358
|
+
this.computePositionsByIds();
|
|
359
|
+
this.cdr.detectChanges();
|
|
360
|
+
}
|
|
361
|
+
computePositionsByIds() {
|
|
362
|
+
if (this.node?.nativeElement) {
|
|
363
|
+
let rel = this.node.nativeElement;
|
|
364
|
+
let startOpt = this.svgAccessService.getRelativePosition(this.startId, rel);
|
|
365
|
+
if (startOpt) {
|
|
366
|
+
this.start = startOpt;
|
|
367
|
+
}
|
|
368
|
+
let endOpt = this.svgAccessService.getRelativePosition(this.endId, rel);
|
|
369
|
+
if (endOpt) {
|
|
370
|
+
this.end = endOpt;
|
|
371
|
+
}
|
|
372
|
+
}
|
|
373
|
+
else
|
|
374
|
+
console.log('No native element yet');
|
|
375
|
+
}
|
|
376
|
+
ngOnDestroy() {
|
|
377
|
+
this.changeSubscription.unsubscribe();
|
|
378
|
+
}
|
|
379
|
+
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 });
|
|
380
|
+
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"] }] });
|
|
381
|
+
}
|
|
382
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ArrowBetweenElemsComponent, decorators: [{
|
|
383
|
+
type: Component,
|
|
384
|
+
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" }]
|
|
385
|
+
}], ctorParameters: () => [{ type: SVGAccessService }, { type: i0.ChangeDetectorRef }], propDecorators: { startGID: [{
|
|
386
|
+
type: Input
|
|
387
|
+
}], startSuffix: [{
|
|
388
|
+
type: Input
|
|
389
|
+
}], endGID: [{
|
|
390
|
+
type: Input
|
|
391
|
+
}], endSuffix: [{
|
|
392
|
+
type: Input
|
|
393
|
+
}], arrowType: [{
|
|
394
|
+
type: Input
|
|
395
|
+
}], breaks: [{
|
|
396
|
+
type: Input
|
|
397
|
+
}], text: [{
|
|
398
|
+
type: Input
|
|
399
|
+
}], style: [{
|
|
400
|
+
type: Input
|
|
401
|
+
}], node: [{
|
|
402
|
+
type: ViewChild,
|
|
403
|
+
args: ['arrow']
|
|
404
|
+
}] } });
|
|
405
|
+
|
|
406
|
+
/*
|
|
407
|
+
* Public API Surface of arrows
|
|
408
|
+
*/
|
|
409
|
+
|
|
410
|
+
/**
|
|
411
|
+
* Generated bundle index. Do not edit.
|
|
412
|
+
*/
|
|
413
|
+
|
|
414
|
+
export { ArrowBetweenBoxesComponent, ArrowBetweenElemsComponent, ArrowBetweenPointsComponent, ArrowStyleConfigurationService, DraggableComponent, Dragger, PositionHelper, SVGAccessService };
|
|
415
|
+
//# sourceMappingURL=ngx-svg-graphics.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ngx-svg-graphics.mjs","sources":["../../../projects/svg-graphics/src/lib/models/dragger.ts","../../../projects/svg-graphics/src/lib/utils/position-helper.ts","../../../projects/svg-graphics/src/lib/services/svg-access.service.ts","../../../projects/svg-graphics/src/lib/components/draggable/draggable.component.ts","../../../projects/svg-graphics/src/lib/components/draggable/draggable.component.svg","../../../projects/svg-graphics/src/lib/utils/path-layouter.ts","../../../projects/svg-graphics/src/lib/services/arrow-style-configuration.service.ts","../../../projects/svg-graphics/src/lib/components/arrows/arrow-between-points/arrow-between-points.component.ts","../../../projects/svg-graphics/src/lib/components/arrows/arrow-between-points/arrow-between-points.component.svg","../../../projects/svg-graphics/src/lib/components/arrows/arrow-between-boxes/arrow-between-boxes.component.ts","../../../projects/svg-graphics/src/lib/components/arrows/arrow-between-boxes/arrow-between-boxes.component.svg","../../../projects/svg-graphics/src/lib/components/arrows/arrow-between-elems/arrow-between-elems.component.ts","../../../projects/svg-graphics/src/lib/components/arrows/arrow-between-elems/arrow-between-elems.component.svg","../../../projects/svg-graphics/src/public-api.ts","../../../projects/svg-graphics/src/ngx-svg-graphics.ts"],"sourcesContent":["import {Positionable} from './positionable';\n\nexport class Dragger<T extends Positionable> {\n elem: T;\n\n dragActive = false;\n wasReallyDragged = false;\n dragStartX: number = 0;\n dragStartY: number = 0;\n\n constructor(private element: T) {\n this.elem = element;\n }\n\n startDrag(event: MouseEvent) {\n console.log('startDrag');\n this.dragActive = true;\n this.dragStartX = event.clientX;\n this.dragStartY = event.clientY;\n }\n\n // returns true in the case of a real drag event, false otherwise\n drag(event: MouseEvent): boolean {\n if (this.dragActive) {\n this.wasReallyDragged = true;\n event.preventDefault();\n const dragX = event.clientX;\n this.elem.position.x+= (dragX - this.dragStartX);\n this.dragStartX = dragX;\n const dragY = event.clientY;\n this.elem.position.y+= (dragY - this.dragStartY);\n this.dragStartY = dragY;\n return true;\n }\n return false;\n }\n\n endDrag(event: MouseEvent) {\n console.log('endDrag');\n this.dragActive = false;\n // todo was working for click vs drag, not now setTimeout(() => {this.dragActive = false;}, 50);\n event.preventDefault();\n }\n\n //returns true if the click should be treated as click, false if it was from drag\n clickElem(event: MouseEvent): boolean {\n if (this.wasReallyDragged) {\n this.wasReallyDragged = false;\n return false;\n } else {\n event.preventDefault();\n return true;\n }\n }\n\n\n}\n","import {Point} from \"@angular/cdk/drag-drop\";\nimport {BoundingBox} from \"../models/bounding-box\";\n\nexport class PositionHelper {\n\n static absolutePosition(elem: SVGGraphicsElement): BoundingBox {\n let relativePosition: DOMRect = elem.getBBox();\n let translationMatrix: DOMMatrix = elem.getCTM()!;\n let x = relativePosition.x;\n let y = relativePosition.y;\n let x_abs = translationMatrix.a*x+translationMatrix.c*y+translationMatrix.e;\n let y_abs = translationMatrix.b*x+translationMatrix.d*y+translationMatrix.f;\n return {x: x_abs, y: y_abs, w: relativePosition.width, h: relativePosition.height}\n }\n\n static makeRelativeToElem(p: Point, elem: SVGGraphicsElement): void {\n this.matrixTransform(p, elem.getCTM()!.inverse())\n }\n\n static matrixTransform(p: Point, translationMatrix: DOMMatrix): void {\n let x = p.x;\n let y = p.y;\n let x_trans = translationMatrix.a*x+translationMatrix.c*y+translationMatrix.e;\n let y_trans = translationMatrix.b*x+translationMatrix.d*y+translationMatrix.f;\n p.x = x_trans\n p.y = y_trans\n }\n\n static newBoundingBox(x: number = 0, y: number = 0, width: number = 5, height: number = 5): BoundingBox {\n return {x: x, y: y, w: width, h: height};\n }\n}\n","import { Injectable } from '@angular/core';\nimport {BehaviorSubject, Observable} from \"rxjs\";\nimport {BoundingBox} from \"../models/bounding-box\";\nimport {PositionHelper} from \"../utils/position-helper\";\n\n@Injectable({\n providedIn: 'root'\n})\nexport class SVGAccessService {\n\n positionChange: BehaviorSubject<string> = new BehaviorSubject<string>('');\n\n constructor() { }\n\n notifyPositionChange(id: string) {\n this.positionChange.next(id);\n }\n\n listenToPositionChange(): Observable<string> {\n return this.positionChange.asObservable()\n }\n\n getElemById(id: string): SVGGraphicsElement | undefined {\n let elem = document.getElementById(id)\n return elem as unknown as SVGGraphicsElement\n }\n\n getRelativePosition(id: string, node: SVGGraphicsElement): BoundingBox | undefined {\n let elem = this.getElemById(id)\n if (elem) {\n let abs = PositionHelper.absolutePosition(elem)\n PositionHelper.makeRelativeToElem(abs, node)\n return abs;\n }\n return undefined\n }\n}\n","import {AfterViewInit, Component, EventEmitter, Output} from '@angular/core';\nimport {SVGAccessService} from '../../services/svg-access.service';\nimport { Draggable } from '../../models/positionable';\nimport {Dragger} from \"../../models/dragger\";\n\n@Component({\n imports: [],\n selector: '[draggable]',\n templateUrl: './draggable.component.svg',\n styleUrl: './draggable.component.css'\n})\nexport abstract class DraggableComponent<T extends Draggable> implements AfterViewInit {\n\n @Output() chooseElem = new EventEmitter<T>();\n //the caller must initialize both required elements (elem and elementDragger) either in the constructor\n // (or if they are inputs) in the ngOnInit life cycle hook\n elem!: T;\n elemDragger!: Dragger<T>;\n\n protected constructor(\n protected svgAccessService: SVGAccessService\n ) {}\n\n\n ngAfterViewInit() {\n this.svgAccessService.notifyPositionChange(this.elem.gId)\n }\n\n startDrag(event: MouseEvent) {\n this.elemDragger.startDrag(event);\n }\n\n drag(event: MouseEvent) {\n if (this.elemDragger.drag(event)) {\n this.svgAccessService.notifyPositionChange(this.elem.gId)\n }\n }\n\n endDrag(event: MouseEvent) {\n this.elemDragger.endDrag(event);\n }\n\n clickElem(event: MouseEvent) {\n if (this.elemDragger.clickElem(event)) {\n this.chooseElem.emit(this.elem);\n }\n }\n\n}\n","<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","import {BoundingBox} from \"../models/bounding-box\";\nimport {Point} from \"@angular/cdk/drag-drop\";\n\nexport class PathLayouter {\n\n static bestPoints(p1: BoundingBox, p2: BoundingBox) {\n //assumption is that both boxes do not intersect\n //since we only deal with bounding boxes, all relevant lines are parallel/orthogonal\n\n let xPoints = this.getPointsInOneDimension(p1.x, p1.w, p2.x, p2.w)\n let yPoints = this.getPointsInOneDimension(p1.y, p1.h, p2.y, p2.h)\n let result1: Point = {x: xPoints[0], y: yPoints[0]}\n let result2: Point = {x: xPoints[1], y: yPoints[1]}\n return [result1, result2];\n }\n\n // assumes that x1 is smaller than x2\n //works for width (careful with height, y axis is wrong way)\n static determineOverlapX(x1: number, w1: number, x2: number, w2: number): number[] {\n let x1right = x1+w1\n if (x1right >= x2) {\n //find end of overlap\n let x2right = x2+w2\n let end = Math.min(x1right, x2right)\n //overlap interval is [x2, end]\n let middle = (x2+end)/2\n return [middle, middle]\n } else return [x1right, x2]\n }\n\n\n static getPointsInOneDimension(x1: number, w1: number, x2: number, w2: number): number[] {\n //determine overlap (and then middle of it) or closest points in one dimension\n if (x1 < x2) {\n return this.determineOverlapX(x1, w1, x2, w2)\n } else {\n return this.determineOverlapX(x2, w2, x1, w1).reverse()\n }\n }\n\n}\n","import { Injectable } from '@angular/core';\nimport {ArrowStyleConfiguration} from \"../models/arrow-style-configuration\";\n\n/*****\n default implementation\n You can extend this base case with an own service implementation.\n Make sure to configure DI to use your service instead of this one\n In 20205, the way to do so is to declare it as provider in app.config.ts or app.component.ts\n providers: [{ provide: ArrowStyleConfigurationService, useClass: YourServiceImplementation }],\n See https://angular.dev/guide/di/dependency-injection-providers\n ***/\n@Injectable({\n providedIn: 'root'\n})\nexport class ArrowStyleConfigurationService {\n\n constructor() { }\n\n styleArrow(arrowType?: string): ArrowStyleConfiguration {\n return {\n color: 'black',\n dashed: [0]\n };\n }\n}\n","import {Component, Input, OnChanges} from '@angular/core';\nimport {NgIf} from \"@angular/common\";\nimport {ArrowStyleConfigurationService} from \"../../../services/arrow-style-configuration.service\";\nimport {ArrowStyleConfiguration} from \"../../../models/arrow-style-configuration\";\nimport {v4 as uuidv4} from \"uuid\";\n\n@Component({\n selector: '[arrow-between-points]',\n imports: [\n NgIf\n ],\n templateUrl: './arrow-between-points.component.svg',\n styleUrl: './arrow-between-points.component.css'\n})\nexport class ArrowBetweenPointsComponent implements OnChanges {\n\n @Input() startX!: number;\n @Input() startY!: number;\n @Input() endX!: number;\n @Input() endY!: number;\n @Input() text?: string;\n @Input() style?: string;\n\n @Input() arrowType?: string;\n\n arrowStyleConfiguration: ArrowStyleConfiguration;\n id = uuidv4();\n\n constructor(\n private arrowStyleConfigService: ArrowStyleConfigurationService,) {\n\n this.arrowStyleConfiguration = this.arrowStyleConfigService.styleArrow()\n }\n\n ngOnChanges() {\n this.arrowStyleConfiguration = this.arrowStyleConfigService.styleArrow(this.arrowType)\n }\n\n}\n","<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>","import { AfterViewInit, ChangeDetectorRef, Component, Input, OnChanges,} from '@angular/core';\nimport { Point } from \"@angular/cdk/drag-drop\";\nimport {v4 as uuidv4} from \"uuid\";\nimport {BoundingBox} from \"../../../models/bounding-box\";\nimport {PathLayouter} from \"../../../utils/path-layouter\";\nimport {ArrowBetweenPointsComponent} from \"../arrow-between-points/arrow-between-points.component\";\n\n@Component({\n selector: '[arrow-between-boxes]',\n templateUrl: './arrow-between-boxes.component.svg',\n styleUrl: './arrow-between-boxes.component.css',\n standalone: true,\n imports: [ArrowBetweenPointsComponent]\n})\nexport class ArrowBetweenBoxesComponent implements OnChanges, AfterViewInit {\n @Input() start!: BoundingBox;\n @Input() end!: BoundingBox;\n @Input() arrowType?: string;\n @Input() text?: string;\n @Input() style?: string;\n\n\n x1: number = 0;\n y1: number = 0;\n x2: number = 5;\n y2: number = 5;\n\n id = uuidv4();\n\n positioned= false;\n\n constructor(\n private cdr: ChangeDetectorRef,\n ) {}\n\n ngAfterViewInit() {\n this.computePositions()\n this.positioned = true;\n this.cdr.detectChanges();\n }\n\n ngOnChanges() {\n if(this.positioned) {\n this.computePositions()\n }\n }\n\n\n private computePositions() {\n let res = PathLayouter.bestPoints(this.start, this.end);\n this.applyBestPoints(res)\n }\n\n private applyBestPoints(res: Point[]) {\n this.x1 = res[0].x;\n this.y1 = res[0].y;\n this.x2 = res[1].x;\n this.y2 = res[1].y;\n }\n\n}\n","<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","import {\n AfterViewInit,\n ChangeDetectorRef,\n Component, ElementRef,\n Input, OnChanges, OnDestroy,\n OnInit, SimpleChanges,\n ViewChild\n} from '@angular/core';\nimport {Observable, Subscription} from \"rxjs\";\nimport { NgIf } from '@angular/common';\nimport {BoundingBox} from \"../../../models/bounding-box\";\nimport {ArrowBetweenBoxesComponent} from \"../arrow-between-boxes/arrow-between-boxes.component\";\nimport {SVGAccessService} from \"../../../services/svg-access.service\";\n\n@Component({\n selector: '[arrowElems]',\n templateUrl: './arrow-between-elems.component.svg',\n styleUrl: './arrow-between-elems.component.css',\n standalone: true,\n imports: [NgIf, ArrowBetweenBoxesComponent]\n})\nexport class ArrowBetweenElemsComponent implements OnInit, AfterViewInit, OnChanges, OnDestroy {\n\n @Input() startGID!: string;\n @Input() startSuffix!: string;\n @Input() endGID!: string;\n @Input() endSuffix!: string;\n @Input() arrowType?: string;\n\n @Input() breaks: BoundingBox[] = [];\n @Input() text?: string;\n @Input() style?: string; //todo move into ArrowStyleConfig?\n\n startId!: string;\n endId!: string;\n\n start?: BoundingBox;\n end?: BoundingBox;\n\n positioned= false;\n @ViewChild('arrow') node!: ElementRef<SVGGraphicsElement>;\n\n changeNotifier: Observable<string>;\n changeSubscription: Subscription;\n\n //idea: compute the two input positions as relative to the current elem\n constructor(\n private svgAccessService: SVGAccessService,\n private cdr: ChangeDetectorRef) {\n this.changeNotifier = this.svgAccessService.listenToPositionChange()\n this.changeSubscription = this.changeNotifier.subscribe(nextString => {\n if (nextString == this.startGID || nextString == this.endGID) {\n setTimeout(() => {\n this.computePositionsByIds()\n this.cdr.detectChanges()\n }, 0)\n }\n })\n }\n\n ngOnInit() {\n this.startId = this.startGID+this.startSuffix;\n this.endId = this.endGID+this.endSuffix;\n }\n\n ngOnChanges(_: SimpleChanges) {\n this.startId = this.startGID+this.startSuffix;\n this.endId = this.endGID+this.endSuffix;\n this.computePositionsByIds()\n this.cdr.detectChanges()\n }\n\n ngAfterViewInit() {\n this.positioned = true;\n this.computePositionsByIds()\n this.cdr.detectChanges()\n }\n\n private computePositionsByIds() {\n if (this.node?.nativeElement){\n let rel = this.node.nativeElement as SVGGraphicsElement\n let startOpt = this.svgAccessService.getRelativePosition(this.startId, rel)\n if (startOpt) {\n this.start = startOpt\n }\n let endOpt = this.svgAccessService.getRelativePosition(this.endId, rel)\n if (endOpt) {\n this.end = endOpt\n }\n } else console.log('No native element yet')\n }\n\n ngOnDestroy() {\n this.changeSubscription.unsubscribe();\n }\n\n}\n","<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","/*\n * Public API Surface of arrows\n */\n\nexport * from './lib/models/dragger'\nexport * from './lib/components/draggable/draggable.component';\nexport * from './lib/components/arrows/arrow-between-elems/arrow-between-elems.component';\nexport * from './lib/components/arrows/arrow-between-boxes/arrow-between-boxes.component';\nexport * from './lib/components/arrows/arrow-between-points/arrow-between-points.component';\nexport * from './lib/utils/position-helper';\nexport * from './lib/services/arrow-style-configuration.service';\nexport * from './lib/services/svg-access.service';\n\nexport type {BoundingBox} from './lib/models/bounding-box';\nexport type {ArrowStyleConfiguration} from './lib/models/arrow-style-configuration';\nexport type {Identifiable} from './lib/models/identifiable'; //gId: string - soft connection to Referencable\nexport type {Positionable, Draggable} from './lib/models/positionable';\n\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i1.SVGAccessService","uuidv4","i1.ArrowStyleConfigurationService"],"mappings":"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"}
|
package/index.d.ts
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { AfterViewInit, ChangeDetectorRef, OnChanges } from '@angular/core';
|
|
2
|
+
import { BoundingBox } from "../../../models/bounding-box";
|
|
3
|
+
import * as i0 from "@angular/core";
|
|
4
|
+
export declare class ArrowBetweenBoxesComponent implements OnChanges, AfterViewInit {
|
|
5
|
+
private cdr;
|
|
6
|
+
start: BoundingBox;
|
|
7
|
+
end: BoundingBox;
|
|
8
|
+
arrowType?: string;
|
|
9
|
+
text?: string;
|
|
10
|
+
style?: string;
|
|
11
|
+
x1: number;
|
|
12
|
+
y1: number;
|
|
13
|
+
x2: number;
|
|
14
|
+
y2: number;
|
|
15
|
+
id: string;
|
|
16
|
+
positioned: boolean;
|
|
17
|
+
constructor(cdr: ChangeDetectorRef);
|
|
18
|
+
ngAfterViewInit(): void;
|
|
19
|
+
ngOnChanges(): void;
|
|
20
|
+
private computePositions;
|
|
21
|
+
private applyBestPoints;
|
|
22
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ArrowBetweenBoxesComponent, never>;
|
|
23
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<ArrowBetweenBoxesComponent, "[arrow-between-boxes]", never, { "start": { "alias": "start"; "required": false; }; "end": { "alias": "end"; "required": false; }; "arrowType": { "alias": "arrowType"; "required": false; }; "text": { "alias": "text"; "required": false; }; "style": { "alias": "style"; "required": false; }; }, {}, never, never, true, never>;
|
|
24
|
+
}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { AfterViewInit, ChangeDetectorRef, ElementRef, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
|
|
2
|
+
import { Observable, Subscription } from "rxjs";
|
|
3
|
+
import { BoundingBox } from "../../../models/bounding-box";
|
|
4
|
+
import { SVGAccessService } from "../../../services/svg-access.service";
|
|
5
|
+
import * as i0 from "@angular/core";
|
|
6
|
+
export declare class ArrowBetweenElemsComponent implements OnInit, AfterViewInit, OnChanges, OnDestroy {
|
|
7
|
+
private svgAccessService;
|
|
8
|
+
private cdr;
|
|
9
|
+
startGID: string;
|
|
10
|
+
startSuffix: string;
|
|
11
|
+
endGID: string;
|
|
12
|
+
endSuffix: string;
|
|
13
|
+
arrowType?: string;
|
|
14
|
+
breaks: BoundingBox[];
|
|
15
|
+
text?: string;
|
|
16
|
+
style?: string;
|
|
17
|
+
startId: string;
|
|
18
|
+
endId: string;
|
|
19
|
+
start?: BoundingBox;
|
|
20
|
+
end?: BoundingBox;
|
|
21
|
+
positioned: boolean;
|
|
22
|
+
node: ElementRef<SVGGraphicsElement>;
|
|
23
|
+
changeNotifier: Observable<string>;
|
|
24
|
+
changeSubscription: Subscription;
|
|
25
|
+
constructor(svgAccessService: SVGAccessService, cdr: ChangeDetectorRef);
|
|
26
|
+
ngOnInit(): void;
|
|
27
|
+
ngOnChanges(_: SimpleChanges): void;
|
|
28
|
+
ngAfterViewInit(): void;
|
|
29
|
+
private computePositionsByIds;
|
|
30
|
+
ngOnDestroy(): void;
|
|
31
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ArrowBetweenElemsComponent, never>;
|
|
32
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<ArrowBetweenElemsComponent, "[arrowElems]", never, { "startGID": { "alias": "startGID"; "required": false; }; "startSuffix": { "alias": "startSuffix"; "required": false; }; "endGID": { "alias": "endGID"; "required": false; }; "endSuffix": { "alias": "endSuffix"; "required": false; }; "arrowType": { "alias": "arrowType"; "required": false; }; "breaks": { "alias": "breaks"; "required": false; }; "text": { "alias": "text"; "required": false; }; "style": { "alias": "style"; "required": false; }; }, {}, never, never, true, never>;
|
|
33
|
+
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { OnChanges } from '@angular/core';
|
|
2
|
+
import { ArrowStyleConfigurationService } from "../../../services/arrow-style-configuration.service";
|
|
3
|
+
import { ArrowStyleConfiguration } from "../../../models/arrow-style-configuration";
|
|
4
|
+
import * as i0 from "@angular/core";
|
|
5
|
+
export declare class ArrowBetweenPointsComponent implements OnChanges {
|
|
6
|
+
private arrowStyleConfigService;
|
|
7
|
+
startX: number;
|
|
8
|
+
startY: number;
|
|
9
|
+
endX: number;
|
|
10
|
+
endY: number;
|
|
11
|
+
text?: string;
|
|
12
|
+
style?: string;
|
|
13
|
+
arrowType?: string;
|
|
14
|
+
arrowStyleConfiguration: ArrowStyleConfiguration;
|
|
15
|
+
id: string;
|
|
16
|
+
constructor(arrowStyleConfigService: ArrowStyleConfigurationService);
|
|
17
|
+
ngOnChanges(): void;
|
|
18
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ArrowBetweenPointsComponent, never>;
|
|
19
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<ArrowBetweenPointsComponent, "[arrow-between-points]", never, { "startX": { "alias": "startX"; "required": false; }; "startY": { "alias": "startY"; "required": false; }; "endX": { "alias": "endX"; "required": false; }; "endY": { "alias": "endY"; "required": false; }; "text": { "alias": "text"; "required": false; }; "style": { "alias": "style"; "required": false; }; "arrowType": { "alias": "arrowType"; "required": false; }; }, {}, never, never, true, never>;
|
|
20
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { AfterViewInit, EventEmitter } from '@angular/core';
|
|
2
|
+
import { SVGAccessService } from '../../services/svg-access.service';
|
|
3
|
+
import { Draggable } from '../../models/positionable';
|
|
4
|
+
import { Dragger } from "../../models/dragger";
|
|
5
|
+
import * as i0 from "@angular/core";
|
|
6
|
+
export declare abstract class DraggableComponent<T extends Draggable> implements AfterViewInit {
|
|
7
|
+
protected svgAccessService: SVGAccessService;
|
|
8
|
+
chooseElem: EventEmitter<T>;
|
|
9
|
+
elem: T;
|
|
10
|
+
elemDragger: Dragger<T>;
|
|
11
|
+
protected constructor(svgAccessService: SVGAccessService);
|
|
12
|
+
ngAfterViewInit(): void;
|
|
13
|
+
startDrag(event: MouseEvent): void;
|
|
14
|
+
drag(event: MouseEvent): void;
|
|
15
|
+
endDrag(event: MouseEvent): void;
|
|
16
|
+
clickElem(event: MouseEvent): void;
|
|
17
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<DraggableComponent<any>, never>;
|
|
18
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<DraggableComponent<any>, "[draggable]", never, {}, { "chooseElem": "chooseElem"; }, never, never, true, never>;
|
|
19
|
+
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { Positionable } from './positionable';
|
|
2
|
+
export declare class Dragger<T extends Positionable> {
|
|
3
|
+
private element;
|
|
4
|
+
elem: T;
|
|
5
|
+
dragActive: boolean;
|
|
6
|
+
wasReallyDragged: boolean;
|
|
7
|
+
dragStartX: number;
|
|
8
|
+
dragStartY: number;
|
|
9
|
+
constructor(element: T);
|
|
10
|
+
startDrag(event: MouseEvent): void;
|
|
11
|
+
drag(event: MouseEvent): boolean;
|
|
12
|
+
endDrag(event: MouseEvent): void;
|
|
13
|
+
clickElem(event: MouseEvent): boolean;
|
|
14
|
+
}
|