Class ComposedShape

A base shape that is composed of other shapes and can be manipulated as a single entity

Example

// A simple composed shape that consists of a square with a inscribed circle
class ComposedCircle extends ComposedShape {
    compose(): this {
        // Create a square with size 2 (default)
        const square = new Square();
        // Create a circle with radius 1 (default)
        const circle = new Circle();
        // Add the square and circle to the composed shape
        this.add(square, circle);

        return this;
    }
}

Hierarchy (view full)

Implements

Constructors

constructor

Methods

add angle bottom center changeColor changeLineColor compose composedShapes copy currentScale height left moveTo nextTo right rotate scale setStyles shift styles top width

Constructors

constructor

  • new ComposedShape(styleArgs?): ComposedShape

  • Create a new composed shape with the given styles

    Parameters

    • styleArgs: {
          adjustForLineWidth?: boolean;
          color?: RGBA;
          lineCap?: "butt" | "round" | "square";
          lineColor?: RGBA;
          lineStyle?: "solid" | "dashed" | "dotted" | "dashedsmall";
          lineWidth?: number;
      } = {}

      the styles to apply to the shape

      • Optional adjustForLineWidth?: boolean
      • Optional color?: RGBA
      • Optional lineCap?: "butt" | "round" | "square"
      • Optional lineColor?: RGBA
      • Optional lineStyle?: "solid" | "dashed" | "dotted" | "dashedsmall"
      • Optional lineWidth?: number

    Returns ComposedShape

Methods

add

  • add(...els): this

  • Add shapes to the composed shape

    Parameters

    • Rest ...els: Shape[]

      shapes to add to the composed shape

    Returns this

    this for chaining

angle

  • angle(): number

  • Gets the current angle of the shape (defaults to 0). The angle gets updated when the shape is rotated

    Returns number

    the current angle of the shape

bottom

  • bottom(): Point

  • Gets the center-bottom point of the shape (the center of the bottom edge of the box bounding the shape)

    Returns Point

    a point representing the bottom of the shape's bounding box

    Example

    // Create a new square centered at (1, 1) (default size of 2)
    const s = new Square({ x: 1, y: 1 });
    // The center is at (1, 1), so the bottom is at (1, 0)
    s.bottom();  // => [2, 1]

center

  • center(): Point

  • Gets the geometric center of the shape (the center of the box bounding the shape)

    Returns Point

    a point representing the center of the shape's bounding box

    Example

    // Create a new square centered at (1, 1)
    const s = new Square({ x: 1, y: 1 });
    // Get the center
    s.center();  // => [1, 1]

changeColor

  • changeColor(color): this

  • Changes the current color of the shape. For shapes that are fillable, this is the fill color, for others, it's the singular color (.e.g., Dot, Text)

    Parameters

    • color: RGBA

      the new color to change the shape to

    Returns this

    this (used for chaining)

changeLineColor

  • changeLineColor(color): this

  • Changes the line/stroke color of the shape. For shapes that are strokeable, this is the line color (e.g., Square)

    Parameters

    • color: RGBA

      the new color to change the shape to

    Returns this

    this (used for chaining)

compose

  • compose(): this

  • Method to be implemented by subclasses to compose the shape

    Returns this

    this for chaining

composedShapes

  • composedShapes(): Shape[]

  • Returns a list of the composed shapes built in the compose method and added in the add method

    Returns Shape[]

    the composed shapes

copy

  • copy(): this

  • Creates a deep copy of the shape

    Returns this

    a deep copy of the shape

currentScale

  • currentScale(): number

  • Gets the current scale of the shape (defaults to 1). The scale gets updated when the shape is scaled

    Returns number

    the current scale of the shape

height

  • height(): number

  • Gets the height of the shape (i.e., the height of the box bounding the shape)

    Returns number

    the height of the shape

    Example

    // Create a new rectangle centered at (0, 0) with a width of 4 and height of 2 (stretching from (-2, 1) to (2, -1))
    const s = new PointShape({ points: [[-2, 1], [2, 1], [2, -1], [-2, -1]] });
    s.height();  // 2

left

  • left(): Point

  • Gets the center-left point of the shape (the center of the left edge of the box bounding the shape)

    Returns Point

    a point representing the left of the shape's bounding box

    Example

    // Create a new square centered at (1, 1) (default size of 2)
    const s = new Square({ x: 1, y: 1 });
    // The center is at (1, 1), so the left is at (0, 1)
    s.left();  // => [0, 1]

moveTo

  • moveTo(point): this

  • Moves the center of the shape to the specified point

    Parameters

    • point: Point

      the desired center of the shape

    Returns this

    this (used for chaining)

    Example

    // Create a new square centered at (0, 0)
    const s = new Square();
    // Move the square's center to (1, 1)
    s.moveTo([1, 1]);  // the square is now centered at (1, 1)

nextTo

  • nextTo(other, direction, standoff?): this

  • Puts the shape next to another locatable in a specified direction

    Parameters

    • other: Locatable

      the locatable to put this shape next to

    • direction: Point

      the direction to put this shape next to the other locatable

    • standoff: number = config.standoff

    Returns this

    Example

    // Create a new square centered at (0, 0) with a default size of 2
    const s1 = new Square();
    // Create another square
    const s2 = new Square();
    // Put s2 next to s1 to the right
    s2.nextTo(s1, RIGHT());

right

  • right(): Point

  • Gets the center-right point of the shape (the center of the right edge of the box bounding the shape)

    Returns Point

    a point representing the right of the shape's bounding box

    Example

    // Create a new square centered at (1, 1) (default size of 2)
    const s = new Square({ x: 1, y: 1 });
    // The center is at (1, 1), so the right is at (2, 1)
    s.right();  // => [2, 1]

rotate

  • rotate(angle): this

  • Rotates the shape by some angle (in radians)

    Parameters

    • angle: number

      the amount (in radians) to rotate the angle by (e.g., Math.PI / 2 will rotate the shape by 90 degrees)

    Returns this

    this (used for chaining)

    Example

    // Create a new square centered at (0, 0) with a default size of 2
    const s = new Square();
    // Rotate the square by 45 degress (turning it into a diamond)
    s.rotate(Math.PI / 2);

scale

  • scale(factor): this

  • Scales the shape by a factor

    Parameters

    • factor: number

      the factor to scale the shape by (e.g., a factor of 2 will double the size, a factor of 0.5 will halve the size)

    Returns this

    this (used for chaining)

    Example

    // Create a new square centered at (0, 0) with a default size of 2
    const s = new Square();
    // Scale the square by a factor of 2 (doubles the size)
    s.scale(2);  // the square now has a size of 4

setStyles

  • setStyles(newStyles): this

  • Sets the styles of the shape

    Parameters

    • newStyles: ShapeStyles

      the new styles to apply to the shape

    Returns this

shift

  • shift(...shifts): this

  • Shifts the center of the shape by a specified amount

    Parameters

    Returns this

    this (used for chaining)

    Example

    // Create a new square centered at (0, 0)
    const s = new Square();
    // Shift the square's center by 1 to the right and 1 up (could just combine into one shift, [1, 1], but this is for demonstration purposes)
    s.shift([1, 0], [0, 1]);  // the square is now centered at (1, 1)

styles

  • styles(): ShapeStyles

  • Gets the styles of the shape

    Returns ShapeStyles

    the current styles of the shape

top

  • top(): Point

  • Gets the center-top point of the shape (the center of the top edge of the box bounding the shape)

    Returns Point

    a point representing the top of the shape's bounding box

    Example

    // Create a new square centered at (1, 1) (default size of 2)
    const s = new Square({ x: 1, y: 1 });
    // The center is at (1, 1), so the top is at (1, 2)
    s.top();  // => [1, 2]

width

  • width(): number

  • Gets the width of the shape (i.e., the width of the box bounding the shape)

    Returns number

    the width of the shape

    Example

    // Create a new rectangle centered at (0, 0) with a width of 4 and height of 2 (stretching from (-2, 1) to (2, -1))
    const s = new PointShape({ points: [[-2, 1], [2, 1], [2, -1], [-2, -1]] });
    s.width();  // 4

Settings

Member Visibility

Theme

On This Page

constructoraddanglebottomcenterchangeColorchangeLineColorcomposecomposedShapescopycurrentScaleheightleftmoveTonextTorightrotatescalesetStylesshiftstylestopwidth