☰

mouse_middle_button_grab

drap canvas when using processon

  1. // ==UserScript==
  2. // @name         mouse_middle_button_grab
  3. // @namespace    
  4. // @version      0.3
  5. // @description  drap canvas when using processon
  6. // @author       SimonTheCoder
  7. // @match        https://www.processon.com/*
  8. // @grant        none
  9. // ==/UserScript==
  10.  
  11. (function() {
  12.     'use strict';
  13.     console.log("mouse_middle_button_grab loaded.");
  14.     var diaType = "diagram";
  15.     var designer_layout = document.getElementById("designer_layout");
  16.     if(!designer_layout){
  17.         console.log("seems we are drawing mindmap.");
  18.         designer_layout = document.getElementById("canvas_container");
  19.         diaType = "mindmap";
  20.     }
  21.  
  22.     //var designer_layout = document.getElementById("canvas_container");
  23.     console.log("designer_layout:"+designer_layout);
  24.  
  25.     var sampleStartX = 0;
  26.     var sampleStartY = 0;
  27.     var startTimeStamp = 0;
  28.     var lastX = 0;
  29.     var lastY = 0;
  30.     var global_test_e = null;
  31.     var middle_down = false;
  32.     designer_layout.onmousedown = function(e) {
  33.         if(e.button == 1){
  34.             global_test_e = e;
  35.             lastX = e.x;
  36.             lastY = e.y;
  37.  
  38.             sampleStartX = e.x;
  39.             sampleStartY = e.x;
  40.             startTimeStamp = e.timeStamp;
  41.  
  42.             //console.log("middle mouse down. x =" + e.x + " y=" +e.y);
  43.             middle_down = true;
  44.             //e.stopPropagation();
  45.         }
  46.     };
  47.     designer_layout.onmouseup = function(e){
  48.         if(e.button == 1){
  49.             global_test_e = e;
  50.             //console.log("middle mouse up. x =" + e.x + " y=" +e.y);
  51.             //console.log("middle mouse up. lastx =" + lastX + " lastY=" +lastY);
  52.             //console.log("middle mouse up. time=" + (e.timeStamp - startTimeStamp));
  53.             var endSpeed = Math.sqrt((e.x-sampleStartX)*(e.x-sampleStartX) + (e.y-sampleStartY)*(e.y-sampleStartY))/(e.timeStamp - startTimeStamp);
  54.             //console.log("middle mouse up. lastSpeed= " + endSpeed);
  55.             lastX = e.x;
  56.             lastY = e.y;
  57.  
  58.             middle_down = false;
  59.             //e.stopPropagation();
  60.         }
  61.     };
  62.     designer_layout.onmousemove = function(e){
  63.         if(e.button == 1 && middle_down === true){
  64.             //console.log("middle mouse move. x =" + e.x + " y=" +e.y + " lastx =" + lastX + " lasty=" +lastY );
  65.             designer_layout.scrollTop = designer_layout.scrollTop - (e.y - lastY);
  66.             designer_layout.scrollLeft = designer_layout.scrollLeft - (e.x - lastX);
  67.             lastX = e.x;
  68.             lastY = e.y;
  69.  
  70.             if(e.timestamp - startTimeStamp > 200){
  71.                 sampleStartX = e.x;
  72.                 sampleStartY = e.x;
  73.                 startTimeStamp = e.timeStamp;
  74.             }
  75.             //e.stopPropagation();
  76.         }
  77.  
  78.     };
  79.     designer_layout.onmousewheel = function(e){
  80.         if(e.altKey === true){
  81.             console.log("zoom: " + e.deltaY);
  82.             if(e.deltaY > 0){
  83.                 if(diaType == "mindmap"){
  84.                     document.getElementById("btn_zoomsmall").click();
  85.                 }else{
  86.                     Designer.zoomOut();
  87.                 }
  88.             }else{
  89.                 if(diaType == "mindmap"){
  90.                     document.getElementById("btn_zoombig").click();
  91.                 }else{
  92.  
  93.                     if(Designer.config.scale < 0.3){
  94.                         Designer.setZoomScale(0.4);
  95.                     }else{
  96.                         Designer.zoomIn();
  97.                     }
  98.                 }
  99.             }
  100.             e.preventDefault();
  101.             e.stopPropagation();
  102.         }
  103.  
  104.     };
  105.     /*
  106.     designer_layout.onclick = function(e){
  107.         if(e.button == 1){
  108.             e.stopPropagation();
  109.         }
  110.     };
  111.     */
  112. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址