feat: 'move' cursor added over brush mark (#9164)

To create affordance for brush panning, switch the user's mouse cursor to 'move' when dragging/hovering over a displayed interval selection. <img width="232" alt="274331754-21cffb6f-09e4-479a-b69e-d8cc52297adb" src="https://github.com/vega/vega-lite/assets/53187264/1059c619-cbf2-4b7c-ab44-095091935c95"> Contributes to #4155 --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Kanit Wongsuphasawat <kanitw@gmail.com> Co-authored-by: GitHub Actions Bot <vega-actions-bot@users.noreply.github.com> Co-authored-by: Dominik Moritz <domoritz@gmail.com> Co-authored-by: Kanit Wongsuphasawat <kanit.w@databricks.com>
vega · Jan 30, 2024 · ffec017 · ffec017
1 parent e11af45
commit ffec017
Show file tree

Hide file tree

Showing 47 changed files with 387 additions and 87 deletions.
diff --git a/examples/compiled/bar_count_minimap.vg.json b/examples/compiled/bar_count_minimap.vg.json
@@ -371,7 +371,10 @@
           "type": "rect",
           "clip": true,
           "encode": {
-            "enter": {"fill": {"value": "transparent"}},
+            "enter": {
+              "cursor": {"value": "move"},
+              "fill": {"value": "transparent"}
+            },
             "update": {
               "x": [
                 {

diff --git a/examples/compiled/brush_table.vg.json b/examples/compiled/brush_table.vg.json
@@ -397,7 +397,10 @@
           "type": "rect",
           "clip": true,
           "encode": {
-            "enter": {"fill": {"value": "transparent"}},
+            "enter": {
+              "cursor": {"value": "move"},
+              "fill": {"value": "transparent"}
+            },
             "update": {
               "x": [
                 {

diff --git a/examples/compiled/dynamic_color_legend.vg.json b/examples/compiled/dynamic_color_legend.vg.json
@@ -337,7 +337,10 @@
           "type": "rect",
           "clip": true,
           "encode": {
-            "enter": {"fill": {"value": "transparent"}},
+            "enter": {
+              "cursor": {"value": "move"},
+              "fill": {"value": "transparent"}
+            },
             "update": {
               "x": [
                 {

diff --git a/examples/compiled/interactive_1d_geo_brush.vg.json b/examples/compiled/interactive_1d_geo_brush.vg.json
@@ -306,7 +306,10 @@
       "type": "rect",
       "clip": true,
       "encode": {
-        "enter": {"fill": {"value": "transparent"}},
+        "enter": {
+          "cursor": {"value": "move"},
+          "fill": {"value": "transparent"}
+        },
         "update": {
           "x": [
             {

diff --git a/examples/compiled/interactive_airport_crossfilter.vg.json b/examples/compiled/interactive_airport_crossfilter.vg.json
@@ -519,7 +519,10 @@
           "type": "rect",
           "clip": true,
           "encode": {
-            "enter": {"fill": {"value": "transparent"}},
+            "enter": {
+              "cursor": {"value": "move"},
+              "fill": {"value": "transparent"}
+            },
             "update": {
               "x": [
                 {

diff --git a/examples/compiled/interactive_area_brush.vg.json b/examples/compiled/interactive_area_brush.vg.json
@@ -318,7 +318,10 @@
       "type": "rect",
       "clip": true,
       "encode": {
-        "enter": {"fill": {"value": "transparent"}},
+        "enter": {
+          "cursor": {"value": "move"},
+          "fill": {"value": "transparent"}
+        },
         "update": {
           "x": [
             {

diff --git a/examples/compiled/interactive_bin_extent.vg.json b/examples/compiled/interactive_bin_extent.vg.json
@@ -358,7 +358,10 @@
           "type": "rect",
           "clip": true,
           "encode": {
-            "enter": {"fill": {"value": "transparent"}},
+            "enter": {
+              "cursor": {"value": "move"},
+              "fill": {"value": "transparent"}
+            },
             "update": {
               "x": [
                 {

diff --git a/examples/compiled/interactive_bin_extent_bottom.vg.json b/examples/compiled/interactive_bin_extent_bottom.vg.json
@@ -440,7 +440,10 @@
           "type": "rect",
           "clip": true,
           "encode": {
-            "enter": {"fill": {"value": "transparent"}},
+            "enter": {
+              "cursor": {"value": "move"},
+              "fill": {"value": "transparent"}
+            },
             "update": {
               "x": [
                 {

diff --git a/examples/compiled/interactive_brush.vg.json b/examples/compiled/interactive_brush.vg.json
@@ -345,7 +345,10 @@
       "type": "rect",
       "clip": true,
       "encode": {
-        "enter": {"fill": {"value": "transparent"}},
+        "enter": {
+          "cursor": {"value": "move"},
+          "fill": {"value": "transparent"}
+        },
         "update": {
           "x": [
             {

diff --git a/examples/compiled/interactive_crossfilter.vg.json b/examples/compiled/interactive_crossfilter.vg.json
@@ -395,7 +395,10 @@
           "type": "rect",
           "clip": true,
           "encode": {
-            "enter": {"fill": {"value": "transparent"}},
+            "enter": {
+              "cursor": {"value": "move"},
+              "fill": {"value": "transparent"}
+            },
             "update": {
               "x": [
                 {
@@ -701,7 +704,10 @@
           "type": "rect",
           "clip": true,
           "encode": {
-            "enter": {"fill": {"value": "transparent"}},
+            "enter": {
+              "cursor": {"value": "move"},
+              "fill": {"value": "transparent"}
+            },
             "update": {
               "x": [
                 {
@@ -1007,7 +1013,10 @@
           "type": "rect",
           "clip": true,
           "encode": {
-            "enter": {"fill": {"value": "transparent"}},
+            "enter": {
+              "cursor": {"value": "move"},
+              "fill": {"value": "transparent"}
+            },
             "update": {
               "x": [
                 {

diff --git a/examples/compiled/interactive_dashboard_europe_pop.vg.json b/examples/compiled/interactive_dashboard_europe_pop.vg.json
@@ -635,7 +635,10 @@
           "type": "rect",
           "clip": true,
           "encode": {
-            "enter": {"fill": {"value": "transparent"}},
+            "enter": {
+              "cursor": {"value": "move"},
+              "fill": {"value": "transparent"}
+            },
             "update": {
               "x": [
                 {
@@ -959,7 +962,10 @@
           "type": "rect",
           "clip": true,
           "encode": {
-            "enter": {"fill": {"value": "transparent"}},
+            "enter": {
+              "cursor": {"value": "move"},
+              "fill": {"value": "transparent"}
+            },
             "update": {
               "x": [
                 {
@@ -1360,7 +1366,10 @@
           "type": "rect",
           "clip": true,
           "encode": {
-            "enter": {"fill": {"value": "transparent"}},
+            "enter": {
+              "cursor": {"value": "move"},
+              "fill": {"value": "transparent"}
+            },
             "update": {
               "x": [
                 {

diff --git a/examples/compiled/interactive_layered_crossfilter.vg.json b/examples/compiled/interactive_layered_crossfilter.vg.json
@@ -484,7 +484,10 @@
           "type": "rect",
           "clip": true,
           "encode": {
-            "enter": {"fill": {"value": "transparent"}},
+            "enter": {
+              "cursor": {"value": "move"},
+              "fill": {"value": "transparent"}
+            },
             "update": {
               "x": [
                 {
@@ -845,7 +848,10 @@
           "type": "rect",
           "clip": true,
           "encode": {
-            "enter": {"fill": {"value": "transparent"}},
+            "enter": {
+              "cursor": {"value": "move"},
+              "fill": {"value": "transparent"}
+            },
             "update": {
               "x": [
                 {
@@ -1206,7 +1212,10 @@
           "type": "rect",
           "clip": true,
           "encode": {
-            "enter": {"fill": {"value": "transparent"}},
+            "enter": {
+              "cursor": {"value": "move"},
+              "fill": {"value": "transparent"}
+            },
             "update": {
               "x": [
                 {

diff --git a/examples/compiled/interactive_overview_detail.vg.json b/examples/compiled/interactive_overview_detail.vg.json
@@ -403,7 +403,10 @@
           "type": "rect",
           "clip": true,
           "encode": {
-            "enter": {"fill": {"value": "transparent"}},
+            "enter": {
+              "cursor": {"value": "move"},
+              "fill": {"value": "transparent"}
+            },
             "update": {
               "x": [
                 {

diff --git a/examples/compiled/interactive_paintbrush_interval.vg.json b/examples/compiled/interactive_paintbrush_interval.vg.json
@@ -332,7 +332,10 @@
       "type": "rect",
       "clip": true,
       "encode": {
-        "enter": {"fill": {"value": "transparent"}},
+        "enter": {
+          "cursor": {"value": "move"},
+          "fill": {"value": "transparent"}
+        },
         "update": {
           "x": [
             {

diff --git a/examples/compiled/interactive_seattle_weather.vg.json b/examples/compiled/interactive_seattle_weather.vg.json
@@ -332,7 +332,10 @@
           "type": "rect",
           "clip": true,
           "encode": {
-            "enter": {"fill": {"value": "transparent"}},
+            "enter": {
+              "cursor": {"value": "move"},
+              "fill": {"value": "transparent"}
+            },
             "update": {
               "x": [
                 {

diff --git a/examples/compiled/interactive_splom.vg.json b/examples/compiled/interactive_splom.vg.json
@@ -565,7 +565,10 @@
           "type": "rect",
           "clip": true,
           "encode": {
-            "enter": {"fill": {"value": "transparent"}},
+            "enter": {
+              "cursor": {"value": "move"},
+              "fill": {"value": "transparent"}
+            },
             "update": {
               "x": {"signal": "brush_x[0]"},
               "y": {"signal": "brush_y[0]"},
@@ -1073,7 +1076,10 @@
           "type": "rect",
           "clip": true,
           "encode": {
-            "enter": {"fill": {"value": "transparent"}},
+            "enter": {
+              "cursor": {"value": "move"},
+              "fill": {"value": "transparent"}
+            },
             "update": {
               "x": {"signal": "brush_x[0]"},
               "y": {"signal": "brush_y[0]"},
@@ -1493,7 +1499,10 @@
           "type": "rect",
           "clip": true,
           "encode": {
-            "enter": {"fill": {"value": "transparent"}},
+            "enter": {
+              "cursor": {"value": "move"},
+              "fill": {"value": "transparent"}
+            },
             "update": {
               "x": {"signal": "brush_x[0]"},
               "y": {"value": 0},
@@ -2002,7 +2011,10 @@
           "type": "rect",
           "clip": true,
           "encode": {
-            "enter": {"fill": {"value": "transparent"}},
+            "enter": {
+              "cursor": {"value": "move"},
+              "fill": {"value": "transparent"}
+            },
             "update": {
               "x": {"signal": "brush_x[0]"},
               "y": {"signal": "brush_y[0]"},
@@ -2424,7 +2436,10 @@
           "type": "rect",
           "clip": true,
           "encode": {
-            "enter": {"fill": {"value": "transparent"}},
+            "enter": {
+              "cursor": {"value": "move"},
+              "fill": {"value": "transparent"}
+            },
             "update": {
               "x": {"signal": "brush_x[0]"},
               "y": {"value": 0},
@@ -2929,7 +2944,10 @@
           "type": "rect",
           "clip": true,
           "encode": {
-            "enter": {"fill": {"value": "transparent"}},
+            "enter": {
+              "cursor": {"value": "move"},
+              "fill": {"value": "transparent"}
+            },
             "update": {
               "x": {"signal": "brush_x[0]"},
               "y": {"signal": "brush_y[0]"},
@@ -3353,7 +3371,10 @@
           "type": "rect",
           "clip": true,
           "encode": {
-            "enter": {"fill": {"value": "transparent"}},
+            "enter": {
+              "cursor": {"value": "move"},
+              "fill": {"value": "transparent"}
+            },
             "update": {
               "x": {"signal": "brush_x[0]"},
               "y": {"value": 0},
@@ -3862,7 +3883,10 @@
           "type": "rect",
           "clip": true,
           "encode": {
-            "enter": {"fill": {"value": "transparent"}},
+            "enter": {
+              "cursor": {"value": "move"},
+              "fill": {"value": "transparent"}
+            },
             "update": {
               "x": {"signal": "brush_x[0]"},
               "y": {"signal": "brush_y[0]"},
@@ -4374,7 +4398,10 @@
           "type": "rect",
           "clip": true,
           "encode": {
-            "enter": {"fill": {"value": "transparent"}},
+            "enter": {
+              "cursor": {"value": "move"},
+              "fill": {"value": "transparent"}
+            },
             "update": {
               "x": {"signal": "brush_x[0]"},
               "y": {"signal": "brush_y[0]"},

diff --git a/examples/compiled/isotype_grid.vg.json b/examples/compiled/isotype_grid.vg.json
@@ -427,7 +427,10 @@
       "type": "rect",
       "clip": true,
       "encode": {
-        "enter": {"fill": {"value": "transparent"}},
+        "enter": {
+          "cursor": {"value": "move"},
+          "fill": {"value": "transparent"}
+        },
         "update": {
           "x": [
             {

diff --git a/examples/compiled/selection_brush_timeunit.vg.json b/examples/compiled/selection_brush_timeunit.vg.json
@@ -324,7 +324,10 @@
           "type": "rect",
           "clip": true,
           "encode": {
-            "enter": {"fill": {"value": "transparent"}},
+            "enter": {
+              "cursor": {"value": "move"},
+              "fill": {"value": "transparent"}
+            },
             "update": {
               "x": [
                 {

diff --git a/examples/compiled/selection_clear_brush.vg.json b/examples/compiled/selection_clear_brush.vg.json
@@ -344,7 +344,10 @@
       "type": "rect",
       "clip": true,
       "encode": {
-        "enter": {"fill": {"value": "transparent"}},
+        "enter": {
+          "cursor": {"value": "move"},
+          "fill": {"value": "transparent"}
+        },
         "update": {
           "x": [
             {