SHIFT + D

Filter by package

  • Overview
  • Ancestor variants
  • Composition
  • Edge
  • Features
  • Linear numeric
  • Logic
  • Prose
  • Source transform
  • SPA links
  • Utilities

Drawable

Updated on August 22, 2024Source codeTests

Drawable is a class that enriches a stroke (an array of points as [x, y, pressure]), allowing it to:

  • Draw additional points on the stroke
  • Store a d (i.e. a string that can be set to the d attribute of an SVG <path>), updated automatically after drawing additional points
  • Store a status (ready, drawing, or drawn)

Construct a Drawable instance

The Drawable constructor accepts two parameters:

Parameter
Type
Required
Description
stroke
Array
yes
An array of points as [x, y, pressure].
options
Object
no
Options for the Drawable instance. See the Drawable constructor options section for more guidance.

Drawable constructor options

Option
Type
Default
Description
toD
Function
toD

A function that, when called, returns a d (String) for the Drawable instance.

Defaults to the toD function exported from Baleada Logic, which is an adaptation of the perfect-freehand rendering example.

Baleada Logic also exports a toFlattenedD function, adapted from the perfect-freehand flattening example, which you can pass to the toD option if you want to flatten your strokes.

State and methods

Property
Type
Description
Parameters
Return value
stroke
Getter/Setter
See return value
N/A

The stroke (Array) passed to the constructor.

If you assign a value directly to stroke, a setter will pass the new value to setStroke.

status
Getter
See return value
N/A
The status (String) of the Drawable instance. status is ready after the instance is constructed, and changes to drawing while the instance is drawing and drawn after the instance is done drawing.
d
Getter
See return value
N/A
The d (String) generated by the toD function passed to the constructor.
toD
Getter
See return value
N/A
The toD (Function) passed to the constructor.
draw(points, options)
Function
Draws additional points on the stroke.

An array of points as [x, y, pressure] and options for the getStroke function from perfect-freehand.

See the perfect-freehand docs for more guidance.

The Drawable instance

API design compliance

Spec
Compliance status
Notes
Access functionality by constructing an instance
Constructor accepts two parameters: a piece of state, and an options object.
Constructor does not access the DOM
Takes the form of a JavaScript Object
State and methods are accessible through properties of the object
Methods always return the instance
Stores the constructor's state in a public getter named after the state's type
stroke
Has a public method you can use to set a new value for that public getter
setStroke
Has a setter for that getter so you can assign a new value directly
Any other public getters that should be set by you in some cases also have setters and set<Property> methods
none
Has at least one additional getter property that you can't (and shouldn't) set directly
status, d
Has one or more public methods that expose core functionality
fetch, get, patch, post, put, delete, abort
Either has no side effects or has side effects that can be cleaned up with a stop method
Uses the sentence template to decide what state type should be accepted by a constructor
"A stroke can be drawn."
Constructor does not accept options that only customize the behavior of public methods, it allows those options to be passed to the method itself as a parameter.
Named after its core action, proper-cased and suffixed with able

DelayableFetchable

Edit doc on GitHub

ON THIS PAGE

DrawableConstruct a Drawable instanceDrawable constructor optionsState and methodsAPI design compliance