Commit 3c186b0b authored by Jonathan Wilkes's avatar Jonathan Wilkes
Browse files

another fix for displaying the grid properly at negative coords

parent b6509195
...@@ -1405,12 +1405,47 @@ function menu_send(name) { ...@@ -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 // 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 // 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 // the same grid with a lower opacity. That way the edit mode is always
// visually distinct from run mode. // visually distinct from run mode.
var create_editmode_background = function(grid, size) { var create_editmode_bg = function(cid, svg_elem) {
var head, body, tail, cell_data_str, opacity_str; 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 // if snap-to-grid isn't turned on, just use cell size of 10 and make the
// grid partially transparent // grid partially transparent
size = grid ? size : 10; size = grid ? size : 10;
...@@ -1428,7 +1463,7 @@ var create_editmode_background = function(grid, size) { ...@@ -1428,7 +1463,7 @@ var create_editmode_background = function(grid, size) {
'd=', cell_data_str,'/>', 'd=', cell_data_str,'/>',
'</pattern>', '</pattern>',
'<pattern id="grid" patternUnits="userSpaceOnUse" ', '<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)" />', '<rect width="100" height="100" fill="url(#cell)" />',
'<path fill="none" stroke="#bbb" stroke-width="1" ', '<path fill="none" stroke="#bbb" stroke-width="1" ',
'd="M 100 0 L 0 0 0 100"/>', 'd="M 100 0 L 0 0 0 100"/>',
...@@ -1440,49 +1475,25 @@ var create_editmode_background = function(grid, size) { ...@@ -1440,49 +1475,25 @@ var create_editmode_background = function(grid, size) {
return "url('data:image/svg+xml;utf8," + head + body + tail + "')"; 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) function set_editmode_bg(cid, svg_elem, state)
{ {
// If we're setting the bg, figure out the correct offset first // If we're setting the bg, figure out the correct offset first
if (state) { // if (state) {
set_grid_position(cid, svg_elem); // set_grid_position(cid, svg_elem);
} // }
patchwin[cid].window.document.body.style.setProperty("background-image", patchwin[cid].window.document.body.style.setProperty("background-image",
state ? 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) // requires nw.js API (Menuitem)
...@@ -6810,9 +6821,8 @@ function do_getscroll(cid, checkgeom) { ...@@ -6810,9 +6821,8 @@ function do_getscroll(cid, checkgeom) {
width: width, width: width,
height: height height: height
}); });
// Now that we've updated the svg's viewBox, adjust the background // Now update the svg's background if we're in edit mode
// position for the grid so it lines up properly with the patch. update_svg_background(cid, svg_elem);
set_grid_position(cid, svg_elem);
}); });
} }
......
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