@umbraci/jsmind
Version:
jsMind is a pure javascript library for mindmap, it base on html5 canvas. jsMind was released under BSD license, you can embed it in any project, if only you observe the license.
263 lines (262 loc) • 9.28 kB
TypeScript
/**
* Draggable node plugin for jsMind.
*/
export class DraggableNode {
/**
* Create draggable node plugin instance.
* @param {import('../jsmind.js').default} jm - jsMind instance
* @param {Partial<DraggableNodeOptions>} options - Plugin options
*/
constructor(jm: import("../jsmind.js").default, options: Partial<DraggableNodeOptions>);
version: string;
/** @type {import('../jsmind.js').default} */
jm: import("../jsmind.js").default;
/** @type {DraggableNodeOptions} */
options: DraggableNodeOptions;
/** @type {boolean} */
is_svg_engine: boolean;
/** @type {HTMLCanvasElement|SVGSVGElement|null} */
e_canvas: HTMLCanvasElement | SVGSVGElement | null;
/** @type {CanvasRenderingContext2D|null} */
canvas_ctx: CanvasRenderingContext2D | null;
/** @type {SVGPathElement|null} */
helper_line: SVGPathElement | null;
/** @type {HTMLElement|null} */
shadow: HTMLElement | null;
/** @type {number} */
shadow_p_x: number;
/** @type {number} */
shadow_p_y: number;
/** @type {number} */
shadow_w: number;
/** @type {number} */
shadow_h: number;
/** @type {import('../jsmind.node.js').Node|null} */
active_node: import("../jsmind.node.js").Node | null;
/** @type {import('../jsmind.node.js').Node|null} */
target_node: import("../jsmind.node.js").Node | null;
/** @type {number|null} */
target_direct: number | null;
/** @type {number} */
client_w: number;
/** @type {number} */
client_h: number;
/** @type {number} */
offset_x: number;
/** @type {number} */
offset_y: number;
/** @type {number} */
hlookup_delay: number;
/** @type {number} */
hlookup_timer: number;
/** @type {boolean} */
capture: boolean;
/** @type {boolean} */
moved: boolean;
/** @type {boolean} */
canvas_draggable: boolean;
/** @type {HTMLElement} */
view_panel: HTMLElement;
/** @type {DOMRect|null} */
view_panel_rect: DOMRect | null;
/** Initialize the draggable node plugin. */
init(): void;
/** Resize canvas/SVG and shadow elements. */
resize(): void;
/** Create canvas or SVG for drawing drag lines. */
create_canvas(): void;
/**
* Create SVG element with proper namespace.
* @param {string} tag - SVG tag name
* @returns {SVGElement}
* @private
*/
private _create_svg_element;
create_shadow(): void;
/**
* Reset shadow element style and cache its size.
* @param {HTMLElement} el - The node element to mirror as shadow
*/
reset_shadow(el: HTMLElement): void;
/** Show the shadow element. */
show_shadow(): void;
/** Hide the shadow element. */
hide_shadow(): void;
/**
* Draw a helper line between the shadow and target node.
* @param {{x:number,y:number}} shadow_p - Shadow anchor point
* @param {{x:number,y:number}} node_p - Target node anchor point
* @param {boolean} invalid - Whether current target is invalid
*/
magnet_shadow(shadow_p: {
x: number;
y: number;
}, node_p: {
x: number;
y: number;
}, invalid: boolean): void;
/** Clear helper lines from canvas or SVG. */
clear_lines(): void;
/**
* Draw a straight helper line on canvas.
* @param {number} x1
* @param {number} y1
* @param {number} x2
* @param {number} y2
*/
canvas_lineto(x1: number, y1: number, x2: number, y2: number): void;
/**
* Draw a helper line on SVG using bezier curve.
* Reuses the line drawing logic from SvgGraph.
* @param {number} x1 - Start x coordinate
* @param {number} y1 - Start y coordinate
* @param {number} x2 - End x coordinate
* @param {number} y2 - End y coordinate
* @param {string} color - Line color
*/
svg_draw_line(x1: number, y1: number, x2: number, y2: number, color: string): void;
/**
* Draw bezier curve to SVG path element.
* Reuses logic from SvgGraph._bezier_to.
* @param {SVGPathElement} path - SVG path element
* @param {number} x1 - Start x coordinate
* @param {number} y1 - Start y coordinate
* @param {number} x2 - End x coordinate
* @param {number} y2 - End y coordinate
* @private
*/
private _svg_bezier_to;
/** Bind mouse/touch events for dragging. */
event_bind(): void;
/**
* Begin dragging interaction.
* @param {MouseEvent|TouchEvent} e - Pointer down event
*/
dragstart(e: MouseEvent | TouchEvent): void;
view_draggable: boolean;
client_hw: number;
client_hh: number;
/**
* Drag handler to move shadow and auto-scroll container.
* @param {MouseEvent|TouchEvent} e - Pointer move event
*/
drag(e: MouseEvent | TouchEvent): void;
/**
* Finish dragging, move the node if applicable.
* @param {MouseEvent|TouchEvent} e - Pointer up event
*/
dragend(e: MouseEvent | TouchEvent): void;
/**
* Find the closest node element from an event target.
* @param {HTMLElement} el - Current DOM element
* @returns {HTMLElement|null} Matched node element or null
*/
find_node_element(el: HTMLElement): HTMLElement | null;
/** Recompute target node under the shadow and draw helper. */
lookup_target_node(): void;
/**
* Get X coordinate of root node center.
* @returns {number}
*/
get_root_x(): number;
/**
* Lookup overlapping node's parent near the shadow position.
* @param {number} direction - Direction constant
* @returns {import('../jsmind.node.js').Node|null}
*/
lookup_overlapping_node_parent(direction: number): import("../jsmind.node.js").Node | null;
/**
* Find node's parent by a screen location.
* @param {number} x - Client X
* @param {number} y - Client Y
* @returns {import('../jsmind.node.js').Node|null}
*/
lookup_node_parent_by_location(x: number, y: number): import("../jsmind.node.js").Node | null;
/**
* Lookup the closest node along a direction.
* @param {number} direction
* @returns {import('../jsmind.node.js').Node}
*/
lookup_close_node(direction: number): import("../jsmind.node.js").Node;
/**
* Check if shadow is on the target side of a node.
* @param {import('../jsmind.node.js').Node} node
* @param {number} dir
* @returns {boolean}
*/
shadow_on_target_side(node: import("../jsmind.node.js").Node, dir: number): boolean;
/**
* Distance from shadow to the right side of a node.
* @param {import('../jsmind.node.js').Node} node
* @returns {number}
*/
shadow_to_right_of_node(node: import("../jsmind.node.js").Node): number;
/**
* Distance from shadow to the left side of a node.
* @param {import('../jsmind.node.js').Node} node
* @returns {number}
*/
shadow_to_left_of_node(node: import("../jsmind.node.js").Node): number;
/**
* Vertical distance between shadow centerline and node centerline.
* @param {import('../jsmind.node.js').Node} node
* @returns {number}
*/
shadow_to_base_line_of_node(node: import("../jsmind.node.js").Node): number;
/**
* Manhattan distance to a node along a direction.
* @param {import('../jsmind.node.js').Node} node
* @param {number} dir
* @returns {number}
*/
shadow_to_node(node: import("../jsmind.node.js").Node, dir: number): number;
/**
* Calculate connection points of a node and the shadow.
* @param {import('../jsmind.node.js').Node} node
* @param {number} dir
* @returns {{sp:{x:number,y:number}, np:{x:number,y:number}}}
*/
calc_point_of_node(node: import("../jsmind.node.js").Node, dir: number): {
sp: {
x: number;
y: number;
};
np: {
x: number;
y: number;
};
};
/**
* Move a node to a new parent/position.
* @param {import('../jsmind.node.js').Node} src_node
* @param {import('../jsmind.node.js').Node|null} target_node
* @param {number|null} target_direct
*/
move_node(src_node: import("../jsmind.node.js").Node, target_node: import("../jsmind.node.js").Node | null, target_direct: number | null): void;
/**
* Handle jsMind events.
* @param {number|string} type - Event type
* @param {object} [data] - Event data
*/
jm_event_handle(type: number | string, data?: object): void;
}
/**
* Draggable node plugin registration.
* @type {import('../jsmind.plugin.js').Plugin<Partial<DraggableNodeOptions>>}
*/
export const draggable_plugin: import("../jsmind.plugin.js").Plugin<Partial<DraggableNodeOptions>>;
export default DraggableNode;
/**
* Default options for draggable node plugin.
*/
export type DraggableNodeOptions = {
line_width?: number;
line_color?: string;
line_color_invalid?: string;
lookup_delay?: number;
lookup_interval?: number;
scrolling_trigger_width?: number;
scrolling_step_length?: number;
shadow_node_class_name?: string;
validate_drag?: (draggedNode: import("../jsmind.node.js").Node, targetNode: import("../jsmind.node.js").Node | null) => boolean;
};