Update view.js (#1285)

lutzroeder · Jul 5, 2024 · 552b09a · 552b09a
1 parent f85f041
commit 552b09a
Show file tree

Hide file tree

Showing 4 changed files with 403 additions and 273 deletions.
diff --git a/source/grapher.css b/source/grapher.css
@@ -51,10 +51,11 @@
 .node-item-undefined:hover { cursor: pointer; }
 .node-item-undefined:hover path { fill: #fff; }
 
-.node-attribute-list > path { fill: #fff; stroke-width: 0; stroke: #000; }
-.node-attribute-list:hover { cursor: pointer; }
-.node-attribute-list:hover > path { fill: #f6f6f6; }
-.node-attribute > text { font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "Ubuntu", "Droid Sans", sans-serif, "PingFang SC"; font-size: 9px; font-weight: normal; text-rendering: geometricPrecision; user-select: none; }
+.node-argument-list > path { fill: #fff; stroke-width: 0; stroke: #000; }
+.node-argument-list:hover { cursor: pointer; }
+.node-argument-list:hover > path { fill: #f6f6f6; }
+.node-argument > text { font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "Ubuntu", "Droid Sans", sans-serif, "PingFang SC"; font-size: 9px; font-weight: normal; text-rendering: geometricPrecision; user-select: none; }
+.node-argument > rect { fill: transparent; }
 
 .graph-item-input path { fill: #eee; }
 .graph-item-input:hover { cursor: pointer; }
@@ -65,13 +66,16 @@
 .graph-item-output:hover path { fill: #fff; }
 
 #arrowhead { fill: #000; }
-#arrowhead-select { fill: #e00; }
+#arrowhead-hover { fill: rgba(238, 0, 0, 0.8); }
+#arrowhead-select { fill: rgba(238, 0, 0, 0.8); }
 
 .edge-path { stroke: #000; stroke-width: 1px; fill: none; marker-end: url("#arrowhead"); }
 .edge-path-hit-test { pointer-events: stroke; stroke-width: 0.5em; fill: none; stroke: #000; stroke-opacity: 0.001; }
 
-.select > .node.node-border { stroke: #e00; stroke-width: 2px; }
-.select.edge-path { stroke: #e00; stroke-width: 1px; marker-end: url("#arrowhead-select"); }
+.select > .node.node-border { stroke: rgba(238, 0, 0, 0.8); stroke-width: 2px; }
+.select.edge-path { stroke: rgba(238, 0, 0, 0.8); stroke-width: 1px; marker-end: url("#arrowhead-select"); }
+.select.node-argument > rect { fill: rgba(238, 0, 0, 0.8); }
+.select.node-argument > text { fill: #f6f6f6; }
 
 .edge-label { font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "Ubuntu", "Droid Sans", sans-serif, "PingFang SC"; font-size: 10px; }
 .edge-path-control-dependency { stroke-dasharray: 3, 2; }
@@ -87,12 +91,14 @@
     .node path { stroke: #1d1d1d; }
     .node line { stroke: #1d1d1d; }
 
-    .select > .node.node-border { stroke: #b00; }
-    .select.edge-path { stroke: #b00; }
+    .select > .node.node-border { stroke: rgba(187, 0, 0, 0.8); }
+    .select.edge-path { stroke: rgba(187, 0, 0, 0.8); }
+    .select.node-argument > rect { fill: rgba(187, 0, 0, 0.8); }
+    .select.node-argument > text { fill: #b2b2b2; }
 
     #arrowhead { fill: #888; }
-    #arrowhead-hover { fill: #b00; }
-    #arrowhead-select { fill: #b00 }
+    #arrowhead-hover { fill: rgba(187, 0, 0, 0.8); }
+    #arrowhead-select { fill: rgba(187, 0, 0, 0.8) }
 
     .edge-label { fill: #b2b2b2; }
 
@@ -110,9 +116,9 @@
     .node-item path { stroke: #fff; }
     .node-item text { fill: #dfdfdf; }
 
-    .node-attribute > text { fill: #b2b2b2; }
-    .node-attribute-list > path { fill: #2d2d2d; }
-    .node-attribute-list:hover > path { fill: #666666; }
+    .node-argument > text { fill: #b2b2b2; }
+    .node-argument-list > path { fill: #2d2d2d; }
+    .node-argument-list:hover > path { fill: #303030; }
 
     .graph-item-input path { fill: #404040; }
     .graph-item-input:hover { cursor: pointer; }