mocanvasv4.11.2
DocsDemosLicensing

@mocanvas/editor · class

Box

declare class Box

This one ships without a description. The signature above is read from the package, and the guides cover the area it belongs to.

On this page

aspectRatiobottomcentercenterclonecollidesCollidesCommonconstructorcontainsContainsContainsApproximatelycontainsPointContainsPointcornerscornersAndCenterequalsEqualsexpandExpandExpandexpandByExpandByFromFromCenterFromMinMaxFromPointsgetHandlePointheightheightincludesIncludesisValidleftmaxXmaxYmidXmidYminXminXminYminYpointpointresizeResizerightscalesetsetTosidesSidessizesizesnapToGridtoFixedtoJsontoptranslateunionwidthwidthzeroFixZeroFixhwxy

Methods · 64

get aspectRatio(): number

Width over height. Infinity for a zero-height box.

get bottom(): number
get center(): Vec

The centre. Setting it moves the box without resizing it.

set center(v: VecLike)
clone(): Box
collides(B: BoxLike): boolean

Whether this box and B overlap at all.

static Collides(A: BoxLike, B: BoxLike): boolean

Whether A and B overlap at all. Touching edges count as colliding.

static Common(boxes: BoxLike[]): Box

The smallest box containing every box given.

constructor(x?: number, y?: number, w?: number, h?: number)
contains(B: BoxLike): boolean

Whether B lies entirely inside this box (touching edges count as inside).

static Contains(A: BoxLike, B: BoxLike): boolean

Whether B lies entirely inside A. Touching edges count as inside.

static ContainsApproximately(A: BoxLike, B: BoxLike, precision?: number): boolean

Box.Contains, but tolerant of float dust from a transform.

containsPoint(V: VecLike, margin?: number): boolean

Whether V lies inside this box, optionally grown by margin on every side.

static ContainsPoint(A: BoxLike, B: VecLike, margin?: number): boolean
get corners(): Vec[]

The four corners, clockwise from the top left.

get cornersAndCenter(): Vec[]

The four corners followed by the centre — the five snap points of a box.

equals(other: BoxLike): boolean
static Equals(a: BoxLike, b: BoxLike): boolean
expand(A: BoxLike): this

Grow this box to contain A as well.

static Expand(A: BoxLike, B: BoxLike): Box

The smallest box containing both A and B.

@param A - the box to grow @param B - the box to grow it around, or, in the deprecated scalar form, the amount to grow it by on every side.

static Expand(A: BoxLike, n: number): Box

@deprecated Use Box.ExpandBy, which is what a number here means.

expandBy(n: number): this

Grow this box by n on every side. A negative n shrinks it.

static ExpandBy(A: BoxLike, n: number): Box

A grown by n on every side. A negative n shrinks it.

static From(box: BoxModel): Box
static FromCenter(center: VecLike, size: VecLike): Box

The box of the given size centred on center.

static FromMinMax(minX: number, minY: number, maxX: number, maxY: number): Box
static FromPoints(points: VecLike[]): Box

The smallest box containing every point. Empty input gives an empty box.

getHandlePoint(handle: BoxHandle | RotateCorner): Vec

The point at handle on this box's edge.

get height(): number
set height(n: number)
includes(B: BoxLike): boolean

Whether B has any part inside this box — contained or merely overlapping.

static Includes(A: BoxLike, B: BoxLike): boolean

Whether A either contains B or overlaps it — i.e. whether B has any part in A at all. This is what a marquee uses when it selects on touch rather than on enclosure.

isValid(): boolean

Whether this box has a real, finite, non-negative size.

get left(): number
get maxX(): number
get maxY(): number
get midX(): number
get midY(): number
get minX(): number
set minX(n: number)
get minY(): number
set minY(n: number)
get point(): Vec

The top-left corner. Setting it moves the box without resizing it.

set point(v: VecLike)
resize(handle: BoxHandle | string, dx: number, dy: number): void

Apply a resize in place. See Box.Resize.

static Resize(box: BoxLike, handle: BoxHandle | string, dx: number, dy: number, isAspectRatioLocked?: boolean): {

box after dragging handle by (dx, dy), as a fresh box. Dragging a side past its opposite flips the box rather than producing a negative size, which is what makes a resize feel like a resize rather than a stop.

The scaleX / scaleY in the result are signed: -1 means that axis was flipped, which is what a shape needs in order to mirror its own contents.

get right(): number
scale(n: number): this

Scale this box about the page origin.

set(x?: number, y?: number, w?: number, h?: number): this
setTo(B: BoxLike): this
get sides(): [Vec, Vec][]

The four sides as point pairs, clockwise from the top edge.

static Sides(A: BoxLike, inset?: number): [Vec, Vec][]

The four sides as point pairs, in clockwise order from the top edge. An inset pulls each side's endpoints in along the edge, which is how an edge handle avoids covering the corners next to it.

get size(): Vec

The box's size as a vector.

set size(v: VecLike)
snapToGrid(size: number): void

Snap every edge to the grid, so the box stays whole cells wide.

toFixed(precision?: number): this

Round every component to precision decimal places.

toJson(): BoxModel
get top(): number
translate(delta: VecLike): this

Move this box by delta.

union(box: BoxModel): this

Grow this box to contain box as well. An alias of Box.expand.

get width(): number
set width(n: number)
zeroFix(): this

Fold a negative width or height back into the position. See Box.ZeroFix.

static ZeroFix(other: BoxLike): Box

A copy of other with any negative width or height folded back into its position, so that a box dragged up and to the left still reads left-to-right.

Properties · 4

h: number
w: number
x: number
y: number
All of @mocanvas/editorGuidesDemos
mocanvas
DocsLicensingmocanvas@symbio.agency

mocanvas is built by Symbio. Free for non-commercial, non-profit and development use; commercial use needs an agreement. Not affiliated with or endorsed by tldraw.