Wedge

Read as Markdown

import { Wedge } from "@pibbl/core";

Wedge uses WedgeProps and WedgeStyle. It shares Arc’s radius and radian sweep inputs but closes partial sweeps to the center, so their radial edges participate in painting and targeting. Full turns avoid a seam; annular sectors are not part of this component.

<Wedge
  style={{
    cx: 80,
    cy: 80,
    radius: 56,
    startAngle: -1.2,
    endAngle: 1.1,
    fill: "#f97316",
  }}
/>

See the Wedge live example.

API details from source

Describes a center-closed circular wedge primitive for JSX or createElement authoring.

Wedge: PibblPrimitiveComponent<WedgeProps, PrimitiveInput<WedgeProps, WedgeStyle>>

Parameters

props — Authored component inputs, supplied through JSX or createElement. See the linked props and style types.

Throws

When called directly; Pibbl mounts this component through JSX or createElement.

Implementation guidance for agents

Read the Drawing, layout, and effects companion for ownership, adaptation, failure modes, and verification. Agent start provides the version-selection workflow.

Complete minimal example

Compile this TSX module with jsx: "react-jsx" and jsxImportSource: "@pibbl/core", then load it from a browser entry point after the document body exists. It creates and mounts one canvas; dispose the controller before removing or replacing that canvas. The interactive study linked below adds controls beyond this minimal use case.

Download source

/** @jsxImportSource @pibbl/core */
import { pibbl, Wedge } from '@pibbl/core';

const canvas = document.createElement('canvas');
canvas.width = 320;
canvas.height = 240;
document.body.append(canvas);

const controller = pibbl(canvas, (
<Wedge
  style={{
    cx: 80,
    cy: 80,
    radius: 56,
    startAngle: -1.2,
    endAngle: 1.1,
    fill: "#f97316",
  }}
/>
));

window.addEventListener('pagehide', () => controller.dispose(), { once: true });

Complete minimal examples

Rounded and circular marks: Draw a circle, ellipse, rounded rectangle, arc, and wedge with typed props and styles. Plain source

Interactive examples

Wedge · Full page

Documentation version

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