TransformableElement.js

Jump to bottom

deployment script via Travis CI edited this page Mar 4, 2020 · 4 revisions

Members

cornerPointXs ⇒ Array.<number>
cornerPointYs ⇒ Array.<number>
cornerPointZs ⇒ Array.<number>
cornerPointXYs ⇒ Array.<Array.<number>>
XY ⇒ Array.<Array.<number>>
initialTransform ⇒ string
absoluteTransformOriginApprox ⇒ Array.<number>

Functions

update() ⇒ void: currently equal to {updateCornerPoints}
updateCornerPoints() ⇒ void: sets the internal corner points to the points of the actual DOM element
internalTransform(css) ⇒ void: transforms internal edge points according to a transformation in css syntax
surroundingBackground(col1, [size], [col2], [margin]) ⇒ string: generates background that surrounds the transformed element
internalMatrix(M) ⇒ void: transforms internal corner points using a 2d (3x3 homogenous) matrix z coordinate remains unchanged.
internalMatrix3d(M) ⇒ void: transforms internal corner points using a 3d (4x4 homogenous) matrix
internalPerspective(d) ⇒ void: transforms internal corner points like CSS 'transform: perspective(d)' does
internalRotate(a) ⇒ void: transforms internal corner points like CSS 'transform: rotate(a)' does
internalRotate3d(x, y, z, a) ⇒ void: transforms internal corner points like CSS 'transform: rotate3d(x, y, z, a)' does
internalRotateX(a) ⇒ void: transforms internal corner points like CSS 'transform: rotateX(a)' does
internalRotateY(a) ⇒ void: transforms internal corner points like CSS 'transform: rotateY(a)' does
internalRotateZ(a) ⇒ void: transforms internal corner points like CSS 'transform: rotateZ(a)' does
internalScale(x, [y]) ⇒ void: transforms internal corner points like CSS 'transform: scale(x, y)' does
internalScale3d(x, y, z) ⇒ void: transforms internal corner points like CSS 'transform: scale3d(x, y, z)' does
internalScaleX(s) ⇒ void: transforms internal corner points like CSS 'transform: scaleX(s)' does
internalScaleY(s) ⇒ void: transforms internal corner points like CSS 'transform: scaleY(s)' does
internalScaleZ(s) ⇒ void: transforms internal corner points like CSS 'transform: scaleZ(s)' does
internalSkew(x, [y]) ⇒ void: transforms internal corner points like CSS 'transform: skew(x, y)' does
internalSkewX(a) ⇒ Point4d: transforms internal corner points like CSS 'transform: skewX(a)' does
internalSkewY(a) ⇒ void: transforms internal corner points like CSS 'transform: skewY(a)' does
internalTranslate(x, [y]) ⇒ void: transforms internal corner points like CSS 'transform: translate(x, y)' does
internalTranslate3d(x, y, z) ⇒ void: transforms internal corner points like CSS 'transform: translate3d(x, y, z)' does
internalTranslateX(t) ⇒ void: transforms internal corner points like CSS 'transform: translateX(t)' does
internalTranslateY(t) ⇒ void: transforms internal corner points like CSS 'transform: translateY(t)' does
internalTranslateZ(t) ⇒ void: transforms internal corner points like CSS 'transform: translateZ(t)' does
transform(css, [alsoTransformInternal]) ⇒ void: runs a css transformation

cornerPointXs ⇒ `Array.<number>`

Kind: global variable
Returns: Array.<number> - cartesian x values of all corner points

cornerPointYs ⇒ `Array.<number>`

Kind: global variable
Returns: Array.<number> - cartesian y values of all corner points

cornerPointZs ⇒ `Array.<number>`

Kind: global variable
Returns: Array.<number> - cartesian z values of all corner points

cornerPointXYs ⇒ `Array.<Array.<number>>`

Kind: global variable
Returns: Array.<Array.<number>> - cartesian x and y values of all corner points

XY ⇒ `Array.<Array.<number>>`

Kind: global variable
Returns: Array.<Array.<number>> - cartesian x- and y-coordinates of corner points

initialTransform ⇒ `string`

Kind: global variable
Returns: string - initial CSS transformation as matrix/matrix3d or 'none' (cached).

absoluteTransformOriginApprox ⇒ `Array.<number>`

Kind: global variable
Returns: Array.<number> - Absolute coordinates of the transformation origin of the DOM element
Todo

returns center of element ATM. change it to the origin. it's not necessary to redo the whole function! only a change of the last few lines.

update() ⇒ `void`

currently equal to {updateCornerPoints}

Kind: global function
Todo

where is this used, why is this necessary, what does this override?

updateCornerPoints() ⇒ `void`

sets the internal corner points to the points of the actual DOM element

Kind: global function

internalTransform(css) ⇒ `void`

transforms internal edge points according to a transformation in css syntax

Kind: global function
Todo

Function only supports matrices. Add other types.

Param	Type	Description
css	`string`	CSS value. Only one function at a time is allowed. See https://mzl.la/2JhGw8A for syntax.

surroundingBackground(col1, [size], [col2], [margin]) ⇒ `string`

generates background that surrounds the transformed element

Kind: global function
Returns: string - CSS background that can be applied or appended to a parent element
Todo

I don't like the ' + Math.PI' in the loop because there is no plausible reason for that for the reader. Some minor refactoring on this would be nice.
still some issues with high translate values (test case: directly applied 'perspective(1000px) rotateZ(182deg) rotateY(60deg) translateX(200px) translateY(-300px)' on a 450x450 div (equal size background)) probable reason: css-gradient doesn't support negative numbers

Param	Type	Default	Description
col1	`string`	`"black"`	css color name or code for the surrounding color.
[size]	`Array.<number>`	`this._size`	Width and height of the bg element. Normally and thus when no value is given, equal to the size of the foreground dom element.
[col2]	`string`	`"'transparent'"`	CSS color name or code for the color behind the transformed element. Due to the way CSS linear-gradients work, this value should always be transparent or equal to col1, but with a lower opacity. Everything else could result in a broken background.
[margin]	`number`	`0`	Additional pixels to the surrounding to prevent flickering lines of col2. Set to 0 by default but in most cases more is recommended.

internalMatrix(M) ⇒ `void`

transforms internal corner points using a 2d (3x3 homogenous) matrix z coordinate remains unchanged.

Kind: global function

Param	Type	Description
M	`Array.<number>`	3x3 homogenous transformation matrix

internalMatrix3d(M) ⇒ `void`

transforms internal corner points using a 3d (4x4 homogenous) matrix

Kind: global function

Param	Type	Description
M	`Array.<number>`	4x4 homogenous transformation matrix

internalPerspective(d) ⇒ `void`

transforms internal corner points like CSS 'transform: perspective(d)' does

Kind: global function
See: https://mzl.la/2IIQUqD

Param	Type	Description
d	`Number`	Distance from the user to the z=0 plane. If it is 0 or a negative value, no perspective transform is applied. In px.

internalRotate(a) ⇒ `void`

transforms internal corner points like CSS 'transform: rotate(a)' does

Kind: global function
See: https://mzl.la/2IJlqRh

Param	Type	Description
a	`Number`	Angle of the rotation. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one. In deg.

internalRotate3d(x, y, z, a) ⇒ `void`

transforms internal corner points like CSS 'transform: rotate3d(x, y, z, a)' does

Kind: global function
See: https://mzl.la/2s5Wt89

Param	Type	Description
x	`Number`	x-coordinate of the vector denoting the axis of rotation which could between 0 and 1.
y	`Number`	y-coordinate of the vector denoting the axis of rotation which could between 0 and 1.
z	`Number`	z-coordinate of the vector denoting the axis of rotation which could between 0 and 1.
a	`Number`	angle of the rotation. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one. In deg.

internalRotateX(a) ⇒ `void`

transforms internal corner points like CSS 'transform: rotateX(a)' does

Kind: global function
See: https://mzl.la/2x6ZhqF

Param	Type	Description
a	`Number`	Angle of the rotation. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one. In deg.

internalRotateY(a) ⇒ `void`

transforms internal corner points like CSS 'transform: rotateY(a)' does

Kind: global function
See: https://mzl.la/2KQt6xx

Param	Type	Description
a	`Number`	Angle of the rotation. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one. In deg.

internalRotateZ(a) ⇒ `void`

transforms internal corner points like CSS 'transform: rotateZ(a)' does

Kind: global function
See: https://mzl.la/2KTCkcD

Param	Type	Description
a	`Number`	Angle of the rotation. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one. In deg.

internalScale(x, [y]) ⇒ `void`

transforms internal corner points like CSS 'transform: scale(x, y)' does

Kind: global function
See: https://mzl.la/2IMSlAu

Param	Type	Default	Description
x	`Number`		abscissa of the scaling vector
[y]	`Number`	`x`	Ordinate of the scaling vector. If not defined, its default value is x, resulting in a uniform scaling that preserves the element's aspect ratio.

internalScale3d(x, y, z) ⇒ `void`

transforms internal corner points like CSS 'transform: scale3d(x, y, z)' does

Kind: global function
See: https://mzl.la/2IJ2MVC

Param	Type	Description
x	`Number`	abscissa of the scaling vector
y	`Number`	ordinate of the scaling vector
z	`Number`	z-component of the scaling vector

internalScaleX(s) ⇒ `void`

transforms internal corner points like CSS 'transform: scaleX(s)' does

Kind: global function
See: https://mzl.la/2kp9HZC

Param	Type	Description
s	`Number`	scaling factor to apply on the abscissa of each point of the element

internalScaleY(s) ⇒ `void`

transforms internal corner points like CSS 'transform: scaleY(s)' does

Kind: global function
See: https://mzl.la/2J0TAzc

Param	Type	Description
s	`Number`	scaling factor to apply on the ordinate of each point of the element

internalScaleZ(s) ⇒ `void`

transforms internal corner points like CSS 'transform: scaleZ(s)' does

Kind: global function
See: https://mzl.la/2KRKOB3

Param	Type	Description
s	`Number`	scaling factor to apply on the z-coordinate of each point of the element

internalSkew(x, [y]) ⇒ `void`

transforms internal corner points like CSS 'transform: skew(x, y)' does

Kind: global function
See: https://mzl.la/2kqeVnQ

Param	Type	Default	Description
x	`Number`		Angle to use to distort the element along the abscissa. In deg.
[y]	`Number`	`0`	Angle to use to distort the element along the ordinate. If not defined, its default value is 0, resulting in a purely horizontal skewing. In deg.

internalSkewX(a) ⇒ `Point4d`

transforms internal corner points like CSS 'transform: skewX(a)' does

Kind: global function
Returns: Point4d - changed Point4d
See: https://mzl.la/2xcKtXq

Param	Type	Description
a	`Number`	Angle to use to distort the element along the abscissa. In deg.

internalSkewY(a) ⇒ `void`

transforms internal corner points like CSS 'transform: skewY(a)' does

Kind: global function
See: https://mzl.la/2sgggBM

Param	Type	Description
a	`Number`	Angle to use to distort the element along the ordinate. In deg.

internalTranslate(x, [y]) ⇒ `void`

transforms internal corner points like CSS 'transform: translate(x, y)' does

Kind: global function
See: https://mzl.la/2IGzx9Q

Param	Type	Default	Description
x	`Number`		Abscissa of the translating vector. In px.
[y]	`Number`	`0`	Ordinate of the translating vector. If unspecified, its default value is 0. For example, translate(2) is equivalent to translate(2, 0). In px.

internalTranslate3d(x, y, z) ⇒ `void`

transforms internal corner points like CSS 'transform: translate3d(x, y, z)' does

Kind: global function
See: https://mzl.la/2s5K6ZE

Param	Type	Description
x	`Number`	Abscissa of the translating vector. In px.
y	`Number`	Ordinate of the translating vector. In px.
z	`Number`	z-component of the translating vector. In px.

internalTranslateX(t) ⇒ `void`

transforms internal corner points like CSS 'transform: translateX(t)' does

Kind: global function
See: https://mzl.la/2IL1kGm

Param	Type	Description
t	`Number`	Abscissa of the translating vector. In px.

internalTranslateY(t) ⇒ `void`

transforms internal corner points like CSS 'transform: translateY(t)' does

Kind: global function
See: https://mzl.la/2GOb0tH

Param	Type	Description
t	`Number`	Ordinate of the translating vector. In px.

internalTranslateZ(t) ⇒ `void`

transforms internal corner points like CSS 'transform: translateZ(t)' does

Kind: global function
See: https://mzl.la/2JeSLD3

Param	Type	Description
t	`Number`	z-component of the translating vector. A positive value moves the element towards the viewer, and a negative value further away.

transform(css, [alsoTransformInternal]) ⇒ `void`

runs a css transformation

Kind: global function

Param	Type	Default	Description
css	`string`		css value for the transformation
[alsoTransformInternal]	`boolean`	`true`	defines if the internal information should be transformed too. Set to true by default, but call should be called with false if element is managed with TransformationController

Attention: don't edit these files directly! They are auto-generated and pushed by Travis CI. Add your changes in the jsdoc comments in the code files.