New modes, or how to adjust "fixed" mode

[SilasNiewierra]

Hi, still in love with your library. It's great to work with, and now I got another question 😄

Once a user "activates" the flowchart, I would like to set the mode to fixed. But the user should still be able to move the entire diagram around. So the only thing that should change is, once the flowchart is active, the user should not be able to:

• add new nodes
• delete nodes
• add connections
• delete connections

Is there a way to adjust the fixed mode, so the user is still able to move the nodes around? In case something looks cluttered and he wants to make it more visually appealing.

Thanks

[jerosoler]

Hi @SilasNiewierra

Thanks!

You can get just moving the nodes with this:

        editor.on('click', function(e) {
            if(e.target.closest(".drawflow_content_node") != null) {
                editor.ele_selected = e.target.closest(".drawflow_content_node").parentElement;
                if(editor.ele_selected.classList[0] === 'drawflow-node') {
                    editor.editor_mode = "edit";
                }

            }
        });

        editor.on('clickEnd', function(e) {
            editor.editor_mode = "fixed";
        });

To prevent adding a node you just have to do something similar to this:

if(editor.editor_mode !== "fixed") {
  // ADD NODE
} else {
alert("Mode fixed! Unblock to add node");
}

[SilasNiewierra]

Hi @jerosoler ,

thanks that works great, is there a way to enable moving the entire flowdiagram in fixed mode as well?

[jerosoler]

What do you mean by "moving the entire flow diagram"?

[SilasNiewierra]

When I click and hold on the background instead of a node, I can move the entire diagram around.

[jerosoler]

By default that already happens.

Watch the demo with fixed mode activated.

https://jerosoler.github.io/Drawflow/

[SilasNiewierra]

Okay, the demo works perfectly. Just what I want. But somehow with my Vue implementation it doesn't work? Can I intercept some events to see whats wrong?

[jerosoler]

Try with event translate.

[SilasNiewierra]

Can you please show a code snippet how to do so? I'm not to so familiar with events 😁

[jerosoler]

editor.on('translate', function(position) {
   console.log('Translate x:' + position.x + ' y:'+ position.y);
   })

If the data is displayed. It would have to move.

[SilasNiewierra]

Okay so there are no logs happening when the mode is fixed. But without fixed mode, I can see the log. 🤔

[jerosoler]

mmmm... How to activate the 'fixed' mode?

[SilasNiewierra]

Two options: In the mount() function

async mounted() {
    // get automation data and setup the editor
    await axios
      .get(`url`)
      .then((response) => {
        this.automation = response.data
        this.setupEditor()
      })
      .catch((error) => {
        console.log(error)
      })
  },

  methods:{
   setupEditor(){
      const id = document.getElementById('drawflow')
      this.editor = new Drawflow(id, Vue, this)

      // Lock if active state
      if (this.automation.status === AutomationStates.ACTIVE) {
        this.editor.editor_mode = 'fixed'
      }
      // Enable moving nodes, when in fixed mode
      this.editor.on('click', (e) => {
        if (this.automation.status === AutomationStates.ACTIVE) {
          if (e.target.closest('.drawflow_content_node') != null) {
            this.editor.ele_selected = e.target.closest(
              '.drawflow_content_node',
            ).parentElement
            if (this.editor.ele_selected.classList[0] === 'drawflow-node') {
              this.editor.editor_mode = 'edit'
            }
          }
        }
      })
      this.editor.on('clickEnd', () => {
        if (this.automation.status === AutomationStates.ACTIVE) {
          this.editor.editor_mode = 'fixed'
        }
      })
      this.editor.on('translate', function (position) {
        console.log('Translate x:' + position.x + ' y:' + position.y)
      })
      this.editor.start()
   }
}

When the user activates it:

async activate() {
      const data = {}
      await axios
        .post(
          `url`,
          data,
          {},
        )
        .then((response) => {
          this.editor.editor_mode = 'fixed'
        })
        .catch((error) => {
          console.log(error)
          this.showSnackbar('error', 'snackbar.automation.activate.error')
        })
    },

[jerosoler]

Your code seems to be correct.

It shows me one more thing.

The document.getElementById('drawflow') block

This block cannot have any class assigned. If you want to assign a class to it, first add the class "parent-drawflow"

<div id="drawflow"></div>  // Correct
<div id="drawflow" class="active"></div>  // InCorrect

// Solution for extra class
<div id="drawflow" class="parent-drawflow other-class"></div>   

Could it be that I add an extra class? It's a Problem: https://github.com/jerosoler/Drawflow/pull/141

[SilasNiewierra]

That's it. I removed the class and now it works just like in the demo 👍 thank you once again 😄