Available in the Full edition.
EditState’s annotations and annotationList.
Conventions
- Points (
{ x, y }) and lengths are in the crop’s px. A size or a width set by hand is a share of the photo’s shorter side. - The editor writes every value of a piece’s style, its default too. It leaves out only what the piece has none of: a bend not set, no glue, no sides, no kept route, no points, no words, no width set, no step, no
faces, no anchor, no arrows. - A state you write may leave a field out. It reads as its default, given below.
- Every annotation has a
type, anid(afollowed by digits and lowercase letters) and acolor(#rrggbbor#rgb). - An
angleis the turn of the piece’s own frame on the photo, in degrees with 2 decimals, written in (−180°, 180°], in the senserotationturns the photo. A piece is born level on the screen, the photo’s turn and flips undone, so on a photo turned byrotationand not flipped it starts at minus that turn. From then on it turns and flips with the photo, and a piece with a body (a shape, a text, a Number, the list, a drawing, a lens) turns by its rotate handle too. Letters never mirror. Left out,0: the photo’s own frame.
Line
type: 'LINE': a pointing line (an arrow), a shape’s Line or a drawing.
'LINE'
required
string
required
string
required
{ x: number; y: number }
required
Its start.
{ x: number; y: number }
required
Its tip.
'ARROW' | 'SHAPE'
'SHAPE' for a shape’s Line. Left out, 'ARROW': a pointing line or a drawing.'CURVE' | 'STRAIGHT' | 'ELBOW' | 'ROUNDED_ELBOW' | 'FREE'
The way it runs.
FREE runs along the stroke drawn by hand. Left out at its kind’s: CURVE for a pointing line, STRAIGHT for a shape’s Line, FREE for a drawing.number | null
A curve’s bend, its signed share of the chord, −1 to 1. An elbow’s middle leg, 0 to 1. Left out or
null, automatic (an elbow’s middle leg halfway).{ x: number; y: number; pressure?: number }[]
The stroke drawn by hand, with the pen’s
pressure (0 to 1) where a pen drew it. Kept whatever its path, so Freehand comes back as it was drawn.'NONE' | 'ARROW' | 'BAR' | 'DOT' | 'TRIANGLE'
Its start’s end. Left out at its kind’s:
NONE.'NONE' | 'ARROW' | 'BAR' | 'DOT' | 'TRIANGLE'
Its tip’s end. Left out at its kind’s:
ARROW on a pointing line, nothing on a shape’s Line or a drawing.'SOLID' | 'DASHED' | 'DOTTED' | 'SKETCH' | 'MARKER'
Left out,
SOLID.number
Its own frame’s turn: its elbow routes in it and its drawing’s box stands in it. Set again level on the screen when its path becomes an elbow. A drawing’s turns by its rotate handle; an arrow has none.
{ from?: string | null; to?: string | null }
What each end landed on and moves with: an annotation’s
id, or 'LIST' for the list of the Numbers. Left out or null, a loose end. An end glued to the list is let go where it is when the list goes.{ from?: string | null; to?: string | null }
The side (
TOP, BOTTOM, LEFT or RIGHT) of the annotation each glued end glued to, in that one’s own frame. Left out, the side its point gives.{ bend: number | null; corners: { x: number; y: number }[]; middle: { axis: 'x' | 'y'; from: number; least: number; to: number } | null }
An elbow’s route kept as it was drawn, once the glue of its ends changed with no end, middle leg or bend moved (Detach, what an end was glued to deleted or unlisted, ”+ Text” on it, its body moved): its corners from its start to its tip and its middle leg, in its own frame (the crop’s px turned by its
angle), for the bend it was routed with. It holds while its ends stand where its corners begin and end. Left out, the route its ends and what they are glued to give.Ruler
type: 'RULER': a measure between two ends.
'RULER'
required
string
required
string
required
{ x: number; y: number }
required
{ x: number; y: number }
required
number
Its label’s own frame’s turn. The label turns with the photo, and a half turn more where it would read upside down. A ruler has no rotate handle.
string
The measure written on it. Left out, empty.
number
Its label’s size, 0.02 to 0.065. Left out, small (
0.028).'BAR' | 'ARROW' | 'NONE'
What both its ends draw. Left out,
BAR.string
As a line’s.
'LIGHT' | 'DARK' | 'ACCENT'
Its label’s theme. Left out,
LIGHT.Text and Number
type: 'TEXT': a text, or a Number of the Number tool.
'TEXT'
required
string
required
string
required
{ x: number; y: number }
required
The point its box grows from: the box’s center where it grows both ways, else the middle of the side it is held by.
'TEXT' | 'NUMBER'
'NUMBER' for a Number. Left out, 'TEXT'.number
Its own frame’s turn: its box, its badge and its letters stand in it. Turned by its rotate handle, and a text pinned to a shape, a drawing or a lens turns with that piece.
string
Its title’s words. Left out, empty.
string
The words under the title. Left out, empty.
{ x: 'BOTH' | 'LEFT' | 'RIGHT'; y: 'BOTH' | 'DOWN' | 'UP' }
The way it grows from
at. 'LEFT' holds its right edge, 'RIGHT' its left, 'UP' its bottom, 'DOWN' its top. Left out, both ways on both.'TOP' | 'BOTTOM' | 'LEFT' | 'RIGHT'
The side of its box facing what it is pinned to (a lens, a shape or a drawing), or, on the text ”+ Text” made for a line, the line’s start (
'BOTTOM' over it, 'TOP' under it). Its words lay out from that side, which stays put. Left out on a text that faces nothing.{ kind: 'POINT'; at } | { kind: 'PIECE'; id } | null
What it points at: a point, or the annotation it is pinned to. Left out, nothing.
object[]
The arrows the user added to it. See Added arrows.
'PLAIN' | 'BOX' | 'CAPTION'
Plain, on a box, or
CAPTION: filled letters in a thick outline. Left out, BOX.'SQUARE' | 'SOFT' | 'ROUND'
Its box’s corners. Left out,
ROUND.'TIGHT' | 'NORMAL' | 'LOOSE'
The room its box keeps round its words. Left out,
NORMAL.'inter' | 'montserrat' | 'oswald' | 'anton' | 'playfair-display' | 'courier-prime' | 'caveat' | 'pacifico' | 'permanent-marker'
Its letter, by its slug. Left out,
inter.number
Its title’s size, 0.02 to 0.065. Left out,
0.036.number | null
A width set by hand: its box’s exact width. Left out or
null, its box hugs its words.'LIGHT' | 'DARK' | 'ACCENT'
What sits behind its words. Left out,
LIGHT.'NONE' | 'DOT' | 'NUMBER'
What stands before a text’s title. Left out, the dot. A Number’s is never read: it always shows its badge.
number
Its place in its count: a Number’s among the Numbers, a text’s in the number format among those texts. Left out, none: it counts first, in the list’s order.
Shape
type: 'SHAPE': a rectangle, a rounded rectangle or an ellipse.
'SHAPE'
required
string
required
string
required
{ x: number; y: number; width: number; height: number }
required
Its box, in its own frame.
number
Its own frame’s turn on the photo, about its box’s middle. Turned by its rotate handle.
'RECT' | 'ROUNDED' | 'ELLIPSE'
Left out,
ELLIPSE.number
The opacity its inside is filled at in its color, 0 to 1 (the bar’s presets 0.13, 0.5 and 1). Left out,
0: its outline alone.string
Its outline’s, as a line’s.
Lens
type: 'LENS': a magnified detail, with a line to the point it magnifies.
'LENS'
required
string
required
string
required
{ x: number; y: number }
required
Its center.
number
required
Its radius, above 0.
{ x: number; y: number }
required
The point it magnifies.
number
Its magnification, 1 to 8 (the bar’s presets 1, 1.5, 2, 2.5 and 3, its slider 1 to 3). Left out,
1.5.'CIRCLE' | 'ROUNDED'
Left out,
CIRCLE.'LIGHT' | 'DARK' | 'ACCENT'
Its rim’s theme. Left out,
LIGHT.'SOLID' | 'DASHED' | 'DOTTED' | 'SKETCH' | 'MARKER' | 'TRANSPARENT'
Its line’s stroke. Left out,
SOLID.'CURVE' | 'STRAIGHT' | 'ELBOW' | 'ROUNDED_ELBOW'
The way its line runs, never
FREE. Left out, CURVE.number | null
Its line’s bend, as a line’s. Left out, automatic.
string
Its line’s weight. Left out,
MEDIUM_THIN.'NONE' | 'ARROW' | 'BAR' | 'DOT' | 'TRIANGLE'
How its line ends at the lens. Left out,
NONE.'NONE' | 'ARROW' | 'BAR' | 'DOT' | 'TRIANGLE'
How its line ends on the origin. Left out,
DOT, the ringed dot.{ x: number; y: number } | null
Where its line leaves its rim, a share (0 to 1) of its box, where the user moved it. Left out, toward the origin.
number
Its own frame’s turn: its rim stands in it, and its line leaves it by the side that faces the origin. Turned by its rotate handle, which leaves
lineAngle as it is.number
Its line’s own frame’s turn, apart from the lens’s: its elbow routes in it. Set level on the screen when its path becomes an elbow. Left out,
0.Added Arrows
A text’sarrows[], and the list’s: each arrow the user added to it.
{ x: number; y: number }
required
Its tip.
{ x: number; y: number } | null
Its start on its owner’s box (a text’s box, the list’s block), a share (0 to 1) of the box, where the user moved it. Left out, where the drawing puts it.
string | null
What its tip landed on and moves with: an annotation’s
id (its own text’s too: a loop round it), or 'LIST' for the list of the Numbers (the list’s own arrow’s too: a loop round it). Left out, a loose tip.'TOP' | 'BOTTOM' | 'LEFT' | 'RIGHT' | null
The side of that annotation its tip glued to. Left out where none did.
object
Its elbow’s route kept as it was drawn, as a line’s
route. Left out, the route its tip gives.number
Its own frame’s turn: it leaves its owner and its elbow routes in it.
string
As a line’s. Each left out reads as its default: a curve, no start, solid and medium thin, ending in the ringed dot.
The List
annotationList: the Numbers’ list, one block. null: no list.
{ x: number; y: number }
required
Its block’s center.
number
Its block’s own frame’s turn. Turned by its rotate handle.
string
Its badges’ color. Left out, its first step’s.
'inter' | 'montserrat' | 'oswald' | 'anton' | 'playfair-display' | 'courier-prime' | 'caveat' | 'pacifico' | 'permanent-marker'
Its letter, by its slug. Left out, its first step’s.
number
Its size, 0.02 to 0.065, as a text’s. Left out, its first step’s.
string
Its title’s words. Left out, none.
'LIGHT' | 'DARK' | 'ACCENT'
Left out,
LIGHT.number | null
A width set by hand: its block’s exact width. Left out or
null, as wide as its longest row.number
How many annotations, the last made, draw over it. Left out, none: the list on top.
object[]
Its own arrows from Add Arrow, leaving its block, each as an added arrow. Left out, none.