phphe / he-tree-vue Goto Github PK

I'm trying to walk the tree and update nodes.

I tried using code I found for earlier versions, but it doesn't seem to work anymore with Vue 3 / he-tree-vue 3.0.0.

Trying to use this.$set() results in this error:

TypeError: _this2.$set is not a function
    at eval (ModelTreeView.vue?98ec:35)
    at func (helper-js.esm.js?0fa5:889)
    at depthFirstSearch (helper-js.esm.js?0fa5:907)
    at TreeData.walk (helper-js.esm.js?0fa5:1145)
    at walkTreeData (he-tree-vue.esm.js?94dd:20)
    at Proxy.walkTreeData$1 (he-tree-vue.esm.js?94dd:193)
    at Proxy.showHidden (ModelTreeView.vue?98ec:34)
    at eval (Model.vue?1751:225)

I prepared a sandbox to reproduce the issue. Please click "Hide" or "Show hidden" to trigger it:
https://codesandbox.io/s/vue-cli-and-he-tree-vue-example-forked-xv1ww?file=/src/components/TreeView.vue

How can I walk through all the nodes of the tree and update their attributes?

Thank you for your help and this amazing component!

Hello,
Does the tree has a Delay API for this prop?
In Webcat.app we are coming from vue-draggable-nested-tree
Thank you!

Adding a Tree with v-slot results in multiple foldingTransition warnings. Is this the correct way to customize how the tree is displayed with Vue 3?
https://he-tree-vue.phphe.com/guide.html#custom-display-through-default-slot

Here's a minimal implementation of the problem, adding the Tree to a HelloWorld component built with the Vue Cli:

<template>
  <Tree :value="treeData" v-slot="{ node, index, path, tree }">
    <span>
      <b>{{ index }}</b>
      Title: {{ node.title }} - path: <i>{{ path.join(",") }}</i>
    </span>
  </Tree>
  ...
</template>

<script>
import { Tree } from "he-tree-vue";

export default {
  ...
  components: { Tree },
  data() {
    return {
      treeData: [
        { title: "node 1" },
        { title: "node 2", children: [{ title: "node 2-1" }] },
      ],
    };
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
...
</style>

Hello guys

Do you have any sample where I can find how work with 'walkTreeData'.
Because, In my case I have a tree who can contain X nodes, and every nodes have a property which is based on a modulo % 2.

I was thinking about working with walkTreeData but I wasn't able to call this function properly.

Do you have any suggestion or workaround to walk across the tree properly?

Thank's in advance, if you need some helps to improve the plugin let me know

First of all, thank you for your great work...!

In your demo source https://he-tree-vue.phphe.com/source.html#demo6 ...

There is a part as below.

return <div class="node-content">
  <button class="mrs drag-trigger">Drag</button>
  <button class="mrs fold-btn" onClick={() => tree.toggleFold(node, path)}>{node.$folded ? '+' : '-'}</button>
  {original()}
  <button class="mls">edit</button>
  <button class="mls" onClick={() => this.removeNodeByPath(path)}>remove</button>
  <button class="mls" onClick={() => this.hideNode(node)}>hidden</button>
</div>

I think this must because of my short knowledge of Vue.js, but it makes an error as below.

Can I ask how the demo source is possible to be run...?

Do I need to install another NPM for the JS grammar...?

Hi,
I'm trying to have a tree in which all the nodes have to be hanging from a single root node.
You can see the data below, in the id 1 I set draggable to false, so can't be modify, but I still can drop a node in the same level that this node, there is any way to disable this?

{ treeData: [ { id: 1, text: "root", isRoot: true, $draggable: false, children: [ { id: 2, text: "node 2", isRoot: false, $draggable: true, $droppable: true, }, { id: 3, text: "node 2-1", isRoot: false, $draggable: true, $droppable: true, }, { id: 4, text: "node 2-2", isRoot: false, $draggable: true, $droppable: true, }, ], }, ], };

Is there a way to disable auto checking sub-menus by checking parent? and of course vice versa
Edit: I want to disable the above behavior also for deleting nodes. Prevent deleting childs as well.

Edit: Another question :) How to have multiple Trees while only some of them are draggable? loading Draggable components makes them all draggable.

is it possible to create a prop like draggable or droppable?
by default: true

avoid dragging an item over another item as shown in the GIF

我希望在移动端上能支持默认滚动屏幕，然后长按元素后开启拖拽~

When set ondragstart and ondragerror props, receive error

[ERROR|/usr/local] {"text":"http://localhost:8080/_nuxt/2.js:5036_Uncaught TypeError: Cannot read property 'slice' of undefined_52_TypeError: Cannot read property 'slice' of undefined","level":"ERROR"} 

Uncaught TypeError: Cannot read property 'slice' of undefined
    at VueComponent.executeHook (2.js:5036)
    at Object.ondrag (2.js:1497)
    at Object.drag (2.js:662)
    at drag (2.js:1952)
    at HTMLDocument.moving (2.js:2006)
    at HTMLDocument.wrapper (2.js:1736)

eachDraggable and eachDroppable work fine, but i need to test when drag end, because i dont put "folder" inside another, only "files"

Hi

I'm using v2.0.8 with the plugins Fold, Check, Draggable as in your Demo

When an elment is dragged downwards after dropping it will be inserted at index (placeholderIndex - 1) instead of (placeholderIndex). Dragging an element upwards works as expected.

Any ideas what's going wrong here?

Thanks
dsheyp

Hey bro,

Instead of adding an item to the end of the list, is it possible to add it to a specific position (path)?

I need to have an add button on each item (node), and when click to add a new node right after it.

Thank you,
Vladimir

I tried to use fold plugin props foldAllAfterMounted in this example but it didn't work.

<template>
  <Tree :value="treeData" :foldAllAfterMounted="false">
    <span slot-scope="{node, index, path, tree}">
      <b @click="tree.toggleFold(node, path)">
        {{node.$folded ? '+' : '-'}}
      </b>
      {{node.text}}
    </span>
  </Tree>
</template>
<script>
import 'he-tree-vue/dist/he-tree-vue.css'
import {Tree, Fold} from 'he-tree-vue'

export default {
  components: {Tree: Tree.mixPlugins([Fold])},
  data() {
    return {
      treeData: [{text: 'node 1'}, {text: 'node 2', children: [{text: 'node 2-1'}]}]
    }
  },
}
</script>

Awesome project, thank you!
A question. Is a click event available for the node? I mean, if I want to do some actions on click on top of the node what should I do?

How do I set up the tree-children class?

use slot

///  I need to add lines...
///  I use the slot method to render the label
///  Is tree-children padding-lef the same as tree-node-back?

I have a tree limited to a 2 levels whit this code

const self = this
this.treeDatas = cloneTreeData(this.$store.state.project.features)
        walkTreeData(this.treeDatas, function (node, index, parent, path) {
          if (path && path.length >= 2) {
            self.$set(node, '$droppable', false)
          }
        })

But i want to limit that if the node [0] has children [0,1] cant be dropped if the result generates a 3 levels list

Any ideas?

Hi,

My team and I are using he-tree-vue in a few of our projects, also in combination with the pro version.
We noticed router-links, click events (also tags) are not triggered on touch devices.
This is only when using the Draggable plugin imported using the mixPlugins method.

You can even reproduce it in the demo's from the guide: https://he-tree-vue.phphe.com/guide.html#customize

You can test this yourself by either opening it on an actual touch device or toggling on the device toolbar in the Chrome Devtools. You'll notice links and click events are not triggered.

We would appreciate it if you can take a look at this!

version: 2.0.5

I am following the getting started guide posted here: https://he-tree-vue.phphe.com/guide.html#installation

However while trying to experiment with the most basic example I get this warning:
"export 'default' (imported as 'Tree') was not found in 'he-tree-vue'

Background:
I installed the package by using "npm i -P he-tree-vue" and then got a warning for PeerDependencies so i installed vue property decorator by "npm install --save-dev vue-property-decorator@^8.5.1".

We can put child in children property

Can i change the property name of "children"?

like "children" to "content" or something

Current workaround

Are there typescript definitions available for your component?

Looks really good what you did, but I would not use it in a new project without correct types...

Hi.

Your lib looks really nice at doing a complete tree feature in Vue.js. There are not so many of these libraries (often they aren't maintained anymore). But the usage of such complex component is often made in sophisticated pro app (this is my case). And I am reluctant to migrate to your lib, if I couldn't get a little bit of sense of your releases.

When I see versions 2.0.6, 2.0.7-beta1,2,3, 2.0.7 and 3.0.0 the same day, it doesn't feel like a stable thing I should adopt... Could you at least say a word about each (important) release? That would certainly help the adoption of it. Thanks in advance.

if i add transition time to tree-branch like this

.tree-branch {
  transition: all 20s ease;
}

it moves really weird not smooth
tthis feature make tree more beatiful!

This is a spectacular tree implementation I must say, so thank you for providing it!

Now, I have the following use case - I need to be able to drag elements INTO the tree and the source should not be another tree. The source (from where I want to drag elements from) is a grid or an arbitrary collection of elements (might also be a vertical/horizontal list but not necessary). Also, it should be possible to clone the element when dragging it into the tree.

Would that be possible with he-tree-vue? How do I implement an arbitrary collection of elements that can be draggable into the tree?

just evaluating this library and looks promising, thanks a lot!

Although something I've encountered: My tree is within a sidebar component (fixed, own scroll). So having a long tree I need scrolling. Enabling edgeScroll though scrolls down the whole document (therefore the main component) instead of my sidebar only. Is there a way to specify which container should be scrolled?

Nice component mate, well done! Could you think about adding examples/demo of $xxxClass and $xxxStyle .... darned if I can get either of them to work. Cheers

I make it finally checking nodes with ondragend

從 chrome console 裡看到是這行引起的
TypeError: Cannot read property 'map' of undefined

但神奇的是我只要修改一下 該 treeView component
透過 Webpack hot reload 的機制
拖曳功能就又恢複正常了

Hey @phphe you have done a nice job. It's a much needed library. Thanks for this wonderful work.

I want to implement this library inside a tbody tag.

i.e.

table
  tbody
    treeview
      tr
        td
        td

I have used the overrideSlotDefault method to override the default slot, but CSS is not applied to td tags.

i.e. it looks like the last td is not drawn.

It look like All the contents are filled inside the first td.
i.e.

So, is it possible to write a tree inside table using your library ?

Hello! Great project!
But could you provide little bit more complex example with undraggable and undroppable single nodes. Something like this example for vue-draggable-nested-tree (https://codepen.io/phphe/pen/KRapQm)? Or some example of functions for droppable / draggable.
Actually, I need to make undroppable thoes nodes that have no children. Is it easy to implement?

Hi!

I'm using a similar implementation of he-tree-vue as shown here:
https://he-tree-vue.phphe.com/guide.html#custom-display-through-default-slot

The example above breaks when adding it to a Vue 3 project since slot-scope is no longer available.
https://vuejs.org/v2/guide/components-slots.html#Deprecated-Syntax

I want to migrate my code to Vue 3, but I'm unsure how to refactor slot-scope with he-tree-vue. Could you update the documentation to reflect this change?

Thanks!
– Andreas

Good afternoon.

Is it possible now to replace the name of the nested array "children" with any other?

Thanks for the great plugin.

I have a use case of changing a node style when certain position requirements are met, e.g. when hovering to a node, it will insert it as a child node, and while hovering below / above would insert it as an adjacent node, I need to detect this distinction to be able to change the styling.

By adding hooks, preferably on the placeholder position changes (e.g when a node is about to be added as a child node, I want to make the target parent node to have a different class).

I can create a pull request for the changes if required.

I have problem to config the tree with one children and not to have subchildren

Hi,

How can I update values in parent_id and path after drag and drop event is completed?

So for example I have the below structure:

As you can see the 3rd element with id of 363 has wrong parentId of 54 (should be 55) and path should be 1 instead of 2 as it is a first element in that array.

Any idea how can I update those values dynamically so I can then save them back into mysql?

Many thanks for your help!

• Multi Select by Drag
• Multi drop after multi drag and drop
• Vertical divider like Notion.so

Is these features are in repository's plan or already possible?

It will be great repository if it could be

Hi guys! Thx your this lib.

We're dealing with this kind of error in our codebase.

I was trying to import also this way. It does not work neither.

import * as tree from "he-tree-vue";

We end up with this one.

// @ts-ignore
import {walkTreeData} from "he-tree-vue/dist/he-tree-vue";

Can you please help me? Thx.

Hi Xinxin,

My team and I tried contacting you through email about the purchase of he-tree-vue pro. We still have not received any information where we can get the package we purchased.

I'm sorry for reaching out to you this way, but we've sent numerous request to you. This has been 3 weeks already, and I still haven't received an answer. I see that you're active on Github, so please also reply to us.

Best regards,

I want to use vuex together with he-tree-vue.

We are now experiencing lots of vuex errors:
[vuex] do not mutate vuex store state outside mutation.

You made a function cloneTreeData for this purpose. However, you do not provide any examples as far as I know how to use it.
Can you show a example?

Hi,

I am working with a Draggable plugin.
How can I access the parent of the dragged node?
I see getNodeParentByPath method, but how do I call it?

<template>
  <Tree
    :value="categoryTreeData"
    draggable
    droppable @drop="handleTreeChange"
  >
    <span slot-scope="{node, index, path, tree}">
      <template v-if="!node.isDragPlaceHolder">
        <span
          v-if="node.children && node.children.length"
          @click="slot.store.toggleOpen(node)"
        >
          <v-icon v-if="node.open" small class="mr-1">mdi-minus-box-outline</v-icon>
          <v-icon v-if="!node.open" small class="mr-1">mdi-plus-box-outline</v-icon>
        </span>
        <span :class="{ 'draggable-node--drop-disabled': node.droppable === false }">{{ node.text }}</span>
      </template>
    </span>
  </Tree>
</template>
<script>
import { Tree,  Draggable } from "he-tree-vue"
import 'he-tree-vue/dist/he-tree-vue.css'
import sortBy from 'lodash/sortBy'

export default {
  name: 'CategoryTreeSort',
  components: {Tree: Tree.mixPlugins([Draggable])},
  methods: {
    async handleTreeChange (store) {
       const {dragNode} = store
       // how to get the parent of dragNode?
    }
....

Thank you

Hello,

'he-tree-vue' is production ready or you need some helps ?

Any plans on supporting vue.js 3 and composition-api?

First off thanks a lot for great work.

I'm using he-tree-vue in my nuxt project, this works perfectly when the server just started. But once the page is refreshed it shows the following error when dragging.

Hello, I'm trying to make a drag and drop tree where nodes can only be moved inside same level, to do this I used function droppable and I'm using the 2nd store parameter. startPath works fine but targetPath is being set late and is undefined, how can I work around this?

  methods: {
    isNodeDroppable(tree, store) {
      console.log(store);
      console.log(store.startPath + "-" + store.targetPath);
      return true;
    },
  },

Hi phphe,

thanks for your great tree library, i bought the pro version.

my question is:
is the he tree able to recognize if i drop a node (from another tree) directly onto a node in the other tree ?
if yes, how can that be done ?

Thanks in advance
Adrian

Hi,
first of all, thanks for this nice component!

I'm wondering if I can update tree node data directly without having to reload the entire tree.
For example change the title of a node in a given path, after receiving data from an http request.

Is this possible with any of the available api methods? I've been trying for a while now, but without any success.

Hello,
Is it possible to add RTL support?
So the elements would have padding-right instead of padding-left?
I messed around with it a little and managed to get it to look right, but my changes broke the horizontal dragging functionality to change the nesting level.

Thanks.

When dragging a node and the node top left corner went outside the tree area, drag and drop would stop working and the placeholder would not be moved.

I can help with a PR if needed.