Using mouse wheel to scroll up and down on canvas

[dsoiM]

I wanted to scroll up and down on canvas using plain mouse wheel. Here's the javascript needed to achieve it:

var Drawflowoverride = class extends Drawflow {
  zoom_enter(event, delta) {
      event.preventDefault();
      if (event.ctrlKey) {
          if(event.deltaY > 0) {
            // Zoom Out
            this.zoom_out();
          } else {
            // Zoom In
            this.zoom_in();
          }
        }
      else {
          if(event.deltaY > 0) {
              var moveAm = -40;
              //Scroll up
          } else {
              //Scroll down
              var moveAm = 40;
          }

          this.canvas_y = this.canvas_y + moveAm;
          this.dispatch('translate', { x: this.canvas_x , y: this.canvas_y});
          this.precanvas.style.transform = "translate("+this.canvas_x+"px, "+this.canvas_y+"px) scale("+this.zoom+")";

     }
}

[jerosoler]

ohh😍 good functionality!

Another way to override:

editor.zoom_enter = function(event) {
      event.preventDefault();
      if (event.ctrlKey) {
          if(event.deltaY > 0) {
            // Zoom Out
            editor.zoom_out();
          } else {
            // Zoom In
            editor.zoom_in();
          }
        }
      else {
          if(event.deltaY > 0) {
              var moveAm = -40;
              //Scroll up
          } else {
              //Scroll down
              var moveAm = 40;
          }

          editor.canvas_y = editor.canvas_y + moveAm;
          editor.dispatch('translate', { x: editor.canvas_x , y: editor.canvas_y});
          editor.precanvas.style.transform = "translate("+editor.canvas_x+"px, "+editor.canvas_y+"px) scale("+editor.zoom+")";

     }
  }

[jerosoler]

I add to the list of functionalities: mouse wheel event

[javierherreromajorel]

There is a way to add a functionality to scroll in all directions with the mouse?

[jerosoler]

Example with shiftKey lef /t right. Without shiftkey up / down With control Zoom.

    var id = document.getElementById("drawflow");
    const editor = new Drawflow(id);

    // Function to translate to diff cordinates
    editor.translate_to_diff = function(x,y){
        this.canvas_x = this.canvas_x + x;
        this.canvas_y = this.canvas_y + y;
        this.precanvas.style.transform = "translate("+this.canvas_x+"px, "+this.canvas_y+"px) scale("+this.zoom+")";
    }

    // New values configurables
    editor.translate = {
        wheel: {
            active: true,
            delta: false, // If false use diff
            diff: 40,
            invert: true,
        }
    }

    // Override function zoom enter! 
    editor.zoom_enter =  function(e) {
        const ctrlKey = e.ctrlKey;
        const shiftKey = e.shiftKey;

        // Translate Mouse or Trackpad
        if(editor.translate.wheel.active && !ctrlKey) {
            e.preventDefault()
            const delta = editor.translate.wheel.delta;
            const diff = editor.translate.wheel.diff;
            const invert = editor.translate.wheel.invert;

            let x = 0;
            let y = 0;

            if(delta) {
                y = e.deltaY;
                x = (e.deltaY === -0 ? e.deltaX : e.deltaY );
            } else {
                if(e.deltaY > 0 || e.deltaX > 0) {
                    y = diff 
                    x = diff 
                } else {
                    y = diff * -1
                    x = diff * -1
                }
            }
            if(invert) {
                y = y * -1;
                x = x * -1;
            }

            if(shiftKey || e.deltaY === -0) {
                y = 0;
            } else {
                x = 0;
            }
            editor.translate_to_diff(x,y);
        }

        // Zoom
        if(ctrlKey) {
            e.preventDefault()
            if(e.deltaY > 0) {
                // Zoom Out
                this.zoom_out();
            } else {
                // Zoom In
                this.zoom_in();
            }
        }
    }

    editor.start();
    const nodeIdA = editor.addNode('test1', 1, 1, Math.floor(Math.random() * 1920) + 1, Math.floor(Math.random() * 800) + 1, 'test1', {}, '<div>Hi!!</div>');
    const nodeIdB = editor.addNode('test1', 1, 1, Math.floor(Math.random() * 1920) + 1, Math.floor(Math.random() * 800) + 1, 'test1', {}, '<div>Hi!!</div>');
    const nodeIdC = editor.addNode('test1', 1, 1, Math.floor(Math.random() * 1920) + 1, Math.floor(Math.random() * 800) + 1, 'test1', {}, '<div>Hi!!</div>');