Commit 66bdae9e authored by Rukshan Senanayaka's avatar Rukshan Senanayaka
Browse files

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.
parent adbdc1b6
Pipeline #3548 failed with stage
in 0 seconds
......@@ -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
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment