From c64decd80c05c5185428e14b272fb4d01af053e0 Mon Sep 17 00:00:00 2001
From: Jonathan Wilkes <jon.w.wilkes@gmail.com>
Date: Tue, 29 Dec 2020 17:27:36 -0500
Subject: [PATCH] use a simple svg lock image when snap-to-grid is disabled,
encode SVGs per spec
---
pd/nw/pdgui.js | 91 +++++++++++++++++++++++++++++++++++++-------------
1 file changed, 67 insertions(+), 24 deletions(-)
diff --git a/pd/nw/pdgui.js b/pd/nw/pdgui.js
index 9a3685d09..d5e43e841 100644
--- a/pd/nw/pdgui.js
+++ b/pd/nw/pdgui.js
@@ -1437,12 +1437,42 @@ function get_grid_coords(cid, svg_elem) {
return { x: dx, y: dy };
}
+function create_svg_lock() {
+ return "url('data:image/svg+xml;utf8," +
+ encodeURIComponent(['<svg xmlns="http://www.w3.org/2000/svg"',
+ 'width="24px"',
+ 'height="24px"',
+ 'viewBox="0 0 486.866 486.866"',
+ '>',
+ '<path fill="#bbb" d="',
+ 'M393.904,214.852h-8.891v-72.198c0-76.962-61.075-141.253',
+ '-137.411-142.625c-2.084-0.038-6.254-0.038-8.338,0',
+ 'C162.927,1.4,101.853,65.691,101.853,142.653v1.603c0,16.182,',
+ '13.118,29.3,29.3,29.3c16.182,0,29.299-13.118,29.299-29.3',
+ 'v-1.603',
+ 'c0-45.845,37.257-83.752,82.98-83.752s82.981,37.907,82.981,',
+ '83.752v72.198H92.963c-13.702,0-24.878,14.139-24.878,',
+ '31.602v208.701',
+ 'c0,17.44,11.176,31.712,24.878,31.712h300.941c13.703,0,',
+ '24.878-14.271,24.878-31.712V246.452',
+ 'C418.783,228.989,407.607,214.852,393.904,214.852z M271.627,',
+ '350.591v63.062c0,7.222-6.046,13.332-13.273,13.332h-29.841',
+ 'c-7.228,0-13.273-6.11-13.273-13.332v-63.062c-7.009-6.9-11.09',
+ '-16.44-11.09-26.993c0-19.999,15.459-37.185,35.115-37.977',
+ 'c2.083-0.085,6.255-0.085,8.337,0c19.656,0.792,35.115,17.978,',
+ '35.115,37.977C282.717,334.149,278.637,343.69,271.627,350.591z',
+ '"/>',
+ '</svg>',
+ "')",
+ ].join(" "));
+}
+
// 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_bg = function(cid, svg_elem) {
- var head, body, tail, cell_data_str, opacity_str, grid, size, pos;
+ var data, cell_data_str, opacity_str, grid, size, pos;
grid = showgrid[cid];
size = gridsize[cid];
pos = get_grid_coords(cid, svg_elem);
@@ -1452,34 +1482,47 @@ var create_editmode_bg = function(cid, svg_elem) {
opacity_str = '"' + (grid ? 1 : 0.4) + '"';
cell_data_str = ['"', "M", size, 0, "L", 0, 0, 0, size, '"'].join(" ");
- head = ['<svg xmlns="http://www.w3.org/2000/svg" ',
+ data = ['<svg xmlns="http://www.w3.org/2000/svg" ',
'width="1000" height="1000" ',
- 'opacity=', opacity_str, '>']
- .join("");
- body = ['<defs>',
- '<pattern id="cell" patternUnits="userSpaceOnUse" ',
- 'width="', size, '" height="', size, '">',
- '<path fill="none" stroke="#ddd" stroke-width="1" ',
- 'd=', cell_data_str,'/>',
- '</pattern>',
- '<pattern id="grid" patternUnits="userSpaceOnUse" ',
- 'width="100" height="100" x="', pos.x, '" y="', pos.y, '">',
- '<rect width="500" height="500" fill="url(#cell)" />',
- '<path fill="none" stroke="#bbb" stroke-width="1" ',
- 'd="M 500 0 L 0 0 0 500"/>',
- '</pattern>',
- '</defs>',
- '<rect width="1000" height="1000" fill="url(#grid)" />'
- ].join("");
- tail = '</svg>';
- return "url('data:image/svg+xml;utf8," + head + body + tail + "')";
+ 'opacity=', opacity_str, '>',
+ '<defs>',
+ '<pattern id="cell" patternUnits="userSpaceOnUse" ',
+ 'width="', size, '" height="', size, '">',
+ '<path fill="none" stroke="#ddd" stroke-width="1" ',
+ 'd=', cell_data_str,'/>',
+ '</pattern>',
+ '<pattern id="grid" patternUnits="userSpaceOnUse" ',
+ 'width="100" height="100" x="', pos.x, '" y="', pos.y, '">',
+ '<rect width="500" height="500" fill="url(#cell)" />',
+ '<path fill="none" stroke="#bbb" stroke-width="1" ',
+ 'd="M 500 0 L 0 0 0 500"/>',
+ '</pattern>',
+ '</defs>',
+ '<rect width="1000" height="1000" fill="url(#grid)" />',
+ '</svg>'
+ ].join(" ");
+ // make sure to encode the data so we obey all the rules with our data URL
+ return "url('data:image/svg+xml;utf8," + encodeURIComponent(data) + "')";
+}
+
+function set_bg(cid, data_url, bg_pos, repeat) {
+ var style = patchwin[cid].window.document.body.style;
+ style.setProperty("background-image", data_url);
+ style.setProperty("background-position", bg_pos);
+ style.setProperty("background-repeat", repeat);
}
function set_editmode_bg(cid, svg_elem, state)
{
- patchwin[cid].window.document.body.style.setProperty("background-image",
- state ?
- create_editmode_bg(cid, svg_elem) : "none");
+ if (!state) {
+ set_bg(cid, "none", "0% 0%", "repeat");
+ } else if (showgrid[cid]) {
+ // Show a grid in editmode if we're snapping to grid
+ set_bg(cid, create_editmode_bg(cid, svg_elem), "0% 0%", "repeat");
+ } else {
+ // Otherwise show a little lock in the top right corner of the patch
+ set_bg(cid, create_svg_lock(), "right 5px top 5px", "no-repeat");
+ }
}
function update_svg_background(cid, svg_elem) {
--
GitLab