Skip to main content

Rectangle

Class representing a Rectangle, extending the Shape class with a RectangleDefinition. Provides functionality for rendering, resizing, moving, and rotating the rectangle.

Extends

Extended by

Constructors

new Rectangle()

new Rectangle(x, y, width, height, rotation, style?, options?): Rectangle

Constructs a new Rectangle instance.

Parameters

x: number

The x-coordinate of the rectangle's position.

y: number

The y-coordinate of the rectangle's position.

width: number

The width of the rectangle.

height: number

The height of the rectangle.

rotation: number = 0

The initial rotation of the rectangle in degrees clockwise.

style?: IRectangleStyle

The style options for the rectangle.

options?: IRectangleOptions

The configuration options for the rectangle.

Returns

Rectangle

Overrides

Shape.constructor

Defined in

shapes/Rectangle.ts:26

Properties

_definition

protected _definition: RectangleDefinition

The shape definition, proxied to trigger observer notifications on change.

Inherited from

Shape._definition

Defined in

shapes/Shape.ts:22


_options

protected _options: RectangleOptions

The options for configuring the shape, proxied to trigger observer notifications on change.

Inherited from

Shape._options

Defined in

shapes/Shape.ts:28


_state

protected _state: ShapeState = ShapeState.Default

The current state of the shape, representing its visual or interactive status.

Inherited from

Shape._state

Defined in

shapes/Shape.ts:31


_style

protected _style: RectangleStyle

The style settings for the shape, proxied to trigger observer notifications on change.

Inherited from

Shape._style

Defined in

shapes/Shape.ts:25


observers

protected observers: () => void[] = []

List of observer functions to be notified on shape changes.

Inherited from

Shape.observers

Defined in

shapes/Shape.ts:34

Accessors

angle

Get Signature

get angle(): Angle

Gets the angle of the rectangle.

Returns

Angle

The angle (rotation) of the rectangle.

Defined in

shapes/Rectangle.ts:70


height

Get Signature

get height(): number

Gets the height of the rectangle.

Returns

number

The height of the rectangle.

Set Signature

set height(height): void

Sets the height of the rectangle.

Parameters

height: number

The new height of the rectangle.

Returns

void

Defined in

shapes/Rectangle.ts:54


options

Get Signature

get options(): TOptions

Gets the configuration options of the shape.

Returns

TOptions

The current options.

Set Signature

set options(options): void

Updates the configuration options of the shape and notifies observers.

Parameters

options: TOptions

The new options to apply.

Returns

void

Inherited from

Shape.options

Defined in

shapes/Shape.ts:220


position

Get Signature

get position(): Point

Gets the position (Point) of the rectangle.

Returns

Point

The position of the rectangle.

Set Signature

set position(position): void

Sets the position (Point) of the rectangle.

Parameters

position: Point

The new position of the rectangle.

Returns

void

Defined in

shapes/Rectangle.ts:62


rotation

Get Signature

get rotation(): number

Gets the rotation of the rectangle in degrees.

Returns

number

The rotation of the rectangle.

Set Signature

set rotation(rotation): void

Sets the rotation of the rectangle.

Parameters

rotation: number

The new rotation of the rectangle.

Returns

void

Defined in

shapes/Rectangle.ts:78


state

Get Signature

get state(): ShapeState

Gets the current state of the shape.

Returns

ShapeState

The current state of the shape.

Set Signature

set state(state): void

Sets a new state for the shape.

Parameters

state: ShapeState

The new state to assign to the shape.

Returns

void

Inherited from

Shape.state

Defined in

shapes/Shape.ts:238


stateStyle

Get Signature

get stateStyle(): TStyle

Retrieves the effective style of the shape based on its current state.

Returns

TStyle

The computed style object for the current shape state, with state-specific overrides merged in as necessary.

Inherited from

Shape.stateStyle

Defined in

shapes/Shape.ts:260


style

Get Signature

get style(): TStyle

Gets the style settings of the shape.

Returns

TStyle

The current style settings.

Set Signature

set style(style): void

Updates the style settings of the shape and notifies observers.

Parameters

style: TStyle

The new style settings to apply.

Returns

void

Inherited from

Shape.style

Defined in

shapes/Shape.ts:202


width

Get Signature

get width(): number

Gets the width of the rectangle.

Returns

number

The width of the rectangle.

Set Signature

set width(width): void

Sets the width of the rectangle.

Parameters

width: number

The new width of the rectangle.

Returns

void

Defined in

shapes/Rectangle.ts:46

Methods

addObserver()

addObserver(observer): void

Adds an observer function that will be called when the shape's state changes.

Parameters

observer

The observer callback function.

Returns

void

Inherited from

Shape.addObserver

Defined in

shapes/Shape.ts:171


hasBorder()

protected hasBorder(): boolean

Determines if the current state style includes a visible border.

Returns

boolean

true if borderColor and borderWidth are defined and indicate a visible border; otherwise, false.

Inherited from

Shape.hasBorder

Defined in

shapes/Shape.ts:297


hide()

hide(): void

Hides the shape, preventing it from being rendered on the canvas. The shape will still exist and retain its properties, but it will not appear during rendering until show() is called.

Returns

void

Inherited from

Shape.hide

Defined in

shapes/Shape.ts:127


isDraggable()

isDraggable(): boolean

Checks whether the shape is draggable or not.

Returns

boolean

Returns true if the shape is draggable. Returns false if the shape is not draggable.

Inherited from

Shape.isDraggable

Defined in

shapes/Shape.ts:147


isMouseOver()

isMouseOver(mousePosition): boolean

Determines if the mouse is currently over the shape.

Parameters

mousePosition: Point

The current mouse position.

Returns

boolean

True if the mouse is over the shape, false otherwise.

Overrides

Shape.isMouseOver

Defined in

shapes/Rectangle.ts:233


isVisible()

isVisible(): boolean

Checks whether the shape is currently visible.

Returns

boolean

Returns true if the shape is visible and will be rendered on the canvas. Returns false if the shape is hidden and will not be rendered.

Inherited from

Shape.isVisible

Defined in

shapes/Shape.ts:137


move()

move(deltaX, deltaY): void

Moves the rectangle by adjusting the current position by delta values.

Parameters

deltaX: number = 0

The change in the x-coordinate.

deltaY: number = 0

The change in the y-coordinate.

Returns

void

Defined in

shapes/Rectangle.ts:144


onDrag()

onDrag(delta): void

Handles the drag operation by applying the given delta to the current position.

Parameters

delta: Point

The change in position represented as a Point.

Returns

void

Overrides

Shape.onDrag

Defined in

shapes/Rectangle.ts:268


removeObserver()

removeObserver(observer): void

Removes a previously added observer function.

Parameters

observer

The observer callback function to be removed.

Returns

void

Inherited from

Shape.removeObserver

Defined in

shapes/Shape.ts:182


render()

render(context): void

Renders the rectangle on the canvas using the provided 2D rendering context.

The rectangle will be rendered with its current position, size, and rotation.

Parameters

context: CanvasRenderingContext2D

The 2D rendering context of the canvas where the rectangle will be drawn.

Returns

void

Overrides

Shape.render

Defined in

shapes/Rectangle.ts:180


resize()

resize(deltaWidth, deltaHeight): void

Resizes the rectangle by adjusting the current width and height by delta values.

Parameters

deltaWidth: number = 0

The change in width.

deltaHeight: number = 0

The change in height.

Returns

void

Defined in

shapes/Rectangle.ts:133


rotate()

rotate(deltaRotation): void

Rotates the rectangle by adjusting its current angle.

Parameters

deltaRotation: number

The amount to adjust the rectangle's rotation, in degrees.

Returns

void

Defined in

shapes/Rectangle.ts:153


setSize()

setSize(width, height): void

Updates the size of the rectangle by setting new width and height values.

Parameters

width: number

The new width of the rectangle.

height: number

The new height of the rectangle.

Returns

void

Defined in

shapes/Rectangle.ts:122


show()

show(): void

Makes the shape visible, allowing it to be rendered on the canvas. If the shape was previously hidden, calling this method will make it appear during the next rendering cycle.

Returns

void

Inherited from

Shape.show

Defined in

shapes/Shape.ts:118


toArray()

toArray(): any[]

Converts the shape's definition to an array.

Returns

any[]

An array representation of the shape's definition.

Inherited from

Shape.toArray

Defined in

shapes/Shape.ts:100


toJson()

toJson(): string

Converts the shape's definition to a JSON string.

Returns

string

A JSON string representation of the shape's definition.

Inherited from

Shape.toJson

Defined in

shapes/Shape.ts:109