Skip to content
Pibbl

Drawing, layout, and effects

Read as Markdown

Detailed agent guidance · All capabilities

  • Absolute: Places direct children in one declared container box.
  • AnchoredLayout: Arranges keyed boxes without covering one another or their anchors.
  • Arc: Draws an open circular stroke sweep.
  • Circle: Draws a center-and-radius circle with local paint and interaction.
  • Clip: Restricts recursive children to a Path2D or PathGeometry clipping region.
  • Ellipse: Draws a rotated ellipse from independent radii.
  • Flex: Arranges direct children with Pibbl’s explicit Flexbox subset.
  • Flow: Places direct children in the declared flow direction.
  • Grid: Places direct children in Pibbl’s explicit Grid subset.
  • Group: Applies a Canvas transform to recursive children.
  • HorizontalLine: Draws an allocation-aware horizontal line.
  • Image: Draws an asynchronously decoded browser image.
  • Layer: Caches recursive children in a persistent offscreen Pibbl instance.
  • Line: Draws an ordered polyline.
  • Overlay: Places direct children on a shared declared box.
  • Path: Paints a caller-owned Path2D with local interaction and style.
  • Polygon: Draws a closed polygon from numeric coordinate pairs.
  • Rectangle: Draws a local rectangle with paint, events, and optional rounded corners.
  • RegularPolygon: Draws a generated regular polygon with one explicit size mode.
  • Star: Draws one concave alternating-tip star outline.
  • SvgPath: Draws browser-parsed SVG path data.
  • Text: Draws recursive textual children with local fitting and paint.
  • VerticalLine: Draws an allocation-aware vertical line.
  • Wedge: Draws a filled or stroked center-closed circular sector.
  • createArcPath: Creates a fresh open circular Path2D sweep.
  • createCirclePath: Creates a fresh numeric circular Path2D.
  • createEllipsePath: Creates a fresh numeric elliptical Path2D.
  • createLinePath: Creates a fresh numeric polyline Path2D.
  • createPolygonPath: Creates a fresh rounded or sharp numeric polygon Path2D.
  • createRectanglePath: Creates a fresh numeric rectangular Path2D.
  • createRegularPolygonPath: Creates a fresh generated regular-polygon Path2D.
  • createStarPath: Creates a fresh alternating-tip star Path2D.
  • createSvgPath: Creates a fresh browser-parsed SVG Path2D.
  • createWedgePath: Creates a fresh center-closed circular-sector Path2D.
  • LayoutDiagnostic and layoutDiagnostic: Creates contextual errors for invalid style, geometry, and layout values.
  • measureElement: Purely asks an opt-in primitive for a constrained measurement.
  • Path bending: Define reusable arc and path bends and compose them with other geometry mappings.
  • PathGeometry: Build and edit packed path geometry and export independent native or SVG snapshots.
  • Composable path transforms: Compose envelope, four-corner, and affine mappings before approximating editable geometry.
  • useCanvasContext: Returns the current component’s isolated Canvas 2D context.
  • useFlowField2D and useFlowSource2D: Share a component-owned velocity field and localized force or heat sources.
  • useLayoutBox: Returns the current child-local allocated layout box.
  • useLinePath: Memoizes a Path2D for numeric line coordinates.
  • useRectPath: Memoizes a rectangular Path2D with optional rounding and pixel alignment.
  • useSvgPath: Memoizes a Path2D from SVG path data.
  • Filters: Import appearance-only filter factories without including unused effects.
  • Layout types: Declared-box, measurement, and explicit layout-component contracts.
  • Style and primitive types: Local drawing styles, shared paint vocabularies, and primitive-extension contracts.

Documentation version

Section titled “Documentation version”

Documentation built with @pibbl/core 0.0.2, revision 2dccb19. ALPHA — NOT FOR PRODUCTION USE.