All files / plugins bakeGroupTransforms.ts

92.98% Statements 53/57
84.62% Branches 22/26
88.89% Functions 8/9
92.45% Lines 49/53
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 1451x                             1x                       16x         7x   5x   12x     4x 4x                       20x 66x 24x 24x           20x                                 4x   4x 4x 4x 1x 1x 1x 1x 1x 1x 1x 5x             1x 1x 1x 1x 1x 3x 3x 3x     3x 3x 3x 21x 20x     3x               4x   4x       4x 4x 4x 4x 4x 4x 4x     1x              
import {
  applyTransforms,
  convertToRelative,
  flattenGroups,
  getGroupAttrs,
  getRotation,
  getScaling,
  getTranslation,
  js2path,
  path2js,
} from './_path';
 
import { JsApi } from '../lib/jsapi';
import { Plugin } from './_types';
 
export const defaultParams = {
  floatPrecision: 3,
  transformPrecision: 5,
  applyTransformsStroked: true,
};
 
export type Params = typeof defaultParams;
 
/**
 * Bakes group transforms into paths.
 */
function fn(item: JsApi, params: Params) {
  if (
    !item.isElem('group') ||
    !item.hasAttr() ||
    item.hasAttr('android:name') ||
    item.isEmpty() ||
    item.content.some(i => i.hasAttr('android:name')) ||
    // TODO: are there some cases where we can bake group transforms into a clip-path?
    item.content.some(i => i.isElem('clip-path'))
  ) {
    return item;
  }
 
  const { floatPrecision } = params;
  const error = +Math.pow(0.1, floatPrecision).toFixed(floatPrecision);
 
  /**
   * Decrease accuracy of floating-point numbers
   * in path data keeping a specified number of decimals.
   * Smart rounds values like 2.3491 to 2.35 instead of 2.349.
   * Doesn't apply "smartness" if the number precision fits already.
   *
   * @param {Array} data input data array
   * @return {Array} output data array
   */
  function strongRound(data: number[]) {
    for (let i = data.length; i-- > 0; ) {
      if (+data[i].toFixed(floatPrecision) !== data[i]) {
        const rounded = +data[i].toFixed(floatPrecision - 1);
        data[i] =
          +Math.abs(rounded - data[i]).toFixed(floatPrecision + 1) >= error
            ? +data[i].toFixed(floatPrecision)
            : rounded;
      }
    }
    return data;
  }
 
  /**
   * Simple rounding function if precision is 0.
   *
   * @param {Array} data input data array
   * @return {Array} output data array
   */
  function round(data: number[]) {
    for (let i = data.length; i-- > 0; ) {
      data[i] = Math.round(data[i]);
    }
    return data;
  }
 
  const roundData =
    floatPrecision > 0 && floatPrecision < 20 ? strongRound : round;
 
  const g1Attrs = getGroupAttrs(item);
  item.content.forEach(i => {
    if (i.isElem('group')) {
      const g2Attrs = getGroupAttrs(i);
      const matrix = flattenGroups([g1Attrs, g2Attrs]);
      const { sx, sy } = getScaling(matrix);
      const { r } = getRotation(matrix);
      const { tx, ty } = getTranslation(matrix);
      const g3Attrs = { sx, sy, r, tx, ty };
      const addAttrFn = (local: string, value: number) => {
        i.addAttr({
          name: `android:${local}`,
          prefix: 'android',
          local,
          value: String(value),
        });
      };
      addAttrFn('scaleX', sx);
      addAttrFn('scaleY', sy);
      addAttrFn('rotation', r);
      addAttrFn('translateX', tx);
      addAttrFn('translateY', ty);
    } else Eif (i.isElem('path') || i.isElem('clip-path')) {
      let data = path2js(i);
      Iif (!data.length) {
        return;
      }
      convertToRelative(data);
      data = applyTransforms(item, i, data, params);
      data.forEach(d => {
        if (d.data) {
          roundData(d.data);
        }
      });
      js2path(i, data, {
        collapseRepeated: true,
        negativeExtraSpace: true,
        leadingZero: false,
      });
    }
  });
 
  removeGroupAttrs(item);
 
  return item;
}
 
function removeGroupAttrs(group: JsApi) {
  group.removeAttr('android:pivotX');
  group.removeAttr('android:pivotY');
  group.removeAttr('android:scaleX');
  group.removeAttr('android:scaleY');
  group.removeAttr('android:translateX');
  group.removeAttr('android:translateY');
  group.removeAttr('android:rotation');
}
 
export const bakeGroupTransforms: Plugin<Params> = {
  type: 'perItem',
  active: true,
  description: 'merges group transforms towards the bottom of the tree',
  params: defaultParams,
  fn,
};