@linkurious/ogma-annotations 2.0.0 → 2.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/dist/index.js +33 -7
- package/dist/index.mjs +2431 -2129
- package/dist/ogma-annotations.css +1 -1
- package/dist/types/index.d.ts +52 -4
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--handle-width: 2px;--point-handle-width: calc(3 * var(--handle-width));--point-handle-border: 2px;--point-handle-total: calc(var(--point-handle-width) + var(--point-handle-border));--handle-color: #38e;--handle-background: #fff;--active-color: #1a70e5;--disabled-color: #999;--hover-color: rgba(56, 136, 238, .2)}svg text{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.handle{position:absolute;background-color:var(--handle-color)}.handle.line{cursor:move}.ogma-annotation-text-editor{position:relative;width:100%;height:100%}.ogma-annotation-text-editor textarea{outline:none;padding:0
|
|
1
|
+
:root{--handle-width: 2px;--point-handle-width: calc(3 * var(--handle-width));--point-handle-border: 2px;--point-handle-total: calc(var(--point-handle-width) + var(--point-handle-border));--handle-color: #38e;--handle-background: #fff;--active-color: #1a70e5;--disabled-color: #999;--hover-color: rgba(56, 136, 238, .2)}svg text{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.handle{position:absolute;background-color:var(--handle-color)}.handle.line{cursor:move}.ogma-annotation-text-editor{display:flex;flex-direction:column;align-items:flex-end;position:relative;width:100%;height:100%}.ogma-annotation-text-editor.animate-width{transition:width .2s ease-out,left .2s ease-out}.ogma-annotation-text-editor textarea{outline:none;padding:0;margin:0;border:0;width:100%;height:100%;cursor:text;z-index:1000;resize:none;white-space:break-spaces;background-color:transparent;overflow:hidden}.ogma-annotation-text-editor textarea::-webkit-scrollbar{width:6px}.ogma-annotation-text-editor textarea::-webkit-scrollbar-track{background:transparent}.ogma-annotation-text-editor textarea::-webkit-scrollbar-thumb{background:#0003;border-radius:3px}.ogma-annotation-text-editor textarea::-webkit-scrollbar-thumb:hover{background:#0000004d}.ogma-send-button{width:24px;height:24px;margin-left:auto;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background-color .2s ease;z-index:1001}.ogma-send-button-icon{width:16px;height:16px;display:flex;align-items:center;justify-content:center;color:var(--handle-color, #38e)}.ogma-send-button-icon svg{width:100%;height:100%}.ogma-send-button:not(:disabled):hover{background-color:var(--hover-color);transform:scale(1.05)}.ogma-send-button:not(:disabled):hover .ogma-send-button-icon{color:var(--active-color)}.ogma-send-button:not(:disabled):active{background-color:var(--hover-color);transform:scale(.95)}.ogma-send-button:not(:disabled):active .ogma-send-button-icon{color:var(--active-color)}.ogma-send-button:disabled{cursor:not-allowed;opacity:.3}.ogma-send-button:disabled .ogma-send-button-icon{color:var(--disabled-color)}.annotation-text-handle .noevents{pointer-events:none;z-index:20}.line-handle,.point-handle{z-index:30}.line-handle.top{cursor:ns-resize;height:var(--handle-width);left:0;width:100%;top:calc(var(--handle-width) * -1)}.line-handle.bottom{cursor:ns-resize;height:var(--handle-width);width:100%;left:0;bottom:calc(var(--handle-width) * -1)}.line-handle.left{cursor:ew-resize;height:100%;top:0;left:calc(var(--handle-width) * -1);width:var(--handle-width)}.line-handle.right{cursor:ew-resize;height:100%;right:calc(var(--handle-width) * -1);top:0;width:var(--handle-width)}.line-handle.top,.line-handle.bottom,.line-handle.left,.line-handle.right{cursor:move}.point-handle{border-radius:50%;background-color:#fff;transform-origin:center;transform:translate(-50%,-50%);border:var(--point-handle-border) solid var(--handle-color);width:var(--point-handle-width);height:var(--point-handle-width)}.point-handle.top-left{transform:translate(-55%,-55%)}.point-handle.top-right{transform:translate(-45%,-55%)}.point-handle.bottom-left{transform:translate(-55%,-45%)}.point-handle.bottom-right{transform:translate(-45%,-45%)}.rotated .point-handle.bottom-left,.rotated .point-handle.top-right{display:none}.point-handle.top-left,.point-handle.bottom-right{cursor:nwse-resize}.point-handle.top-right,.point-handle.bottom-left{cursor:nesw-resize}.point-handle.bottom-left,.point-handle.bottom-right{top:100%}.point-handle.top-left,.point-handle.top-right{top:0}.point-handle.bottom-left,.point-handle.top-left{left:0}.point-handle.bottom-right,.point-handle.top-right{left:100%}.arrow-handle>.handle{height:var(--point-handle-width);width:var(--point-handle-width);border-radius:50%;cursor:move;transform:translate(-50%,-50%)}.arrow-handle>.line{height:var(--handle-width);border-radius:0;cursor:move}.arrow-handle>.point{background-color:var(--handle-background);border:2px solid var(--handle-color)}.annotations-hidden-input{position:absolute;bottom:0;left:0;visibility:hidden;display:block}.active{background-color:#38e}.annotation-text{cursor:pointer}.annotation-text:hover>rect{stroke:var(--handle-color)}.annotation-text a{fill:var(--handle-color)}.annotation-text a:hover{text-decoration:underline}.annotation-hovered,.annotation-selected{background:#f5f5f5;background-color:#f5f5f5}
|
package/dist/types/index.d.ts
CHANGED
|
@@ -143,6 +143,8 @@ export declare interface BoxStyle extends StrokeOptions {
|
|
|
143
143
|
borderRadius?: number;
|
|
144
144
|
/** if true, the box scales with zoom. Default is true */
|
|
145
145
|
scaled?: boolean;
|
|
146
|
+
/** box shadow in CSS format, e.g. "0px 4px 6px rgba(0, 0, 0, 0.1)" */
|
|
147
|
+
boxShadow?: string;
|
|
146
148
|
}
|
|
147
149
|
|
|
148
150
|
/**
|
|
@@ -206,6 +208,17 @@ export declare function canDetachArrowEnd(_arrow: Arrow): boolean;
|
|
|
206
208
|
*/
|
|
207
209
|
export declare function canDetachArrowStart(arrow: Arrow): boolean;
|
|
208
210
|
|
|
211
|
+
/** Event related to a single annotation feature */
|
|
212
|
+
export declare interface ClickEvent {
|
|
213
|
+
/** Annotation ID involved in the event */
|
|
214
|
+
id?: Id;
|
|
215
|
+
/** Mouse position in pixel coordinates */
|
|
216
|
+
position: {
|
|
217
|
+
x: number;
|
|
218
|
+
y: number;
|
|
219
|
+
};
|
|
220
|
+
}
|
|
221
|
+
|
|
209
222
|
export declare type ClientMouseEvent = {
|
|
210
223
|
clientX: number;
|
|
211
224
|
clientY: number;
|
|
@@ -303,6 +316,7 @@ export declare class Control extends default_2<FeatureEvents> {
|
|
|
303
316
|
private links;
|
|
304
317
|
private index;
|
|
305
318
|
private drawing;
|
|
319
|
+
private snapping;
|
|
306
320
|
private selectionManager;
|
|
307
321
|
private historyManager;
|
|
308
322
|
private updateManager;
|
|
@@ -320,7 +334,9 @@ export declare class Control extends default_2<FeatureEvents> {
|
|
|
320
334
|
*/
|
|
321
335
|
setOptions(options?: Partial<ControllerOptions>): {
|
|
322
336
|
showSendButton: boolean;
|
|
337
|
+
showEditButton: boolean;
|
|
323
338
|
sendButtonIcon: string;
|
|
339
|
+
editButtonIcon: string;
|
|
324
340
|
minArrowHeight: number;
|
|
325
341
|
maxArrowHeight: number;
|
|
326
342
|
detectMargin: number;
|
|
@@ -517,6 +533,15 @@ export declare class Control extends default_2<FeatureEvents> {
|
|
|
517
533
|
commentStyle?: Partial<CommentProps>;
|
|
518
534
|
arrowStyle?: Partial<ArrowProperties>;
|
|
519
535
|
}): this;
|
|
536
|
+
/**
|
|
537
|
+
* Place a pre-created annotation by moving it with the cursor.
|
|
538
|
+
* The annotation follows the mouse until the user clicks to place it.
|
|
539
|
+
* Press Escape to cancel.
|
|
540
|
+
*
|
|
541
|
+
* @param annotation The text or box annotation to place
|
|
542
|
+
* @returns this for chaining
|
|
543
|
+
*/
|
|
544
|
+
enablePlacement(annotation: Text_2 | Box): this;
|
|
520
545
|
/**
|
|
521
546
|
* **Advanced API:** Programmatically start drawing a comment at specific coordinates.
|
|
522
547
|
*
|
|
@@ -811,11 +836,20 @@ export declare type ControllerOptions = {
|
|
|
811
836
|
* Show send button in text editor
|
|
812
837
|
*/
|
|
813
838
|
showSendButton: boolean;
|
|
839
|
+
/**
|
|
840
|
+
* Show edit button in text editor
|
|
841
|
+
*/
|
|
842
|
+
showEditButton: boolean;
|
|
814
843
|
/**
|
|
815
844
|
* SVG icon for the send button in text editor
|
|
816
845
|
* Should be a complete SVG string (e.g., '<svg>...</svg>')
|
|
817
846
|
*/
|
|
818
847
|
sendButtonIcon: string;
|
|
848
|
+
/**
|
|
849
|
+
* SVG icon for the edit button in text editor
|
|
850
|
+
* Should be a complete SVG string (e.g., '<svg>...</svg>')
|
|
851
|
+
*/
|
|
852
|
+
editButtonIcon: string;
|
|
819
853
|
/**
|
|
820
854
|
* Minimum height of the arrow in units
|
|
821
855
|
*/
|
|
@@ -948,6 +982,8 @@ export declare type DeepPartial<T> = {
|
|
|
948
982
|
[K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];
|
|
949
983
|
};
|
|
950
984
|
|
|
985
|
+
export declare const DEFAULT_EDIT_ICON = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M12 6.00015H7.33333C6.97971 6.00015 6.64057 6.14063 6.39052 6.39068C6.14048 6.64072 6 6.97986 6 7.33348V16.6668C6 17.0204 6.14048 17.3596 6.39052 17.6096C6.64057 17.8597 6.97971 18.0002 7.33333 18.0002H16.6667C17.0203 18.0002 17.3594 17.8597 17.6095 17.6096C17.8595 17.3596 18 17.0204 18 16.6668V12.0002M16.25 5.75015C16.5152 5.48493 16.8749 5.33594 17.25 5.33594C17.6251 5.33594 17.9848 5.48493 18.25 5.75015C18.5152 6.01537 18.6642 6.37508 18.6642 6.75015C18.6642 7.12522 18.5152 7.48493 18.25 7.75015L12.2413 13.7595C12.083 13.9176 11.8875 14.0334 11.6727 14.0962L9.75733 14.6562C9.69997 14.6729 9.63916 14.6739 9.58127 14.6591C9.52339 14.6442 9.47055 14.6141 9.4283 14.5719C9.38604 14.5296 9.35593 14.4768 9.3411 14.4189C9.32627 14.361 9.32727 14.3002 9.344 14.2428L9.904 12.3275C9.96702 12.1129 10.083 11.9175 10.2413 11.7595L16.25 5.75015Z\" stroke=\"#1A70E5\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n";
|
|
986
|
+
|
|
951
987
|
/** Default send button icon (paper plane) */
|
|
952
988
|
export declare const DEFAULT_SEND_ICON = "<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M22 2L11 13M22 2L15 22L11 13M22 2L2 9L11 13\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>";
|
|
953
989
|
|
|
@@ -1147,6 +1183,18 @@ export declare function detectPolygon(polygon: Polygon, point: Point, threshold?
|
|
|
1147
1183
|
*/
|
|
1148
1184
|
export declare function detectText(a: Text_2, p: Point, threshold?: number, sin?: number, cos?: number, zoom?: number): boolean;
|
|
1149
1185
|
|
|
1186
|
+
/** Event related to a single annotation feature */
|
|
1187
|
+
declare interface DragEvent_2 {
|
|
1188
|
+
/** Annotation ID involved in the event */
|
|
1189
|
+
id: Id;
|
|
1190
|
+
/** Current mouse position in pixel coordinates during the drag */
|
|
1191
|
+
position: {
|
|
1192
|
+
x: number;
|
|
1193
|
+
y: number;
|
|
1194
|
+
};
|
|
1195
|
+
}
|
|
1196
|
+
export { DragEvent_2 as DragEvent }
|
|
1197
|
+
|
|
1150
1198
|
export declare const EVT_ADD = "add";
|
|
1151
1199
|
|
|
1152
1200
|
export declare const EVT_CANCEL_DRAWING = "cancelDrawing";
|
|
@@ -1245,15 +1293,15 @@ export declare type FeatureEvents = {
|
|
|
1245
1293
|
/**
|
|
1246
1294
|
* Event triggered when a drag operation starts on an annotation
|
|
1247
1295
|
*/
|
|
1248
|
-
[EVT_DRAG_START]: () => void;
|
|
1296
|
+
[EVT_DRAG_START]: (evt: DragEvent_2) => void;
|
|
1249
1297
|
/**
|
|
1250
1298
|
* Event triggered when a drag operation ends on an annotation
|
|
1251
1299
|
*/
|
|
1252
|
-
[EVT_DRAG_END]: () => void;
|
|
1300
|
+
[EVT_DRAG_END]: (evt: DragEvent_2) => void;
|
|
1253
1301
|
/**
|
|
1254
1302
|
* Event triggered when a click completes on an annotation (mouseup without drag)
|
|
1255
1303
|
*/
|
|
1256
|
-
[EVT_CLICK]: () => void;
|
|
1304
|
+
[EVT_CLICK]: (evt: ClickEvent) => void;
|
|
1257
1305
|
};
|
|
1258
1306
|
|
|
1259
1307
|
/** Event related to multiple annotation features */
|
|
@@ -1653,7 +1701,7 @@ export declare interface TextStyle extends BoxStyle {
|
|
|
1653
1701
|
}
|
|
1654
1702
|
|
|
1655
1703
|
/** @private */
|
|
1656
|
-
export declare const throttle: <T extends unknown[]>(callback: (...args: T) => void, delay?: number) => (...args: T) => void;
|
|
1704
|
+
export declare const throttle: <T extends unknown[]>(callback: (...args: T) => void, delay?: number, callIfWaiting?: boolean) => (...args: T) => void;
|
|
1657
1705
|
|
|
1658
1706
|
/**
|
|
1659
1707
|
* Toggle comment mode between collapsed and expanded
|