Skip to content

Accept FillInput for backgroundColor/borderColor in LayoutContainer #86

Description

@deosulav

Please Describe The Problem To Be Solved

LayoutContainer currently accepts ColorSource for backgroundColor/borderColor. Supporting FillInput unlocks gradient use for backgrounds.

(Optional): Suggest A Solution
Currently, implementation-wise, the border can only accept StrokeInput. A combination of rectangle fill and cut by inner smaller rectangle could allow this.

new Graphics()
  .roundShape(borderPoints, radius) //border-box rectangle
  .fill(borderColor)
  .roundShape(innerContentPoints, innerRadius) //content-box rectangle
  .cut();

In my custom limited implementation, I've used the flexibility of round points to apply border radius for each corner as per layout conditionally as well.

 const borderPoints: RoundedPoint[] = [
          {
            x: 0,
            y: 0,
            radius: borderTopLeftRadius,
          },
          {
            x: width,
            y: 0,
            radius: borderTopRightRadius,
          },
          {
            x: width,
            y: height,
            radius: borderBottomRightRadius,
          },
          {
            x: 0,
            y: height,
            radius: borderBottomLeftRadius,
          },
        ];

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions