Class DiagramBuilder

Construct a diagram with a Penrose-like API. You may find it useful to destructure an object of this type:

const {
  type,
  predicate,
  circle,
  line,
  ensure,
  // ...
} = new DiagramBuilder(canvas(400, 400), "seed");

Index

Constructors

constructor

new DiagramBuilder(canvas, variation?, lassoStrength?): DiagramBuilder
Create a new diagram builder.
Parameters
- canvas: Canvas
  Local dimensions of the SVG. This has no effect on the rendered size of your diagram--only the size of the local coordinate system.
- variation: string = ""
  Randomness seed
- lassoStrength: number = 0
  Strength of the optimizers lasso term. Higher values encourage diagram continuity, while lower values encourage reactivity. Default is 0.
Returns DiagramBuilder
- Defined in bloom/src/core/builder.ts:255

Methods

addEventListener

addEventListener(shape, event, listener): void
Parameters
- shape: Shape
- event: string
- listener: ((e: any, diagram: Diagram) => void)
  - - (e, diagram): void
    - Parameters
      e: any
      diagram: Diagram
      Returns void
Returns void
- Defined in bloom/src/core/builder.ts:714

bindToInput

bindToInput(num, info?): Var
Create a new input, and constrain that input to a calculated value. This is useful for reading calculated values from the diagram using getInput, and for creating draggable values.
Parameters
- num: Num
  Value to bind the input to
- Optionalinfo: InputOpts
  InputOpts for the input
Returns Var
- Defined in bloom/src/core/builder.ts:708

build

build(): Promise<Diagram>
Build the diagram.

Returns Promise<Diagram>
- Defined in bloom/src/core/builder.ts:644

circle

circle(_props?): Readonly<Circle>
Create a new circle. Options: see https://penrose.cs.cmu.edu/docs/ref/style/shapes/circle
Parameters
- _props: Partial<CircleProps> = {}
Returns Readonly<Circle>
- Defined in bloom/src/core/builder.ts:536

ellipse

ellipse(_props?): Readonly<Ellipse>
Create a new ellipse. Options: see https://penrose.cs.cmu.edu/docs/ref/style/shapes/ellipse
Parameters
- _props: Partial<EllipseProps> = {}
Returns Readonly<Ellipse>
- Defined in bloom/src/core/builder.ts:540

encourage

encourage(objective, weight?): void
Register an objective with the diagram.
Parameters
- objective: Num
  A Num created with the objectives module (or, if you know what you're doing, by yourself. You can read about creating custom constaints at https://penrose.cs.cmu.edu/docs/ref/constraints)
- Optionalweight: number
  An optional weight to multiply the objective by. If you find that your objectives are not being satisfied, you may want to try increasing the weight.
Returns void
- Defined in bloom/src/core/builder.ts:604

ensure

ensure(constraint, weight?): void
Register a constraint with the diagram.
Parameters
- constraint: Num
  A Num created with the constraints module (or, if you know what you're doing, by yourself. You can read about creating custom constaints at https://penrose.cs.cmu.edu/docs/ref/constraints)
- Optionalweight: number
  An optional weight to multiply the constraint by. If you find that your constraints are not being satisfied, you may want to try increasing the weight.
Returns void
- Defined in bloom/src/core/builder.ts:589

equation

equation(_props?): Readonly<Equation>
Create a new equation. Options: see https://penrose.cs.cmu.edu/docs/ref/style/shapes/equation
Parameters
- _props: Partial<EquationProps> = {}
Returns Readonly<Equation>
- Defined in bloom/src/core/builder.ts:544

forall

forall(vars, func): void
Iterate over all possible assignments of substances to variables. This selection deduplicates assignments.
Parameters
- vars: SelectorVars
- func: ((assigned: SelectorAssignment, matchId: number) => void)
  - - (assigned, matchId): void
    - Parameters
      assigned: SelectorAssignment
      matchId: number
      Returns void
Returns void
- Defined in bloom/src/core/builder.ts:485

forallWhere

forallWhere(vars, where, func): void
Iterate over all possible assignments of substances to variables, subject to condition where. This selection does NOT deduplicate assignments.
Parameters
- vars: SelectorVars
- where: ((assigned: SelectorAssignment) => boolean)
  - - (assigned): boolean
    - Parameters
      assigned: SelectorAssignment
      Returns boolean
- func: ((assigned: SelectorAssignment, matchId: number) => void)
  - - (assigned, matchId): void
    - Parameters
      assigned: SelectorAssignment
      matchId: number
      Returns void
Returns void
- Defined in bloom/src/core/builder.ts:471

getInput

getInput(name): Var
Get an input by name.
Parameters
- name: string
  Name of the input
Returns Var
- Defined in bloom/src/core/builder.ts:633

group

group(_props?): Readonly<Group>
Create a new group. Options: see https://penrose.cs.cmu.edu/docs/ref/style/shapes/group Note that, unlike in Penrose, the clipPath field takes either a Shape or null.
Parameters
- _props: Partial<GroupProps> = {}
Returns Readonly<Group>
- Defined in bloom/src/core/builder.ts:577

image

image(_props?): Readonly<Image>
Create a new image. Options: see https://penrose.cs.cmu.edu/docs/ref/style/shapes/image
Parameters
- _props: Partial<ImageProps> = {}
Returns Readonly<Image>
- Defined in bloom/src/core/builder.ts:548

input

input(info?): Var
Create a new input.
Parameters
- Optionalinfo: InputOpts
  InputOpts for the input
Returns Var
- Defined in bloom/src/core/builder.ts:496

layer

layer(below, above): void
Require that one shape be above another.
Parameters
- below: Shape
  The bottom shape
- above: Shape
  The top shape
Returns void
- Defined in bloom/src/core/builder.ts:616

line

line(_props?): Readonly<Line>
Create a new line. Options: see https://penrose.cs.cmu.edu/docs/ref/style/shapes/line
Parameters
- _props: Partial<LineProps> = {}
Returns Readonly<Line>
- Defined in bloom/src/core/builder.ts:552

path

path(_props?): Readonly<Path>
Create a new path. Options: see https://penrose.cs.cmu.edu/docs/ref/style
Parameters
- _props: Partial<PathProps> = {}
Returns Readonly<Path>
- Defined in bloom/src/core/builder.ts:556

polygon

polygon(_props?): Readonly<Polygon>
Create a new polygon. Options: see https://penrose.cs.cmu.edu/docs/ref/style/shapes/polygon
Parameters
- _props: Partial<PolygonProps> = {}
Returns Readonly<Polygon>
- Defined in bloom/src/core/builder.ts:560

polyline

polyline(_props?): Readonly<Polyline>
Create a new polyline. Options: see https://penrose.cs.cmu.edu/docs/ref/style/shapes/polyline
Parameters
- _props: Partial<PolylineProps> = {}
Returns Readonly<Polyline>
- Defined in bloom/src/core/builder.ts:564

predicate

predicate(): Predicate
Create a new predicate over substances.

The returned predicate function can be used to declare relationships between substances (by calling the predicate) and to query existing relation (by calling the predicate's .test method):
```
const Vector = type();
const Orthogonal = predicate();

const v1 = Vector();
const v2 = Vector();

Orthogonal.test(v1, v2); // returns false
Orthogonal(v1, v2);
Orthogonal.test(v1, v2); // returns true
```
Returns Predicate
- Defined in bloom/src/core/builder.ts:385

rectangle

rectangle(_props?): Readonly<Rectangle>
Create a new rectangle. Options: see https://penrose.cs.cmu.edu/docs/ref/style/shapes/rectangle
Parameters
- _props: Partial<RectangleProps> = {}
Returns Readonly<Rectangle>
- Defined in bloom/src/core/builder.ts:568

sharedInput

sharedInput(input, initOverride?): Var
Create an input from a SharedInput.
Parameters
- input: SharedInput
  SharedInput to create an input from
- OptionalinitOverride: number
  Override the initial value of the shared input
Returns Var
- Defined in bloom/src/core/builder.ts:524

substance

substance(type?): Substance
Instantiate a new substance. If no type is given, this is identical to creating and empty object. If a type T is given, this method is equivalent to calling T().
Parameters
- Optionaltype: Type
  Type to instantiate
Returns Substance
- Defined in bloom/src/core/builder.ts:338

text

text(_props?): Readonly<Text>
Create a new text. Options: see https://penrose.cs.cmu.edu/docs/ref/style/shapes/text
Parameters
- _props: Partial<TextProps> = {}
Returns Readonly<Text>
- Defined in bloom/src/core/builder.ts:572

time

time(): Var
An input giving the current time since the diagram was mounted. You can use this to create animations. However, you must use the AnimatedRenderer component to render the diagram, otherwise this input will not be updated.

Returns Var
- Defined in bloom/src/core/builder.ts:625

type

type(): Type
Create a new substance type. The type object serves as a constructor for new substances:
```
const Vector = type();

const v1 = Vector();
const v2 = Vector();
...
```
Returns Type
- Defined in bloom/src/core/builder.ts:359

Class DiagramBuilder

Index

Constructors

Methods

Constructors

constructor

Parameters

Returns DiagramBuilder

Methods

addEventListener

Parameters

Parameters

Returns void

Returns void

bindToInput

Parameters

Returns Var

build

Returns Promise<Diagram>

circle

Parameters

Returns Readonly<Circle>

ellipse

Parameters

Returns Readonly<Ellipse>

encourage

Parameters

Returns void

ensure

Parameters

Returns void

equation

Parameters

Returns Readonly<Equation>

forall

Parameters

Parameters

Returns void

Returns void

forallWhere

Parameters

Parameters

Returns boolean

Parameters

Returns void

Returns void

getInput

Parameters

Returns Var

group

Parameters

Returns Readonly<Group>

image

Parameters

Returns Readonly<Image>

input

Parameters

Returns Var

layer

Parameters

Returns void

line

Parameters

Returns Readonly<Line>

path

Parameters

Returns Readonly<Path>

polygon

Parameters

Returns Readonly<Polygon>

polyline

Parameters

Returns Readonly<Polyline>

predicate

Returns Predicate

rectangle

Parameters

Returns Readonly<Rectangle>

sharedInput

Parameters