Skip to content

Commit

Permalink
Merge pull request #89 from locks/implement-background-size
Browse files Browse the repository at this point in the history 
Implement background-size:contain and background-size:cover
  • Loading branch information
@fschutt
fschutt authored Jan 9, 2019
2 parents 864de10 + 6e372bf commit 5072e38
Show file tree
Hide file tree
Showing 3 changed files with 84 additions and 34 deletions.
69 changes: 38 additions & 31 deletions azul-css-parser/src/css_parser.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ use azul_css::{
LayoutMaxHeight, LayoutMinHeight, LayoutHeight, LayoutMaxWidth, LayoutMinWidth, LayoutWidth,
StyleBorderRadius, PixelValue, PercentageValue, FloatValue,
ColorU, LayoutMargin, StyleLetterSpacing, StyleTextColor, StyleBackground, StyleBoxShadow,
GradientStopPre, RadialGradient, StyleBackgroundColor,
GradientStopPre, RadialGradient, StyleBackgroundColor, StyleBackgroundSize,
DirectionCorner, StyleBorder, Direction, CssImageId, LinearGradient,
BoxShadowPreDisplayItem, BorderStyle, LayoutPadding, StyleBorderSide, BorderRadius, PixelSize,

Expand Down Expand Up @@ -63,6 +63,7 @@ pub fn parse_key_value_pair<'a>(key: CssPropertyType, value: &'a str) -> Result<
match key {
BorderRadius => Ok(parse_style_border_radius(value)?.into()),
BackgroundColor => Ok(parse_style_background_color(value)?.into()),
BackgroundSize => Ok(parse_style_background_size(value)?.into()),
TextColor => Ok(parse_style_text_color(value)?.into()),
Background => Ok(parse_style_background(value)?.into()),
FontSize => Ok(parse_style_font_size(value)?.into()),
Expand Down Expand Up @@ -1624,6 +1625,8 @@ impl_display!{CssShapeParseError<'a>, {
pub struct RectStyle {
/// Background color of this rectangle
pub background_color: Option<StyleBackgroundColor>,
/// Background size of this rectangle
pub background_size: Option<StyleBackgroundSize>,
/// Shadow color
pub box_shadow: Option<StyleBoxShadow>,
/// Gradient (location) + stops
Expand Down Expand Up @@ -1780,36 +1783,40 @@ pub fn parse_style_font_family<'a>(input: &'a str) -> Result<StyleFontFamily, Cs
}

multi_type_parser!(parse_style_cursor, StyleCursor,
["alias", Alias],
["all-scroll", AllScroll],
["cell", Cell],
["col-resize", ColResize],
["context-menu", ContextMenu],
["copy", Copy],
["crosshair", Crosshair],
["default", Default],
["e-resize", EResize],
["ew-resize", EwResize],
["grab", Grab],
["grabbing", Grabbing],
["help", Help],
["move", Move],
["n-resize", NResize],
["ns-resize", NsResize],
["nesw-resize", NeswResize],
["nwse-resize", NwseResize],
["pointer", Pointer],
["progress", Progress],
["row-resize", RowResize],
["s-resize", SResize],
["se-resize", SeResize],
["text", Text],
["unset", Unset],
["vertical-text", VerticalText],
["w-resize", WResize],
["wait", Wait],
["zoom-in", ZoomIn],
["zoom-out", ZoomOut]);
["alias", Alias],
["all-scroll", AllScroll],
["cell", Cell],
["col-resize", ColResize],
["context-menu", ContextMenu],
["copy", Copy],
["crosshair", Crosshair],
["default", Default],
["e-resize", EResize],
["ew-resize", EwResize],
["grab", Grab],
["grabbing", Grabbing],
["help", Help],
["move", Move],
["n-resize", NResize],
["ns-resize", NsResize],
["nesw-resize", NeswResize],
["nwse-resize", NwseResize],
["pointer", Pointer],
["progress", Progress],
["row-resize", RowResize],
["s-resize", SResize],
["se-resize", SeResize],
["text", Text],
["unset", Unset],
["vertical-text", VerticalText],
["w-resize", WResize],
["wait", Wait],
["zoom-in", ZoomIn],
["zoom-out", ZoomOut]);

multi_type_parser!(parse_style_background_size, StyleBackgroundSize,
["contain", Contain],
["cover", Cover]);

multi_type_parser!(parse_layout_direction, LayoutDirection,
["row", Row],
Expand Down
17 changes: 16 additions & 1 deletion azul-css/src/css_properties.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -196,9 +196,10 @@ macro_rules! impl_pixel_value {($struct:ident) => (
}
)}

pub const CSS_PROPERTY_KEY_MAP: [(CssPropertyType, &'static str);51] = [
pub const CSS_PROPERTY_KEY_MAP: [(CssPropertyType, &'static str);52] = [
(CssPropertyType::BorderRadius, "border-radius"),
(CssPropertyType::BackgroundColor, "background-color"),
(CssPropertyType::BackgroundSize, "background-size"),
(CssPropertyType::TextColor, "color"),
(CssPropertyType::Background, "background"),
(CssPropertyType::FontSize, "font-size"),
Expand Down Expand Up @@ -261,6 +262,7 @@ pub fn get_css_key_map() -> BTreeMap<&'static str, CssPropertyType> {
pub enum CssPropertyType {
BorderRadius,
BackgroundColor,
BackgroundSize,
TextColor,
Background,
FontSize,
Expand Down Expand Up @@ -364,6 +366,7 @@ impl CssPropertyType {
match self {
| BorderRadius
| BackgroundColor
| BackgroundSize
| TextColor
| Background
| TextAlign
Expand All @@ -390,6 +393,7 @@ impl fmt::Display for CssPropertyType {
pub enum CssProperty {
BorderRadius(StyleBorderRadius),
BackgroundColor(StyleBackgroundColor),
BackgroundSize(StyleBackgroundSize),
TextColor(StyleTextColor),
Border(StyleBorder),
Background(StyleBackground),
Expand Down Expand Up @@ -428,6 +432,7 @@ impl CssProperty {
match &self {
CssProperty::BorderRadius(_) => CssPropertyType::BorderRadius,
CssProperty::BackgroundColor(_) => CssPropertyType::BackgroundColor,
CssProperty::BackgroundSize(_) => CssPropertyType::BackgroundSize,
CssProperty::TextColor(_) => CssPropertyType::TextColor,
CssProperty::Border(_) => CssPropertyType::Border,
CssProperty::Background(_) => CssPropertyType::Background,
Expand Down Expand Up @@ -473,6 +478,7 @@ impl_from!(StyleTextAlignmentHorz, CssProperty::TextAlign);
impl_from!(StyleLineHeight, CssProperty::LineHeight);
impl_from!(StyleLetterSpacing, CssProperty::LetterSpacing);
impl_from!(StyleBackgroundColor, CssProperty::BackgroundColor);
impl_from!(StyleBackgroundSize, CssProperty::BackgroundSize);
impl_from!(StyleTextColor, CssProperty::TextColor);
impl_from!(StyleCursor, CssProperty::Cursor);

Expand Down Expand Up @@ -618,6 +624,13 @@ impl Default for StyleBackgroundColor {
}
}

/// Represents a `background-size` attribute
#[derive(Debug, Copy, Clone, PartialEq, Eq, Hash)]
pub enum StyleBackgroundSize {
Contain,
Cover
}

/// Represents a `color` attribute
#[derive(Debug, Copy, Clone, PartialEq, Eq, Hash)]
pub struct StyleTextColor(pub ColorU);
Expand Down Expand Up @@ -1336,6 +1349,8 @@ impl Default for StyleTextAlignmentVert {
pub struct RectStyle {
/// Background color of this rectangle
pub background_color: Option<StyleBackgroundColor>,
/// Background size of this rectangle
pub background_size: Option<StyleBackgroundSize>,
/// Shadow color
pub box_shadow: Option<StyleBoxShadow>,
/// Gradient (location) + stops
Expand Down
32 changes: 30 additions & 2 deletions azul/src/display_list.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ use azul_css::{
Css, StyleTextAlignmentHorz, LayoutPosition,CssProperty, LayoutOverflow,
StyleFontSize, StyleBorderRadius, PixelValue, FloatValue, LayoutMargin,
StyleTextColor, StyleBackground, StyleBoxShadow, StyleBackgroundColor,
StyleBorder, BoxShadowPreDisplayItem, LayoutPadding, SizeMetric,
StyleBackgroundSize, StyleBorder, BoxShadowPreDisplayItem, LayoutPadding, SizeMetric,
BoxShadowClipMode, FontId, StyleTextAlignmentVert, RectStyle, RectLayout,
ColorU as StyleColorU
};
Expand Down Expand Up @@ -916,6 +916,7 @@ fn displaylist_handle_rect<'a,'b,'c,'d,'e,'f,'g, T: Layout>(
&bounds,
referenced_mutable_content.builder,
bg,
rect.style.background_size,
&referenced_mutable_content.app_resources);
}

Expand Down Expand Up @@ -1690,6 +1691,7 @@ fn push_background(
bounds: &TypedRect<f32, LayoutPixel>,
builder: &mut DisplayListBuilder,
background: &StyleBackground,
background_size: Option<StyleBackgroundSize>,
app_resources: &AppResources)
{
use azul_css::StyleBackground::*;
Expand Down Expand Up @@ -1745,14 +1747,39 @@ fn push_background(
let image_dimensions = app_resources.images.get(image_id).and_then(|i| Some(i.get_dimensions()))
.unwrap_or((bounds.size.width, bounds.size.height)); // better than crashing...

let size = TypedSize2D::new(image_dimensions.0, image_dimensions.1);
let size = match background_size {
Some(bg_size) => calculate_background_size(bg_size, &info, &image_dimensions),
None => TypedSize2D::new(image_dimensions.0, image_dimensions.1)
};

push_image(info, builder, app_resources, image_id, size);
}
},
NoBackground => { },
}
}

struct Ratio {
width: f32,
height: f32
}

fn calculate_background_size(bg_size: StyleBackgroundSize, info: &PrimitiveInfo<LayoutPixel>, image_dimensions: &(f32, f32))
-> TypedSize2D<f32, LayoutPixel>
{
let original_ratios = Ratio {
width: info.rect.size.width / image_dimensions.0,
height: info.rect.size.height / image_dimensions.1
};

let ratio = match bg_size {
StyleBackgroundSize::Contain => original_ratios.width.min(original_ratios.height),
StyleBackgroundSize::Cover => original_ratios.width.max(original_ratios.height)
};

TypedSize2D::new(image_dimensions.0 * ratio, image_dimensions.1 * ratio)
}

#[inline]
fn push_image(
info: &PrimitiveInfo<LayoutPixel>,
Expand Down Expand Up @@ -1933,6 +1960,7 @@ fn populate_css_properties(
match property {
BorderRadius(b) => { rect.style.border_radius = Some(*b); },
BackgroundColor(c) => { rect.style.background_color = Some(*c); },
BackgroundSize(c) => { rect.style.background_size = Some(*c); },
TextColor(t) => { rect.style.font_color = Some(*t); },
Border(b) => { StyleBorder::merge(&mut rect.style.border, &b); },
Background(b) => { rect.style.background = Some(b.clone()); },
Expand Down

0 comments on commit 5072e38

Please sign in to comment.