wunderbaum 0.5.2 → 0.5.4

package/src/common.ts

@@ -193,7 +193,7 @@ function unflattenSource(source: any): void {
     );
   }
   // Inverse keyMap:
-  let longToShort: any = {};
+  const longToShort: any = {};
   if (_keyMap) {
     for (const [key, value] of Object.entries(_keyMap)) {
       longToShort[<string>value] = key;
@@ -277,7 +277,7 @@ export function inflateSourceData(source: any): void {
   delete source._positional;
 
   function _iter(childList: any[]) {
-    for (let node of childList) {
+    for (const node of childList) {
       // Expand short alias names
       if (_keyMap) {
         // Iterate over a list of names, because we modify inside the loop:

package/src/debounce.ts

@@ -270,6 +270,7 @@ export function debounce<F extends Procedure>(
     const isInvoking = shouldInvoke(time);
 
     lastArgs = args;
+    // eslint-disable-next-line  @typescript-eslint/no-this-alias
     lastThis = this;
     lastCallTime = time;
 

package/src/types.ts

@@ -731,7 +731,7 @@ export type EditOptionsType = {
     | Promise<any>;
 };
 
-export type GridOptionsType = {};
+export type GridOptionsType = object;
 
 /* -----------------------------------------------------------------------------
  * wb_ext_dnd
@@ -761,7 +761,7 @@ export type DndOptionsType = {
    * Expand nodes after n milliseconds of hovering
    * @default 1500
    */
-  autoExpandMS: 1500;
+  autoExpandMS?: 1500;
   // /**
   //  * Additional offset for drop-marker with hitMode = "before"/"after"
   //  * @default
@@ -782,12 +782,12 @@ export type DndOptionsType = {
    * true: Drag multiple (i.e. selected) nodes. Also a callback() is allowed
    * @default false
    */
-  multiSource: false;
+  multiSource?: false;
   /**
    * Restrict the possible cursor shapes and modifier operations (can also be set in the dragStart event)
    * @default "all"
    */
-  effectAllowed: "all";
+  effectAllowed?: "all";
   // /**
   //  * 'copy'|'link'|'move'|'auto'(calculate from `effectAllowed`+modifier keys) or callback(node, data) that returns such string.
   //  * @default
@@ -797,52 +797,52 @@ export type DndOptionsType = {
    * Default dropEffect ('copy', 'link', or 'move') when no modifier is pressed (overide in drag, dragOver).
    * @default "move"
    */
-  dropEffectDefault: string;
+  dropEffectDefault?: string;
   /**
    * Prevent dropping nodes from different Wunderbaum trees
    * @default false
    */
-  preventForeignNodes: boolean;
+  preventForeignNodes?: boolean;
   /**
    * Prevent dropping items on unloaded lazy Wunderbaum tree nodes
    * @default true
    */
-  preventLazyParents: boolean;
+  preventLazyParents?: boolean;
   /**
    * Prevent dropping items other than Wunderbaum tree nodes
    * @default false
    */
-  preventNonNodes: boolean;
+  preventNonNodes?: boolean;
   /**
    * Prevent dropping nodes on own descendants
    * @default true
    */
-  preventRecursion: boolean;
+  preventRecursion?: boolean;
   /**
    * Prevent dropping nodes under same direct parent
    * @default false
    */
-  preventSameParent: false;
+  preventSameParent?: false;
   /**
    * Prevent dropping nodes 'before self', etc. (move only)
    * @default true
    */
-  preventVoidMoves: boolean;
+  preventVoidMoves?: boolean;
   /**
    * Serialize Node Data to datatransfer object
    * @default true
    */
-  serializeClipboardData: boolean | ((nodeData: WbNodeData) => string);
+  serializeClipboardData?: boolean | ((nodeData: WbNodeData) => string);
   /**
    * Enable auto-scrolling while dragging
    * @default true
    */
-  scroll: boolean;
+  scroll?: boolean;
   /**
    * Active top/bottom margin in pixel
    * @default 20
    */
-  scrollSensitivity: 20;
+  scrollSensitivity?: 20;
   // /**
   //  * Scroll events every N microseconds
   //  * @default 50
@@ -852,7 +852,7 @@ export type DndOptionsType = {
    * Pixel per event
    * @default 5
    */
-  scrollSpeed: 5;
+  scrollSpeed?: 5;
   // /**
   //  * Allow dragging of nodes to different IE windows
   //  * @default false
@@ -862,23 +862,23 @@ export type DndOptionsType = {
    * Optional callback passed to `toDict` on dragStart @since 2.38
    * @default null
    */
-  sourceCopyHook: null;
+  sourceCopyHook?: null;
   // Events (drag support)
   /**
    * Callback(sourceNode, data), return true, to enable dnd drag
    * @default null
    */
-  dragStart: null | ((e: WbNodeEventType & { event: DragEvent }) => boolean);
+  dragStart?: null | ((e: WbNodeEventType & { event: DragEvent }) => boolean);
   /**
    * Callback(sourceNode, data)
    * @default null
    */
-  drag: null | ((e: WbNodeEventType & { event: DragEvent }) => void);
+  drag?: null | ((e: WbNodeEventType & { event: DragEvent }) => void);
   /**
    * Callback(sourceNode, data)
    * @default null
    */
-  dragEnd: null | ((e: WbNodeEventType & { event: DragEvent }) => void);
+  dragEnd?: null | ((e: WbNodeEventType & { event: DragEvent }) => void);
   // Events (drop support)
   /**
    * Callback(targetNode, data), return true, to enable dnd drop
@@ -889,7 +889,7 @@ export type DndOptionsType = {
    * Callback(targetNode, data)
    * @default null
    */
-  dragOver: null | ((e: WbNodeEventType & { event: DragEvent }) => void);
+  dragOver?: null | ((e: WbNodeEventType & { event: DragEvent }) => void);
   /**
    * Callback(targetNode, data), return false to prevent autoExpand
    * @default null
@@ -913,5 +913,5 @@ export type DndOptionsType = {
    * Callback(targetNode, data)
    * @default null
    */
-  dragLeave: null;
+  dragLeave?: null;
 };

package/src/util.ts

@@ -137,8 +137,8 @@ export function each(
     // accept `null` or `undefined`
     return obj;
   }
-  let length = obj.length,
-    i = 0;
+  const length = obj.length;
+  let i = 0;
 
   if (typeof length === "number") {
     for (; i < length; i++) {
@@ -147,7 +147,7 @@ export function each(
       }
     }
   } else {
-    for (let k in obj) {
+    for (const k in obj) {
       if (callback.call(obj[i], k, obj[k]) === false) {
         break;
       }
@@ -256,11 +256,13 @@ export function getValueFromElem(elem: HTMLElement, coerce = false): any {
         value = input.valueAsNumber;
         break;
       case "radio":
-        const name = input.name;
-        const checked = input.parentElement!.querySelector(
-          `input[name="${name}"]:checked`
-        );
-        value = checked ? (<HTMLInputElement>checked).value : undefined;
+        {
+          const name = input.name;
+          const checked = input.parentElement!.querySelector(
+            `input[name="${name}"]:checked`
+          );
+          value = checked ? (<HTMLInputElement>checked).value : undefined;
+        }
         break;
       case "text":
       default:
@@ -438,9 +440,9 @@ export function eventTargetFromSelector(
  * ```
  */
 export function eventToString(event: Event): string {
-  let key = (<KeyboardEvent>event).key,
-    et = event.type,
-    s = [];
+  const key = (<KeyboardEvent>event).key;
+  const et = event.type;
+  const s = [];
 
   if ((<KeyboardEvent>event).altKey) {
     s.push("Alt");
@@ -479,11 +481,11 @@ export function eventToString(event: Event): string {
 // TODO: support deep merge --> https://stackoverflow.com/a/42740894
 export function extend(...args: any[]) {
   for (let i = 1; i < args.length; i++) {
-    let arg = args[i];
+    const arg = args[i];
     if (arg == null) {
       continue;
     }
-    for (let key in arg) {
+    for (const key in arg) {
       if (Object.prototype.hasOwnProperty.call(arg, key)) {
         args[0][key] = arg[key];
       }
@@ -604,18 +606,17 @@ export function overrideMethod(
   handler: FunctionType,
   ctx?: any
 ) {
-  let prevSuper: FunctionType,
-    prevSuperApply: FunctionType,
-    self = ctx || instance,
-    prevFunc = instance[methodName],
-    _super = (...args: any[]) => {
-      return prevFunc.apply(self, args);
-    },
-    _superApply = (argsArray: any[]) => {
-      return prevFunc.apply(self, argsArray);
-    };
+  let prevSuper: FunctionType, prevSuperApply: FunctionType;
+  const self = ctx || instance;
+  const prevFunc = instance[methodName];
+  const _super = (...args: any[]) => {
+    return prevFunc.apply(self, args);
+  };
+  const _superApply = (argsArray: any[]) => {
+    return prevFunc.apply(self, argsArray);
+  };
 
-  let wrapper = (...args: any[]) => {
+  const wrapper = (...args: any[]) => {
     try {
       prevSuper = self._super;
       prevSuperApply = self._superApply;
@@ -717,7 +718,7 @@ export function getOption(
     [ext, name] = name.split(".");
     opts = opts[ext];
   }
-  let value = opts ? opts[name] : null;
+  const value = opts ? opts[name] : null;
   // Use value from value options dict, fallback do default
   return value ?? defaultValue;
 }
@@ -728,7 +729,7 @@ export function toSet(val: any): Set<string> {
     return val;
   }
   if (typeof val === "string") {
-    let set = new Set<string>();
+    const set = new Set<string>();
     for (const c of val.split(" ")) {
       set.add(c.trim());
     }
@@ -812,7 +813,7 @@ export function adaptiveThrottle(
       try {
         callback.apply(this, useArgs);
       } catch (error) {
-        console.error(error);
+        console.error(error); // eslint-disable-line no-console
       }
       const elap = Date.now() - start;
 

package/src/wb_ext_dnd.ts

@@ -123,7 +123,9 @@ export class DndExtension extends WunderbaumExtension<DndOptionsType> {
     throw new Error("Unsupported drop region definition: " + res);
   }
 
-  /** */
+  /**
+   * Calculates the drop region based on the drag event and the allowed drop regions.
+   */
   protected _calcDropRegion(
     e: DragEvent,
     allowed: DropRegionTypeSet | null
@@ -154,9 +156,9 @@ export class DndExtension extends WunderbaumExtension<DndOptionsType> {
       const sp = this.tree.element; // scroll parent
       const scrollTop = sp.scrollTop;
       if (this.currentScrollDir < 0) {
-        sp.scrollTop = Math.max(0, scrollTop - dndOpts.scrollSpeed);
+        sp.scrollTop = Math.max(0, scrollTop - dndOpts.scrollSpeed!);
       } else if (this.currentScrollDir > 0) {
-        sp.scrollTop = scrollTop + dndOpts.scrollSpeed;
+        sp.scrollTop = scrollTop + dndOpts.scrollSpeed!;
       }
     }
   }
@@ -181,14 +183,14 @@ export class DndExtension extends WunderbaumExtension<DndOptionsType> {
     if (
       scrollTop > 0 &&
       viewportY > 0 &&
-      viewportY <= sensitivity + headerHeight
+      viewportY <= sensitivity! + headerHeight
     ) {
       // Mouse in top 20px area: scroll up
       // sp.scrollTop = Math.max(0, scrollTop - dndOpts.scrollSpeed);
       this.currentScrollDir = -1;
     } else if (
       scrollTop < sp.scrollHeight - height &&
-      viewportY >= height - sensitivity
+      viewportY >= height - sensitivity!
     ) {
       // Mouse in bottom 20px area: scroll down
       // sp.scrollTop = scrollTop + dndOpts.scrollSpeed;
@@ -220,7 +222,7 @@ export class DndExtension extends WunderbaumExtension<DndOptionsType> {
     // --- dragstart ---
     if (e.type === "dragstart") {
       // Set a default definition of allowed effects
-      e.dataTransfer!.effectAllowed = dndOpts.effectAllowed; //"copyMove"; // "all";
+      e.dataTransfer!.effectAllowed = dndOpts.effectAllowed!; //"copyMove"; // "all";
       if (srcNode.isEditing()) {
         srcNode.logDebug("Prevented dragging node in edit mode.");
         e.preventDefault();
@@ -232,7 +234,7 @@ export class DndExtension extends WunderbaumExtension<DndOptionsType> {
         e.preventDefault();
         return false;
       }
-      let nodeData = srcNode.toDict(true, (n: any) => {
+      const nodeData = srcNode.toDict(true, (n: any) => {
         // We don't want to re-use the key on drop:
         n._org_key = n.key;
         delete n.key;
@@ -240,12 +242,14 @@ export class DndExtension extends WunderbaumExtension<DndOptionsType> {
       nodeData._treeId = srcNode.tree.id;
 
       if (dndOpts.serializeClipboardData) {
-        if (typeof dndOpts.serializeClipboardData === "function")
+        if (typeof dndOpts.serializeClipboardData === "function") {
           e.dataTransfer!.setData(
             nodeMimeType,
             dndOpts.serializeClipboardData(nodeData)
           );
-        else e.dataTransfer!.setData(nodeMimeType, JSON.stringify(nodeData));
+        } else {
+          e.dataTransfer!.setData(nodeMimeType, JSON.stringify(nodeData));
+        }
       }
       // e.dataTransfer!.setData("text/html", $(node.span).html());
       e.dataTransfer!.setData("text/plain", srcNode.title);
@@ -258,7 +262,9 @@ export class DndExtension extends WunderbaumExtension<DndOptionsType> {
 
       // --- drag ---
     } else if (e.type === "drag") {
-      if (dndOpts.drag) srcNode._callEvent("dnd.drag", { event: e });
+      if (dndOpts.drag) {
+        srcNode._callEvent("dnd.drag", { event: e });
+      }
       // --- dragend ---
     } else if (e.type === "dragend") {
       srcNode.setClass("wb-drag-source", false);
@@ -266,11 +272,37 @@ export class DndExtension extends WunderbaumExtension<DndOptionsType> {
       if (this.lastTargetNode) {
         this._leaveNode();
       }
-      if (dndOpts.dragEnd) srcNode._callEvent("dnd.dragEnd", { event: e });
+      if (dndOpts.dragEnd) {
+        srcNode._callEvent("dnd.dragEnd", { event: e });
+      }
     }
     return true;
   }
 
+  /* Don't allow void operation ('drop on self').*/
+  private _isVoidDrop(
+    targetNode: WunderbaumNode,
+    srcNode: WunderbaumNode | null,
+    dropRegion: DropRegionType | false
+  ): boolean {
+    this.tree.logDebug(
+      `_isVoidDrop: ${srcNode} -> ${dropRegion} ${targetNode}`
+    );
+    // TODO: should be checked on  move only
+    if (!this.treeOpts.dnd.preventVoidMoves || !srcNode) {
+      return false;
+    }
+    if (
+      (dropRegion === "before" && targetNode === srcNode.getNextSibling()) ||
+      (dropRegion === "after" && targetNode === srcNode.getPrevSibling())
+    ) {
+      this.tree.logDebug("Prevented before/after self");
+      return true;
+    }
+    // Don't allow dropping nodes on own parent (or self)
+    return srcNode === targetNode || srcNode.parent === targetNode;
+  }
+
   protected onDropEvent(e: DragEvent) {
     // const isLink = event.dataTransfer.types.includes("text/uri-list");
     const srcNode = this.srcNode;
@@ -278,6 +310,7 @@ export class DndExtension extends WunderbaumExtension<DndOptionsType> {
     const targetNode = Wunderbaum.getNode(e)!;
     const dndOpts: DndOptionsType = this.treeOpts.dnd;
     const dt = e.dataTransfer!;
+    const dropRegion = this._calcDropRegion(e, this.lastAllowedDropRegions);
 
     if (!targetNode) {
       this._leaveNode();
@@ -294,7 +327,8 @@ export class DndExtension extends WunderbaumExtension<DndOptionsType> {
           ", de: " +
           dt?.dropEffect,
         ", cy: " + e.offsetY,
-        ", r: " + this._calcDropRegion(e, this.lastAllowedDropRegions),
+        ", r: " + dropRegion,
+        ", srcNode: " + srcNode,
         e
       );
     }
@@ -320,17 +354,16 @@ export class DndExtension extends WunderbaumExtension<DndOptionsType> {
         // Prevent dropping items other than Wunderbaum tree nodes:
         (dndOpts.preventNonNodes && !srcNode) ||
         // Prevent dropping nodes on own descendants:
-        (dndOpts.preventRecursion &&
-          srcNode &&
-          srcNode.isAncestorOf(targetNode)) ||
+        (dndOpts.preventRecursion && srcNode?.isAncestorOf(targetNode)) ||
         // Prevent dropping nodes under same direct parent:
         (dndOpts.preventSameParent &&
           srcNode &&
           targetNode.parent === srcNode.parent) ||
-        // Don't allow void operation ('drop on self'): TODO: should be checke onn  move only
+        // Don't allow void operation ('drop on self'): TODO: should be checked on  move only
         (dndOpts.preventVoidMoves && targetNode === srcNode)
       ) {
         dt.dropEffect = "none";
+        this.tree.log("Prevented drop operation");
         return true; // Prevent drop operation
       }
 
@@ -354,23 +387,25 @@ export class DndExtension extends WunderbaumExtension<DndOptionsType> {
       const viewportY = e.clientY - this.tree.element.offsetTop;
       this.autoScroll(viewportY);
 
-      if (dndOpts.dragOver) targetNode._callEvent("dnd.dragOver", { event: e });
+      if (dndOpts.dragOver) {
+        targetNode._callEvent("dnd.dragOver", { event: e });
+      }
 
       const region = this._calcDropRegion(e, this.lastAllowedDropRegions);
 
       this.lastDropRegion = region;
 
       if (
-        dndOpts.autoExpandMS > 0 &&
+        dndOpts.autoExpandMS! > 0 &&
         targetNode.isExpandable(true) &&
         !targetNode._isLoading &&
-        Date.now() - this.lastEnterStamp > dndOpts.autoExpandMS &&
+        Date.now() - this.lastEnterStamp > dndOpts.autoExpandMS! &&
         targetNode._callEvent("dnd.dragExpand", { event: e }) !== false
       ) {
         targetNode.setExpanded();
       }
 
-      if (!region) {
+      if (!region || this._isVoidDrop(targetNode, srcNode, region)) {
         return; // We already rejected in dragenter
       }
       targetNode.setClass("wb-drop-over", region === "over");
@@ -386,8 +421,9 @@ export class DndExtension extends WunderbaumExtension<DndOptionsType> {
     } else if (e.type === "dragleave") {
       // NOTE: we cannot trust this event, since it is always fired,
       // Instead we remove the marker on dragenter
-      if (dndOpts.dragLeave)
+      if (dndOpts.dragLeave) {
         targetNode._callEvent("dnd.dragLeave", { event: e });
+      }
       // --- drop ---
     } else if (e.type === "drop") {
       e.stopPropagation(); // prevent browser from opening links?

package/src/wb_ext_filter.ts

@@ -91,15 +91,15 @@ export class FilterExtension extends WunderbaumExtension<FilterOptionsType> {
   ) {
     let match,
       temp,
-      start = Date.now(),
-      count = 0,
-      tree = this.tree,
-      treeOpts = tree.options,
-      // escapeTitles = treeOpts.escapeTitles,
-      prevAutoCollapse = treeOpts.autoCollapse,
-      opts = extend({}, treeOpts.filter, _opts),
-      hideMode = opts.mode === "hide",
-      leavesOnly = !!opts.leavesOnly && !branchMode;
+      count = 0;
+    const start = Date.now();
+    const tree = this.tree;
+    const treeOpts = tree.options;
+    // escapeTitles = treeOpts.escapeTitles,
+    const prevAutoCollapse = treeOpts.autoCollapse;
+    const opts = extend({}, treeOpts.filter, _opts);
+    const hideMode = opts.mode === "hide";
+    const leavesOnly = !!opts.leavesOnly && !branchMode;
 
     // Default to 'match title substring (case insensitive)'
     if (typeof filter === "string") {
@@ -128,16 +128,16 @@ export class FilterExtension extends WunderbaumExtension<FilterOptionsType> {
       } else {
         match = escapeRegex(filter); // make sure a '.' is treated literally
       }
-      let re = new RegExp(match, "i");
-      let reHighlight = new RegExp(escapeRegex(filter), "gi");
+      const re = new RegExp(match, "i");
+      const reHighlight = new RegExp(escapeRegex(filter), "gi");
       filter = (node: WunderbaumNode) => {
         if (!node.title) {
           return false;
         }
         // let text = escapeTitles ? node.title : extractHtmlText(node.title);
-        let text = node.title;
+        const text = node.title;
         // `.match` instead of `.test` to get the capture groups
-        let res = text.match(re);
+        const res = text.match(re);
 
         if (res && opts.highlight) {
           // if (escapeTitles) {
@@ -171,6 +171,7 @@ export class FilterExtension extends WunderbaumExtension<FilterOptionsType> {
     }
 
     tree.filterMode = opts.mode;
+    // eslint-disable-next-line prefer-rest-params, prefer-spread
     this.lastFilterArgs = arguments;
 
     tree.element.classList.toggle("wb-ext-filter-hide", !!hideMode);
@@ -268,12 +269,13 @@ export class FilterExtension extends WunderbaumExtension<FilterOptionsType> {
    * [ext-filter] Re-apply current filter.
    */
   updateFilter() {
-    let tree = this.tree;
+    const tree = this.tree;
     if (
       tree.filterMode &&
       this.lastFilterArgs &&
       tree.options.filter?.autoApply
     ) {
+      // eslint-disable-next-line prefer-spread
       this._applyFilterNoUpdate.apply(this, <any>this.lastFilterArgs);
     } else {
       tree.logWarn("updateFilter(): no filter active.");
@@ -284,7 +286,7 @@ export class FilterExtension extends WunderbaumExtension<FilterOptionsType> {
    * [ext-filter] Reset the filter.
    */
   clearFilter() {
-    let tree = this.tree;
+    const tree = this.tree;
     // statusNode = tree.root.findDirectChild(KEY_NODATA),
     // escapeTitles = tree.options.escapeTitles;
     tree.enableUpdate(false);
@@ -341,14 +343,14 @@ function _markFuzzyMatchedChars(
   matches: RegExpMatchArray,
   escapeTitles = true
 ) {
-  let matchingIndices = [];
+  const matchingIndices = [];
   // get the indices of matched characters (Iterate through `RegExpMatchArray`)
   for (
     let _matchingArrIdx = 1;
     _matchingArrIdx < matches.length;
     _matchingArrIdx++
   ) {
-    let _mIdx: number =
+    const _mIdx: number =
       // get matching char index by cumulatively adding
       // the matched group length
       matches[_matchingArrIdx].length +
@@ -357,7 +359,7 @@ function _markFuzzyMatchedChars(
     matchingIndices.push(_mIdx);
   }
   // Map each `text` char to its position and store in `textPoses`.
-  let textPoses = text.split("");
+  const textPoses = text.split("");
   if (escapeTitles) {
     // If escaping the title, then wrap the matching char within exotic chars
     matchingIndices.forEach(function (v) {

package/src/wb_ext_keynav.ts

@@ -41,13 +41,13 @@ export class KeynavExtension extends WunderbaumExtension<any> {
   }
 
   onKeyEvent(data: any): boolean | undefined {
-    const event = data.event,
-      tree = this.tree,
-      opts = data.options,
-      activate = !event.ctrlKey || opts.autoActivate,
-      curInput = this._getEmbeddedInputElem(event.target),
-      inputHasFocus = curInput && this._isCurInputFocused(),
-      navModeOption = opts.navigationModeOption as NavModeEnum;
+    const event = data.event;
+    const tree = this.tree;
+    const opts = data.options;
+    const activate = !event.ctrlKey || opts.autoActivate;
+    const curInput = this._getEmbeddedInputElem(event.target);
+    const inputHasFocus = curInput && this._isCurInputFocused();
+    const navModeOption = opts.navigationModeOption as NavModeEnum;
     // isCellEditMode = tree.navMode === NavigationMode.cellEdit;
 
     let focusNode,
@@ -125,7 +125,7 @@ export class KeynavExtension extends WunderbaumExtension<any> {
         }
         tree.lastQuicksearchTime = stamp;
         tree.lastQuicksearchTerm += eventName;
-        let matchNode = tree.findNextNode(
+        const matchNode = tree.findNextNode(
           tree.lastQuicksearchTerm,
           tree.getActiveNode()
         );

package/src/wb_ext_logger.ts

@@ -33,12 +33,13 @@ export class LoggerExtension extends WunderbaumExtension<any> {
       const prefix = this.prefix;
 
       overrideMethod(tree, "callEvent", function (name, extra) {
+        /* eslint-disable prefer-rest-params */
         if (ignoreEvents.has(name)) {
           return (<any>tree)._superApply(arguments);
         }
         const start = Date.now();
         const res = (<any>tree)._superApply(arguments);
-        console.debug(
+        tree.logDebug(
           `${prefix}: callEvent('${name}') took ${Date.now() - start} ms.`,
           arguments[1]
         );
@@ -49,7 +50,7 @@ export class LoggerExtension extends WunderbaumExtension<any> {
 
   onKeyEvent(data: any): boolean | undefined {
     // this.tree.logInfo("onKeyEvent", eventToString(data.event), data);
-    console.debug(`${this.prefix}: onKeyEvent()`, data);
+    this.tree.logDebug(`${this.prefix}: onKeyEvent()`, data);
     return;
   }
 }