@linkurious/ogma-annotations 2.0.0 → 2.0.2

package/dist/ogma-annotations.css

@@ -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 32px 0 0;margin:0;border:0;width:100%;height:100%;cursor:text;z-index:1000;resize:none;white-space:break-spaces;background-color:#f5f5f5!important;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{position:absolute;bottom:4px;right:4px;width:24px;height:24px;padding:4px;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}
+: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

@@ -143,6 +143,8 @@ export declare interface BoxStyle extends StrokeOptions {
     borderRadius?: number;
     /** if true, the box scales with zoom. Default is true */
     scaled?: boolean;
+    /** box shadow in CSS format, e.g. "0px 4px 6px rgba(0, 0, 0, 0.1)" */
+    boxShadow?: string;
 }
 
 /**
@@ -206,6 +208,17 @@ export declare function canDetachArrowEnd(_arrow: Arrow): boolean;
  */
 export declare function canDetachArrowStart(arrow: Arrow): boolean;
 
+/** Event related to a single annotation feature */
+export declare interface ClickEvent {
+    /** Annotation ID involved in the event */
+    id?: Id;
+    /** Mouse position in pixel coordinates */
+    position: {
+        x: number;
+        y: number;
+    };
+}
+
 export declare type ClientMouseEvent = {
     clientX: number;
     clientY: number;
@@ -288,6 +301,10 @@ export declare interface CommentStyle extends TextStyle {
     showSendButton?: boolean;
     /** Auto-grow height with content (default: true) */
     autoGrow?: boolean;
+    /** Show drop shadow on comment box (default: true) */
+    shadow?: boolean;
+    /** Expand to full width when selected (default: false) */
+    expandOnSelect?: boolean;
 }
 
 /**
@@ -303,6 +320,7 @@ export declare class Control extends default_2<FeatureEvents> {
     private links;
     private index;
     private drawing;
+    private snapping;
     private selectionManager;
     private historyManager;
     private updateManager;
@@ -320,7 +338,9 @@ export declare class Control extends default_2<FeatureEvents> {
      */
     setOptions(options?: Partial<ControllerOptions>): {
         showSendButton: boolean;
+        showEditButton: boolean;
         sendButtonIcon: string;
+        editButtonIcon: string;
         minArrowHeight: number;
         maxArrowHeight: number;
         detectMargin: number;
@@ -517,6 +537,15 @@ export declare class Control extends default_2<FeatureEvents> {
         commentStyle?: Partial<CommentProps>;
         arrowStyle?: Partial<ArrowProperties>;
     }): this;
+    /**
+     * Place a pre-created annotation by moving it with the cursor.
+     * The annotation follows the mouse until the user clicks to place it.
+     * Press Escape to cancel.
+     *
+     * @param annotation The text or box annotation to place
+     * @returns this for chaining
+     */
+    enablePlacement(annotation: Text_2 | Box): this;
     /**
      * **Advanced API:** Programmatically start drawing a comment at specific coordinates.
      *
@@ -811,11 +840,20 @@ export declare type ControllerOptions = {
      * Show send button in text editor
      */
     showSendButton: boolean;
+    /**
+     * Show edit button in text editor
+     */
+    showEditButton: boolean;
     /**
      * SVG icon for the send button in text editor
      * Should be a complete SVG string (e.g., '<svg>...</svg>')
      */
     sendButtonIcon: string;
+    /**
+     * SVG icon for the edit button in text editor
+     * Should be a complete SVG string (e.g., '<svg>...</svg>')
+     */
+    editButtonIcon: string;
     /**
      * Minimum height of the arrow in units
      */
@@ -948,6 +986,8 @@ export declare type DeepPartial<T> = {
     [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];
 };
 
+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";
+
 /** Default send button icon (paper plane) */
 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>";
 
@@ -1045,6 +1085,10 @@ export declare const defaultCommentOptions: Partial<CommentProps>;
  *   showSendButton: true,
  *   autoGrow: true,
  *
+ *   // Visual effects
+ *   shadow: true,
+ *   expandOnSelect: false,
+ *
  *   // Fixed size (always screen-aligned)
  *   fixedSize: true
  * }
@@ -1147,6 +1191,18 @@ export declare function detectPolygon(polygon: Polygon, point: Point, threshold?
  */
 export declare function detectText(a: Text_2, p: Point, threshold?: number, sin?: number, cos?: number, zoom?: number): boolean;
 
+/** Event related to a single annotation feature */
+declare interface DragEvent_2 {
+    /** Annotation ID involved in the event */
+    id: Id;
+    /** Current mouse position in pixel coordinates during the drag */
+    position: {
+        x: number;
+        y: number;
+    };
+}
+export { DragEvent_2 as DragEvent }
+
 export declare const EVT_ADD = "add";
 
 export declare const EVT_CANCEL_DRAWING = "cancelDrawing";
@@ -1245,15 +1301,15 @@ export declare type FeatureEvents = {
     /**
      * Event triggered when a drag operation starts on an annotation
      */
-    [EVT_DRAG_START]: () => void;
+    [EVT_DRAG_START]: (evt: DragEvent_2) => void;
     /**
      * Event triggered when a drag operation ends on an annotation
      */
-    [EVT_DRAG_END]: () => void;
+    [EVT_DRAG_END]: (evt: DragEvent_2) => void;
     /**
      * Event triggered when a click completes on an annotation (mouseup without drag)
      */
-    [EVT_CLICK]: () => void;
+    [EVT_CLICK]: (evt: ClickEvent) => void;
 };
 
 /** Event related to multiple annotation features */
@@ -1653,7 +1709,7 @@ export declare interface TextStyle extends BoxStyle {
 }
 
 /** @private */
-export declare const throttle: <T extends unknown[]>(callback: (...args: T) => void, delay?: number) => (...args: T) => void;
+export declare const throttle: <T extends unknown[]>(callback: (...args: T) => void, delay?: number, callIfWaiting?: boolean) => (...args: T) => void;
 
 /**
  * Toggle comment mode between collapsed and expanded

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linkurious/ogma-annotations",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "Headless annotation plugin for Ogma",
   "type": "module",
   "main": "dist/index.mjs",
@@ -70,14 +70,17 @@
   "private": false,
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/Linkurious/ogma-prototype.git"
+    "url": "git+https://github.com/Linkurious/ogma-annotations-control.git"
   },
+  "homepage": "https://linkurious.github.io/ogma-annotations-control/",
   "keywords": [
     "annotations",
     "headless",
     "arrow",
     "ogma",
-    "text"
+    "text",
+    "graph",
+    "visualization"
   ],
   "author": "Linkurious SAS",
   "license": "Apache-2.0",