hooked74 / transform

The library parses the matrix transformation and modifies the element

Transform

Table of contents

• Overview
• Install
• Usage
  • Basic Usage
  • Inheritance
  • Options
• API
  • Properties
  • Methods
• Development

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.

Development

You can run some built-in commands:

npm run build

Builds the app for production. Your app is ready to be deployed.

npm run test:watch

Runs the test watcher in an interactive mode. By default, runs tests related to files changed since the last commit.