figureone 0.15.10 → 1.0.0

package/types/js/figure/FigureCollections/Angle.d.ts

@@ -0,0 +1,766 @@
+import { Point } from '../../tools/g2';
+import type { TypeParsablePoint } from '../../tools/g2';
+import { FigureElementCollection, FigureElementPrimitive } from '../Element';
+import EquationLabel from './EquationLabel';
+import { Equation } from '../Equation/Equation';
+import type { OBJ_LineArrows, OBJ_LineArrow } from '../geometries/arrow';
+import type { OBJ_Pulse } from '../Element';
+import type { EQN_Equation } from '../Equation/Equation';
+import type { TypeWhen } from '../TimeKeeper';
+import type { TypeLabelOrientation, TypeLabelLocation, TypeLabelSubLocation } from './EquationLabel';
+import * as animation from '../Animation/Animation';
+import type { OBJ_CustomAnimationStep, OBJ_TriggerAnimationStep } from '../Animation/Animation';
+import type { TypeColor, OBJ_Font } from '../../tools/types';
+import type { OBJ_Collection } from '../FigurePrimitives/FigurePrimitiveTypes';
+import type FigureCollections from './FigureCollections';
+/**
+ * Angle move options object.
+ *
+ * The angle corner has two arms. The `startArm` is the first arm of the angle
+ * (the one defined by <a href="adv_angle#startangle">startAngle</a>),
+ * while the `endArm` is the second arm of the corner defined by
+ * <a href="adv_angle#angle">angle</a>.
+ *
+ * Both arms can be set to either rotate the angle (`'rotation'`) or change the
+ * size of the angle (`'angle'`). Invisible touch pads are overlaid on the arms
+ * with some `width`. When these pads are touched, the corresponding arm will
+ * move. The pads extend past the arm ends by `width` as well.
+ *
+ * If `movePadRadius` is greater than 0, then a pad with that radius will be
+ * placed at the corner vertex. When this pad is touched, the angle will
+ * translate.
+ *
+ * @property {'rotation' | 'angle' | null} [startArm]
+ * @property {'rotation' | 'angle' | null} [endArm]
+ * @property {boolean} [movable] `true` to make movable, `false` to not (`true`)
+ * @property {number} [movePadRadius] radius of move pad (`0`)
+ * @property {number} [width] width of pads over lines (`0.5`)
+ * @interface
+ * @group Misc Shapes
+ */
+export type OBJ_MovableAngle = {
+    movable: boolean;
+    movePadRadius: number;
+    width: number;
+    startArm: 'angle' | 'rotation' | null;
+    endArm: 'angle' | 'rotation' | null;
+};
+/**
+ * Collections angle label options object.
+ *
+ * An angle can be annotated with a label using the `text` property and can be:
+ * - text (`string`, or Array<`string`)
+ * - an equation (`Equation`, `EQN_Equation`)
+ * - real length of line (`null`)
+ *
+ * In all cases, an actual {@link Equation} is created as the label. The
+ * equation can have multiple forms, which can be set using the `showForm`
+ * method.
+ *
+ * If `text`: `string`, then an equation with a single form named `base` will
+ * be created with a single element being the string text.
+ *
+ * If `text`: `Array<string>`, then an equation with a form for each element
+ * of the array is created. Each form is named '0', '1', '2'... corresponding
+ * with the index of the array. Each form is has a single element, being the
+ * text at that index.
+ *
+ * Use `text`: `Equation` or `EQN_Equation` to create completely custom
+ * equations with any forms desirable.
+ *
+ * If the label text is the real angle (`null`), then the number
+ * of decimal places can be selected with `precision` and the units with
+ * `units`.
+ *
+ * By default, the label is placed at the same radius as the curve (if
+ * a curve exists). An independant radius can be selected with `radius`.
+ *
+ * The space between the radius and the label is defined with `offset`. An
+ * `offset` of 0 puts the center of the label on the radius. Any
+ * positive or negative value of offset will move the label so no part of the
+ * label overlaps the line, and then the closest part of the label is separated
+ * from the line by `offset`.
+ *
+ * To situate the label, use `curvePosition`, `location` and
+ * `subLocation`. By default the label will be a percentage `curvePosition`
+ * of the angle. `location` then defines which side of the radius the label is
+ * on, while `subLocation` defines the backup location for invalid cases of
+ * `location`. See {@link TypeLabelLocation} and
+ * {@link TypeLabelSubLocation}. `location` can additionaly place the
+ * labels off the ends of the angle.
+ *
+ * To automatically update the label location and orientation as the line
+ * transform (translation, rotation or scale) changes then use `update: true`.
+ *
+ * @property {null | string | Array<string> | Equation | EQN_Equation } text
+ * or equation to show. Use `null` to show real angle.
+ * @property {'degrees' | 'radians'} units (`'degrees'`)
+ * @property {number} [precision] (`0`)
+ * @property {number} [radius] overwrite default radius
+ * @property {number} [offset] space to radius (`0`)
+ * @property {number} [curvePosition] where the label is along the curve of the
+ * angle, in percent of curve from the start of the angle (`0.5`)
+ * @property {TypeLabelLocation} [location] (`'outside'`)
+ * @property {TypeLabelSubLocation} [subLocation]
+ * @property {TypeLabelOrientation} [orientation] (`'horizontal'`)
+ * @property {number} [autoHide] hide label if angle is less than value (`null`)
+ * @property {number} [autoHideMax] hide label if angle is greater than value (`null`)
+ * @property {boolean} [update] (`false`)
+ * @property {number} [scale] size of the label
+ * @property {TypeColor} [color]
+ * @group Misc Shapes
+ */
+export type TypeAngleLabelOptions = {
+    text: null | string | Array<string> | Equation | EQN_Equation;
+    units?: 'degrees' | 'radians';
+    precision?: number;
+    radius?: number;
+    offset?: number;
+    curvePosition?: number;
+    location?: TypeLabelLocation;
+    subLocation?: TypeLabelSubLocation;
+    orientation?: TypeLabelOrientation;
+    autoHide?: number | null | undefined;
+    autoHideMax?: number | null | undefined;
+    update?: boolean;
+    scale?: number;
+    color?: TypeColor;
+};
+/**
+ * Angle Curve options object.
+ *
+ * The curve annotation of an Collections Angle shape.
+ *
+ * @property {number} [width] Curve line width (`0.01`)
+ * @property {boolean} [fill] Use a fill instead of a line (`false`)
+ * @property {number} [sides] Number of sides in full circle curve (`100`)
+ * @property {number} [radius] Curve radius (`0.5`)
+ * @property {number} [num] Number of curves (`1`)
+ * @property {number} [step] Step radius of curves if curve num > 1 (`0`)
+ * @property {?number} [autoHide] if angle is less than this, hide curve
+ * (`null`)
+ * @property {?number} [autoHideMax] if angle is less than this, hide curve
+ * (`null`)
+ * @property {boolean} [autoRightAngle] Right angle curve displayed when angle
+ * = π/2 (`false`)
+ * @property {number} [rightAngleRange] Range around π/2 for right angle curve
+ * display (`0.01745329...` or 1 degree)
+ * @interface
+ * @group Misc Shapes
+ */
+export type OBJ_AngleCurve = {
+    width?: number;
+    fill?: boolean;
+    sides?: number;
+    radius?: number;
+    num?: number;
+    step?: number;
+    autoHide?: number | null | undefined;
+    autoHideMax?: number | null | undefined;
+    autoRightAngle?: boolean;
+    rightAngleRange?: number;
+};
+/**
+ * Additional arrow properties specific to collections angle shapes.
+ *
+ * By default, the arrows are placed at the same radius as the curve, but
+ * the radius can be changed with `radius`.
+ *
+ * By default, the arrows will hide when the angle is small enough where
+ * the arrows will touch. To disable this, use `autoHide`.
+ *
+ * As the curve is a polygon with a finite amount of sides, its actual length
+ * can look like it changes when the angle changes and a smaller number of
+ * sides are used. This can result in a gap sometimes appearing between the
+ * curve and the arrow head. To eliminate this gap, allow the curve to overlap
+ * with the arrow head a little with `curveOverlap`. Beware however, if using
+ * transparency, a large overlap will be obvious as the semi opaque color will
+ * be darker in the overlap area. Also, if pulsing curve thickness, then for
+ * small arrow heads, large width pulse scales and large overlap, the curve
+ * may break through the pointy edge of the arrow head. Therefore selecting
+ * `curveOverlap` can be a delicate balance that depends on application.
+ *
+ * @property {number} [curveOverlap] the percent of the arrow that the curve
+ * overlaps with (`0.3`)
+ * @property {boolean} [autoHide] `true` will hide the arrows when the angle is
+ * small enough that the arrows start to touch (`true`)
+ * @property {number} [radius] location of the arrows, by default they will be
+ * at the radius of the curve.
+ * @interface
+ * @group Misc Shapes
+ */
+export type OBJ_AngleArrows = {
+    curveOverlap?: number;
+    autoHide?: boolean;
+    radius?: number;
+};
+/**
+ * Arrow definition for advaned angles.
+ *
+ * `string | (`{@link OBJ_LineArrows} ` & ` {@link OBJ_AngleArrows}`)`
+ *
+ * Use `single` string to specify head type of two arrows with default
+ * dimensions. Otherwise use options object to select and/or customize one or
+ * both arrows.
+ * @group Misc Shapes
+ */
+export type TypeAngleArrows = string | OBJ_LineArrows & OBJ_AngleArrows;
+/**
+ * Collections angle corner definition.
+ *
+ * @property {number} [length] length of corner's arms - by default it will be
+ * twice the length of the curve.
+ * @property {number} [width] line width of the corner - by default it will be
+ * the same as the curve
+ * @property {TypeColor} [color]
+ * @property {'fill' | 'auto' | 'none'} [style] style of the corner
+ * @interface
+ * @group Misc Shapes
+ */
+export type OBJ_AngleCorner = {
+    length?: number;
+    width?: number;
+    color?: TypeColor;
+    style?: 'fill' | 'auto' | 'none';
+};
+/**
+ * Options object for setting properties of `pulseAngle`.
+ *
+ * The `curve`, `corner`, `label` and `arrow` can all be
+ * pulsed with a simple scale number, or customization using
+ * the {@type OBJ_Pulse} object.
+ *
+ * The `thick` property can be used to change the default scale pulse.
+ * When a `1` is used, the angle will pulse from the vertex of the corner
+ * in scale. When `thick` is greater than 1, then the `curve` will pulse in
+ * thickness. Use a much smaller scale for curve when doing this.
+ *
+ * NB: When pulsing the thickness of a curve, the end corners of the curve
+ * may break through when the arrow heads are small or there is a large curve
+ * overlap between curve and arrow head. Use {@link OBJ_AngleArrows} to
+ * adjust `curveOverlap` and arrow head size, reduce the thickness scale, or
+ * increase the arrow scale to compensate.
+ *
+ * @property {number | OBJ_Pulse} [curve] (`1.5`)
+ * @property {number | OBJ_Pulse} [corner] (`1.5`)
+ * @property {number | OBJ_Pulse} [label] (`1.5`)
+ * @property {number | OBJ_Pulse} [arrow] (`1.5`)
+ * @property {number} [thick] (`1`)
+ * @property {number} [duration] in seconds
+ * @property {number} [frequency] in Hz
+ * @property {TypeWhen} [when] when to start the pulse (`'nextFrame'`)
+ * @property {function(): void} [done] execute when pulsing is finished
+ * @interface
+ * @group Misc Shapes
+ */
+export type OBJ_PulseAngle = {
+    curve?: number | OBJ_Pulse;
+    corner?: number | OBJ_Pulse;
+    label?: number | OBJ_Pulse;
+    arrow?: number | OBJ_Pulse;
+    thick?: number;
+    duration?: number;
+    frequency?: number;
+    when?: TypeWhen;
+    done?: (() => void) | null | undefined;
+};
+/**
+ * {@link CollectionsAngle} options object that extends {@link OBJ_Collection}
+ * options object (without `parent`).
+ *
+ * The Collections Angle is a convient and powerful angle
+ * {@link FigureElementCollection} that can draw one or several arcs of an
+ * angle annotation, a label, arrows, and the corner of an angle. It also
+ * includes some methods to make it convient to use dynamically.
+ *
+ * There are two ways to define an angle. With a `position`, `startAngle` and
+ * `angle`, or with three points. The angle can then be annotated with a curve
+ * and a label on either side of the corner using the `direction` property.
+ *
+ * The first way to define an angle is with `position`, `startAngle` and
+ * `angle`. `position` is the location of the vertex of the corner.
+ * Two lines join to make a corner, from which an angle annotation can be
+ * superimposed. The first line is defined with `startAngle` and the second
+ * line defined by `angle` relative to the first line. `angle` can either be
+ * positive or negative to define the second line.
+ *
+ * The second way to define an angle is with three points `p1`, `p2` and `p3`.
+ * `p2` is the vertex position of the corner. Line21 is first line of the
+ * corner and Line23 is the second.
+ *
+ * An angle can be annotated with a `curve` (or many multiple curves) and a
+ * `label`. `direction` defines which side of the corner the annotations will
+ * be drawn. `direction` can either be positive or negative (`1` or `-1`).
+ *
+ * A positive direction will place the annotations:
+ * - on the angle formed between `startAngle` and `angle`
+ * - *OR* the angle formed between Line21 and Line23 in the positive rotation
+ * direction
+ *
+ * A negative direction will place the annotations on the other side of the
+ * corner.
+ *
+ * A curve with multiple lines and/or arrows can be defined with `curve`.
+ *
+ * A label that can be the real angle in degrees or radians, text or an
+ * equation can be defined with `label`.
+ *
+ * The annotations will be placed at some radius from the corner vertex.
+ * `offset` can be used to draw the line some offset away from the line
+ * definition where a positive offset is on the side of the line that the line
+ * rotates toward when rotating in the positive direction.
+ *
+ * Pulsing this collection normally would pulse the scale of everything.
+ * If it often desirable to pulse only parts of the angle in special ways.
+ * Therefore this collection provides a method `pulseAngle` to allow this.
+ * This options object can define the default values for pulseAngle if desired.
+ *
+ * @extends OBJ_Collection
+ *
+ * @property {Point} [position] position of the angle vertex
+ * @property {number} [startAngle] rotation where the angle should start
+ * @property {number} [angle] size of the angle
+ * @property {Point} [p1] alternate way to define startAngle with `p2` and `p3`
+ * @property {Point} [p2] alternate way to define position of the angle vertex
+ * with `p2` and `p3`
+ * @property {Point} [p3] alternate way to define size of angle with `p2` and
+ * `p3`
+ * @property {1 | -1} [direction] side of the corner the angle annotations
+ * reside
+ * @property {OBJ_AngleCurve} [curve] options for a curve annotation
+ * @property {TypeAngleArrows} [arrow] options for arrow annotations
+ * @property {OBJ_AngleCorner} [corner] options for drawing a corner
+ * @property {TypeAngleLabelOptions} [label] options for label annotations
+ * @property {OBJ_PulseAngle} [pulseAngle] default pulseAngle options
+ * @interface
+ * @group 2D Shape Collections
+ */
+export type COL_Angle = {
+    position?: Point;
+    startAngle?: number;
+    angle?: number;
+    p1?: Point;
+    p2?: Point;
+    p3?: Point;
+    direction?: 1 | -1;
+    curve?: OBJ_AngleCurve;
+    arrow: TypeAngleArrows;
+    label?: TypeAngleLabelOptions;
+    corner?: OBJ_AngleCorner;
+    pulseAngle?: OBJ_PulseAngle;
+} & OBJ_Collection;
+declare class AngleLabel extends EquationLabel {
+    radius: number;
+    curvePosition: number;
+    offset: number;
+    showRealAngle: boolean;
+    orientation: TypeLabelOrientation;
+    precision: number;
+    units: 'degrees' | 'radians';
+    autoHide: number | null | undefined;
+    autoHideMax: number | null | undefined;
+    location: 'left' | 'right' | 'top' | 'bottom' | 'outside' | 'inside' | 'positive' | 'negative';
+    subLocation: 'left' | 'right' | 'bottom' | 'top';
+    constructor(equation: FigureCollections, labelText: string | Equation | Array<string>, color: TypeColor, radius: number, curvePosition: number | undefined, // number where 0 is end1, and 1 is end2
+    offset: number | undefined, showRealAngle: boolean | undefined, units: "degrees" | "radians" | undefined, precision: number | undefined, autoHide: number | null | undefined, autoHideMax: number | null | undefined, orientation: TypeLabelOrientation | undefined, location: 'left' | 'right' | 'top' | 'bottom' | 'outside' | 'inside' | 'positive' | 'negative', subLocation: 'left' | 'right' | 'top' | 'bottom', scale: number | undefined, font: OBJ_Font);
+}
+/**
+ * These properties are the same as the ones with the same names in
+ * {@link COL_Angle}.
+ * @property {TypeParsablePoint} [position]
+ * @property {number} [startAngle]
+ * @property {number} [angle]
+ * @property {TypeParsablePoint} [p1]
+ * @property {TypeParsablePoint} [p2]
+ * @property {TypeParsablePoint} [p3]
+ * @interface
+ * @group Misc Shapes
+ */
+export type OBJ_AngleSet = {
+    position?: TypeParsablePoint;
+    startAngle?: number;
+    angle?: number;
+    p1?: TypeParsablePoint;
+    p2?: TypeParsablePoint;
+    p3?: TypeParsablePoint;
+};
+/**
+ * Angle animation step.
+ *
+ * @property {number} [start] start angle (`current angle`)
+ * @property {number} [target] angle to animate to (`current angle`)
+ * @extends OBJ_CustomAnimationStep
+ * @interface
+ * @group Misc Shapes
+ */
+export type OBJ_AngleAnimationStep = {
+    start?: number;
+    target?: number;
+} & OBJ_CustomAnimationStep;
+/**
+ * Pulse angle animation step - see {@link OBJ_PulseAngle} for desicription of
+ * properties.
+ * @property {number | OBJ_Pulse} [curve] (`1.5`)
+ * @property {number | OBJ_Pulse} [corner] (`1.5`)
+ * @property {number | OBJ_Pulse} [label] (`1.5`)
+ * @property {number | OBJ_Pulse} [arrow] (`1.5`)
+ * @property {number} [thick] (`1`)
+ * @property {number} [duration] in seconds
+ * @property {number} [frequency] in Hz
+ * @extends OBJ_TriggerAnimationStep
+ * @interface
+ * @group Misc Shapes
+ */
+export type OBJ_PulseAngleAnimationStep = {
+    curve?: number | OBJ_Pulse;
+    corner?: number | OBJ_Pulse;
+    label?: number | OBJ_Pulse;
+    arrow?: number | OBJ_Pulse;
+    thick?: number;
+    duration?: number;
+    frequency?: number;
+} & OBJ_TriggerAnimationStep;
+/**
+ * {@link FigureElementCollection} representing an angle.
+ *
+ * ![](./apiassets/advangle_examples.png)
+ *
+ * <p class="inline_gif"><img src="./apiassets/advangle_grow.gif" class="inline_gif_image"></p>
+ *
+ * <p class="inline_gif"><img src="./apiassets/advangle_move.gif" class="inline_gif_image"></p>
+ *
+ * This object defines a convient and powerful angle
+ * {@link FigureElementCollection} that includes one or more curve annotations,
+ * arrows, a label annotation that can self align and
+ * some methods to make it convient to use dynamically.
+ *
+ * See {@link COL_Angle} for the options that can be used when creating the
+ * angle.
+ *
+ * The object contains two additional animation steps `angle` and `pulseAngle`
+ * that animate a change in angle, and animate a pulsing of the angle
+ * respectively. The animation steps are available in
+ * the animation manager ({@link FigureElement}.animations),
+ * and in the animation builder
+ * (<a href="#animationmanagernew">animations.new</a>
+ * and <a href="#animationmanagerbuilder">animations.builder</a>).
+ *
+ * Some of the useful methods included in an collections angle are:
+ * - <a href="#collectionsanglepulseangle">pulseAngle</a> - customize pulsing the
+ *   angle without
+ * - <a href="#collectionsanglesetmovable">setMovable</a> - overrides
+ *    <a href="#figureelementsetmovable">FigureElement.setMovable</a> and
+ *    allowing for more complex move options.
+ *
+ *
+ * @see See {@link OBJ_AngleAnimationStep} for angle animation step options.
+ *
+ * See {@link OBJ_PulseAngleAnimationStep} for pulse angle animation step
+ * options.
+ *
+ * To test examples below, append them to the
+ * <a href="#drawing-boilerplate">boilerplate</a>.
+ *
+ * @example
+ * // Angle with size label
+ * figure.add({
+ *   name: 'a',
+ *   make: 'collections.angle',
+ *   angle: Math.PI / 4,
+ *   label: null,
+ *   curve: {
+ *     radius: 0.5,
+ *     width: 0.01,
+ *   },
+ *   corner: {
+ *     width: 0.01,
+ *     length: 1,
+ *   },
+ * });
+ *
+ * @example
+ * // Right angle, created from figure.collections
+ * const a = figure.collections.angle({
+ *   angle: Math.PI / 2,
+ *   curve: {
+ *     autoRightAngle: true,
+ *     width: 0.01,
+ *   },
+ *   corner: {
+ *     width: 0.01,
+ *     length: 1,
+ *   },
+ * });
+ * figure.add('a', a);
+ *
+ * @example
+ * // Multi colored angle with arrows and an equation label
+ * figure.add({
+ *   name: 'a',
+ *   make: 'collections.angle',
+ *   angle: Math.PI / 4 * 3,
+ *   label: {
+ *     text: {
+ *       elements: {
+ *         theta: { text: '\u03b8', color: [1, 0, 1, 1] },
+ *       },
+ *       forms: {
+ *         0: { frac: ['theta', 'vinculum', '2']},
+ *       },
+ *     },
+ *     offset: 0.05,
+ *     location: 'inside',
+ *     color: [0, 0, 1, 1],
+ *   },
+ *   curve: {
+ *     radius: 0.5,
+ *     width: 0.01,
+ *   },
+ *   arrow: 'barb',
+ *   corner: {
+ *     width: 0.01,
+ *     length: 1,
+ *     color: [0, 0.5, 0, 1],
+ *   },
+ * });
+ *
+ * @example
+ * // Multiple curve angle, without corner
+ * const a = figure.collections.angle({
+ *   angle: Math.PI / 4,
+ *   curve: {
+ *     num: 3,
+ *     step: -0.03,
+ *     radius: 0.5,
+ *     width: 0.01,
+ *   },
+ *   label: {
+ *     text: 'a',
+ *     offset: 0.05,
+ *   },
+ * });
+ * figure.add('a', a);
+ *
+ * @example
+ * // Change angle animation
+ * figure.add({
+ *   name: 'a',
+ *   make: 'collections.angle',
+ *   angle: Math.PI / 4,
+ *   label: null,
+ *   curve: {
+ *     radius: 0.5,
+ *     width: 0.01,
+ *   },
+ *   corner: {
+ *     width: 0.01,
+ *     length: 1,
+ *   },
+ * });
+ * figure.elements._a.animations.new()
+ *   .angle({ start: Math.PI / 4, target: Math.PI / 4 * 3, duration: 3 })
+ *   .start();
+ *
+ * @example
+ * // Movable angle
+ * figure.add({
+ *   name: 'a',
+ *   make: 'collections.angle',
+ *   angle: Math.PI / 4 * 3,
+ *   label: {
+ *     text: null,
+ *     location: 'outside',
+ *     orientation: 'horizontal',
+ *     offset: 0.1,
+ *     update: true,
+ *     sides: 200,
+ *   },
+ *   curve: {
+ *     radius: 0.3,
+ *     fill: true,
+ *   },
+ *   corner: {
+ *     width: 0.02,
+ *     length: 1,
+ *     color: [0.4, 0.4, 0.4, 1],
+ *   },
+ * });
+ * figure.elements._a.setMovable({
+ *   startArm: 'rotation',
+ *   endArm: 'angle',
+ *   movePadRadius: 0.3,
+ * });
+ * @group 2D Shape Collections
+ */
+declare class CollectionsAngle extends FigureElementCollection {
+    _curve: FigureElementPrimitive | null | undefined;
+    _curveRight: FigureElementPrimitive | null | undefined;
+    _arrow1: FigureElementPrimitive | null | undefined;
+    _arrow2: FigureElementPrimitive | null | undefined;
+    _side1: FigureElementPrimitive | null | undefined;
+    _side2: FigureElementPrimitive | null | undefined;
+    _corner: FigureElementPrimitive | null | undefined;
+    _label: Equation | null | undefined;
+    _anglePad: FigureElementPrimitive | null | undefined;
+    _rotPad: FigureElementPrimitive | null | undefined;
+    _movePad: FigureElementPrimitive | null | undefined;
+    label: AngleLabel | null | undefined;
+    arrow: {
+        start?: OBJ_LineArrow & {
+            radius: number;
+            curveOverlap: number;
+            autoHide: boolean;
+            height: number;
+        };
+        end?: OBJ_LineArrow & {
+            radius: number;
+            curveOverlap: number;
+            autoHide: boolean;
+            height: number;
+        };
+    } | null | undefined;
+    corner: {
+        width: number;
+        length: number;
+        color: TypeColor;
+        style: 'fill' | 'auto' | 'none';
+    } | null | undefined;
+    side1: {
+        width: number;
+        length: number;
+    } | null | undefined;
+    side2: {
+        width: number;
+        length: number;
+    } | null | undefined;
+    curve: any;
+    startAngle: number;
+    angle: number;
+    direction: -1 | 1;
+    lastLabelRotationOffset: number;
+    collections: FigureCollections;
+    isTouchDevice: boolean;
+    largerTouchBorder: any;
+    nextPosition: Point | null | undefined;
+    nextStartAngle: number | null | undefined;
+    pulseAngleDefaults: {
+        curve: number | OBJ_Pulse;
+        corner: number | OBJ_Pulse;
+        label: number | OBJ_Pulse;
+        arrow: number | OBJ_Pulse;
+        thick: number;
+        duration: number;
+        frequency: number;
+    };
+    autoUpdateSubscriptionId: number;
+    animations: {
+        pulseAngle: (...opt: Array<any>) => animation.TriggerAnimationStep;
+        angle: (...opt: Array<any>) => animation.CustomAnimationStep;
+    } & animation.AnimationManager;
+    calculateAngleRotationPosition(options: {
+        p1?: TypeParsablePoint;
+        p2?: TypeParsablePoint;
+        p3?: TypeParsablePoint;
+        position?: TypeParsablePoint;
+        startAngle?: number;
+        angle?: number;
+    }): void;
+    /**
+     * @hideconstructor
+     */
+    constructor(collections: FigureCollections, isTouchDevice: boolean, animateNextFrame: () => void, options?: COL_Angle);
+    _getStateProperties(options: Record<string, any>): string[];
+    _fromState(state: Record<string, any>): this;
+    /**
+     * Turn on and off auto label location and orientation updates when angle
+     * transform changes. When an angle is created with a label, auto update
+     * is turned off by default.
+     *
+     * Manual updates can be performed with
+     * <a href="collectionsangle#udpatelabel">updateLabel</a>
+     */
+    setAutoUpdate(update?: boolean): void;
+    setNextPositionAndRotation(): void;
+    /**
+     * Set the angle. The same direction and angle sign must be used as when
+     * originally defined.
+     */
+    setAngle(options?: OBJ_AngleSet): void;
+    getCornerPoints(length: number): Point[];
+    addCorner(options: {
+        length: number;
+        width: number;
+        color: TypeColor;
+        style: 'fill' | 'auto' | 'none';
+    }): void;
+    addSide(index: 1 | 2, length?: number | null, width?: number | null, color?: TypeColor): void;
+    addLabel(options?: TypeAngleLabelOptions): void;
+    addCurve(curveOptions?: {
+        width?: number;
+        sides?: number;
+    }): void;
+    change(options: {
+        radius?: number;
+        curveRadius?: number;
+        curvePosition?: number;
+        offset?: number;
+    }): void;
+    addArrow(lineEnd: 'start' | 'end'): void;
+    updateCurve(primaryCurveAngle: number, angle: number, rotation: number, show: boolean): void;
+    update(labelRotationOffset?: number | null): void;
+    checkLabelForRightAngle(): void;
+    /**
+     * Get the current angle in degrees or radians
+     */
+    getAngle(units?: 'deg' | 'rad'): number;
+    /**
+     * Set the label text
+     */
+    setLabel(text: string): void;
+    fontUpdated(): void;
+    /**
+     * Get the label text
+     */
+    getLabel(): string;
+    /**
+     * Set the label to be the real angle
+     */
+    setLabelToRealAngle(): void;
+    updateLabelUnshow(): void;
+    /**
+     * Manually update the label orientations with a custom rotation offset.
+     *
+     * Automatic updating can be done with
+     * <a href="collectionsangle#setautoupdate">setAutoUpdate</a>
+     * @param {number | null} rotationOffset
+     */
+    updateLabel(rotationOffset?: number | null | undefined, forceShow?: boolean): void;
+    /**
+     * Pulse the angle where each element can be pulsed in a custom way.
+     *
+     * The pulse scales of the curve, label, corner and arrows can all be defined
+     * separately.
+     */
+    pulseAngle(options?: OBJ_PulseAngle): void;
+    showAll(): void;
+    /**
+     * Use this method to enable or disable movability of the line.
+     *
+     * @param {OBJ_MovableAngle | boolean} [movableOrOptions] `true` to
+     * make movable, `false` to make not movable or use options to
+     * set different kinds of movability.
+     */
+    setMovable(movableOrOptions?: boolean | OBJ_MovableAngle): void;
+    getLength(): any;
+    addAnglePad(percentLength: number | undefined, width: number | undefined, type: 'rotation' | 'angle'): void;
+    addRotPad(percentLength: number | undefined, width: number | undefined, type: 'rotation' | 'angle'): void;
+    addMovePad(percentLength?: number): void;
+    updateMovePads(): void;
+}
+export default CollectionsAngle;
+export type TypeLabelledAngle = {
+    _curve: FigureElementPrimitive;
+    _label: {
+        _base: FigureElementPrimitive;
+    } & Equation;
+} & CollectionsAngle;