☰

mouse_middle_button_grab

drag canvas when using processon

  1. // ==UserScript==
  2. // @name         mouse_middle_button_grab
  3. // @namespace    
  4. // @version      0.3
  5. // @description  drag 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.         //console.log("mouse move button=%d", e.button);
  64.         if(middle_down === true){
  65.             //console.log("middle mouse move. x =" + e.x + " y=" +e.y + " lastx =" + lastX + " lasty=" +lastY );
  66.             designer_layout.scrollTop = designer_layout.scrollTop - (e.y - lastY);
  67.             designer_layout.scrollLeft = designer_layout.scrollLeft - (e.x - lastX);
  68.             lastX = e.x;
  69.             lastY = e.y;
  70.  
  71.             if(e.timestamp - startTimeStamp > 200){
  72.                 sampleStartX = e.x;
  73.                 sampleStartY = e.x;
  74.                 startTimeStamp = e.timeStamp;
  75.             }
  76.             //e.stopPropagation();
  77.         }
  78.  
  79.     };
  80.     designer_layout.onmousewheel = function(e){
  81.         if(e.altKey === true && e.shiftKey === true){
  82.             //console.log("zoom: " + e.deltaY);
  83.             var oldScale = Designer.config.scale;
  84.             var oldScrollTop = designer_layout.scrollTop;
  85.             var oldScrollLeft = designer_layout.scrollLeft;
  86.             var oldScrollWidth = designer_layout.scrollWidth;
  87.             var oldScrollHeight = designer_layout.scrollHeight;
  88.             if(e.deltaY > 0){
  89.                 if(diaType == "mindmap"){
  90.                     document.getElementById("btn_zoomsmall").click();
  91.                 }else{
  92.                     Designer.zoomOut();
  93.                 }
  94.             }else{
  95.                 if(diaType == "mindmap"){
  96.                     document.getElementById("btn_zoombig").click();
  97.                 }else{
  98.  
  99.                     if(Designer.config.scale < 0.3){
  100.                         Designer.setZoomScale(0.4);
  101.                     }else{
  102.                         Designer.zoomIn();
  103.                     }
  104.                 }
  105.             }
  106.             var newScale = Designer.config.scale;
  107.  
  108.             //console.log(e);
  109.             recalcScrollAfterScaleChanged(oldScrollTop,oldScrollLeft,oldScrollWidth,oldScrollHeight,oldScale,newScale,e.x,e.y);
  110.             e.preventDefault();
  111.             e.stopPropagation();
  112.         }
  113.  
  114.     };
  115.  
  116.     if(diaType == "diagram"){
  117.         designer_layout.ondblclick = function(e){
  118.             if(e.button==1){
  119.                 var oldScale = Designer.config.scale;
  120.                 var oldScrollTop = designer_layout.scrollTop;
  121.                 var oldScrollLeft = designer_layout.scrollLeft;
  122.                 var oldScrollWidth = designer_layout.scrollWidth;
  123.                 var oldScrollHeight = designer_layout.scrollHeight;
  124.  
  125.                 console.log("clear set zoom scale to 1.");
  126.                 Designer.setZoomScale(1);
  127.                 recalcScrollAfterScaleChanged(oldScrollTop,oldScrollLeft,oldScrollWidth,oldScrollHeight,oldScale,1.0,e.x,e.y);
  128.  
  129.             }
  130.         };
  131.     }
  132.     function recalcScrollAfterScaleChanged(oldScrollTop,oldScrollLeft,oldScrollWidth,oldScrollHeight,oldScale, newScale, centerX, centerY){
  133.         if(diaType != "diagram") return; //supports diagram only
  134.         console.log("top,left= " +designer_layout.scrollTop +" ,"+designer_layout.scrollLeft+" scale:"+ oldScale + ","+newScale);
  135.         var diaClientRect = designer_layout.getClientRects()[0];
  136.         var offsetTop = centerY - diaClientRect.top;
  137.         var offsetLeft = centerX - diaClientRect.left;
  138.         console.log("offset:"+offsetTop + ","+offsetLeft);
  139.  
  140.         var centerPointScrollTopOrigFactor = (oldScrollTop + offsetTop)/oldScrollHeight;
  141.         var centerPointScrollLeftOrigFactor = (oldScrollLeft + offsetLeft)/oldScrollWidth;
  142.         var centerPointScrollTopNew = centerPointScrollTopOrigFactor * designer_layout.scrollHeight;
  143.         var centerPointScrollLeftNew = centerPointScrollLeftOrigFactor * designer_layout.scrollWidth;
  144.         designer_layout.scrollTop = centerPointScrollTopNew - offsetTop;
  145.         designer_layout.scrollLeft = centerPointScrollLeftNew - offsetLeft;
  146.  
  147. /*
  148.         designer_layout.scrollTop = designer_layout.scrollHeight * (oldScrollTop + offsetTop)/oldScrollHeight  - offsetTop;
  149.         designer_layout.scrollLeft =designer_layout.scrollWidth * (oldScrollLeft + offsetLeft)/oldScrollWidth  - offsetLeft;
  150. */
  151.     }
  152.     /*
  153.     function recalcScrollAfterScaleChanged(oldScale, newScale){
  154.         if(diaType != "diagram") return; //supports diagram only
  155.         var diaClientRect = designer_layout.getClientRects()[0];
  156.         var centerPointScrollTopOrig = (designer_layout.scrollTop + diaClientRect.height/2)/oldScale;
  157.         var centerPointScrollLeftOrig = (designer_layout.scrollLeft + diaClientRect.width/2)/oldScale;
  158.         var centerPointScrollTopNew = centerPointScrollTopOrig * newScale;
  159.         var centerPointScrollLeftNew = centerPointScrollLeftOrig * newScale;
  160.         designer_layout.scrollTop = centerPointScrollTopNew - diaClientRect.height/2/oldScale*newScale;
  161.         designer_layout.scrollLeft = centerPointScrollLeftNew - diaClientRect.width/2/oldScale*newScale;
  162.     }*/
  163.     /*
  164.     designer_layout.onclick = function(e){
  165.         if(e.button == 1){
  166.             e.stopPropagation();
  167.         }
  168.     };
  169.     */
  170. })();
  171.  
  172.  
  173. (function() {
  174.     'use strict';
  175.  
  176.     // Your code here...
  177. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

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

加入Q群

QingJ © 2025

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