@hooked74/transform NPM

Overview

This library will parse the matrix transformation of the element into the following properties: scale, translate, rotate, skew. Interface allows to change these properties and generate a matrix from them that will update the transform property. The library also parses and allows you to change the transform-origin property using a special interface.

Has the following constructor signature:

  new Transform(node, options?)

node HTMLElement|SVGElement element with which transformations will be performed. Required parameter. \ options Object described in options. Optional parameter.

Install

npm install @hooked74/transform

Usage

Basic Usage

  import Transform from "@hooked/transform";

  // Use Transformation for HTMLElement
  const transform = new Transform(htmlElement);
  transform.origin = { x: 1, y: 0.5 };
  transform.scaleX = 2;

  // Use Transformation for SVGElement
  const transform = new Transform(svgElement);
  transform.originX = 0.5;
  transform.y = 100;

Inheritance

  import Transform from "@hooked/transform";

  class Entity extends Transform {
    constructor(node) {
      super(node);
    }
    // ...
  }

  const entity = new Entity(htmlElement);
  entity.origin = { x: 0.5, y: 0.5 };
  entity.angle = 10;

Options

Transform has the following options:

transformOrder

This option provides the ability to generate a matrix that will be composed of properties in a given order. By default this order:

  ["skew", "scale", "rotate", "translate"]

This order was selected empirically.

Available orders:

  [
    ["rotate", "scale", "translate", "skew"],
    ["rotate", "scale", "skew", "translate"],
    ["rotate", "skew", "scale", "translate"],
    ["rotate", "skew", "translate", "scale"],
    ["rotate", "translate", "skew", "scale"],
    ["rotate", "translate", "scale", "skew"],

    ["scale", "rotate", "translate", "skew"],
    ["scale", "rotate", "skew", "translate"],
    ["scale", "skew", "rotate", "translate"],
    ["scale", "skew", "translate", "rotate"],
    ["scale", "translate", "skew", "rotate"],
    ["scale", "translate", "rotate", "skew"],

    ["skew", "rotate", "scale", "translate"],
    ["skew", "rotate", "translate", "scale"],
    ["skew", "scale", "rotate", "translate"],
    ["skew", "scale", "translate", "rotate"],
    ["skew", "translate", "rotate", "scale"],
    ["skew", "translate", "scale", "rotate"],

    ["translate", "rotate", "scale", "skew"],
    ["translate", "rotate", "skew", "scale"],
    ["translate", "skew", "rotate", "scale"],
    ["translate", "skew", "scale", "rotate"],
    ["translate", "scale", "skew", "rotate"],
    ["translate", "scale", "rotate", "skew"]
  ]

API

Properties

width float

Allow to change the width of the element. Return the width of the element in pixels.

height float

Allow to change the height of the element. Return the height of the element in pixels.

styleTransform string

Allow to change the transformation property of the element. Return value in transformation matrix format.

styleTransformOrigin string

Allow to change transform-origin of the element. Return the value of transform-origin in the format Xpx Ypx.

rotate { angle: float }

Change the state of rotate. The main property of the state is the angle of rotation. Return rotate state.

angle float

Element rotation angle. Limited to values from 0 to 360.

scale { x: float, y: float }

Change the state of scale. The main properties of the state is the scale x and scale y. Return scale state.

scaleX float

Element scaling by X. Limited to values from 0 to 1 where 1 is 100%.

scaleY float

Element scaling by Y. Limited to values from 0 to 1 where 1 is 100%.

skew { x: float, y: float }

Change the state of skew. The main properties of the state is the skew x and skew y. Return skew state.

skewX float

Element skewing by X. Value in degrees.

skewY float

Element skewing by Y. Value in degrees.

translate { x: float, y: float }

Change the state of translate. The main properties of the state is the translate x and translate y. Return translate state.

x float

Element offset by X.

y float

Element offset by Y.

origin { x: float, y: float }

Change the state of origin. The main properties of the state is the origin x and origin y. Return origin state.

originX float

Set the X coordinate relative to which the element will be transformed.

originY float

Set the Y coordinate relative to which the element will be transformed.

Methods

getStyleProperty(property: string): string

Get element style property.

setStyleProperty(property: string, value: string): void

Set element style property.

update(isOrigin: boolean): void

Force update transformation. It’s not worth using without need, since it is called automatically when the class properties change. If isOrigin is true then updates transform-origin otherwise transform.