@umbraci/jsmind 0.10.14 → 0.10.17

package/types/generated/jsmind.view_provider.d.ts

@@ -0,0 +1,347 @@
+export class ViewProvider {
+    /**
+     * View layer: DOM nodes, editor, graph and zoom.
+     * @param {import('./jsmind.js').default} jm - jsMind instance
+     * @param {{
+     *   engine: 'canvas'|'svg',
+     *   enable_device_pixel_ratio: boolean,
+     *   hmargin: number,
+     *   vmargin: number,
+     *   line_width: number,
+     *   line_color: string,
+     *   line_style: 'curved'|'straight',
+     *   custom_line_render?: Function,
+     *   draggable: boolean,
+     *   hide_scrollbars_when_draggable: boolean,
+     *   node_overflow: 'hidden'|'wrap',
+     *   zoom: {min:number, max:number, step:number, mask_key:number},
+     *   custom_node_render?: Function,
+     *   expander_style: 'char'|'number'
+     * }} options - View configuration options
+     */
+    constructor(jm: import("./jsmind.js").default, options: {
+        engine: "canvas" | "svg";
+        enable_device_pixel_ratio: boolean;
+        hmargin: number;
+        vmargin: number;
+        line_width: number;
+        line_color: string;
+        line_style: "curved" | "straight";
+        custom_line_render?: Function;
+        draggable: boolean;
+        hide_scrollbars_when_draggable: boolean;
+        node_overflow: "hidden" | "wrap";
+        zoom: {
+            min: number;
+            max: number;
+            step: number;
+            mask_key: number;
+        };
+        custom_node_render?: Function;
+        expander_style: "char" | "number";
+    });
+    opts: {
+        engine: "canvas" | "svg";
+        enable_device_pixel_ratio: boolean;
+        hmargin: number;
+        vmargin: number;
+        line_width: number;
+        line_color: string;
+        line_style: "curved" | "straight";
+        custom_line_render?: Function;
+        draggable: boolean;
+        hide_scrollbars_when_draggable: boolean;
+        node_overflow: "hidden" | "wrap";
+        zoom: {
+            min: number;
+            max: number;
+            step: number;
+            mask_key: number;
+        };
+        custom_node_render?: Function;
+        expander_style: "char" | "number";
+    };
+    jm: import("./jsmind.js").default;
+    layout: import("./jsmind.layout_provider.js").LayoutProvider;
+    container: HTMLElement;
+    e_panel: HTMLElement;
+    e_nodes: HTMLElement;
+    size: {
+        w: number;
+        h: number;
+    };
+    selected_node: import("./jsmind.node.js").Node;
+    editing_node: import("./jsmind.node.js").Node;
+    graph: {
+        view: ViewProvider;
+        opts: {
+            engine: "canvas" | "svg";
+            enable_device_pixel_ratio: boolean;
+            hmargin: number;
+            vmargin: number;
+            line_width: number;
+            line_color: string;
+            line_style: "curved" | "straight";
+            custom_line_render?: Function;
+            draggable: boolean;
+            hide_scrollbars_when_draggable: boolean;
+            node_overflow: "hidden" | "wrap";
+            zoom: {
+                min: number;
+                max: number;
+                step: number;
+                mask_key: number;
+            };
+            custom_node_render?: Function;
+            expander_style: "char" | "number";
+        };
+        e_svg: SVGElement;
+        size: {
+            w: number;
+            h: number;
+        };
+        lines: SVGPathElement[];
+        line_drawing: {
+            straight: (path: SVGPathElement, x1: number, y1: number, x2: number, y2: number) => void;
+            curved: (path: SVGPathElement, x1: number, y1: number, x2: number, y2: number) => void;
+        };
+        init_line_render(): void;
+        drawing: (path: SVGPathElement, x1: number, y1: number, x2: number, y2: number) => void;
+        element(): SVGSVGElement;
+        set_size(w: number, h: number): void;
+        clear(): void;
+        draw_line(pout: {
+            x: number;
+            y: number;
+        }, pin: {
+            x: number;
+            y: number;
+        }, offset: {
+            x: number;
+            y: number;
+        }, color?: string | undefined): void;
+        copy_to(dest_canvas_ctx: CanvasRenderingContext2D, callback?: (() => void) | undefined): void;
+        _bezier_to(path: SVGPathElement, x1: number, y1: number, x2: number, y2: number): void;
+        _line_to(path: SVGPathElement, x1: number, y1: number, x2: number, y2: number): void;
+    } | {
+        opts: {
+            engine: "canvas" | "svg";
+            enable_device_pixel_ratio: boolean;
+            hmargin: number;
+            vmargin: number;
+            line_width: number;
+            line_color: string;
+            line_style: "curved" | "straight";
+            custom_line_render?: Function;
+            draggable: boolean;
+            hide_scrollbars_when_draggable: boolean;
+            node_overflow: "hidden" | "wrap";
+            zoom: {
+                min: number;
+                max: number;
+                step: number;
+                mask_key: number;
+            };
+            custom_node_render?: Function;
+            expander_style: "char" | "number";
+        };
+        e_canvas: HTMLElement;
+        canvas_ctx: CanvasRenderingContext2D;
+        size: {
+            w: number;
+            h: number;
+        };
+        line_drawing: {
+            straight: (ctx: CanvasRenderingContext2D, x1: number, y1: number, x2: number, y2: number) => void;
+            curved: (ctx: CanvasRenderingContext2D, x1: number, y1: number, x2: number, y2: number) => void;
+        };
+        dpr: number;
+        init_line_render(): void;
+        drawing: (ctx: CanvasRenderingContext2D, x1: number, y1: number, x2: number, y2: number) => void;
+        element(): HTMLCanvasElement;
+        set_size(w: number, h: number): void;
+        clear(): void;
+        draw_line(pout: {
+            x: number;
+            y: number;
+        }, pin: {
+            x: number;
+            y: number;
+        }, offset: {
+            x: number;
+            y: number;
+        }, color?: string | undefined): void;
+        copy_to(dest_canvas_ctx: CanvasRenderingContext2D, callback?: (() => void) | undefined): void;
+        _bezier_to(ctx: CanvasRenderingContext2D, x1: number, y1: number, x2: number, y2: number): void;
+        _line_to(ctx: CanvasRenderingContext2D, x1: number, y1: number, x2: number, y2: number): void;
+    };
+    render_node: (ele: HTMLElement, node: import("./jsmind.node.js").Node) => void;
+    zoom_current: number;
+    device_pixel_ratio: number;
+    _initialized: boolean;
+    /** Initialize DOM structure, graph and editor. */
+    init(): void;
+    e_editor: HTMLElement;
+    /**
+     * Add a delegated event handler.
+     * @param {import('./jsmind.js').default} obj
+     * @param {string} event_name
+     * @param {(e:Event)=>void} event_handle
+     * @param {boolean=} capture_by_panel
+     */
+    add_event(obj: import("./jsmind.js").default, event_name: string, event_handle: (e: Event) => void, capture_by_panel?: boolean | undefined): void;
+    /**
+     * @param {HTMLElement|null} element
+     * @returns {string|null}
+     */
+    get_binded_nodeid(element: HTMLElement | null): string | null;
+    /**
+     * @param {HTMLElement|null} element
+     * @returns {boolean}
+     */
+    is_node(element: HTMLElement | null): boolean;
+    /**
+     * @param {HTMLElement} element
+     * @returns {boolean}
+     */
+    is_expander(element: HTMLElement): boolean;
+    reset(): void;
+    reset_theme(): void;
+    /** Reset custom styles for all nodes. */
+    reset_custom_style(): void;
+    /** Load and initialize the view. */
+    load(): void;
+    /** Calculate and set the expanded canvas size. */
+    expand_size(): void;
+    /**
+     * Initialize size data for a node.
+     * @param {import('./jsmind.node.js').Node} node - Target node
+     */
+    init_nodes_size(node: import("./jsmind.node.js").Node): void;
+    /** Initialize DOM elements for all nodes. */
+    init_nodes(): void;
+    /**
+     * Add a new node to the view.
+     * @param {import('./jsmind.node.js').Node} node - Node to add
+     */
+    add_node(node: import("./jsmind.node.js").Node): void;
+    /**
+     * Run function in compatibility mode if container is not visible.
+     * @param {Function} func - Function to execute
+     */
+    run_in_c11y_mode_if_needed(func: Function): void;
+    /**
+     * Create a DOM element for a node and append to parent container.
+     * @param {import('./jsmind.node.js').Node} node
+     * @param {HTMLElement} parent_node
+     */
+    create_node_element(node: import("./jsmind.node.js").Node, parent_node: HTMLElement): void;
+    /**
+     * Remove a node from the view.
+     * @param {import('./jsmind.node.js').Node} node - Node to remove
+     */
+    remove_node(node: import("./jsmind.node.js").Node): void;
+    /**
+     * Update a node's display.
+     * @param {import('./jsmind.node.js').Node} node - Node to update
+     */
+    update_node(node: import("./jsmind.node.js").Node): void;
+    /**
+     * Select a node visually.
+     * @param {import('./jsmind.node.js').Node|null} node - Node to select
+     */
+    select_node(node: import("./jsmind.node.js").Node | null): void;
+    /** Clear node selection. */
+    select_clear(): void;
+    /**
+     * Get currently editing node.
+     * @returns {import('./jsmind.node.js').Node|null} Currently editing node
+     */
+    get_editing_node(): import("./jsmind.node.js").Node | null;
+    /**
+     * Check if any node is being edited.
+     * @returns {boolean} True if editing
+     */
+    is_editing(): boolean;
+    /**
+     * Begin editing a node.
+     * @param {import('./jsmind.node.js').Node} node - Node to edit
+     */
+    edit_node_begin(node: import("./jsmind.node.js").Node): void;
+    /** End editing current node. */
+    edit_node_end(): void;
+    /** @returns {{x:number,y:number}} */
+    get_view_offset(): {
+        x: number;
+        y: number;
+    };
+    /** Resize the view to fit container. */
+    resize(): void;
+    /**
+     * Internal show implementation.
+     * @private
+     */
+    private _show;
+    /**
+     * Zoom in the view.
+     * @param {MouseEvent=} e - Mouse event for zoom center
+     * @returns {boolean} True if zoom succeeded
+     */
+    zoom_in(e?: MouseEvent | undefined): boolean;
+    /**
+     * Zoom out the view.
+     * @param {MouseEvent=} e - Mouse event for zoom center
+     * @returns {boolean} True if zoom succeeded
+     */
+    zoom_out(e?: MouseEvent | undefined): boolean;
+    /**
+     * Set zoom level and keep scroll around zoom center.
+     * @param {number} zoom
+     * @param {MouseEvent=} e
+     */
+    set_zoom(zoom: number, e?: MouseEvent | undefined): boolean;
+    /** @param {boolean=} keep_center */
+    show(keep_center?: boolean | undefined): void;
+    relayout(): void;
+    /** @param {import('./jsmind.node.js').Node} node */
+    save_location(node: import("./jsmind.node.js").Node): void;
+    /** @param {import('./jsmind.node.js').Node} node */
+    restore_location(node: import("./jsmind.node.js").Node): void;
+    clear_nodes(): void;
+    /** Render node elements and expanders to screen. */
+    show_nodes(): void;
+    /** @param {import('./jsmind.node.js').Node} node @param {{x:number,y:number}} view_offset */
+    _show_expander(node: import("./jsmind.node.js").Node, view_offset: {
+        x: number;
+        y: number;
+    }): void;
+    /** @param {import('./jsmind.node.js').Node} node */
+    _get_expander_text(node: import("./jsmind.node.js").Node): number | "..." | "-" | "+";
+    /** @param {HTMLElement} ele @param {import('./jsmind.node.js').Node} node */
+    _default_node_render(ele: HTMLElement, node: import("./jsmind.node.js").Node): void;
+    /** @param {HTMLElement} ele @param {import('./jsmind.node.js').Node} node */
+    _custom_node_render(ele: HTMLElement, node: import("./jsmind.node.js").Node): void;
+    /** @param {import('./jsmind.node.js').Node} node */
+    reset_node_custom_style(node: import("./jsmind.node.js").Node): void;
+    /** @param {HTMLElement} node_element @param {Record<string,string|number>} node_data */
+    _reset_node_custom_style(node_element: HTMLElement, node_data: Record<string, string | number>): void;
+    /** @param {import('./jsmind.node.js').Node} node */
+    restore_selected_node_custom_style(node: import("./jsmind.node.js").Node): void;
+    /** @param {import('./jsmind.node.js').Node} node */
+    clear_selected_node_custom_style(node: import("./jsmind.node.js").Node): void;
+    clear_lines(): void;
+    show_lines(): void;
+    /**
+     * Enable/disable dragging the whole canvas with mouse.
+     * @param {boolean} enabled
+     */
+    setup_canvas_draggable(enabled: boolean): void;
+    /** @param {import('./jsmind.node.js').Node} node */
+    center_node(node: import("./jsmind.node.js").Node): boolean;
+    /** @param {MouseEvent=} e */
+    zoomIn(e?: MouseEvent | undefined): boolean;
+    /** @param {MouseEvent=} e */
+    zoomOut(e?: MouseEvent | undefined): boolean;
+    /** @param {number} zoom @param {MouseEvent=} e */
+    setZoom(zoom: number, e?: MouseEvent | undefined): boolean;
+}

package/types/generated/plugins/history/history-diff.d.ts

@@ -0,0 +1,297 @@
+/**
+ * Flatten a tree into a Map of nodes keyed by id.
+ *
+ * Note: When using custom fieldNames, make sure to pass the correct field names in opts.fields.
+ * For example, if you configured fieldNames: { topic: 'name' }, you should pass fields: ['name', 'data', 'id'].
+ *
+ * @param {NodeTreeFormat|NodeTreeData} tree - The tree to flatten
+ * @param {FlattenOptions} [opts] - Flatten options
+ * @returns {Map<string, FlatNode>} Map of node id -> flattened node object
+ *
+ * @example
+ * // With default fieldNames
+ * const tree = { data: { id: 'root', topic: 'Root', children: [...] } };
+ * const flatMap = flatten(tree);
+ * const rootNode = flatMap.get('root'); // { id: 'root', topic: 'Root', data: {...}, parentid: null, index: 0 }
+ *
+ * @example
+ * // With custom fieldNames: { topic: 'name' }
+ * const tree = { data: { id: 'root', name: 'Root', children: [...] } };
+ * const flatMap = flatten(tree, { fields: ['name', 'data', 'id'] });
+ * const rootNode = flatMap.get('root'); // { id: 'root', name: 'Root', data: {...}, parentid: null, index: 0 }
+ */
+export function flatten(tree: NodeTreeFormat | NodeTreeData, opts?: FlattenOptions): Map<string, FlatNode>;
+/**
+ * Compute diff between two snapshots.
+ * Always categorizes updates into moved/modified/movedAndModified using LIS algorithm for precise move detection.
+ *
+ * Note: When using custom fieldNames, make sure to pass the correct field names in opts.fields.
+ * For example, if you configured fieldNames: { topic: 'name' }, you should pass fields: ['name', 'data', 'id'].
+ * When using jm.history.diff(), this is automatically handled for you.
+ *
+ * @param {NodeTreeFormat|NodeTreeData} a - First snapshot (before)
+ * @param {NodeTreeFormat|NodeTreeData} b - Second snapshot (after)
+ * @param {DiffOptions} [opts] - Diff options
+ * @returns {DiffResult} Diff result with created, deleted, moved, modified, and movedAndModified nodes
+ *
+ * @example
+ * // Basic usage with default fieldNames
+ * const result = diff(snapshot1, snapshot2);
+ * console.log(result.created); // Newly created nodes
+ * console.log(result.deleted); // Deleted nodes
+ * console.log(result.moved); // Nodes that were only moved (cross-parent or reordered)
+ * console.log(result.modified); // Nodes that were only modified
+ * console.log(result.movedAndModified); // Nodes that were both moved and modified
+ *
+ * // Check move type
+ * result.moved.forEach(node => {
+ *   if (node.moveInfo.moveType === 'cross-parent') {
+ *     console.log(`${node.id} moved from ${node.moveInfo.fromParent} to ${node.moveInfo.toParent}`);
+ *   } else if (node.moveInfo.moveType === 'reorder') {
+ *     console.log(`${node.id} reordered from index ${node.moveInfo.fromOrder} to ${node.moveInfo.toOrder}`);
+ *   }
+ * });
+ *
+ * @example
+ * // With custom fieldNames: { topic: 'name' }
+ * const result = diff(snapshot1, snapshot2, { fields: ['name', 'data', 'id'] });
+ * // Now the diff will correctly detect changes in the 'name' field
+ *
+ * @example
+ * // Using jm.history.diff() (recommended - automatically handles fieldNames)
+ * const before = jm.get_data('node_tree');
+ * // ... make changes ...
+ * const after = jm.get_data('node_tree');
+ * const result = jm.history.diff(before, after);
+ * // fieldNames are automatically applied, LIS algorithm is used for precise move detection
+ */
+export function diff(a: NodeTreeFormat | NodeTreeData, b: NodeTreeFormat | NodeTreeData, opts?: DiffOptions): DiffResult;
+export type NodeTreeFormat = {
+    meta?: any;
+    format?: "node_tree";
+    data: NodeTreeData;
+};
+export type NodeTreeData = {
+    id?: string;
+    topic?: string;
+    expanded?: boolean;
+    direction?: "left" | "right";
+    data?: Record<string, any>;
+    children?: NodeTreeData[];
+    [key: string]: any;
+};
+export type FlatNode = {
+    /**
+     * - Node ID
+     */
+    id: string;
+    /**
+     * - Node topic/title
+     */
+    topic?: string;
+    /**
+     * - Node data
+     */
+    data?: Record<string, any>;
+    /**
+     * - Parent node ID (structure field)
+     */
+    parentid?: string | null;
+    /**
+     * - Node order in parent's children (structure field)
+     */
+    index?: number;
+};
+export type ChangeDetail = {
+    /**
+     * - The field name that changed
+     */
+    key: string;
+    /**
+     * - Value before change
+     */
+    before: any;
+    /**
+     * - Value after change
+     */
+    after: any;
+};
+export type UpdatedNode = {
+    /**
+     * - Node ID
+     */
+    id: string;
+    /**
+     * - Node state before change
+     */
+    before: FlatNode;
+    /**
+     * - Node state after change
+     */
+    after: FlatNode;
+    /**
+     * - Array of field changes
+     */
+    changes: ChangeDetail[];
+};
+export type MoveInfo = {
+    /**
+     * - Type of move: 'cross-parent' for different parent, 'reorder' for same parent
+     */
+    moveType: "cross-parent" | "reorder";
+    /**
+     * - Whether parent changed
+     */
+    parentChanged: boolean;
+    /**
+     * - Whether order changed
+     */
+    orderChanged: boolean;
+    /**
+     * - Original parent ID
+     */
+    fromParent: string | null;
+    /**
+     * - New parent ID
+     */
+    toParent: string | null;
+    /**
+     * - Original order
+     */
+    fromOrder: number;
+    /**
+     * - New order
+     */
+    toOrder: number;
+};
+export type MovedNode = {
+    /**
+     * - Node ID
+     */
+    id: string;
+    /**
+     * - Node state before move
+     */
+    before: FlatNode;
+    /**
+     * - Node state after move
+     */
+    after: FlatNode;
+    /**
+     * - Movement details
+     */
+    moveInfo: MoveInfo;
+};
+export type ModifiedNode = {
+    /**
+     * - Node ID
+     */
+    id: string;
+    /**
+     * - Node state before modification
+     */
+    before: FlatNode;
+    /**
+     * - Node state after modification
+     */
+    after: FlatNode;
+    /**
+     * - Array of field changes (excluding structure fields)
+     */
+    changes: ChangeDetail[];
+};
+export type MovedAndModifiedNode = {
+    /**
+     * - Node ID
+     */
+    id: string;
+    /**
+     * - Node state before change
+     */
+    before: FlatNode;
+    /**
+     * - Node state after change
+     */
+    after: FlatNode;
+    /**
+     * - Array of field changes (excluding structure fields)
+     */
+    changes: ChangeDetail[];
+    /**
+     * - Movement details
+     */
+    moveInfo: MoveInfo;
+};
+export type DiffResult = {
+    /**
+     * - Newly created nodes
+     */
+    created: FlatNode[];
+    /**
+     * - Deleted nodes
+     */
+    deleted: FlatNode[];
+    /**
+     * - Whether results were truncated due to maxSize
+     */
+    truncated: boolean;
+    /**
+     * - Nodes that were only moved
+     */
+    moved: MovedNode[];
+    /**
+     * - Nodes that were only modified
+     */
+    modified: ModifiedNode[];
+    /**
+     * - Nodes that were both moved and modified
+     */
+    movedAndModified: MovedAndModifiedNode[];
+};
+export type FlattenOptions = {
+    /**
+     * - Array of field names to include. Defaults to ['topic', 'data', 'id'].
+     *     When using custom fieldNames (e.g., { id: 'key', topic: 'name' }), this should be
+     *     ['name', 'data', 'key'] to match the actual field names in the data.
+     */
+    fields?: string[];
+    /**
+     * - The field name to use as the node ID. Defaults to 'id'.
+     *     When using custom fieldNames (e.g., { id: 'key' }), this should be 'key'.
+     */
+    idKey?: string;
+    /**
+     * - The field name to use for children array. Defaults to 'children'.
+     *     When using custom fieldNames (e.g., { children: 'items' }), this should be 'items'.
+     */
+    childrenKey?: string;
+    /**
+     * - Whether to include parentid and index. Defaults to true
+     */
+    includeStructure?: boolean;
+};
+export type DiffOptions = {
+    /**
+     * - Array of field names to compare. Defaults to ['topic', 'data', 'id'].
+     *     Note: When using jm.history.diff(), this is automatically handled.
+     */
+    fields?: string[];
+    /**
+     * - The field name to use as the node ID. Defaults to 'id'.
+     *     Note: When using jm.history.diff(), this is automatically handled.
+     */
+    idKey?: string;
+    /**
+     * - The field name to use for children array. Defaults to 'children'.
+     *     Note: When using jm.history.diff(), this is automatically handled.
+     */
+    childrenKey?: string;
+    /**
+     * - Whether to include parentid and index in comparison. Defaults to true
+     */
+    includeStructure?: boolean;
+    /**
+     * - Maximum number of diff results. Defaults to 5000
+     */
+    maxSize?: number;
+};