From 66b7a814ea4f628232624e66d4d9cc6ced504597 Mon Sep 17 00:00:00 2001
From: Jonathan Wilkes <jon.w.wilkes@gmail.com>
Date: Sat, 30 Jan 2016 19:29:10 -0500
Subject: [PATCH] revert back to css inlet hover animation, and customize the
animation for each style (still needs more work, though)
---
pd/nw/css/c64.css | 9 ++++-----
pd/nw/css/default.css | 11 ++++++-----
pd/nw/css/extended.css | 5 ++---
pd/nw/css/inverted.css | 5 ++---
pd/nw/css/strongbad.css | 17 ++++++++---------
pd/nw/css/subdued.css | 5 ++---
pd/nw/css/vanilla.css | 3 +--
pd/nw/css/vanilla_inverted.css | 13 +++----------
pd/nw/pdgui.js | 17 -----------------
9 files changed, 28 insertions(+), 57 deletions(-)
diff --git a/pd/nw/css/c64.css b/pd/nw/css/c64.css
index 48b647a93..d31bbbc45 100644
--- a/pd/nw/css/c64.css
+++ b/pd/nw/css/c64.css
@@ -117,7 +117,7 @@ mark.console_find_highlighted {
/* selected connection between objects */
.cord.signal.selected_line,
.cord.control.selected_line {
- stroke: blue;
+ stroke: #cc9933;
}
#cord_inspector_rect {
@@ -217,7 +217,7 @@ text {
stroke: #7569d7;
}
-/* A little hack for special canvas of [cnv].
+/* A little hack for special case of [cnv].
All other iemguis have a black border, but
[cnv] sets its selection rectangle to the
user-supplied fill color when the object
@@ -296,14 +296,12 @@ text {
0% {
stroke-width: 1;
stroke-opacity: 1;
- x: 0;
rx: 1;
ry: 1;
}
100% {
stroke-width: 20;
stroke-opacity: 0.2;
- x: 100;
rx: 50;
ry: 50;
}
@@ -311,7 +309,8 @@ text {
/* can't remember why this was tagged !important */
.xlet_selected {
- stroke: purple !important;
+ stroke: #cc9933 !important;
+ fill: #7569d7;
-webkit-animation: fizzle 0.5s linear 1;
}
diff --git a/pd/nw/css/default.css b/pd/nw/css/default.css
index acc1bf507..80a4e3bc8 100644
--- a/pd/nw/css/default.css
+++ b/pd/nw/css/default.css
@@ -299,19 +299,19 @@ text {
/* test of xlet hover animation... this should
probably use the web animation API instead. That
way the animation won't get cut off when you
- move off the object */
+ move off the object. We can't do that currently
+ because Pd just floods us with pairs of messages
+ for every pixel we move inside an xlet. */
@-webkit-keyframes fizzle {
0% {
stroke-width: 1;
stroke-opacity: 1;
- x: 0;
rx: 1;
ry: 1;
}
100% {
stroke-width: 20;
stroke-opacity: 0.2;
- x: 100;
rx: 50;
ry: 50;
}
@@ -319,8 +319,9 @@ text {
/* can't remember why this was tagged !important */
.xlet_selected {
- stroke: purple !important;
- -webkit-animation: fizzle 0.5s linear 1;
+ stroke: orange !important;
+ fill: orange;
+ -webkit-animation: fizzle 0.4s linear 1;
}
#canvas_find {
diff --git a/pd/nw/css/extended.css b/pd/nw/css/extended.css
index 90a0fea98..65d924ac1 100644
--- a/pd/nw/css/extended.css
+++ b/pd/nw/css/extended.css
@@ -289,14 +289,12 @@ text {
0% {
stroke-width: 1;
stroke-opacity: 1;
- x: 0;
rx: 1;
ry: 1;
}
100% {
stroke-width: 20;
stroke-opacity: 0.2;
- x: 100;
rx: 50;
ry: 50;
}
@@ -304,7 +302,8 @@ text {
/* can't remember why this was tagged !important */
.xlet_selected {
- stroke: purple !important;
+ stroke: blue !important;
+ fill: blue;
-webkit-animation: fizzle 0.5s linear 1;
}
diff --git a/pd/nw/css/inverted.css b/pd/nw/css/inverted.css
index 6deba9f69..13d83a79b 100644
--- a/pd/nw/css/inverted.css
+++ b/pd/nw/css/inverted.css
@@ -308,14 +308,12 @@ text {
0% {
stroke-width: 1;
stroke-opacity: 1;
- x: 0;
rx: 1;
ry: 1;
}
100% {
stroke-width: 20;
stroke-opacity: 0.2;
- x: 100;
rx: 50;
ry: 50;
}
@@ -323,7 +321,8 @@ text {
/* can't remember why this was tagged !important */
.xlet_selected {
- stroke: purple !important;
+ stroke: blue !important;
+ fill: blue;
-webkit-animation: fizzle 0.5s linear 1;
}
diff --git a/pd/nw/css/strongbad.css b/pd/nw/css/strongbad.css
index 418f5aeea..49c5b602c 100644
--- a/pd/nw/css/strongbad.css
+++ b/pd/nw/css/strongbad.css
@@ -107,18 +107,18 @@ mark.console_find_highlighted {
.cord.signal {
stroke-width: 2;
- stroke: #53b83b;
+ stroke: green;
}
.cord.control {
stroke-width: 1;
- stroke: #53b83b;
+ stroke: green;
}
/* selected connection between objects */
.cord.signal.selected_line,
.cord.control.selected_line {
- stroke: blue;
+ stroke: #53b83b;
}
#cord_inspector_rect {
@@ -266,21 +266,21 @@ text {
/* control inlet */
.xlet_control {
- stroke: #53b83b;
+ stroke: green;
fill: #53b83b;
// stroke-width: 1;
}
/* signal inlet */
.xlet_signal {
- stroke: #53b83b;
+ stroke: green;
fill: #53b83b;
stroke-width: 1;
}
/* iemgui inlet or outlet */
.xlet_iemgui {
- stroke: #0b560b;
+ stroke: green;
fill: #0b560b;
stroke-width: 1;
}
@@ -298,14 +298,12 @@ text {
0% {
stroke-width: 1;
stroke-opacity: 1;
- x: 0;
rx: 1;
ry: 1;
}
100% {
stroke-width: 20;
stroke-opacity: 0.2;
- x: 100;
rx: 50;
ry: 50;
}
@@ -313,7 +311,8 @@ text {
/* can't remember why this was tagged !important */
.xlet_selected {
- stroke: purple !important;
+ stroke: #53b83b !important;
+ fill: green;
-webkit-animation: fizzle 0.5s linear 1;
}
diff --git a/pd/nw/css/subdued.css b/pd/nw/css/subdued.css
index 698b24a29..4b499cdbc 100644
--- a/pd/nw/css/subdued.css
+++ b/pd/nw/css/subdued.css
@@ -297,14 +297,12 @@ text {
0% {
stroke-width: 1;
stroke-opacity: 1;
- x: 0;
rx: 1;
ry: 1;
}
100% {
stroke-width: 20;
stroke-opacity: 0.2;
- x: 100;
rx: 50;
ry: 50;
}
@@ -312,7 +310,8 @@ text {
/* can't remember why this was tagged !important */
.xlet_selected {
- stroke: purple !important;
+ stroke: gray !important;
+ fill: gray;
-webkit-animation: fizzle 0.5s linear 1;
}
diff --git a/pd/nw/css/vanilla.css b/pd/nw/css/vanilla.css
index faaa76e76..b3c7ce716 100644
--- a/pd/nw/css/vanilla.css
+++ b/pd/nw/css/vanilla.css
@@ -291,14 +291,12 @@ text {
0% {
stroke-width: 1;
stroke-opacity: 1;
- x: 0;
rx: 1;
ry: 1;
}
100% {
stroke-width: 20;
stroke-opacity: 0.2;
- x: 100;
rx: 50;
ry: 50;
}
@@ -307,6 +305,7 @@ text {
/* can't remember why this was tagged !important */
.xlet_selected {
stroke: purple !important;
+ fill: purple;
-webkit-animation: fizzle 0.5s linear 1;
}
diff --git a/pd/nw/css/vanilla_inverted.css b/pd/nw/css/vanilla_inverted.css
index f1ae2d7c8..89551f83a 100644
--- a/pd/nw/css/vanilla_inverted.css
+++ b/pd/nw/css/vanilla_inverted.css
@@ -301,23 +301,16 @@ text {
@-webkit-keyframes fizzle {
0% {
stroke-width: 1;
- stroke-opacity: 1;
- x: 0;
- rx: 1;
- ry: 1;
}
100% {
- stroke-width: 20;
- stroke-opacity: 0.2;
- x: 100;
- rx: 50;
- ry: 50;
+ stroke-width: 8;
}
}
/* can't remember why this was tagged !important */
.xlet_selected {
- stroke: purple !important;
+ stroke: gray !important;
+ fill: gray;
-webkit-animation: fizzle 0.5s linear 1;
}
diff --git a/pd/nw/pdgui.js b/pd/nw/pdgui.js
index 2dbe27402..71a292e6f 100644
--- a/pd/nw/pdgui.js
+++ b/pd/nw/pdgui.js
@@ -1423,31 +1423,14 @@ function gui_configure_io(cid, tag, is_iemgui, is_signal, width) {
}
// remove xlet_selected tag
xlet.classList.remove("xlet_selected");
- if (xlet_anim) {
- xlet_anim.cancel();
- }
}
}
-var xlet_anim;
function gui_highlight_io(cid, tag) {
var xlet = get_item(cid, tag);
// must check for null (see gui_configure_io)
if (xlet !== null) {
xlet.classList.add("xlet_selected");
- if (!xlet_anim || xlet_anim.playState === "finished" ||
- xlet_anim.playState === "idle") {
- xlet_anim = xlet.animate(
- [{"stroke-width":"3"},
- {"stroke-width":"7"},
- {"stroke-width":"3"},
- ],
- { duration: 600,
- delay: 45,
- iterations: Infinity,
- easing: "ease-in-out" }
- );
- }
}
}
--
GitLab