diff --git a/pd/nw/css/c64.css b/pd/nw/css/c64.css
index 5262ad94cd67dc6688f645ae559e0a265a33d996..9bdac39019d1758490210815e33bc76e68b0ab46 100644
--- a/pd/nw/css/c64.css
+++ b/pd/nw/css/c64.css
@@ -107,7 +107,7 @@ mark.console_find_highlighted {
/* The outline to show the visible area for a Graph-On-Parent canvas,
i.e., the "red rectangle" */
-#gop_rect {
+.gop_rect {
fill: none;
stroke: #ff9933;
}
diff --git a/pd/nw/css/default.css b/pd/nw/css/default.css
index d23dc22766ea255ab50ebf4901788b7b4ca7ce6a..0b1512112a3eb291f44c82099357c991fad89a26 100644
--- a/pd/nw/css/default.css
+++ b/pd/nw/css/default.css
@@ -213,7 +213,7 @@ mark.console_find_highlighted {
/* The outline to show the visible area for a Graph-On-Parent canvas,
i.e., the "red rectangle" */
-#gop_rect {
+.gop_rect {
fill: none;
stroke: red;
}
diff --git a/pd/nw/css/extended.css b/pd/nw/css/extended.css
index c69d652c6a56cdb41deac0587fa39e450958600f..29d131436d0d1660f72e3846f88bb72677eb76ce 100644
--- a/pd/nw/css/extended.css
+++ b/pd/nw/css/extended.css
@@ -101,7 +101,7 @@ mark.console_find_highlighted {
/* The outline to show the visible area for a Graph-On-Parent canvas,
i.e., the "red rectangle" */
-#gop_rect {
+.gop_rect {
fill: none;
stroke: red;
}
diff --git a/pd/nw/css/inverted.css b/pd/nw/css/inverted.css
index 8f6df83771f14a620af7b37540592d8af8a6efff..32d15fcb46a3ad62d62cff7b6db8d3470ebaf13a 100644
--- a/pd/nw/css/inverted.css
+++ b/pd/nw/css/inverted.css
@@ -116,7 +116,7 @@ mark.console_find_highlighted {
/* The outline to show the visible area for a Graph-On-Parent canvas,
i.e., the "red rectangle" */
-#gop_rect {
+.gop_rect {
fill: none;
stroke: blue;
stroke-opacity: 0.8;
diff --git a/pd/nw/css/strongbad.css b/pd/nw/css/strongbad.css
index e483869874df7f92f270615d8d24eda834324497..d2c1b49cc5d6650f984e396ff328263b776ce14a 100644
--- a/pd/nw/css/strongbad.css
+++ b/pd/nw/css/strongbad.css
@@ -107,7 +107,7 @@ mark.console_find_highlighted {
/* The outline to show the visible area for a Graph-On-Parent canvas,
i.e., the "red rectangle" */
-#gop_rect {
+.gop_rect {
fill: none;
stroke: red;
stroke-opacity: 0.6;
diff --git a/pd/nw/css/subdued.css b/pd/nw/css/subdued.css
index 595a3520b1e16831d13f8f599ff856c440246e79..a0f24518d18430c38ca3cca2ed1ef087eddc2f88 100644
--- a/pd/nw/css/subdued.css
+++ b/pd/nw/css/subdued.css
@@ -107,7 +107,7 @@ mark.console_find_highlighted {
/* The outline to show the visible area for a Graph-On-Parent canvas,
i.e., the "red rectangle" */
-#gop_rect {
+.gop_rect {
fill: none;
stroke: blue;
stroke-opacity: 0.4;
diff --git a/pd/nw/css/vanilla.css b/pd/nw/css/vanilla.css
index 9b9ce74e9ba2adc19b1cbaabc1f9940a59426658..7872df055ebd8e62307aec32ddecb5e8f2eebb1f 100644
--- a/pd/nw/css/vanilla.css
+++ b/pd/nw/css/vanilla.css
@@ -101,7 +101,7 @@ mark.console_find_highlighted {
/* The outline to show the visible area for a Graph-On-Parent canvas,
i.e., the "red rectangle" */
-#gop_rect {
+.gop_rect {
fill: none;
stroke: red;
}
diff --git a/pd/nw/css/vanilla_inverted.css b/pd/nw/css/vanilla_inverted.css
index 81914607d7d1a1e3aaf27ae1abb218027863da49..3b5591a17c2a5ccdc926d00a24b4ff5faefdbe74 100644
--- a/pd/nw/css/vanilla_inverted.css
+++ b/pd/nw/css/vanilla_inverted.css
@@ -107,7 +107,7 @@ mark.console_find_highlighted {
/* The outline to show the visible area for a Graph-On-Parent canvas,
i.e., the "red rectangle" */
-#gop_rect {
+.gop_rect {
fill: none;
stroke: blue;
stroke-opacity: 0.8;
diff --git a/pd/nw/pd_canvas.js b/pd/nw/pd_canvas.js
index a20d821fdce700dc2d4e66e96491c401cea37963..d90f8c5b874762db7a7ee96d6bcb7595086fab97 100644
--- a/pd/nw/pd_canvas.js
+++ b/pd/nw/pd_canvas.js
@@ -420,8 +420,13 @@ var canvas_events = (function() {
last_draggable_y = evt.pageY + svg_view.y;
if (!is_canvas_gop_rect) {
- handle_elem.x.baseVal.value += dx;
- handle_elem.y.baseVal.value += dy;
+ // This is bad-- we should be translating
+ // here so that the logic doesn't depend on the shape
+ // type we chose in pdgui (here, it's "line").
+ handle_elem.x1.baseVal.value += dx;
+ handle_elem.y1.baseVal.value += dy;
+ handle_elem.x2.baseVal.value += dx;
+ handle_elem.y2.baseVal.value += dy;
}
pdgui.pdsend(target_id, "_motion",
diff --git a/pd/nw/pdgui.js b/pd/nw/pdgui.js
index 81fb709b15a338831ee6b049a33c9633be4eebe4..952188a8072ada3bee44f5e7c1632fafe358004a 100644
--- a/pd/nw/pdgui.js
+++ b/pd/nw/pdgui.js
@@ -2834,13 +2834,20 @@ function gui_iemgui_label_show_drag_handle(cid, tag, state, x, y, cnv_resize) {
var gobj = get_gobj(cid, tag),
rect;
if (state !== 0) {
- rect = create_item(cid, "rect", {
- x: x - 4,
- y: y + 3,
- width: 7,
- height: 7,
- class: (cid === tag) ? "gop_drag_handle" :
- cnv_resize !== 0 ? "cnv_resize_handle" : "label_drag_handle"
+ // Here we use a "line" shape so that we can control its color
+ // using the "border" class (for iemguis) or the "gop_rect" class
+ // for the graph-on-parent rectangle anchor. In both cases the styles
+ // set a stroke property, and a single thick line is easier to define
+ // than a "rect" for that case.
+ rect = create_item(cid, "line", {
+ x1: x,
+ y1: y + 3,
+ x2: x,
+ y2: y + 10,
+ "stroke-width": 7,
+ class: (cid === tag) ? "gop_drag_handle gop_rect" :
+ cnv_resize !== 0 ? "cnv_resize_handle border" :
+ "label_drag_handle border"
});
rect.classList.add("clickable_resize_handle");
gobj.appendChild(rect);
@@ -2872,8 +2879,17 @@ function gui_mycanvas_new(cid,tag,color,x1,y1,x2_vis,y2_vis,x2,y2) {
}
);
- // we use a drag_handle-- unlike a 'border' it takes
- // the same color as the visible rectangle when deselected
+ // we use a drag_handle, which is square outline with transparent fill
+ // that shows the part of the rectangle that may be dragged in editmode.
+ // Clicking the rectangle outside of that square will have no effect.
+ // Unlike a 'border' it takes the same color as the visible rectangle when
+ // deselected.
+ // I'm not sure why it was decided to define this object's bbox separate
+ // from the visual rectangle. That causes all kinds of usability problems.
+ // For just one example, it means we can't simply use the "resize" cursor
+ // like all the other iemguis.
+ // Unfortunately its ingrained as a core object in Pd, so we have to
+ // support it here.
rect = create_item(cid, "rect", {
width: x2 - x1,
height: y2 - y1,