Third mode for just view?

[pavlyuts]

Hi!

I found that the fixed mode just fixes node location and prevents from node and conenctions add/drop/move, but any inputs in the nodes (if defined) are stil active. I guess, this mode is nice when you allow user only play with inputs.

However, I need clear 'view' mode where nothing (including node inputs/data) may be changed, just absolutely frosen flow, just move across by gragging canva and zoom in-out.

My idea is not to change 'fixed' mode, but add third 'view' mode with this behaviour.

I may try to render this even Javascript is not a my strong side, but I need yor opinion on that and may be some discussion on how to achieve it.

It looks lik we need to capture all the events at propagation, not bubbling and prevent any elements inside nodes to receive any events. I am not sure about the best approach to do this. If you sggest me the best approach, I will try to implement the feature.

[jerosoler]

Hello @pavlyuts

More simple:

Usign event "click"

 editor.on("click", function(event) {                               
        if(event.target.tagName === "INPUT" || event.target.tagName === "TEXTAREA" || event.target.tagName === "SELECT") {    
          event.preventDefault() 
        } 
    });

[pavlyuts]

Hmmm, does editor instance has events? Guess, it is not a DOM element.

May be you mean drawflow <div>? Or the next child you attach by script?

Also, another issue is that nodes elements will catch the click and then the canva will NOT move if you point to a node. Not a big trouble, but annoying. In the 'view' mode any click must select 'drawnode' class element.

I am near to provide the solution ))) thanks for hint!

[pavlyuts]

This work perfectly:

  click(e) {
    this.dispatch('click', e);
    if(this.editor_mode === 'fixed') {
      //return false;
       if(e.target.classList[0] === 'parent-drawflow' || e.target.classList[0] === 'drawflow') {
         this.ele_selected = e.target.closest(".parent-drawflow");
       } else {
         return false;
       }
// added code
    } else if(this.editor_mode === 'view') {
      if((null != e.target.closest(".drawflow")) || e.target.matches('.parent-drawflow')) {
        this.ele_selected = e.target.closest(".parent-drawflow");
        e.preventDefault();
      } else {
         return false;
      }
//end of added code
    } else {
      this.first_click = e.target;
      this.ele_selected = e.target;
      if(e.button === 0) {
        this.contextmenuDel();
      }

The only issue is the cusor changes it's view. Have no idea how effectively change this. Looks like need add style to parent-drawflow and then buold proper selector.

Minor problem is that editor mode set by variable, so there no way to automate things if mode changes dinamically. Have no ide how to handle this.

Should I send PR for this?