Shape
A shape is the geometric boundary of a graphic block. It defines the outline of the block and the region that clips its fill. A graphic block without a shape is invisible, even if it has a fill: the engine has nothing to render the fill into.
Shape and fill are independent objects on the same block. The shape says “this region;” the fill says “this content.” Either can change without affecting the other. Replace a rectangle with an ellipse and the image inside reflows to the new boundary. Replace the image with a different one and the rectangle stays put.
Shape types
CE.SDK ships six shape types, each with its own configurable properties.
- Rectangle is the default and the most common. Supports corner radius for rounded rectangles. Used for image blocks, sticker frames, background panels.
- Ellipse is a circular or oval boundary. Used for round profile images, circular badges, oval crops.
- Polygon is a regular polygon with a configurable number of sides.
- Star is a star with configurable point count and inner diameter.
- Line is a straight line with configurable width and end cap style.
- Vector path is a custom shape defined by a vector path. This is the escape hatch for any geometry the built-in types do not cover: irregular outlines, custom illustrations, traced product silhouettes.
Non-destructive crop, baked in
The shape-and-fill separation is what makes CE.SDK’s crop behavior non-destructive. Cropping an image in the editor does not modify the image file. It modifies the shape that clips the fill: the underlying image data stays intact, and the visible portion changes because the shape’s boundary changed.
This has real consequences for the product.
- A user can crop, change their mind, uncrop, and never lose any fidelity. The original is always there.
- The same image fill can be shared across multiple blocks with different shapes, producing different crops of the same source without duplicating the image.
- Re-exporting at a different aspect ratio is a shape change, not a re-encode. The exported pixels come from the original at full fidelity.
This matters most in print-on-demand and photo-product platforms, where users iterate on crops and the platform needs to keep the source resolution available for the print render. The Photo Prints flow makes this explicit: customers crop interactively at preview resolution while the platform retains the full-resolution original for the actual print job.
Replacing a shape
The shape on a graphic block can be replaced at any time. The block keeps its position, size, fill, and effects; only the boundary changes.
When replacing a shape, the previous shape object should be explicitly destroyed if no other block is using it. Shape objects are not automatically garbage collected when detached, so long-running headless processes that swap shapes frequently should clean up after themselves to keep memory bounded.
Where shapes apply
Currently only the graphic block type supports the shape API. Text blocks, page blocks, and other block types define their boundary directly through dimensions and properties rather than through a separate shape object.
See fill for the content side, graphic-block for the combined container, and outline-stroke for the border that traces the shape’s boundary.
Links
Documentation and references for this concept.
Related Terms
Graphic Block
The standard unified block type (//ly.img.ubq/graphic) for all image, video, shape, and sticker content in CE.SDK, compo…
Fill
The content layer of a graphic block that defines what is visually rendered inside the block's shape boundary, one of fi…
Effects
Visual processing layers applied on top of a block's fill to modify its appearance, including LUT-based color filters, a…