diff --git a/pd/nw/pdgui.js b/pd/nw/pdgui.js
index 5b9a1176f6da967749cdc7b53a9117430f604988..3fbd472b0754f8c65e66bb053bab38a25e47ce69 100644
--- a/pd/nw/pdgui.js
+++ b/pd/nw/pdgui.js
@@ -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);
});
}