Checkbox Functionality

/**
 * Checkbox plugin configuration
 */
interface CheckboxConfig {
  /** Show checkboxes (default: true) */
  visible?: boolean;
  /** Enable tri-state checkboxes with undetermined state (default: true) */
  three_state?: boolean;
  /** Make the whole node clickable, not just the checkbox (default: true) */
  whole_node?: boolean;
  /** Keep selected styling on checked nodes (default: true) */
  keep_selected_style?: boolean;
  /** Cascading behavior: "up", "down", "up+down", "undetermined", or "" (default: "" but becomes "up+down+undetermined" when three_state is true) */
  cascade?: string;
  /** Apply cascading to disabled checkboxes (default: true) */
  cascade_to_disabled?: boolean;
  /** Apply cascading to hidden checkboxes (default: true) */
  cascade_to_hidden?: boolean;
  /** Bind checkbox state to selection state (default: true) */
  tie_selection?: boolean;
}

// Usage in tree initialization
const config = {
  "plugins": ["checkbox"],
  "checkbox": {
    "visible": true,
    "three_state": true,
    "whole_node": true,
    "keep_selected_style": false,
    "cascade": "up+down+undetermined",
    "cascade_to_disabled": true,
    "cascade_to_hidden": true,
    "tie_selection": false
  }
};

// Initialize tree with checkboxes
$("#tree").jstree({
  "core": {
    "data": ["Parent 1", "Parent 2"]
  },
  "plugins": ["checkbox"],
  "checkbox": {
    "three_state": true,
    "cascade": "up+down+undetermined"
  }
});

// Get instance and use checkbox methods
const tree = $("#tree").jstree(true);

/**
 * Check a node's checkbox
 * @param obj - Node to check
 * @param e - Original event object
 * @returns True on success
 */
check_node(obj: string|object, e?: Event): boolean;

/**
 * Uncheck a node's checkbox
 * @param obj - Node to uncheck
 * @param e - Original event object
 * @returns True on success
 */
uncheck_node(obj: string|object, e?: Event): boolean;

/**
 * Check all nodes in the tree
 * @returns True on success
 */
check_all(): boolean;

/**
 * Uncheck all nodes in the tree
 * @returns True on success
 */
uncheck_all(): boolean;

// Check specific nodes
tree.check_node("node_1");
tree.check_node(["node_2", "node_3"]);

// Uncheck specific nodes
tree.uncheck_node("node_1");

// Check/uncheck all
tree.check_all();
tree.uncheck_all();

/**
 * Check if a node is checked
 * @param obj - Node to check
 * @returns True if node is checked
 */
is_checked(obj: string|object): boolean;

/**
 * Check if a node is in undetermined state (partially checked)
 * @param obj - Node to check
 * @returns True if node is undetermined
 */
is_undetermined(obj: string|object): boolean;

// Check individual node states
if (tree.is_checked("node_1")) {
  console.log("Node 1 is checked");
}

if (tree.is_undetermined("parent_node")) {
  console.log("Parent node is partially checked");
}

/**
 * Get all checked nodes
 * @param full - Return full node objects instead of IDs
 * @returns Array of checked node IDs or objects
 */
get_checked(full?: boolean): Array<string|object>;

/**
 * Get top-level checked nodes (checked nodes with no checked ancestors)
 * @param full - Return full node objects instead of IDs
 * @returns Array of top-level checked node IDs or objects
 */
get_top_checked(full?: boolean): Array<string|object>;

/**
 * Get bottom-level checked nodes (checked nodes with no checked descendants)
 * @param full - Return full node objects instead of IDs
 * @returns Array of bottom-level checked node IDs or objects
 */
get_bottom_checked(full?: boolean): Array<string|object>;

/**
 * Get all checked descendants of a node
 * @param id - Parent node ID
 * @returns Array of checked descendant node IDs
 */
get_checked_descendants(id: string): Array<string>;

// Get checked nodes in different ways
const checkedIds = tree.get_checked();
const checkedNodes = tree.get_checked(true);

// Get hierarchical selections
const topChecked = tree.get_top_checked();
const bottomChecked = tree.get_bottom_checked();

// Get descendants of specific node
const descendants = tree.get_checked_descendants("parent_1");

console.log("Checked IDs:", checkedIds);
console.log("Top-level checked:", topChecked);

/**
 * Disable checkbox for a specific node
 * @param obj - Node to disable checkbox for
 * @returns True on success
 */
disable_checkbox(obj: string|object): boolean;

/**
 * Enable checkbox for a specific node
 * @param obj - Node to enable checkbox for
 * @returns True on success
 */
enable_checkbox(obj: string|object): boolean;

/**
 * Show all checkboxes in the tree
 * @returns True on success
 */
show_checkboxes(): boolean;

/**
 * Hide all checkboxes in the tree
 * @returns True on success
 */
hide_checkboxes(): boolean;

/**
 * Toggle checkbox visibility
 * @returns True on success
 */
toggle_checkboxes(): boolean;

// Control individual node checkboxes
tree.disable_checkbox("readonly_node");
tree.enable_checkbox("editable_node");

// Control global checkbox visibility
tree.hide_checkboxes(); // Hide all checkboxes
tree.show_checkboxes(); // Show all checkboxes
tree.toggle_checkboxes(); // Toggle visibility

// Checkbox-specific events
"check_node.jstree": CheckboxEvent;
"uncheck_node.jstree": CheckboxEvent;

interface CheckboxEvent {
  node: object;
  selected: Array<string>;
  event: Event;
  instance: jsTree;
}

// Listen for checkbox events
$("#tree").on("check_node.jstree", function (e, data) {
  console.log("Node checked:", data.node.text);
  console.log("All checked nodes:", data.selected);
});

$("#tree").on("uncheck_node.jstree", function (e, data) {
  console.log("Node unchecked:", data.node.text);
  console.log("Remaining checked nodes:", data.selected);
});

/**
 * Cascade mode options:
 * - "up": Checking a child affects parent state
 * - "down": Checking a parent affects children state  
 * - "up+down": Both directions (default)
 * - "undetermined": Show partial/undetermined states
 * - "up+down+undetermined": Full tri-state behavior
 * - "": No cascading
 */
type CascadeMode = "up" | "down" | "up+down" | "undetermined" | "up+down+undetermined" | "";

// Different cascade configurations
$("#tree1").jstree({
  "plugins": ["checkbox"],
  "checkbox": {
    "cascade": "down" // Only cascade downward
  }
});

$("#tree2").jstree({
  "plugins": ["checkbox"],
  "checkbox": {
    "cascade": "up+down+undetermined" // Full tri-state
  }
});

$("#tree3").jstree({
  "plugins": ["checkbox"],
  "checkbox": {
    "cascade": "" // No cascading
  }
});

/**
 * Configuration for checkbox-selection integration
 */
interface CheckboxSelectionIntegration {
  /** Synchronize checkbox and selection states */
  tie_selection: boolean;
  /** Keep visual selection styling on checked nodes */
  keep_selected_style: boolean;
}

// Checkbox state tied to selection
$("#tree").jstree({
  "plugins": ["checkbox"],
  "checkbox": {
    "tie_selection": true,
    "keep_selected_style": false
  }
});

// When checkbox is checked, node becomes selected
// When node is selected, checkbox becomes checked
const tree = $("#tree").jstree(true);
tree.check_node("node_1"); // Also selects the node
tree.select_node("node_2"); // Also checks the checkbox

/**
 * Accessibility features automatically included:
 * - ARIA attributes for checkbox states
 * - Keyboard navigation support
 * - Screen reader compatibility
 * - Focus management
 */

// Checkboxes automatically include:
// - aria-checked="true|false|mixed"
// - role="checkbox" 
// - Keyboard support (Space to toggle)
// - Focus indicators

// Enable keyboard navigation
$("#tree").jstree({
  "plugins": ["checkbox"],
  "core": {
    "keyboard": {
      "checkbox": true // Enable checkbox keyboard shortcuts
    }
  }
});

// Checkbox node state extensions
interface CheckboxNode extends TreeNode {
  state: {
    checked: boolean;
    undetermined: boolean;
    checkbox_disabled: boolean;
    [key: string]: any;
  };
}

// Plugin-specific configuration
interface CheckboxSettings {
  visible: boolean;
  three_state: boolean;
  whole_node: boolean;
  keep_selected_style: boolean;
  cascade: string;
  tie_selection: boolean;
}