### Start MkDocs Development Server

Source: https://github.com/mar10/wunderbaum/blob/main/docs/tutorial/contribute.md

Launches the MkDocs development server to preview the User Guide documentation locally. Changes in `docs/tutorial` are reflected in the browser.

```bash
yarn dev_mkdocs
```

--------------------------------

### Install Python Dependencies for MkDocs

Source: https://github.com/mar10/wunderbaum/blob/main/docs/tutorial/contribute.md

Installs the necessary Python packages for generating the User Guide documentation locally using pipenv.

```bash
cd path/to/project
pipenv install
```

--------------------------------

### Theme Initialization Example

Source: https://github.com/mar10/wunderbaum/blob/main/docs/api/types/types.InsertNodeType.html

Example of how to initialize the theme for Wunderbaum based on local storage.

```APIDOC
## Theme Initialization

### Description
This code snippet demonstrates how to set the Wunderbaum theme based on user preference stored in local storage.

### Code Example
```javascript
document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";
document.body.style.display = "none";
setTimeout(() => app ? app.showPage() : document.body.style.removeProperty("display"), 500);
```

### Notes
- The theme is set to 'os' if no theme is found in local storage.
- A short delay is introduced before showing the page to allow for theme application.
```

--------------------------------

### Install Dependencies and Activate Environment

Source: https://github.com/mar10/wunderbaum/blob/main/test/generator/README.txt

Before generating fixtures, ensure you have Python and pipenv installed. Navigate to the project root, install dependencies, and activate the virtual environment.

```bash
cd <project_root>/wunderbaum
pipenv install
pipenv shell
```

--------------------------------

### Theme Management Example

Source: https://github.com/mar10/wunderbaum/blob/main/docs/api/types/types.FilterModeType.html

Example of how to manage the theme of the Wunderbaum application using local storage and a timeout.

```APIDOC
## Theme Management Example

### Description
This code snippet demonstrates how to set the theme of the document based on local storage settings and apply a display style with a timeout for the application to show.

### Code
```javascript
document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";
document.body.style.display="none";
setTimeout(() => app ? app.showPage() : document.body.style.removeProperty("display"), 500);
```

### Notes
- The theme is read from `localStorage` with a fallback to 'os'.
- The body is initially hidden and then displayed after a 500ms timeout, or the `app.showPage()` method is called if `app` is defined.
```

--------------------------------

### Throttle Function Example

Source: https://github.com/mar10/wunderbaum/blob/main/docs/api/functions/util.throttle.html

Demonstrates how to use the throttle function to limit the execution of a callback. Includes examples for scroll event handling, click event throttling with trailing disabled, and canceling a throttled invocation.

```javascript
jQuery(window).on('scroll', throttle(updatePosition, 100))
```

```javascript
const throttled = throttle(renewToken, 300000, { 'trailing': false })
jQuery(element).on('click', throttled)
```

```javascript
jQuery(window).on('popstate', throttled.cancel)
```

--------------------------------

### Wunderbaum Configuration Options

Source: https://github.com/mar10/wunderbaum/blob/main/docs/tutorial/tutorial_grid.md

Example of common Wunderbaum configuration options including navigation mode, columns, and event handlers.

```javascript
const tree = new Wunderbaum({
  ...
  navigationModeOption: "startRow",  // | "cell" | "startCell" | "row"
  columns: [],
  ...
  // --- Events ---
  render: (e) => {
    // Return false to prevent default behavior
  }
  ...
  edit: {
    trigger: ["F2", "macEnter", ...],
    ...
  },
});
```

--------------------------------

### Install Node.js Dependencies

Source: https://github.com/mar10/wunderbaum/blob/main/docs/tutorial/contribute.md

Installs project dependencies using corepack and yarn. Ensure Node.js 18+ is installed.

```bash
cd path/to/project
corepack enable
corepack install
```

```bash
cd path/to/project
yarn
yarn dev
```

--------------------------------

### Configure Basic Drag and Drop (move)

Source: https://github.com/mar10/wunderbaum/blob/main/docs/tutorial/tutorial_dnd.md

Set up drag and drop functionality with options for effect allowed, default drop effect, and event handlers for drag start, enter, drag, and drop. The drop handler includes logic for copying, linking, or moving nodes.

```javascript
const tree = new Wunderbaum({
  // --- Common Options ---
  ...
  dnd: {
    effectAllowed: "all",
    dropEffectDefault: "move",
    guessDropEffect: true,
    dragStart: (e) => {
      // if (e.node.type === "folder") {
      //   return false;
      // }
      return true;
    },
    dragEnter: (e) => {
      // console.log(`DragEnter ${e.event.dataTransfer.dropEffect} ${e.node}`, e);
      // We can only drop 'over' a folder, so the source node becomes a child.
      // We can drop 'before' or 'after' a non-folder, so the source node becomes a sibling.
      if (e.node.type === "folder") {
        // e.event.dataTransfer.dropEffect = "link";
        return "over";
      }
      return ["before", "after"];
    },
    drag: (e) => {
      // e.tree.log(e.type, e);
    },
    drop: (e) => {
      console.log(
        `Drop ${e.sourceNode} => ${e.suggestedDropEffect} ${e.suggestedDropMode} ${e.node}`,
        e
      );
      switch (e.suggestedDropEffect) {
        case "copy":
          e.node.addNode(
            { title: `Copy of ${e.sourceNodeData.title}` },
            e.suggestedDropMode
          );
          break;
        case "link":
          e.node.addNode(
            { title: `Link to ${e.sourceNodeData.title}` },
            e.suggestedDropMode
          );
          break;
        default:
          e.sourceNode.moveTo(e.node, e.suggestedDropMode);
      }
    },
  },
});
```

--------------------------------

### Register Custom Events

Source: https://github.com/mar10/wunderbaum/blob/main/docs/tutorial/tutorial_events.md

Demonstrates how to register custom event listeners using event delegation, with an example for handling context menu events.

```APIDOC
## Register Custom Event Listener (e.g., contextmenu)

### Description
Register a custom event listener on a parent element (like `document.body`) to handle events originating from Wunderbaum rows. The `mar10.Wunderbaum.getNode(event)` utility can retrieve the corresponding node object.

### Method
JavaScript Event Listener

### Endpoint
N/A (Client-side Scripting)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```html
<script>
  document.addEventListener("DOMContentLoaded", function () {
    document.body.addEventListener("contextmenu", function (event) {
      if (event.target.closest("div.wb-row")) {
        const node = mar10.Wunderbaum.getNode(event);
        node.logInfo("received contextmenu event");

        // Optionally prevent the default context menu:
        event.preventDefault();
      }
    });
  });
</script>
```

### Response
#### Success Response (200)
N/A

#### Response Example
N/A
```

--------------------------------

### HTML Structure for Render Event

Source: https://github.com/mar10/wunderbaum/blob/main/docs/tutorial/tutorial_render.md

Example HTML structure for a single node row and a multi-column treegrid row.

```html
<div class="wb-row" style="top: 22px;">
  <span class="wb-node wb-col wb-active" style="left: 0px; width: 1368px;">
    <i class="wb-indent"></i>
    <i class="wb-expander wb-indent"></i>
    <i class="wb-icon bi bi-file-earmark"></i>
    <span class="wb-title" style="width: 1301px;">Node 1.1</span>
  </span>
</div>
```

```html
<div class="wb-row wb-active wb-focus" style="top: 66px;">
  <span
    class="wb-node wb-col wb-active"
    draggable="true"
    style="left: 0px; width: 250px;"
  >
    <i class="wb-checkbox bi bi-square"></i>
    <i class="wb-indent"></i>
    <i class="wb-expander wb-indent"></i>
    <i class="wb-icon bi bi-file-earmark"></i>
    <span class="wb-title" style="width: 163px;">The Little Prince</span>
  </span>
  <span class="wb-col" style="left: 250px; width: 234.75px;">
    Antoine de Saint-Exupery
  </span>
  <span class="wb-col" style="left: 484.75px; width: 50px;">1943</span>
  <span class="wb-col" style="left: 534.75px; width: 50px;">2946</span>
  <span class="wb-col" style="left: 584.75px; width: 80px;">6.82</span>
  <span class="wb-col" style="left: 664.75px; width: 703.25px;"></span>
</div>
```

--------------------------------

### Adaptive Throttle Usage Example

Source: https://github.com/mar10/wunderbaum/blob/main/docs/api/functions/util.adaptiveThrottle.html

Demonstrates how to use adaptiveThrottle to create a throttled version of a function. The throttled function can be called multiple times, but its execution rate is limited.

```typescript
throttledFoo = util.adaptiveThrottle(foo.bind(this), {});
throttledFoo();
throttledFoo();
```

--------------------------------

### Load Tree Nodes with Simple GET Request

Source: https://github.com/mar10/wunderbaum/blob/main/docs/tutorial/tutorial_initialize.md

Use this for basic Ajax requests to load tree nodes. Ensure the 'source' property points to the correct URL.

```javascript
const tree = new mar10.Wunderbaum({
  ... 
  source: "path/to/request",
  ... 
});
```

--------------------------------

### Debounce Function Example

Source: https://github.com/mar10/wunderbaum/blob/main/docs/api/functions/util.debounce.html

Demonstrates various use cases of the debounce function, including resizing events, click events with leading invocation, and debounced stream message handling with a max wait. It also shows how to cancel debounced invocations and check for pending calls.

```typescript
// Avoid costly calculations while the window size is in flux.jQuery(window).on('resize', debounce(calculateLayout, 150))// Invoke `sendMail` when clicked, debouncing subsequent calls.jQuery(element).on('click', debounce(sendMail, 300, {
  'leading': true,
  'trailing': false
}))// Ensure `batchLog` is invoked once after 1 second of debounced calls.const debounced = debounce(batchLog, 250, { 'maxWait': 1000 })
const source = new EventSource('/stream')
jQuery(source).on('message', debounced)// Cancel the trailing debounced invocation.jQuery(window).on('popstate', debounced.cancel)// Check for pending invocations.const status = debounced.pending() ? "Pending..." : "Ready"
```

--------------------------------

### Initialize Theme and Show App

Source: https://github.com/mar10/wunderbaum/blob/main/docs/api/functions/common.makeNodeTitleStartMatcher.html

Sets the theme from local storage or defaults to 'os', then hides the body and shows the app after a delay, or removes the display property if the app is not ready.

```javascript
document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";
document.body.style.display="none";
setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)
```

--------------------------------

### Initialize Wunderbaum with Options

Source: https://github.com/mar10/wunderbaum/blob/main/test/triage/issue_000.html

Demonstrates the basic initialization of a Wunderbaum instance with core configuration options like ID, element, source data, debug level, and event handlers.

```javascript
new mar10.Wunderbaum({
  id: "demo",
  element: document.getElementById("demo-tree"),
  // header: "Plain Tree",
  source: {
    children: [
      {
        title: "1",
        expanded: true,
        children: [
          { title: "1.1" },
          { title: "1.2" }
        ]
      },
      {
        title: "2",
        lazy: true
      },
      {
        title: "3",
        lazy: true
      },
    ]
  },
  debugLevel: 5,
  // checkbox: true,
  // minExpandLevel: 1,
  types: {},
  init: (e) => {
    // Tree was loaded and rendered. Now set focus:
    // const node = e.tree.findFirst("Jumping dopily");
    // node.setActive();
    e.tree.setFocus();
  },
  dnd: {
    dragStart: (e) => {
      if (e.node.type === "folder") {
        return false;
      }
      e.event.dataTransfer.effectAllowed = "all";
      return true;
    },
    dragEnter: (e) => {
      if (e.node.type === "folder") {
        e.event.dataTransfer.dropEffect = "copy";
        return "over";
      }
      return ["before", "after"];
    },
    drop: (e) => {
      console.log(
        `Drop ${e.sourceNode} => ${e.suggestedDropEffect} ${e.suggestedDropMode} ${e.node}`,
        e
      );
      e.sourceNode.moveTo(e.node, e.suggestedDropMode);
    },
  },
  lazyLoad: (e) => {
    console.log(e.type, e);
    // simulate async loading
    return e.util.setTimeoutPromise(() => {
      return [
        { title: "2.1" },
        { title: "2.2" },
        { title: "2.3" },
      ];
    }, 5000);
  },
  beforeExpand: (e) => {
    console.log(e.type, e);
    // return false; // cancel expand
  },
  expand: (e) => {
    console.log(e.type, e);
    if (e.node.isLazy() && !e.flag) {
      e.node.resetLazy(); // remove children on collapse
    }
  },
});
```

--------------------------------

### Find Next Visible Node

Source: https://github.com/mar10/wunderbaum/blob/main/docs/api/classes/wunderbaum.Wunderbaum.html

Find the next visible node that starts with the given match string or callback, optionally starting from a specific node and searching in reverse. This is used for quick search and keyboard navigation.

```typescript
findNextNode(
    match: string | MatcherCallback,
    startNode?: null | WunderbaumNode,
    reverse?: boolean,
): null | WunderbaumNode[]
```

--------------------------------

### Initialize Wunderbaum with HTML and JavaScript

Source: https://github.com/mar10/wunderbaum/blob/main/docs/tutorial/quick_start.md

Include Wunderbaum's CSS and JS files, define a div for the tree, and initialize the Wunderbaum instance with data and event handlers.

```html
<!DOCTYPE html>
<html>
  <head>
    <!-- Additional icon fonts. Wunderbaum uses bootstrap icons by default. -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css"
    />
    <!-- Wunderbaum CSS and Library -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/wunderbaum@0/dist/wunderbaum.min.css"
    />
    <script
      defer
      src="https://cdn.jsdelivr.net/npm/wunderbaum@0/dist/wunderbaum.umd.min.js"
    ></script>
    <!-- Your application code -->
    <script>
      data = [
        {
          title: "Node 1",
          expanded: true,
          children: [
            {
              title: "Node 1.1",
            },
            {
              title: "Node 1.2",
            },
          ],
        },
        {
          title: "Node 2",
        },
      ];

      document.addEventListener("DOMContentLoaded", (event) => {
        const tree = new mar10.Wunderbaum({
          element: document.getElementById("demo-tree"),
          source: data,
          init: (e) => {
            e.tree.setFocus();
          },
          activate: (e) => {
            alert(`Thank you for activating ${e.node}.`);
          },
        });
      });
    </script>
  </head>

  <body>
    ...
    <div
      id="demo-tree"
      class="wb-skeleton wb-initializing wb-fade-expander"
    ></div>
    ...
  </body>
</html>
```

--------------------------------

### Override Method Example - createNode Event

Source: https://github.com/mar10/wunderbaum/blob/main/docs/api/functions/util.overrideMethod.html

This example demonstrates how to use overrideMethod to intercept the `createNode` event. It calls the original method using `this._super.apply` and then adds custom logic to set the 'draggable' attribute on the node's span element.

```typescript
overrideMethod(ctx.options, "createNode", (event, data) => {
  // Default processing if any
  this._super.apply(this, event, data);
  // Add 'draggable' attribute
  data.node.span.draggable = true;
});
```

--------------------------------

### Utility Function: type

Source: https://github.com/mar10/wunderbaum/blob/main/docs/api/functions/util.type.html

Provides a way to get a canonical string representation of an object's type.

```APIDOC
## Function type

### Description
Return a canonical string representation for an object's type (e.g. 'array', 'number', ...).

### Method
N/A (This is a utility function, not an API endpoint)

### Endpoint
N/A

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```json
{
  "obj": [1, 2, 3]
}
```

### Response
#### Success Response (200)
- **type** (string) - The canonical string representation of the object's type.

#### Response Example
```json
{
  "type": "array"
}
```
```

--------------------------------

### Basic Drag and Drop Configuration

Source: https://github.com/mar10/wunderbaum/blob/main/docs/tutorial/tutorial_dnd.md

Configure drag and drop behavior for a Wunderbaum instance. Implement `dragStart` to control which nodes can be dragged and `dragEnter` to define valid drop targets. The `drop` handler is essential for performing actions like moving nodes.

```javascript
const tree = new Wunderbaum({
  // --- Common Options ---
  ...
  dnd: {
    dragStart: (e) => {
      if (e.node.type === "folder") {
        return false; // do not allow dragging folders
      }
      return true;
    },
    dragEnter: (e) => {
      if (e.node.type === "folder") {
        return "over";
      }
      return ["before", "after"];
    },
    drop: (e) => {
      console.log(
        `Drop ${e.sourceNode} => ${e.suggestedDropEffect} ${e.suggestedDropMode} ${e.node}`,
        e
      );
      e.sourceNode.moveTo(e.node, e.suggestedDropMode)
    },
  },
});
```

--------------------------------

### InitWunderbaumOptions

Source: https://github.com/mar10/wunderbaum/blob/main/docs/api/interfaces/wb_options.InitWunderbaumOptions.html

Configuration options for initializing Wunderbaum.

```APIDOC
## InitWunderbaumOptions

### Description
Configuration options for initializing Wunderbaum.

### Parameters
#### Request Body
- **enabled** (boolean) - Optional - Controls if the tree is enabled.
- **error** ((e: WbErrorEventType) => void) - Optional - Event handler for errors.
- **expand** ((e: WbTreeEventType) => void) - Optional - Event handler for node expansion.
- **filter** (FilterOptionsType) - Optional - Options for filtering tree nodes.
- **fixedCol** (boolean) - Optional - Fixes the first column.
- **focus** ((e: WbTreeEventType) => void) - Optional - Event handler for node focus.
- **header** (null | string | boolean) - Optional - Configuration for the tree header.
- **icon** (DynamicIconOption) - Optional - Options for dynamic tree icons.
- **iconBadge** ((e: WbIconBadgeCallback) => WbIconBadgeEventResultType) - Optional - Callback for generating icon badges.
- **iconMap** (string | IconMapType) - Optional - Mapping for tree icons.
- **iconTooltip** (DynamicBoolOrStringOption) - Optional - Options for icon tooltips.
- **id** (string) - Optional - Unique identifier for the tree.
- **init** ((e: WbInitEventType) => void) - Optional - Event handler for tree initialization.
- **keydown** ((e: WbKeydownEventType) => WbCancelableEventResultType) - Optional - Event handler for keydown events.
- **lazyLoad** ((e: WbNodeEventType) => void) - Optional - Event handler for lazy loading nodes.
- **load** ((e: WbNodeEventType) => void) - Optional - Event handler for node loading.
- **minExpandLevel** (number) - Optional - Minimum level to expand nodes.
- **modifyChild** ((e: WbNodeEventType) => void) - Optional - Event handler for modifying child nodes.
- **navigationModeOption** (NavModeEnum) - Optional - Option for navigation mode.
- **quicksearch** (boolean) - Optional - Enables quick search functionality.
- **receive** ((e: WbReceiveEventType) => void) - Optional - Event handler for receiving data.
- **render** ((e: WbRenderEventType) => void) - Optional - Event handler for rendering nodes.
- **renderStatusNode** ((e: WbRenderEventType) => void) - Optional - Event handler for rendering status nodes.
- **rowHeightPx** (number) - Optional - Height of rows in pixels.
- **scrollIntoViewOnExpandClick** (boolean) - Optional - Scrolls node into view when expand icon is clicked.
- **select** ((e: WbNodeEventType) => void) - Optional - Event handler for node selection.
- **selectMode** (SelectModeType) - Optional - Mode for node selection.
- **showSpinner** (boolean) - Optional - Shows a spinner during loading.
- **skeleton** (boolean) - Optional - Enables skeleton loading.
- **sortFoldersFirst** (DynamicBoolOption) - Optional - Sorts folders before files.
- **source** (SourceType) - Optional - Data source for the tree.
- **strings** (TranslationsType) - Optional - Custom strings and translations.
- **tooltip** (DynamicBoolOrStringOption) - Optional - Options for node tooltips.
- **types** (NodeTypeDefinitionMap) - Optional - Definitions for node types.
- **unselectable** (DynamicBoolOption) - Optional - Makes nodes unselectable.
- **update** ((e: WbTreeEventType) => void) - Optional - Event handler for tree updates.

### Hierarchy
* Partial<WunderbaumOptions>
    * InitWunderbaumOptions

### Source
Defined in [src/wb_options.ts:445](https://github.com/mar10/wunderbaum/blob/534619ba47b6f11a76530a0b936792c2f4a89bb2/src/wb_options.ts#L445)
```

--------------------------------

### Initializing Wunderbaum with Event Handlers

Source: https://github.com/mar10/wunderbaum/blob/main/docs/tutorial/tutorial_events.md

Configure event handlers like 'init', 'lazyLoad', and 'activate' when creating a new Wunderbaum instance. Ensure the necessary DOM element is available and other options are correctly set.

```javascript
const tree = new mar10.Wunderbaum({
  id: "demo",
  element: document.getElementById("demo-tree"),
  source: "get/root/nodes",
  ...
  init: (e) => {
    e.tree.setFocus();
  },
  lazyLoad: function (e) {
    return { url: 'get/child/nodes', params: { parentKey: e.node.key } };
  },
  activate: function (e) {
    alert(`Thank you for activating ${e.node}.`);
  },
  ...
});
```

--------------------------------

### init Event

Source: https://github.com/mar10/wunderbaum/blob/main/docs/api/interfaces/wb_options.WunderbaumOptions.html

Fires after the tree markup is created and initial data is loaded. Useful for setting initial state like focus or activating nodes.

```APIDOC
## init Event

### Description
Fires when the tree markup was created and the initial source data was loaded. Typical use cases would be activating a node, setting focus, enabling other controls on the page, etc. Also sent if an error occurred during initialization (check `e.error` for status).

### Method
Optional callback function

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **e** (WbInitEventType) - The event object containing initialization details and potential errors.

### Request Example
```json
{
  "event": "init",
  "tree": { ... },
  "error": null
}
```

### Response
#### Success Response (200)
- **void** - No specific return value.
```

--------------------------------

### Get Column Element by Index

Source: https://github.com/mar10/wunderbaum/blob/main/docs/api/classes/wb_node.WunderbaumNode.html

Retrieves the HTML element for a specific column based on its index or ID. Returns null if the element is not found.

```typescript
getColElem(colIdx: string | number): null | HTMLSpanElement
```

--------------------------------

### Run Development Commands

Source: https://github.com/mar10/wunderbaum/blob/main/docs/tutorial/contribute.md

Executes common development tasks such as formatting code and running unit tests.

```bash
yarn format
```

```bash
yarn test
```

--------------------------------

### Get Clone List of Nodes with Same RefKey

Source: https://github.com/mar10/wunderbaum/blob/main/docs/api/classes/wb_node.WunderbaumNode.html

Retrieves all nodes that share the same 'refKey' as the current node. Optionally includes the current node itself in the returned list.

```typescript
getCloneList(includeSelf?: boolean): WunderbaumNode[]
```

--------------------------------

### Get WunderbaumNode from Element or Event

Source: https://github.com/mar10/wunderbaum/blob/main/docs/api/classes/wunderbaum.Wunderbaum.html

Obtain a WunderbaumNode instance by providing an HTML element or a DOM event. This is helpful for identifying which node an event originated from or is associated with.

```typescript
getNode(el: Element | Event): null | WunderbaumNode
```

--------------------------------

### Find First Descendant Node by Matcher

Source: https://github.com/mar10/wunderbaum/blob/main/docs/api/classes/wb_node.WunderbaumNode.html

Find the first descendant node that matches a given condition, or null if none is found. See WunderbaumNode.findAll for examples of matchers.

```typescript
findFirst(match: string | RegExp | MatcherCallback): null | WunderbaumNode
```

--------------------------------

### Initialize Wunderbaum with Event Handlers

Source: https://github.com/mar10/wunderbaum/blob/main/docs/api/interfaces/wb_options.InitWunderbaumOptions.html

Configure event handlers like 'init', 'activate', and 'click' by providing callback functions in the options object during Wunderbaum initialization.

```javascript
const tree = new mar10.Wunderbaum({
  ...
  init: (e) => {
    console.log(`Tree ${e.tree} was initialized and loaded.`);
  },
  activate: (e) => {
    console.log(`Node ${e.node} was activated.`);
  },
  ...
});
```

--------------------------------

### Wunderbaum Initialization Options

Source: https://github.com/mar10/wunderbaum/blob/main/docs/api/interfaces/wb_options.InitWunderbaumOptions.html

Configuration options for Wunderbaum.

```APIDOC
## Wunderbaum Options

This section details the configuration options available for initializing a Wunderbaum instance.

### `Optional` debugLevel

*   **Type**: number
*   **Default**: 3 (4 in local debug environment)
*   **Description**: Sets the debug level for the Wunderbaum instance.
*   **Defined in**: src/wb_options.ts:66

### `Optional` dnd

*   **Type**: [DndOptionsType](../types/types.DndOptionsType.html)
*   **Description**: Configuration options for the drag-and-drop extension.
*   **Defined in**: src/wb_options.ts:242

### `Optional` edit

*   **Type**: [EditOptionsType](../types/types.EditOptionsType.html)
*   **Description**: Configuration options for the edit-title extension.
*   **Defined in**: src/wb_options.ts:244

### element

*   **Type**: string | HTMLDivElement
*   **Required**: Yes
*   **Description**: The target `div` element (or selector) that shall become a Wunderbaum.
*   **Defined in**: src/wb_options.ts:449

### `Optional` emptyChildListExpandable

*   **Type**: boolean
*   **Default**: false
*   **Description**: If true, allows expanding parent nodes even if `node.children` is an empty array (`[]`). This mimics the behavior of macOS Finder.
*   **Defined in**: src/wb_options.ts:78

### `Optional` enabled

*   **Type**: boolean
*   **Default**: true
*   **Description**: Enables or disables the Wunderbaum instance.
*   **Defined in**: src/wb_options.ts:180

### `Optional` filter

*   **Type**: [FilterOptionsType](../types/types.FilterOptionsType.html)
*   **Description**: Configuration options for the node-filter extension.
*   **Defined in**: src/wb_options.ts:246

### `Optional` fixedCol

*   **Type**: boolean
*   **Default**: false
*   **Description**: Enables or disables fixed columns.
*   **Defined in**: src/wb_options.ts:185

### `Optional` header

*   **Type**: null | string | boolean
*   **Description**: Controls the visibility and content of the tree header. `null`: assumes false for plain trees and true for grids. `string`: uses the provided text as the header (only for plain trees). `true`: displays a header using the tree's ID as text for plain trees. `false`: hides the header.
*   **Defined in**: src/wb_options.ts:142

### `Optional` icon

*   **Type**: [DynamicIconOption](../types/types.DynamicIconOption.html)
*   **Description**: An optional callback function to render icons for each node.
*   **Defined in**: src/wb_options.ts:164

### `Optional` iconMap

*   **Type**: string | [IconMapType](../types/types.IconMapType.html)
*   **Default**: "bootstrap"
*   **Description**: Defines the icon font mapping. Can be a string (e.g., "fontawesome6" or "bootstrap") or a map of `iconName: iconClass` pairs. The icon font must be loaded separately. To override default icons, use `Object.assign(Wunderbaum.iconMaps.bootstrap, { folder: "bi bi-archive" })`.
*   **Defined in**: src/wb_options.ts:106

### `Optional` iconTooltip

*   **Type**: [DynamicBoolOrStringOption](../types/types.DynamicBoolOrStringOption.html)
*   **Description**: An optional callback function to render a tooltip for the icon.
*   **Defined in**: src/wb_options.ts:166

### `Optional` id

*   **Type**: string
*   **Default**: `"wb_" + COUNTER`
*   **Description**: The identifier for this tree instance. Used for referencing the instance, especially when multiple trees are present (e.g., `tree = mar10.Wunderbaum.getTree("demo")`).
*   **Defined in**: src/wb_options.ts:456
```

--------------------------------

### Applying Feature Classes to Tree Container

Source: https://github.com/mar10/wunderbaum/blob/main/docs/tutorial/tutorial_styling.md

Example of adding feature classes like 'wb-no-select' and 'wb-checkbox-auto-hide' to a tree's div container to enable custom behavior.

```html
<div id="demo-tree" class="... wb-no-select wb-checkbox-auto-hide">...</div>
```

--------------------------------

### Basic Tree Initialization

Source: https://context7.com/mar10/wunderbaum/llms.txt

Initialize a Wunderbaum instance by providing a container element and configuration options, including source data and event handlers. Ensure Bootstrap and Wunderbaum CSS/JS are included.

```html
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/wunderbaum@0/dist/wunderbaum.min.css" />
  <script defer src="https://cdn.jsdelivr.net/npm/wunderbaum@0/dist/wunderbaum.umd.min.js"></script>
</head>
<body>
  <div id="demo-tree" class="wb-skeleton wb-initializing wb-fade-expander"></div>

  <script>
    document.addEventListener("DOMContentLoaded", () => {
      const tree = new mar10.Wunderbaum({
        element: document.getElementById("demo-tree"),
        id: "demo",
        source: [
          {
            title: "Node 1",
            expanded: true,
            children: [
              { title: "Node 1.1" },
              { title: "Node 1.2" }
            ]
          },
          { title: "Node 2", lazy: true }
        ],
        init: (e) => {
          e.tree.setFocus();
          console.log("Tree initialized with", e.tree.count(), "nodes");
        },
        activate: (e) => {
          console.log(`Activated: ${e.node.title}`);
        }
      });
    });
  </script>
</body>
</html>
```

--------------------------------

### InitWunderbaumOptions Interface

Source: https://github.com/mar10/wunderbaum/blob/main/docs/api/interfaces/wb_options.InitWunderbaumOptions.html

This section details the available options for initializing a Wunderbaum instance. Most options are optional and have default values. The `element` option is mandatory. Some options are stored on the tree instance, while others are only used during initialization.

```APIDOC
## Interface InitWunderbaumOptions

Available options for [wunderbaum.Wunderbaum](../classes/wunderbaum.Wunderbaum.html).

Options are passed to the constructor as plain object:

```javascript
const tree = new mar10.Wunderbaum({
  id: "demo",
  element: document.getElementById("demo-tree"),
  source: "url/of/data/request",
  ...
});
```

Event handlers are also passed as callbacks

```javascript
const tree = new mar10.Wunderbaum({
  ...
  init: (e) => {
    console.log(`Tree ${e.tree} was initialized and loaded. `)
  },
  activate: (e) => {
    console.log(`Node ${e.node} was activated. `)
  },
  ...
});
```

Most of the properties are optional and have resonable default. They are then available as Wunderbaum.options property and can be changed at runtime. 
Only the `element` option is mandatory.

Note that some options passed here, are _not_ available as Wunderbaum.options. They are moved to the `tree` instance instead:

*   `tree.element`
*   `tree.id`
*   `tree.columns`
*   `tree.types`
*   ...

Some options are only used during initialization and are not stored in the tree instance:

*   `source`

### Properties

#### activate

- **activate** (function) - Optional - Callback for node activation.

#### adjustHeight

- **adjustHeight** (boolean) - Optional - Adjusts the tree height.

#### autoCollapse

- **autoCollapse** (boolean) - Optional - Enables auto-collapse behavior.

#### autoKeys

- **autoKeys** (boolean) - Optional - Enables automatic key generation.

#### beforeActivate

- **beforeActivate** (function) - Optional - Callback before node activation. Can return a cancelable event result.

#### beforeExpand

- **beforeExpand** (function) - Optional - Callback before node expansion. Can return a cancelable event result.

#### beforeSelect

- **beforeSelect** (function) - Optional - Callback before node selection. Can return a cancelable event result.

#### buttonClick

- **buttonClick** (function) - Optional - Callback for button clicks.

#### change

- **change** (function) - Optional - Callback for tree changes.

#### checkbox

- **checkbox** (DynamicCheckboxOption) - Optional - Configuration for checkboxes.

#### click

- **click** (function) - Optional - Callback for node clicks. Can return a cancelable event result.

#### columns

- **columns** (ColumnDefinitionList) - Optional - Defines the columns for the tree.

#### columnsFilterable

- **columnsFilterable** (boolean) - Optional - Enables filtering for columns.

#### columnsMenu

- **columnsMenu** (boolean) - Optional - Enables a menu for columns.

#### columnsResizable

- **columnsResizable** (boolean) - Optional - Enables resizing for columns.

#### columnsSortable

- **columnsSortable** (boolean) - Optional - Enables sorting for columns.

#### connectTopBreadcrumb

- **connectTopBreadcrumb** (string | HTMLElement | null) - Optional - Connects to a top breadcrumb.

#### dblclick

- **dblclick** (function) - Optional - Callback for node double clicks. Can return a cancelable event result.

#### deactivate

- **deactivate** (function) - Optional - Callback for node deactivation. Can return a cancelable event result.

#### debugLevel

- **debugLevel** (number) - Optional - Sets the debug level.

#### discard

- **discard** (function) - Optional - Callback when a node is discarded.

#### dnd

- **dnd** (DndOptionsType) - Optional - Configuration for drag and drop functionality.

#### edit

- **edit** (EditOptionsType) - Optional - Configuration for inline editing.

#### element

- **element** (string | HTMLDivElement) - Required - The HTML element or its ID where the tree will be rendered.

#### emptyChildListExpandable

- **emptyChildListExpandable** (boolean) - Optional - Allows expanding nodes with empty child lists.

```

--------------------------------

### Build Project for Local Test

Source: https://github.com/mar10/wunderbaum/blob/main/docs/tutorial/contribute.md

Compiles the project for local testing purposes.

```bash
yarn build
```

--------------------------------

### Get HTML Element by Selector

Source: https://github.com/mar10/wunderbaum/blob/main/docs/api/functions/util.elemFromSelector.html

Returns an array of HTML elements matching the provided CSS selector, or casts an existing element. Handles generic HTMLElement types.

```typescript
elemFromSelector<T = HTMLElement>(obj: string | T): null | T[]
```

--------------------------------

### Wunderbaum Initialization with Options

Source: https://github.com/mar10/wunderbaum/blob/main/docs/tutorial/tutorial_keyboard.md

Configure Wunderbaum with various options for enabling features like checkboxes, navigation modes, and quick search. The keydown event can be customized to prevent default behavior.

```javascript
const tree = new Wunderbaum({
  ...enable: true,
  autoActivate: true,
  checkbox: true,
  navigationModeOption: "startRow",  // | "cell" | "startCell" | "row"
  quicksearch: true,
  ...
  // --- Events ---
  keydown: (e) => {
    // Return false to prevent default behavior
  }
  ...
  edit: {
    trigger: ["F2", "macEnter", ...],
    ...
  },
});
```

--------------------------------

### Convert to Boolean

Source: https://github.com/mar10/wunderbaum/blob/main/docs/api/functions/util.toBool.html

Use toBool to get the first non-null boolean value from a list of potential boolean inputs. It's useful for handling optional flags or default values.

```typescript
const opts = { flag: true };
const value = util.toBool(opts.foo, opts.flag, false);  // returns true
```

--------------------------------

### Convert Event to String - Wunderbaum Util

Source: https://github.com/mar10/wunderbaum/blob/main/docs/api/functions/util.eventToString.html

Use this function to get a canonical string representation of a keyboard or mouse event. It includes modifiers, making it useful for switch statements.

```typescript
document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";
document.body.style.display="none";
setTimeout(() => app?.showPage():document.body.style.removeProperty("display"),500)
```

```typescript
const eventName = util.eventToString(e);
switch (eventName) {
  case "+":
  case "Add":
    ...
    break;
  case "Enter":
  case "End":
  case "Control+End":
  case "Meta+ArrowDown":
  case "PageDown":
    ...
    break;
}
```

--------------------------------

### Get Option from Object

Source: https://github.com/mar10/wunderbaum/blob/main/docs/api/functions/util.getOption.html

Retrieves an option by name from an object. Supports dot notation for nested properties. Returns a default value if the object is invalid or the property doesn't exist.

```typescript
getOption(opts: any, name: string, defaultValue?: any): any[]
```

--------------------------------

### Initialize Wunderbaum with Basic Options

Source: https://github.com/mar10/wunderbaum/blob/main/docs/api/interfaces/wb_options.InitWunderbaumOptions.html

Instantiate a Wunderbaum tree by passing an options object to the constructor. The `element` option is mandatory.

```javascript
const tree = new mar10.Wunderbaum({
  id: "demo",
  element: document.getElementById("demo-tree"),
  source: "url/of/data/request",
  ...
});
```

--------------------------------

### Get Event Information for Wunderbaum

Source: https://github.com/mar10/wunderbaum/blob/main/docs/api/classes/wunderbaum.Wunderbaum.html

Extract detailed information about a mouse event within a Wunderbaum, including the associated node and the specific region of the node that was interacted with (e.g., title, expander, checkbox).

```typescript
getEventInfo(event: Event): WbEventInfo[]
```

--------------------------------

### Wunderbaum Initialization and Event Handlers

Source: https://github.com/mar10/wunderbaum/blob/main/docs/tutorial/concepts.md

Initialize a Wunderbaum instance with configuration options and define event handlers for common user interactions like activation, data changes, and node rendering.

```javascript
const tree = new Wunderbaum({
  // ...
  activate: (e) => {
    console.log("Node was activated:", e.node);
  },
  change: (e) => {
    console.log("Grid data was modified:", e);
  },
  render: (e) => {
    // e.node was rendered. We may now modify the markup...
  },
});
```

--------------------------------

### Get Tree Instance by Selector or Event

Source: https://github.com/mar10/wunderbaum/blob/main/docs/api/classes/wunderbaum.Wunderbaum.html

Retrieve a Wunderbaum instance using various identifiers like element selectors, IDs, indices, or events. Useful for accessing tree functionality from different contexts.

```typescript
getTree();         // Get first Wunderbaum instance on page
getTree(1);        // Get second Wunderbaum instance on page
getTree(event);    // Get tree for this mouse- or keyboard event
getTree("foo");    // Get tree for this `tree.options.id`
getTree("#tree");  // Get tree for first matching element selector
```

--------------------------------

### Store User Input in Node Data

Source: https://github.com/mar10/wunderbaum/blob/main/docs/api/functions/util.getValueFromElem.html

Example of using getValueFromElem within a change event handler to read user input from an element and store it in the node's data model. This is useful for updating data when user input changes.

```typescript
change: (e) => {
    const tree = e.tree;
    const node = e.node;
    // Read the value from the input control that triggered the change event:
    let value = tree.getValueFromElem(e.element);
    // and store it to the node model (assuming the column id matches the property name)
    node.data[e.info.colId] = value;
  }
```

--------------------------------

### ExpandAllOptions Interface

Source: https://github.com/mar10/wunderbaum/blob/main/docs/api/interfaces/types.ExpandAllOptions.html

The ExpandAllOptions interface provides configuration options for the `expandAll` methods in Wunderbaum. These options allow fine-grained control over how nodes are expanded or collapsed, including depth restrictions, lazy loading behavior, and whether to collapse other branches.

```APIDOC
## Interface ExpandAllOptions

Possible values for [Wunderbaum.expandAll](../classes/wunderbaum.Wunderbaum.html#expandall) and [WunderbaumNode.expandAll](../classes/wb_node.WunderbaumNode.html#expandall).

### Properties

*   **collapseOthers** (boolean) - Optional - Expand up to level=depth and collapse all other branches. Only in combination with `flag == true`, `depth > 0`. Defaults to `false`.
*   **deep** (boolean) - Optional - Also collapse child nodes beyond the `depth` level. Otherwise only the `depth` level is collapsed and the expand state of the descendants is retained. Only in combination with collapse and `depth`. Expanding with `deep` option is not supported as recursion depth implied by the `depth` option. However a `deep` option will be considered if `collapseOthers` is set. Defaults to `false`.
*   **depth** (number) - Optional - Restrict expand level. Pass 0 to make only toplevel nodes visible, 1 to expand one level deeper, etc. Defaults to `unset (unlimited)`.
*   **force** (boolean) - Optional - Ignore tree's `minExpandLevel` option. Defaults to `false`.
*   **keepActiveNodeVisible** (boolean) - Optional - Keep active node visible. Defaults to `true`.
*   **loadLazy** (boolean) - Optional - Expand and load lazy nodes. Defaults to `false`.
*   **resetLazy** (boolean) - Optional - Unload lazily loaded children if any (if collapsing). Defaults to `false`.

### Request Example

```json
{
  "collapseOthers": true,
  "deep": true,
  "depth": 2,
  "force": false,
  "keepActiveNodeVisible": true,
  "loadLazy": true,
  "resetLazy": false
}
```

### Response Example

(This interface is used for request options and does not have a direct response example.)
```

--------------------------------

### Initialization Event: init

Source: https://github.com/mar10/wunderbaum/blob/main/docs/api/interfaces/wb_options.InitWunderbaumOptions.html

Fires when the tree markup is created and initial data is loaded. Useful for activating nodes, setting focus, or enabling other controls. Also indicates initialization errors.

```APIDOC
## Optional init Event

### Description
Fires when the tree markup was created and the initial source data was loaded. Typical use cases would be activating a node, setting focus, enabling other controls on the page, etc. Also sent if an error occured during initialization (check `e.error` for status).

### Method
`init?: (e: WbInitEventType) => void`

### Parameters
#### Event Object (`e`)
- **error** (any) - Optional - Status of initialization if an error occurred.
```

--------------------------------

### Generate API Documentation

Source: https://github.com/mar10/wunderbaum/blob/main/docs/tutorial/contribute.md

Manually triggers the generation of API documentation from TypeScript sources using TypeDoc.

```bash
yarn api_docs
```

--------------------------------

### Configure Drag and Drop Operations in Wunderbaum

Source: https://context7.com/mar10/wunderbaum/llms.txt

Enable drag and drop functionality using the HTML5 API. Configure drag start, enter, over, and drop events to customize behavior, define drop regions, and handle different drop effects like copy, link, or move.

```javascript
const tree = new mar10.Wunderbaum({
  element: document.getElementById("demo-tree"),
  source: "/api/tree",

  dnd: {
    effectAllowed: "all",
    dropEffectDefault: "move",
    guessDropEffect: true,

    dragStart: (e) => {
      if (e.node.type === "folder") {
        return false;  // Prevent dragging folders
      }
      // Customize drag image or data
      e.event.dataTransfer.setData("text/plain", e.node.title);
      return true;
    },

    dragEnter: (e) => {
      // Define allowed drop regions
      if (e.node.type === "folder") {
        return "over";  // Can only drop inside folders
      }
      return ["before", "after"];  // Can drop as sibling
    },

    dragOver: (e) => {
      // Optionally modify drop effect during drag
      // e.event.dataTransfer.dropEffect = "copy";
    },

    drop: (e) => {
      console.log(`Drop ${e.sourceNode} ${e.suggestedDropMode} ${e.node}`);

      switch (e.suggestedDropEffect) {
        case "copy":
          e.node.addNode(
            { title: `Copy of ${e.sourceNodeData.title}` },
            e.suggestedDropMode
          );
          break;
        case "link":
          e.node.addNode(
            { title: `Link to ${e.sourceNodeData.title}` },
            e.suggestedDropMode
          );
          break;
        case "move":
        default:
          e.sourceNode.moveTo(e.node, e.suggestedDropMode);
      }
    }
  }
});
```

--------------------------------

### startEditTitle API

Source: https://github.com/mar10/wunderbaum/blob/main/docs/api/classes/wb_node.WunderbaumNode.html

Initiates the editing mode for the current node's title.

```APIDOC
## startEditTitle API

### Description
Start editing this node's title.

### Method
(Implicitly a method of a Wunderbaum Node)

### Parameters
None

### Request Example
```json
null
```

### Response
#### Success Response (200)
This method returns void.

#### Response Example
```json
null
```
```

--------------------------------

### Initialize Wunderbaum with JSON Source

Source: https://github.com/mar10/wunderbaum/blob/main/test/triage/issue_109.html

Instantiate a new Wunderbaum component, specifying the target element and a JSON data source URL. Debugging is enabled with level 5.

```javascript
new mar10.Wunderbaum({
  id: "demo",
  element: document.getElementById("demo-tree"),
  source: "https://cdn.jsdelivr.net/gh/mar10/assets@master/wunderbaum/tree_fmea_XL_t_flat_comp.json",
  debugLevel: 5
});
```

--------------------------------

### Configure Icon Map in Wunderbaum

Source: https://github.com/mar10/wunderbaum/blob/main/docs/api/interfaces/wb_options.InitWunderbaumOptions.html

Customize icon mappings for Wunderbaum, allowing for specific icon classes for different node types. The icon font must be loaded separately. This example shows how to override default icons, like the folder icon, by merging with existing icon maps.

```javascript
const tree = new mar10.Wunderbaum({
  ...
  iconMap: Object.assign(Wunderbaum.iconMaps.bootstrap,
    {
      folder: "bi bi-archive",
    }
  ),
});
```