another fix for displaying the grid properly at negative coords

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);
     });
 }