diff --git a/compositor_api/src/types/component.rs b/compositor_api/src/types/component.rs index c3a928eed..740e1f035 100644 --- a/compositor_api/src/types/component.rs +++ b/compositor_api/src/types/component.rs @@ -93,6 +93,15 @@ pub struct View { /// List of box shadows. pub box_shadow: Option>, + /// (**default=`0.0`**) Padding for all sides of the component. + pub padding: Option, + + /// (**default=`0.0`**) Padding for the top and bottom of the component. + pub padding_vertical: Option, + + /// (**default=`0.0`**) Padding for the left and right of the component. + pub padding_horizontal: Option, + /// (**default=`0.0`**) Padding on top side in pixels. pub padding_top: Option, diff --git a/compositor_api/src/types/from_component.rs b/compositor_api/src/types/from_component.rs index 13988454f..c16c449c7 100644 --- a/compositor_api/src/types/from_component.rs +++ b/compositor_api/src/types/from_component.rs @@ -87,10 +87,10 @@ impl TryFrom for scene::ViewComponent { None => scene::Overflow::Hidden, }; let padding = scene::Padding { - top: view.padding_top.unwrap_or(0.0), - right: view.padding_right.unwrap_or(0.0), - bottom: view.padding_bottom.unwrap_or(0.0), - left: view.padding_left.unwrap_or(0.0), + top: view.padding_top.or(view.padding_vertical).or(view.padding).unwrap_or(0.0), + bottom: view.padding_bottom.or(view.padding_vertical).or(view.padding).unwrap_or(0.0), + left: view.padding_left.or(view.padding_horizontal).or(view.padding).unwrap_or(0.0), + right: view.padding_right.or(view.padding_horizontal).or(view.padding).unwrap_or(0.0), }; if padding.top < 0.0 || padding.right < 0.0 || padding.bottom < 0.0 || padding.left < 0.0 { diff --git a/compositor_render/src/scene/layout.rs b/compositor_render/src/scene/layout.rs index 55c161086..028724c40 100644 --- a/compositor_render/src/scene/layout.rs +++ b/compositor_render/src/scene/layout.rs @@ -161,16 +161,11 @@ impl StatefulLayoutComponent { child: &mut StatefulComponent, position: AbsolutePosition, parent_size: Size, - child_padding: Padding, parent_padding: Padding, pts: Duration, ) -> NestedLayout { - let width = position - .width - .unwrap_or(parent_size.width + child_padding.horizontal()); - let height = position - .height - .unwrap_or(parent_size.height + child_padding.vertical()); + let width = position.width.unwrap_or(parent_size.width); + let height = position.height.unwrap_or(parent_size.height); let top = match position.position_vertical { VerticalPosition::TopOffset(top) => top + parent_padding.top, diff --git a/compositor_render/src/scene/view_component.rs b/compositor_render/src/scene/view_component.rs index 0f51bdd2b..7a3608234 100644 --- a/compositor_render/src/scene/view_component.rs +++ b/compositor_render/src/scene/view_component.rs @@ -66,10 +66,6 @@ impl StatefulViewComponent { .with_padding(view.padding) } - pub(super) fn padding(&self, pts: Duration) -> Padding { - self.view(pts).padding - } - pub(super) fn component_id(&self) -> Option<&ComponentId> { self.end.id.as_ref() } diff --git a/compositor_render/src/scene/view_component/layout.rs b/compositor_render/src/scene/view_component/layout.rs index cf77b15a9..d4747add6 100644 --- a/compositor_render/src/scene/view_component/layout.rs +++ b/compositor_render/src/scene/view_component/layout.rs @@ -2,8 +2,8 @@ use std::time::Duration; use crate::{ scene::{ - layout::StatefulLayoutComponent, BorderRadius, Overflow, Padding, Position, RGBAColor, - Size, StatefulComponent, ViewChildrenDirection, + layout::StatefulLayoutComponent, BorderRadius, Overflow, Position, RGBAColor, Size, + StatefulComponent, ViewChildrenDirection, }, transformations::layout::{LayoutContent, Mask, NestedLayout}, }; @@ -72,18 +72,12 @@ impl ViewComponentParam { let children: Vec<_> = children .iter_mut() .map(|child| { - let (position, padding) = match child { - StatefulComponent::Layout(StatefulLayoutComponent::View(view)) => { - (view.position(pts), view.padding(pts)) - } - StatefulComponent::Layout(layout) => (layout.position(pts), Padding::default()), - ref non_layout_component => ( - Position::Static { - width: non_layout_component.width(pts), - height: non_layout_component.height(pts), - }, - Padding::default(), - ), + let position = match child { + StatefulComponent::Layout(layout) => layout.position(pts), + ref non_layout_component => Position::Static { + width: non_layout_component.width(pts), + height: non_layout_component.height(pts), + }, }; match position { Position::Static { width, height } => { @@ -108,7 +102,6 @@ impl ViewComponentParam { child, position, size, - padding, self.padding, pts, ) diff --git a/schemas/scene.schema.json b/schemas/scene.schema.json index 94f57f08d..c6a71b8ff 100644 --- a/schemas/scene.schema.json +++ b/schemas/scene.schema.json @@ -252,6 +252,30 @@ "$ref": "#/definitions/BoxShadow" } }, + "padding": { + "description": "(**default=`0.0`**) Padding for all sides of the component.", + "type": [ + "number", + "null" + ], + "format": "float" + }, + "padding_vertical": { + "description": "(**default=`0.0`**) Padding for the top and bottom of the component.", + "type": [ + "number", + "null" + ], + "format": "float" + }, + "padding_horizontal": { + "description": "(**default=`0.0`**) Padding for the left and right of the component.", + "type": [ + "number", + "null" + ], + "format": "float" + }, "padding_top": { "description": "(**default=`0.0`**) Padding on top side in pixels.", "type": [ diff --git a/snapshot_tests/snapshots b/snapshot_tests/snapshots index ee860bd99..68b59672c 160000 --- a/snapshot_tests/snapshots +++ b/snapshot_tests/snapshots @@ -1 +1 @@ -Subproject commit ee860bd99af91b945a637c0efc8252f1cc35297e +Subproject commit 68b59672c13cf498c1de04c240d72242d2c1a57d diff --git a/snapshot_tests/view/nested_padding_static_children.scene.json b/snapshot_tests/view/nested_padding_static_children.scene.json index 0b6a65fce..07cfc8d24 100644 --- a/snapshot_tests/view/nested_padding_static_children.scene.json +++ b/snapshot_tests/view/nested_padding_static_children.scene.json @@ -13,8 +13,6 @@ "children": [ { "type": "view", - "padding_top": 10, - "padding_left": 5, "border_width": 4, "border_color": "#FF00FFFF", "background_color": "#0000FFFF", diff --git a/snapshot_tests/view/padding_absolute_left_children.scene.json b/snapshot_tests/view/padding_absolute_left_children.scene.json index fc72b44f0..c7f958d9e 100644 --- a/snapshot_tests/view/padding_absolute_left_children.scene.json +++ b/snapshot_tests/view/padding_absolute_left_children.scene.json @@ -13,8 +13,6 @@ "children": [ { "type": "view", - "padding_top": 10, - "padding_left": 5, "background_color": "#0000FFFF", "children": [] }, diff --git a/snapshot_tests/view/padding_absolute_right_children.scene.json b/snapshot_tests/view/padding_absolute_right_children.scene.json index a0291caad..23837e825 100644 --- a/snapshot_tests/view/padding_absolute_right_children.scene.json +++ b/snapshot_tests/view/padding_absolute_right_children.scene.json @@ -13,8 +13,6 @@ "children": [ { "type": "view", - "padding_top": 10, - "padding_left": 5, "background_color": "#0000FFFF", "children": [] }, diff --git a/snapshot_tests/view/row_view_padding_static_children.scene.json b/snapshot_tests/view/row_view_padding_static_children.scene.json index 53c2a39d7..0e31b69f7 100644 --- a/snapshot_tests/view/row_view_padding_static_children.scene.json +++ b/snapshot_tests/view/row_view_padding_static_children.scene.json @@ -13,7 +13,6 @@ "children": [ { "type": "view", - "padding_left": 20, "background_color": "#0000FFFF", "children": [] }, diff --git a/snapshot_tests/view/column_view_padding_static_children.scene.json b/snapshot_tests/view/unsized_view_padding_static_children.scene.json similarity index 85% rename from snapshot_tests/view/column_view_padding_static_children.scene.json rename to snapshot_tests/view/unsized_view_padding_static_children.scene.json index de34427c2..47c7fa9d9 100644 --- a/snapshot_tests/view/column_view_padding_static_children.scene.json +++ b/snapshot_tests/view/unsized_view_padding_static_children.scene.json @@ -8,13 +8,9 @@ "type": "view", "background_color": "#FF0000FF", "direction": "column", - "width": 300, - "height": 300, "children": [ { "type": "view", - "padding_top": 10, - "padding_left": 20, "border_width": 4, "border_color": "#FF00FFFF", "background_color": "#0000FFFF", @@ -32,8 +28,6 @@ "children": [ { "type": "view", - "width": 250, - "height": 250, "border_width": 4, "border_color": "#FF00FFFF", "background_color": "#00FFFFFF", diff --git a/src/snapshot_tests/view_tests.rs b/src/snapshot_tests/view_tests.rs index 24eaa1f50..a79eb57d1 100644 --- a/src/snapshot_tests/view_tests.rs +++ b/src/snapshot_tests/view_tests.rs @@ -215,9 +215,9 @@ fn view_tests() { ..default.clone() }); runner.add(TestCase { - name: "view/column_view_padding_static_children", + name: "view/unsized_view_padding_static_children", scene_updates: scene_from_json(include_str!( - "../../snapshot_tests/view/column_view_padding_static_children.scene.json" + "../../snapshot_tests/view/unsized_view_padding_static_children.scene.json" )), ..default.clone() }); diff --git a/ts/live-compositor/src/api.generated.ts b/ts/live-compositor/src/api.generated.ts index 9b73a865e..820a34d07 100644 --- a/ts/live-compositor/src/api.generated.ts +++ b/ts/live-compositor/src/api.generated.ts @@ -328,6 +328,18 @@ export type Component = * List of box shadows. */ box_shadow?: BoxShadow[] | null; + /** + * (**default=`0.0`**) Padding for all sides of the component. + */ + padding?: number | null; + /** + * (**default=`0.0`**) Padding for the top and bottom of the component. + */ + padding_vertical?: number | null; + /** + * (**default=`0.0`**) Padding for the left and right of the component. + */ + padding_horizontal?: number | null; /** * (**default=`0.0`**) Padding on top side in pixels. */ diff --git a/ts/live-compositor/src/components/View.ts b/ts/live-compositor/src/components/View.ts index d8a3cb702..5802bc91f 100644 --- a/ts/live-compositor/src/components/View.ts +++ b/ts/live-compositor/src/components/View.ts @@ -149,10 +149,13 @@ function sceneBuilder( box_shadow: style.boxShadow, - padding_top: style.paddingTop ?? style.paddingVertical ?? style.padding, - padding_bottom: style.paddingBottom ?? style.paddingVertical ?? style.padding, - padding_right: style.paddingRight ?? style.paddingHorizontal ?? style.padding, - padding_left: style.paddingLeft ?? style.paddingHorizontal ?? style.padding, + padding: style.padding, + padding_vertical: style.paddingVertical, + padding_horizontal: style.padding, + padding_top: style.paddingTop, + padding_bottom: style.paddingBottom, + padding_right: style.paddingRight, + padding_left: style.paddingLeft, }; }