@animini/target-dom - npm Package Compare versions

Comparing version 0.2.6 to 0.3.0

CHANGELOG.md

 # @animini/target-dom
 
+## 0.3.0
+
+### Minor Changes
+
+- 2d867a9: Package refactor, introducing vanilla api
+
+### Patch Changes
+
+- Updated dependencies [2d867a9]
+  - @animini/core@0.3.0
+
 ## 0.2.6
@@ -4,0 +15,0 @@

dist/animini-target-dom.cjs.dev.js

@@ -51,5 +51,15 @@ 'use strict';
 
-const TRANSFORM_KEYS = ['scale', 'x', 'y'];
+const TRANSFORM_KEYS = ['x', 'y', 'scale', 'rotate', 'scaleX', 'scaleY', 'skew', 'skewX', 'skewY'];
 const SIDES_KEYS = ['inset', 'margin', 'padding'];
 const SCROLL_KEYS = ['scrollLeft', 'scrollTop'];
+const RAD_TO_DEG = 180 / Math.PI;
+
+function round(n, d) {
+  const e = 10 ** d;
+  return Math.round(n * 1 * e) / e;
+}
+
+function someDefined(...args) {
+  return args.some(v => v !== void 0);
+}
 function getSidesValues(value) {
@@ -67,37 +77,28 @@ const n = value.split(' ');
       return value + ' ' + value + ' ' + value + ' ' + value;
+  }
 
-    default:
-      return value;
-  }
+  return value;
 }
-function getTransformValues(matrix) {
-  if (matrix === 'none' || typeof matrix === 'undefined') {
-    return {
-      scale: 1,
-      x: 0,
-      y: 0,
-      z: 0
-    };
-  }
-
-  const matrixType = matrix.includes('3d') ? '3d' : '2d';
-  const matrixValues = matrix.match(/matrix.*\((.+)\)/)[1].split(', ');
-
-  if (matrixType === '2d') {
-    return {
-      scale: ~~matrixValues[0],
-      x: ~~matrixValues[4],
-      y: ~~matrixValues[5],
-      z: 0
-    };
-  }
-
+function getTransformValues(style) {
+  const matrix = new DOMMatrixReadOnly(style.transform);
+  const scaleX = round(Math.sqrt(matrix.a ** 2 + matrix.b ** 2), 3);
   return {
-    scale: ~~matrixValues[0],
-    x: ~~matrixValues[12],
-    y: ~~matrixValues[13],
-    z: ~~matrixValues[14]
+    x: matrix.e,
+    y: matrix.f,
+    scale: scaleX,
+    scaleX,
+    scaleY: Math.sqrt(matrix.c * matrix.c + matrix.d * matrix.d),
+    rotate: Math.atan2(matrix.b, matrix.a) * RAD_TO_DEG
   };
 }
+function getTransformStyle(t, i) {
+  var _t$x, _t$y, _t$scaleX, _t$scaleY, _t$rotate;
 
+  let s = '';
+  if (someDefined(t.x, t.y, i.x, i.y)) s += `translate(${(_t$x = t.x) !== null && _t$x !== void 0 ? _t$x : i.x}px, ${(_t$y = t.y) !== null && _t$y !== void 0 ? _t$y : i.y}px)`;
+  if (someDefined(t.scale)) s += ` scale(${t.scale})`;else if (someDefined(t.scaleX, t.scaleY, i.scaleX, i.scaleY)) s += ` scale(${(_t$scaleX = t.scaleX) !== null && _t$scaleX !== void 0 ? _t$scaleX : i.scaleX}, ${(_t$scaleY = t.scaleY) !== null && _t$scaleY !== void 0 ? _t$scaleY : i.scaleY})`;
+  if (someDefined(t.rotate, i.rotate)) s += ` rotate(${(_t$rotate = t.rotate) !== null && _t$rotate !== void 0 ? _t$rotate : i.rotate}deg)`;
+  return s;
+}
+
 const parse = (value, animated) => {
@@ -138,3 +139,3 @@ var _animated$el;
   parse(value, animated) {
-    let [_value, unit] = core.parseUnitValue(value);
+    const [_value, unit] = core.parseUnitValue(value);
 
@@ -156,3 +157,19 @@ switch (unit) {
 };
+const rotate = {
+  parse(value) {
+    const [_value, unit] = core.parseUnitValue(value);
 
+    switch (unit) {
+      case 'rad':
+        return _value / 180 * Math.PI;
+
+      case 'turn':
+        return _value * 360;
+    }
+
+    return _value;
+  }
+
+};
+
 const string = {
@@ -181,3 +198,3 @@ onInit(a) {
 
-const _excluded = ["x", "y", "scale", "scrollTop", "scrollLeft"];
+const _excluded = ["x", "y", "zIndex", "scale", "scaleX", "scaleY", "skew", "skewX", "skewY", "rotate", "scrollTop", "scrollLeft"];
 const ADAPTERS = {
@@ -196,2 +213,3 @@ color,
   y: transform,
+  rotate,
   clipPath: string,
@@ -201,11 +219,27 @@ boxShadow: string,
   margin: string,
-  inset: string
+  inset: string,
+  opacity: undefined,
+  scale: undefined
 };
-const NO_ADAPTER = ['opacity', 'scale'];
+const IDENTITY = 'matrix(1, 0, 0, 1, 0, 0)';
 const dom = {
-  setValues(values, el) {
+  getElement(element) {
+    if (typeof element !== string) return element;
+    return document.querySelector(element);
+  },
+
+  setValues(values, el, initial, idle) {
+    const _el = el;
+
     const {
       x,
       y,
+      zIndex,
       scale,
+      scaleX,
+      scaleY,
+      skew,
+      skewX,
+      skewY,
+      rotate,
       scrollTop,
@@ -216,29 +250,49 @@ scrollLeft
 
-    for (let key in rest) {
-      el.style[key] = rest[key];
+    if (scrollLeft !== void 0 || scrollTop !== void 0) {
+      var _ref, _ref2;
+
+      const fallbackLeft = el === window ? el.scrollX : _el.scrollLeft;
+      const fallbackTop = el === window ? el.scrollY : _el.scrollTop;
+      el.scrollTo((_ref = scrollLeft) !== null && _ref !== void 0 ? _ref : fallbackLeft, (_ref2 = scrollTop) !== null && _ref2 !== void 0 ? _ref2 : fallbackTop);
     }
 
-    if (scrollTop !== undefined) el.scrollTop = scrollTop;
-    if (scrollLeft !== undefined) el.scrollLeft = scrollTop;
-    if (x === undefined && y === undefined && scale === undefined) return;
-    if (!x && !y && (scale === void 0 || scale === 1)) el.style.removeProperty('transform');
-    el.style.transform = `matrix(${scale !== void 0 ? scale : 1}, 0, 0, ${scale !== void 0 ? scale : 1}, ${x || 0}, ${y || 0})`;
+    if (el !== window) {
+      for (let key in rest) {
+        _el.style[key] = rest[key];
+      }
+
+      const t = {
+        x,
+        y,
+        scale,
+        scaleX,
+        scaleY,
+        skew,
+        skewX,
+        skewY,
+        rotate
+      };
+      if (!someDefined(Object.values(t))) return;
+      _el.style.transform = getTransformStyle(t, initial.transform);
+      if (idle && getComputedStyle(_el).transform === IDENTITY) _el.style.transform = 'none';
+    }
   },
 
-  getInitialValueAndAdapter(element, key) {
-    const style = getComputedStyle(element);
-    let value;
-    const adapter = ADAPTERS[key] || (!NO_ADAPTER.includes(key) ? generic : undefined);
+  getInitialValueAndAdapter(el, key, initial) {
+    if (el === window) {
+      if (key === 'scrollTop') return [el.scrollY, generic];else if (key === 'scrollLeft') return [el.scrollX, generic];
+      return [0, undefined];
+    }
 
-    if (SCROLL_KEYS.includes(key)) {
-      value = element[key];
-    } else if (TRANSFORM_KEYS.includes(key)) {
-      value = getTransformValues(style.transform)[key];
-    } else if (SIDES_KEYS.includes(key)) {
-      value = getSidesValues(style[key]);
-    } else {
-      value = style[key];
+    const style = getComputedStyle(el);
+    const adapter = key in ADAPTERS ? ADAPTERS[key] : generic;
+    if (SCROLL_KEYS.includes(key)) return [el[key], adapter];
+
+    if (TRANSFORM_KEYS.includes(key)) {
+      initial.transform || (initial.transform = getTransformValues(style));
+      return [initial.transform[key], adapter];
     }
 
-    return [value, adapter];
+    if (SIDES_KEYS.includes(key)) return [getSidesValues(style[key]), adapter];
+    return [style[key], adapter];
   }
@@ -245,0 +299,0 @@

dist/animini-target-dom.cjs.prod.js

@@ -51,5 +51,15 @@ 'use strict';
 
-const TRANSFORM_KEYS = ['scale', 'x', 'y'];
+const TRANSFORM_KEYS = ['x', 'y', 'scale', 'rotate', 'scaleX', 'scaleY', 'skew', 'skewX', 'skewY'];
 const SIDES_KEYS = ['inset', 'margin', 'padding'];
 const SCROLL_KEYS = ['scrollLeft', 'scrollTop'];
+const RAD_TO_DEG = 180 / Math.PI;
+
+function round(n, d) {
+  const e = 10 ** d;
+  return Math.round(n * 1 * e) / e;
+}
+
+function someDefined(...args) {
+  return args.some(v => v !== void 0);
+}
 function getSidesValues(value) {
@@ -67,37 +77,28 @@ const n = value.split(' ');
       return value + ' ' + value + ' ' + value + ' ' + value;
+  }
 
-    default:
-      return value;
-  }
+  return value;
 }
-function getTransformValues(matrix) {
-  if (matrix === 'none' || typeof matrix === 'undefined') {
-    return {
-      scale: 1,
-      x: 0,
-      y: 0,
-      z: 0
-    };
-  }
-
-  const matrixType = matrix.includes('3d') ? '3d' : '2d';
-  const matrixValues = matrix.match(/matrix.*\((.+)\)/)[1].split(', ');
-
-  if (matrixType === '2d') {
-    return {
-      scale: ~~matrixValues[0],
-      x: ~~matrixValues[4],
-      y: ~~matrixValues[5],
-      z: 0
-    };
-  }
-
+function getTransformValues(style) {
+  const matrix = new DOMMatrixReadOnly(style.transform);
+  const scaleX = round(Math.sqrt(matrix.a ** 2 + matrix.b ** 2), 3);
   return {
-    scale: ~~matrixValues[0],
-    x: ~~matrixValues[12],
-    y: ~~matrixValues[13],
-    z: ~~matrixValues[14]
+    x: matrix.e,
+    y: matrix.f,
+    scale: scaleX,
+    scaleX,
+    scaleY: Math.sqrt(matrix.c * matrix.c + matrix.d * matrix.d),
+    rotate: Math.atan2(matrix.b, matrix.a) * RAD_TO_DEG
   };
 }
+function getTransformStyle(t, i) {
+  var _t$x, _t$y, _t$scaleX, _t$scaleY, _t$rotate;
 
+  let s = '';
+  if (someDefined(t.x, t.y, i.x, i.y)) s += `translate(${(_t$x = t.x) !== null && _t$x !== void 0 ? _t$x : i.x}px, ${(_t$y = t.y) !== null && _t$y !== void 0 ? _t$y : i.y}px)`;
+  if (someDefined(t.scale)) s += ` scale(${t.scale})`;else if (someDefined(t.scaleX, t.scaleY, i.scaleX, i.scaleY)) s += ` scale(${(_t$scaleX = t.scaleX) !== null && _t$scaleX !== void 0 ? _t$scaleX : i.scaleX}, ${(_t$scaleY = t.scaleY) !== null && _t$scaleY !== void 0 ? _t$scaleY : i.scaleY})`;
+  if (someDefined(t.rotate, i.rotate)) s += ` rotate(${(_t$rotate = t.rotate) !== null && _t$rotate !== void 0 ? _t$rotate : i.rotate}deg)`;
+  return s;
+}
+
 const parse = (value, animated) => {
@@ -138,3 +139,3 @@ var _animated$el;
   parse(value, animated) {
-    let [_value, unit] = core.parseUnitValue(value);
+    const [_value, unit] = core.parseUnitValue(value);
 
@@ -156,3 +157,19 @@ switch (unit) {
 };
+const rotate = {
+  parse(value) {
+    const [_value, unit] = core.parseUnitValue(value);
 
+    switch (unit) {
+      case 'rad':
+        return _value / 180 * Math.PI;
+
+      case 'turn':
+        return _value * 360;
+    }
+
+    return _value;
+  }
+
+};
+
 const string = {
@@ -181,3 +198,3 @@ onInit(a) {
 
-const _excluded = ["x", "y", "scale", "scrollTop", "scrollLeft"];
+const _excluded = ["x", "y", "zIndex", "scale", "scaleX", "scaleY", "skew", "skewX", "skewY", "rotate", "scrollTop", "scrollLeft"];
 const ADAPTERS = {
@@ -196,2 +213,3 @@ color,
   y: transform,
+  rotate,
   clipPath: string,
@@ -201,11 +219,27 @@ boxShadow: string,
   margin: string,
-  inset: string
+  inset: string,
+  opacity: undefined,
+  scale: undefined
 };
-const NO_ADAPTER = ['opacity', 'scale'];
+const IDENTITY = 'matrix(1, 0, 0, 1, 0, 0)';
 const dom = {
-  setValues(values, el) {
+  getElement(element) {
+    if (typeof element !== string) return element;
+    return document.querySelector(element);
+  },
+
+  setValues(values, el, initial, idle) {
+    const _el = el;
+
     const {
       x,
       y,
+      zIndex,
       scale,
+      scaleX,
+      scaleY,
+      skew,
+      skewX,
+      skewY,
+      rotate,
       scrollTop,
@@ -216,29 +250,49 @@ scrollLeft
 
-    for (let key in rest) {
-      el.style[key] = rest[key];
+    if (scrollLeft !== void 0 || scrollTop !== void 0) {
+      var _ref, _ref2;
+
+      const fallbackLeft = el === window ? el.scrollX : _el.scrollLeft;
+      const fallbackTop = el === window ? el.scrollY : _el.scrollTop;
+      el.scrollTo((_ref = scrollLeft) !== null && _ref !== void 0 ? _ref : fallbackLeft, (_ref2 = scrollTop) !== null && _ref2 !== void 0 ? _ref2 : fallbackTop);
     }
 
-    if (scrollTop !== undefined) el.scrollTop = scrollTop;
-    if (scrollLeft !== undefined) el.scrollLeft = scrollTop;
-    if (x === undefined && y === undefined && scale === undefined) return;
-    if (!x && !y && (scale === void 0 || scale === 1)) el.style.removeProperty('transform');
-    el.style.transform = `matrix(${scale !== void 0 ? scale : 1}, 0, 0, ${scale !== void 0 ? scale : 1}, ${x || 0}, ${y || 0})`;
+    if (el !== window) {
+      for (let key in rest) {
+        _el.style[key] = rest[key];
+      }
+
+      const t = {
+        x,
+        y,
+        scale,
+        scaleX,
+        scaleY,
+        skew,
+        skewX,
+        skewY,
+        rotate
+      };
+      if (!someDefined(Object.values(t))) return;
+      _el.style.transform = getTransformStyle(t, initial.transform);
+      if (idle && getComputedStyle(_el).transform === IDENTITY) _el.style.transform = 'none';
+    }
   },
 
-  getInitialValueAndAdapter(element, key) {
-    const style = getComputedStyle(element);
-    let value;
-    const adapter = ADAPTERS[key] || (!NO_ADAPTER.includes(key) ? generic : undefined);
+  getInitialValueAndAdapter(el, key, initial) {
+    if (el === window) {
+      if (key === 'scrollTop') return [el.scrollY, generic];else if (key === 'scrollLeft') return [el.scrollX, generic];
+      return [0, undefined];
+    }
 
-    if (SCROLL_KEYS.includes(key)) {
-      value = element[key];
-    } else if (TRANSFORM_KEYS.includes(key)) {
-      value = getTransformValues(style.transform)[key];
-    } else if (SIDES_KEYS.includes(key)) {
-      value = getSidesValues(style[key]);
-    } else {
-      value = style[key];
+    const style = getComputedStyle(el);
+    const adapter = key in ADAPTERS ? ADAPTERS[key] : generic;
+    if (SCROLL_KEYS.includes(key)) return [el[key], adapter];
+
+    if (TRANSFORM_KEYS.includes(key)) {
+      initial.transform || (initial.transform = getTransformValues(style));
+      return [initial.transform[key], adapter];
     }
 
-    return [value, adapter];
+    if (SIDES_KEYS.includes(key)) return [getSidesValues(style[key]), adapter];
+    return [style[key], adapter];
   }
@@ -245,0 +299,0 @@

dist/animini-target-dom.esm.js

@@ -47,5 +47,15 @@ import { parseColor, parseUnitValue, interpolate, parseNumbers } from '@animini/core';
 
-const TRANSFORM_KEYS = ['scale', 'x', 'y'];
+const TRANSFORM_KEYS = ['x', 'y', 'scale', 'rotate', 'scaleX', 'scaleY', 'skew', 'skewX', 'skewY'];
 const SIDES_KEYS = ['inset', 'margin', 'padding'];
 const SCROLL_KEYS = ['scrollLeft', 'scrollTop'];
+const RAD_TO_DEG = 180 / Math.PI;
+
+function round(n, d) {
+  const e = 10 ** d;
+  return Math.round(n * 1 * e) / e;
+}
+
+function someDefined(...args) {
+  return args.some(v => v !== void 0);
+}
 function getSidesValues(value) {
@@ -63,37 +73,28 @@ const n = value.split(' ');
       return value + ' ' + value + ' ' + value + ' ' + value;
+  }
 
-    default:
-      return value;
-  }
+  return value;
 }
-function getTransformValues(matrix) {
-  if (matrix === 'none' || typeof matrix === 'undefined') {
-    return {
-      scale: 1,
-      x: 0,
-      y: 0,
-      z: 0
-    };
-  }
-
-  const matrixType = matrix.includes('3d') ? '3d' : '2d';
-  const matrixValues = matrix.match(/matrix.*\((.+)\)/)[1].split(', ');
-
-  if (matrixType === '2d') {
-    return {
-      scale: ~~matrixValues[0],
-      x: ~~matrixValues[4],
-      y: ~~matrixValues[5],
-      z: 0
-    };
-  }
-
+function getTransformValues(style) {
+  const matrix = new DOMMatrixReadOnly(style.transform);
+  const scaleX = round(Math.sqrt(matrix.a ** 2 + matrix.b ** 2), 3);
   return {
-    scale: ~~matrixValues[0],
-    x: ~~matrixValues[12],
-    y: ~~matrixValues[13],
-    z: ~~matrixValues[14]
+    x: matrix.e,
+    y: matrix.f,
+    scale: scaleX,
+    scaleX,
+    scaleY: Math.sqrt(matrix.c * matrix.c + matrix.d * matrix.d),
+    rotate: Math.atan2(matrix.b, matrix.a) * RAD_TO_DEG
   };
 }
+function getTransformStyle(t, i) {
+  var _t$x, _t$y, _t$scaleX, _t$scaleY, _t$rotate;
 
+  let s = '';
+  if (someDefined(t.x, t.y, i.x, i.y)) s += `translate(${(_t$x = t.x) !== null && _t$x !== void 0 ? _t$x : i.x}px, ${(_t$y = t.y) !== null && _t$y !== void 0 ? _t$y : i.y}px)`;
+  if (someDefined(t.scale)) s += ` scale(${t.scale})`;else if (someDefined(t.scaleX, t.scaleY, i.scaleX, i.scaleY)) s += ` scale(${(_t$scaleX = t.scaleX) !== null && _t$scaleX !== void 0 ? _t$scaleX : i.scaleX}, ${(_t$scaleY = t.scaleY) !== null && _t$scaleY !== void 0 ? _t$scaleY : i.scaleY})`;
+  if (someDefined(t.rotate, i.rotate)) s += ` rotate(${(_t$rotate = t.rotate) !== null && _t$rotate !== void 0 ? _t$rotate : i.rotate}deg)`;
+  return s;
+}
+
 const parse = (value, animated) => {
@@ -134,3 +135,3 @@ var _animated$el;
   parse(value, animated) {
-    let [_value, unit] = parseUnitValue(value);
+    const [_value, unit] = parseUnitValue(value);
 
@@ -152,3 +153,19 @@ switch (unit) {
 };
+const rotate = {
+  parse(value) {
+    const [_value, unit] = parseUnitValue(value);
 
+    switch (unit) {
+      case 'rad':
+        return _value / 180 * Math.PI;
+
+      case 'turn':
+        return _value * 360;
+    }
+
+    return _value;
+  }
+
+};
+
 const string = {
@@ -177,3 +194,3 @@ onInit(a) {
 
-const _excluded = ["x", "y", "scale", "scrollTop", "scrollLeft"];
+const _excluded = ["x", "y", "zIndex", "scale", "scaleX", "scaleY", "skew", "skewX", "skewY", "rotate", "scrollTop", "scrollLeft"];
 const ADAPTERS = {
@@ -192,2 +209,3 @@ color,
   y: transform,
+  rotate,
   clipPath: string,
@@ -197,11 +215,27 @@ boxShadow: string,
   margin: string,
-  inset: string
+  inset: string,
+  opacity: undefined,
+  scale: undefined
 };
-const NO_ADAPTER = ['opacity', 'scale'];
+const IDENTITY = 'matrix(1, 0, 0, 1, 0, 0)';
 const dom = {
-  setValues(values, el) {
+  getElement(element) {
+    if (typeof element !== string) return element;
+    return document.querySelector(element);
+  },
+
+  setValues(values, el, initial, idle) {
+    const _el = el;
+
     const {
       x,
       y,
+      zIndex,
       scale,
+      scaleX,
+      scaleY,
+      skew,
+      skewX,
+      skewY,
+      rotate,
       scrollTop,
@@ -212,29 +246,49 @@ scrollLeft
 
-    for (let key in rest) {
-      el.style[key] = rest[key];
+    if (scrollLeft !== void 0 || scrollTop !== void 0) {
+      var _ref, _ref2;
+
+      const fallbackLeft = el === window ? el.scrollX : _el.scrollLeft;
+      const fallbackTop = el === window ? el.scrollY : _el.scrollTop;
+      el.scrollTo((_ref = scrollLeft) !== null && _ref !== void 0 ? _ref : fallbackLeft, (_ref2 = scrollTop) !== null && _ref2 !== void 0 ? _ref2 : fallbackTop);
     }
 
-    if (scrollTop !== undefined) el.scrollTop = scrollTop;
-    if (scrollLeft !== undefined) el.scrollLeft = scrollTop;
-    if (x === undefined && y === undefined && scale === undefined) return;
-    if (!x && !y && (scale === void 0 || scale === 1)) el.style.removeProperty('transform');
-    el.style.transform = `matrix(${scale !== void 0 ? scale : 1}, 0, 0, ${scale !== void 0 ? scale : 1}, ${x || 0}, ${y || 0})`;
+    if (el !== window) {
+      for (let key in rest) {
+        _el.style[key] = rest[key];
+      }
+
+      const t = {
+        x,
+        y,
+        scale,
+        scaleX,
+        scaleY,
+        skew,
+        skewX,
+        skewY,
+        rotate
+      };
+      if (!someDefined(Object.values(t))) return;
+      _el.style.transform = getTransformStyle(t, initial.transform);
+      if (idle && getComputedStyle(_el).transform === IDENTITY) _el.style.transform = 'none';
+    }
   },
 
-  getInitialValueAndAdapter(element, key) {
-    const style = getComputedStyle(element);
-    let value;
-    const adapter = ADAPTERS[key] || (!NO_ADAPTER.includes(key) ? generic : undefined);
+  getInitialValueAndAdapter(el, key, initial) {
+    if (el === window) {
+      if (key === 'scrollTop') return [el.scrollY, generic];else if (key === 'scrollLeft') return [el.scrollX, generic];
+      return [0, undefined];
+    }
 
-    if (SCROLL_KEYS.includes(key)) {
-      value = element[key];
-    } else if (TRANSFORM_KEYS.includes(key)) {
-      value = getTransformValues(style.transform)[key];
-    } else if (SIDES_KEYS.includes(key)) {
-      value = getSidesValues(style[key]);
-    } else {
-      value = style[key];
+    const style = getComputedStyle(el);
+    const adapter = key in ADAPTERS ? ADAPTERS[key] : generic;
+    if (SCROLL_KEYS.includes(key)) return [el[key], adapter];
+
+    if (TRANSFORM_KEYS.includes(key)) {
+      initial.transform || (initial.transform = getTransformValues(style));
+      return [initial.transform[key], adapter];
     }
 
-    return [value, adapter];
+    if (SIDES_KEYS.includes(key)) return [getSidesValues(style[key]), adapter];
+    return [style[key], adapter];
   }
@@ -241,0 +295,0 @@

dist/declarations/src/adapters/index.d.ts

@@ -1,4 +0,4 @@
-export { color } from './color';
-export { generic } from './generic';
-export { transform } from './transform';
-export { string } from './string';
+export * from './color';
+export * from './generic';
+export * from './transform';
+export * from './string';

dist/declarations/src/adapters/transform.d.ts

 import { DomAdapter } from '../types';
 export declare const transform: DomAdapter;
+export declare const rotate: DomAdapter;

dist/declarations/src/targetDom.d.ts

 import { Styles } from './types';
 import { Target } from '@animini/core';
-export declare const dom: Target<HTMLElement, Styles>;
+export declare const dom: Target<HTMLElement | Window, Styles>;

dist/declarations/src/types.d.ts

@@ -6,2 +6,8 @@ import { Adapter } from '@animini/core';
     scale: number;
+    scaleX: number;
+    scaleY: number;
+    skewX: number;
+    skewY: number;
+    skew: number;
+    rotate: number;
     scrollTop: number | string;
@@ -12,6 +18,8 @@ scrollLeft: number | string;
     scale: number;
+    scaleX: number;
+    scaleY: number;
+    rotate: number;
     x: number;
     y: number;
-    z: number;
 };
-export declare type DomAdapter = Adapter<HTMLElement>;
+export declare type DomAdapter = Adapter<HTMLElement | Window>;

dist/declarations/src/utils.d.ts

@@ -5,3 +5,5 @@ import { Transform } from './types';
 export declare const SCROLL_KEYS: string[];
+export declare function someDefined(...args: any[]): boolean;
 export declare function getSidesValues(value: string): string;
-export declare function getTransformValues(matrix: string): Transform;
+export declare function getTransformValues(style: CSSStyleDeclaration): Transform;
+export declare function getTransformStyle(t: Transform, i: Transform): string;

package.json

 {
   "name": "@animini/target-dom",
-  "version": "0.2.6",
+  "version": "0.3.0",
   "description": "animini target for the dom",
@@ -16,4 +16,4 @@ "keywords": [],
   "dependencies": {
-    "@animini/core": "0.2.6"
+    "@animini/core": "0.3.0"
   }
 }

src/adapters/generic.ts

@@ -10,3 +10,3 @@ import { parseUnitValue } from '@animini/core'
     case '%':
-      const parent = animated.el?.offsetParent
+      const parent = (animated.el as HTMLElement)?.offsetParent
       // @ts-expect-error
@@ -13,0 +13,0 @@ const size = (key === 'top' ? parent?.offsetHeight : parent?.offsetWidth) || 0

src/adapters/index.ts

@@ -1,4 +0,4 @@
-export { color } from './color'
-export { generic } from './generic'
-export { transform } from './transform'
-export { string } from './string'
+export * from './color'
+export * from './generic'
+export * from './transform'
+export * from './string'

src/adapters/transform.ts

@@ -6,6 +6,10 @@ import { parseUnitValue } from '@animini/core'
   parse(value, animated) {
-    let [_value, unit] = parseUnitValue(value)
+    const [_value, unit] = parseUnitValue(value)
     switch (unit) {
       case '%':
-        return (_value * parseFloat(getComputedStyle(animated.el!)[animated.key === 'x' ? 'width' : 'height'])) / 100
+        return (
+          (_value *
+            parseFloat(getComputedStyle(animated.el as HTMLElement)[animated.key === 'x' ? 'width' : 'height'])) /
+          100
+        )
       case 'vw':
@@ -19,1 +23,14 @@ return (_value * window.innerWidth) / 100
 }
+
+export const rotate: DomAdapter = {
+  parse(value) {
+    const [_value, unit] = parseUnitValue(value)
+    switch (unit) {
+      case 'rad':
+        return (_value / 180) * Math.PI
+      case 'turn':
+        return _value * 360
+    }
+    return _value
+  }
+}

src/targetDom.ts

@@ -1,5 +0,13 @@
-import { color, generic, transform, string } from './adapters'
+import { color, generic, transform, string, rotate } from './adapters'
 import { DomAdapter, Styles, Transform } from './types'
 import { Target } from '@animini/core'
-import { getSidesValues, getTransformValues, SCROLL_KEYS, SIDES_KEYS, TRANSFORM_KEYS } from './utils'
+import {
+  getSidesValues,
+  getTransformStyle,
+  getTransformValues,
+  SCROLL_KEYS,
+  SIDES_KEYS,
+  someDefined,
+  TRANSFORM_KEYS
+} from './utils'
 
@@ -19,2 +27,3 @@ const ADAPTERS: Partial<Record<keyof Styles, DomAdapter>> = {
   y: transform,
+  rotate,
   clipPath: string,
@@ -24,41 +33,67 @@ boxShadow: string,
   margin: string,
-  inset: string
+  inset: string,
+  opacity: undefined,
+  scale: undefined
 }
 
-const NO_ADAPTER = ['opacity', 'scale']
+const IDENTITY = 'matrix(1, 0, 0, 1, 0, 0)'
 
-export const dom: Target<HTMLElement, Styles> = {
-  setValues(values, el) {
-    const { x, y, scale, scrollTop, scrollLeft, ...rest } = values
-    for (let key in rest) {
-      // @ts-expect-error
-      el.style[key] = rest[key]
+export const dom: Target<HTMLElement | Window, Styles> = {
+  getElement(element) {
+    if (typeof element !== string) return element
+    return document.querySelector(element)
+  },
+  setValues(values, el, initial, idle) {
+    const _el = el as HTMLElement
+
+    const { x, y, zIndex, scale, scaleX, scaleY, skew, skewX, skewY, rotate, scrollTop, scrollLeft, ...rest } = values
+
+    if (scrollLeft !== void 0 || scrollTop !== void 0) {
+      const fallbackLeft = el === window ? el.scrollX : _el.scrollLeft
+      const fallbackTop = el === window ? el.scrollY : _el.scrollTop
+      el.scrollTo((scrollLeft as number) ?? fallbackLeft, (scrollTop as number) ?? fallbackTop)
     }
 
-    if (scrollTop !== undefined) el.scrollTop = scrollTop as number
-    if (scrollLeft !== undefined) el.scrollLeft = scrollTop as number
+    if (el !== window) {
+      for (let key in rest) {
+        // @ts-expect-error
+        _el.style[key] = rest[key]
+      }
 
-    if (x === undefined && y === undefined && scale === undefined) return
-    if (!x && !y && (scale === void 0 || scale === 1)) el.style.removeProperty('transform')
-    el.style.transform = `matrix(${scale !== void 0 ? scale : 1}, 0, 0, ${scale !== void 0 ? scale : 1}, ${x || 0}, ${
-      y || 0
-    })`
+      const t = { x, y, scale, scaleX, scaleY, skew, skewX, skewY, rotate }
+      if (!someDefined(Object.values(t))) return
+      _el.style.transform = getTransformStyle(t as Transform, initial.transform)
+
+      // TODO can potentially be optimized 👇
+      if (idle && getComputedStyle(_el).transform === IDENTITY) _el.style.transform = 'none'
+    }
   },
 
-  getInitialValueAndAdapter(element, key) {
-    const style = getComputedStyle(element)
-    let value
-    const adapter = ADAPTERS[key as any] || (!NO_ADAPTER.includes(key as string) ? generic : undefined)
-    if (SCROLL_KEYS.includes(key as string)) {
-      // @ts-expect-error
-      value = element[key]
-    } else if (TRANSFORM_KEYS.includes(key as string)) {
-      value = getTransformValues(style.transform)[key as keyof Transform]
-    } else if (SIDES_KEYS.includes(key as string)) {
-      value = getSidesValues(style[key as any])
-    } else {
-      value = style[key as any]
+  getInitialValueAndAdapter(el, key, initial) {
+    // element is the window
+    if (el === window) {
+      if (key === 'scrollTop') return [el.scrollY, generic]
+      else if (key === 'scrollLeft') return [el.scrollX, generic]
+      // TODO return type doesn't make any sense
+      return [0, undefined]
     }
-    return [value, adapter] as [Styles[typeof key], DomAdapter | undefined]
+
+    // element is an HTMLElement
+    const style = getComputedStyle(el as HTMLElement)
+    const adapter = key in ADAPTERS ? ADAPTERS[key] : generic
+
+    // @ts-expect-error
+    if (SCROLL_KEYS.includes(key as string)) return [el[key], adapter]
+
+    if (TRANSFORM_KEYS.includes(key as string)) {
+      initial.transform ||= getTransformValues(style)
+      return [initial.transform[key as string], adapter]
+    }
+
+    // @ts-expect-error
+    if (SIDES_KEYS.includes(key as string)) return [getSidesValues(style[key]), adapter]
+
+    // @ts-expect-error
+    return [style[key], adapter]
   }
 }

src/types.ts

@@ -8,2 +8,8 @@ import { Adapter } from '@animini/core'
   scale: number
+  scaleX: number
+  scaleY: number
+  skewX: number
+  skewY: number
+  skew: number
+  rotate: number
   scrollTop: number | string
@@ -13,4 +19,14 @@ scrollLeft: number | string
 
-export type Transform = { scale: number; x: number; y: number; z: number }
+export type Transform = {
+  scale: number
+  scaleX: number
+  scaleY: number
+  // skewX: number
+  // skewY: number
+  // skew: number
+  rotate: number
+  x: number
+  y: number
+}
 
-export type DomAdapter = Adapter<HTMLElement>
+export type DomAdapter = Adapter<HTMLElement | Window>

src/utils.ts

 import { Transform } from './types'
 
-export const TRANSFORM_KEYS = ['scale', 'x', 'y']
+export const TRANSFORM_KEYS = ['x', 'y', 'scale', 'rotate', 'scaleX', 'scaleY', 'skew', 'skewX', 'skewY']
 export const SIDES_KEYS = ['inset', 'margin', 'padding']
 export const SCROLL_KEYS = ['scrollLeft', 'scrollTop']
 
+const RAD_TO_DEG = 180 / Math.PI
+
+function round(n: number, d = 0) {
+  const e = 10 ** d
+  return Math.round(n * 1 * e) / e
+}
+
+export function someDefined(...args: any[]) {
+  return args.some((v) => v !== void 0)
+}
+
 export function getSidesValues(value: string) {
@@ -16,23 +27,50 @@ const n = value.split(' ')
       return value + ' ' + value + ' ' + value + ' ' + value
-    default:
-      return value
   }
+  return value
 }
 
-export function getTransformValues(matrix: string): Transform {
-  // No transform property. Simply return 0 values.
-  if (matrix === 'none' || typeof matrix === 'undefined') {
-    return { scale: 1, x: 0, y: 0, z: 0 }
-  }
+export function getTransformValues(style: CSSStyleDeclaration): Transform {
+  const matrix = new DOMMatrixReadOnly(style.transform)
+  const scaleX = round(Math.sqrt(matrix.a ** 2 + matrix.b ** 2), 3)
 
-  // Can either be 2d or 3d transform
-  const matrixType = matrix.includes('3d') ? '3d' : '2d'
-  const matrixValues = matrix.match(/matrix.*\((.+)\)/)![1].split(', ')
+  // const skewX = Math.atan2(matrix.d, matrix.c) * RAD_TO_DEG - 90
+  // const skewY = Math.atan2(matrix.b, matrix.a) * RAD_TO_DEG
 
-  if (matrixType === '2d') {
-    return { scale: ~~matrixValues[0], x: ~~matrixValues[4], y: ~~matrixValues[5], z: 0 }
+  // console.log(
+  //   {
+  //     x: matrix.e,
+  //     y: matrix.f,
+  //     scale: scaleX,
+  //     scaleX,
+  //     scaleY: Math.sqrt(matrix.c * matrix.c + matrix.d * matrix.d),
+  //     skew: skewX,
+  //     skewX,
+  //     skewY,
+  //     rotate: Math.atan2(matrix.b, matrix.a) * RAD_TO_DEG
+  //   },
+  //   matrix
+  // )
+
+  return {
+    x: matrix.e,
+    y: matrix.f,
+    scale: scaleX,
+    scaleX,
+    scaleY: Math.sqrt(matrix.c * matrix.c + matrix.d * matrix.d),
+    // skew: skewX,
+    // skewX,
+    // skewY,
+    rotate: Math.atan2(matrix.b, matrix.a) * RAD_TO_DEG
   }
+}
 
-  // matrixType === '3d'
-  return { scale: ~~matrixValues[0], x: ~~matrixValues[12], y: ~~matrixValues[13], z: ~~matrixValues[14] }
+export function getTransformStyle(t: Transform, i: Transform) {
+  let s = ''
+  if (someDefined(t.x, t.y, i.x, i.y)) s += `translate(${t.x ?? i.x}px, ${t.y ?? i.y}px)`
+  if (someDefined(t.scale)) s += ` scale(${t.scale})`
+  else if (someDefined(t.scaleX, t.scaleY, i.scaleX, i.scaleY))
+    s += ` scale(${t.scaleX ?? i.scaleX}, ${t.scaleY ?? i.scaleY})`
+  if (someDefined(t.rotate, i.rotate)) s += ` rotate(${t.rotate ?? i.rotate}deg)`
+  // if (someDefined(t.skew, i.skew)) s += ` skew(${t.skew ?? i.skew}deg)`
+  return s
 }

No alert changes

Improved metrics

Total package byte prevSize

34154

increased by33.61%

Lines of code

1034

increased by30.06%

Dependency changes

• + Added@animini/core@0.3.0(transitive)

• - Removed@animini/core@0.2.6(transitive)

• Updated@animini/core@0.3.0