I found this icons https://uxwing.com/
They seem to be have a completely free license. Maybe you also would include some icons in wunderbaum by default (for people without bootstrap or fontawesome).

Only for information.

Discussed in #13

I tried to change --wb-col-padding-x but noticed it did not have any effect.

It is defined here:
https://github.com/mar10/wunderbaum/blob/main/src/wunderbaum.scss#L119

But not referenced anywhere. And it seems it should be used here:
https://github.com/mar10/wunderbaum/blob/main/src/wunderbaum.scss#L390

--wb-row-padding-y also does not seem to be used anywhere. It is based on $row-padding-y which seems to be unused as well.

Could you create a new package/release?

I tried to use and debug wunderbaum in a React app. See #19 for some background.

However running npm start resulted in the following warning:

WARNING in ./node_modules/wunderbaum/dist/wunderbaum.esm.min.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '...\wunderbaum_react_ts_demo\node_modules\wunderbaum\dist\build\wunderbaum.esm.js' file: Error: ENOENT: no such file or directory, open '...\\wunderbaum_react_ts_demo\node_modules\wunderbaum\dist\build\wunderbaum.esm.js'

Chrome then also did not allow to debug with the nonminified sources.

wunderbaum.esm.min.js.map contains:

"sources":["build/wunderbaum.esm.js"]

But there is no build directory in the node_module.

The warning went away after I locally changed the MAP file to:

"sources":["wunderbaum.esm.js"]

wunderbaum.esm.min.js.map has a similar problem.

The docs say:

Define the initial tree data. Typically a URL of an endpoint that serves a JSON formatted structure, but also a callback, Promise, or static data is allowed.

However, _loadSourceObject expects "an array or plain object":

Are the docs talking about a planned feature?

I tried this code:

  iconMap: {
        expanderExpanded: new URL("../../assets/images/folder.svg", import.meta.url).toString(),
        expanderCollapsed: new URL("../../assets/images/folderClose.svg", import.meta.url).toString(),
      },

this works for normal icons, but not for the expander

They look like this:

 * Callback(sourceNode, data), return true, to enable dnd drag
   * @default null
   */
  dragStart?: WbNodeEventType;

But at least They need to be like

    (e: WbNodeEventType)=>void (or boolean)

But it also would be better if they have a WbNodeEventType, where the event property is a DragEvent

Or maybe the DragCallbackType fits?

If I drag something over lazyloaded nodes wich are not yet expanded, most of the time the "dragEnter" event is not raised

Hi Martin,

as FancyTree supports sorting nodes with built-in or custom compare function, would it be possible to introduce the same functionality to Wunderbaum?

Alternatively a workaround would also be nice but I could not even find a method to manipulate node order.

Thank you!

Best regards
Viktor

In Wunderbaum you always serialize the node_data to jason during drag/drop.

It would be nice if this could be optional, or a callback

Hello,

I create my own controls in wunderbaum, using the "render" callback.

Now the Problem is, wunderbaum adds eventlisteners to the change event of all input fields.
(It's done here:

Is there a way to disable the edit extension?

First of all, I wanted to say thanks for developing Wunderbaum. My team was using another tree tool called jstree but we are doing a rewrite without jQuery and found this as a viable alternative. I realize Wunderbaum isn't in production yet, but most of the functionality implemented so far seems to be fine for our use case.

Anyways I created a nested tree structure and set the "autoCollapse" property to true. However, if I expand a folder node, the sibling folder nodes do not collapse.

I am using the 0.3.5 release from Github

// domainDatasets, sharedDatasets, and userDatasets are arrays of children nodes
const data = [
        {
            title: `Public datasets (${domainDatasets.length})`,
            type: "folder",
            children: domainDatasets
        },
        {
            title: `Shared Datasets (${sharedDatasets.length})`,
            type: "folder",
            children: sharedDatasets
        },
        {
            title: `Your Datasets (${userDatasets.length})`,
            type: "folder",
            children: userDatasets
        },
    ]
    
    const datasetTree = new mar10.Wunderbaum({
        // https://mar10.github.io/wunderbaum/api/interfaces/wb_options.WunderbaumOptions.htm
        element: document.getElementById("dataset_tree"),
        source: await fetchDatasets(session_id),
        filter: {
            // https://github.com/mar10/wunderbaum/blob/c393a7a4e01a8c6bb9084002d3a70b9e18bcc974/src/wb_ext_filter.ts
            connectInput: "input#dataset_query",
            autoExpand: true,
            mode: "hide",
        },
        types: {
            folder: {icon: "mdi mdi-folder"},
            show: {icon: "mdi mdi-card-account-details-outline"}
        },
        autoCollapse: true,
        //event handlers
        init: (e) => {
            // After tree is created and data is loaded
            e.tree.setFocus();
        },
    });

column.html -> I have some fixed buttons in my designer, wich should be shown in each row, so I thought I can use this.
But how could I access the Row where the buttons are in?

Additional Feature:
Maybe the html property could also be a function wich returns a Node or a documentFragment?

I tried using wunderbaum in a new React Typescript app.

I created the app with npx create-react-app my-app --template typescript:
https://create-react-app.dev/docs/getting-started#creating-a-typescript-app

After that ran npm install wunderbaum and started using it in my component:

import {Wunderbaum} from 'wunderbaum'
...

However this currently produces

Module not found: Error: Can't resolve '../docs/assets/drop_marker_16x32.png' in '...\wunderbaum_react_ts_demo\node_modules\wunderbaum\dist'

CSS currently references two PNGs:

content: url(../docs/assets/drop_marker_16x32.png);
content: url(../docs/assets/drop_marker_insert_16x64.png);

They don't seem to be included in the published module.

wunderbaum_react_ts_demo/node_modules/wunderbaum (main)
$ find
.
./dist
./dist/wunderbaum.css
./dist/wunderbaum.d.ts
./dist/wunderbaum.esm.js
./dist/wunderbaum.esm.min.js
./dist/wunderbaum.esm.min.js.map
./dist/wunderbaum.umd.js
./dist/wunderbaum.umd.min.js
./dist/wunderbaum.umd.min.js.map
./LICENSE
./package.json
./README.md
./src
./src/common.ts
./src/debounce.ts
./src/deferred.ts
./src/drag_observer.ts
./src/types.ts
./src/util.ts
./src/wb_extension_base.ts
./src/wb_ext_dnd.ts
./src/wb_ext_edit.ts
./src/wb_ext_filter.ts
./src/wb_ext_grid.ts
./src/wb_ext_keynav.ts
./src/wb_ext_logger.ts
./src/wb_node.ts
./src/wb_options.ts
./src/wunderbaum.scss
./src/wunderbaum.ts

To make it easier to reproduce the problem I am sharing the entire application here:
https://github.com/quijote/wunderbaum_react_ts_demo

Please be aware that I have implemented a workaround to the problem in the last commit. The problem should reproduce with commit 31256c28dcaf63e8a4a15cc17773eda1f7367524. Simply clone and run npm start.

Additional notes

It would be nice to directly import the wunderbaum CSS from a TSX file instead of a CSS file. Similar to:

import 'bootstrap-icons/font/bootstrap-icons.css'

This is currently not possible due to the quite restrictive exports in package.json:

  "exports": {
    ".": {
      "require": "./dist/wunderbaum.umd.min.js",
      "import": "./dist/wunderbaum.esm.min.js",
      "style": "./dist/wunderbaum.css"
    }
  },

Maybe it is even possible to include it transitively from the wunderbaum TS/JS files somehow.

Also, it took me some time to realize that I need to install bootstrap-icons and import 'bootstrap-icons/font/bootstrap-icons.css' myself. Maybe this could also be added as a transitive dependency of wunderbaum somehow.

Another thing that could be improved is to not make the following options required in TypeScript:

      debugLevel: 4,
      edit: undefined,
      filter: undefined,
      grid: undefined

Finally, thanks for the awesome work. I had the pleasure to use fancytree in two previous internal projects. When I started to learn about TypeScript and React two weeks ago, I first thought about trying to embedd fancytree in my app somehow. I was happy to see there is already ongoing effort to create something similarly powerful (and fast) in TypeScript now.

Trying to use Wunderbaum with React, but facing the following error. What errors could be related to this issues?

react_devtools_backend.js:4026 WbSystemRoot@root<'wb_1'> Error during load() (10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}] Error: Assertion failed.
at assert (frontend.js:52255:916)
at Wunderbaum._registerNode (frontend.js:52334:6187)
at new WunderbaumNode (frontend.js:52316:1361)
at WunderbaumNode.addChildren (frontend.js:52316:1850)
at WunderbaumNode.addChildren (frontend.js:52316:1930)
at WbSystemRoot.addChildren (frontend.js:52316:1930)
at WbSystemRoot._loadSourceObject (frontend.js:52316:7302)
at WbSystemRoot.load (frontend.js:52316:8313)
at Wunderbaum.load (frontend.js:52334:20885)
at new Wunderbaum (frontend.js:52334:3638)
at TreeTable (http://localhost:8443/client/frontend.js:13006:66)
at Content (http://localhost:8443/client/frontend.js:13095:78)

I add nodes to a wunderbaum node via lazyload.
Then I call resetLazy, cause the content changes.
If I now add the same objects as before, with the same keys, wunderbaum errors:

Badge with counter is not shown, if you have a iconMap map wich links to svg files

Is there any reason, why you don't use many of the types inside of the wunderbaum code, only in the types file?

I'd like to use wunderbaum inside of my own webcomponent, but your stylesheet does not have the css properties on :host set.

could you merge #28 or only change the stylesheet?

and create a new npm?

If you exand a node wich is bigger then the wunderbaum size, it jumps to the top. In fancytree the node stayed at the same place. The fancytree behavior was more expected

I need to set custom data for dargdrop "text/plain" but wunderbaum overrides mine here:

should we generate an option for this to not do it? or should we check if the mime type "text/plain" already exists?

I set my data in the "drag" callback

Hi

This is awesome congrats.

In a simple tree example:

q1. can one search by for example, a unique id of an item?
q2. is it possible to search for a node by a path?
q3. is it possible to perform crud functions on nodes, like adding one to its parent, updating, deleting it.

via javascript code at runtime?

Thank you.

Describe the bug
if you setSelected of an node, every node is rerendered. Is this expected?

To Reproduce
Look at the sample

Expected behavior
Only the selected (or none) should be rerendered

Minimal Reproducible Example
https://jsbin.com/qamihoboko/edit?html,js,console,output

Hello together,
i already loved Fancytree.
Though I would like to be able to use an arbitrary Array property representing the parent-child relationship instead of the fixed "children" property. This would avoid to go through the datastructure returned by a service.
It would be even better to consider a configurable list of properties beeing considered as children here ["sons","daughters"].

regards
Thomas

{
  type:"Male",
  name:"Thomas",
  sons:[
    {
      type:"Man",
      name:"John"
    }
  ],
  daughters:[
    {
      type:"Woman",
      name:"Mary"
    },
    
    {
      type:"Woman",
      name:"Daisy"
    }
  ]
}

Hey @mar10,
I'm very much looking forward to using your library. I've been using FancyTree for many years and your upgrades are fantastic.

I do use the persist extension for FancyTree for remembering the expand/collapse state of my tree between webpage reloads. Do you have a recommendation on a workaround for this in the interim?

If I use the dragEnter Event I want to decide on infos from source and target nodes type if drag/drop is allowed or not, but you do not include the source node in the event.

I then got this error:

It is cause of "this._tree" is null of the node it tries to deactivate.

I fixed it by calling:

 await node.setActive(true);

on the node where I raise "resetLazy", before calling it

I also tried:

  if (this._tree.activeNode)
            await this._tree.activeNode.setActive(false);

but this did not work

Is the counter extension already available:

If I start to drag a node, and leave the mouse button while I'm over another tree node wich is not a valid drag target (means the arrows are not shown) the drag source keeps grayed out

dragDrag, dragEnd, dragOver and dragLeave are not used

Is it possible/whised to create an official sample in one of these Online Editors?
Should I create one?

I think this could help much to create a minimal reproducible sample for the issues. This then could be linked in the issue Template (like in Monaco Editor for example)

Hi Martin!

A little question from our development already using fancytree historically.. Do you have any idea of when you will publish your first real release of this package ? We're actually trusting some solutions and this project sounds good for us, knowing the qualities and the defaults of actual fancytree.

Thanks in advance.
Regards

I've this call:

     this._tree.visit((node) => {
          if (activeElements && activeElements.includes(node.data.ref)) {
            node.setSelected(true);
            node.setActive(true);
            node.makeVisible({ scrollIntoView: true });
          } else {
            node.setSelected(false);
            node.setActive(false);
          }
        });

wich causes this exception: (stacktrace may not match, it's my patched version)

    wunderbaum.esm.js:4562 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'update')
        at WunderbaumNode.update (wunderbaum.esm.js:4562:19)
        at WunderbaumNode.setActive (wunderbaum.esm.js:4481:62)
        at treeViewExtended.js:294:22
        at WunderbaumNode.visit (wunderbaum.esm.js:4921:19)
        at WunderbaumNode.visit (wunderbaum.esm.js:4928:35)
        at WunderbaumNode.visit (wunderbaum.esm.js:4928:35)
        at WbSystemRoot.visit (wunderbaum.esm.js:4928:35)
        at Wunderbaum.visit (wunderbaum.esm.js:7196:26)
        at TreeViewExtended._highlight (treeViewExtended.js:286:20)
        at TreeViewExtended.selectionChanged (treeViewExtended.js:262:14)

issue is here:

Thias was also an issue before my changes...

Hi,
thank you for this tree component, been my favourite for years :) experimenting with new version of Wunderbaum (been using the original Fancytree, but wanna get rid of JQ) and I realised weird behavior of "activate" or "select" event.

I have tree with checkboxes, and I want to do something similar as existed in original Fancytree - get list of all selected nodes
tree.getSelectedNodes();
I understand no such function exists in the code of wunderbaum so far, so I wanted to replicate it using "select" event, by adding or removing the currently selected node to an array, or remove if unselected. But, If I call

  select: (e) => {
                    console.log(tree.getFocusNode().key);
                    console.log(tree.getFocusNode().selected);
                }

I am recieving FALSE for "selected", which is not correct - it should be TRUE. When I run the same code from the browser console afterwards

console.log(tree.getFocusNode().selected);

I get TRUE (which is the correct status of selection at that point).

Looking into the code, I belive the event is fired BEFORE the status of the selection of the node is actually changed, is that correct? I mean this part of your code

 /** Modify the check/uncheck state. */
  setSelected(flag: boolean = true, options?: SetSelectedOptions) {
    const prev = this.selected;
    if (!!flag !== prev) {
      this._callEvent("select", { flag: flag });
    }
    this.selected = !!flag;
    this.update();
  }

Thank you

I use wunderbaum on this application: http://129.159.205.3:8082/webui/index.html

but sometimes it does not show the expand/collapse arrows, but I don't know why:

maybe you have any idea?

I use this icon-map: https://github.com/node-projects/web-component-designer/blob/eabf7b82870f876fa39e8edb926a61f07ff48db3/packages/web-component-designer-widgets-wunderbaum/src/widgets/WunderbaumOptions.ts#L23

Discussed in #8

I noticed this behavior in a page I was building and ultimately traced it to the ".columns .column" selector that I use (from Bulma CSS). Basically the ".wb-list-container" class keeps expanding height in a infinite loop (and the console show infinite Wunderbaum debug logs). If I hide the element (my main code has a collapsable component), the height stops expanding, but if the Wunderbaum dropdown is visible again, height starts to expand where it left off. I wrapped the "#genecart_query" and "#genecart_tree" elements in an extra nested "div" and the behavior is the same.

I am currently using the 0.3.5 version of Wunderbaum.

Reproducible code

<html>
    <head>

        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" />

        <!-- Tree view/grid -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/mar10/[email protected]/dist/wunderbaum.css">
    </head>
    <body>
        <div class="columns">
            <div class="column">
                <input class="input" id="genecart_query" type="text" placeholder="Enter a gene collection" autofocus="" />
                <div id="genecart_tree" class="wb-skeleton wb-initializing"></div>
            </div>
        </div>

        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <script src="https://cdn.jsdelivr.net/gh/mar10/[email protected]/dist/wunderbaum.umd.min.js"></script>
        <script>
            const geneCartTree = new mar10.Wunderbaum({
                // https://mar10.github.io/wunderbaum/api/interfaces/wb_options.WunderbaumOptions.htm
                element: document.getElementById("genecart_tree"),
                filter: {
                    // https://github.com/mar10/wunderbaum/blob/c393a7a4e01a8c6bb9084002d3a70b9e18bcc974/src/wb_ext_filter.ts
                    connectInput: "input#genecart_query",
                    autoExpand: true,
                    mode: "hide",
                },
                types: {
                    folder: {icon: "mdi mdi-folder"},
                    show: {icon: "mdi mdi-card-account-details-outline"}
                },
                autoCollapse: true,
                //event handlers
                init: (e) => {
                    // After tree is created and data is loaded
                    e.tree.setFocus();
                },
            });

        </script>
    </body>

</html>

I build wunderbaum on Windows, wich does not work atm, but thats not the issue.

• I thought, why when I run "npm build" if have the code in "build" and not in "dist"
• Why is dist in the repository?
• why are the docs all detected as changed?

SO, See in your example:

I've resized the Tree to 100px, and then all the texts are cut of and it's not scrollable.
In FancyTree I had it like that the column is always the needed size, and I could scroll to the right

DragEnter at the moment could only return true/false (according to the type), but it also could return 'over', 'after' and 'before'.
So the type should be fixed

I created a treegrid with numeric columns. Similar to the demo I used classes: "wb-helper-end" to align everything to the right.

However the column header is still aligned to the left. Behavior can be observed in the demo grid as well.

Dark mode is omnipresent nowadays. I would like to render a Wunderbaum with different colors using a custom dark CSS theme. E.g. I would like to add something like the following to my application:

import 'wunderbaum/dist/wunderbaum.css'
import './wunderbaum-theme-dark.css'

And wunderbaum-theme-dark.css could then override some CSS variables like this:

:root {
  --wb-error-color: #b5373b;
  --wb-node-text-color: #56534c;
  --wb-bg-highlight-color: #26a0da;
  --wb-header-color: #dedede;
  --wb-background-color: white;
  --wb-alternate-row-color: #f7f7f7;
  --wb-alternate-row-color-hover: #f3f3f3;
  --wb-focus-border-color: #275dc5;
}

I am not sure if it makes sense exactly like that (with :root), but I saw other libraries that easily allowed to customize styles like this. I tried to override colors from the current CSS but it seemed a bit cumbersome as the same color seems to be repeated in multiple CSS rules (via expanded variables from SCSS).

Hello,
in FancyTree I could completely replace the creation of the content, and so I allowed to use HTML in the title.
I saw that I could change how you fill the columns via the render callback, but the main column '*' is not possible.

I think I could maybe fix this, by setting the with of the main column to 0px and create an additional one, but shouldn't this be possible?

A Treegrid in my code did not render properly. I debugged for a while and in the end found out that the demo relies on the following CSS rule from style.css to work properly:

* {
    box-sizing: border-box;
}

My code did not have this and all horizontal offsets looked a bit weird.

wunderbaum.css comes with:

div.wunderbaum {
  box-sizing: border-box;
}

But I think this should be extended to something like the following to include all child elements:

div.wunderbaum * {
  box-sizing: border-box;
}

If the lazyload call takes a while, it could be called for the same node multiple times (if you click on the expander multiple times)

Hi Martin,

do you have any plans on implementing the setIcon() method of a node?
Alternatively any programming sequence would be useful to ensure a node contains the desired (or no) icon each time. Right now, if assigning an icon to a node it is only updated once scrolled out of the prefetched range.

Thanks!

Best regards
Viktor

As I did not find the setting preventLazyParents in dnd, maybe it would be usefull to write a console message, the first when a node is draged over a lazy loaded wunderbaum node and the setting is false?

Like "Droping on lazy loaded wunderbaum nodes is disabled, to enable it switch 'preventLazyParents' to true"