@linkurious/ogma-annotations 1.1.16 → 1.1.19

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.
@@ -1,112 +0,0 @@
1
- import Ogma from "@linkurious/ogma";
2
- import EventEmitter from "eventemitter3";
3
- import { Annotation, AnnotationCollection, Arrow, ControllerOptions, FeatureEvents, Id, Text } from "./types";
4
- export declare class Control extends EventEmitter<FeatureEvents> {
5
- private arrows;
6
- private texts;
7
- private links;
8
- private layer;
9
- private annotations;
10
- private ogma;
11
- private options;
12
- private selected;
13
- private updateTimeout;
14
- private hoveredNode;
15
- private dragged;
16
- private textToMagnet;
17
- private activeLinks;
18
- constructor(ogma: Ogma, options?: Partial<ControllerOptions>);
19
- private _render;
20
- private _onFeatureDrag;
21
- private _onFeatureDragEnd;
22
- private _onFeatureDragStart;
23
- private _onNodesDragStart;
24
- private _onNodesDrag;
25
- private _onLayoutEnd;
26
- private _moveNodes;
27
- private _snapToText;
28
- private _findAndSnapToNode;
29
- private _snapToNode;
30
- private _onAdded;
31
- private _onRemoved;
32
- private _onUnselect;
33
- private _onSelect;
34
- private refreshTextLinks;
35
- /**
36
- * @returns the currently selected annotation
37
- */
38
- getSelected(): Annotation | null;
39
- private findMagnetPoint;
40
- /**
41
- * Set the options for the controller
42
- * @param options new Options
43
- * @returns the updated options
44
- */
45
- setOptions(options?: Partial<ControllerOptions>): ControllerOptions;
46
- /**
47
- * Selects the annotation with the given id
48
- * @param id the id of the annotation to select
49
- */
50
- select(id: Id): this;
51
- /**
52
- * Unselects the currently selected annotation
53
- */
54
- unselect(): this;
55
- /**
56
- * Add an annotation to the controller
57
- * @param annotation The annotation to add
58
- */
59
- add(annotation: Arrow | Text | AnnotationCollection): this;
60
- /**
61
- * Remove an annotation or an array of annotations from the controller
62
- * @param annotation The annotation(s) to remove
63
- */
64
- remove(annotation: Arrow | Text | AnnotationCollection): this;
65
- private loadLink;
66
- /**
67
- * Start adding an arrow (add it, and give control to the user)
68
- * @param x coord of the first point
69
- * @param y coord of the first point
70
- * @param arrow The arrow to add
71
- */
72
- startArrow(x: number, y: number, arrow?: Arrow): void;
73
- /**
74
- * Start adding a text (add it, and give control to the user)
75
- * @param x coord of the top left point
76
- * @param y coord of the top left point
77
- * @param text The text to add
78
- */
79
- startText(x: number, y: number, text?: Text): void;
80
- /**
81
- * Cancel drawing on the current frame
82
- */
83
- cancelDrawing(): void;
84
- /**
85
- * Triggers the update event on the annotation
86
- * @param annotation The annotation updated
87
- */
88
- onUpdate: (annotation: Annotation) => void;
89
- private _onUpdate;
90
- /**
91
- * Update the style of the annotation with the given id
92
- * @param id The id of the annotation to update
93
- * @param style The new style
94
- */
95
- updateStyle<A extends Annotation>(id: Id, style: A["properties"]["style"]): this;
96
- setScale(id: Id, scale: number, ox: number, oy: number): this;
97
- /**
98
- *
99
- * @returns the annotations in the controller
100
- */
101
- getAnnotations(): AnnotationCollection;
102
- /**
103
- * Retrieve the annotation with the given id
104
- * @param id the id of the annotation to get
105
- * @returns The annotation with the given id
106
- */
107
- getAnnotation(id: Id): Arrow | Text | undefined;
108
- /**
109
- * Destroy the controller and its elements
110
- */
111
- destroy(): void;
112
- }
@@ -1,10 +0,0 @@
1
- import { Arrow, ArrowStyles } from '../../types';
2
- export declare const defaultStyle: ArrowStyles;
3
- export declare const defaultOptions: Arrow;
4
- export declare const createArrow: (x0?: number, y0?: number, x1?: number, y1?: number, styles?: {
5
- tail?: import("../../types").Extremity | undefined;
6
- head?: import("../../types").Extremity | undefined;
7
- strokeType?: "none" | "plain" | "dashed" | undefined;
8
- strokeColor?: string | undefined;
9
- strokeWidth?: number | undefined;
10
- }) => Arrow;
@@ -1,39 +0,0 @@
1
- import Ogma, { Point } from "@linkurious/ogma";
2
- import { createArrow, defaultOptions, defaultStyle } from "./defaults";
3
- import { Arrow, ControllerOptions } from "../../types";
4
- import { Editor } from "../base";
5
- /**
6
- * @class Arrows
7
- * Draw and edit arrows
8
- */
9
- export declare class Arrows extends Editor<Arrow> {
10
- private draggedHandle;
11
- private start;
12
- private end;
13
- private arrow;
14
- private startX;
15
- private startY;
16
- private minArrowHeight;
17
- private maxArrowHeight;
18
- private handles;
19
- constructor(ogma: Ogma, options?: Pick<Partial<ControllerOptions>, "arrowHandleSize" | "maxArrowHeight" | "minArrowHeight">);
20
- private onHandleMouseDown;
21
- /**
22
- * Start drawing a new arrow, it will also be added as a new annotation
23
- * @param x
24
- * @param y
25
- * @param arrow
26
- */
27
- startDrawing(x: number, y: number, arrow?: Arrow): void;
28
- cancelDrawing(): void;
29
- private startDragging;
30
- private onMouseUp;
31
- private onMouseMove;
32
- detect(point: Point, margin?: number): Arrow | undefined;
33
- refreshEditor(): void;
34
- getDefaultOptions(): Arrow;
35
- draw(svg: SVGSVGElement): void;
36
- refreshDrawing(): void;
37
- destroy(): void;
38
- }
39
- export { defaultOptions as defaultArrowOptions, defaultStyle as defaultArrowStyle, createArrow, };
@@ -1,13 +0,0 @@
1
- import { Arrow, ArrowStyles } from "../../types";
2
- /**
3
- * @function getArrowHeight
4
- * @param arrow The arrow to measure
5
- * @returns The height of the bounding box of the arrow
6
- */
7
- export declare function getArrowHeight(arrow: Arrow, min?: number, max?: number): number;
8
- /**
9
- * @function draw
10
- * @param arrow The arrow to draw
11
- * @param g the group in which to draw
12
- */
13
- export default function draw(arrow: Arrow, g: SVGGElement, defaultStyle: ArrowStyles, minArrowHeight: number, maxArrowHeight: number): void;
@@ -1,5 +0,0 @@
1
- import { AnnotationOptions, Text, TextStyle } from '../../types';
2
- export declare const defaultStyle: TextStyle;
3
- export declare const defaultOptions: Text;
4
- export declare const defaultControllerOptions: AnnotationOptions;
5
- export declare const createText: (x?: number, y?: number, width?: number, height?: number, content?: string, styles?: Partial<TextStyle>) => Text;
@@ -1,42 +0,0 @@
1
- import Ogma, { Point } from "@linkurious/ogma";
2
- import { createText, defaultControllerOptions, defaultOptions, defaultStyle } from "./defaults";
3
- import { ControllerOptions, Id, Text } from "../../types";
4
- import { Editor } from "../base";
5
- /**
6
- * @class Texts
7
- * Draw, update, edit texts
8
- */
9
- export declare class Texts extends Editor<Text> {
10
- private textArea;
11
- private handleSize;
12
- private rect;
13
- private annotation;
14
- private startX;
15
- private startY;
16
- private handles;
17
- private draggedHandle;
18
- private isFocused;
19
- private placeholder;
20
- constructor(ogma: Ogma, options?: Pick<Partial<ControllerOptions>, "textHandleSize" | "textPlaceholder">);
21
- private _onFocus;
22
- private _onBlur;
23
- protected _canRemove(): boolean;
24
- startDrawing: (x: number, y: number, text?: Text) => void;
25
- cancelDrawing: () => void;
26
- private startDragging;
27
- private onHandleMouseDown;
28
- private onMouseMove;
29
- private _onMouseMove;
30
- private onMouseUp;
31
- private _onMousedown;
32
- private onViewChanged;
33
- private _onInput;
34
- detect({ x, y }: Point, margin?: number): Text | undefined;
35
- draw(svg: SVGSVGElement): void;
36
- refreshDrawing(): void;
37
- getDefaultOptions(): Text;
38
- refreshEditor(): void;
39
- select(id: Id): void;
40
- destroy(): void;
41
- }
42
- export { defaultOptions as defaultTextOptions, defaultStyle as defaultTextStyle, defaultControllerOptions, createText, };
@@ -1,7 +0,0 @@
1
- import { Text } from '../../types';
2
- /**
3
- * @function draw
4
- * @param annotation the annotation to draw
5
- * @param g the group in which the text should be drawn
6
- */
7
- export default function draw(annotation: Text, g: SVGGElement): void;
@@ -1,84 +0,0 @@
1
- import Ogma, { Options, Overlay, Point, SVGLayer } from "@linkurious/ogma";
2
- import eventEmmitter from "eventemitter3";
3
- import { Annotation, Events, Id } from "../types";
4
- /**
5
- * @class Annotations
6
- * Abstract class to display Texts and Arrows, provide add/remove/update and mouse events
7
- * Modifying annotation is handled by the child classes, it is too specific
8
- */
9
- export declare abstract class Editor<T extends Annotation> extends eventEmmitter<Events<T>> {
10
- protected ogma: Ogma;
11
- protected elements: T[];
12
- protected layer: SVGLayer;
13
- protected editor: Overlay;
14
- protected selectedId: Id;
15
- protected hoveredId: Id;
16
- protected ogmaOptions: Options;
17
- protected shouldDetect: boolean;
18
- protected isDragging: boolean;
19
- protected showeditorOnHover: boolean;
20
- constructor(ogma: Ogma, editorHtml: string);
21
- private _onKeyUp;
22
- protected _canRemove(): boolean;
23
- private _onClickMouseMove;
24
- /**
25
- * @method add
26
- * @param options Params for the annotation (merged with default)
27
- * @returns the added annotation
28
- */
29
- add(options: T): T;
30
- updateStyle(annotation: T, style: Partial<T["properties"]["style"]>): void;
31
- updateGeometry(annotation: T, geometry: Partial<T["geometry"]>): void;
32
- scale(annotation: T, scale: number, ox: number, oy: number): void;
33
- /**
34
- * @method update
35
- * Updates an annotation (position, color etc)
36
- * @param id Id of the annotation to update
37
- * @param element params of the annotation
38
- */
39
- update(id: Id, element: Partial<T>): void;
40
- updateAnnotation(target: T, element: Partial<T>): void;
41
- getById(id: Id): T;
42
- /**
43
- * @method select
44
- * @param id id of the element to select
45
- * Select element, show editor, disable Ogma dragging and fire event
46
- */
47
- select(id: Id): void;
48
- hover(id: Id): void;
49
- getSelectedFeature(): T | null;
50
- unselect(): this;
51
- unhover(): this;
52
- /**
53
- * @method remove
54
- * @param id Id of the annotation to remove
55
- * Removes annotation with the given id
56
- */
57
- remove(id: Id): void;
58
- /**
59
- * @method disableDragging
60
- * Prevents Ogma from dragging elements or moving the view while dragging an annotation
61
- */
62
- disableDragging(): void;
63
- /**
64
- * @method restoreDragging
65
- * restore ogma options as they were before we start dragging an annotation
66
- */
67
- restoreDragging(): void;
68
- enableDetection(): void;
69
- /**
70
- * @method disableDetection
71
- * Disables the hover behaviour, used by controller to avoid hovering
72
- * arrows while dragging texts and vice versa
73
- */
74
- disableDetection(): void;
75
- refreshLayer(): void;
76
- refreshDrawing(): void;
77
- getElements(): T[];
78
- abstract refreshEditor(): void;
79
- abstract draw(svg: SVGSVGElement): void;
80
- abstract cancelDrawing(): void;
81
- abstract getDefaultOptions(): T;
82
- abstract detect(point: Point, margin: number): T | undefined;
83
- destroy(): void;
84
- }
@@ -1,13 +0,0 @@
1
- export declare const NONE = -1;
2
- export declare const EVT_DRAG = "dragging";
3
- export declare const EVT_DRAG_START = "dragstart";
4
- export declare const EVT_DRAG_END = "dragend";
5
- export declare const EVT_SELECT = "select";
6
- export declare const EVT_UNSELECT = "unselect";
7
- export declare const EVT_HOVER = "hover";
8
- export declare const EVT_UNHOVER = "unhover";
9
- export declare const EVT_REMOVE = "remove";
10
- export declare const EVT_ADD = "add";
11
- export declare const EVT_CANCEL_DRAWING = "cancelDrawing";
12
- export declare const EVT_UPDATE = "update";
13
- export declare const EVT_LINK = "link";
@@ -1,21 +0,0 @@
1
- import { Point } from "@linkurious/ogma";
2
- import { Arrow, Id, TargetType, Link, Side } from "./types";
3
- /**
4
- * Class that implements linking between annotation arrows and different items.
5
- * An arrow can be connected to a text or to a node. It supports double indexing
6
- * so that you could get the arrow by the id of the text or the id of the node
7
- * or by the id of the arrow id itself.
8
- * A node or text can be connected to multiple arrows.
9
- * An arrow can be connected to only one node or text, but on both ends.
10
- */
11
- export declare class Links {
12
- private links;
13
- private linksByTargetId;
14
- private linksByArrowId;
15
- add(arrow: Arrow, side: Side, targetId: Id, targetType: TargetType, connectionPoint: Point): this;
16
- arrowIsLinked(arrowId: Id, side: Side): boolean;
17
- remove(arrow: Arrow, side: Side): this;
18
- getArrowLink(arrowId: Id, side: Side): Link | null;
19
- getTargetLinks(targetId: Id, type: TargetType): Link[];
20
- forEach(cb: (link: Link) => void): void;
21
- }
@@ -1,191 +0,0 @@
1
- import type { Feature, FeatureCollection, Geometry, GeometryObject, LineString, Polygon } from "geojson";
2
- import { EVT_ADD, EVT_CANCEL_DRAWING, EVT_DRAG, EVT_DRAG_END, EVT_DRAG_START, EVT_HOVER, EVT_REMOVE, EVT_SELECT, EVT_UNHOVER, EVT_UNSELECT, EVT_UPDATE, EVT_LINK } from "./constants";
3
- export declare const isArrow: (a: AnnotationFeature<Geometry, AnnotationProps>) => a is Arrow;
4
- export declare const isText: (a: AnnotationFeature<Geometry, AnnotationProps>) => a is Text;
5
- export declare const isAnnotationCollection: (a: AnnotationFeature<Geometry, AnnotationProps> | FeatureCollection) => a is AnnotationCollection;
6
- type AnnotationType = "arrow" | "text";
7
- export interface AnnotationProps {
8
- type: AnnotationType;
9
- style?: unknown;
10
- }
11
- export type Id = string | number;
12
- export interface AnnotationFeature<G extends GeometryObject = GeometryObject, P = AnnotationProps> extends Feature<G, P> {
13
- id: string | number;
14
- }
15
- export interface ArrowStyles extends StrokeOptions {
16
- tail?: Extremity;
17
- head?: Extremity;
18
- }
19
- export type Point = {
20
- x: number;
21
- y: number;
22
- };
23
- type ExportedLink = {
24
- id: Id;
25
- side: "start" | "end";
26
- type: "node" | "text";
27
- magnet?: Point;
28
- };
29
- export interface ArrowProperties extends AnnotationProps {
30
- type: "arrow";
31
- style?: ArrowStyles;
32
- link?: Partial<Record<Side, ExportedLink>>;
33
- }
34
- export type Arrow = AnnotationFeature<LineString, ArrowProperties>;
35
- export interface AnnotationCollection extends FeatureCollection {
36
- features: (Arrow | Text)[];
37
- }
38
- export type StrokeOptions = {
39
- strokeType?: "plain" | "dashed" | "none";
40
- strokeColor?: string;
41
- strokeWidth?: number;
42
- };
43
- export interface TextStyle extends StrokeOptions {
44
- /** Helvetica, sans-serif... */
45
- font?: string;
46
- /** Font size, in pixels */
47
- fontSize?: number | string;
48
- /** text color: #f00, yellow...*/
49
- color?: string;
50
- /** background color: empty for transparent #f00, yellow...*/
51
- background?: string;
52
- /** padding around the text */
53
- padding?: number;
54
- }
55
- export interface TextProperties extends AnnotationProps {
56
- type: "text";
57
- /**text to display*/
58
- content: string;
59
- style?: TextStyle;
60
- }
61
- export type Text = AnnotationFeature<Polygon, TextProperties>;
62
- export type Stroke = {
63
- type: "plain" | "dashed" | "none";
64
- color: string;
65
- width: number;
66
- };
67
- export type StrokeStyle = Stroke;
68
- export type Extremity = "none" | "arrow" | "arrow-plain";
69
- export type AnnotationOptions = {
70
- handleSize: number;
71
- placeholder: string;
72
- };
73
- export type Events<T> = {
74
- [EVT_HOVER]: (evt: T) => void;
75
- [EVT_UNHOVER]: (evt: T) => void;
76
- [EVT_SELECT]: (evt: T) => void;
77
- [EVT_UNSELECT]: (evt: T) => void;
78
- [EVT_DRAG_START]: (evt: T) => void;
79
- [EVT_DRAG]: (evt: T, key: "line" | "start" | "end" | "text") => void;
80
- [EVT_DRAG_END]: (evt: T) => void;
81
- [EVT_REMOVE]: (evt: T) => void;
82
- [EVT_ADD]: (evt: T) => void;
83
- [EVT_UPDATE]: (evt: T) => void;
84
- };
85
- export type FeatureEvents = {
86
- /**
87
- * Event trigerred when selecting an annotation
88
- * @param evt The annotation selected
89
- */
90
- [EVT_SELECT]: (evt: Annotation) => void;
91
- /**
92
- * Event trigerred when unselecting an annotation
93
- * @param evt The annotation unselected
94
- */
95
- [EVT_UNSELECT]: (evt: Annotation) => void;
96
- /**
97
- * Event trigerred when removing an annotation
98
- * @param evt The annotation removed
99
- */
100
- [EVT_REMOVE]: (evt: Annotation) => void;
101
- /**
102
- * Event trigerred when adding an annotation
103
- * @param evt The annotation added
104
- */
105
- [EVT_ADD]: (evt: Annotation) => void;
106
- [EVT_CANCEL_DRAWING]: () => void;
107
- /**
108
- * Event trigerred when updating an annotation
109
- * @returns The annotation updated
110
- */
111
- [EVT_UPDATE]: (evt: Annotation) => void;
112
- /**
113
- * Event trigerred when linking an arrow to a text or node
114
- */
115
- [EVT_LINK]: (evt: {
116
- arrow: Arrow;
117
- link: Link;
118
- }) => void;
119
- /**
120
- * Event trigerred when starting to drag an arrow or a text
121
- */
122
- [EVT_DRAG_START]: (evt: Arrow | Text) => void;
123
- /**
124
- * Event trigerred when dragging an arrow or a text
125
- */
126
- [EVT_DRAG]: (evt: Arrow | Text, key: "line" | "start" | "end" | "text") => void;
127
- /**
128
- * Event trigerred when stopped dragging an arrow or a text
129
- */
130
- [EVT_DRAG_END]: (evt: Arrow | Text) => void;
131
- };
132
- export type TargetType = "text" | "node";
133
- export type Side = "start" | "end";
134
- export type Link = {
135
- /** arrow attached to the text or node */
136
- arrow: Id;
137
- /** id of the text the arrow is attached to */
138
- id: Id;
139
- /** On which end the arrow is tighten to the text */
140
- side: Side;
141
- /** id of the text or node the arrow is attached to */
142
- target: Id;
143
- /** Text or node */
144
- targetType: TargetType;
145
- /**
146
- * On which point relative to topleft corner the arrow is tighten, in case of
147
- * node, it can be deduced from the arrow itself
148
- */
149
- connectionPoint: Point;
150
- };
151
- export type ControllerOptions = {
152
- /**
153
- * The color of the magnet points
154
- */
155
- magnetColor: string;
156
- /**
157
- * The radius in which arrows are attracted
158
- */
159
- magnetRadius: number;
160
- /**
161
- * The margin in which the Texts are detected when looking for magnet points
162
- */
163
- detectMargin: number;
164
- /**
165
- * Display size of the magnet point
166
- */
167
- magnetHandleRadius: number;
168
- /**
169
- * Placeholder for the text input
170
- */
171
- textPlaceholder: string;
172
- /**
173
- * Size of the text handle
174
- */
175
- textHandleSize: number;
176
- /**
177
- * Size of the arrow handle
178
- */
179
- arrowHandleSize: number;
180
- /**
181
- * Minimum height of the arrow in units
182
- */
183
- minArrowHeight: number;
184
- /**
185
- * Maximum height of the arrow in units
186
- */
187
- maxArrowHeight: number;
188
- };
189
- export type Annotation = Arrow | Text;
190
- export type Vector = Point;
191
- export {};
@@ -1,56 +0,0 @@
1
- import { Point } from "@linkurious/ogma";
2
- import type { BBox, LineString, Polygon } from "geojson";
3
- import { AnnotationCollection, Arrow, Text } from "./types";
4
- export declare function createSVGElement<T extends SVGElement>(tag: string): T;
5
- export declare function getTextBbox(t: Text): BBox;
6
- export declare function getTextSize(t: Text): {
7
- width: number;
8
- height: number;
9
- };
10
- export declare function getTextPosition(t: Text): {
11
- x: number;
12
- y: number;
13
- };
14
- export declare function updateTextBbox(t: Text): void;
15
- export declare function setTextBbox(t: Text, x: number, y: number, width: number, height: number): void;
16
- export declare function getArrowStart(a: Arrow): {
17
- x: number;
18
- y: number;
19
- };
20
- export declare function getArrowSide(a: Arrow, side: "start" | "end"): {
21
- x: number;
22
- y: number;
23
- };
24
- export declare function getArrowEnd(a: Arrow): {
25
- x: number;
26
- y: number;
27
- };
28
- export declare function setArrowStart(a: Arrow, x: number, y: number): void;
29
- export declare function setArrowEnd(a: Arrow, x: number, y: number): void;
30
- export declare function getArrowEndPoints(a: Arrow): {
31
- start: {
32
- x: number;
33
- y: number;
34
- };
35
- end: {
36
- x: number;
37
- y: number;
38
- };
39
- };
40
- export declare function setArrowEndPoint(a: Arrow, side: "start" | "end", x: number, y: number): void;
41
- export declare const getHandleId: (handle: HTMLDivElement) => number;
42
- type Bounds = [number, number, number, number];
43
- export declare function getAnnotationsBounds(annotations: AnnotationCollection): Bounds;
44
- export declare function scaleGeometry(geometry: LineString | Polygon, scale: number, ox: number, oy: number): LineString | Polygon;
45
- export declare function getAttachmentPointOnNode(start: Point, nodeCenter: Point, nodeRadius: number): {
46
- x: number;
47
- y: number;
48
- };
49
- export declare function clientToContainerPosition(evt: {
50
- clientX: number;
51
- clientY: number;
52
- }, container?: HTMLElement | null): {
53
- x: number;
54
- y: number;
55
- };
56
- export {};
@@ -1,15 +0,0 @@
1
- import { Vector } from "./types";
2
- export declare const subtract: (a: Vector, b: Vector) => Vector;
3
- export declare const length: (v: Vector) => number;
4
- export declare const invert: (v: Vector) => Vector;
5
- export declare const clone: (v: Vector) => {
6
- x: number;
7
- y: number;
8
- };
9
- export declare const normalize: (v: Vector) => Vector;
10
- export declare const add: (a: Vector, b: Vector) => Vector;
11
- export declare const mul: (v: Vector, s: number) => Vector;
12
- export declare const multiply: (a: Vector, b: Vector) => Vector;
13
- export declare const rotateRadians: (v: Vector, angle: number) => Vector;
14
- export declare const divScalar: (v: Vector, s: number) => Vector;
15
- export declare const dot: (a: Vector, b: Vector) => number;