From 827f48fa093bfe9080ff40bfef003b114d2b5528 Mon Sep 17 00:00:00 2001 From: Davlat Shavkatov Date: Fri, 17 May 2019 07:47:23 +0500 Subject: [PATCH] add tests and fix interpolator --- package.json | 2 +- src/Interpolator.js | 11 ++++---- src/Tween.js | 20 ++++++++----- src/constants.js | 68 ++++++++++++++++++++++++++++----------------- test.js | 25 ++++++++++++++--- 5 files changed, 83 insertions(+), 43 deletions(-) diff --git a/package.json b/package.json index 73a6448..fd10165 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "es6-tween", - "version": "5.5.5", + "version": "5.5.6", "description": "ES6 implementation of amazing tween.js", "browser": "bundled/Tween.min.js", "cdn": "bundled/Tween.min.js", diff --git a/src/Interpolator.js b/src/Interpolator.js index 1d55fff..6e8563d 100644 --- a/src/Interpolator.js +++ b/src/Interpolator.js @@ -13,11 +13,15 @@ const Interpolator = (a, b) => { let origin = typeof a === 'string' ? a : isArray ? a.slice() : { ...a } if (isArray) { for (let i = 0, len = a.length; i < len; i++) { - decompose(i, origin, a, b) + if (a[i] !== b[i] || typeof a[i] !== 'number' || typeof b[i] === 'number') { + decompose(i, origin, a, b) + } } } else if (typeof a === 'object') { for (let i in a) { - decompose(i, origin, a, b) + if (a[i] !== b[i] || typeof a[i] !== 'number' || typeof b[i] === 'number') { + decompose(i, origin, a, b) + } } } else if (typeof a === 'string') { a = decomposeString(a) @@ -32,9 +36,6 @@ const Interpolator = (a, b) => { i++ } } - - a.isString = true - b.isString = true } return (t) => { if (isArray) { diff --git a/src/Tween.js b/src/Tween.js index 95a58fa..01dfeaa 100644 --- a/src/Tween.js +++ b/src/Tween.js @@ -426,13 +426,17 @@ class Tween { ) { continue } - if (Array.isArray(end) && !Array.isArray(start)) { - end.unshift(start) - for (let i = 0, len = end.length; i < len; i++) { - if (typeof end[i] === 'string') { - let arrayOfStrings = decomposeString(end[i]) - arrayOfStrings.isString = true - end[i] = arrayOfStrings + if (Array.isArray(end)) { + if (!Array.isArray(start)) { + end.unshift(start) + for (let i = 0, len = end.length; i < len; i++) { + if (typeof end[i] === 'string') { + end[i] = decomposeString(end[i]) + } + } + } else { + if (end.isString && object[property].isString && !start.isString) { + start.isString = true } } } @@ -720,6 +724,8 @@ class Tween { object[property] = end(value) } else if (typeof end === 'string' && typeof start === 'number') { object[property] = start + parseFloat(end[0] + end.substr(2)) * value + } else if (start && end && start.splice && end.splice && start.isString && end.isString) { + object[property] = recompose(property, object, _valuesStart, _valuesEnd, value, elapsed) } else { recompose(property, object, _valuesStart, _valuesEnd, value, elapsed) } diff --git a/src/constants.js b/src/constants.js index 3cd9c6d..9b6492f 100644 --- a/src/constants.js +++ b/src/constants.js @@ -59,12 +59,18 @@ const hex2rgb = (all, hex) => { } export function decomposeString (fromValue) { - return typeof fromValue !== 'string' - ? fromValue - : fromValue - .replace(hexColor, hex2rgb) - .match(NUM_REGEX) - .map((v) => (isNaNForST(v) ? v : +v)) + if (fromValue && fromValue.splice && fromValue.isString) { + return fromValue + } + const value = + typeof fromValue !== 'string' + ? fromValue + : fromValue + .replace(hexColor, hex2rgb) + .match(NUM_REGEX) + .map((v) => (isNaNForST(v) ? v : +v)) + value.isString = true + return value } // Decompose value, now for only `string` that required @@ -72,11 +78,13 @@ export function decompose (prop, obj, from, to, stringBuffer) { const fromValue = from[prop] const toValue = to[prop] - if (typeof fromValue === 'string' && Array.isArray(toValue)) { + if (typeof fromValue === 'number' && typeof toValue === 'number') { + // + } else if (fromValue && fromValue.splice && fromValue.isString && toValue && toValue.splice && toValue.isString) { + } else if (typeof fromValue === 'string' && Array.isArray(toValue)) { const fromValue1 = decomposeString(fromValue) const toValues = toValue.map(decomposeString) - fromValue1.isString = true from[prop] = fromValue1 to[prop] = toValues return true @@ -103,14 +111,11 @@ export function decompose (prop, obj, from, to, stringBuffer) { toValue1.shift() } - fromValue1.isString = true - toValue1.isString = true - from[prop] = fromValue1 to[prop] = toValue1 return true } else if (typeof fromValue === 'object' && typeof toValue === 'object') { - if (Array.isArray(fromValue)) { + if (Array.isArray(fromValue) && !fromValue.isString) { return fromValue.map((v, i) => decompose(i, obj[prop], fromValue, toValue)) } else { for (let prop2 in toValue) { @@ -140,22 +145,33 @@ export function recompose (prop, obj, from, to, t, originalT, stringBuffer) { if (!fromValue || !toValue) { return obj[prop] } - if (typeof fromValue === 'object' && !!fromValue && fromValue.isString) { + if ( + typeof fromValue === 'object' && + !!fromValue && + fromValue.isString && + toValue && + toValue.splice && + toValue.isString + ) { let STRING_BUFFER = '' for (let i = 0, len = fromValue.length; i < len; i++) { - const isRelative = typeof fromValue[i] === 'number' && typeof toValue[i] === 'string' && toValue[i][1] === '=' - let currentValue = - typeof fromValue[i] !== 'number' - ? fromValue[i] - : isRelative - ? fromValue[i] + parseFloat(toValue[i][0] + toValue[i].substr(2)) * t - : fromValue[i] + (toValue[i] - fromValue[i]) * t - if (isRGBColor(fromValue, i) || isRGBColor(fromValue, i, RGBA)) { - currentValue |= 0 - } - STRING_BUFFER += currentValue - if (isRelative && originalT === 1) { - fromValue[i] = fromValue[i] + parseFloat(toValue[i][0] + toValue[i].substr(2)) + if (fromValue[i] !== toValue[i] || typeof fromValue[i] !== 'number' || typeof toValue[i] === 'number') { + const isRelative = typeof fromValue[i] === 'number' && typeof toValue[i] === 'string' && toValue[i][1] === '=' + let currentValue = + typeof fromValue[i] !== 'number' + ? fromValue[i] + : isRelative + ? fromValue[i] + parseFloat(toValue[i][0] + toValue[i].substr(2)) * t + : fromValue[i] + (toValue[i] - fromValue[i]) * t + if (isRGBColor(fromValue, i) || isRGBColor(fromValue, i, RGBA)) { + currentValue |= 0 + } + STRING_BUFFER += currentValue + if (isRelative && originalT === 1) { + fromValue[i] = fromValue[i] + parseFloat(toValue[i][0] + toValue[i].substr(2)) + } + } else { + STRING_BUFFER += fromValue[i] } } if (!stringBuffer) { diff --git a/test.js b/test.js index 64c6465..e4fb884 100644 --- a/test.js +++ b/test.js @@ -48,7 +48,22 @@ test('Events', (t) => { }) test('Value Interpolation', (t) => { - let obj = { a: 0, b: 'B value 1', c: { x: 2 }, d: [3], _e: 4, g: 5, h: 0, j: 0, k: '#000', l: '#0cf', m: '#fc0' } + const m = ['rgb(', 0, ', 204, ', 255, ')'] + m.isString = true + + let obj = { + a: 0, + b: 'B value 1', + c: { x: 2 }, + d: [3], + _e: 4, + g: 5, + h: 0, + j: 0, + k: '#000', + l: '#0cf', + m + } Object.defineProperty(obj, 'e', { get () { @@ -59,6 +74,8 @@ test('Value Interpolation', (t) => { } }) + const m2 = ['rgb(', 255, ', 204, ', 0, ')'] + m2.isString = true new Tween(obj) .to( { @@ -72,7 +89,7 @@ test('Value Interpolation', (t) => { j: [1, 2], k: ['rgb(100, 100, 100)', 'rgb(200, 200, 200)'], l: '#fc0', - m: '#0cf' + m: 'rgb(255, 204, 0)' }, 100 ) @@ -90,7 +107,7 @@ test('Value Interpolation', (t) => { t.is(obj.j, 0) t.is(obj.k, 'rgb(0, 0, 0)') t.is(obj.l, 'rgb(0, 204, 255)') - t.is(obj.m, 'rgb(255, 204, 0)') + t.is(obj.m, 'rgb(0, 204, 255)') update(50) @@ -133,7 +150,7 @@ test('Value Interpolation', (t) => { t.is(obj.j, 2, 'Multi-Interpolation not worked as excepted') t.is(obj.k, 'rgb(200, 200, 200)', 'Multi-Interpolation not worked as excepted') t.is(obj.l, 'rgb(255, 204, 0)', 'String interpolation not worked as excepted') - t.is(obj.m, 'rgb(0, 204, 255)', 'String interpolation not worked as excepted') + t.is(obj.m, 'rgb(255, 204, 0)', 'Array as string interpolation not worked as excepted') }) test('Value Array-based Interpolation', (t) => {