@kortexya/nodus 0.1.0

package/types/tools/SnappingAPI.d.ts

@@ -0,0 +1,71 @@
+import { Nodus } from '../Nodus';
+import { Module } from '../internals/Module';
+import type { Color } from '../publicTypes';
+interface PreferredDistanceOptions {
+    enabled: boolean;
+    ratio: number;
+    tolerance: number;
+    lineWidth: number;
+    lineColor: Color;
+}
+interface NeighboursOptions {
+    enabled: boolean;
+    lineWidth: number;
+    lineColor: Color;
+    tolerance: number;
+    offset: number;
+}
+/**
+ * Snapping API: functions to snap nodes to guidelines while dragging them.
+ *
+ * When enabled, nodes being dragged will snap to axis-aligned guidelines formed
+ * by nearby nodes. Supports center alignment, side alignment, preferred distance
+ * snapping, and equal-distribution snapping between neighbors.
+ */
+export declare class SnappingAPI<ND = any, ED = any> extends Module {
+    private _enabled;
+    private _options;
+    private _xsnap;
+    private _ysnap;
+    private _node;
+    private _nodes;
+    private _r;
+    private _canvasLayer;
+    private _vguideline;
+    private _hguideline;
+    private _gridResolution;
+    constructor(nodus: Nodus<ND, ED>);
+    private _onNodeDragStart;
+    private _onNodeDragEnd;
+    private _cacheViewportData;
+    /**
+     * Called before each drag frame to adjust the node position for snapping.
+     * Returns modified coordinates if snapping occurs.
+     */
+    private _onBeforeDrag;
+    private _snapPreferredDistance;
+    private _snapNeighbours;
+    /**
+     * Enables the snapping mode while dragging the nodes.
+     */
+    enable(options?: {
+        enabled?: boolean;
+        tolerance?: number;
+        centerSnapDistance?: number;
+        sideSnapDistanceFactor?: number;
+        guidelineWidth?: number;
+        guidelineColor?: Color;
+        preferredDistance?: Partial<PreferredDistanceOptions>;
+        neighbours?: Partial<NeighboursOptions>;
+    }): void;
+    private _drawGuideline;
+    /**
+     * Disables snapping mode in nodes dragging.
+     */
+    disable(): void;
+    /**
+     * Indicates if snapping is enabled.
+     */
+    enabled(): boolean;
+}
+export {};

package/types/tools/ToolsAPI.d.ts

@@ -0,0 +1,46 @@
+import { Nodus } from '../Nodus';
+import { Module } from '../internals/Module';
+import { ConnectNodesAPI } from './ConnectNodesAPI';
+import { LassoAPI } from './LassoAPI';
+import { RectangleSelectAPI } from './RectangleSelectAPI';
+import { ResizingAPI } from './ResizingAPI';
+import { RewiringAPI } from './RewiringAPI';
+import { SnappingAPI } from './SnappingAPI';
+import { TooltipAPI } from './TooltipAPI';
+/**
+ * Tools API: Main aggregator class that creates and holds instances of all
+ * interactive tool sub-APIs.
+ *
+ * Provides access to:
+ * - `lasso` - Freeform selection by drawing a lasso shape
+ * - `connectNodes` - Draw edges between nodes
+ * - `rectangleSelect` - Box selection by drawing a rectangle
+ * - `resize` - Resize selected nodes via drag handles
+ * - `rewire` - Change edge endpoints by dragging handles
+ * - `snapping` - Snap nodes to guidelines while dragging
+ * - `tooltip` - Display tooltips on hover/click/right-click/double-click
+ *
+ * Usage:
+ * ```ts
+ * const tools = new ToolsAPI(nodus);
+ * tools.lasso.enable();
+ * tools.tooltip.onNodeHover(node => `<p>${node.getId()}</p>`);
+ * ```
+ */
+export declare class ToolsAPI<ND = any, ED = any> extends Module {
+    /** Lasso selection tool for freeform node/edge selection. */
+    lasso: LassoAPI<ND, ED>;
+    /** Connect nodes tool for drawing new edges between nodes. */
+    connectNodes: ConnectNodesAPI<ND, ED>;
+    /** Rectangle selection tool for box-based node/edge selection. */
+    rectangleSelect: RectangleSelectAPI<ND, ED>;
+    /** Node resize tool with drag handles on bounding box corners. */
+    resize: ResizingAPI<ND, ED>;
+    /** Edge rewiring tool to change edge source/target by dragging handles. */
+    rewire: RewiringAPI<ND, ED>;
+    /** Snapping tool to align nodes to guidelines while dragging. */
+    snapping: SnappingAPI<ND, ED>;
+    /** Tooltip tool for hover/click tooltips on nodes, edges, and background. */
+    tooltip: TooltipAPI<ND, ED>;
+    constructor(nodus: Nodus<ND, ED>);
+}

package/types/tools/TooltipAPI.d.ts

@@ -0,0 +1,141 @@
+import { Nodus } from '../Nodus';
+import { Module } from '../internals/Module';
+type TooltipPosition = 'top' | 'bottom' | 'left' | 'right' | 'cssDefined';
+/**
+ * Tooltip API: functions to display tooltips when hovering or clicking on
+ * nodes and edges.
+ *
+ * Supports hover, click, right-click, and double-click triggers for both
+ * nodes and edges, as well as background clicks. Tooltips are positioned
+ * relative to the target element and can auto-adjust to stay within the canvas.
+ */
+export declare class TooltipAPI<ND = any, ED = any> extends Module {
+    private _handlers;
+    private _currentHandlerName;
+    private _tooltip;
+    private _isHover;
+    private _x;
+    private _y;
+    private _elt;
+    private _timeout;
+    constructor(nodus: Nodus<ND, ED>);
+    private _init;
+    private _setHandler;
+    private _hideTooltip;
+    private _createInteraction;
+    private _refreshTooltip;
+    private _schedule;
+    private _showTooltip;
+    /**
+     * Display a tooltip when a node is hovered.
+     */
+    onNodeHover(handler: (node: any) => string | Promise<string>, options?: {
+        position?: TooltipPosition;
+        autoAdjust?: boolean;
+        delay?: number;
+        className?: string;
+    }): void;
+    /**
+     * Display a tooltip when a node is left-clicked.
+     */
+    onNodeClick(handler: (node: any) => string | Promise<string>, options?: {
+        position?: TooltipPosition;
+        autoAdjust?: boolean;
+        delay?: number;
+        className?: string;
+    }): void;
+    /**
+     * Display a tooltip when a node is right-clicked.
+     */
+    onNodeRightClick(handler: (node: any) => string | Promise<string>, options?: {
+        position?: TooltipPosition;
+        autoAdjust?: boolean;
+        delay?: number;
+        className?: string;
+    }): void;
+    /**
+     * Display a tooltip when a node is double-clicked.
+     */
+    onNodeDoubleClick(handler: (node: any) => string | Promise<string>, options?: {
+        position?: TooltipPosition;
+        autoAdjust?: boolean;
+        delay?: number;
+        className?: string;
+    }): void;
+    /**
+     * Display a tooltip when an edge is hovered.
+     */
+    onEdgeHover(handler: (edge: any) => string | Promise<string>, options?: {
+        position?: TooltipPosition;
+        autoAdjust?: boolean;
+        delay?: number;
+        className?: string;
+    }): void;
+    /**
+     * Display a tooltip when an edge is left-clicked.
+     */
+    onEdgeClick(handler: (edge: any) => string | Promise<string>, options?: {
+        position?: TooltipPosition;
+        autoAdjust?: boolean;
+        delay?: number;
+        className?: string;
+    }): void;
+    /**
+     * Display a tooltip when an edge is right-clicked.
+     */
+    onEdgeRightClick(handler: (edge: any) => string | Promise<string>, options?: {
+        position?: TooltipPosition;
+        autoAdjust?: boolean;
+        delay?: number;
+        className?: string;
+    }): void;
+    /**
+     * Display a tooltip when an edge is double-clicked.
+     */
+    onEdgeDoubleClick(handler: (edge: any) => string | Promise<string>, options?: {
+        position?: TooltipPosition;
+        autoAdjust?: boolean;
+        delay?: number;
+        className?: string;
+    }): void;
+    /**
+     * Display a tooltip when the background is left-clicked.
+     */
+    onBackgroundClick(handler: () => string | Promise<string>, options?: {
+        position?: TooltipPosition;
+        autoAdjust?: boolean;
+        delay?: number;
+        className?: string;
+    }): void;
+    /**
+     * Display a tooltip when the background is right-clicked.
+     */
+    onBackgroundRightClick(handler: () => string | Promise<string>, options?: {
+        position?: TooltipPosition;
+        autoAdjust?: boolean;
+        delay?: number;
+        className?: string;
+    }): void;
+    /**
+     * Display a tooltip when the background is double-clicked.
+     */
+    onBackgroundDoubleClick(handler: () => string | Promise<string>, options?: {
+        position?: TooltipPosition;
+        autoAdjust?: boolean;
+        delay?: number;
+        className?: string;
+    }): void;
+    /**
+     * Refresh the current tooltip.
+     */
+    refresh(): void;
+    /**
+     * Indicates if a tooltip is currently displayed.
+     */
+    isShown(): boolean;
+    /**
+     * Hide the tooltip that is currently being displayed.
+     */
+    hide(): void;
+}
+export {};