Add icon to disable re-evalution (#5993)

Implements https://github.com/enso-org/enso/issues/5928.

This just adds the icon to the `icons` demo scene. No changes are made to the actual product yet.

![icon](https://user-images.githubusercontent.com/607786/225930459-2e8adac0-96b9-4f46-b518-6132670d8438.png)
![icons](https://user-images.githubusercontent.com/607786/225930464-67d06b8f-1ce4-41a2-b115-5127abadb6d3.png)

Cargo.lock

@@ -1621,6 +1621,7 @@ dependencies = [
  "ensogl-hardcoded-theme",
  "ide-view-component-list-panel-grid",
  "ide-view-component-list-panel-icons",
+ "ide-view-graph-editor",
  "wasm-bindgen",
 ]
 

app/gui/view/examples/icons/Cargo.toml

@@ -12,4 +12,5 @@ ensogl = { path = "../../../../../lib/rust/ensogl" }
 ensogl-hardcoded-theme = { path = "../../../../../lib/rust/ensogl/app/theme/hardcoded" }
 ide-view-component-list-panel-grid = { path = "../../component-browser/component-list-panel/grid" }
 ide-view-component-list-panel-icons = { path = "../../component-browser/component-list-panel/icons" }
+ide-view-graph-editor = { path = "../../graph-editor" }
 wasm-bindgen = { workspace = true }

app/gui/view/examples/icons/src/lib.rs

@@ -11,12 +11,14 @@ use wasm_bindgen::prelude::*;
 use ensogl::application::Application;
 use ensogl::data::color;
 use ensogl::display::navigation::navigator::Navigator;
+use ensogl::display::object::Object;
+use ensogl::display::world::World;
 use ensogl::display::DomSymbol;
 use ensogl::system::web;
 use ide_view_component_list_panel_grid::entry::icon;
 use ide_view_component_list_panel_icons::SHRINK_AMOUNT;
 use ide_view_component_list_panel_icons::SIZE;
-
+use ide_view_graph_editor::component::node::action_bar;
 
 
 // =============
@@ -47,7 +49,7 @@ mod frame {
 /// An entry point that displays all icon on a grid.
 #[wasm_bindgen]
 #[allow(dead_code)]
-pub fn entry_point_searcher_icons() {
+pub fn entry_point_icons() {
     let app = Application::new("root");
     let world = app.display.clone();
     mem::forget(app);
@@ -55,8 +57,48 @@ pub fn entry_point_searcher_icons() {
     mem::forget(Navigator::new(scene, &scene.camera()));
 
 
-    // === Grid ===
+    // === Searcher Icons ===
 
+    create_grid(&world, 0.0, 0.0);
+    let dark_green = color::Rgba(0.243, 0.541, 0.160, 1.0);
+    let mut x = -300.0;
+    icon::Id::for_each(|id| {
+        let shape = ide_view_component_list_panel_icons::any::View::new();
+        shape.icon.set(id.any_cached_shape_location());
+        shape.r_component.set(dark_green.into());
+        place_icon(&world, shape, x, 0.0);
+        x += 20.0;
+    });
+
+
+    // === Action Bar Icons ===
+
+    let y = 40.0;
+    create_grid(&world, 0.0, y);
+
+    let visibility_icon = action_bar::icon::visibility::View::new();
+    visibility_icon.color_rgba.set(dark_green.into());
+    place_icon(&world, visibility_icon, -40.0, y);
+
+    let visibility2_icon = action_bar::icon::visibility2::View::new();
+    visibility2_icon.color_rgba.set(dark_green.into());
+    place_icon(&world, visibility2_icon, -20.0, y);
+
+    let freeze_icon = action_bar::icon::freeze::View::new();
+    freeze_icon.color_rgba.set(dark_green.into());
+    place_icon(&world, freeze_icon, 0.0, y);
+
+    let skip_icon = action_bar::icon::skip::View::new();
+    skip_icon.color_rgba.set(dark_green.into());
+    place_icon(&world, skip_icon, 20.0, y);
+
+    let disable_reevaluation_icon = action_bar::icon::disable_reevaluation::View::new();
+    disable_reevaluation_icon.color_rgba.set(dark_green.into());
+    place_icon(&world, disable_reevaluation_icon, 40.0, y);
+}
+
+/// Create a grid with pixel squares to help development of icons.
+fn create_grid(world: &World, x: f32, y: f32) {
     let grid_div = web::document.create_div_or_panic();
     grid_div.set_style_or_warn("width", "2000px");
     grid_div.set_style_or_warn("height", "16px");
@@ -68,23 +110,17 @@ pub fn entry_point_searcher_icons() {
     );
 
     let grid = DomSymbol::new(&grid_div);
-    scene.dom.layers.back.manage(&grid);
-    world.add_child(&grid);
     grid.set_dom_size(Vector2(1000.0, SIZE));
+    grid.set_xy((x, y));
+    world.default_scene.dom.layers.back.manage(&grid);
+    world.add_child(&grid);
     mem::forget(grid);
-
-
-    // === Icons ===
-
-    let mut x = -300.0;
-    icon::Id::for_each(|id| {
-        let shape = ide_view_component_list_panel_icons::any::View::new();
-        shape.icon.set(id.any_cached_shape_location());
-        shape.r_component.set(color::Rgba(0.243, 0.541, 0.160, 1.0).into());
-        shape.set_x(x);
-        shape.set_size((SIZE, SIZE));
-        x += 20.0;
-        world.add_child(&shape);
-        mem::forget(shape);
-    });
+}
+
+/// Place the given icon in the world at the right coordinates, in a dark green shade.
+fn place_icon(world: &World, icon: impl Object, x: f32, y: f32) {
+    icon.set_xy((x, y));
+    icon.set_size((SIZE, SIZE));
+    world.add_child(&icon);
+    mem::forget(icon);
 }

app/gui/view/graph-editor/src/component/node/action_bar.rs

@@ -2,7 +2,7 @@
 
 
 
-mod icon;
+pub mod icon;
 
 use crate::prelude::*;
 

app/gui/view/graph-editor/src/component/node/action_bar/icon.rs

@@ -160,3 +160,51 @@ pub mod skip {
         }
     }
 }
+
+/// Icon for the button to disable re-evaluation. Looks like a crossed-out arrow loop.
+pub mod disable_reevaluation {
+    use super::*;
+
+    use std::f32::consts::FRAC_PI_2;
+    use std::f32::consts::FRAC_PI_6;
+
+    ensogl::shape! {
+        (style: Style, color_rgba: Vector4<f32>) {
+            let fill_color = Var::<color::Rgba>::from(color_rgba);
+            let width = Var::<Pixels>::from("input_size.x");
+            let height = Var::<Pixels>::from("input_size.y");
+
+            let unit = &width / 16.0;
+
+            let outer_rect = Rect((&unit * 14.0, &unit * 12.0))
+                .corners_radius(&unit * 6.0);
+            let loop_ = &outer_rect - outer_rect.shrink(&unit * 2.0);
+            let arrow_head = Triangle(&unit * 8.0, &unit * 7.0)
+                .rotate(FRAC_PI_2.radians())
+                .translate_x(&unit * 2.5)
+                .translate_y(&unit * 5.0);
+            let arrow_loop = (loop_ + arrow_head)
+                .translate_y(-&unit)
+                .translate_x(-&unit);
+            let stripe = Rect((&unit * 17.33, &unit * 2.0))
+                .rotate((-FRAC_PI_6).radians())
+                .translate_y(&unit * -2.33);
+            let stripe_clip = stripe
+                .translate_x(-&unit)
+                .translate_y(&unit * 3.0.sqrt());
+            let icon = AnyShape::from(arrow_loop + stripe - stripe_clip)
+                .fill(fill_color);
+
+            let hover_area = Rect((width,height))
+                .fill(INVISIBLE_HOVER_COLOR);
+
+            (icon + hover_area).into()
+        }
+    }
+
+    impl ColorableShape for Shape {
+        fn set_color(&self, color: color::Rgba) {
+            self.color_rgba.set(Vector4::new(color.red, color.green, color.blue, color.alpha));
+        }
+    }
+}