From 1b6d982ea433b9f07ea63adc2e229c01da9993d5 Mon Sep 17 00:00:00 2001
From: Jonathan Wilkes <jon.w.wilkes@gmail.com>
Date: Wed, 14 Apr 2021 21:17:42 -0400
Subject: [PATCH] update svg grid background with preset changes, clean up css
a bit
---
pd/nw/css/c64.css | 29 ++++----
pd/nw/css/default.css | 35 +++++----
pd/nw/css/extended.css | 29 ++++----
pd/nw/css/footgun.css | 35 +++++----
pd/nw/css/inverted.css | 29 ++++----
pd/nw/css/solarized.css | 29 ++++----
pd/nw/css/solarized_inverted.css | 29 ++++----
pd/nw/css/strongbad.css | 29 ++++----
pd/nw/css/subdued.css | 31 ++++----
pd/nw/css/vanilla.css | 29 ++++----
pd/nw/css/vanilla_inverted.css | 29 ++++----
pd/nw/pd_canvas.html | 3 +-
pd/nw/pdgui.js | 120 +++++++++++++++----------------
13 files changed, 248 insertions(+), 208 deletions(-)
diff --git a/pd/nw/css/c64.css b/pd/nw/css/c64.css
index 14aaf9338..1fad04841 100644
--- a/pd/nw/css/c64.css
+++ b/pd/nw/css/c64.css
@@ -112,6 +112,21 @@ mark.console_find_highlighted {
background-color: #3e32a2;
}
+/* svg background image. We actually have to parse the CSS file and set
+ these manually in javascript, so don't change the selectors or remove
+ the props here... */
+#svg_cell {
+ stroke: #5347b5;
+}
+
+#svg_grid {
+ stroke: #6458c6;
+}
+
+#svg_fg {
+ fill: #bbb;
+}
+
#selection_rectangle {
stroke: #7c71da;
}
@@ -178,7 +193,6 @@ mark.console_find_highlighted {
padding: 1px 0px 3px 1.5px;
/* box-shadow: inset 1px 0px 0px 1px #000; */
color: #a49aea; /* text color */
- background-color: transparent;
white-space: pre-wrap;
overflow-wrap: break-word;
-webkit-margin-before: 0px;
@@ -186,21 +200,12 @@ mark.console_find_highlighted {
#new_object_textentry.obj {
outline: 1px solid #a49aea;
+ background-color: #3e32a2;
}
#new_object_textentry.msg {
outline: 0px solid #a49aea;
- background-image: url(../msg-box.svg);
-}
-
-p.msg::after {
- content: "";
- height: 100%;
- width: 5px;
- background-image: url(../msg-box-flag.svg);
- position: absolute;
- top: 0%;
- left: 100%;
+ background-color: transparent;
}
/* not sure what this is doing here... */
diff --git a/pd/nw/css/default.css b/pd/nw/css/default.css
index b0ce74f82..db0bf626c 100644
--- a/pd/nw/css/default.css
+++ b/pd/nw/css/default.css
@@ -225,6 +225,21 @@ mark.console_find_highlighted {
background-color: white;
}
+/* svg background image. We actually have to parse the CSS file and set
+ these manually in javascript, so don't change the selectors or remove
+ the props here... */
+#svg_cell {
+ stroke: #ddd;
+}
+
+#svg_grid {
+ stroke: #bbb;
+}
+
+#svg_fg {
+ fill: #bbb;
+}
+
#selection_rectangle {
stroke: #e87216;
}
@@ -294,7 +309,6 @@ mark.console_find_highlighted {
margin-left: 1px;
/* box-shadow: inset 1px 0px 0px 1px #000; */
color: black; /* text color */
- background-color: transparent;
white-space: pre-wrap;
overflow-wrap: break-word;
-webkit-margin-before: 0px;
@@ -302,27 +316,12 @@ mark.console_find_highlighted {
#new_object_textentry.obj {
outline: 2px solid #e87216;
+ background-color: white;
}
-/* We're dynamically creating the svg background data in javascript
- (in pdgui.js) so that we can change the stroke color of the svg msg box.
- We store the color as the third argument to "outline" below. Since the
- outline is 0px it won't show up-- this allows us specify the color here
- in the style sheet and retrieve it in javascript when we build the svg
- background. */
#new_object_textentry.msg {
outline: 0px solid #e87216;
- /* background-image: url(../msg-box.svg); */
-}
-
-p.msg::after {
- content: "";
- height: 100%;
- width: 5px;
- /* background-image: url(../msg-box-flag.svg); */
- position: absolute;
- top: 0%;
- left: 100%;
+ background-color: transparent;
}
/* not sure what this is doing here... */
diff --git a/pd/nw/css/extended.css b/pd/nw/css/extended.css
index aa3f50072..2df74176f 100644
--- a/pd/nw/css/extended.css
+++ b/pd/nw/css/extended.css
@@ -106,6 +106,21 @@ mark.console_find_highlighted {
font-family: "DejaVu Sans Mono";
}
+/* svg background image. We actually have to parse the CSS file and set
+ these manually in javascript, so don't change the selectors or remove
+ the props here... */
+#svg_cell {
+ stroke: #ddd;
+}
+
+#svg_grid {
+ stroke: #bbb;
+}
+
+#svg_fg {
+ fill: #bbb;
+}
+
#selection_rectangle {
stroke: black;
}
@@ -171,7 +186,6 @@ mark.console_find_highlighted {
display: table-cell;
padding: 1px 0px 3px 1.5px;
/* box-shadow: inset 1px 0px 0px 1px #000; */
- background-color: transparent;
white-space: pre-wrap;
overflow-wrap: break-word;
-webkit-margin-before: 0px;
@@ -179,21 +193,12 @@ mark.console_find_highlighted {
#new_object_textentry.obj {
outline: 1px solid blue;
+ background-color: #f8f8f6;
}
#new_object_textentry.msg {
outline: 0px solid blue;
- background-image: url(../msg-box.svg);
-}
-
-p.msg::after {
- content: "";
- height: 100%;
- width: 5px;
- background-image: url(../msg-box-flag.svg);
- position: absolute;
- top: 0%;
- left: 100%;
+ background-color: transparent;
}
/* not sure what this is doing here... */
diff --git a/pd/nw/css/footgun.css b/pd/nw/css/footgun.css
index e56b3ab6a..7accb701b 100644
--- a/pd/nw/css/footgun.css
+++ b/pd/nw/css/footgun.css
@@ -224,6 +224,21 @@ mark.console_find_highlighted {
background-color: white;
}
+/* svg background image. We actually have to parse the CSS file and set
+ these manually in javascript, so don't change the selectors or remove
+ the props here... */
+#svg_cell {
+ stroke: #ddd;
+}
+
+#svg_grid {
+ stroke: #bbb;
+}
+
+#svg_fg {
+ fill: #bbb;
+}
+
#selection_rectangle {
stroke: #e87216;
}
@@ -291,7 +306,6 @@ mark.console_find_highlighted {
padding: 1px 0px 3px 1.5px;
/* box-shadow: inset 1px 0px 0px 1px #000; */
color: black; /* text color */
- background-color: transparent;
white-space: pre-wrap;
overflow-wrap: break-word;
-webkit-margin-before: 0px;
@@ -299,27 +313,12 @@ mark.console_find_highlighted {
#new_object_textentry.obj {
outline: 1px solid #e87216;
+ background-color: #f8f8f6;
}
-/* We're dynamically creating the svg background data in javascript
- (in pdgui.js) so that we can change the stroke color of the svg msg box.
- We store the color as the third argument to "outline" below. Since the
- outline is 0px it won't show up-- this allows us specify the color here
- in the style sheet and retrieve it in javascript when we build the svg
- background. */
#new_object_textentry.msg {
outline: 0px solid #e87216;
- /* background-image: url(../msg-box.svg); */
-}
-
-p.msg::after {
- content: "";
- height: 100%;
- width: 5px;
- /* background-image: url(../msg-box-flag.svg); */
- position: absolute;
- top: 0%;
- left: 100%;
+ background-color: transparent;
}
/* not sure what this is doing here... */
diff --git a/pd/nw/css/inverted.css b/pd/nw/css/inverted.css
index 09fed7747..48b2013c3 100644
--- a/pd/nw/css/inverted.css
+++ b/pd/nw/css/inverted.css
@@ -121,6 +121,21 @@ mark.console_find_highlighted {
background-color: black;
}
+/* svg background image. We actually have to parse the CSS file and set
+ these manually in javascript, so don't change the selectors or remove
+ the props here... */
+#svg_cell {
+ stroke: #222;
+}
+
+#svg_grid {
+ stroke: #444;
+}
+
+#svg_fg {
+ fill: #bbb;
+}
+
#selection_rectangle {
stroke: white;
}
@@ -190,7 +205,6 @@ mark.console_find_highlighted {
padding: 1px 0px 3px 1.5px;
/* box-shadow: inset 1px 0px 0px 1px #000; */
color: white; /* text color */
- background-color: transparent;
white-space: pre-wrap;
overflow-wrap: break-word;
-webkit-margin-before: 0px;
@@ -198,21 +212,12 @@ mark.console_find_highlighted {
#new_object_textentry.obj {
outline: 1px solid #ffff00;
+ background-color: #090707;
}
#new_object_textentry.msg {
outline: 0px solid #ffff00;
- background-image: url(../msg-box.svg);
-}
-
-p.msg::after {
- content: "";
- height: 100%;
- width: 5px;
- background-image: url(../msg-box-flag.svg);
- position: absolute;
- top: 0%;
- left: 100%;
+ background-color: transparent;
}
/* not sure what this is doing here... */
diff --git a/pd/nw/css/solarized.css b/pd/nw/css/solarized.css
index 4ea3dc8ca..b33adee3f 100644
--- a/pd/nw/css/solarized.css
+++ b/pd/nw/css/solarized.css
@@ -115,6 +115,21 @@ mark.console_find_highlighted {
background-color: #fdf6e3;
}
+/* svg background image. We actually have to parse the CSS file and set
+ these manually in javascript, so don't change the selectors or remove
+ the props here... */
+#svg_cell {
+ stroke: #ddd;
+}
+
+#svg_grid {
+ stroke: #bbb;
+}
+
+#svg_fg {
+ fill: #bbb;
+}
+
#selection_rectangle {
stroke: #073642;
}
@@ -182,7 +197,6 @@ mark.console_find_highlighted {
display: table-cell;
padding: 1px 0px 3px 1.5px;
/* box-shadow: inset 1px 0px 0px 1px #000; */
- background-color: transparent;
white-space: pre-wrap;
overflow-wrap: break-word;
-webkit-margin-before: 0px;
@@ -191,21 +205,12 @@ mark.console_find_highlighted {
#new_object_textentry.obj {
outline: 1px solid #268bd2;
+ background-color: #fdf6e3;
}
#new_object_textentry.msg {
outline: 0px solid #268bd2;
- background-image: url(../msg-box.svg);
-}
-
-p.msg::after {
- content: "";
- height: 100%;
- width: 5px;
- background-image: url(../msg-box-flag.svg);
- position: absolute;
- top: 0%;
- left: 100%;
+ background-color: transparent;
}
/* not sure what this is doing here... */
diff --git a/pd/nw/css/solarized_inverted.css b/pd/nw/css/solarized_inverted.css
index e6862ce20..b851d772f 100644
--- a/pd/nw/css/solarized_inverted.css
+++ b/pd/nw/css/solarized_inverted.css
@@ -115,6 +115,21 @@ mark.console_find_highlighted {
background-color: #002b36;
}
+/* svg background image. We actually have to parse the CSS file and set
+ these manually in javascript, so don't change the selectors or remove
+ the props here... */
+#svg_cell {
+ stroke: #444;
+}
+
+#svg_grid {
+ stroke: #555;
+}
+
+#svg_fg {
+ fill: #bbb;
+}
+
#selection_rectangle {
stroke: #b58900;
}
@@ -182,7 +197,6 @@ mark.console_find_highlighted {
display: table-cell;
padding: 1px 0px 3px 1.5px;
/* box-shadow: inset 1px 0px 0px 1px #000; */
- background-color: transparent;
white-space: pre-wrap;
overflow-wrap: break-word;
-webkit-margin-before: 0px;
@@ -191,21 +205,12 @@ mark.console_find_highlighted {
#new_object_textentry.obj {
outline: 1px solid #b58900;
+ background-color: #002b36;
}
#new_object_textentry.msg {
outline: 0px solid #b58900;
- background-image: url(../msg-box.svg);
-}
-
-p.msg::after {
- content: "";
- height: 100%;
- width: 5px;
- background-image: url(../msg-box-flag.svg);
- position: absolute;
- top: 0%;
- left: 100%;
+ background-color: transparent;
}
/* not sure what this is doing here... */
diff --git a/pd/nw/css/strongbad.css b/pd/nw/css/strongbad.css
index cb4b4dc65..576be4aa1 100644
--- a/pd/nw/css/strongbad.css
+++ b/pd/nw/css/strongbad.css
@@ -112,6 +112,21 @@ mark.console_find_highlighted {
background-color: black;
}
+/* svg background image. We actually have to parse the CSS file and set
+ these manually in javascript, so don't change the selectors or remove
+ the props here... */
+#svg_cell {
+ stroke: #222;
+}
+
+#svg_grid {
+ stroke: #333;
+}
+
+#svg_fg {
+ fill: #bbb;
+}
+
#selection_rectangle {
stroke: #53b83b;
}
@@ -180,7 +195,6 @@ mark.console_find_highlighted {
padding: 1px 0px 3px 1.5px;
/* box-shadow: inset 1px 0px 0px 1px #000; */
color: #4bd046;
- background-color: transparent;
white-space: pre-wrap;
overflow-wrap: break-word;
-webkit-margin-before: 0px;
@@ -188,21 +202,12 @@ mark.console_find_highlighted {
#new_object_textentry.obj {
outline: 1px solid #0b560b;
+ background-color: black;
}
#new_object_textentry.msg {
outline: 0px solid #0b560b;
- background-image: url(../msg-box.svg);
-}
-
-p.msg::after {
- content: "";
- height: 100%;
- width: 5px;
- background-image: url(../msg-box-flag.svg);
- position: absolute;
- top: 0%;
- left: 100%;
+ background-color: transparent;
}
/* not sure what this is doing here... */
diff --git a/pd/nw/css/subdued.css b/pd/nw/css/subdued.css
index 4a4e06043..8642c1236 100644
--- a/pd/nw/css/subdued.css
+++ b/pd/nw/css/subdued.css
@@ -112,6 +112,21 @@ mark.console_find_highlighted {
background-color: #c0dcc0;
}
+/* svg background image. We actually have to parse the CSS file and set
+ these manually in javascript, so don't change the selectors or remove
+ the props here... */
+#svg_cell {
+ stroke: #bdc9bd;
+}
+
+#svg_grid {
+ stroke: #a6c1a6;
+}
+
+#svg_fg {
+ fill: #bbb;
+}
+
#selection_rectangle {
stroke: #333333;
}
@@ -179,7 +194,6 @@ mark.console_find_highlighted {
display: table-cell;
padding: 1px 0px 3px 1.5px;
/* box-shadow: inset 1px 0px 0px 1px #000; */
- background-color: transparent;
white-space: pre-wrap;
overflow-wrap: break-word;
-webkit-margin-before: 0px;
@@ -187,21 +201,12 @@ mark.console_find_highlighted {
#new_object_textentry.obj {
outline: 1px solid blue;
+ background-color: #c0dcc0;
}
#new_object_textentry.msg {
outline: 0px solid blue;
- background-image: url(../msg-box.svg);
-}
-
-p.msg::after {
- content: "";
- height: 100%;
- width: 5px;
- background-image: url(../msg-box-flag.svg);
- position: absolute;
- top: 0%;
- left: 100%;
+ background-color: transparent;
}
/* not sure what this is doing here... */
@@ -328,7 +333,7 @@ text {
/* for an object that didn't create */
.obj .border.broken_border {
- fill: transparent;
+ fill: #c0dcc0;
stroke: #f00;
stroke-dasharray: 3 2;
}
diff --git a/pd/nw/css/vanilla.css b/pd/nw/css/vanilla.css
index 0c8949df9..6c79b1332 100644
--- a/pd/nw/css/vanilla.css
+++ b/pd/nw/css/vanilla.css
@@ -106,6 +106,21 @@ mark.console_find_highlighted {
background-color: white;
}
+/* svg background image. We actually have to parse the CSS file and set
+ these manually in javascript, so don't change the selectors or remove
+ the props here... */
+#svg_cell {
+ stroke: #bdc9bd;
+}
+
+#svg_grid {
+ stroke: #a6c1a6;
+}
+
+#svg_fg {
+ fill: #bbb;
+}
+
#selection_rectangle {
stroke: black;
}
@@ -172,7 +187,6 @@ mark.console_find_highlighted {
display: table-cell;
padding: 1px 0px 3px 1.5px;
/* box-shadow: inset 1px 0px 0px 1px #000; */
- background-color: transparent;
white-space: pre-wrap;
overflow-wrap: break-word;
-webkit-margin-before: 0px;
@@ -180,21 +194,12 @@ mark.console_find_highlighted {
#new_object_textentry.obj {
outline: 1px solid blue;
+ background-color: transparent;
}
#new_object_textentry.msg {
outline: 0px solid blue;
- background-image: url(../msg-box.svg);
-}
-
-p.msg::after {
- content: "";
- height: 100%;
- width: 5px;
- background-image: url(../msg-box-flag.svg);
- position: absolute;
- top: 0%;
- left: 100%;
+ background-color: transparent;
}
/* not sure what this is doing here... */
diff --git a/pd/nw/css/vanilla_inverted.css b/pd/nw/css/vanilla_inverted.css
index faafae11a..f9df5f071 100644
--- a/pd/nw/css/vanilla_inverted.css
+++ b/pd/nw/css/vanilla_inverted.css
@@ -112,6 +112,21 @@ mark.console_find_highlighted {
background-color: black;
}
+/* svg background image. We actually have to parse the CSS file and set
+ these manually in javascript, so don't change the selectors or remove
+ the props here... */
+#svg_cell {
+ stroke: #222;
+}
+
+#svg_grid {
+ stroke: #444;
+}
+
+#svg_fg {
+ fill: #bbb;
+}
+
#selection_rectangle {
stroke: white;
}
@@ -183,7 +198,6 @@ mark.console_find_highlighted {
padding: 1px 0px 3px 1.5px;
/* box-shadow: inset 1px 0px 0px 1px #000; */
color: white; /* text color */
- background-color: transparent;
white-space: pre-wrap;
overflow-wrap: break-word;
-webkit-margin-before: 0px;
@@ -191,21 +205,12 @@ mark.console_find_highlighted {
#new_object_textentry.obj {
outline: 1px solid yellow;
+ background-color: transparent;
}
#new_object_textentry.msg {
outline: 0px solid yellow;
- background-image: url(../msg-box.svg);
-}
-
-p.msg::after {
- content: "";
- height: 100%;
- width: 5px;
- background-image: url(../msg-box-flag.svg);
- position: absolute;
- top: 0%;
- left: 100%;
+ background-color: transparent;
}
/* not sure what this is doing here... */
diff --git a/pd/nw/pd_canvas.html b/pd/nw/pd_canvas.html
index d04950e96..a86b57a31 100644
--- a/pd/nw/pd_canvas.html
+++ b/pd/nw/pd_canvas.html
@@ -3,8 +3,7 @@
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/dejavu.css">
- <link id="page_style" rel="stylesheet"
- type="text/css" href="css/default.css">
+ <link id="page_style" rel="stylesheet" type="text/css">
<title></title>
</head>
<body class="patch_body">
diff --git a/pd/nw/pdgui.js b/pd/nw/pdgui.js
index c1adc561e..ea331258e 100644
--- a/pd/nw/pdgui.js
+++ b/pd/nw/pdgui.js
@@ -1408,7 +1408,8 @@ function get_grid_coords(cid, svg_elem) {
function create_svg_lock(cid) {
var zoom = patchwin[cid].zoomLevel,
- size;
+ size,
+ col = bg_style.svg_fg;
// adjust for zoom level
size = 1 / Math.pow(1.2, zoom) * 24;
return "url('data:image/svg+xml;utf8," +
@@ -1417,7 +1418,7 @@ function create_svg_lock(cid) {
['height="', size, 'px"'].join(""),
'viewBox="0 0 486.866 486.866"',
'>',
- '<path fill="#bbb" d="',
+ '<path fill="', col,'" 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,',
@@ -1444,57 +1445,20 @@ function create_svg_lock(cid) {
// 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 data, cell_data_str, opacity_str, grid, size, pos,
- cc, // cell color
- gc; // grid color
- grid = showgrid[cid];
+var create_svg_grid = function(cid, svg_elem) {
+ var data, cell_data_str, grid, size, pos,
+ cc = bg_style.svg_cell, // cell color
+ gc = bg_style.svg_grid; // grid color
size = gridsize[cid];
pos = get_grid_coords(cid, svg_elem);
- // Annoying crap because SVG img data can't
- // call into an external style sheet...
- switch(skin.get()) {
- case "default":
- case "footgun":
- case "vanilla":
- case "extended":
- case "solarized":
- cc = "#ddd";
- gc = "#bbb";
- break;
- case "inverted":
- case "vanilla_inverted":
- case "extended_inverted":
- cc = "#222";
- gc = "#444";
- break;
- case "c64":
- cc = "#5347b5";
- gc = "#6458c6";
- break;
- case "strongbad":
- cc = "#222";
- gc = "#333";
- break;
- case "subdued":
- cc = "#bdc9bd";
- gc = "#a6c1a6";
- break;
- case "solarized_inverted":
- cc = "#444";
- gc = "#555";
- break;
- }
// if snap-to-grid isn't turned on, just use cell size of 10 and make the
// grid partially transparent
- size = grid ? size : 10;
- opacity_str = '"' + (grid ? 1 : 0.4) + '"';
cell_data_str = ['"', "M", size, 0, "L", 0, 0, 0, size, '"'].join(" ");
data = ['<svg xmlns="http://www.w3.org/2000/svg" ',
'width="1000" height="1000" ',
- 'opacity=', opacity_str, '>',
+ 'opacity="1">',
'<defs>',
'<pattern id="cell" patternUnits="userSpaceOnUse" ',
'width="', size, '" height="', size, '">',
@@ -1529,7 +1493,7 @@ function set_editmode_bg(cid, svg_elem, 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");
+ set_bg(cid, create_svg_grid(cid, svg_elem), "0% 0%", "repeat");
} else {
// Otherwise show a little lock in the top right corner of the patch
// adjusting for zoom level
@@ -1857,6 +1821,7 @@ var scroll = {},
doscroll = {},
showgrid = {},
gridsize = {},
+ bg_style = {},
last_loaded, // last loaded canvas
last_focused, // last focused canvas (doesn't include Pd window or dialogs)
loading = {},
@@ -6360,14 +6325,56 @@ function gui_lib_properties(dummy, defeat_rt, flag_string, lib_array) {
}
}
+function set_bg_style(w) {
+ // grid stroke
+ bg_style.svg_grid = get_style_by_selector(w, "#svg_grid").stroke;
+ // cell stroke
+ bg_style.svg_cell = get_style_by_selector(w, "#svg_cell").stroke;
+ // color for the little "lock" icon
+ bg_style.svg_fg = get_style_by_selector(w, "#svg_fg").fill;
+ return true;
+}
+
// Let's try a closure for gui skins
var skin = exports.skin = (function () {
var dir = "css/";
var preset = "default";
var id;
- function set_css(win) {
- win.document.getElementById("page_style")
- .setAttribute("href", dir + preset + ".css");
+ function set_css(win, cid) {
+ // Workaround for a workaround. We must parse the stylesheet to
+ // retrieve the styles to use for our background svg image. But
+ // when we change the href for the relevant link element,
+ // the new styles are loaded asynchronously. HTML5 apparently has
+ // no event associated with reloading a resource, so we can't
+ // know when it's safe to parse the sheet.
+
+ // Thus, we create a new link element and replace the old
+ // link element with it. This allows us to use the onload callback
+ // for the new link element and call set_bg_style from there to
+ // parse the sheet for our background svg styles.
+ var old_style = win.document.getElementById("page_style"),
+ new_style = win.document.createElement("link"),
+ head = win.document.querySelector("head");
+
+ new_style.setAttribute("rel", "stylesheet");
+ new_style.setAttribute("type", "text/css");
+ new_style.id = "page_style";
+ new_style.onload = function() {
+ // now that we've loaded the new style, do the
+ // hack to fetch the styles needed for our svg
+ // background image
+ set_bg_style(win.window);
+ // if we're just applying the skin when rendering a window,
+ // we don't have a cid yet so skip this
+ if (cid) {
+ update_svg_background(cid, win.window.document
+ .getElementById("patchsvg"));
+ }
+ };
+ new_style.setAttribute("href", dir + preset + ".css");
+ // now switch out the sheets. Seems we get flickering
+ // no matter what. Oh well...
+ head.replaceChild(new_style, old_style);
}
return {
debug: function () {
@@ -6386,7 +6393,7 @@ var skin = exports.skin = (function () {
}
for (id in patchwin) {
if (patchwin.hasOwnProperty(id) && patchwin[id]) {
- set_css(patchwin[id].window);
+ set_css(patchwin[id].window, id);
}
}
// hack for the console
@@ -6394,6 +6401,8 @@ var skin = exports.skin = (function () {
.setAttribute("href", dir + preset + ".css");
},
apply: function (win) {
+ // go ahead and grab the cid so we can use it to set
+ // the svg background
set_css(win);
}
};
@@ -6574,22 +6583,11 @@ function gui_textarea(cid, tag, type, x, y, width_spec, height_spec, text,
p.classList.add(type);
p.contentEditable = "true";
- if (is_gop == 0) {
- // do we need to assign here color from the css theme instead?
- p.style.setProperty("background-color", "#f6f8f8");
- } else {
+ if (is_gop != 0) {
// ico@vt.edu: added tweaks to ensure the GOP selection
// border is near identical to that of its regular border
p.style.setProperty("min-height", height_spec - 7 + "px");
p.style.setProperty("padding-left", "2px");
- /* ico@vt.edu:
- should the graph be transparent or opaque? legacy compatibility
- suggests it should be transparent, although that may go against
- common sense UI design. Perhaps we can make this an option? If
- so, we could do so here. Better yet, we could capture background
- color of the subpatcher and use it to apply the same color here.
- p.style.setProperty("background-color", "white");
- */
}
p.style.setProperty("left", (x - svg_view.x + textarea_x_offset_kludge(font_size, zoom)) + "px");
--
GitLab