Translate not called in parent-drawflow

[BobBDE]

Hello,

I have a question about the translate to navigate in the drawflow element.

In the demo : https://jerosoler.github.io/Drawflow/, when you zoom out it is always possible to trigger the translate method (and navigate in drawflow) even if we click outside of the div with the drawflow class. The translate method is called (visible in the console) even if I click and drag from the parent-drawflow element but outside of it drawflow div child. This is nice because the navigation is always possible event if I zoom out and loose the block, it can navigate back to find them.

When I try the same code as the demo (from here : https://github.com/jerosoler/Drawflow/blob/master/docs/index.html) I don't have the same behavior. When I zoom out, the translate event (and the navigation) is only possible if I click on the drawflow child div but nothing is triggered if I click and drag on the parent-drawflow element.

I tried with the v 0.0.59. Is the demo in another version? Or I am missing something ?

If this is not cleared, don't hesitate to ask question, I can provide with more information.

Thanks,

[jerosoler]

In principle it is the same as the demo.

The version is loading: https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.js

You can see the code at: view-source:https://jerosoler.github.io/Drawflow/

[BobBDE]

Hello,

Thank you for your response.

After a bit of testing I found the problem. If I had a class to the main drawflow element this breaks the translate on parent.

Here is a simple example where you can test it : https://stackblitz.com/edit/js-ohlqb9?file=index.html,style.css

In this example if you zoom out you won't be able to move the drawflow when you drag outside the blue box. But in the index.html file if you remove the class not-working from the drawflow element this works as expected.

Basically the element that is used to instantiate drawflow must not have another class. Do you think this is fixable ?

[tidus004]

I am having the same issue. When clicking outside of the blu zone, I am not able to drag around things.

UPDATE:

the problem is that in the library when the click is made, only the first element of the class is controlled.

 switch (this.ele_selected.classList[0]) {
      case 'drawflow-node':
        if(this.node_selected != null) {
          this.node_selected.classList.remove("selected");
          if(this.node_selected != this.ele_selected) {
            this.dispatch('nodeUnselected', true);
          }
        }
        if(this.connection_selected != null) {
          this.connection_selected.classList.remove("selected");
          this.removeReouteConnectionSelected();
          this.connection_selected = null;
        }
        if(this.node_selected != this.ele_selected) {
          this.dispatch('nodeSelected', this.ele_selected.id.slice(5));
        }
        this.node_selected = this.ele_selected;
        this.node_selected.classList.add("selected");
        if(!this.draggable_inputs) {
          if(e.target.tagName !== 'INPUT' && e.target.tagName !== 'TEXTAREA' && e.target.tagName !== 'SELECT' && e.target.hasAttribute('contenteditable') !== true) {
            this.drag = true;
          }
        } else {
          if(e.target.tagName !== 'SELECT') {
            this.drag = true;
          }
        }

A simple trick would be the following when adding the classlist "parent-drawflow"

start () { // console.info("Start Drawflow!!"); // this.container.classList.add("parent-drawflow"); this.container.className = "parent-drawflow " + this.container.className.trim();

[jerosoler]

Try this method:

• https://github.com/jerosoler/Drawflow/issues/469#issuecomment-1170809050

[BobBDE]

Thank you @jerosoler for those information and you work ! :)