helion3 / inspire-tree Goto Github PK

When soft removing a node, the state remains "selected" when adding the node back. I can easily force deselection myself, but I feel that this should be native functionality to the tree.

Note: This is easy to recreate on your "bucket" demo.

is it possible to use default renderar so that i can give these properties to tree config ? this doesnt seems working cause we have overridden HTML in directives defined in ngInspiretree.js

$scope.treeOptions = {
data: treeColumns,
dom: {
deferredRendering: true
},
pagination: {
limit:30
},
editable:true,
}
P.S. -New to Angular

Here are a couple more minor changes that seem to me to be useful. If there are ways to do these now I couldn't find them, maybe they should be in a faq. If there aren't then maybe they could be added in the next version.

• I want to use double click on a node for my own purposes. Setting up a handler for node.dblclick works fine, but the double click also toggles node expansion, which I don't want. I commented out the line that does that, but maybe it would be better to have that in its own node.dblclick handler so it could be removed without changing the source code.
• I also want to drag and drop into other elements besides the tree. It turns out not to be too hard: I pass my elements in as dragTargets, add drop and allowdrop handlers to them, and make the following change in the source (line 12586):

Was:

        if ($dragElement) {
            if ($dragElement.parentNode) $dragElement.parentNode.removeChild($dragElement);

            if ($activeDropTarget && $activeDropTarget.inspireTree) {
                var newNode = $activeDropTarget.inspireTree.addNode($dragNode.copyHierarchy().export());

                tree.emit('node.dropout', $dragNode, $activeDropTarget);
                $activeDropTarget.inspireTree.emit('node.dropin', newNode);
            }
        }

change:

        if ($dragElement) {
            if ($dragElement.parentNode) $dragElement.parentNode.removeChild($dragElement);
            // rwy
            if ($activeDropTarget) {
                if ($activeDropTarget.inspireTree) {
                    var newNode = $activeDropTarget.inspireTree.addNode($dragNode.copyHierarchy().export());

                    tree.emit('node.dropout', $dragNode, $activeDropTarget);
                    $activeDropTarget.inspireTree.emit('node.dropin', newNode);
                }
                else
                    tree.emit('drop', arguments[0], $dragNode, $activeDropTarget);
            }
        }

I'm not sure how you are working the editing on this code, but I have a suggestion. I would like to support different styles for different entries - specifically, the family list I am using has each person with child nodes of children and of spouse(s), and I want to style the spouses differently than the children. To do this I made the following addition to the code:

line 266 in src/dom.js:

    if (!tree.config.showCheckboxes) {
        classNames.push(current.state.icon || (hasVisibleChildren ? 'icon-folder' : 'icon-file-empty'));
    }
    // start of new code
    if (node.extra_classes)
        Array.prototype.push.apply(classNames, node.extra_classes);
    // end of added code
    return (0, _h2.default)('a.' + classNames.join('.'), {

This adds the extra classes in node.extra_classes to the node classes. This seems to me to be a relatively simple change that will add to the flexibility of the package.

russell young

When using the dynamic loading to load a large subtree, the expanded tree reads "No Results" which is then replaced by the actual data when loaded, which doesn't give a good user experience.

Suggest that this should display "Loading" while loading, and only switch to "No Results" if the data() call fails

Hello,

First congratulation to the author of this plugin. I searched a jquery plugin to create a tree from scratch for a long time and finally found yours that looks nice and is easy to configure.

However, I have an error when I try to click on the "+" button in the bottom of my tree.

Uncaught TypeError: Cannot read property 'focused' of undefined at HTMLAnchorElement.onclick (inspire-tree-bundled.min.js:23)
onclick @ inspire-tree-bundled.min.js:23

Here is my code :

  var tree = new InspireTree({
  target: '#arborescence',
  editable: true,
  data:
    [{
        "text": "Root",
        "id": "root",
        "children": true
    }],
  });

Did I make something wrong ?

Best regards,

Alex

@onack Forked from a comment on #13:

I have the same issue with 1.10.3 if I add elements after tree is initialized
Example: https://jsfiddle.net/3v5wL01u/1/

The issue is that when you add nodes with a sort in place, the rendering system is not properly rerendering nodes which may have changed position.

I'm trying to use tree.on("event", function () {}); however I get a complier error due to this method not existing in the typescript definition.

It appears this method exists on EventEmitter2, so perhaps the typescript definition should extend EventEmitter2's typescript definition, similar to the js implementation.

I would like to be able to use node selection and node check-state to mean different things (selected = selected, but checked = enabled/disabled)

So clicking on a node will just select it, but not check/uncheck
Likewise clicking on a checkbox will toggle the check state, but not select/unselect

When I set a pagination limit if no results were found on the first page the list is displayed empty. I think that pagination should be based solely on search results rather than all children.

limit: 5

limit: 2

Code

var tree = new InspireTree({
    pagination: { limit: 2 },
    data: $.getJSON('sample-data/full.json')
});

new InspireTreeDOM(tree, {
    target: '.tree',
    deferredRendering: true
});

$('input').on('keyup', _.debounce(function(event) {
    tree.search(this.value);
}, 500));

Example based on "inspire-tree-dom/blob/master/demos/search.html".

Link to Angular demo redirects to a new, password-protected page with no demo. Can you host elsewhere?

In following your bucket example, an expandAll method on the tree would be useful rather than iterating the nodes myself and ensuring they're expanded. Your example only expands based on the plucked ids you obtained, but that logic should probably live in an expandAll method for users to invoke.

This tree component looks really great.
In the demo, the drag and drop is between two containers.
is there an example/way to drag nodes within the same tree?
e.g. from one parent node to another.
thanks!

Hi. I'm trying to use inspire-tree to show/hide different layers on a map. I'm just at the begining of this project, and I can get to see any tree being generated.

https://github.com/tangrams/ux_layers/blob/gh-pages/src/UxLayers.js#L56-L67

I will appreciate some guidance on it. Thanks

I have a dynamic tree in which a user can perform some action which causes new child nodes to be created. As far as I can tell, the only clean method for reloading the tree exists on the InspireTree and reloads the entire tree, not a subset of the tree.

My first attempt was the following:

// Was the node expanded
var expanded = node.expanded();
if (expanded) {
    // If so, collapse for nicer ui
    node.collapse();
}

// Attempt to reload the children
node.loadChildren().then(function() {
    // Then put tree back into previous state
    if (expanded) {
        node.expand();
    }
});

This code definitely isn't the nicest in the world, and it'd be nicer to simply say node.reload().

In addition to that, I encountered the following issues. These may be specific to my environment, so I will look into them deeper:

• If a node wasn't expanded and I tried to load children for it, expand/collapse would break
• The request would execute to completion, but loadChildren would throw this error: "Node does not have or support dynamic children."

If you use checkboxes it would be very nice if the spinner replaced the checkbox instead of being under it
Alternatively they could be side by side.

https://jsfiddle.net/3v5wL01u/2/

Thanks for the last fast response and fix

Can the tree auto-scroll, if required, to put the selected node into the viewport during any node.selected?

Note: This became apparent when the tree first loads. The auto-select logic works correctly however a node may be selected off screen so it looks broken to the user until they scroll down.

Hi, I'm using your great lib, but my tree's nodes were not collapsed after I new a InspireTree.

I imitated your website's code:

  const tempData = JSON.parse(`[{
    "text": "Features",
    "children": [{
      "text": "Robust API",
      "children": [{
        "text": "Chainable methods"
      }, {
        "text": "Extremely clean syntax"
      }]
    }, {
      "text": "Events everywhere",
      "children": [{
        "text": "Data load events"
         ...
  }]`);

  const tree = new InspireTree({
    target: '#select',
    data: tempData,
    dom: {
      showCheckboxes: true
    }
  });

  tree.on('model.loaded', () => {
    tree.expand();
    tree.selectFirstAvailableNode();
  });

and I add itree.state.collasped also can't work correctly.

I wanted to make tree node editable only on double click. How can i do that?

In some use cases it would be handy to know if event was triggered by user or some other function. One case I'm facing now is that I need to select elements from the tree with mouse click but also outside via node.select() function. This leads to the event circle where node that is selected from outside will trigger on('node.selected') event that will try to update the outside component that initiated the change in the first place. With 'sender' parameter it would be possible to identify who triggered event and stop propagation when needed.

To reproduce this, go to the search example and search for "Features". The 3 top level folders are now shown as leaf nodes.

Not sure if that is expected behaviour cause no children match, so they are hidden, but I think a more appropriate behaviour for this case (where no children match but the parent does), would be to show the matching nodes as collapsed folder nodes and be able to expand them because the whole folder matches.

I'm on this web site and it does tell me all the function, events API's and features BUT it does not go far enough in how each of these work. Is there a full documentation on how to use inspire-tree (including inspire-tree-dom)???

Currently, clearSearch is called but previously matched nodes are still marked as matched. Also, in this case the search function doesn't return a promise.

I'll send a PR, but I'm not sure if what I've done is the best solution, so feel free to edit it or ignore it.

Those which are not selectable can not receive focus or selected states.

Reported via helion3/inspire-tree-react-demo#1

Depends on #2.

Display a checkbox input next to each node.

• Unchecked = unselected
• Checked = selected and all children selected
• Colored, not empty but not checked = some child nodes selected

Hello, thanks for the great project.

I am trying to create a realtime updating tree with Vue and Firebase (though the how is irrelevant)
What is the best way to 'refresh' the data.

If I use tree.load(data) on data changes, it creates duplicates even if nodes has ids, even if I tree.clean() first.

If I initialize the tree with new InspireTree... and pass external reference to the data as in data: window.someTreeData changing that object doesn't update the tree when I change that data, even if I resolve a promise.

I know I must be missing something obvious but I'm stuck as to the best method to resolve this.

angular.js:13550 TypeError: _.defaultsDeep is not a function
at new InspireTree (http://localhost:3000/bower_components/inspire-tree/dist/inspire-tree-core.js:143:26)

it is not able to loadsh function.

Would like to foremost say, awesome project - I really dig what you've done here. I was curious what your thoughts would be on breaking the core library out into it's own module, with the full inspire-tree package consuming it as a dep.

Asking because for my usage, I am solely concerned with the core functionality as I am rolling my own rendering. I think it would be nice to pull down only what I need in this case. In the spirit of further staying lean, what are your thoughts on also not including dist and encouraging consumers to leverage a build process (pretty standard, speaking generally) to minify their own builds in their local development ecosystems?

Thanks.

While the title may not make sense, I hope that the details here make it crystal clear.

When creating a tree with sort: 'text' applied to the configuration and supplying data in an array that is out of order, keyboard navigation (more specifically nextVisibleNode, previousVisibleNode, etc) fails to return the proper node.

Consider this configuration:

var tree = new InspireTree({
    target: '.tree',
    sort: 'text',
    data: [{
        text: 'A',
    }, {
        text: 'C'
    }, {
        text: 'B'
    }]
});

Then tree.nodes()[1] would give me node B, however calling tree.nodes()[1].nextVisibleNode() would give me undefined since it was last in the original data array. I would expect that to give me C since it's visually the next one.

I can create a JSFiddle if you have trouble recreating this.

Hi

Could you please provide a inspire-tree.d.ts - would be great if we can use your tree with typescript code
You can also directly upload it to DefinitelyTyped when finished

THXs!
Ferdi

I load 1360 items at the root level in the tree and there is a second long hang in the app when the tree loads that is traced to createElement where it creates the elements for all of the nodes (there are not yet any children under tehse nodes). Since most of them are not visible it would be great if the elements were not created until scrolled into view to prevent my application from hanging.

I'm making a check tree and need to create all nodes checked. What's the best way to do that?

Thanks

Consider the following tree:

• Food
  • Fruit
    • Apple
    • Banana
    • Pear
  • Vegetables
    • Carrot
    • Tomato

I've softRemove()-ed Vegetables, so the node is not visible in the tree. If I run Tree.getAvailableNodes(), then Vegetables will be returned as a child of the Food node even though it's not technically available. Was the purpose of Tree.getAvailableNodes() to only return visible nodes? If so, I believe I've found an issue in the logic. If not, can I request a Tree.getVisibleNodes() method so I can know what the user considers part of the final selection.

I import the css using following code:

import 'inspire-tree/dist/inspire-tree.css';

but some errors occured because it can't find the images.
So how to import css correctly?

If you a tree that is dynamically loaded, with checkbox selection

• Check a collapsed node whose children have yet to load
• Expand the node and wait for children to load in
• Child nodes will be unchecked. Parent node will still display check, even though children are not checked

Would expect the check state to propagate down when the children get loaded

Provide a way in the data json to mark default expanded or selected nodes

You can see this for example by visiting the demo page: http://www.inspire-tree.com/

Hello!

I need iterate(deep) tree to determine continuous index for all nodes.
How I can do it?
Why invokeDeep and invoke methods with the same results?

If placing the tree in an absolute positioned div with overflow auto, you will end up with unneccessary scrollbars in IE.

The last wholerow div in the tree sneaks in an extra 25px. Probably because IE handles the size calculation differently than chrome for example when it comes to the TranslateY trick.

Don't know if its a problem for anyone else but I thought you should know.
A fix would be most appreciated.
Leaving some simple repro code below:

<!DOCTYPE html>
<script src="inspire-tree-bundled.js"></script>
<link rel="stylesheet" type="text/css" href="inspire-tree.css">
<div style="overflow:auto;position:absolute;left:100px;top:100px;">
<div id="mytree"></div>
</div>
<script>
  new InspireTree({target: "#mytree", data:[{text:"Menu 1"},{text:"Menu 2"}]});
</script>

With keyboard click modifiers appropriate for mac/window, allow the user to select multiple nodes. This must be en/disabled via a tree config.

This will impact drag and drop, as we'll need to allow moving all selected nodes.

Nodes should allow inline editing, disabled by default.

• Some way to set a node to an edit state, with a cancel/save button.
• "cancel" restores the node text.
• "save" updates the node.text and fires a node.edited event with the new data.

Hi! It's me again. You were totally right about the lodash. Now is working!

But the CSS of it is a mess... What I'm doing wrong? I'm trying to fix it "brute force" way... but seams like a lot of things happening inside it.

Any hint?

Users may have more dynamic needs when determining if a node can be selected. We need to accept a custom conditional function in addition to the selectable state.