@linkurious/ogma-annotations 1.1.12 → 1.1.14

package/dist/style.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}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}.annotation-text-handle textarea{outline:none;margin:0;border:0;width:100%;height:100%;cursor:text;padding:0;z-index:1000;resize:none;white-space:break-spaces;background:transparent;overflow:hidden}.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(-75%,-75%)}.point-handle.top-right{transform:translate(-25%,-75%)}.point-handle.bottom-left{transform:translate(-75%,-25%)}.point-handle.bottom-right{transform:translate(-25%,-25%)}.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}.annotations-hidden-input{position:absolute;bottom:0;left:0;visibility:hidden;display:block}.active{background-color:#38e}.annotation-text{pointer-events:visible;cursor:pointer}.annotation-text:hover>rect{stroke:var(--handle-color)}.annotation-text a{fill:var(--handle-color)}.annotation-text a:hover{text-decoration:underline}
+: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}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}.annotation-text-handle textarea{outline:none;margin:0;border:0;width:100%;height:100%;cursor:text;padding:0;z-index:1000;resize:none;white-space:break-spaces;background:transparent;overflow:hidden}.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%)}.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{pointer-events:visible;cursor:pointer}.annotation-text:hover>rect{stroke:var(--handle-color)}.annotation-text a{fill:var(--handle-color)}.annotation-text a:hover{text-decoration:underline}

package/dist/types/Editor/Arrows/index.d.ts

@@ -1,7 +1,7 @@
 import Ogma, { Point } from "@linkurious/ogma";
 import { createArrow, defaultOptions, defaultStyle } from "./defaults";
 import { Arrow, ControllerOptions } from "../../types";
-import Editor from "../base";
+import { Editor } from "../base";
 /**
  * @class Arrows
  * Draw and edit arrows

package/dist/types/Editor/Arrows/render.d.ts

@@ -1,4 +1,4 @@
-import { Arrow, ArrowStyles } from '../../types';
+import { Arrow, ArrowStyles } from "../../types";
 /**
  * @function getArrowHeight
  * @param arrow The arrow to measure

package/dist/types/Editor/Texts/index.d.ts

@@ -1,7 +1,7 @@
 import Ogma, { Point } from "@linkurious/ogma";
 import { createText, defaultControllerOptions, defaultOptions, defaultStyle } from "./defaults";
 import { ControllerOptions, Id, Text } from "../../types";
-import Editor from "../base";
+import { Editor } from "../base";
 /**
  * @class Texts
  * Draw, update, edit texts

package/dist/types/Editor/base.d.ts

@@ -6,7 +6,7 @@ import { Annotation, Events, Id } from "../types";
  * Abstract class to display Texts and Arrows, provide add/remove/update and mouse events
  * Modifying annotation is handled by the child classes, it is too specific
  */
-export default abstract class Editor<T extends Annotation> extends eventEmmitter<Events<T>> {
+export declare abstract class Editor<T extends Annotation> extends eventEmmitter<Events<T>> {
     protected ogma: Ogma;
     protected elements: T[];
     protected layer: SVGLayer;
@@ -17,7 +17,6 @@ export default abstract class Editor<T extends Annotation> extends eventEmmitter
     protected shouldDetect: boolean;
     protected isDragging: boolean;
     protected showeditorOnHover: boolean;
-    protected maxHandleScale: number;
     constructor(ogma: Ogma, editorHtml: string);
     private _onKeyUp;
     protected _canRemove(): boolean;
@@ -34,7 +33,7 @@ export default abstract class Editor<T extends Annotation> extends eventEmmitter
      * @method update
      * Updates an annotation (position, color etc)
      * @param id Id of the annotation to update
-     * @param new params of the annotation
+     * @param element params of the annotation
      */
     update(id: Id, element: Partial<T>): void;
     updateAnnotation(target: T, element: Partial<T>): void;

package/dist/types/links.d.ts

@@ -1,5 +1,5 @@
-import { Point } from '@linkurious/ogma';
-import { Arrow, Id, TargetType, Link, Side } from './types';
+import { Point } from "@linkurious/ogma";
+import { Arrow, Id, TargetType, Link, Side } from "./types";
 /**
  * Class that implements linking between annotation arrows and different items.
  * An arrow can be connected to a text or to a node. It supports double indexing

package/dist/types/types.d.ts

@@ -1,10 +1,9 @@
-import { Point } from '@linkurious/ogma';
-import type { Feature, FeatureCollection, Geometry, GeometryObject, LineString, Polygon } from 'geojson';
-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';
+import type { Feature, FeatureCollection, Geometry, GeometryObject, LineString, Polygon } from "geojson";
+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";
 export declare const isArrow: (a: AnnotationFeature<Geometry, AnnotationProps>) => a is Arrow;
 export declare const isText: (a: AnnotationFeature<Geometry, AnnotationProps>) => a is Text;
 export declare const isAnnotationCollection: (a: AnnotationFeature<Geometry, AnnotationProps> | FeatureCollection) => a is AnnotationCollection;
-type AnnotationType = 'arrow' | 'text';
+type AnnotationType = "arrow" | "text";
 export interface AnnotationProps {
     type: AnnotationType;
     style?: unknown;
@@ -17,14 +16,18 @@ export interface ArrowStyles extends StrokeOptions {
     tail?: Extremity;
     head?: Extremity;
 }
+export type Point = {
+    x: number;
+    y: number;
+};
 type ExportedLink = {
     id: Id;
-    side: 'start' | 'end';
-    type: 'node' | 'text';
+    side: "start" | "end";
+    type: "node" | "text";
     magnet?: Point;
 };
 export interface ArrowProperties extends AnnotationProps {
-    type: 'arrow';
+    type: "arrow";
     style?: ArrowStyles;
     link?: Partial<Record<Side, ExportedLink>>;
 }
@@ -33,7 +36,7 @@ export interface AnnotationCollection extends FeatureCollection {
     features: (Arrow | Text)[];
 }
 export type StrokeOptions = {
-    strokeType?: 'plain' | 'dashed' | 'none';
+    strokeType?: "plain" | "dashed" | "none";
     strokeColor?: string;
     strokeWidth?: number;
 };
@@ -50,19 +53,19 @@ export interface TextStyle extends StrokeOptions {
     padding?: number;
 }
 export interface TextProperties extends AnnotationProps {
-    type: 'text';
+    type: "text";
     /**text to display*/
     content: string;
     style?: TextStyle;
 }
 export type Text = AnnotationFeature<Polygon, TextProperties>;
 export type Stroke = {
-    type: 'plain' | 'dashed' | 'none';
+    type: "plain" | "dashed" | "none";
     color: string;
     width: number;
 };
 export type StrokeStyle = Stroke;
-export type Extremity = 'none' | 'arrow' | 'arrow-plain';
+export type Extremity = "none" | "arrow" | "arrow-plain";
 export type AnnotationOptions = {
     handleSize: number;
     placeholder: string;
@@ -73,7 +76,7 @@ export type Events<T> = {
     [EVT_SELECT]: (evt: T) => void;
     [EVT_UNSELECT]: (evt: T) => void;
     [EVT_DRAG_START]: (evt: T) => void;
-    [EVT_DRAG]: (evt: T, key: 'line' | 'start' | 'end' | 'text') => void;
+    [EVT_DRAG]: (evt: T, key: "line" | "start" | "end" | "text") => void;
     [EVT_DRAG_END]: (evt: T) => void;
     [EVT_REMOVE]: (evt: T) => void;
     [EVT_ADD]: (evt: T) => void;
@@ -120,16 +123,16 @@ export type FeatureEvents = {
     /**
      * Event trigerred when dragging an arrow or a text
      */
-    [EVT_DRAG]: (evt: Arrow | Text, key: 'line' | 'start' | 'end' | 'text') => void;
+    [EVT_DRAG]: (evt: Arrow | Text, key: "line" | "start" | "end" | "text") => void;
     /**
      * Event trigerred when stopped dragging an arrow or a text
      */
     [EVT_DRAG_END]: (evt: Arrow | Text) => void;
 };
-export type TargetType = 'text' | 'node';
-export type Side = 'start' | 'end';
+export type TargetType = "text" | "node";
+export type Side = "start" | "end";
 export type Link = {
-    /** arrow atteched to the text or node */
+    /** arrow attached to the text or node */
     arrow: Id;
     /** id of the text the arrow is attached to */
     id: Id;
@@ -146,6 +149,9 @@ export type Link = {
     connectionPoint: Point;
 };
 export type ControllerOptions = {
+    /**
+     * The color of the magnet points
+     */
     magnetColor: string;
     /**
      * The radius in which arrows are attracted
@@ -181,4 +187,5 @@ export type ControllerOptions = {
     maxArrowHeight: number;
 };
 export type Annotation = Arrow | Text;
+export type Vector = Point;
 export {};

package/dist/types/vec.d.ts

@@ -0,0 +1,15 @@
+import { Vector } from "./types";
+export declare const subtract: (a: Vector, b: Vector) => Vector;
+export declare const length: (v: Vector) => number;
+export declare const invert: (v: Vector) => Vector;
+export declare const clone: (v: Vector) => {
+    x: number;
+    y: number;
+};
+export declare const normalize: (v: Vector) => Vector;
+export declare const add: (a: Vector, b: Vector) => Vector;
+export declare const mul: (v: Vector, s: number) => Vector;
+export declare const multiply: (a: Vector, b: Vector) => Vector;
+export declare const rotateRadians: (v: Vector, angle: number) => Vector;
+export declare const divScalar: (v: Vector, s: number) => Vector;
+export declare const dot: (a: Vector, b: Vector) => number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linkurious/ogma-annotations",
-  "version": "1.1.12",
+  "version": "1.1.14",
   "description": "Headless annotation plugin for Ogma",
   "main": "dist/index.mjs",
   "module": "dist/index.mjs",
@@ -29,8 +29,8 @@
   "scripts": {
     "prepare": "playwright install",
     "start": "npm run dev",
-    "dev": "vite -c web/vite.config.ts",
-    "build:ui": "vite build -c vite.config-ui.ts",
+    "dev": "vite -c web/vite.config.mts",
+    "build:demo": "vite build -c web/vite.config.mts",
     "prebuild": "rm -rf dist",
     "bump:patch": "bump2version patch && npm version --no-git-tag-version patch",
     "bump:minor": "bump2version minor && npm version --no-git-tag-version minor",
@@ -40,7 +40,9 @@
     "lint": "eslint --ext ts --ext js src",
     "types": "tsc --d -emitDeclarationOnly --outDir dist/types",
     "preview": "vite preview",
-    "docs:build": "typedoc --plugin typedoc-plugin-markdown --out ../../docs/annotations src/index.ts",
+    "docs:build": "typedoc --plugin typedoc-plugin-markdown --out ../../docs/api src/index.ts",
+    "postdocs:build": "npm run build:demo",
+    "test": "npm run test:unit",
     "test:unit": "vitest run -c test/unit/vitest.config.mts",
     "test:watch": "vitest watch -c test/unit/vitest.config.mts",
     "test:e2e": "vitest run -c test/e2e/vitest.config.mts",
@@ -64,28 +66,27 @@
   "author": "Linkurious SAS",
   "license": "Apache-2.0",
   "peerDependencies": {
-    "@linkurious/ogma": ">=5.0.4"
+    "@linkurious/ogma": ">=4.5.6 || ^5.0.0"
   },
   "dependencies": {
     "@borgar/textbox": "1.6.0",
-    "eventemitter3": "5.0.1",
-    "vector2js": "2.0.1"
+    "eventemitter3": "5.0.1"
   },
   "devDependencies": {
     "@linkurious/eslint-config-ogma": "^1.0.9",
     "@types/geojson": "7946.0.13",
-    "@types/vector2js": "2.0.2",
     "canvas": "2.11.2",
     "eslint": "8.56.0",
     "get-port": "7.0.0",
     "jsdom": "24.0.0",
     "playwright": "1.42.1",
+    "typedoc": "^0.25.13",
+    "typedoc-plugin-markdown": "^3.17.1",
     "typescript": "5.3.3",
     "vite": "5.2.0",
     "vitest": "1.4.0"
   },
   "eslintConfig": {
-    "parser": "@typescript-eslint/parser",
     "extends": [
       "@linkurious/eslint-config-ogma"
     ]