return false inside "beforeAdd" function does not change indicator to red

[digitalsailweb]

Thanks for this great tool. I have issue which I want to change indicator color to red if dragged node does not match certain condition. For testing purpose I just return false inside "beforeAdd" function to see if indicator change to red but it does not change it is still blue.. Is there anything wrong here or I am missing something. As per comments inside the function , the function will change the indicator to red if you return false.

beforeAdd({ to, from }) {
      // called before moving node (during drag and after drag)
      // indicator will turn red when we return false
      // from is null when we're not dragging from the current node tree
     
      return false
}

[digitalsailweb]

Hi Team ,,

any luck to help in this issue

[KjetilHaaheim]

Hi @digitalsailweb !

Are you passing the beforeAdd-function to Flowy?

<template>
  <flowy
    class="q-mx-auto"
    :nodes="nodes"
    :beforeAdd="beforeAdd"
  />
</template>

<script>
export default {
  methods: {
    beforeAdd({ to, from }) {   
      return false
    }
  }

}
</script>

[digitalsailweb]

    :beforeAdd="beforeAdd"

Hi @KjetilHaaheim
yes .. here is the code

       <flowy
          class="mx-auto"
          :nodes="nodes"
          :beforeMove="beforeMove"
          :beforeAdd="beforeAdd"
          @add="add"
          @move="move"
          @remove="remove"
          @drag-start="onDragStart"
        ></flowy>

[KjetilHaaheim]

Aah, my apologies @digitalsailweb, I misinterpreted your question. To flag red, you need to use the beforeMove function. beforeMove is triggered before you drop the target, and beforeAdd handles the logic after drop, before data is changed.

If you have a quick peek in FlowyNode.vue, The DropIndicator vil show if local data prop dropAllowed == false. dropAllowed is set by your assigned beforeMove function, as handled here:

// FlowyNode.vue - methods

onEnterDrag(_event) {
  this.hoveringWithDrag = true;
  this.dropAllowed = this.beforeMove(_event.to);
}

The answer could have been much shorter, but its fun to peek on the inside 👯

[digitalsailweb]

@KjetilHaaheim
Thanks for the response. My issue that I want to do some tests for target node( destination node) .
For example if dragged node is x and target node is y then dont allow drag and show red indicator.
When I did some test I can catch the target node inside beforeMove ..
I can catch target node inside beforeAdd..

I am not sure if my understanding is correct or not of how flowy works.

[digitalsailweb]

anyone has an idea for this issue. thanks

[KjetilHaaheim]

Hi @digitalsailweb! I think I finally understood the issue, my apologies for complicating it. Your understanding is absolutely correct, the code which controls the drop indicator on hover, is the code I posted above.

onEnterDrag(_event) {
  this.hoveringWithDrag = true;
  this.dropAllowed = this.beforeMove(_event.to);
}

As you can see, it only uses the beforeMove function (never beforeAdd), in which it also only passes the target (to). I am doing some refactoring to correct the issue; I am not sure if I will get the code into master, as I have not heard from the creator in a while. Will update!

[digitalsailweb]

@KjetilHaaheim

thanks for you reply and effort . any update to add the feature you mentioned ?

thanks again

[i-Chan93]

@KjetilHaaheim Thanks for the response. My issue that I want to do some tests for target node( destination node) . For example if dragged node is x and target node is y then dont allow drag and show red indicator. When I did some test I can catch the target node inside beforeMove .. I can catch target node inside beforeAdd..

I am not sure if my understanding is correct or not of how flowy works.

Stuck in a similar issue.
And happened to raise a separate issue for the same before finding this issue already raised.

The link for the same: #62