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

another fix for displaying the grid properly at negative coords

parent b6509195
Pipeline #3020 failed with stage
in 397 minutes and 48 seconds
......@@ -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);
});
}
......
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