feat: update druid

This commit is contained in:
2022-05-02 10:42:42 +08:00
parent 5538db42d9
commit fc2a5217b3
4 changed files with 763 additions and 119 deletions

View File

@@ -0,0 +1,262 @@
// Copyright 2018 The xi-editor Authors.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
//! Simple calculator.
use druid::{
theme, AppLauncher, Color, Data, Lens, LocalizedString, RenderContext, Widget, WidgetExt,
WindowDesc,
};
use druid::widget::{CrossAxisAlignment, Flex, Label, Painter};
#[derive(Clone, Data, Lens)]
struct CalcState {
/// The number displayed. Generally a valid float.
value: String,
operand: f64,
operator: char,
in_num: bool,
}
impl CalcState {
fn digit(&mut self, digit: u8) {
if !self.in_num {
self.value.clear();
self.in_num = true;
}
let ch = (b'0' + digit) as char;
self.value.push(ch);
}
fn display(&mut self) {
// TODO: change hyphen-minus to actual minus
self.value = self.operand.to_string();
}
fn compute(&mut self) {
if self.in_num {
let operand2 = self.value.parse().unwrap_or(0.0);
let result = match self.operator {
'+' => Some(self.operand + operand2),
'' => Some(self.operand - operand2),
'×' => Some(self.operand * operand2),
'÷' => Some(self.operand / operand2),
_ => None,
};
if let Some(result) = result {
self.operand = result;
self.display();
self.in_num = false;
}
}
}
fn op(&mut self, op: char) {
match op {
'+' | '' | '×' | '÷' | '=' => {
self.compute();
self.operand = self.value.parse().unwrap_or(0.0);
self.operator = op;
self.in_num = false;
}
'±' => {
if self.in_num {
if self.value.starts_with('') {
self.value = self.value[3..].to_string();
} else {
self.value = ["", &self.value].concat();
}
} else {
self.operand = -self.operand;
self.display();
}
}
'.' => {
if !self.in_num {
self.value = "0".to_string();
self.in_num = true;
}
if self.value.find('.').is_none() {
self.value.push('.');
}
}
'c' => {
self.value = "0".to_string();
self.in_num = false;
}
'C' => {
self.value = "0".to_string();
self.operator = 'C';
self.in_num = false;
}
'⌫' => {
if self.in_num {
self.value.pop();
if self.value.is_empty() || self.value == "" {
self.value = "0".to_string();
self.in_num = false;
}
}
}
_ => unreachable!(),
}
}
}
fn op_button_label(op: char, label: String) -> impl Widget<CalcState> {
let painter = Painter::new(|ctx, _, env| {
let bounds = ctx.size().to_rect();
ctx.fill(bounds, &env.get(theme::PRIMARY_DARK));
if ctx.is_hot() {
ctx.stroke(bounds.inset(-0.5), &Color::WHITE, 1.0);
}
if ctx.is_active() {
ctx.fill(bounds, &env.get(theme::PRIMARY_LIGHT));
}
});
Label::new(label)
.with_text_size(24.)
.center()
.background(painter)
.expand()
.on_click(move |_ctx, data: &mut CalcState, _env| data.op(op))
}
fn op_button(op: char) -> impl Widget<CalcState> {
op_button_label(op, op.to_string())
}
fn digit_button(digit: u8) -> impl Widget<CalcState> {
let painter = Painter::new(|ctx, _, env| {
let bounds = ctx.size().to_rect();
ctx.fill(bounds, &env.get(theme::BACKGROUND_LIGHT));
if ctx.is_hot() {
ctx.stroke(bounds.inset(-0.5), &Color::WHITE, 1.0);
}
if ctx.is_active() {
ctx.fill(bounds, &Color::rgb8(0x71, 0x71, 0x71));
}
});
Label::new(format!("{}", digit))
.with_text_size(24.)
.center()
.background(painter)
.expand()
.on_click(move |_ctx, data: &mut CalcState, _env| data.digit(digit))
}
fn flex_row<T: Data>(
w1: impl Widget<T> + 'static,
w2: impl Widget<T> + 'static,
w3: impl Widget<T> + 'static,
w4: impl Widget<T> + 'static,
) -> impl Widget<T> {
Flex::row()
.with_flex_child(w1, 1.0)
.with_spacer(1.0)
.with_flex_child(w2, 1.0)
.with_spacer(1.0)
.with_flex_child(w3, 1.0)
.with_spacer(1.0)
.with_flex_child(w4, 1.0)
}
fn build_calc() -> impl Widget<CalcState> {
let display = Label::new(|data: &String, _env: &_| data.clone())
.with_text_size(32.0)
.lens(CalcState::value)
.padding(5.0);
Flex::column()
.with_flex_spacer(0.2)
.with_child(display)
.with_flex_spacer(0.2)
.cross_axis_alignment(CrossAxisAlignment::End)
.with_flex_child(
flex_row(
op_button_label('c', "CE".to_string()),
op_button('C'),
op_button('⌫'),
op_button('÷'),
),
1.0,
)
.with_spacer(1.0)
.with_flex_child(
flex_row(
digit_button(7),
digit_button(8),
digit_button(9),
op_button('×'),
),
1.0,
)
.with_spacer(1.0)
.with_flex_child(
flex_row(
digit_button(4),
digit_button(5),
digit_button(6),
op_button(''),
),
1.0,
)
.with_spacer(1.0)
.with_flex_child(
flex_row(
digit_button(1),
digit_button(2),
digit_button(3),
op_button('+'),
),
1.0,
)
.with_spacer(1.0)
.with_flex_child(
flex_row(
op_button('±'),
digit_button(0),
op_button('.'),
op_button('='),
),
1.0,
)
}
pub fn main() {
let window = WindowDesc::new(build_calc)
.window_size((223., 300.))
.resizable(false)
.title(
LocalizedString::new("calc-demo-window-title").with_placeholder("Simple Calculator"),
);
let calc_state = CalcState {
value: "0".to_string(),
operand: 0.0,
operator: 'C',
in_num: false,
};
AppLauncher::with_window(window)
.use_simple_logger()
.launch(calc_state)
.expect("launch failed");
}

View File

@@ -0,0 +1,48 @@
use druid::widget::{Align, Flex, Label, TextBox};
use druid::{AppLauncher, Data, Env, Lens, LocalizedString, Widget, WindowDesc, WidgetExt};
const VERTICAL_WIDGET_SPACING: f64 = 20.0;
const TEXT_BOX_WIDTH: f64 = 200.0;
const WINDOW_TITLE: LocalizedString<HelloState> = LocalizedString::new("Hello World!");
#[derive(Clone, Data, Lens)]
struct HelloState {
name: String,
}
fn main() {
// describe the main window
let main_window = WindowDesc::new(build_root_widget)
.title(WINDOW_TITLE)
.window_size((400.0, 400.0));
// create the initial app state
let initial_state = HelloState {
name: "World".into(),
};
// start the application
AppLauncher::with_window(main_window)
.launch(initial_state)
.expect("Failed to launch application");
}
fn build_root_widget() -> impl Widget<HelloState> {
// a label that will determine its text based on the current app data.
let label = Label::new(|data: &HelloState, _env: &Env| format!("Hello {}!", data.name));
// a text box that modifies `name`.
let text_box = TextBox::new()
.with_placeholder("Who are we greeting?")
.fix_width(TEXT_BOX_WIDTH)
// .expand_width()
.lens(HelloState::name);
// arrange the two widgets vertically, with some padding
let layout = Flex::column()
.with_child(label)
.with_spacer(VERTICAL_WIDGET_SPACING)
.with_child(text_box);
// center the two widgets in the available space
Align::centered(layout)
}

View File

@@ -0,0 +1,332 @@
// Copyright 2020 The xi-editor Authors.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
//! Demonstrates alignment of children in the flex container.
use druid::widget::prelude::*;
use druid::widget::{
Button, Checkbox, CrossAxisAlignment, Flex, Label, MainAxisAlignment, ProgressBar, RadioGroup,
SizedBox, Slider, Stepper, Switch, TextBox, WidgetExt,
};
use druid::{
AppLauncher, Color, Data, Lens, LensExt, LocalizedString, PlatformError, WidgetId, WindowDesc,
};
const DEFAULT_SPACER_SIZE: f64 = 8.;
#[derive(Clone, Data, Lens)]
struct AppState {
demo_state: DemoState,
params: Params,
}
#[derive(Clone, Data, Lens)]
struct DemoState {
pub input_text: String,
pub enabled: bool,
volume: f64,
}
#[derive(Clone, Data, Lens)]
struct Params {
axis: FlexType,
cross_alignment: CrossAxisAlignment,
main_alignment: MainAxisAlignment,
fill_major_axis: bool,
debug_layout: bool,
fix_minor_axis: bool,
fix_major_axis: bool,
spacers: Spacers,
spacer_size: f64,
}
#[derive(Clone, Copy, PartialEq, Data)]
enum Spacers {
None,
Flex,
Fixed,
}
#[derive(Clone, Copy, PartialEq, Data)]
enum FlexType {
Row,
Column,
}
/// builds a child Flex widget from some paramaters.
struct Rebuilder {
inner: Box<dyn Widget<AppState>>,
}
impl Rebuilder {
fn new() -> Rebuilder {
Rebuilder {
inner: SizedBox::empty().boxed(),
}
}
fn rebuild_inner(&mut self, data: &AppState) {
self.inner = build_widget(&data.params);
}
}
impl Widget<AppState> for Rebuilder {
fn event(&mut self, ctx: &mut EventCtx, event: &Event, data: &mut AppState, env: &Env) {
self.inner.event(ctx, event, data, env)
}
fn lifecycle(&mut self, ctx: &mut LifeCycleCtx, event: &LifeCycle, data: &AppState, env: &Env) {
if let LifeCycle::WidgetAdded = event {
self.rebuild_inner(data);
}
self.inner.lifecycle(ctx, event, data, env)
}
fn update(&mut self, ctx: &mut UpdateCtx, old_data: &AppState, data: &AppState, env: &Env) {
if !old_data.params.same(&data.params) {
self.rebuild_inner(data);
ctx.children_changed();
} else {
self.inner.update(ctx, old_data, data, env);
}
}
fn layout(
&mut self,
ctx: &mut LayoutCtx,
bc: &BoxConstraints,
data: &AppState,
env: &Env,
) -> Size {
self.inner.layout(ctx, bc, data, env)
}
fn paint(&mut self, ctx: &mut PaintCtx, data: &AppState, env: &Env) {
self.inner.paint(ctx, data, env)
}
fn id(&self) -> Option<WidgetId> {
self.inner.id()
}
}
fn make_control_row() -> impl Widget<AppState> {
Flex::row()
.cross_axis_alignment(CrossAxisAlignment::Start)
.with_child(
Flex::column()
.cross_axis_alignment(CrossAxisAlignment::Start)
.with_child(Label::new("Type:").padding(5.0))
.with_child(
RadioGroup::new(vec![("Row", FlexType::Row), ("Column", FlexType::Column)])
.lens(Params::axis),
),
)
.with_child(
Flex::column()
.cross_axis_alignment(CrossAxisAlignment::Start)
.with_child(Label::new("CrossAxis:").padding(5.0))
.with_child(
RadioGroup::new(vec![
("Start", CrossAxisAlignment::Start),
("Center", CrossAxisAlignment::Center),
("End", CrossAxisAlignment::End),
])
.lens(Params::cross_alignment),
),
)
.with_child(
Flex::column()
.cross_axis_alignment(CrossAxisAlignment::Start)
.with_child(Label::new("MainAxis:").padding(5.0))
.with_child(
RadioGroup::new(vec![
("Start", MainAxisAlignment::Start),
("Center", MainAxisAlignment::Center),
("End", MainAxisAlignment::End),
("Between", MainAxisAlignment::SpaceBetween),
("Evenly", MainAxisAlignment::SpaceEvenly),
("Around", MainAxisAlignment::SpaceAround),
])
.lens(Params::main_alignment),
),
)
.with_child(make_spacer_select())
.with_child(
Flex::column()
.cross_axis_alignment(CrossAxisAlignment::Start)
.with_child(Label::new("Misc:").padding((0., 0., 0., 10.)))
.with_child(Checkbox::new("Debug layout").lens(Params::debug_layout))
.with_spacer(10.)
.with_child(Checkbox::new("Fill main axis").lens(Params::fill_major_axis))
.with_spacer(10.)
.with_child(Checkbox::new("Fix minor axis size").lens(Params::fix_minor_axis))
.with_spacer(10.)
.with_child(Checkbox::new("Fix major axis size").lens(Params::fix_major_axis))
.padding(5.0),
)
.border(Color::grey(0.6), 2.0)
.rounded(5.0)
.lens(AppState::params)
}
fn make_spacer_select() -> impl Widget<Params> {
Flex::column()
.cross_axis_alignment(CrossAxisAlignment::Start)
.with_child(Label::new("Insert Spacers:").padding(5.0))
.with_child(
RadioGroup::new(vec![
("None", Spacers::None),
("Flex", Spacers::Flex),
("Fixed:", Spacers::Fixed),
])
.lens(Params::spacers),
)
.with_child(
Flex::row()
.with_child(
TextBox::new()
.parse()
.lens(
Params::spacer_size
.map(|x| Some(*x), |x, y| *x = y.unwrap_or(DEFAULT_SPACER_SIZE)),
)
.fix_width(60.0),
)
.with_child(
Stepper::new()
.with_range(2.0, 50.0)
.with_step(2.0)
.lens(Params::spacer_size),
)
.padding((8.0, 5.0)),
)
}
fn space_if_needed<T: Data>(flex: &mut Flex<T>, params: &Params) {
match params.spacers {
Spacers::None => (),
Spacers::Fixed => flex.add_spacer(params.spacer_size),
Spacers::Flex => flex.add_flex_spacer(1.0),
}
}
fn build_widget(state: &Params) -> Box<dyn Widget<AppState>> {
let flex = match state.axis {
FlexType::Column => Flex::column(),
FlexType::Row => Flex::row(),
}
.cross_axis_alignment(state.cross_alignment)
.main_axis_alignment(state.main_alignment)
.must_fill_main_axis(state.fill_major_axis);
let mut flex = flex.with_child(TextBox::new().lens(DemoState::input_text));
space_if_needed(&mut flex, state);
flex.add_child(
Button::new("Clear").on_click(|_ctx, data: &mut DemoState, _env| {
data.input_text.clear();
data.enabled = false;
data.volume = 0.0;
}),
);
space_if_needed(&mut flex, state);
flex.add_child(Label::new(|data: &DemoState, _: &Env| {
data.input_text.clone()
}));
space_if_needed(&mut flex, state);
flex.add_child(Checkbox::new("Demo").lens(DemoState::enabled));
space_if_needed(&mut flex, state);
flex.add_child(Slider::new().lens(DemoState::volume));
space_if_needed(&mut flex, state);
flex.add_child(ProgressBar::new().lens(DemoState::volume));
space_if_needed(&mut flex, state);
flex.add_child(
Stepper::new()
.with_range(0.0, 1.0)
.with_step(0.1)
.with_wraparound(true)
.lens(DemoState::volume),
);
space_if_needed(&mut flex, state);
flex.add_child(Switch::new().lens(DemoState::enabled));
let flex = flex
.background(Color::rgba8(0, 0, 0xFF, 0x30))
.lens(AppState::demo_state);
let mut flex = SizedBox::new(flex);
if state.fix_minor_axis {
match state.axis {
FlexType::Row => flex = flex.height(200.),
FlexType::Column => flex = flex.width(200.),
}
}
if state.fix_major_axis {
match state.axis {
FlexType::Row => flex = flex.width(600.),
FlexType::Column => flex = flex.height(300.),
}
}
if state.debug_layout {
flex.debug_paint_layout().boxed()
} else {
flex.boxed()
}
}
fn make_ui() -> impl Widget<AppState> {
Flex::column()
.must_fill_main_axis(true)
.with_child(make_control_row())
.with_spacer(20.)
.with_flex_child(Rebuilder::new(), 1.0)
.padding(10.0)
}
pub fn main() -> Result<(), PlatformError> {
let main_window = WindowDesc::new(make_ui)
.window_size((620., 600.00))
.with_min_size((620., 265.00))
.title(LocalizedString::new("Flex Container Options"));
let demo_state = DemoState {
input_text: "hello".into(),
enabled: false,
volume: 0.0,
};
let params = Params {
axis: FlexType::Row,
cross_alignment: CrossAxisAlignment::Center,
main_alignment: MainAxisAlignment::Start,
debug_layout: false,
fix_minor_axis: false,
fix_major_axis: false,
spacers: Spacers::None,
spacer_size: DEFAULT_SPACER_SIZE,
fill_major_axis: false,
};
let data = AppState { demo_state, params };
AppLauncher::with_window(main_window)
.use_simple_logger()
.launch(data)?;
Ok(())
}