@linkurious/ogma-annotations 2.0.2 → 2.1.0

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{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}
+: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;--annotation-link-color: var(--handle-color);--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}.ogma-annotation-link{fill:var(--annotation-link-color, #38e);color:var(--annotation-link-color, #38e);text-decoration:none;pointer-events:auto;cursor:pointer}.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

@@ -14,10 +14,16 @@ import { Position } from 'geojson';
 import { Size } from '@linkurious/ogma';
 
 /**
- * Automatically lightens or darkens a color (hex or rgba) for highlight purposes.
+ * Adjusts the brightness of a color (hex or rgba) based on its perceived luminance.
+ * For bright colors, the adjustment is applied as darkening; for dark colors, as lightening.
+ *
  * @param color - Color string in hex (#RRGGBB or #RGB) or rgba format
- * @param amount - Amount to lighten/darken (default 20 for lighter and -10 for darker)
- * @returns Highlighted color in rgba format
+ * @param amount - Adjustment factor between -1 and 1:
+ *   - Positive values (0 to 1): lighten dark colors, darken bright colors
+ *   - Negative values (-1 to 0): darken dark colors, lighten bright colors
+ *   - 0: no change
+ *   - Example: 0.2 applies a 20% adjustment, -0.1 applies a -10% adjustment
+ * @returns Adjusted color in rgba format
  */
 export declare function adjustColorBrightness(color: Color, amount: number): RgbaColor;
 
@@ -122,6 +128,19 @@ export declare type Bounds = [number, number, number, number];
 export declare interface Box extends AnnotationFeature<Point_2, BoxProperties> {
 }
 
+/**
+ * Arrow snapped to a rectangular annotation (text, box, comment).
+ * nx/ny are center-relative fractions multiplied by width/height:
+ *   left-center  = { nx: -0.5, ny: 0 }
+ *   right-center = { nx:  0.5, ny: 0 }
+ *   center       = { nx:  0,   ny: 0 }
+ */
+export declare type BoxMagnet = {
+    type: "box";
+    nx: number;
+    ny: number;
+};
+
 /** Properties specific to box annotations. */
 export declare interface BoxProperties extends AnnotationProps {
     type: "box";
@@ -1203,6 +1222,12 @@ declare interface DragEvent_2 {
 }
 export { DragEvent_2 as DragEvent }
 
+/** Arrow snapped at parametric position t (0–1) along an edge path. */
+export declare type EdgeMagnet = {
+    type: "edge";
+    t: number;
+};
+
 export declare const EVT_ADD = "add";
 
 export declare const EVT_CANCEL_DRAWING = "cancelDrawing";
@@ -1233,6 +1258,11 @@ export declare const EVT_UNSELECT = "unselect";
 
 export declare const EVT_UPDATE = "update";
 
+/**
+ * Serialized link stored inside arrow.properties.link.
+ * Uses plain { x, y } for backward compatibility with saved annotations.
+ * Converted to the internal Magnet type by Links.add().
+ */
 export declare type ExportedLink = {
     id: Id;
     side: Side;
@@ -1534,13 +1564,12 @@ export declare interface Link {
     target: Id;
     /** Text or node */
     targetType: TargetType;
-    /**
-     * On which point relative to topleft corner the arrow is tighten, in case of
-     * node, a 0 vector represents the center, otherwise it can be deduced from the arrow itself
-     */
-    magnet: Point;
+    /** Typed snap point — semantics depend on targetType, see Magnet union. */
+    magnet: Magnet;
 }
 
+export declare type Magnet = NodeMagnet | EdgeMagnet | BoxMagnet | PolygonMagnet;
+
 /**
  * Migrates old Polygon-based Box/Text to new Point-based format
  * Called only when annotations are added/loaded
@@ -1548,6 +1577,12 @@ export declare interface Link {
  */
 export declare function migrateBoxOrTextIfNeeded<T extends Annotation>(annotation: T): T;
 
+/** Arrow snapped to the center or perimeter of a node. */
+export declare type NodeMagnet = {
+    type: "node";
+    center: boolean;
+};
+
 export declare const NONE = -1;
 
 export declare function parseColor(color: Color): {
@@ -1569,6 +1604,16 @@ export declare type Point = {
 export declare interface Polygon extends AnnotationFeature<Polygon_2, PolygonProperties> {
 }
 
+/**
+ * Arrow snapped to a polygon annotation.
+ * rx/ry are 0–1 fractions of the polygon's bounding box from its top-left corner.
+ */
+export declare type PolygonMagnet = {
+    type: "polygon";
+    rx: number;
+    ry: number;
+};
+
 export declare interface PolygonProperties extends AnnotationProps {
     type: "polygon";
     style?: PolygonStyle;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linkurious/ogma-annotations",
-  "version": "2.0.2",
+  "version": "2.1.0",
   "description": "Headless annotation plugin for Ogma",
   "type": "module",
   "main": "dist/index.mjs",
@@ -51,8 +51,8 @@
     "bump:minor": "bump2version minor && npm version --no-git-tag-version minor",
     "bump:major": "bump2version major && npm version --no-git-tag-version major",
     "build": "vite build",
-    "lint:ci": "eslint -f checkstyle -o reports/checkstyle.xml --ext ts --ext js src",
-    "lint": "eslint --ext ts --ext js src",
+    "lint": "npx oxlint -c oxlint.json src",
+    "lint:ci": "mkdir -p reports && npx oxlint -c oxlint.json -f checkstyle src > reports/checkstyle.xml",
     "types": "tsc --d -emitDeclarationOnly --outDir dist/types",
     "preview": "vite preview",
     "docs:build": "typedoc && node scripts/organize-sidebar.mjs",
@@ -85,10 +85,10 @@
   "author": "Linkurious SAS",
   "license": "Apache-2.0",
   "peerDependencies": {
-    "@linkurious/ogma": ">=4.5.6 || ^5.0.0"
+    "@linkurious/ogma": ">=5.3.11"
   },
   "dependencies": {
-    "@borgar/textbox": "1.8.0",
+    "@chenglou/pretext": "0.0.7",
     "eventemitter3": "5.0.1",
     "geojson": "0.5.0",
     "rbush": "4.0.1",
@@ -96,7 +96,8 @@
     "zustand": "5.0.7"
   },
   "devDependencies": {
-    "@linkurious/eslint-config-ogma": "1.0.14",
+    "@linkurious/eslint-config-ogma": "2.1.0",
+    "oxlint": "0.16.0",
     "@types/geojson": "7946.0.13",
     "@types/rbush": "4.0.0",
     "get-port": "7.0.0",
@@ -107,25 +108,11 @@
     "typedoc-vitepress-theme": "1.1.2",
     "typescript": "5.3.3",
     "vanilla-colorful": "0.7.2",
-    "vite": "latest",
+    "vite": "6.4.3",
     "vite-plugin-dts": "^4.1.0",
-    "vitest": "latest",
+    "vitest": "3.2.6",
     "vitest-canvas-mock": "1.1.3"
   },
-  "eslintConfig": {
-    "extends": [
-      "@linkurious/eslint-config-ogma"
-    ],
-    "rules": {
-      "@typescript-eslint/no-unused-vars": [
-        "error",
-        {
-          "argsIgnorePattern": "^_",
-          "varsIgnorePattern": "^_"
-        }
-      ]
-    }
-  },
   "prettier": {
     "printWidth": 80,
     "trailingComma": "none"