Splitter

一个可调节的分割器

an adjustable splitter

Example

Horizontal

#![allow(unused)]
fn main() {
<Splitter>{
    align: FromA(100),
    a: <View>{
        height: Fill,
        width: 200,
        show_bg: true,
        draw_bg: {color: #FF00F0},
    },
    b: <View>{
        height: Fill,
        width: 200,
        show_bg: true,
        draw_bg: {color: #FF0000},
    }
}
}

Vertical

#![allow(unused)]
fn main() {
<Splitter>{
    // align: FromB(100),
    // same as align: FromA(20% * a.width),
    align: Weighted(0.5),
    axis: Vertical,
    a: <View>{
        height: Fill,
        width: 200,
        show_bg: true,
        draw_bg: {color: #FF00F0},
    },
    b: <View>{
        height: Fill,
        width: 200,
        show_bg: true,
        draw_bg: {color: #FF0000},
    }
}
}

Default

#![allow(unused)]
fn main() {
    const THEME_TAB_HEIGHT = 26.0,
    const THEME_SPLITTER_SIZE = 5.0
    const THEME_SPLITTER_HORIZONTAL = 16.0,
    const THEME_SPLITTER_MIN_HORIZONTAL = (THEME_TAB_HEIGHT),
    const THEME_SPLITTER_MAX_HORIZONTAL = (THEME_TAB_HEIGHT + THEME_SPLITTER_SIZE),
    const THEME_SPLITTER_MIN_VERTICAL = (THEME_SPLITTER_HORIZONTAL),
    const THEME_SPLITTER_MAX_VERTICAL = (THEME_SPLITTER_HORIZONTAL + THEME_SPLITTER_SIZE),
    Splitter = <SplitterBase> {
        draw_splitter: {
            uniform border_radius: 1.0
            uniform splitter_pad: 1.0
            uniform splitter_grabber: 110.0

            instance pressed: 0.0
            instance hover: 0.0

            fn pixel(self) -> vec4 {
                let sdf = Sdf2d::viewport(self.pos * self.rect_size);
                sdf.clear(THEME_COLOR_BG_APP);

                if self.is_vertical > 0.5 {
                    sdf.box(
                        self.splitter_pad,
                        self.rect_size.y * 0.5 - self.splitter_grabber * 0.5,
                        self.rect_size.x - 2.0 * self.splitter_pad,
                        self.splitter_grabber,
                        self.border_radius
                    );
                }
                else {
                    sdf.box(
                        self.rect_size.x * 0.5 - self.splitter_grabber * 0.5,
                        self.splitter_pad,
                        self.splitter_grabber,
                        self.rect_size.y - 2.0 * self.splitter_pad,
                        self.border_radius
                    );
                }
                return sdf.fill_keep(mix(
                    THEME_COLOR_BG_APP,
                    mix(
                        THEME_COLOR_CONTROL_HOVER,
                        THEME_COLOR_CONTROL_PRESSED,
                        self.pressed
                    ),
                    self.hover
                ));
            }
        }
        split_bar_size: (THEME_SPLITTER_SIZE)
        min_horizontal: (THEME_SPLITTER_MIN_HORIZONTAL)
        max_horizontal: (THEME_SPLITTER_MAX_HORIZONTAL)
        min_vertical: (THEME_SPLITTER_MIN_VERTICAL)
        max_vertical: (THEME_SPLITTER_MAX_VERTICAL)

        animator: {
            hover = {
                default: off
                off = {
                    from: {all: Forward {duration: 0.1}}
                    apply: {
                        draw_splitter: {pressed: 0.0, hover: 0.0}
                    }
                }

                on = {
                    from: {
                        all: Forward {duration: 0.1}
                        state_down: Forward {duration: 0.01}
                    }
                    apply: {
                        draw_splitter: {
                            pressed: 0.0,
                            hover: [{time: 0.0, value: 1.0}],
                        }
                    }
                }

                pressed = {
                    from: {all: Forward {duration: 0.1}}
                    apply: {
                        draw_splitter: {
                            pressed: [{time: 0.0, value: 1.0}],
                            hover: 1.0,
                        }
                    }
                }
            }
        }
    }
}