wunderbaum 0.0.4 → 0.0.5

package/src/util.ts

@@ -198,7 +198,7 @@ export function extractHtmlText(s: string) {
  *
  * If a `<span class="wb-col">` is passed, the first child input is used.
  * Depending on the target element type, `value` is interpreted accordingly.
- * For example for a checkbox, a value of true, false, or null is returned if the
+ * For example for a checkbox, a value of true, false, or null is returned if
  * the element is checked, unchecked, or indeterminate.
  * For datetime input control a numerical value is assumed, etc.
  *
@@ -300,7 +300,9 @@ export function setValueToElem(elem: HTMLElement, value: any): void {
 
     switch (type) {
       case "checkbox":
-        input.indeterminate = value == null;
+        // An explicit `null` value is interpreted as 'indeterminate'.
+        // `undefined` is interpreted as 'unchecked'
+        input.indeterminate = value === null;
         input.checked = !!value;
         break;
       case "date":
@@ -682,7 +684,7 @@ export function toSet(val: any): Set<string> {
   throw new Error("Cannot convert to Set<string>: " + val);
 }
 
-/**Return a canonical string representation for an object's type (e.g. 'array', 'number', ...) */
+/** Return a canonical string representation for an object's type (e.g. 'array', 'number', ...). */
 export function type(obj: any): string {
   return Object.prototype.toString
     .call(obj)
@@ -697,12 +699,12 @@ export function type(obj: any): string {
  * previous call.
  * Example:
  * ```js
- * throttledFoo = util.addaptiveThrottle(foo.bind(this), {});
+ * throttledFoo = util.adaptiveThrottle(foo.bind(this), {});
  * throttledFoo();
  * throttledFoo();
  * ```
  */
-export function addaptiveThrottle(
+export function adaptiveThrottle(
   this: unknown,
   callback: (...args: any[]) => void,
   options: any
@@ -724,7 +726,7 @@ export function addaptiveThrottle(
   const throttledFn = (...args: any[]) => {
     if (waiting) {
       pendingArgs = args;
-      // console.log(`addaptiveThrottle() queing request #${waiting}...`, args);
+      // console.log(`adaptiveThrottle() queing request #${waiting}...`, args);
       waiting += 1;
     } else {
       // Prevent invocations while running or blocking
@@ -732,7 +734,7 @@ export function addaptiveThrottle(
       const useArgs = args; // pendingArgs || args;
       pendingArgs = null;
 
-      // console.log(`addaptiveThrottle() execute...`, useArgs);
+      // console.log(`adaptiveThrottle() execute...`, useArgs);
       const start = Date.now();
       try {
         callback.apply(this, useArgs);
@@ -747,7 +749,7 @@ export function addaptiveThrottle(
       );
       const useDelay = Math.max(minDelay, curDelay - elap);
       // console.log(
-      //   `addaptiveThrottle() calling worker took ${elap}ms. delay = ${curDelay}ms, using ${useDelay}ms`,
+      //   `adaptiveThrottle() calling worker took ${elap}ms. delay = ${curDelay}ms, using ${useDelay}ms`,
       //   pendingArgs
       // );
       setTimeout(() => {
@@ -757,7 +759,7 @@ export function addaptiveThrottle(
         if (pendingArgs != null) {
           // There was another request while running or waiting
           // console.log(
-          //   `addaptiveThrottle() re-trigger (missed ${skipped})...`,
+          //   `adaptiveThrottle() re-trigger (missed ${skipped})...`,
           //   pendingArgs
           // );
           throttledFn.apply(this, pendingArgs);

package/src/wb_ext_dnd.ts

@@ -245,8 +245,9 @@ export class DndExtension extends WunderbaumExtension {
     const ltn = this.lastTargetNode;
     this.lastEnterStamp = 0;
     if (ltn) {
-      ltn.removeClass(
-        "wb-drop-target wb-drop-over wb-drop-after wb-drop-before"
+      ltn.setClass(
+        "wb-drop-target wb-drop-over wb-drop-after wb-drop-before",
+        false
       );
       this.lastTargetNode = null;
     }
@@ -295,7 +296,7 @@ export class DndExtension extends WunderbaumExtension {
   protected autoScroll(event: DragEvent): number {
     let tree = this.tree,
       dndOpts = tree.options.dnd!,
-      sp = tree.scrollContainer,
+      sp = tree.scrollContainerElement,
       sensitivity = dndOpts.scrollSensitivity,
       speed = dndOpts.scrollSpeed,
       scrolled = 0;
@@ -352,7 +353,7 @@ export class DndExtension extends WunderbaumExtension {
       setTimeout(() => {
         // Decouple this call, so the CSS is applied to the node, but not to
         // the system generated drag image
-        srcNode.addClass("wb-drag-source");
+        srcNode.setClass("wb-drag-source");
       }, 0);
 
       // --- drag ---
@@ -360,7 +361,7 @@ export class DndExtension extends WunderbaumExtension {
       // This event occurs very often...
       // --- dragend ---
     } else if (e.type === "dragend") {
-      srcNode.removeClass("wb-drag-source");
+      srcNode.setClass("wb-drag-source", false);
       this.srcNode = null;
       if (this.lastTargetNode) {
         this._leaveNode();
@@ -424,7 +425,7 @@ export class DndExtension extends WunderbaumExtension {
       }
       this.lastAllowedDropRegions = regionSet;
       this.lastDropEffect = dt.dropEffect;
-      targetNode.addClass("wb-drop-target");
+      targetNode.setClass("wb-drop-target");
 
       e.preventDefault(); // Allow drop (Drop operation is denied by default)
       return false;
@@ -450,9 +451,9 @@ export class DndExtension extends WunderbaumExtension {
       if (!region) {
         return; // We already rejected in dragenter
       }
-      targetNode.toggleClass("wb-drop-over", region === "over");
-      targetNode.toggleClass("wb-drop-before", region === "before");
-      targetNode.toggleClass("wb-drop-after", region === "after");
+      targetNode.setClass("wb-drop-over", region === "over");
+      targetNode.setClass("wb-drop-before", region === "before");
+      targetNode.setClass("wb-drop-after", region === "after");
       // console.log("dragover", e);
 
       // dt.dropEffect = this.lastDropEffect!;

package/src/wb_ext_edit.ts

@@ -63,14 +63,14 @@ export class EditExtension extends WunderbaumExtension {
 
     node.log(`_applyChange(${eventName})`, extra);
 
-    colElem.classList.add("wb-dirty");
+    colElem.classList.add("wb-busy");
     colElem.classList.remove("wb-error");
     try {
       res = node._callEvent(eventName, extra);
     } catch (err) {
       node.logError(`Error in ${eventName} event handler`, err);
       colElem.classList.add("wb-error");
-      colElem.classList.remove("wb-dirty");
+      colElem.classList.remove("wb-busy");
     }
     // Convert scalar return value to a resolved promise
     if (!(res instanceof Promise)) {
@@ -82,7 +82,7 @@ export class EditExtension extends WunderbaumExtension {
         colElem.classList.add("wb-error");
       })
       .finally(() => {
-        colElem.classList.remove("wb-dirty");
+        colElem.classList.remove("wb-busy");
       });
     return res;
   }
@@ -130,15 +130,14 @@ export class EditExtension extends WunderbaumExtension {
     const eventName = eventToString(event);
     const tree = this.tree;
     const trigger = this.getPluginOption("trigger");
-    const inputElem =
-      event.target && event.target.closest("input,[contenteditable]");
-    // let handled = true;
+    // const inputElem =
+    //   event.target && event.target.closest("input,[contenteditable]");
 
     tree.logDebug(`_preprocessKeyEvent: ${eventName}`);
 
     // --- Title editing: apply/discard ---
-    if (inputElem) {
-      //this.isEditingTitle()) {
+    // if (inputElem) {
+    if (this.isEditingTitle()) {
       switch (eventName) {
         case "Enter":
           this._stopEditTitle(true, { event: event });
@@ -205,7 +204,7 @@ export class EditExtension extends WunderbaumExtension {
     titleSpan.innerHTML = inputHtml;
     const inputElem = titleSpan.firstElementChild as HTMLInputElement;
     if (validity) {
-      // Permanently apply  input validations (CSS and tooltip)
+      // Permanently apply input validations (CSS and tooltip)
       inputElem.addEventListener("keydown", (e) => {
         inputElem.setCustomValidity("");
         if (!inputElem.reportValidity()) {
@@ -336,7 +335,7 @@ export class EditExtension extends WunderbaumExtension {
       return;
     }
     const newNode = node.addNode(init, mode);
-    newNode.addClass("wb-edit-new");
+    newNode.setClass("wb-edit-new");
     this.relatedNode = node;
 
     // Don't filter new nodes:

package/src/wb_ext_filter.ts

@@ -28,6 +28,7 @@ export class FilterExtension extends WunderbaumExtension {
 
   constructor(tree: Wunderbaum) {
     super(tree, "filter", {
+      attachInput: null, // Element or selector of an input control for filter query strings
       autoApply: true, // Re-apply last filter if lazy data is loaded
       autoExpand: false, // Expand all branches that contain matches while filtered
       counter: true, // Show a badge with number of matching child nodes near parent icons
@@ -36,14 +37,14 @@ export class FilterExtension extends WunderbaumExtension {
       hideExpanders: false, // Hide expanders if all child nodes are hidden by filter
       highlight: true, // Highlight matches by wrapping inside <mark> tags
       leavesOnly: false, // Match end nodes only
-      mode: "hide", // Grayout unmatched nodes (pass "hide" to remove unmatched node instead)
+      mode: "dim", // Grayout unmatched nodes (pass "hide" to remove unmatched node instead)
       noData: true, // Display a 'no data' status node if result is empty
     });
   }
 
   init() {
     super.init();
-    let attachInput = this.getPluginOption("attachInput");
+    const attachInput = this.getPluginOption("attachInput");
     if (attachInput) {
       this.queryInput = elemFromSelector(attachInput) as HTMLInputElement;
       onEvent(
@@ -57,6 +58,17 @@ export class FilterExtension extends WunderbaumExtension {
     }
   }
 
+  setPluginOption(name: string, value: any): void {
+    // alert("filter opt=" + name + ", " + value)
+    super.setPluginOption(name, value);
+    switch (name) {
+      case "mode":
+        this.tree.filterMode = value === "hide" ? "hide" : "dim";
+        this.tree.updateFilter();
+        break;
+    }
+  }
+
   _applyFilterNoUpdate(
     filter: string | NodeFilterCallback,
     branchMode: boolean,

package/src/wb_ext_keynav.ts

@@ -4,7 +4,11 @@
  * @VERSION, @DATE (https://github.com/mar10/wunderbaum)
  */
 
-import { NavigationMode, NavigationModeOption } from "./common";
+import {
+  // NAVIGATE_IN_INPUT_KEYS,
+  NavigationMode,
+  NavigationModeOption,
+} from "./common";
 import { eventToString } from "./util";
 import { Wunderbaum } from "./wunderbaum";
 import { WunderbaumNode } from "./wb_node";
@@ -15,18 +19,47 @@ export class KeynavExtension extends WunderbaumExtension {
     super(tree, "keynav", {});
   }
 
+  protected _getEmbeddedInputElem(
+    elem: any,
+    setFocus = false
+  ): HTMLInputElement | null {
+    let input = null;
+
+    if (elem && elem.type != null) {
+      input = elem;
+    } else {
+      // ,[contenteditable]
+      const ace = this.tree.getActiveColElem()?.querySelector("input,select");
+      if (ace) {
+        input = ace as HTMLInputElement;
+      }
+    }
+    if (setFocus && input) {
+      this.tree.log("focus", input);
+      input.focus();
+    }
+    return input;
+  }
+
   onKeyEvent(data: any): boolean | undefined {
-    let event = data.event,
-      eventName = eventToString(event),
-      focusNode,
-      node = data.node as WunderbaumNode,
+    const event = data.event,
       tree = this.tree,
       opts = data.options,
-      handled = true,
-      activate = !event.ctrlKey || opts.autoActivate;
-    const navModeOption = opts.navigationMode;
+      activate = !event.ctrlKey || opts.autoActivate,
+      curInput = this._getEmbeddedInputElem(event.target),
+      navModeOption = opts.navigationMode as NavigationModeOption,
+      isCellEditMode = tree.navMode === NavigationMode.cellEdit;
 
-    tree.logDebug(`onKeyEvent: ${eventName}`);
+    let focusNode,
+      eventName = eventToString(event),
+      node = data.node as WunderbaumNode,
+      handled = true;
+
+    tree.log(`onKeyEvent: ${eventName}, curInput`, curInput);
+    if (!tree.isEnabled()) {
+      // tree.logDebug(`onKeyEvent ignored for disabled tree: ${eventName}`);
+      return false;
+    }
 
     // Let callback prevent default processing
     if (tree._callEvent("keydown", data) === false) {
@@ -58,12 +91,15 @@ export class KeynavExtension extends WunderbaumExtension {
     }
 
     if (tree.navMode === NavigationMode.row) {
+      // -----------------------------------------------------------------------
+      // --- Row Mode ---
+      // -----------------------------------------------------------------------
       // --- Quick-Search
       if (
         opts.quicksearch &&
         eventName.length === 1 &&
-        /^\w$/.test(eventName)
-        // && !$target.is(":input:enabled")
+        /^\w$/.test(eventName) &&
+        !curInput
       ) {
         // Allow to search for longer streaks if typed in quickly
         const stamp = Date.now();
@@ -143,7 +179,17 @@ export class KeynavExtension extends WunderbaumExtension {
           handled = false;
       }
     } else {
-      // Standard navigation (cell mode)
+      // -----------------------------------------------------------------------
+      // --- Cell Mode ---
+      // -----------------------------------------------------------------------
+      // // Standard navigation (cell mode)
+      // if (isCellEditMode && NAVIGATE_IN_INPUT_KEYS.has(eventName)) {
+      // }
+      if (eventName === "Tab") {
+        eventName = "ArrowRight";
+      } else if (eventName === "Shift+Tab") {
+        eventName = tree.activeColIdx > 0 ? "ArrowLeft" : "";
+      }
       switch (eventName) {
         case " ":
           if (tree.activeColIdx === 0 && node.getOption("checkbox")) {
@@ -162,13 +208,24 @@ export class KeynavExtension extends WunderbaumExtension {
           if (tree.activeColIdx === 0 && node.isExpandable()) {
             node.setExpanded(!node.isExpanded());
             handled = true;
+          } else if (
+            !isCellEditMode &&
+            (navModeOption === NavigationModeOption.startCell ||
+              navModeOption === NavigationModeOption.startRow)
+          ) {
+            tree.setNavigationMode(NavigationMode.cellEdit);
+            this._getEmbeddedInputElem(null, true); // set focus to input
+            handled = true;
           }
           break;
         case "Escape":
           if (tree.navMode === NavigationMode.cellEdit) {
             tree.setNavigationMode(NavigationMode.cellNav);
             handled = true;
-          } else if (tree.navMode === NavigationMode.cellNav) {
+          } else if (
+            tree.navMode === NavigationMode.cellNav &&
+            navModeOption !== NavigationModeOption.cell
+          ) {
             tree.setNavigationMode(NavigationMode.row);
             handled = true;
           }
@@ -176,6 +233,9 @@ export class KeynavExtension extends WunderbaumExtension {
         case "ArrowLeft":
           if (tree.activeColIdx > 0) {
             tree.setColumn(tree.activeColIdx - 1);
+            if (isCellEditMode) {
+              this._getEmbeddedInputElem(null, true); // set focus to input
+            }
             handled = true;
           } else if (navModeOption !== NavigationModeOption.cell) {
             tree.setNavigationMode(NavigationMode.row);
@@ -185,6 +245,9 @@ export class KeynavExtension extends WunderbaumExtension {
         case "ArrowRight":
           if (tree.activeColIdx < tree.columns.length - 1) {
             tree.setColumn(tree.activeColIdx + 1);
+            if (isCellEditMode) {
+              this._getEmbeddedInputElem(null, true); // set focus to input
+            }
             handled = true;
           }
           break;
@@ -200,6 +263,10 @@ export class KeynavExtension extends WunderbaumExtension {
         case "PageDown":
         case "PageUp":
           node.navigate(eventName, { activate: activate, event: event });
+          if (isCellEditMode) {
+            this._getEmbeddedInputElem(null, true); // set focus to input
+          }
+          handled = true;
           break;
         default:
           handled = false;

package/src/wb_node.ts

@@ -50,7 +50,7 @@ const NODE_PROPS = new Set<string>([
 const NODE_ATTRS = new Set<string>([
   "checkbox",
   "expanded",
-  "extraClasses", // TODO: rename to classes
+  "classes",
   "folder",
   "icon",
   "iconTooltip",
@@ -108,8 +108,8 @@ export class WunderbaumNode {
   public type?: string;
   public tooltip?: string;
   /** Additional classes added to `div.wb-row`.
-   * @see {@link addClass}, {@link removeClass}, {@link toggleClass}. */
-  public extraClasses = new Set<string>();
+   * @see {@link hasClass}, {@link setClass}. */
+  public classes: Set<string> | null = null; //new Set<string>();
   /** Custom data that was passed to the constructor */
   public data: any = {};
   // --- Node Status ---
@@ -150,9 +150,7 @@ export class WunderbaumNode {
     this.lazy = data.lazy === true;
     this.selected = data.selected === true;
     if (data.classes) {
-      for (const c of data.classes.split(" ")) {
-        this.extraClasses.add(c.trim());
-      }
+      this.setClass(data.classes);
     }
     // Store custom fields as `node.data`
     for (const [key, value] of Object.entries(data)) {
@@ -172,7 +170,7 @@ export class WunderbaumNode {
    * @internal
    */
   toString() {
-    return "WunderbaumNode@" + this.key + "<'" + this.title + "'>";
+    return `WunderbaumNode@${this.key}<'${this.title}'>`;
   }
 
   // /** Return an option value. */
@@ -307,28 +305,39 @@ export class WunderbaumNode {
     return this.tree.applyCommand(cmd, this, opts);
   }
 
-  addClass(className: string | string[] | Set<string>) {
-    const cnSet = util.toSet(className);
-    cnSet.forEach((cn) => {
-      this.extraClasses.add(cn);
-      this._rowElem?.classList.add(cn);
-    });
-  }
-
-  removeClass(className: string | string[] | Set<string>) {
-    const cnSet = util.toSet(className);
-    cnSet.forEach((cn) => {
-      this.extraClasses.delete(cn);
-      this._rowElem?.classList.remove(cn);
-    });
-  }
-
-  toggleClass(className: string | string[] | Set<string>, flag: boolean) {
+  /**
+   * Add/remove one or more classes to `<div class='wb-row'>`.
+   *
+   * This also maintains `node.classes`, so the class will survive a re-render.
+   *
+   * @param className one or more class names. Multiple classes can be passed
+   *     as space-separated string, array of strings, or set of strings.
+   */
+  setClass(
+    className: string | string[] | Set<string>,
+    flag: boolean = true
+  ): void {
     const cnSet = util.toSet(className);
-    cnSet.forEach((cn) => {
-      flag ? this.extraClasses.add(cn) : this.extraClasses.delete(cn);
-      this._rowElem?.classList.toggle(cn, flag);
-    });
+    if (flag) {
+      if (this.classes === null) {
+        this.classes = new Set<string>();
+      }
+      cnSet.forEach((cn) => {
+        this.classes!.add(cn);
+        this._rowElem?.classList.toggle(cn, flag);
+      });
+    } else {
+      if (this.classes === null) {
+        return;
+      }
+      cnSet.forEach((cn) => {
+        this.classes!.delete(cn);
+        this._rowElem?.classList.toggle(cn, flag);
+      });
+      if (this.classes.size === 0) {
+        this.classes = null;
+      }
+    }
   }
 
   /** */
@@ -527,6 +536,11 @@ export class WunderbaumNode {
     return !!(this.children && this.children.length);
   }
 
+  /** Return true if node has className set. */
+  hasClass(className: string): boolean {
+    return this.classes ? this.classes.has(className) : false;
+  }
+
   /** Return true if this node is the currently active tree node. */
   isActive() {
     return this.tree.activeNode === this;
@@ -705,9 +719,13 @@ export class WunderbaumNode {
       "If `source` is an object, it must have a `children` property"
     );
     if (source.types) {
-      // TODO: convert types.classes to Set()
-      util.extend(tree.types, source.types);
+      tree.setTypes(source.types, false);
+    }
+    if (source.columns) {
+      tree.columns = source.columns;
+      tree.updateColumns({ calculateCols: false });
     }
+
     this.addChildren(source.children);
 
     this._callEvent("load");
@@ -1381,8 +1399,8 @@ export class WunderbaumNode {
     // Replace previous classes:
     rowDiv.className = rowClasses.join(" ");
 
-    // Add classes from `node.extraClasses`
-    rowDiv.classList.add(...this.extraClasses);
+    // Add classes from `node.classes`
+    this.classes ? rowDiv.classList.add(...this.classes) : 0;
 
     // Add classes from `tree.types[node.type]`
     if (typeInfo && typeInfo.classes) {
@@ -1823,9 +1841,9 @@ export class WunderbaumNode {
    * @param {object} [extra]
    */
   triggerModify(operation: string, extra?: any) {
-    if (!this.parent) {
-      return;
-    }
+    // if (!this.parent) {
+    //   return;
+    // }
     this.parent.triggerModifyChild(operation, this, extra);
   }
 

package/src/wb_options.ts

@@ -23,6 +23,43 @@ export interface WbNodeData {
   // ...any?: Any;
 }
 
+export interface ColumnDefinition {
+  /** Column ID (pass "*" for the main tree nodes column ) */
+  id: string;
+  /** Column header (defaults to id) */
+  title: string;
+  /** Column width or weight.
+   * Either an absolute pixel value (e.g. `"50px"`) or a relative weight (e.g. `1`)
+   * that is used to calculate the width  inside the remaining available space.
+   * Default: `"*"`, which is interpreted as `1`.
+   */
+  width?: string | number;
+  /** Only used for columns with a relative weight.
+   * Default: `4px`.
+   */
+  minWidth?: string | number;
+  /** Optional class names that are added to all `span.wb-col` elements of that column.*/
+  classes?: string;
+  /** Optional HTML content that is rendered into all `span.wb-col` elements of that column.*/
+  html: string;
+}
+
+export interface TypeDefinition {
+  // /** Type ID that matches `node.type`. */
+  // id: string;
+  /** En/disable checkbox for matching nodes.*/
+  checkbox?: boolean | BoolOptionResolver;
+  /** Optional class names that are added to all `div.wb-row` elements of matching nodes.*/
+  classes?: string;
+  /**Default icon for matching nodes.*/
+  icon?: boolean | string | BoolOptionResolver;
+  /**
+   * See also {@link WunderbaumNode.getOption|WunderbaumNode.getOption()}
+   * to evaluate `node.NAME` setting and `tree.types[node.type].NAME`.
+   */
+  _any: any;
+}
+
 /**
  * Available options for [[Wunderbaum]].
  *
@@ -79,7 +116,7 @@ export interface WunderbaumOptions {
    *
    * Default: `{}`.
    */
-  types?: any; //[key: string]: any;
+  types?: { [key: string]: TypeDefinition };
   /**
    * A list of maps that define column headers. If this option is set,
    * Wunderbaum becomes a treegrid control instead of a plain tree.
@@ -87,7 +124,7 @@ export interface WunderbaumOptions {
    * response.
    * Default: `[]` meaning this is a plain tree.
    */
-  columns?: Array<any>;
+  columns?: Array<ColumnDefinition>;
   /**
    * If true, add a `wb-skeleton` class to all nodes, that will result in a
    * 'glow' effect. Typically used with initial dummy nodes, while loading the
@@ -106,7 +143,7 @@ export interface WunderbaumOptions {
   debugLevel: number;
   /**
    * Number of levels that are forced to be expanded, and have no expander icon.
-   *  Default: 0
+   * Default: 0
    */
   minExpandLevel?: number;
   // escapeTitles: boolean;
@@ -125,6 +162,11 @@ export interface WunderbaumOptions {
    * Default: false
    */
   autoCollapse?: boolean;
+  /**
+   * HTMLElement that receives the top nodes breadcrumb.
+   * Default: undefined
+   */
+  attachBreadcrumb?: HTMLElement;
   /**
    * Default:  NavigationModeOption.startRow
    */
@@ -145,17 +187,29 @@ export interface WunderbaumOptions {
    * Default: 200
    */
   updateThrottleWait?: number;
+  /**
+   * Default: true
+   */
+  enabled?: boolean;
+  /**
+   * Default: false
+   */
+  fixedCol?: boolean;
+
   // --- KeyNav ---
   /**
    * Default: true
    */
   quicksearch?: boolean;
 
-  // --- Extensions ---
+  // --- Extensions ------------------------------------------------------------
   dnd?: DndOptionsType; // = {};
+  edit: any; // = {};
   filter: any; // = {};
   grid: any; // = {};
-  // --- Events ---
+
+  // --- Events ----------------------------------------------------------------
+
   /**
    *
    * @category Callback