2021-12-08 22:43:31 +01:00
|
|
|
import getStyleForProperty from '../process/getStyleForProperty';
|
|
|
|
import trueDimension from '../util/trueDimension';
|
|
|
|
import numbers from '../interpolation/numbers';
|
|
|
|
import { onStartClip } from './clipPropertyBase';
|
2021-03-30 11:23:29 +02:00
|
|
|
|
|
|
|
// Component Functions
|
2021-12-08 22:43:31 +01:00
|
|
|
/**
|
|
|
|
* Returns the current property computed style.
|
|
|
|
* @param {string} tweenProp the property name
|
|
|
|
* @returns {string | number[]} computed style for property
|
|
|
|
*/
|
2021-03-30 11:23:29 +02:00
|
|
|
function getClip(tweenProp/* , value */) {
|
2021-12-08 22:43:31 +01:00
|
|
|
const { element } = this;
|
|
|
|
const currentClip = getStyleForProperty(element, tweenProp);
|
|
|
|
const width = getStyleForProperty(element, 'width');
|
|
|
|
const height = getStyleForProperty(element, 'height');
|
2021-03-30 11:23:29 +02:00
|
|
|
return !/rect/.test(currentClip) ? [0, width, height, 0] : currentClip;
|
|
|
|
}
|
2021-12-08 22:43:31 +01:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Returns the property tween object.
|
|
|
|
* @param {string} _ the property name
|
|
|
|
* @param {string} value the property value
|
|
|
|
* @returns {number[]} the property tween object
|
|
|
|
*/
|
|
|
|
function prepareClip(/* tweenProp, */_, value) {
|
2021-03-30 11:23:29 +02:00
|
|
|
if (value instanceof Array) {
|
|
|
|
return value.map((x) => trueDimension(x));
|
|
|
|
}
|
|
|
|
let clipValue = value.replace(/rect|\(|\)/g, '');
|
|
|
|
clipValue = /,/g.test(clipValue) ? clipValue.split(',') : clipValue.split(/\s/);
|
|
|
|
return clipValue.map((x) => trueDimension(x));
|
|
|
|
}
|
|
|
|
|
|
|
|
// All Component Functions
|
|
|
|
const clipFunctions = {
|
|
|
|
prepareStart: getClip,
|
|
|
|
prepareProperty: prepareClip,
|
|
|
|
onStart: onStartClip,
|
|
|
|
};
|
|
|
|
|
|
|
|
// Component Full
|
2021-12-08 22:43:31 +01:00
|
|
|
const ClipProperty = {
|
2021-03-30 11:23:29 +02:00
|
|
|
component: 'clipProperty',
|
|
|
|
property: 'clip',
|
|
|
|
defaultValue: [0, 0, 0, 0],
|
|
|
|
Interpolate: { numbers },
|
|
|
|
functions: clipFunctions,
|
|
|
|
Util: { trueDimension },
|
|
|
|
};
|
|
|
|
|
2021-12-08 22:43:31 +01:00
|
|
|
export default ClipProperty;
|