Floem inter-window messaging bug

main.rs

use floem::{
    close_window,
    context::ComputeLayoutCx,
    event::EventPropagation,
    keyboard::NamedKey,
    kurbo::{Rect, Size},
    new_window,
    reactive::{create_rw_signal, ReadSignal, RwSignal},
    style::{Background, Style, TextColor, TextOverflow},
    taffy::{
        AlignContent, AlignItems, Display, FlexDirection, FlexWrap, GridPlacement, JustifyContent,
    },
    views::{h_stack, label, stack, static_label, text_input, v_stack, Decorators},
    window::{WindowConfig, WindowId},
    Application, IntoView, Renderer, View, ViewId,
};
use peniko::{
    kurbo::{Circle, Point},
    Color,
};
use std::{cell::Cell, f64::consts::PI, ops::Index};

pub fn main() {
    let win = WindowConfig::default()
        .title("Color Popup Window Demo")
        .apply_default_theme(true)
        .position(Point::new(300., 300.))
        .size(Size::new(660.0, 375.0));

    let fg_signal = create_rw_signal(COLORS[0]);
    let bg_signal = create_rw_signal(COLORS[N_COLORS - 1]);

    Application::new()
        .window(
            move |_id| {
                let picker_1 =
                    popup_window_color_picker("Foreground", fg_signal).keyboard_navigatable();
                picker_1.id().request_focus();
                v_stack((
                    static_label("These are color pickers.  Click one.").style(|s| s.font_bold()),
                    h_stack((
                        picker_1,
                        popup_window_color_picker("Background", bg_signal).keyboard_navigatable(),
                    )),
                    static_label("Issues:").style(|s| s.font_bold()),
                    static_label(INSTRUCTIONS).style(|s| {
                        s.text_overflow(TextOverflow::Wrap)
                            .flex_wrap(FlexWrap::Wrap)
                            .width_full()
                            .color(Color::NAVAJO_WHITE)
                            .background(Color::DIM_GRAY)
                            .padding(4.0)
                            .border_radius(5.0)
                            .border(1.0)
                            .margin_top(12.0)
                    }),
                ))
                .on_event(floem::event::EventListener::WindowClosed, |e| {
                    std::process::exit(0);
                })
                .style(move |s| {
                    s.color(fg_signal.get())
                        .background(bg_signal.get())
                        .padding(12.0)
                        .size_full()
                        .font_size(14.0)
                })
            },
            Some(win),
        )
        .run()
}

pub fn popup_window_color_picker<S: Into<String>>(
    title: S,
    color_signal: RwSignal<Color>,
) -> impl View {
    ColorPicker::new(title.into(), color_signal)
}

// Selection update messages
#[derive(Copy, Clone, Debug)]
enum ColorChange {
    Update(Color),
    Undo,
}

impl From<ColorChange> for Option<Color> {
    fn from(val: ColorChange) -> Self {
        match val {
            ColorChange::Update(color) => Some(color),
            _ => None,
        }
    }
}

pub struct PickerUpdate {
    new_color: Option<ColorChange>,
    close_popup: bool,
}

impl PickerUpdate {
    fn color(&self) -> Option<Color> {
        self.new_color.and_then(|c| c.into())
    }

    fn is_restore(&self) -> bool {
        self.new_color
            .map(|c| matches![c, ColorChange::Undo])
            .unwrap_or(false)
    }

    fn restore_and_close() -> Self {
        Self {
            new_color: Some(ColorChange::Undo),
            close_popup: true,
        }
    }

    fn close() -> Self {
        Self {
            new_color: None,
            close_popup: true,
        }
    }

    fn update_and_close(color: Color) -> Self {
        Self {
            new_color: Some(ColorChange::Update(color)),
            close_popup: true,
        }
    }

    fn update(color: Color) -> Self {
        Self {
            new_color: Some(ColorChange::Update(color)),
            close_popup: false,
        }
    }
}

/// The small color picker component which displays a popup
pub struct ColorPicker {
    id: ViewId,
    color: RwSignal<Color>,
    popup_window: Option<WindowId>,
    known_window_bounds: Option<Rect>,
    window_origin: Point,
}

impl ColorPicker {
    fn new(title: String, color: RwSignal<Color>) -> Self {
        let id = ViewId::new();
        let result = Self {
            id,
            color,
            popup_window: Default::default(),
            known_window_bounds: Default::default(),
            window_origin: Default::default(),
        };

        id.add_child(Box::new(Swatch::from(color)));
        id.add_child(Box::new(
            static_label(title)
                .style(|s| {
                    s.min_height(12.0)
                        .min_height_full()
                        .align_self(AlignItems::Center)
                })
                .keyboard_navigatable(),
        ));

        result.keyboard_navigatable()
    }

    fn compute_screen_location(&self, local_point: Option<Point>) -> Option<Point> {
        // Pending: How the heck do you get the window's screen position without
        // the user manually moving the window and getting a window moved event???

        if let Some(bds) = &self.known_window_bounds {
            let mut start = self.window_origin;
            start.x += bds.x0;
            start.y += bds.y0;
            Some(start)
        } else {
            local_point
        }
    }

    fn toggle_popup_window(&mut self, relative_to: Option<Point>) {
        self.id.update_state(self.popup_window.is_none());
    }

    fn create_window_config(&self, relative_to: Option<Point>) -> WindowConfig {
        let most_compact_palette_size = square_size();
        let mut config = WindowConfig::default()
            /*
            // requires this PR: https://github.com/lapce/floem/pull/457
            .with_mac_os_config(|mac| {
                mac.hide_titlebar(true)
                    .hide_titlebar_buttons(true)
                    .full_size_content_view(true)
                    .accept_first_mouse(true)
                    .enable_shadow(true)
                    .disallow_high_dpi(true)
                    .movable(false)
            })
            */
            .undecorated(true) // requires this PR: https://github.com/lapce/floem/pull/456
            .size(Size::new(
                // compensate for outer padding
                most_compact_palette_size + SWATCH_MARGIN,
                most_compact_palette_size + SWATCH_MARGIN / 2.0,
            ))
            .resizable(false);

        if let Some(screen_coords) = self.compute_screen_location(relative_to) {
            config = config.position(screen_coords);
        }
        config
    }

    fn open_popup_window(&mut self, relative_to: Option<Point>) {
        if self.popup_window.is_some() {
            return;
        }
        let config = self.create_window_config(relative_to);
        // copies
        let signal = self.color;
        let old_color = signal.get_untracked();
        let my_id = self.id;
        new_window(
            move |id| {
                my_id.update_state(id);
                let result = ColorPalette::from((
                    move |update: PickerUpdate| {
                        if let Some(c) = update.color() {
                            // The color can be None if the user pressed Escape
                            signal.set(c)
                        } else if update.is_restore() {
                            signal.set(old_color)
                        }
                        /*

                        And THIS is where the problem is.  We send the signal to close
                        the popup window.  All is well.

                        But it doesn't actually get DELIVERED until the mouse moves over
                        the window containing the ColorPicker and generates an OS-level
                        event.

                        */
                        if update.close_popup {
                            my_id.update_state(false);
                        }
                        my_id.request_paint();
                    },
                    signal.read_only(),
                ));
                result.id.request_focus();
                result
            },
            Some(config),
        );
    }

    fn close_popup_window(&mut self) {
        if let Some(win) = self.popup_window.take() {
            close_window(win);
        }
    }

    fn set_popup_window_id(&mut self, new_window_id: WindowId) {
        if self.popup_window.is_some() {
            self.close_popup_window();
        }
        self.popup_window = Some(new_window_id);
    }
}

impl View for ColorPicker {
    fn id(&self) -> ViewId {
        self.id
    }

    fn view_style(&self) -> Option<Style> {
        Some(
            Style::new()
                .flex_row()
                .line_height(1.75)
                .flex_grow(0.0)
                .margin_left(0.5)
                .hover(|hs| {
                    let col = self
                        .id()
                        .get_combined_style()
                        .get(TextColor)
                        .unwrap_or(Color::BLACK)
                        .darken_or_brighten(0.25);
                    hs.color(col).outline(1.0)
                }),
        )
    }

    fn compute_layout(&mut self, cx: &mut ComputeLayoutCx) -> Option<Rect> {
        self.window_origin = cx.window_origin();
        None
    }

    fn update(&mut self, _cx: &mut floem::context::UpdateCx, state: Box<dyn std::any::Any>) {
        match state.downcast::<bool>() {
            Ok(open_close) => {
                if *open_close {
                    self.open_popup_window(None)
                } else {
                    self.close_popup_window()
                }
            }
            Err(state) => match state.downcast::<WindowId>() {
                Ok(new_window_id) => self.set_popup_window_id(*new_window_id),
                Err(_) => (),
            },
        }
    }

    fn style(&mut self, cx: &mut floem::context::StyleCx<'_>) {
        for child in self.id().children() {
            cx.style_view(child);
        }
    }

    fn event_before_children(
        &mut self,
        cx: &mut floem::context::EventCx,
        event: &floem::event::Event,
    ) -> EventPropagation {
        match event {
            floem::event::Event::PointerUp(e) => {
                if cx.app_state().is_clicking(&self.id) {
                    self.id().request_focus();
                    self.toggle_popup_window(Some(e.pos));
                    return EventPropagation::Stop;
                }
            }
            floem::event::Event::KeyUp(k) => {
                if let floem::keyboard::Key::Named(n) = k.key.logical_key {
                    match n {
                        floem::keyboard::NamedKey::Space | floem::keyboard::NamedKey::Enter => {
                            self.toggle_popup_window(None);
                            return EventPropagation::Stop;
                        }
                        _ => (),
                    }
                }
            }
            floem::event::Event::WindowClosed => {
                self.close_popup_window();
            }
            floem::event::Event::WindowResized(size) => {
                if let Some(bounds) = self.known_window_bounds {
                    self.known_window_bounds = Some(Rect::new(
                        bounds.x0,
                        bounds.y0,
                        bounds.x0 + size.width,
                        bounds.y0 + size.height,
                    ))
                } else {
                    self.known_window_bounds = Some(Rect::new(0.0, 0.0, size.width, size.height));
                }
            }
            floem::event::Event::WindowMoved(to) => {
                if let Some(bounds) = self.known_window_bounds {
                    self.known_window_bounds = Some(Rect::new(
                        to.x,
                        to.y,
                        to.x + bounds.width(),
                        to.y + bounds.height(),
                    ))
                }
            }
            floem::event::Event::FocusGained => (),
            floem::event::Event::FocusLost => (),
            _ => (),
        }
        EventPropagation::Continue
    }
}

/// A simple container for color swatches which receives a Color
/// as a message when a child is clicked, and forwards that to the
/// `FnMut(&PickerUpdate)` it was constructed with, which contains
/// the color, if any, and instructions as to the disposition of the
/// popup.
pub struct ColorPalette {
    id: ViewId,
    colors: [Color; N_COLORS],
    selection: ReadSignal<Color>,
    on_select: Box<dyn FnMut(PickerUpdate) + 'static>,
}

impl<F: FnMut(PickerUpdate) + 'static> From<(F, ReadSignal<Color>)> for ColorPalette {
    fn from(values: (F, ReadSignal<Color>)) -> Self {
        let id = ViewId::new();
        let mut result = Self {
            id,
            colors: COLORS,
            selection: values.1,
            on_select: Box::new(values.0),
        };
        for c in &result.colors {
            let color = *c;
            let swatch = Swatch::from(((*c, values.1), id));
            id.add_child(Box::new(swatch));
        }
        result.keyboard_navigatable()
    }
}

impl ColorPalette {
    fn send_close_popup(&mut self) {
        (self.on_select)(PickerUpdate::close())
    }

    fn send_restore_and_close(&mut self) {
        (self.on_select)(PickerUpdate::restore_and_close())
    }

    fn send_color_update_and_close(&mut self, new_color: Color) {
        (self.on_select)(PickerUpdate::update_and_close(new_color))
    }

    fn send_color_update(&mut self, new_color: Color) {
        (self.on_select)(PickerUpdate::update(new_color));
        for ch in self.id.children() {
            ch.request_paint()
        }
    }
}

impl View for ColorPalette {
    fn id(&self) -> ViewId {
        self.id
    }

    fn debug_name(&self) -> std::borrow::Cow<'static, str> {
        "ColorPalette".into()
    }

    fn view_style(&self) -> Option<Style> {
        let square_size = square_size();
        Some(
            Style::new()
                .flex()
                .flex_wrap(FlexWrap::Wrap)
                .background(Color::LIGHT_GRAY)
                // should match the swatch margin so it adds up to the inter-swatch margin
                .padding(SWATCH_MARGIN)
                .min_size(square_size, square_size), // .min_size_full(),
        )
    }

    fn update(&mut self, _cx: &mut floem::context::UpdateCx, state: Box<dyn std::any::Any>) {
        if let Ok(new_color) = state.downcast::<Color>() {
            self.send_color_update_and_close(*new_color)
        }
    }

    fn style(&mut self, cx: &mut floem::context::StyleCx<'_>) {
        for child in self.id().children() {
            cx.style_view(child);
        }
    }

    fn event_before_children(
        &mut self,
        _cx: &mut floem::context::EventCx,
        event: &floem::event::Event,
    ) -> EventPropagation {
        match event {
            floem::event::Event::KeyUp(k) => {
                if k.modifiers.is_empty() {
                    if let floem::keyboard::Key::Named(key) = k.key.logical_key {
                        match key {
                            NamedKey::Escape => self.send_restore_and_close(),
                            NamedKey::Enter | NamedKey::Space => self.send_close_popup(),
                            _ => (),
                        }
                    }
                }
            }
            floem::event::Event::KeyDown(k) => {
                if k.modifiers.is_empty() {
                    if let floem::keyboard::Key::Named(key) = k.key.logical_key {
                        match key {
                            NamedKey::ArrowRight => {
                                if let Some(next_color) = next_color(self.selection.get_untracked())
                                {
                                    self.send_color_update(next_color)
                                }
                            }
                            NamedKey::ArrowLeft => {
                                if let Some(prev_color) = prev_color(self.selection.get_untracked())
                                {
                                    self.send_color_update(prev_color)
                                }
                            }
                            NamedKey::ArrowUp => {
                                if let Some(up_color) = up_color(self.selection.get_untracked()) {
                                    self.send_color_update(up_color)
                                }
                            }
                            NamedKey::ArrowDown => {
                                if let Some(down_color) = down_color(self.selection.get_untracked())
                                {
                                    self.send_color_update(down_color)
                                }
                            }
                            NamedKey::End => self.send_color_update(COLORS[0]),
                            NamedKey::Home => self.send_color_update(COLORS[N_COLORS - 1]),
                            _ => (),
                        }
                    }
                }
            }
            _ => (),
        }
        EventPropagation::Continue
    }
}

/// A single color swatch.  This is used both in the main picker component, and as
/// the swatches displayed in the popup.
pub struct Swatch {
    id: ViewId,
    color: ColorSource,
    owner: Option<ViewId>,
}

impl<I: Into<ColorSource>> From<(I, ViewId)> for Swatch {
    fn from(color_and_owner: (I, ViewId)) -> Self {
        Self {
            id: ViewId::new(),
            color: color_and_owner.0.into(),
            owner: Some(color_and_owner.1),
        }
        .keyboard_navigatable()
    }
}

impl<I: Into<ColorSource>> From<I> for Swatch {
    fn from(color_source: I) -> Self {
        let src = color_source.into();
        let mut result = Self {
            id: ViewId::new(),
            color: src,
            owner: None,
        };
        if src.is_fixed() {
            result = result.keyboard_navigatable();
        }
        result
    }
}

impl View for Swatch {
    fn id(&self) -> ViewId {
        self.id
    }

    fn view_style(&self) -> Option<floem::style::Style> {
        Some(self.color.base_style())
    }

    fn paint(&mut self, cx: &mut floem::context::PaintCx) {
        let bds = self.id.get_content_rect();
        cx.fill(&bds, self.color.get(), 0.0);
        if self.color.is_selected() {
            let circ = Circle::new(bds.center(), bds.width() / 3.0);
            cx.stroke(&circ, contrasting_color(&self.color.get()), 2.0);
        }
    }

    fn event_before_children(
        &mut self,
        cx: &mut floem::context::EventCx,
        event: &floem::event::Event,
    ) -> EventPropagation {
        match event {
            floem::event::Event::PointerUp(e) => {
                if let Some(owner) = self.owner {
                    if cx.app_state().is_clicking(&self.id) {
                        owner.update_state(self.color.get());
                        self.id.request_paint();
                        return EventPropagation::Stop;
                    }
                }
            }
            _ => (),
        }
        EventPropagation::Continue
    }
}

/// Indirection for a color that lets us use ColorSwatch both as the component
/// embedded in the picker, and also a swatches in the popup.
#[derive(Copy, Clone)]
enum ColorSource {
    /// Has a fixed color and size, and a read signal to determine if its color
    /// is the selected one
    Fixed(Color, Size, ReadSignal<Color>),
    Dynamic(ReadSignal<Color>),
}

impl From<(Color, ReadSignal<Color>)> for ColorSource {
    fn from(value: (Color, ReadSignal<Color>)) -> Self {
        Self::Fixed(value.0, Size::new(SWATCH_SIZE, SWATCH_SIZE), value.1)
    }
}

impl From<RwSignal<Color>> for ColorSource {
    fn from(value: RwSignal<Color>) -> Self {
        Self::Dynamic(value.read_only())
    }
}

impl ColorSource {
    fn get(&self) -> Color {
        match self {
            ColorSource::Fixed(color, _, _) => *color,
            ColorSource::Dynamic(sig) => sig.get(),
        }
    }

    fn is_fixed(&self) -> bool {
        matches![self, ColorSource::Fixed(_, _, _)]
    }

    fn is_selected(&self) -> bool {
        if let Self::Fixed(color, _, selected_color) = self {
            *color == selected_color.get()
        } else {
            false
        }
    }

    fn base_style(&self) -> floem::style::Style {
        let (fixed, size) = match self {
            ColorSource::Fixed(_, size, _) => (true, *size),
            ColorSource::Dynamic(_) => (false, Size::new(36.0, 24.0)),
        };
        let mut result = Style::new().background(self.get());
        if fixed {
            result = result
                .margin(SWATCH_MARGIN)
                .min_size(size.width, size.height)
                .max_size(size.width, size.height)
                .size(size.width, size.height)
                .flex_grow(0.0)
                .box_shadow_blur(2.0)
                .box_shadow_color(self.get().darkened_by(0.25))
                .box_shadow_h_offset(1.5)
                .box_shadow_v_offset(1.75)
        } else {
            result = result
                .min_size(size.width, size.height)
                .flex_row()
                .flex_grow(0.125)
                .max_height(24.0)
                .max_width(size.width)
                .border_color(self.get().darkened_by(0.125))
                .border(1.5)
                .margin(2.0)
                .focus(|fs| {
                    fs.box_shadow_blur(2.0)
                        .box_shadow_color(Color::BLACK.with_alpha_factor(0.55))
                        .box_shadow_spread(1.5)
                        .box_shadow_h_offset(0.75)
                });
        }
        result
    }
}

// Used by keyboard actions in ColorPalette
fn index_of_color(color: Color) -> Option<usize> {
    for (index, item) in COLORS.iter().enumerate() {
        if item == &color {
            return Some(index);
        }
    }
    None
}

fn next_color(color: Color) -> Option<Color> {
    if let Some(index) = index_of_color(color) {
        if index == N_COLORS - 1 {
            return Some(COLORS[0]);
        } else {
            return Some(COLORS[index + 1]);
        }
    }
    None
}

fn prev_color(color: Color) -> Option<Color> {
    if let Some(index) = index_of_color(color) {
        if index == 0 {
            return Some(COLORS[N_COLORS - 1]);
        } else {
            return Some(COLORS[index - 1]);
        }
    }
    None
}

fn down_color(color: Color) -> Option<Color> {
    if let Some(index) = index_of_color(color) {
        if index >= N_COLORS - ONE_COLOR_ROW {
            return Some(COLORS[ONE_COLOR_ROW - (N_COLORS - index)]);
        } else {
            return Some(COLORS[index + ONE_COLOR_ROW]);
        }
    }
    None
}

fn up_color(color: Color) -> Option<Color> {
    if let Some(index) = index_of_color(color) {
        if index < ONE_COLOR_ROW {
            return Some(COLORS[N_COLORS - (ONE_COLOR_ROW - index)]);
        } else {
            return Some(COLORS[index - ONE_COLOR_ROW]);
        }
    }
    None
}

fn contrasting_color(color: &Color) -> Color {
    // A little eye-bleeding, but quick'n'dirty. There are actual
    // good ways to do this with LAB colorspace.
    fn rotate(v: u8) -> u8 {
        (((v as u16) + 127) % u8::MAX as u16) as u8
    }
    Color::rgba8(rotate(color.r), rotate(color.g), rotate(color.b), color.a)
}

const ONE_COLOR_ROW: usize = 12;
const N_COLORS: usize = 144;
pub(crate) const COLORS: [Color; N_COLORS] = [
    Color::rgb8(0, 0, 0),
    Color::rgb8(11, 1, 0),
    Color::rgb8(18, 2, 0),
    Color::rgb8(23, 3, 0),
    Color::rgb8(27, 5, 0),
    Color::rgb8(31, 7, 0),
    Color::rgb8(35, 10, 0),
    Color::rgb8(39, 12, 0),
    Color::rgb8(42, 15, 0),
    Color::rgb8(45, 18, 0),
    Color::rgb8(48, 22, 0),
    Color::rgb8(51, 25, 0),
    Color::rgb8(54, 29, 1),
    Color::rgb8(57, 33, 1),
    Color::rgb8(60, 37, 1),
    Color::rgb8(62, 42, 1),
    Color::rgb8(65, 46, 1),
    Color::rgb8(67, 51, 1),
    Color::rgb8(70, 56, 1),
    Color::rgb8(72, 61, 2),
    Color::rgb8(75, 66, 2),
    Color::rgb8(77, 71, 2),
    Color::rgb8(79, 77, 2),
    Color::rgb8(81, 81, 3),
    Color::rgb8(79, 84, 3),
    Color::rgb8(78, 86, 3),
    Color::rgb8(76, 88, 4),
    Color::rgb8(74, 90, 4),
    Color::rgb8(72, 92, 4),
    Color::rgb8(70, 94, 5),
    Color::rgb8(68, 96, 5),
    Color::rgb8(66, 98, 6),
    Color::rgb8(63, 100, 6),
    Color::rgb8(60, 102, 7),
    Color::rgb8(58, 104, 7),
    Color::rgb8(55, 106, 8),
    Color::rgb8(52, 108, 8),
    Color::rgb8(48, 110, 9),
    Color::rgb8(45, 111, 9),
    Color::rgb8(42, 113, 10),
    Color::rgb8(38, 115, 11),
    Color::rgb8(35, 117, 11),
    Color::rgb8(31, 119, 12),
    Color::rgb8(28, 120, 13),
    Color::rgb8(24, 122, 13),
    Color::rgb8(20, 124, 14),
    Color::rgb8(17, 126, 15),
    Color::rgb8(16, 127, 19),
    Color::rgb8(17, 129, 24),
    Color::rgb8(18, 131, 30),
    Color::rgb8(18, 132, 36),
    Color::rgb8(19, 134, 42),
    Color::rgb8(20, 136, 48),
    Color::rgb8(21, 137, 54),
    Color::rgb8(22, 139, 60),
    Color::rgb8(23, 140, 66),
    Color::rgb8(24, 142, 72),
    Color::rgb8(26, 144, 78),
    Color::rgb8(27, 145, 85),
    Color::rgb8(28, 147, 91),
    Color::rgb8(29, 148, 97),
    Color::rgb8(30, 150, 104),
    Color::rgb8(32, 151, 110),
    Color::rgb8(33, 153, 117),
    Color::rgb8(34, 154, 123),
    Color::rgb8(36, 156, 130),
    Color::rgb8(37, 157, 136),
    Color::rgb8(38, 159, 143),
    Color::rgb8(40, 160, 149),
    Color::rgb8(41, 162, 155),
    Color::rgb8(43, 163, 162),
    Color::rgb8(44, 161, 165),
    Color::rgb8(46, 157, 166),
    Color::rgb8(47, 154, 168),
    Color::rgb8(49, 150, 169),
    Color::rgb8(51, 147, 170),
    Color::rgb8(53, 143, 172),
    Color::rgb8(54, 140, 173),
    Color::rgb8(56, 136, 175),
    Color::rgb8(58, 133, 176),
    Color::rgb8(60, 130, 177),
    Color::rgb8(62, 126, 179),
    Color::rgb8(63, 123, 180),
    Color::rgb8(65, 120, 182),
    Color::rgb8(67, 117, 183),
    Color::rgb8(69, 114, 184),
    Color::rgb8(72, 111, 186),
    Color::rgb8(74, 108, 187),
    Color::rgb8(76, 105, 188),
    Color::rgb8(78, 103, 190),
    Color::rgb8(80, 100, 191),
    Color::rgb8(82, 98, 192),
    Color::rgb8(85, 95, 194),
    Color::rgb8(87, 93, 195),
    Color::rgb8(89, 91, 196),
    Color::rgb8(95, 92, 197),
    Color::rgb8(101, 94, 199),
    Color::rgb8(108, 97, 200),
    Color::rgb8(115, 99, 201),
    Color::rgb8(121, 102, 203),
    Color::rgb8(128, 104, 204),
    Color::rgb8(134, 107, 205),
    Color::rgb8(140, 110, 206),
    Color::rgb8(146, 112, 208),
    Color::rgb8(152, 115, 209),
    Color::rgb8(158, 118, 210),
    Color::rgb8(164, 121, 211),
    Color::rgb8(170, 123, 213),
    Color::rgb8(176, 126, 214),
    Color::rgb8(181, 129, 215),
    Color::rgb8(187, 132, 216),
    Color::rgb8(192, 135, 218),
    Color::rgb8(197, 138, 219),
    Color::rgb8(202, 142, 220),
    Color::rgb8(207, 145, 221),
    Color::rgb8(211, 148, 223),
    Color::rgb8(216, 151, 224),
    Color::rgb8(220, 154, 225),
    Color::rgb8(224, 158, 226),
    Color::rgb8(227, 226, 161),
    Color::rgb8(229, 225, 164),
    Color::rgb8(230, 224, 168),
    Color::rgb8(231, 223, 171),
    Color::rgb8(232, 222, 175),
    Color::rgb8(233, 221, 179),
    Color::rgb8(234, 221, 182),
    Color::rgb8(236, 221, 186),
    Color::rgb8(237, 221, 190),
    Color::rgb8(238, 221, 193),
    Color::rgb8(239, 221, 197),
    Color::rgb8(240, 222, 201),
    Color::rgb8(241, 223, 205),
    Color::rgb8(243, 224, 209),
    Color::rgb8(244, 225, 213),
    Color::rgb8(245, 227, 217),
    Color::rgb8(246, 229, 221),
    Color::rgb8(247, 231, 225),
    Color::rgb8(248, 234, 229),
    Color::rgb8(249, 237, 233),
    Color::rgb8(251, 240, 238),
    Color::rgb8(252, 243, 242),
    Color::rgb8(253, 247, 246),
    Color::rgb8(254, 251, 251),
    Color::rgb8(255, 255, 255),
];

/// The ideal popup size is square - the square root
/// of the number of popups x the number of popups
/// + swatch padding + popup padding.
const SWATCH_SIZE: f64 = 20.0;
const SWATCH_MARGIN: f64 = 3.0;
const SWATCH_FULL: f64 = SWATCH_SIZE + SWATCH_MARGIN * 2.0;
/// The square of the fixed swatch size times the number of colors.
fn square_size() -> f64 {
    (N_COLORS as f64 * SWATCH_FULL * SWATCH_FULL).sqrt().ceil() + (SWATCH_MARGIN * 2.0).sqrt()
}

/// A simple extension to color to do some crude tweaking of it.
trait AdjustableColor: Sized {
    fn darkened_by(&self, fraction: f64) -> Self;
    fn darken_or_brighten(&self, by: f64) -> Self;
}

impl AdjustableColor for Color {
    fn darken_or_brighten(&self, by: f64) -> Self {
        if self == &Color::BLACK {
            // nothing to multiply
            return Color::DARK_SLATE_BLUE;
        }
        fn to_f64(v: u8) -> f64 {
            v as f64 / 255.0
        }
        let avg = (to_f64(self.r) + to_f64(self.g) + to_f64(self.b)) / 3.0;
        if avg > 0.5 {
            self.darkened_by(by)
        } else {
            self.darkened_by(-0.5)
        }
    }

    fn darkened_by(&self, by_fraction: f64) -> Color {
        fn reduce(v: u8, f: f64) -> u8 {
            (v as f64 - v as f64 * f).max(0.0).min(255.0) as u8
        }
        Color::rgba8(
            reduce(self.r, by_fraction),
            reduce(self.g, by_fraction),
            reduce(self.b, by_fraction),
            self.a,
        )
    }
}

const INSTRUCTIONS: &str = r#"
1. A popup *window* will open. You can select a color by clicking a color-swatch,
or by navigating to one with arrow keys and then pressing Enter or Space, or
Escape to close without applying the color.

At that point, a callback that is passed the new color will call self.id.update_state(false)
to signal the View in this window to close the popup, and update the color. Selecting
using the arrow keys will similarly message the component above in the parent window.

This messages are delivered, but whatever queue they go into is not read until the
mouse cursor moves over this window, or some other OS-level event triggers processing
update messages.  So the popup remains open until an input event on this window, even
though the steps to close it executed correctly.

2. A secondary, unrelated issue is:  There appears to be no way to get the bounds of the parent
*window* except via the user manually moving it to generate a WindowMoved event - so
there is no information to place the popup relative to the color picker above until
the user has moved the window (if they ever do) at least once.\n"#;