react-moveable/dist/moveable.cjs.js

A React Component that create Moveable, Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable, Groupable.

/*
Copyright (c) 2019 Daybrush
name: react-moveable
license: MIT
author: Daybrush
repository: https://github.com/daybrush/moveable/blob/master/packages/react-moveable
version: 0.30.0
*/
'use strict';

var getAgent = require('@egjs/agent');
var frameworkUtils = require('framework-utils');
var utils = require('@daybrush/utils');
var matrix = require('@scena/matrix');
var cssToMat = require('css-to-mat');
var ChildrenDiffer = require('@egjs/children-differ');
var overlapArea = require('overlap-area');
var DragScroll = require('@scena/dragscroll');
var React = require('react');
var Gesto = require('gesto');
var styled = require('react-css-styled');

/*! *****************************************************************************
Copyright (c) Microsoft Corporation.

Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */

/* global Reflect, Promise */
var extendStatics = function (d, b) {
  extendStatics = Object.setPrototypeOf || {
    __proto__: []
  } instanceof Array && function (d, b) {
    d.__proto__ = b;
  } || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
  };

  return extendStatics(d, b);
};

function __extends(d, b) {
  extendStatics(d, b);

  function __() {
    this.constructor = d;
  }

  d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
var __assign = function () {
  __assign = Object.assign || function __assign(t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
      s = arguments[i];

      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
    }

    return t;
  };

  return __assign.apply(this, arguments);
};
function __rest(s, e) {
  var t = {};

  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];

  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  }
  return t;
}
function __decorate(decorators, target, key, desc) {
  var c = arguments.length,
      r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
      d;
  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
  return c > 3 && r && Object.defineProperty(target, key, r), r;
}
function __spreadArrays() {
  for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;

  for (var r = Array(s), k = 0, i = 0; i < il; i++) for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++) r[k] = a[j];

  return r;
}

function makeAble(name, able) {
  var _a;

  return __assign({
    events: {},
    props: (_a = {}, _a[name] = Boolean, _a),
    name: name
  }, able);
}

function getSVGCursor(scale, degree) {
  return "data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"" + 32 * scale + "px\" height=\"" + 32 * scale + "px\" viewBox=\"0 0 32 32\" ><path d=\"M 16,5 L 12,10 L 14.5,10 L 14.5,22 L 12,22 L 16,27 L 20,22 L 17.5,22 L 17.5,10 L 20, 10 L 16,5 Z\" stroke-linejoin=\"round\" stroke-width=\"1.2\" fill=\"black\" stroke=\"white\" style=\"transform:rotate(" + degree + "deg);transform-origin: 16px 16px\"></path></svg>";
}

function getCursorCSS(degree) {
  var x1 = getSVGCursor(1, degree);
  var x2 = getSVGCursor(2, degree);
  var degree45 = Math.round(degree / 45) * 45 % 180;
  var defaultCursor = "ns-resize";

  if (degree45 === 135) {
    defaultCursor = "nwse-resize";
  } else if (degree45 === 45) {
    defaultCursor = "nesw-resize";
  } else if (degree45 === 90) {
    defaultCursor = "ew-resize";
  } // tslint:disable-next-line: max-line-length


  return "cursor:" + defaultCursor + ";cursor: url('" + x1 + "') 16 16, " + defaultCursor + ";cursor: -webkit-image-set(url('" + x1 + "') 1x, url('" + x2 + "') 2x) 16 16, " + defaultCursor + ";";
}

var agent = getAgent();
var IS_WEBKIT = agent.browser.webkit;
var IS_WEBKIT605 = IS_WEBKIT && function () {
  var navi = typeof window === "undefined" ? {
    userAgent: ""
  } : window.navigator;
  var res = /applewebkit\/([^\s]+)/g.exec(navi.userAgent.toLowerCase());
  return res ? parseFloat(res[1]) < 605 : false;
}();
var PREFIX = "moveable-";
var MOVEABLE_CSS = "\n{\n\tposition: absolute;\n\twidth: 1px;\n\theight: 1px;\n\tleft: 0;\n\ttop: 0;\n    z-index: 3000;\n    --moveable-color: #4af;\n    --zoom: 1;\n    --zoompx: 1px;\n    will-change: transform;\n}\n.control-box {\n    z-index: 0;\n}\n.line, .control {\n    position: absolute;\n\tleft: 0;\n    top: 0;\n    will-change: transform;\n}\n.control {\n\twidth: 14px;\n\theight: 14px;\n\tborder-radius: 50%;\n\tborder: 2px solid #fff;\n\tbox-sizing: border-box;\n    background: #4af;\n    background: var(--moveable-color);\n\tmargin-top: -7px;\n    margin-left: -7px;\n    border: 2px solid #fff;\n    z-index: 10;\n}\n.padding {\n    position: absolute;\n    top: 0px;\n    left: 0px;\n    width: 100px;\n    height: 100px;\n    transform-origin: 0 0;\n}\n.line {\n\twidth: 1px;\n    height: 1px;\n    background: #4af;\n    background: var(--moveable-color);\n\ttransform-origin: 0px 50%;\n}\n.line.dashed {\n    box-sizing: border-box;\n    background: transparent;\n}\n.line.dashed.horizontal {\n    border-top: 1px dashed #4af;\n    border-top-color: #4af;\n    border-top-color: var(--moveable-color);\n}\n.line.dashed.vertical {\n    border-left: 1px dashed #4af;\n    border-left-color: #4af;\n    border-left-color: var(--moveable-color);\n}\n.line.vertical {\n    transform: translateX(-50%);\n}\n.line.horizontal {\n    transform: translateY(-50%);\n}\n.line.vertical.bold {\n    width: 2px;\n}\n.line.horizontal.bold {\n    height: 2px;\n}\n\n.control.origin {\n\tborder-color: #f55;\n\tbackground: #fff;\n\twidth: 12px;\n\theight: 12px;\n\tmargin-top: -6px;\n    margin-left: -6px;\n\tpointer-events: none;\n}\n" + [0, 15, 30, 45, 60, 75, 90, 105, 120, 135, 150, 165].map(function (degree) {
  return "\n.direction[data-rotation=\"" + degree + "\"] {\n\t" + getCursorCSS(degree) + "\n}\n";
}).join("\n") + "\n.group {\n    z-index: -1;\n}\n.area {\n    position: absolute;\n}\n.area-pieces {\n    position: absolute;\n    top: 0;\n    left: 0;\n    display: none;\n}\n.area.avoid, .area.pass {\n    pointer-events: none;\n}\n.area.avoid+.area-pieces {\n    display: block;\n}\n.area-piece {\n    position: absolute;\n}\n\n" + (IS_WEBKIT605 ? ":global svg *:before {\n\tcontent:\"\";\n\ttransform-origin: inherit;\n}" : "") + "\n";
var NEARBY_POS = [[0, 1, 2], [1, 0, 3], [2, 0, 3], [3, 1, 2]];
var FLOAT_POINT_NUM = 0.0001;
var TINY_NUM = 0.0000001;
var MIN_SCALE = 0.000000001;
var MAX_NUM = Math.pow(10, 10);
var MIN_NUM = -MAX_NUM;
var DIRECTIONS = ["n", "w", "s", "e", "nw", "ne", "sw", "se"];
var DIRECTION_INDEXES = {
  n: [0, 1],
  s: [2, 3],
  w: [2, 0],
  e: [1, 3],
  nw: [0],
  ne: [1],
  sw: [2],
  se: [3]
};
var DIRECTION_ROTATIONS = {
  n: 0,
  s: 180,
  w: 270,
  e: 90,
  nw: 315,
  ne: 45,
  sw: 225,
  se: 135
};
var MOVEABLE_METHODS = ["isMoveableElement", "updateRect", "updateTarget", "destroy", "dragStart", "isInside", "hitTest", "setState", "getRect", "request", "isDragging", "getManager"];

function multiply2(pos1, pos2) {
  return [pos1[0] * pos2[0], pos1[1] * pos2[1]];
}
function prefix() {
  var classNames = [];

  for (var _i = 0; _i < arguments.length; _i++) {
    classNames[_i] = arguments[_i];
  }

  return frameworkUtils.prefixNames.apply(void 0, __spreadArrays([PREFIX], classNames));
}
function getTransformMatrix(transform) {
  if (!transform || transform === "none") {
    return [1, 0, 0, 1, 0, 0];
  }

  if (utils.isObject(transform)) {
    return transform;
  }

  var value = utils.splitBracket(transform).value;
  return value.split(/s*,\s*/g).map(function (v) {
    return parseFloat(v);
  });
}
function getAbsoluteMatrix(matrix$1, n, origin) {
  return matrix.multiplies(n, matrix.createOriginMatrix(origin, n), matrix$1, matrix.createOriginMatrix(origin.map(function (a) {
    return -a;
  }), n));
}
function measureSVGSize(el, unit, isHorizontal) {
  if (unit === "%") {
    var viewBox = getSVGViewBox(el.ownerSVGElement);
    return viewBox[isHorizontal ? "width" : "height"] / 100;
  }

  return 1;
}
function getBeforeTransformOrigin(el) {
  var relativeOrigin = getTransformOrigin(getComputedStyle(el, ":before"));
  return relativeOrigin.map(function (o, i) {
    var _a = utils.splitUnit(o),
        value = _a.value,
        unit = _a.unit;

    return value * measureSVGSize(el, unit, i === 0);
  });
}
function getTransformOrigin(style) {
  var transformOrigin = style.transformOrigin;
  return transformOrigin ? transformOrigin.split(" ") : ["0", "0"];
}
function getOffsetInfo(el, lastParent, isParent) {
  var body = document.body;
  var target = !el || isParent ? el : el.parentElement;
  var isEnd = el === lastParent || target === lastParent;
  var position = "relative";

  while (target && target !== body) {
    if (lastParent === target) {
      isEnd = true;
    }

    var style = getComputedStyle(target);
    var transform = style.transform;
    position = style.position;

    if (target.tagName.toLowerCase() === "svg" || position !== "static" || transform && transform !== "none") {
      break;
    }

    target = target.parentElement;
    position = "relative";
  }

  return {
    isStatic: position === "static",
    isEnd: isEnd || !target || target === body,
    offsetParent: target || body
  };
}
function getOffsetPosInfo(el, container, style, isFixed) {
  var _a;

  var tagName = el.tagName.toLowerCase();
  var offsetLeft = el.offsetLeft;
  var offsetTop = el.offsetTop;

  if (isFixed) {
    var containerClientRect = (container || document.documentElement).getBoundingClientRect();
    offsetLeft -= containerClientRect.left;
    offsetTop -= containerClientRect.top;
  } // svg


  var isSVG = utils.isUndefined(offsetLeft);
  var hasOffset = !isSVG;
  var origin;
  var targetOrigin; // inner svg element

  if (!hasOffset && tagName !== "svg") {
    origin = IS_WEBKIT605 ? getBeforeTransformOrigin(el) : getTransformOrigin(style).map(function (pos) {
      return parseFloat(pos);
    });
    targetOrigin = origin.slice();
    hasOffset = true;
    _a = getSVGGraphicsOffset(el, origin), offsetLeft = _a[0], offsetTop = _a[1], origin[0] = _a[2], origin[1] = _a[3];
  } else {
    origin = getTransformOrigin(style).map(function (pos) {
      return parseFloat(pos);
    });
    targetOrigin = origin.slice();
  }

  return {
    tagName: tagName,
    isSVG: isSVG,
    hasOffset: hasOffset,
    offset: [offsetLeft || 0, offsetTop || 0],
    origin: origin,
    targetOrigin: targetOrigin
  };
}
function getBodyOffset(el, isSVG, style) {
  if (style === void 0) {
    style = getComputedStyle(el);
  }

  var bodyStyle = getComputedStyle(document.body);
  var bodyPosition = bodyStyle.position;

  if (!isSVG && (!bodyPosition || bodyPosition === "static")) {
    return [0, 0];
  }

  var marginLeft = parseInt(bodyStyle.marginLeft, 10);
  var marginTop = parseInt(bodyStyle.marginTop, 10);

  if (style.position === "absolute") {
    if (style.top !== "auto" || style.bottom !== "auto") {
      marginTop = 0;
    }

    if (style.left !== "auto" || style.right !== "auto") {
      marginLeft = 0;
    }
  }

  return [marginLeft, marginTop];
}
function convert3DMatrixes(matrixes) {
  matrixes.forEach(function (info) {
    var matrix$1 = info.matrix;

    if (matrix$1) {
      info.matrix = matrix.convertDimension(matrix$1, 3, 4);
    }
  });
}
function getMatrixStackInfo(target, container, checkContainer) {
  var el = target;
  var matrixes = [];
  var isEnd = !checkContainer && target === container;
  var is3d = false;
  var n = 3;
  var transformOrigin;
  var targetTransformOrigin;
  var targetMatrix;
  var offsetContainer = getOffsetInfo(container, container, true).offsetParent; // if (prevMatrix) {
  //     isEnd = target === container;
  //     if (prevMatrix.length > 10) {
  //         is3d = true;
  //         n = 4;
  //     }
  //     container = target.parentElement;
  // }

  while (el && !isEnd) {
    var style = getComputedStyle(el);
    var position = style.position;
    var isFixed = position === "fixed";
    var matrix$1 = matrix.convertCSStoMatrix(getTransformMatrix(style.transform)); // convert 3 to 4

    var length = matrix$1.length;

    if (!is3d && length === 16) {
      is3d = true;
      n = 4;
      convert3DMatrixes(matrixes);

      if (targetMatrix) {
        targetMatrix = matrix.convertDimension(targetMatrix, 3, 4);
      }
    }

    if (is3d && length === 9) {
      matrix$1 = matrix.convertDimension(matrix$1, 3, 4);
    }

    var _a = getOffsetPosInfo(el, container, style, isFixed),
        tagName = _a.tagName,
        hasOffset = _a.hasOffset,
        isSVG = _a.isSVG,
        origin = _a.origin,
        targetOrigin = _a.targetOrigin,
        offsetPos = _a.offset;

    var offsetLeft = offsetPos[0],
        offsetTop = offsetPos[1];

    if (tagName === "svg" && targetMatrix) {
      // scale matrix for svg's SVGElements.
      matrixes.push({
        type: "target",
        target: el,
        matrix: getSVGMatrix(el, n)
      });
      matrixes.push({
        type: "offset",
        target: el,
        matrix: matrix.createIdentityMatrix(n)
      });
    } else if (tagName === "g" && target !== el) {
      offsetLeft = 0;
      offsetTop = 0;
    }

    var _b = getOffsetInfo(el, container),
        offsetParent = _b.offsetParent,
        isOffsetEnd = _b.isEnd,
        isStatic = _b.isStatic;

    if (IS_WEBKIT && hasOffset && !isSVG && isStatic && (position === "relative" || position === "static")) {
      offsetLeft -= offsetParent.offsetLeft;
      offsetTop -= offsetParent.offsetTop;
      isEnd = isEnd || isOffsetEnd;
    }

    var parentClientLeft = 0;
    var parentClientTop = 0;

    if (hasOffset && offsetContainer !== offsetParent) {
      // border
      parentClientLeft = offsetParent.clientLeft;
      parentClientTop = offsetParent.clientTop;
    }

    if (hasOffset && offsetParent === document.body) {
      var margin = getBodyOffset(el, false, style);
      offsetLeft += margin[0];
      offsetTop += margin[1];
    }

    matrixes.push({
      type: "target",
      target: el,
      matrix: getAbsoluteMatrix(matrix$1, n, origin)
    });

    if (hasOffset) {
      matrixes.push({
        type: "offset",
        target: el,
        matrix: matrix.createOriginMatrix([offsetLeft - el.scrollLeft + parentClientLeft, offsetTop - el.scrollTop + parentClientTop], n)
      });
    } else {
      // svg
      matrixes.push({
        type: "offset",
        target: el,
        origin: origin
      });
    }

    if (!targetMatrix) {
      targetMatrix = matrix$1;
    }

    if (!transformOrigin) {
      transformOrigin = origin;
    }

    if (!targetTransformOrigin) {
      targetTransformOrigin = targetOrigin;
    }

    if (isEnd || isFixed) {
      break;
    } else {
      el = offsetParent;
      isEnd = isOffsetEnd;
    }
  }

  if (!targetMatrix) {
    targetMatrix = matrix.createIdentityMatrix(n);
  }

  if (!transformOrigin) {
    transformOrigin = [0, 0];
  }

  if (!targetTransformOrigin) {
    targetTransformOrigin = [0, 0];
  }

  return {
    offsetContainer: offsetContainer,
    matrixes: matrixes,
    targetMatrix: targetMatrix,
    transformOrigin: transformOrigin,
    targetOrigin: targetTransformOrigin,
    is3d: is3d
  };
}
function calculateElementInfo(target, container, rootContainer, isAbsolute3d) {
  var _a;

  if (rootContainer === void 0) {
    rootContainer = container;
  } // const prevMatrix = state ? state.beforeMatrix : undefined;
  // const prevRootMatrix = state ? state.rootMatrix : undefined;
  // const prevN = state ? (state.is3d ? 4 : 3) : undefined;


  var width = 0;
  var height = 0;
  var rotation = 0;
  var allResult = {};

  if (target) {
    var style = getComputedStyle(target);
    width = target.offsetWidth;
    height = target.offsetHeight;

    if (utils.isUndefined(width)) {
      _a = getSize(target, style, true), width = _a[0], height = _a[1];
    }
  }

  if (target) {
    var result = calculateMatrixStack(target, container, rootContainer, isAbsolute3d);
    var position = calculateMoveablePosition(result.allMatrix, result.transformOrigin, width, height);
    allResult = __assign(__assign({}, result), position);
    var rotationPosition = calculateMoveablePosition(result.allMatrix, [50, 50], 100, 100);
    rotation = getRotationRad([rotationPosition.pos1, rotationPosition.pos2], rotationPosition.direction);
  }

  var n = isAbsolute3d ? 4 : 3;
  return __assign({
    width: width,
    height: height,
    rotation: rotation,
    // rootMatrix: number[];
    // beforeMatrix: number[];
    // offsetMatrix: number[];
    // allMatrix: number[];
    // targetMatrix: number[];
    // targetTransform: string;
    // transformOrigin: number[];
    // targetOrigin: number[];
    // is3d: boolean;
    rootMatrix: matrix.createIdentityMatrix(n),
    beforeMatrix: matrix.createIdentityMatrix(n),
    offsetMatrix: matrix.createIdentityMatrix(n),
    allMatrix: matrix.createIdentityMatrix(n),
    targetMatrix: matrix.createIdentityMatrix(n),
    targetTransform: "",
    transformOrigin: [0, 0],
    targetOrigin: [0, 0],
    is3d: !!isAbsolute3d,
    // left: number;
    // top: number;
    // right: number;
    // bottom: number;
    // origin: number[];
    // pos1: number[];
    // pos2: number[];
    // pos3: number[];
    // pos4: number[];
    // direction: 1 | -1;
    left: 0,
    top: 0,
    right: 0,
    bottom: 0,
    origin: [0, 0],
    pos1: [0, 0],
    pos2: [0, 0],
    pos3: [0, 0],
    pos4: [0, 0],
    direction: 1
  }, allResult);
}
function getElementInfo(target, container, rootContainer) {
  if (rootContainer === void 0) {
    rootContainer = container;
  }

  return calculateElementInfo(target, container, rootContainer, true);
}
function calculateMatrixStack(target, container, rootContainer, isAbsolute3d) {
  if (rootContainer === void 0) {
    rootContainer = container;
  }

  var _a = getMatrixStackInfo(target, container),
      matrixes = _a.matrixes,
      is3d = _a.is3d,
      prevTargetMatrix = _a.targetMatrix,
      transformOrigin = _a.transformOrigin,
      targetOrigin = _a.targetOrigin,
      offsetContainer = _a.offsetContainer; // prevMatrix


  var _b = getMatrixStackInfo(offsetContainer, rootContainer, true),
      rootMatrixes = _b.matrixes,
      isRoot3d = _b.is3d; // prevRootMatrix
  // if (rootContainer === document.body) {
  //     console.log(offsetContainer, rootContainer, rootMatrixes);
  // }


  var isNext3d = isAbsolute3d || isRoot3d || is3d;
  var n = isNext3d ? 4 : 3;
  var isSVGGraphicElement = target.tagName.toLowerCase() !== "svg" && "ownerSVGElement" in target;
  var targetMatrix = prevTargetMatrix; // let allMatrix = prevMatrix ? convertDimension(prevMatrix, prevN!, n) : createIdentityMatrix(n);
  // let rootMatrix = prevRootMatrix ? convertDimension(prevRootMatrix, prevN!, n) : createIdentityMatrix(n);
  // let beforeMatrix = prevMatrix ? convertDimension(prevMatrix, prevN!, n) : createIdentityMatrix(n);

  var allMatrix = matrix.createIdentityMatrix(n);
  var rootMatrix = matrix.createIdentityMatrix(n);
  var beforeMatrix = matrix.createIdentityMatrix(n);
  var offsetMatrix = matrix.createIdentityMatrix(n);
  var length = matrixes.length;
  var originalRootContainer = rootContainer || document.body;
  var endContainer = getOffsetInfo(originalRootContainer, originalRootContainer, true).offsetParent;
  rootMatrixes.reverse();
  matrixes.reverse();

  if (!is3d && isNext3d) {
    targetMatrix = matrix.convertDimension(targetMatrix, 3, 4);
    convert3DMatrixes(matrixes);
  }

  if (!isRoot3d && isNext3d) {
    convert3DMatrixes(rootMatrixes);
  } // rootMatrix = (...) -> container -> offset -> absolute -> offset -> absolute(targetMatrix)
  // beforeMatrix = (... -> container -> offset -> absolute) -> offset -> absolute(targetMatrix)
  // offsetMatrix = (... -> container -> offset -> absolute -> offset) -> absolute(targetMatrix)
  // if (!prevRootMatrix) {


  rootMatrixes.forEach(function (info) {
    rootMatrix = matrix.multiply(rootMatrix, info.matrix, n);
  }); // }

  matrixes.forEach(function (info, i) {
    if (length - 2 === i) {
      // length - 3
      beforeMatrix = allMatrix.slice();
    }

    if (length - 1 === i) {
      // length - 2
      offsetMatrix = allMatrix.slice();
    } // calculate for SVGElement


    if (!info.matrix) {
      var nextInfo = matrixes[i + 1];
      var offset = getSVGOffset(info, nextInfo, endContainer, n, matrix.multiply(rootMatrix, allMatrix, n));
      info.matrix = matrix.createOriginMatrix(offset, n);
    }

    allMatrix = matrix.multiply(allMatrix, info.matrix, n);
  });
  var isMatrix3d = !isSVGGraphicElement && is3d;

  if (!targetMatrix) {
    targetMatrix = matrix.createIdentityMatrix(isMatrix3d ? 4 : 3);
  }

  var targetTransform = makeMatrixCSS(isSVGGraphicElement && targetMatrix.length === 16 ? matrix.convertDimension(targetMatrix, 4, 3) : targetMatrix, isMatrix3d);
  rootMatrix = matrix.ignoreDimension(rootMatrix, n, n);
  return {
    rootMatrix: rootMatrix,
    beforeMatrix: beforeMatrix,
    offsetMatrix: offsetMatrix,
    allMatrix: allMatrix,
    targetMatrix: targetMatrix,
    targetTransform: targetTransform,
    transformOrigin: transformOrigin,
    targetOrigin: targetOrigin,
    is3d: isNext3d
  };
}
function makeMatrixCSS(matrix$1, is3d) {
  if (is3d === void 0) {
    is3d = matrix$1.length > 9;
  }

  return (is3d ? "matrix3d" : "matrix") + "(" + matrix.convertMatrixtoCSS(matrix$1, !is3d).join(",") + ")";
}
function getSVGViewBox(el) {
  var clientWidth = el.clientWidth;
  var clientHeight = el.clientHeight;

  if (!el) {
    return {
      x: 0,
      y: 0,
      width: 0,
      height: 0,
      clientWidth: clientWidth,
      clientHeight: clientHeight
    };
  }

  var viewBox = el.viewBox;
  var baseVal = viewBox && viewBox.baseVal || {
    x: 0,
    y: 0,
    width: 0,
    height: 0
  };
  return {
    x: baseVal.x,
    y: baseVal.y,
    width: baseVal.width || clientWidth,
    height: baseVal.height || clientHeight,
    clientWidth: clientWidth,
    clientHeight: clientHeight
  };
}
function getSVGMatrix(el, n) {
  var _a = getSVGViewBox(el),
      viewBoxWidth = _a.width,
      viewBoxHeight = _a.height,
      clientWidth = _a.clientWidth,
      clientHeight = _a.clientHeight;

  var scaleX = clientWidth / viewBoxWidth;
  var scaleY = clientHeight / viewBoxHeight;
  var preserveAspectRatio = el.preserveAspectRatio.baseVal; // https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio

  var align = preserveAspectRatio.align; // 1 : meet 2: slice

  var meetOrSlice = preserveAspectRatio.meetOrSlice;
  var svgOrigin = [0, 0];
  var scale = [scaleX, scaleY];
  var translate = [0, 0];

  if (align !== 1) {
    var xAlign = (align - 2) % 3;
    var yAlign = Math.floor((align - 2) / 3);
    svgOrigin[0] = viewBoxWidth * xAlign / 2;
    svgOrigin[1] = viewBoxHeight * yAlign / 2;
    var scaleDimension = meetOrSlice === 2 ? Math.max(scaleY, scaleX) : Math.min(scaleX, scaleY);
    scale[0] = scaleDimension;
    scale[1] = scaleDimension;
    translate[0] = (clientWidth - viewBoxWidth) / 2 * xAlign;
    translate[1] = (clientHeight - viewBoxHeight) / 2 * yAlign;
  }

  var scaleMatrix = matrix.createScaleMatrix(scale, n);
  scaleMatrix[n * (n - 1)] = translate[0], scaleMatrix[n * (n - 1) + 1] = translate[1];
  return getAbsoluteMatrix(scaleMatrix, n, svgOrigin);
}
function getSVGGraphicsOffset(el, origin) {
  if (!el.getBBox) {
    return [0, 0];
  }

  var bbox = el.getBBox();
  var viewBox = getSVGViewBox(el.ownerSVGElement);
  var left = bbox.x - viewBox.x;
  var top = bbox.y - viewBox.y;
  return [left, top, origin[0] - left, origin[1] - top];
}
function calculatePosition(matrix$1, pos, n) {
  return matrix.calculate(matrix$1, matrix.convertPositionMatrix(pos, n), n);
}
function calculatePoses(matrix, width, height, n) {
  return [[0, 0], [width, 0], [0, height], [width, height]].map(function (pos) {
    return calculatePosition(matrix, pos, n);
  });
}
function getRect(poses) {
  var posesX = poses.map(function (pos) {
    return pos[0];
  });
  var posesY = poses.map(function (pos) {
    return pos[1];
  });
  var left = Math.min.apply(Math, posesX);
  var top = Math.min.apply(Math, posesY);
  var right = Math.max.apply(Math, posesX);
  var bottom = Math.max.apply(Math, posesY);
  var rectWidth = right - left;
  var rectHeight = bottom - top;
  return {
    left: left,
    top: top,
    right: right,
    bottom: bottom,
    width: rectWidth,
    height: rectHeight
  };
}
function calculateRect(matrix, width, height, n) {
  var poses = calculatePoses(matrix, width, height, n);
  return getRect(poses);
}
function getSVGOffset(offsetInfo, targetInfo, container, n, beforeMatrix) {
  var _a;

  var target = offsetInfo.target;
  var origin = offsetInfo.origin;
  var targetMatrix = targetInfo.matrix;

  var _b = getSize(target, undefined, true),
      width = _b[0],
      height = _b[1];

  var containerClientRect = container.getBoundingClientRect();
  var margin = [0, 0];

  if (container === document.body) {
    margin = getBodyOffset(target, true);
  }

  var rect = target.getBoundingClientRect();
  var rectLeft = rect.left - containerClientRect.left + container.scrollLeft - (container.clientLeft || 0) + margin[0];
  var rectTop = rect.top - containerClientRect.top + container.scrollTop - (container.clientTop || 0) + margin[1];
  var rectWidth = rect.width;
  var rectHeight = rect.height;
  var mat = matrix.multiplies(n, beforeMatrix, targetMatrix);

  var _c = calculateRect(mat, width, height, n),
      prevLeft = _c.left,
      prevTop = _c.top,
      prevWidth = _c.width,
      prevHeight = _c.height;

  var posOrigin = calculatePosition(mat, origin, n);
  var prevOrigin = matrix.minus(posOrigin, [prevLeft, prevTop]);
  var rectOrigin = [rectLeft + prevOrigin[0] * rectWidth / prevWidth, rectTop + prevOrigin[1] * rectHeight / prevHeight];
  var offset = [0, 0];
  var count = 0;

  while (++count < 10) {
    var inverseBeforeMatrix = matrix.invert(beforeMatrix, n);
    _a = matrix.minus(calculatePosition(inverseBeforeMatrix, rectOrigin, n), calculatePosition(inverseBeforeMatrix, posOrigin, n)), offset[0] = _a[0], offset[1] = _a[1];
    var mat2 = matrix.multiplies(n, beforeMatrix, matrix.createOriginMatrix(offset, n), targetMatrix);

    var _d = calculateRect(mat2, width, height, n),
        nextLeft = _d.left,
        nextTop = _d.top;

    var distLeft = nextLeft - rectLeft;
    var distTop = nextTop - rectTop;

    if (Math.abs(distLeft) < 2 && Math.abs(distTop) < 2) {
      break;
    }

    rectOrigin[0] -= distLeft;
    rectOrigin[1] -= distTop;
  }

  return offset.map(function (p) {
    return Math.round(p);
  });
}
function calculateMoveablePosition(matrix, origin, width, height) {
  var is3d = matrix.length === 16;
  var n = is3d ? 4 : 3;
  var poses = calculatePoses(matrix, width, height, n);
  var _a = poses[0],
      x1 = _a[0],
      y1 = _a[1],
      _b = poses[1],
      x2 = _b[0],
      y2 = _b[1],
      _c = poses[2],
      x3 = _c[0],
      y3 = _c[1],
      _d = poses[3],
      x4 = _d[0],
      y4 = _d[1];

  var _e = calculatePosition(matrix, origin, n),
      originX = _e[0],
      originY = _e[1];

  var left = Math.min(x1, x2, x3, x4);
  var top = Math.min(y1, y2, y3, y4);
  var right = Math.max(x1, x2, x3, x4);
  var bottom = Math.max(y1, y2, y3, y4);
  x1 = x1 - left || 0;
  x2 = x2 - left || 0;
  x3 = x3 - left || 0;
  x4 = x4 - left || 0;
  y1 = y1 - top || 0;
  y2 = y2 - top || 0;
  y3 = y3 - top || 0;
  y4 = y4 - top || 0;
  originX = originX - left || 0;
  originY = originY - top || 0;
  var direction = utils.getShapeDirection(poses);
  return {
    left: left,
    top: top,
    right: right,
    bottom: bottom,
    origin: [originX, originY],
    pos1: [x1, y1],
    pos2: [x2, y2],
    pos3: [x3, y3],
    pos4: [x4, y4],
    direction: direction
  };
}
function getDistSize(vec) {
  return Math.sqrt(vec[0] * vec[0] + vec[1] * vec[1]);
}
function getDiagonalSize(pos1, pos2) {
  return getDistSize([pos2[0] - pos1[0], pos2[1] - pos1[1]]);
}
function getLineStyle(pos1, pos2, zoom, rad) {
  if (zoom === void 0) {
    zoom = 1;
  }

  if (rad === void 0) {
    rad = utils.getRad(pos1, pos2);
  }

  var width = getDiagonalSize(pos1, pos2);
  return {
    transform: "translateY(-50%) translate(" + pos1[0] + "px, " + pos1[1] + "px) rotate(" + rad + "rad) scaleY(" + zoom + ")",
    width: width + "px"
  };
}
function getControlTransform(rotation, zoom) {
  var poses = [];

  for (var _i = 2; _i < arguments.length; _i++) {
    poses[_i - 2] = arguments[_i];
  }

  var length = poses.length;
  var x = poses.reduce(function (prev, pos) {
    return prev + pos[0];
  }, 0) / length;
  var y = poses.reduce(function (prev, pos) {
    return prev + pos[1];
  }, 0) / length;
  return {
    transform: "translateZ(0px) translate(" + x + "px, " + y + "px) rotate(" + rotation + "rad) scale(" + zoom + ")"
  };
}
function getCSSSize(target) {
  var style = getComputedStyle(target);
  return [parseFloat(style.width), parseFloat(style.height)];
}
function getSize(target, style, isOffset, isBoxSizing) {
  if (style === void 0) {
    style = getComputedStyle(target);
  }

  if (isBoxSizing === void 0) {
    isBoxSizing = isOffset || style.boxSizing === "border-box";
  }

  var width = target.offsetWidth;
  var height = target.offsetHeight;
  var hasOffset = !utils.isUndefined(width);

  if ((isOffset || isBoxSizing) && hasOffset) {
    return [width, height];
  }

  if (!hasOffset && target.tagName.toLowerCase() !== "svg") {
    var bbox = target.getBBox();
    return [bbox.width, bbox.height];
  }

  width = target.clientWidth;
  height = target.clientHeight;

  if (isOffset || isBoxSizing) {
    var borderLeft = parseFloat(style.borderLeftWidth) || 0;
    var borderRight = parseFloat(style.borderRightWidth) || 0;
    var borderTop = parseFloat(style.borderTopWidth) || 0;
    var borderBottom = parseFloat(style.borderBottomWidth) || 0;
    return [width + borderLeft + borderRight, height + borderTop + borderBottom];
  } else {
    var paddingLeft = parseFloat(style.paddingLeft) || 0;
    var paddingRight = parseFloat(style.paddingRight) || 0;
    var paddingTop = parseFloat(style.paddingTop) || 0;
    var paddingBottom = parseFloat(style.paddingBottom) || 0;
    return [width - paddingLeft - paddingRight, height - paddingTop - paddingBottom];
  }
}
function getRotationRad(poses, direction) {
  return utils.getRad(direction > 0 ? poses[0] : poses[1], direction > 0 ? poses[1] : poses[0]);
}
function getTargetInfo(moveableElement, target, container, parentContainer, rootContainer) {
  var beforeDirection = 1;
  var beforeOrigin = [0, 0];
  var targetClientRect = resetClientRect();
  var containerClientRect = resetClientRect();
  var moveableClientRect = resetClientRect();
  var result = calculateElementInfo(target, container, rootContainer, false);

  if (target) {
    var n = result.is3d ? 4 : 3;
    var beforePosition = calculateMoveablePosition(result.offsetMatrix, matrix.plus(result.transformOrigin, matrix.getOrigin(result.targetMatrix, n)), result.width, result.height);
    beforeDirection = beforePosition.direction;
    beforeOrigin = matrix.plus(beforePosition.origin, [beforePosition.left - result.left, beforePosition.top - result.top]);
    targetClientRect = getClientRect(target);
    containerClientRect = getClientRect(getOffsetInfo(parentContainer, parentContainer, true).offsetParent || document.body, true);

    if (moveableElement) {
      moveableClientRect = getClientRect(moveableElement);
    }
  }

  return __assign({
    targetClientRect: targetClientRect,
    containerClientRect: containerClientRect,
    moveableClientRect: moveableClientRect,
    beforeDirection: beforeDirection,
    beforeOrigin: beforeOrigin,
    originalBeforeOrigin: beforeOrigin,
    target: target
  }, result);
}
function resetClientRect() {
  return {
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    width: 0,
    height: 0,
    clientLeft: 0,
    clientTop: 0,
    clientWidth: 0,
    clientHeight: 0,
    scrollWidth: 0,
    scrollHeight: 0
  };
}
function getClientRect(el, isExtends) {
  var left = 0;
  var top = 0;
  var width = 0;
  var height = 0;

  if (el === document.body || el === document.documentElement) {
    width = window.innerWidth;
    height = window.innerHeight;
    left = -(document.documentElement.scrollLeft || document.body.scrollLeft);
    top = -(document.documentElement.scrollTop || document.body.scrollTop);
  } else {
    var clientRect = el.getBoundingClientRect();
    left = clientRect.left;
    top = clientRect.top;
    width = clientRect.width;
    height = clientRect.height;
  }

  var rect = {
    left: left,
    right: left + width,
    top: top,
    bottom: top + height,
    width: width,
    height: height
  };

  if (isExtends) {
    rect.clientLeft = el.clientLeft;
    rect.clientTop = el.clientTop;
    rect.clientWidth = el.clientWidth;
    rect.clientHeight = el.clientHeight;
    rect.scrollWidth = el.scrollWidth;
    rect.scrollHeight = el.scrollHeight;
    rect.overflow = getComputedStyle(el).overflow !== "visible";
  }

  return rect;
}
function getDirection(target) {
  if (!target) {
    return;
  }

  var direciton = target.getAttribute("data-direction");

  if (!direciton) {
    return;
  }

  var dir = [0, 0];
  direciton.indexOf("w") > -1 && (dir[0] = -1);
  direciton.indexOf("e") > -1 && (dir[0] = 1);
  direciton.indexOf("n") > -1 && (dir[1] = -1);
  direciton.indexOf("s") > -1 && (dir[1] = 1);
  return dir;
}
function getAbsolutePoses(poses, dist) {
  return [matrix.plus(dist, poses[0]), matrix.plus(dist, poses[1]), matrix.plus(dist, poses[2]), matrix.plus(dist, poses[3])];
}
function getAbsolutePosesByState(_a) {
  var left = _a.left,
      top = _a.top,
      pos1 = _a.pos1,
      pos2 = _a.pos2,
      pos3 = _a.pos3,
      pos4 = _a.pos4;
  return getAbsolutePoses([pos1, pos2, pos3, pos4], [left, top]);
}
function roundSign(num) {
  return Math.round(num % 1 === -0.5 ? num - 1 : num);
}
function unset(self, name) {
  if (self[name]) {
    self[name].unset();
    self[name] = null;
  }
}
function fillParams(moveable, e, params) {
  var datas = e.datas;

  if (!datas.datas) {
    datas.datas = {};
  }

  var nextParams = __assign(__assign({}, params), {
    target: moveable.state.target,
    clientX: e.clientX,
    clientY: e.clientY,
    inputEvent: e.inputEvent,
    currentTarget: moveable,
    moveable: moveable,
    datas: datas.datas
  });

  if (datas.isStartEvent) {
    datas.lastEvent = nextParams;
  } else {
    datas.isStartEvent = true;
  }

  return nextParams;
}
function fillEndParams(moveable, e, params) {
  var datas = e.datas;
  var isDrag = "isDrag" in params ? params.isDrag : e.isDrag;

  if (!datas.datas) {
    datas.datas = {};
  }

  return __assign(__assign({
    isDrag: isDrag
  }, params), {
    moveable: moveable,
    target: moveable.state.target,
    clientX: e.clientX,
    clientY: e.clientY,
    inputEvent: e.inputEvent,
    currentTarget: moveable,
    lastEvent: datas.lastEvent,
    isDouble: e.isDouble,
    datas: datas.datas
  });
}
function triggerEvent(moveable, name, params, isManager) {
  return moveable.triggerEvent(name, params, isManager);
}
function getComputedStyle(el, pseudoElt) {
  return window.getComputedStyle(el, pseudoElt);
}
function filterAbles(ables, methods, triggerAblesSimultaneously) {
  var enabledAbles = {};
  var ableGroups = {};
  return ables.filter(function (able) {
    var name = able.name;

    if (enabledAbles[name] || !methods.some(function (method) {
      return able[method];
    })) {
      return false;
    }

    if (!triggerAblesSimultaneously && able.ableGroup) {
      if (ableGroups[able.ableGroup]) {
        return false;
      }

      ableGroups[able.ableGroup] = true;
    }

    enabledAbles[name] = true;
    return true;
  });
}
function equals(a1, a2) {
  return a1 === a2 || a1 == null && a2 == null;
}
function selectValue() {
  var values = [];

  for (var _i = 0; _i < arguments.length; _i++) {
    values[_i] = arguments[_i];
  }

  var length = values.length - 1;

  for (var i = 0; i < length; ++i) {
    var value = values[i];

    if (!utils.isUndefined(value)) {
      return value;
    }
  }

  return values[length];
}
function groupBy(arr, func) {
  var groups = [];
  var groupKeys = [];
  arr.forEach(function (el, index) {
    var groupKey = func(el, index, arr);
    var keyIndex = groupKeys.indexOf(groupKey);
    var group = groups[keyIndex] || [];

    if (keyIndex === -1) {
      groupKeys.push(groupKey);
      groups.push(group);
    }

    group.push(el);
  });
  return groups;
}
function groupByMap(arr, func) {
  var groups = [];
  var groupKeys = {};
  arr.forEach(function (el, index) {
    var groupKey = func(el, index, arr);
    var group = groupKeys[groupKey];

    if (!group) {
      group = [];
      groupKeys[groupKey] = group;
      groups.push(group);
    }

    group.push(el);
  });
  return groups;
}
function flat(arr) {
  return arr.reduce(function (prev, cur) {
    return prev.concat(cur);
  }, []);
}
function maxOffset() {
  var args = [];

  for (var _i = 0; _i < arguments.length; _i++) {
    args[_i] = arguments[_i];
  }

  args.sort(function (a, b) {
    return Math.abs(b) - Math.abs(a);
  });
  return args[0];
}
function calculateInversePosition(matrix$1, pos, n) {
  return matrix.calculate(matrix.invert(matrix$1, n), matrix.convertPositionMatrix(pos, n), n);
}
function convertDragDist(state, e) {
  var _a;

  var is3d = state.is3d,
      rootMatrix = state.rootMatrix;
  var n = is3d ? 4 : 3;
  _a = calculateInversePosition(rootMatrix, [e.distX, e.distY], n), e.distX = _a[0], e.distY = _a[1];
  return e;
}
function calculatePadding(matrix$1, pos, transformOrigin, origin, n) {
  return matrix.minus(calculatePosition(matrix$1, matrix.plus(transformOrigin, pos), n), origin);
}
function convertCSSSize(value, size, isRelative) {
  return isRelative ? value / size * 100 + "%" : value + "px";
}
function moveControlPos(controlPoses, index, dist, isRect) {
  var _a = controlPoses[index],
      direction = _a.direction,
      sub = _a.sub;
  var dists = controlPoses.map(function () {
    return [0, 0];
  });
  var directions = direction ? direction.split("") : [];

  if (isRect && index < 8) {
    var verticalDirection_1 = directions.filter(function (dir) {
      return dir === "w" || dir === "e";
    })[0];
    var horizontalDirection_1 = directions.filter(function (dir) {
      return dir === "n" || dir === "s";
    })[0];
    dists[index] = dist;
    controlPoses.forEach(function (controlPose, i) {
      var controlDir = controlPose.direction;

      if (!controlDir) {
        return;
      }

      if (controlDir.indexOf(verticalDirection_1) > -1) {
        dists[i][0] = dist[0];
      }

      if (controlDir.indexOf(horizontalDirection_1) > -1) {
        dists[i][1] = dist[1];
      }
    });

    if (verticalDirection_1) {
      dists[1][0] = dist[0] / 2;
      dists[5][0] = dist[0] / 2;
    }

    if (horizontalDirection_1) {
      dists[3][1] = dist[1] / 2;
      dists[7][1] = dist[1] / 2;
    }
  } else if (direction && !sub) {
    directions.forEach(function (dir) {
      var isVertical = dir === "n" || dir === "s";
      controlPoses.forEach(function (controlPose, i) {
        var dirDir = controlPose.direction,
            dirHorizontal = controlPose.horizontal,
            dirVertical = controlPose.vertical;

        if (!dirDir || dirDir.indexOf(dir) === -1) {
          return;
        }

        dists[i] = [isVertical || !dirHorizontal ? 0 : dist[0], !isVertical || !dirVertical ? 0 : dist[1]];
      });
    });
  } else {
    dists[index] = dist;
  }

  return dists;
}
function getTinyDist(v) {
  return Math.abs(v) <= TINY_NUM ? 0 : v;
}
function directionCondition(moveable, e) {
  if (e.isRequest) {
    if (e.requestAble === "resizable" || e.requestAble === "scalable") {
      return e.parentDirection;
    } else {
      return false;
    }
  }

  return utils.hasClass(e.inputEvent.target, prefix("direction"));
}
function invertObject(obj) {
  var nextObj = {};

  for (var name in obj) {
    nextObj[obj[name]] = name;
  }

  return nextObj;
}
function getTransform(transforms, index) {
  var beforeFunctionTexts = transforms.slice(0, index < 0 ? undefined : index);
  var beforeFunctionTexts2 = transforms.slice(0, index < 0 ? undefined : index + 1);
  var targetFunctionText = transforms[index] || "";
  var afterFunctionTexts = index < 0 ? [] : transforms.slice(index);
  var afterFunctionTexts2 = index < 0 ? [] : transforms.slice(index + 1);
  var beforeFunctions = cssToMat.parse(beforeFunctionTexts);
  var beforeFunctions2 = cssToMat.parse(beforeFunctionTexts2);
  var targetFunctions = cssToMat.parse([targetFunctionText]);
  var afterFunctions = cssToMat.parse(afterFunctionTexts);
  var afterFunctions2 = cssToMat.parse(afterFunctionTexts2);
  var beforeFunctionMatrix = cssToMat.toMat(beforeFunctions);
  var beforeFunctionMatrix2 = cssToMat.toMat(beforeFunctions2);
  var afterFunctionMatrix = cssToMat.toMat(afterFunctions);
  var afterFunctionMatrix2 = cssToMat.toMat(afterFunctions2);
  var allFunctionMatrix = matrix.multiply(beforeFunctionMatrix, afterFunctionMatrix, 4);
  return {
    transforms: transforms,
    beforeFunctionMatrix: beforeFunctionMatrix,
    beforeFunctionMatrix2: beforeFunctionMatrix2,
    targetFunctionMatrix: cssToMat.toMat(targetFunctions),
    afterFunctionMatrix: afterFunctionMatrix,
    afterFunctionMatrix2: afterFunctionMatrix2,
    allFunctionMatrix: allFunctionMatrix,
    beforeFunctions: beforeFunctions,
    beforeFunctions2: beforeFunctions2,
    targetFunction: targetFunctions[0],
    afterFunctions: afterFunctions,
    afterFunctions2: afterFunctions2,
    beforeFunctionTexts: beforeFunctionTexts,
    beforeFunctionTexts2: beforeFunctionTexts2,
    targetFunctionText: targetFunctionText,
    afterFunctionTexts: afterFunctionTexts,
    afterFunctionTexts2: afterFunctionTexts2
  };
}
function isArrayFormat(arr) {
  if (!arr || !utils.isObject(arr)) {
    return false;
  }

  return utils.isArray(arr) || "length" in arr;
}
function getRefTarget(target, isSelector) {
  if (!target) {
    return null;
  }

  if (utils.isString(target)) {
    if (isSelector) {
      return document.querySelector(target);
    }

    return target;
  }

  if (utils.isFunction(target)) {
    return target();
  }

  if ("current" in target) {
    return target.current;
  }

  return target;
}
function getRefTargets(targets, isSelector) {
  if (!targets) {
    return [];
  }

  var userTargets = isArrayFormat(targets) ? [].slice.call(targets) : [targets];
  return userTargets.reduce(function (prev, target) {
    if (utils.isString(target) && isSelector) {
      return __spreadArrays(prev, [].slice.call(document.querySelectorAll(target)));
    }

    prev.push(getRefTarget(target, isSelector));
    return prev;
  }, []);
}
function getElementTargets(targets, selectorMap) {
  var elementTargets = [];
  targets.forEach(function (target) {
    if (!target) {
      return;
    }

    if (utils.isString(target)) {
      if (selectorMap[target]) {
        elementTargets.push.apply(elementTargets, selectorMap[target]);
      }

      return;
    }

    elementTargets.push(target);
  });
  return elementTargets;
}
function getAbsoluteRotation(pos1, pos2, direction) {
  var deg = utils.getRad(pos1, pos2) / Math.PI * 180;
  deg = direction >= 0 ? deg : 180 - deg;
  deg = deg >= 0 ? deg : 360 + deg;
  return deg;
}
function getDragDistByState(state, dist) {
  var rootMatrix = state.rootMatrix,
      is3d = state.is3d;
  var n = is3d ? 4 : 3;
  var inverseMatrix = matrix.invert(rootMatrix, n);

  if (!is3d) {
    inverseMatrix = matrix.convertDimension(inverseMatrix, 3, 4);
  }

  inverseMatrix[12] = 0;
  inverseMatrix[13] = 0;
  inverseMatrix[14] = 0;
  return cssToMat.calculateMatrixDist(inverseMatrix, dist);
}

/**
 * @namespace Moveable.Pinchable
 * @description Whether or not target can be pinched with draggable, resizable, scalable, rotatable (default: false)
 */

var Pinchable = makeAble("pinchable", {
  events: {
    onPinchStart: "pinchStart",
    onPinch: "pinch",
    onPinchEnd: "pinchEnd",
    onPinchGroupStart: "pinchGroupStart",
    onPinchGroup: "pinchGroup",
    onPinchGroupEnd: "pinchGroupEnd"
  },
  dragStart: function () {
    return true;
  },
  pinchStart: function (moveable, e) {
    var datas = e.datas,
        targets = e.targets,
        angle = e.angle,
        originalDatas = e.originalDatas;
    var _a = moveable.props,
        pinchable = _a.pinchable,
        ables = _a.ables;

    if (!pinchable) {
      return false;
    }

    var eventName = "onPinch" + (targets ? "Group" : "") + "Start";
    var controlEventName = "drag" + (targets ? "Group" : "") + "ControlStart";
    var pinchAbles = (pinchable === true ? moveable.controlAbles : ables.filter(function (able) {
      return pinchable.indexOf(able.name) > -1;
    })).filter(function (able) {
      return able.canPinch && able[controlEventName];
    });
    var params = fillParams(moveable, e, {});

    if (targets) {
      params.targets = targets;
    }

    var result = triggerEvent(moveable, eventName, params);
    datas.isPinch = result !== false;
    datas.ables = pinchAbles;
    var isPinch = datas.isPinch;

    if (!isPinch) {
      return false;
    }

    pinchAbles.forEach(function (able) {
      originalDatas[able.name] = originalDatas[able.name] || {};

      if (!able[controlEventName]) {
        return;
      }

      var ableEvent = __assign(__assign({}, e), {
        datas: originalDatas[able.name],
        parentRotate: angle,
        isPinch: true
      });

      able[controlEventName](moveable, ableEvent);
    });
    moveable.state.snapRenderInfo = {
      request: e.isRequest,
      direction: [0, 0]
    };
    return isPinch;
  },
  pinch: function (moveable, e) {
    var datas = e.datas,
        pinchScale = e.scale,
        distance = e.distance,
        originalDatas = e.originalDatas,
        inputEvent = e.inputEvent,
        targets = e.targets,
        angle = e.angle;

    if (!datas.isPinch) {
      return;
    }

    var parentDistance = distance * (1 - 1 / pinchScale);
    var params = fillParams(moveable, e, {});

    if (targets) {
      params.targets = targets;
    }

    var eventName = "onPinch" + (targets ? "Group" : "");
    triggerEvent(moveable, eventName, params);
    var ables = datas.ables;
    var controlEventName = "drag" + (targets ? "Group" : "") + "Control";
    ables.forEach(function (able) {
      if (!able[controlEventName]) {
        return;
      }

      able[controlEventName](moveable, __assign(__assign({}, e), {
        datas: originalDatas[able.name],
        inputEvent: inputEvent,
        parentDistance: parentDistance,
        parentRotate: angle,
        isPinch: true
      }));
    });
    return params;
  },
  pinchEnd: function (moveable, e) {
    var datas = e.datas,
        isPinch = e.isPinch,
        inputEvent = e.inputEvent,
        targets = e.targets,
        originalDatas = e.originalDatas;

    if (!datas.isPinch) {
      return;
    }

    var eventName = "onPinch" + (targets ? "Group" : "") + "End";
    var params = fillEndParams(moveable, e, {
      isDrag: isPinch
    });

    if (targets) {
      params.targets = targets;
    }

    triggerEvent(moveable, eventName, params);
    var ables = datas.ables;
    var controlEventName = "drag" + (targets ? "Group" : "") + "ControlEnd";
    ables.forEach(function (able) {
      if (!able[controlEventName]) {
        return;
      }

      able[controlEventName](moveable, __assign(__assign({}, e), {
        isDrag: isPinch,
        datas: originalDatas[able.name],
        inputEvent: inputEvent,
        isPinch: true
      }));
    });
    return isPinch;
  },
  pinchGroupStart: function (moveable, e) {
    return this.pinchStart(moveable, __assign(__assign({}, e), {
      targets: moveable.props.targets
    }));
  },
  pinchGroup: function (moveable, e) {
    return this.pinch(moveable, __assign(__assign({}, e), {
      targets: moveable.props.targets
    }));
  },
  pinchGroupEnd: function (moveable, e) {
    return this.pinchEnd(moveable, __assign(__assign({}, e), {
      targets: moveable.props.targets
    }));
  }
});
/**
 * Whether or not target can be pinched with draggable, resizable, scalable, rotatable (default: false)
 * @name Moveable.Pinchable#pinchable
 * @example
 * import Moveable from "moveable";
 *
 * const moveable = new Moveable(document.body);
 *
 * moveable.pinchable = true;
 */

/**
 * When the pinch starts, the pinchStart event is called with part of scaleStart, rotateStart, resizeStart
 * @memberof Moveable.Pinchable
 * @event pinchStart
 * @param {Moveable.Pinchable.OnPinchStart} -