lisn.js
Version:
Simply handle user gestures and actions. Includes widgets.
215 lines (212 loc) • 8.73 kB
JavaScript
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
/**
* @module Effects/Transform
*
* @since v1.3.0
*/
import * as MH from "../globals/minification-helpers.js";
import { setStyleProp } from "../utils/css-alter.js";
import { isValidNum, sum } from "../utils/math.js";
/**
* {@link Transform} controls an element's transform a 3D transform matrix.
*/
export class Transform {
constructor(init) {
/**
* Returns a {@link https://developer.mozilla.org/en-US/docs/Web/API/DOMMatrixReadOnly | DOMMatrixReadOnly} representing the transform.
*
* @param relativeTo If given, then this matrix is first inverted and used as
* a pre-multiplication
*/
_defineProperty(this, "toMatrix", void 0);
/**
* Returns a {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array | Float32Array} representing the transform.
*
* @param relativeTo See {@link toMatrix}
*/
_defineProperty(this, "toFloat32Array", void 0);
/**
* Returns a `perspective(...) matrix3d(...)` string for use as a CSS property.
*
* If no perspective has been set, it's omitted from the string.
*
* @param relativeTo See {@link toMatrix}
*/
_defineProperty(this, "toString", void 0);
/**
* Resets the transformation back to the default (identity) one.
*/
_defineProperty(this, "reset", void 0);
/**
* Sets the transform's perspective. Perspective applies at the start of
* transforms and subsequent calls to this method always override previous
* ones.
*
* @param callback The callback that returns the perspective as a number (in
* pixels) or CSS perspective string
*
* @returns The same {@link Transform} instance.
*/
_defineProperty(this, "perspective", void 0);
/**
* Translates the transform.
*
* @param callback The callback that returns one or more of:
* - x The translation distance in pixels along the X-axis.
* - y The translation distance in pixels along the Y-axis.
* - z The translation distance in pixels along the Z-axis.
*
* @returns The same {@link Transform} instance.
*/
_defineProperty(this, "translate", void 0);
/**
* Scales the transform.
*
* @param callback The callback that returns one or more of:
* - s The default scaling factor for any axis if not
* overridden by sx, sy or sz.
* - sx The translation distance in pixels along the X-axis.
* - sy The translation distance in pixels along the Y-axis.
* - sz The translation distance in pixels along the Z-axis.
* - origin The transform origin
*
* @returns The same {@link Transform} instance.
*/
_defineProperty(this, "scale", void 0);
/**
* Skews the transform. If skewing along both axis (i.e. both `degX` and
* `degY` given, or `deg` is given), then skewing is done first along X, then
* along Y.
*
* @param callback The callback that returns one or more of:
* - deg The skewing angle in degrees for either axis if not
* overridden by degX or degY.
* - degX The skewing angle in degrees along the X-axis.
* - degY The skewing angle in degrees along the Y-axis.
*
* @returns The same {@link Transform} instance.
*/
_defineProperty(this, "skew", void 0);
/**
* Rotates the transform around the given axis.
*
* @param callback The callback that returns one or more of:
* - deg The angle in degrees to rotate.
* - axis The axis of rotation. Default is Z-axis.
*
* @returns The same {@link Transform} instance.
*/
_defineProperty(this, "rotate", void 0);
/**
* Applies all transforms for the given scroll offsets.
*
* @throws {@link Errors.LisnUsageError | LisnUsageError}
* If any of the values returned by the {@link EffectCallback}
* s is invalid.
*
* @returns The same {@link Transform} instance.
*/
_defineProperty(this, "apply", void 0);
const selfM = newMatrix(false, init);
const callbacks = [];
let perspective = "";
const addCallback = callback => callbacks.push(callback);
const toMatrix = relativeTo => {
const m = newMatrix(true, selfM);
const relM = relativeTo ? newMatrix(true, relativeTo) : null;
return relM ? relM.inverse().multiply(m) : m;
};
this.toMatrix = toMatrix;
this.toFloat32Array = relativeTo => toMatrix(relativeTo).toFloat32Array();
this.toString = relativeTo => (perspective ? `perspective(${perspective}) ` : "") + toMatrix(relativeTo).toString();
this.reset = () => {
selfM.m12 = selfM.m13 = selfM.m14 = selfM.m21 = selfM.m23 = selfM.m24 = selfM.m31 = selfM.m32 = selfM.m34 = selfM.m41 = selfM.m42 = selfM.m43 = 0;
selfM.m11 = selfM.m22 = selfM.m33 = selfM.m44 = 1;
return this;
};
this.perspective = callback => {
addCallback(offsets => {
const res = callback(offsets);
perspective = res ? MH.isString(res) ? res : `${res}px` : "";
});
return this;
};
this.translate = callback => {
addCallback(offsets => {
var _callback;
const {
x = 0,
y = 0,
z = 0
} = (_callback = callback(offsets)) !== null && _callback !== void 0 ? _callback : {};
validateInputs("Translate distance", [x, y, z]);
selfM.translateSelf(x, y, z);
});
return this;
};
this.scale = callback => {
addCallback(offsets => {
var _callback2;
const {
s = 1,
sx = s,
sy = s,
sz = s,
origin = [0, 0, 0]
} = (_callback2 = callback(offsets)) !== null && _callback2 !== void 0 ? _callback2 : {};
validateInputs("Scale factor", [sx, sy, sz], true);
validateInputs("Origin", origin);
selfM.scaleSelf(sx, sy, sz, ...origin);
});
return this;
};
this.skew = callback => {
addCallback(offsets => {
var _callback3;
const {
deg = 0,
degX = deg,
degY = deg
} = (_callback3 = callback(offsets)) !== null && _callback3 !== void 0 ? _callback3 : {};
validateInputs("Skew angle", [degX, degY]);
selfM.skewXSelf(degX).skewYSelf(degY);
});
return this;
};
this.rotate = callback => {
addCallback(offsets => {
var _callback4, _axis$, _axis$2;
const {
deg = 0,
axis = [0, 0, 1]
} = (_callback4 = callback(offsets)) !== null && _callback4 !== void 0 ? _callback4 : {};
validateInputs("Rotation angle", [deg]);
validateInputs("Rotation axis", [sum(...axis)], true);
selfM.rotateAxisAngleSelf(axis[0], (_axis$ = axis[1]) !== null && _axis$ !== void 0 ? _axis$ : 0, (_axis$2 = axis[2]) !== null && _axis$2 !== void 0 ? _axis$2 : 0, deg);
});
return this;
};
this.apply = (element, offsets) => {
for (const callback of callbacks) {
callback(offsets);
}
setStyleProp(element, "transform", this.toString());
return this;
};
}
}
// ----------------------------------------
const newMatrix = (readonly, init) => {
const initM = MH.isInstanceOf(init, Transform) ? init.toMatrix() : init;
return new (readonly ? DOMMatrixReadOnly : DOMMatrix)(MH.isNullish(initM) ? initM : MH.arrayFrom(MH.isInstanceOf(initM, DOMMatrixReadOnly) ? initM.toFloat32Array() : initM));
};
const validateInputs = (name, inputs, requireNonZero = false) => {
for (const i of inputs) {
if (!isValidNum(i) || requireNonZero && MH.abs(i) < 1e-10) {
throw MH.usageError(`${name} must be finite${requireNonZero ? " and non-zero" : ""}`);
}
}
};
//# sourceMappingURL=transform.js.map