-
Notifications
You must be signed in to change notification settings - Fork 0
TransformableElement.js
-
cornerPointXs ⇒
Array.<number> -
cornerPointYs ⇒
Array.<number> -
cornerPointZs ⇒
Array.<number> -
cornerPointXYs ⇒
Array.<Array.<number>> -
XY ⇒
Array.<Array.<number>> -
initialTransform ⇒
string -
absoluteTransformOriginApprox ⇒
Array.<number>
-
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
Kind: global variable
Returns: Array.<number> - cartesian x values of all corner points
Kind: global variable
Returns: Array.<number> - cartesian y values of all corner points
Kind: global variable
Returns: Array.<number> - cartesian z values of all corner points
Kind: global variable
Returns: Array.<Array.<number>> - cartesian x and y values of all corner
points
Kind: global variable
Returns: Array.<Array.<number>> - cartesian x- and y-coordinates of
corner points
Kind: global variable
Returns: string - initial CSS transformation as matrix/matrix3d or
'none'.
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.
sets the internal corner points to the points of the actual DOM element
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. |
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. |
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 |
transforms internal corner points using a 3d (4x4 homogenous) matrix
Kind: global function
| Param | Type | Description |
|---|---|---|
| M | Array.<number> |
4x4 homogenous transformation matrix |
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. |
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. |
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. |
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. |
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. |
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. |
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. |
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 |
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 |
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 |
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 |
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. |
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. |
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. |
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. |
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. |
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. |
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. |
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. |
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.