From 66bdae9edcf675ee6f1150880963241fb4b99fd5 Mon Sep 17 00:00:00 2001 From: "Rukshan J. Senanayaka" Date: Fri, 9 Apr 2021 19:24:30 +0530 Subject: [PATCH] added canvas panning option using middle mouse toggle known issues: -The viewBox attribute of the patchsvg resets its x and y to zero when, --start panning again --add a new object to canvas Should save the previous x and y instead. --- pd/nw/pd_canvas.js | 91 +++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 86 insertions(+), 5 deletions(-) diff --git a/pd/nw/pd_canvas.js b/pd/nw/pd_canvas.js index 3a503ccbb..276ffed57 100644 --- a/pd/nw/pd_canvas.js +++ b/pd/nw/pd_canvas.js @@ -8,7 +8,12 @@ var pd_menus = require("./pd_menus.js"); pdgui.skin.apply(window); //var name = pdgui.last_loaded(); - +var is_canvas_panning = false; +var pointer_origin_x; +var pointer_origin_y; +var view_box_x = 0; +var view_box_y = 0; +var svg = document.getElementById("patchsvg"); var l = pdgui.get_local_string; function nw_window_focus_callback(name) { @@ -49,7 +54,7 @@ var canvas_events = (function() { last_dropdown_menu_x, last_dropdown_menu_y, last_search_term = "", - svg_view = document.getElementById("patchsvg").viewBox.baseVal, + svg_view = document.getElementById("patchsvg").viewBox.baseVal, textbox = function () { return document.getElementById("new_object_textentry"); }, @@ -232,6 +237,20 @@ var canvas_events = (function() { two = text.charAt(1); return (one === "#" && (two === "N" || two === "X")); }, + + //panning effect on mouse scroll click + move_canvas = function(pointerX, pointerY){ + var width = svg.viewBox.baseVal.width; + var ratio = width / svg.getBoundingClientRect().width; + view_box_x = (pointerX - pointer_origin_x + svg.getBoundingClientRect().x)*ratio; + view_box_y = (pointerY - pointer_origin_y + svg.getBoundingClientRect().y)*ratio; + pdgui.post("view_box_x: " + view_box_x.toString() + " view_box_y: " + view_box_y.toString()); + pdgui.post("pointerX: " + pointerX.toString() + " pointerY: " + pointerY.toString()); + pdgui.post("pointer_origin_x: " + pointer_origin_x.toString() + " pointer_origin_y: " + pointer_origin_y.toString()); + svg.viewBox.baseVal.x = -view_box_x; + svg.viewBox.baseVal.y = -view_box_y; + + }, grow_svg_for_element = function(elem) { // See if an element overflows the svg bbox, and // enlarge the svg to accommodate it. @@ -295,10 +314,45 @@ var canvas_events = (function() { } }, events = { + + mousemove: function(evt) { + + try{ + if (is_canvas_panning){ + let [pointer_x, pointer_y] = evt.type === "touchstart" + ? [Math.trunc(evt.touches[0].pageX), + Math.trunc(evt.touches[0].pageY)] + : [evt.pageX, evt.pageY]; + pdgui.post("Moving mouse"); + move_canvas(pointer_x,pointer_y); + } + + + } + catch(e){ + pdgui.post("Error getting mouse coordinates") + + } + + + + + + + + + + + + + + + + //pdgui.post("x: " + evt.pageX + " y: " + evt.pageY + // " modifier: " + (evt.shiftKey + (pdgui.cmd_or_ctrl_key(evt) << 1))); - if (evt.type === "touchmove") { + if (evt.type === "touchmove") { if (target_is_popup(evt)) { // ag: Presumably this is the confirmation popup, we // don't want to do any special processing there at @@ -314,7 +368,7 @@ var canvas_events = (function() { // you can just press the Ctrl/Cmd key while dragging, // which will also suppress the selection rectangle to // appear. - document.body.style.overflow = 'hidden'; + document.body.style.overflow = 'hidden'; } } // ag: It seems possible to get fractional values here, which @@ -355,7 +409,7 @@ var canvas_events = (function() { // you'll have to touch a blank spot on the canvas. document.body.style.overflow = 'hidden'; } - } + } let [pointer_x, pointer_y] = evt.type === "touchstart" ? [Math.trunc(evt.touches[0].pageX), Math.trunc(evt.touches[0].pageY)] @@ -374,6 +428,7 @@ var canvas_events = (function() { evt.target.parentNode.parentNode.id.slice(0,-4).slice(1); last_draggable_x = pointer_x + svg_view.x; last_draggable_y = pointer_y + svg_view.y; + // Nasty-- we have to forward magic values from g_canvas.h // defines in order to get the correct constrain behavior. @@ -428,6 +483,11 @@ var canvas_events = (function() { } else { mod = (evt.shiftKey + (pdgui.cmd_or_ctrl_key(evt) << 1)); } + + //pdgui.post("X1: " + pointer_x.toString()); + //pdgui.post("Y1: " + pointer_y.toString()); + //move_canvas(pointer_x,pointer_y); + //is_canvas_panning = true; pdgui.pdsend(name, "mouse", (pointer_x + svg_view.x), (pointer_y + svg_view.y), @@ -463,6 +523,10 @@ var canvas_events = (function() { ); evt.stopPropagation(); evt.preventDefault(); + //pdgui.post("X2: " + pointer_x.toString()); + //pdgui.post("Y2: " + pointer_y.toString()); + //move_canvas(pointer_x,pointer_y); + //is_canvas_panning = false; }, keydown: function(evt) { pdgui.keydown(name, evt); @@ -974,6 +1038,19 @@ var canvas_events = (function() { } }); }, + patchsvg_scroll_click: function(e) { + //get mouse click origin coordinates + if (is_canvas_panning == false){ + pointer_origin_x = e.x; + pointer_origin_y = e.y; + } + + + + //toggle panning by clicking middle mouse button + is_canvas_panning = !is_canvas_panning; + pdgui.post("SCROLL CLICKED"); + }, text: function() { canvas_events.none(); add_events(document, { @@ -1154,6 +1231,10 @@ var canvas_events = (function() { document.getElementById("vscroll"). addEventListener("mousedown", canvas_events.vscroll_drag, false); + //add listener for the canvas - on middle mouse (scroll) click + document.getElementById("patchsvg"). + addEventListener("auxclick", canvas_events.patchsvg_scroll_click, false); + init_events(document, { "contextmenu": function(evt) { // Whoa-- huge workaround! Right now we're getting -- GitLab