wunderbaum 0.0.1-0

package/src/wb_ext_dnd.ts

@@ -0,0 +1,336 @@
+/*!
+ * Wunderbaum - ext-dnd
+ * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
+ * @VERSION, @DATE (https://github.com/mar10/wunderbaum)
+ */
+import * as util from "./util";
+import { EventCallbackType, onEvent } from "./util";
+import { Wunderbaum } from "./wunderbaum";
+import { WunderbaumExtension } from "./wb_extension_base";
+import { WunderbaumNode } from "./wb_node";
+import { ROW_HEIGHT } from "./common";
+
+const nodeMimeType = "application/x-fancytree-node";
+export type DropRegionType = "over" | "before" | "after";
+type DropRegionTypeSet = Set<DropRegionType>;
+// type AllowedDropRegionType =
+//   | "after"
+//   | "afterBefore"
+//   // | "afterBeforeOver" // == all == true
+//   | "afterOver"
+//   | "all" // == true
+//   | "before"
+//   | "beforeOver"
+//   | "none" // == false == "" == null
+//   | "over"; // == "child"
+
+export class DndExtension extends WunderbaumExtension {
+  // public dropMarkerElem?: HTMLElement;
+  protected srcNode: WunderbaumNode | null = null;
+  protected lastTargetNode: WunderbaumNode | null = null;
+  protected lastEnterStamp = 0;
+  protected lastAllowedDropRegions: DropRegionTypeSet | null = null;
+  protected lastDropEffect: string | null = null;
+  protected lastDropRegion: DropRegionType | false = false;
+
+  constructor(tree: Wunderbaum) {
+    super(tree, "dnd", {
+      autoExpandMS: 1500, // Expand nodes after n milliseconds of hovering
+      // dropMarkerInsertOffsetX: -16, // Additional offset for drop-marker with hitMode = "before"/"after"
+      // dropMarkerOffsetX: -24, // Absolute position offset for .fancytree-drop-marker relatively to ..fancytree-title (icon/img near a node accepting drop)
+      // #1021 `document.body` is not available yet
+      // dropMarkerParent: "body", // Root Container used for drop marker (could be a shadow root)
+      multiSource: false, // true: Drag multiple (i.e. selected) nodes. Also a callback() is allowed
+      effectAllowed: "all", // Restrict the possible cursor shapes and modifier operations (can also be set in the dragStart event)
+      // dropEffect: "auto", // 'copy'|'link'|'move'|'auto'(calculate from `effectAllowed`+modifier keys) or callback(node, data) that returns such string.
+      dropEffectDefault: "move", // Default dropEffect ('copy', 'link', or 'move') when no modifier is pressed (overide in dragDrag, dragOver).
+      preventForeignNodes: false, // Prevent dropping nodes from different Wunderbaum trees
+      preventLazyParents: true, // Prevent dropping items on unloaded lazy Wunderbaum tree nodes
+      preventNonNodes: false, // Prevent dropping items other than Wunderbaum tree nodes
+      preventRecursion: true, // Prevent dropping nodes on own descendants
+      preventSameParent: false, // Prevent dropping nodes under same direct parent
+      preventVoidMoves: true, // Prevent dropping nodes 'before self', etc. (move only)
+      scroll: true, // Enable auto-scrolling while dragging
+      scrollSensitivity: 20, // Active top/bottom margin in pixel
+      scrollSpeed: 5, // Pixel per event
+      // setTextTypeJson: false, // Allow dragging of nodes to different IE windows
+      sourceCopyHook: null, // Optional callback passed to `toDict` on dragStart @since 2.38
+      // Events (drag support)
+      dragStart: null, // Callback(sourceNode, data), return true, to enable dnd drag
+      dragDrag: null, // Callback(sourceNode, data)
+      dragEnd: null, // Callback(sourceNode, data)
+      // Events (drop support)
+      dragEnter: null, // Callback(targetNode, data), return true, to enable dnd drop
+      dragOver: null, // Callback(targetNode, data)
+      dragExpand: null, // Callback(targetNode, data), return false to prevent autoExpand
+      dragDrop: null, // Callback(targetNode, data)
+      dragLeave: null, // Callback(targetNode, data)
+    });
+  }
+
+  init() {
+    super.init();
+
+    // Store the current scroll parent, which may be the tree
+    // container, any enclosing div, or the document.
+    // #761: scrollParent() always needs a container child
+    // $temp = $("<span>").appendTo(this.$container);
+    // this.$scrollParent = $temp.scrollParent();
+    // $temp.remove();
+    const tree = this.tree;
+    const dndOpts = tree.options.dnd;
+
+    // Enable drag support if dragStart() is specified:
+    if (dndOpts.dragStart) {
+      onEvent(
+        tree.element,
+        "dragstart drag dragend",
+        (<EventCallbackType>this.onDragEvent).bind(this)
+      );
+    }
+    // Enable drop support if dragEnter() is specified:
+    if (dndOpts.dragEnter) {
+      onEvent(
+        tree.element,
+        "dragenter dragover dragleave drop",
+        (<EventCallbackType>this.onDropEvent).bind(this)
+      );
+    }
+  }
+
+  /** Cleanup classes after target node is no longer hovered. */
+  protected _leaveNode(): void {
+    // We remove the marker on dragenter from the previous target:
+    const ltn = this.lastTargetNode;
+    this.lastEnterStamp = 0;
+    if (ltn) {
+      ltn.removeClass(
+        "wb-drop-target wb-drop-over wb-drop-after wb-drop-before"
+      );
+      this.lastTargetNode = null;
+    }
+  }
+
+  /** */
+  protected unifyDragover(res: any): DropRegionTypeSet | false {
+    if (res === false) {
+      return false;
+    } else if (res instanceof Set) {
+      return res.size > 0 ? res : false;
+    } else if (res === true) {
+      return new Set<DropRegionType>(["over", "before", "after"]);
+    } else if (typeof res === "string" || util.isArray(res)) {
+      res = <DropRegionTypeSet>util.toSet(res);
+      return res.size > 0 ? res : false;
+    }
+    throw new Error("Unsupported drop region definition: " + res);
+  }
+
+  /** */
+  protected _calcDropRegion(
+    e: DragEvent,
+    allowed: DropRegionTypeSet | null
+  ): DropRegionType | false {
+    const dy = e.offsetY;
+
+    if (!allowed) {
+      return false;
+    } else if (allowed.size === 3) {
+      return dy < 0.25 * ROW_HEIGHT
+        ? "before"
+        : dy > 0.75 * ROW_HEIGHT
+        ? "after"
+        : "over";
+    } else if (allowed.size === 1 && allowed.has("over")) {
+      return "over";
+    } else {
+      // Only 'before' and 'after':
+      return dy > ROW_HEIGHT / 2 ? "after" : "before";
+    }
+    return "over";
+  }
+
+  /* Implement auto scrolling when drag cursor is in top/bottom area of scroll parent. */
+  protected autoScroll(event: DragEvent): number {
+    let tree = this.tree,
+      dndOpts = tree.options.dnd,
+      sp = tree.scrollContainer,
+      sensitivity = dndOpts.scrollSensitivity,
+      speed = dndOpts.scrollSpeed,
+      scrolled = 0;
+
+    const scrollTop = sp.offsetTop;
+    if (scrollTop + sp.offsetHeight - event.pageY < sensitivity) {
+      const delta = sp.scrollHeight - sp.clientHeight - scrollTop;
+      if (delta > 0) {
+        sp.scrollTop = scrolled = scrollTop + speed;
+      }
+    } else if (scrollTop > 0 && event.pageY - scrollTop < sensitivity) {
+      sp.scrollTop = scrolled = scrollTop - speed;
+    }
+    // if (scrolled) {
+    //   tree.logDebug("autoScroll: " + scrolled + "px");
+    // }
+    return scrolled;
+  }
+
+  protected onDragEvent(e: DragEvent) {
+    // const tree = this.tree;
+    const dndOpts = this.treeOpts.dnd;
+    const srcNode = Wunderbaum.getNode(e);
+
+    if (!srcNode) {
+      return;
+    }
+    if (e.type !== "drag") {
+      this.tree.logDebug("onDragEvent." + e.type + ", srcNode: " + srcNode, e);
+    }
+
+    // --- dragstart ---
+    if (e.type === "dragstart") {
+      // Set a default definition of allowed effects
+      e.dataTransfer!.effectAllowed = dndOpts.effectAllowed; //"copyMove"; // "all";
+      // Let user cancel the drag operation, override effectAllowed, etc.:
+      const res = srcNode._callEvent("dnd.dragStart", { event: e });
+      if (!res) {
+        e.preventDefault();
+        return false;
+      }
+      let 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;
+      });
+      nodeData.treeId = srcNode.tree.id;
+
+      const json = JSON.stringify(nodeData);
+      e.dataTransfer!.setData(nodeMimeType, json);
+      // e.dataTransfer!.setData("text/html", $(node.span).html());
+      e.dataTransfer!.setData("text/plain", srcNode.title);
+      this.srcNode = srcNode;
+      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");
+      }, 0);
+
+      // --- drag ---
+    } else if (e.type === "drag") {
+      // This event occurs very often...
+      // --- dragend ---
+    } else if (e.type === "dragend") {
+      srcNode.removeClass("wb-drag-source");
+      this.srcNode = null;
+      if (this.lastTargetNode) {
+        this._leaveNode();
+      }
+    }
+    return true;
+  }
+
+  protected onDropEvent(e: DragEvent) {
+    // const isLink = event.dataTransfer.types.includes("text/uri-list");
+    const targetNode = Wunderbaum.getNode(e)!;
+    const dndOpts = this.treeOpts.dnd;
+    const dt = e.dataTransfer!;
+
+    if (!targetNode) {
+      this._leaveNode();
+      return;
+    }
+    if (e.type !== "dragover") {
+      this.tree.logDebug(
+        "onDropEvent." +
+          e.type +
+          " targetNode: " +
+          targetNode +
+          ", ea: " +
+          dt?.effectAllowed +
+          ", de: " +
+          dt?.dropEffect,
+        ", cy: " + e.offsetY,
+        ", r: " + this._calcDropRegion(e, this.lastAllowedDropRegions),
+        e
+      );
+    }
+
+    // --- dragenter ---
+    if (e.type === "dragenter") {
+      this.lastAllowedDropRegions = null;
+      // `dragleave` is not reliable with event delegation, so we generate it
+      // from dragenter:
+      if (this.lastTargetNode && this.lastTargetNode !== targetNode) {
+        this._leaveNode();
+      }
+      this.lastTargetNode = targetNode;
+      this.lastEnterStamp = Date.now();
+
+      if (
+        // Don't allow void operation ('drop on self')
+        (dndOpts.preventVoidMoves && targetNode === this.srcNode) ||
+        targetNode.isStatusNode()
+      ) {
+        dt.dropEffect = "none";
+        return true; // Prevent drop operation
+      }
+      // User may return a set of regions (or `false` to prevent drop)
+      let regionSet = targetNode._callEvent("dnd.dragEnter", { event: e });
+      //
+      regionSet = this.unifyDragover(regionSet);
+      if (!regionSet) {
+        dt.dropEffect = "none";
+        return true; // Prevent drop operation
+      }
+      this.lastAllowedDropRegions = regionSet;
+      this.lastDropEffect = dt.dropEffect;
+      targetNode.addClass("wb-drop-target");
+
+      e.preventDefault(); // Allow drop (Drop operation is denied by default)
+      return false;
+
+      // --- dragover ---
+    } else if (e.type === "dragover") {
+      this.autoScroll(e);
+
+      const region = this._calcDropRegion(e, this.lastAllowedDropRegions);
+
+      this.lastDropRegion = region;
+
+      if (
+        dndOpts.autoExpandMS > 0 &&
+        targetNode.isExpandable(true) &&
+        !targetNode._isLoading &&
+        Date.now() - this.lastEnterStamp > dndOpts.autoExpandMS &&
+        targetNode._callEvent("dnd.dragExpand", { event: e }) !== false
+      ) {
+        targetNode.setExpanded();
+      }
+
+      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");
+      // console.log("dragover", e);
+
+      // dt.dropEffect = this.lastDropEffect!;
+      e.preventDefault(); // Allow drop (Drop operation is denied by default)
+      return false;
+
+      // --- dragleave ---
+    } else if (e.type === "dragleave") {
+      // NOTE: we cannot trust this event, since it is always fired,
+      // Instead we remove the marker on dragenter
+      // --- drop ---
+    } else if (e.type === "drop") {
+      e.stopPropagation(); // prevent browser from opening links?
+      this._leaveNode();
+      targetNode._callEvent("dnd.drop", {
+        event: e,
+        region: this.lastDropRegion,
+        sourceNode: this.srcNode,
+      });
+    }
+  }
+}

package/src/wb_ext_edit.ts

@@ -0,0 +1,340 @@
+/*!
+ * Wunderbaum - ext-edit
+ * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
+ * @VERSION, @DATE (https://github.com/mar10/wunderbaum)
+ */
+
+import { Wunderbaum } from "./wunderbaum";
+import { WunderbaumExtension } from "./wb_extension_base";
+import {
+  assert,
+  escapeHtml,
+  eventToString,
+  getValueFromElem,
+  isMac,
+  isPlainObject,
+  onEvent,
+} from "./util";
+import { debounce } from "./debounce";
+import { WunderbaumNode } from "./wb_node";
+import { AddNodeType, NavigationMode } from "./common";
+import { WbNodeData } from "./wb_options";
+
+// const START_MARKER = "\uFFF7";
+
+export class EditExtension extends WunderbaumExtension {
+  protected debouncedOnChange: (e: Event) => void;
+  protected curEditNode: WunderbaumNode | null = null;
+  protected relatedNode: WunderbaumNode | null = null;
+
+  constructor(tree: Wunderbaum) {
+    super(tree, "edit", {
+      debounce: 100,
+      minlength: 1,
+      maxlength: null,
+      trigger: [], //["clickActive", "F2", "macEnter"],
+      trim: true,
+      select: true,
+      slowClickDelay: 1000, // Handle 'clickActive' only if last click is less than this old (0: always)
+      validity: true, //"Please enter a title",
+      // --- Events ---
+      // (note: there is also the `tree.change` event.)
+      beforeEdit: null,
+      edit: null,
+      apply: null,
+    });
+
+    this.debouncedOnChange = debounce(
+      this._onChange.bind(this),
+      this.getPluginOption("debounce")
+    );
+  }
+
+  /*
+   * Call an event handler, while marking the current node cell 'dirty'.
+   */
+  protected _applyChange(
+    eventName: string,
+    node: WunderbaumNode,
+    colElem: HTMLElement,
+    extra: any
+  ): Promise<any> {
+    let res;
+
+    node.log(`_applyChange(${eventName})`, extra);
+
+    colElem.classList.add("wb-dirty");
+    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");
+    }
+    // Convert scalar return value to a resolved promise
+    if (!(res instanceof Promise)) {
+      res = Promise.resolve(res);
+    }
+    res
+      .catch((err) => {
+        node.logError(`Error in ${eventName} event promise`, err);
+        colElem.classList.add("wb-error");
+      })
+      .finally(() => {
+        colElem.classList.remove("wb-dirty");
+      });
+    return res;
+  }
+
+  /*
+   * Called for when a control that is embedded in a cell fires a `change` event.
+   */
+  protected _onChange(e: Event) {
+    // let res;
+    const info = Wunderbaum.getEventInfo(e);
+    const node = info.node!;
+    const colElem = <HTMLElement>info.colElem!;
+    if (!node || info.colIdx === 0) {
+      this.tree.log("Ignored change event for removed element or node title");
+      return;
+    }
+    this._applyChange("change", node, colElem, {
+      info: info,
+      event: e,
+      inputElem: e.target,
+      inputValue: Wunderbaum.util.getValueFromElem(e.target as HTMLElement),
+    });
+  }
+
+  // handleKey(e:KeyboardEvent):boolean {
+  //   if(this.tree.cellNavMode )
+  // }
+
+  init() {
+    super.init();
+
+    onEvent(
+      this.tree.element,
+      "change", //"change input",
+      ".contenteditable,input,textarea,select",
+      (e) => {
+        this.debouncedOnChange(e);
+      }
+    );
+  }
+
+  /* Called by ext_keynav to pre-process input. */
+  _preprocessKeyEvent(data: any): boolean | undefined {
+    const event = data.event;
+    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;
+
+    tree.logDebug(`_preprocessKeyEvent: ${eventName}`);
+
+    // --- Title editing: apply/discard ---
+    if (inputElem) {
+      //this.isEditingTitle()) {
+      switch (eventName) {
+        case "Enter":
+          this._stopEditTitle(true, { event: event });
+          return false;
+        case "Escape":
+          this._stopEditTitle(false, { event: event });
+          return false;
+      }
+      // If the event target is an input element or `contenteditable="true"`,
+      // we ignore it as navigation command
+      return false;
+    }
+    // --- Trigger title editing
+    if (tree.navMode === NavigationMode.row || tree.activeColIdx === 0) {
+      switch (eventName) {
+        case "Enter":
+          if (trigger.indexOf("macEnter") >= 0 && isMac) {
+            this.startEditTitle();
+            return false;
+          }
+          break;
+        case "F2":
+          if (trigger.indexOf("F2") >= 0) {
+            // tree.setCellMode(NavigationMode.cellEdit);
+            this.startEditTitle();
+            return false;
+          }
+          break;
+      }
+      return true;
+    }
+    return true;
+  }
+
+  /** Return true if a title is currently being edited. */
+  isEditingTitle(node?: WunderbaumNode): boolean {
+    return node ? this.curEditNode === node : !!this.curEditNode;
+  }
+
+  /** Start renaming, i.e. replace the title with an embedded `<input>`. */
+  startEditTitle(node?: WunderbaumNode | null) {
+    node = node ?? this.tree.getActiveNode();
+    const validity = this.getPluginOption("validity");
+    const select = this.getPluginOption("select");
+
+    if (!node) {
+      return;
+    }
+    this.tree.logDebug(`startEditTitle(node=${node})`);
+    let inputHtml = node._callEvent("edit.beforeEdit");
+    if (inputHtml === false) {
+      node.logInfo("beforeEdit canceled operation.");
+      return;
+    }
+    // `beforeEdit(e)` may return an input HTML string. Otherwise use a default:
+    if (!inputHtml) {
+      const title = escapeHtml(node.title);
+      inputHtml = `<input type=text class="wb-input-edit" value="${title}" required autocorrect=off>`;
+    }
+    const titleSpan = node
+      .getColElem(0)!
+      .querySelector(".wb-title") as HTMLSpanElement;
+
+    titleSpan.innerHTML = inputHtml;
+    const inputElem = titleSpan.firstElementChild as HTMLInputElement;
+    if (validity) {
+      // Permanently apply  input validations (CSS and tooltip)
+      inputElem.addEventListener("keydown", (e) => {
+        if (!inputElem.reportValidity()) {
+          // node?.logInfo(`Invalid input: '${inputElem.value}'`);
+        }
+      });
+    }
+    inputElem.focus();
+    if (select) {
+      inputElem.select();
+    }
+
+    this.curEditNode = node;
+    node._callEvent("edit.edit", {
+      inputElem: inputElem,
+    });
+  }
+  /**
+   *
+   * @param apply
+   * @returns
+   */
+  stopEditTitle(apply: boolean) {
+    return this._stopEditTitle(apply, {});
+  }
+  /*
+   *
+   * @param apply
+   * @param opts.canKeepOpen
+   */
+  _stopEditTitle(apply: boolean, opts: any) {
+    const focusElem = document.activeElement as HTMLInputElement;
+    let newValue = focusElem ? getValueFromElem(focusElem) : null;
+    const node = this.curEditNode;
+    const forceClose = !!opts.forceClose;
+    const validity = this.getPluginOption("validity");
+
+    if (newValue && this.getPluginOption("trim")) {
+      newValue = newValue.trim();
+    }
+    if (!node) {
+      this.tree.logDebug("stopEditTitle: not in edit mode.");
+      return;
+    }
+    node.logDebug(`stopEditTitle(${apply})`, opts, focusElem, newValue);
+
+    if (apply && newValue !== null && newValue !== node.title) {
+      const colElem = node.getColElem(0)!;
+
+      this._applyChange("edit.apply", node, colElem, {
+        oldValue: node.title,
+        newValue: newValue,
+        inputElem: focusElem,
+      })
+        .then((value) => {
+          const errMsg = focusElem.validationMessage;
+          if (validity && errMsg && value !== false) {
+            // Handler called 'inputElem.setCustomValidity()' to signal error
+            throw new Error(
+              `Edit apply validation failed for "${newValue}": ${errMsg}.`
+            );
+          }
+          // Discard the embedded `<input>`
+          // node.logDebug("applyChange:", value, forceClose)
+          if (!forceClose && value === false) {
+            // Keep open
+            return;
+          }
+          node?.setTitle(newValue);
+          this.curEditNode!.render();
+          this.curEditNode = null;
+          this.relatedNode = null;
+          this.tree.setFocus(); // restore focus that was in the input element
+        })
+        .catch((err) => {
+          // this.curEditNode!.render();
+          // this.curEditNode = null;
+          // this.relatedNode = null;
+        });
+      // Trigger 'change' event for embedded `<input>`
+      // focusElem.blur();
+    } else {
+      // Discard the embedded `<input>`
+      this.curEditNode!.render();
+      this.curEditNode = null;
+      this.relatedNode = null;
+      // We discarded the <input>, so we have to acquire keyboard focus again
+      this.tree.setFocus();
+    }
+  }
+  /**
+   * Create a new child or sibling node and start edit mode.
+   */
+  createNode(
+    mode: AddNodeType = "after",
+    node?: WunderbaumNode | null,
+    init?: string | WbNodeData
+  ) {
+    const tree = this.tree;
+    node = node ?? (tree.getActiveNode() as WunderbaumNode);
+    assert(node, "No node was passed, or no node is currently active.");
+    // const validity = this.getPluginOption("validity");
+
+    mode = mode || "prependChild";
+    if (init == null) {
+      init = { title: "" };
+    } else if (typeof init === "string") {
+      init = { title: init };
+    } else {
+      assert(isPlainObject(init));
+    }
+    // Make sure node is expanded (and loaded) in 'child' mode
+    if (
+      (mode === "prependChild" || mode === "appendChild") &&
+      node?.isExpandable(true)
+    ) {
+      node.setExpanded().then(() => {
+        this.createNode(mode, node, init);
+      });
+      return;
+    }
+    const newNode = node.addNode(init, mode);
+    newNode.addClass("wb-edit-new");
+    this.relatedNode = node;
+
+    // Don't filter new nodes:
+    newNode.match = true;
+
+    newNode.makeVisible({ noAnimation: true }).then(() => {
+      this.startEditTitle(newNode);
+    });
+  }
+}