Skip to content
GitLab
Commit 3c186b0b authored by Jonathan Wilkes's avatar Jonathan Wilkes
Browse files

another fix for displaying the grid properly at negative coords

parent b6509195
Hide whitespace changes
Inline Side-by-side
pd/nw/pdgui.js
View file @ 3c186b0b
......@@ -1405,12 +1405,47 @@ function menu_send(name) {
}
}
// Set the grid background position to adjust for the viewBox of the svg.
// We do this separately and before setting the background so we can call this
// when the scroll view needs to be adjusted.
function get_grid_coords(cid, svg_elem) {
var vbox = svg_elem.getAttribute("viewBox").split(" "),
dx = 0, dy = 0;
// First two values of viewBox are x-origin and y-origin. Pd allows
// negative coordinates-- for example, the user can drag an object at
// (0, 0) 12 pixels to the left to arrive at (-12, 0). To accommodate this
// with the svg backend, we would adjust the x-origin to be -12 so that
// the user can view it (possibly by scrolling). These adjustments are
// all handled with gui_canvas_get_scroll.
//
// For the background image css property, everything is based on
// CSS DOM positioning. CSS doesn't really know anything about the SVG
// viewport-- it only knows that an SVG element is of a certain size and
// (in our case) has its top-left corner at the top-left corner of the
// window. So when we change the viewBox to have negative origin indices,
// we have to adjust the origin of the grid in the opposite direction
// For example, if our new x-origin for the svg viewBox is -12, we make
// the x-origin for the background image "12px". This adjustment positions
// the grid *as if* if extended 12 more pixels to the left of its
// container.
if (vbox[0] < 0) {
dx = 0 - vbox[0];
}
if (vbox[1] < 0) {
dy = 0 - vbox[1];
}
return { x: dx, y: dy };
}
// Background for edit mode. Currently, we use a grid if snap-to-grid
// functionality is turned on in the GUI preferences. If not, we just use
// the same grid with a lower opacity. That way the edit mode is always
// visually distinct from run mode.
var create_editmode_background = function(grid, size) {
var head, body, tail, cell_data_str, opacity_str;
var create_editmode_bg = function(cid, svg_elem) {
var head, body, tail, cell_data_str, opacity_str, grid, size, pos;
grid = showgrid[cid];
size = gridsize[cid];
pos = get_grid_coords(cid, svg_elem);
// if snap-to-grid isn't turned on, just use cell size of 10 and make the
// grid partially transparent
size = grid ? size : 10;
......@@ -1428,7 +1463,7 @@ var create_editmode_background = function(grid, size) {
'd=', cell_data_str,'/>',
'</pattern>',
'<pattern id="grid" patternUnits="userSpaceOnUse" ',
'width="100" height="100">',
'width="100" height="100" x="', pos.x, '" y="', pos.y, '">',
'<rect width="100" height="100" fill="url(#cell)" />',
'<path fill="none" stroke="#bbb" stroke-width="1" ',
'd="M 100 0 L 0 0 0 100"/>',
......@@ -1440,49 +1475,25 @@ var create_editmode_background = function(grid, size) {
return "url('data:image/svg+xml;utf8," + head + body + tail + "')";
}
// Set the grid background position to adjust for the viewBox of the svg.
// We do this separately and before setting the background so we can call this
// when the scroll view needs to be adjusted.
function set_grid_position(cid, svg_elem) {
var vbox = svg_elem.getAttribute("viewBox").split(" "),
dx = 0, dy = 0;
// First two values of viewBox are x-origin and y-origin. Pd allows
// negative coordinates-- for example, the user can drag an object at
// (0, 0) 12 pixels to the left to arrive at (-12, 0). To accommodate this
// with the svg backend, we would adjust the x-origin to be -12 so that
// the user can view it (possibly by scrolling). These adjustments are
// all handled with gui_canvas_get_scroll.
//
// For the background image css property, everything is based on
// CSS DOM positioning. CSS doesn't really know anything about the SVG
// viewport-- it only knows that an SVG element is of a certain size and
// (in our case) has its top-left corner at the top-left corner of the
// window. So when we change the viewBox to have negative origin indices,
// we have to adjust the origin of the grid in the opposite direction
// For example, if our new x-origin for the svg viewBox is -12, we make
// the x-origin for the background image "12px". This adjustment positions
// the grid *as if* if extended 12 more pixels to the left of its
// container.
if (vbox[0] < 0) {
dx = 0 - vbox[0];
}
if (vbox[1] < 0) {
dy = 0 - vbox[1];
}
patchwin[cid].window.document.body.style
.setProperty("background-position",
dx + "px " + dy + "px");
}
function set_editmode_bg(cid, svg_elem, state)
{
// If we're setting the bg, figure out the correct offset first
if (state) {
set_grid_position(cid, svg_elem);
}
// if (state) {
// set_grid_position(cid, svg_elem);
// }
patchwin[cid].window.document.body.style.setProperty("background-image",
state ?
create_editmode_background(showgrid[cid], gridsize[cid]) : "none");
create_editmode_bg(cid, svg_elem) : "none");
}
function update_svg_background(cid, svg_elem) {
var bg = patchwin[cid].window.document.body.style
.getPropertyValue("background-image");
// Quick hack-- we just check whether the background has been drawn. If
// it has we assume we're in editmode.
if (bg !== "none") {
set_editmode_bg(cid, svg_elem, 1);
}
}
// requires nw.js API (Menuitem)
......@@ -6810,9 +6821,8 @@ function do_getscroll(cid, checkgeom) {
width: width,
height: height
});
// Now that we've updated the svg's viewBox, adjust the background
// position for the grid so it lines up properly with the patch.
set_grid_position(cid, svg_elem);
// Now update the svg's background if we're in edit mode
update_svg_background(cid, svg_elem);
});
}
......
Supports Markdown
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