From 99beb1341dee75ff5bc1dc20f62121e1a2108924 Mon Sep 17 00:00:00 2001
From: Jonathan Wilkes <jon.w.wilkes@gmail.com>
Date: Sun, 27 Nov 2016 16:15:20 -0500
Subject: [PATCH] fix #172: Use border styles for the iemgui label anchors, and
the gop_rectangle color for the gop move anchor
---
pd/nw/css/c64.css | 2 +-
pd/nw/css/default.css | 2 +-
pd/nw/css/extended.css | 2 +-
pd/nw/css/inverted.css | 2 +-
pd/nw/css/strongbad.css | 2 +-
pd/nw/css/subdued.css | 2 +-
pd/nw/css/vanilla.css | 2 +-
pd/nw/css/vanilla_inverted.css | 2 +-
pd/nw/pd_canvas.js | 9 +++++++--
pd/nw/pdgui.js | 34 +++++++++++++++++++++++++---------
10 files changed, 40 insertions(+), 19 deletions(-)
diff --git a/pd/nw/css/c64.css b/pd/nw/css/c64.css
index 5262ad94c..9bdac3901 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 d23dc2276..0b1512112 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 c69d652c6..29d131436 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 8f6df8377..32d15fcb4 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 e48386987..d2c1b49cc 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 595a3520b..a0f24518d 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 9b9ce74e9..7872df055 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 81914607d..3b5591a17 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 a20d821fd..d90f8c5b8 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 81fb709b1..952188a80 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,
--
GitLab