Nutrient Web SDK
    Preparing search index...

    A rect describes a rectangle in 2D space. It consists of a location (left and top) and dimensions (width and height). Provided values are defined in same units used by the page, point units. Point units are only equal to pixels when zoom value is 1.

    It is an https://facebook.github.io/immutable-js/docs/#/Record|Immutable.Record and thus can be updated using set(key, value), for example: rect.set("left", 20).

    Create and update a rect.

    const rect = new NutrientViewer.Geometry.Rect({
    left: 10,
    top: 20,
    width: 30,
    height: 40
    });
    rect = rect.set("left", 20);
    rect.left; // => 20

    An object used to initialize the Point. If left, top, width or height is omitted, 0 will be used instead.

    { left: 0, top: 0, width: 0, height: 0 }
    

    Hierarchy

    • Record<{ height?: number; left?: number; top?: number; width?: number }, this> & Readonly<
          { height?: number; left?: number; top?: number; width?: number },
      >
      • Rect
    Index

    Constructors

    • Parameters

      • Optionaloptions: { height?: number; left?: number; top?: number; width?: number }

      Returns NutrientViewer.Geometry.Rect

    Properties

    height: number

    The height of the rect. This is equivalent to height of a Geometry.Size.

    0
    
    left: number

    The left distance of the rect. This is equivalent to x of a Geometry.Point.

    0
    
    top: number

    The top distance of the rect. This is equivalent to y of a Geometry.Point.

    0
    
    width: number

    The width of the rect. This is equivalent to width of a Geometry.Size.

    0
    
    defaultValues: IObject = ...

    Accessors

    • get bottom(): number

      Computes the bottom point in the rect by adding top and height.

      Returns number

    • get right(): number

      Computes the right point in the rect by adding left and width.

      Returns number

    Methods

    • Returns IterableIterator<
          [
              keyof { height?: number; left?: number; top?: number; width?: number },
              undefined | number,
          ],
      >

    • Returns this

      Map#asImmutable

    • Returns this

      Map#asMutable

    • Returns a new instance of this Record type with all values set to their default values.

      Returns this

    • Returns a new instance of this Record type with the value for the specific key set to its default value.

      Type Parameters

      • K extends keyof { height?: number; left?: number; top?: number; width?: number }

      Parameters

      • key: K

      Returns this

      remove

    • Parameters

      Returns this

      removeIn

    • Parameters

      • other: any

      Returns boolean

    • Returns the value associated with the provided key, which may be the default value defined when creating the Record factory function.

      If the requested key is not defined by this Record type, then notSetValue will be returned if provided. Note that this scenario would produce an error when using Flow or TypeScript.

      Type Parameters

      • K extends keyof { height?: number; left?: number; top?: number; width?: number }

      Parameters

      • key: K
      • OptionalnotSetValue: any

      Returns { height?: number; left?: number; top?: number; width?: number }[K]

    • Type Parameters

      • T

      Parameters

      • key: string
      • notSetValue: T

      Returns T

    • Parameters

      Returns any

    • Grows the rect by growth on every side but keeps the center of the Rect at the same position.

      Parameters

      • growth: number

        The growth factor. It will be applied on every side, so the new width and height will increase by two times this factor.

      Returns NutrientViewer.Geometry.Rect

      A new Rect.

      const rect = new NutrientViewer.Geometry.Rect({ left: 10, top: 10, width: 10, height: 10 });
      rect.grow(5); // => Rect {left: 5, top: 5, width: 20, height: 20}
    • Parameters

      • key: string

      Returns key is "width" | "height" | "left" | "top"

    • Returns number

    • Parameters

      Returns boolean

    • Test if a point is within the rect. This can be used for hit testing.

      Parameters

      Returns boolean

      true if the point is inside, false otherwise.

      const rect = new NutrientViewer.Geometry.Rect({ left: 10, top: 10, width: 10, height: 10 });
      rect.isPointInside(new NutrientViewer.Geometry.Point({ x: 15, y: 15 })); // => true
      rect.isPointInside(new NutrientViewer.Geometry.Point({ x: 25, y: 25 })); // => false
    • Test if a rect is completely inside this rect.

      Parameters

      Returns boolean

      true if the rect is inside, false otherwise.

      const rect = new NutrientViewer.Geometry.Rect({ left: 10, top: 10, width: 10, height: 10 });

      const insideRect = new NutrientViewer.Geometry.Rect({ left: 12, top: 12, width: 5, height: 5 });
      const overlappingRect = new NutrientViewer.Geometry.Rect({ left: 5, top: 5, width: 10, height: 10 });
      const outsideRect = new NutrientViewer.Geometry.Rect({ left: 0, top: 0, width: 5, height: 5 });

      rect.isRectInside(insideRect); // => true
      rect.isRectInside(overlappingRect); // => false
      rect.isRectInside(outsideRect); // => false
    • Test if the union area of two rects is greater than zero.

      Parameters

      Returns boolean

      true if the rect is overlapping, false otherwise.

      const rect = new NutrientViewer.Geometry.Rect({ left: 10, top: 10, width: 10, height: 10 });

      const insideRect = new NutrientViewer.Geometry.Rect({ left: 12, top: 12, width: 5, height: 5 });
      const overlappingRect = new NutrientViewer.Geometry.Rect({ left: 5, top: 5, width: 10, height: 10 });
      const outsideRect = new NutrientViewer.Geometry.Rect({ left: 0, top: 0, width: 5, height: 5 });

      rect.isRectOverlapping(insideRect); // => true
      rect.isRectOverlapping(overlappingRect); // => true
      rect.isRectOverlapping(outsideRect); // => false
    • Parameters

      • ...collections: (
            | Iterable<[string, any]>
            | Partial<{ height?: number; left?: number; top?: number; width?: number }>
        )[]

      Returns this

    • Parameters

      • ...collections: (
            | Iterable<[string, any]>
            | Partial<{ height?: number; left?: number; top?: number; width?: number }>
        )[]

      Returns this

    • Parameters

      • keyPath: Iterable<any>
      • ...collections: any[]

      Returns this

    • Parameters

      • merger: (oldVal: any, newVal: any, key: any) => any
      • ...collections: (
            | Iterable<[string, any]>
            | Partial<{ height?: number; left?: number; top?: number; width?: number }>
        )[]

      Returns this

    • Parameters

      • keyPath: Iterable<any>
      • ...collections: any[]

      Returns this

    • Parameters

      • merger: (
            oldVal: any,
            newVal: any,
            key: keyof { height?: number; left?: number; top?: number; width?: number },
        ) => any
      • ...collections: (
            | Iterable<[string, any]>
            | Partial<{ height?: number; left?: number; top?: number; width?: number }>
        )[]

      Returns this

    • Type Parameters

      • K extends keyof { height?: number; left?: number; top?: number; width?: number }

      Parameters

      • key: K

      Returns this

    • Parameters

      Returns this

    • Rounds all coordinates to whole numbers. This implementation uses Math.round for all coordinates. The resulting Rect might no longer overlap the source Rect.

      Returns NutrientViewer.Geometry.Rect

      A new rect.

      const rect = new NutrientViewer.Geometry.Rect({ left: 10.5, top: 15.5, width: 20.5, height: 25.5 });
      rect.round(); // => Rect {left: 11, top: 16, width: 21, height: 26}
    • Rounds all coordinates to whole numbers. The resulting Rect will always overlap the source Rect.

      The location (left and top) will be rounded to a number which is smaller than or equal to the current value.

      The size (width and height) will be rounded to a number which is greater than or equal to the current value.

      Returns NutrientViewer.Geometry.Rect

      A new rect.

      const rect = new NutrientViewer.Geometry.Rect({ left: 10.5, top: 15.5, width: 20.5, height: 25.5 });
      rect.roundOverlap(); // => Rect {left: 10, top: 15, width: 21, height: 26}
    • Scales all values by the given sx and sy factor. If only sx is set and sy not defined, it will scale the values by sx.

      Parameters

      • sx: number

        Scale value for the left and width value. If sy is not set, this scale will also be applied to top and height.

      • Optionalsy: number

        Scale value for the top an height value.

      Returns NutrientViewer.Geometry.Rect

      A new Rect.

      const rect = new NutrientViewer.Geometry.Rect({ left: 10, top: 10, width: 10, height: 10 });
      rect.scale(2); // => Rect {left: 20, top: 20, width: 20, height: 20}
    • Type Parameters

      • K extends keyof { height?: number; left?: number; top?: number; width?: number }

      Parameters

      • key: K
      • value: { height?: number; left?: number; top?: number; width?: number }[K]

      Returns this

    • Parameters

      Returns this

    • Updates the location of the rect by modifying left and top.

      Parameters

      Returns NutrientViewer.Geometry.Rect

      A new Rect with left and top updated.

      const rect = new NutrientViewer.Geometry.Rect({ left: 10, top: 10, width: 10, height: 10 });
      var nextLocation = new NutrientViewer.Geometry.Point({ x: 20, y: 30 });

      rect.setLocation(nextLocation); // => Rect {left: 20, top: 30, width: 10, height: 10}
    • Deeply converts this Record to equivalent native JavaScript Object.

      Note: This method may not be overridden. Objects with custom serialization to plain JS may override toJSON() instead.

      Returns { height?: any; left?: any; top?: any; width?: any }

    • Shallowly converts this Record to equivalent native JavaScript Object.

      Returns { height?: number; left?: number; top?: number; width?: number }

    • Shallowly converts this Record to equivalent JavaScript Object.

      Returns { height?: number; left?: number; top?: number; width?: number }

    • Returns Keyed<
          keyof { height?: number; left?: number; top?: number; width?: number },
          undefined | number,
      >

    • Translates the horizontal location of the rect by a number.

      Parameters

      • tx: number

        A number to translate the left value.

      Returns NutrientViewer.Geometry.Rect

      A new Rect.

      const rect = new NutrientViewer.Geometry.Rect({ left: 10, top: 10 });
      rect.translateX(5); // => Rect {left: 15, top: 10, width: 0, height: 0}
    • Translates the vertical location of the rect by a number.

      Parameters

      • ty: number

        A number to translate the top value.

      Returns NutrientViewer.Geometry.Rect

      A new Rect.

      const rect = new NutrientViewer.Geometry.Rect({ left: 10, top: 10 });
      point.translateY(5); // => Rect {left: 10, top: 15, width: 0, height: 0}
    • Type Parameters

      • K extends keyof { height?: number; left?: number; top?: number; width?: number }

      Parameters

      • key: K
      • updater: (
            value: { height?: number; left?: number; top?: number; width?: number }[K],
        ) => { height?: number; left?: number; top?: number; width?: number }[K]

      Returns this

    • Parameters

      • keyPath: Iterable<any>
      • updater: (value: any) => any

      Returns this

    • Returns boolean

      Map#wasAltered

    • Note: Not all methods can be used on a mutable collection or within withMutations! Only set may be used mutatively.

      Parameters

      • mutator: (mutable: this) => any

      Returns this

      Map#withMutations

    • Creates a new rect from a DOM ClientRect.

      Parameters

      • rect: ClientRect

        A DOM ClientRect.

      Returns NutrientViewer.Geometry.Rect

      A new Rect.

      const rect = NutrientViewer.Geometry.Rect.fromClientRect(
      element.getBoundingClientRect()
      );
    • Creates a new rect from four points.

      Parameters

      Returns NutrientViewer.Geometry.Rect

      A new Rect.

      const rect = NutrientViewer.Geometry.Rect.fromPoints(
      new NutrientViewer.Geometry.Point({ x: 10, y: 10 }),
      new NutrientViewer.Geometry.Point({ x: 20, y: 10 }),
      new NutrientViewer.Geometry.Point({ x: 20, y: 20 }),
      new NutrientViewer.Geometry.Point({ x: 10, y: 20 })
      );

      @public