jerosoler / Drawflow

Simple flow library 🖥️🖱️
https://jerosoler.github.io/Drawflow/
MIT License
4.65k stars 722 forks source link

Make connection/line not deletable #523

Closed angelostiffy closed 2 years ago

angelostiffy commented 2 years ago

@jerosoler I'm currently developing a workflow application using your library. I have below a picture of a sample workflow. Is there a way on how to make connections/line not deletable? If it's possible, if i click on a connection, the green X will not appear.

Untitled

jerosoler commented 2 years ago

View:

angelostiffy commented 2 years ago

I just included the code from https://github.com/jerosoler/Drawflow/issues/203 now when I right click a diagram the delete functionality does not work. Is there a way that only connections don't have the right click functionality?

const dataToImport = workflowInstructions;
this.editor = new DrawflowLocal(drawflowId);
this.editor.reroute = false;
this.editor.curvature = 0;
this.editor.reroute_curvature_start_end = 0;
this.editor.reroute_curvature = 0;
this.editor.createCurvature =  (start_pos_x, start_pos_y, end_pos_x, end_pos_y, curvature_value) => {
   let center_x = ((end_pos_x - start_pos_x) / 2) + start_pos_x;
   return ' M ' + start_pos_x + ' ' + start_pos_y + ' L ' + center_x + ' ' + start_pos_y + ' L ' + center_x + ' ' + end_pos_y + ' L ' + end_pos_x + ' ' + end_pos_y;
}
this.editor.contextmenu = (e) => {
   this.editor.drag = false;
   this.editor.drag_point = false;
   this.editor.connection = false;
   this.editor.ele_selected = null;
   this.editor.editor_selected = false;
   this.editor.dispatch('contextmenu', e);
}
this.editor.start();
this.editor.import(dataToImport);  
jerosoler commented 2 years ago

Try:

    editor.contextmenu = (e) => {
      editor.dispatch('contextmenu', e);
      e.preventDefault();
      if(editor.editor_mode === 'fixed' || editor.editor_mode === 'view') {
        return false;
      }
      if(editor.precanvas.getElementsByClassName("drawflow-delete").length) {
        editor.precanvas.getElementsByClassName("drawflow-delete")[0].remove()
      };
      if(editor.node_selected || editor.connection_selected) {
        var deletebox = document.createElement('div');
        deletebox.classList.add("drawflow-delete");
        deletebox.innerHTML = "x";
        if(editor.node_selected) {
          editor.node_selected.appendChild(deletebox);

        }
      }
    }
angelostiffy commented 2 years ago

Thank you it works now!