react-compat-moveable/dist/moveable.cjs.js

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

/*
Copyright (c) 2019 Daybrush
name: react-compat-moveable
license: MIT
author: Daybrush
repository: https://github.com/daybrush/moveable/blob/master/packages/react-compat-moveable
version: 0.33.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-simple-compat');
var Gesto = require('gesto');
var styled = require('react-compat-css-styled');
var EventEmitter = require('@scena/event-emitter');
var listDiffer = require('@egjs/list-differ');

/*
Copyright (c) 2019 Daybrush
name: react-moveable
license: MIT
author: Daybrush
repository: https://github.com/daybrush/moveable/blob/master/packages/react-moveable
version: 0.48.0
*/
/******************************************************************************
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 (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p];
  };

  return extendStatics(d, b);
};

function __extends(d, b) {
  if (typeof b !== "function" && b !== null) throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
  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 __spreadArray(to, from, pack) {
  if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
    if (ar || !(i in from)) {
      if (!ar) ar = Array.prototype.slice.call(from, 0, i);
      ar[i] = from[i];
    }
  }
  return to.concat(ar || Array.prototype.slice.call(from));
}

function makeAble(name, able) {
  var _a;

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

var DIRECTIONS4 = ["n", "w", "s", "e"];
var DIRECTIONS = ["n", "w", "s", "e", "nw", "ne", "sw", "se"];

function getSVGCursor(scale, degree) {
  return "data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(32 * scale, "px\" height=\"").concat(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(").concat(degree, "deg);transform-origin: 16px 16px\"></path></svg>");
}

function getCursorCSS(degree) {
  var x1 = getSVGCursor(1, degree); // const 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:".concat(defaultCursor, ";cursor: url('").concat(x1, "') 16 16, ").concat(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 browserName = agent.browser.name;
var browserVersion = parseInt(agent.browser.version, 10);
var IS_CHROME = browserName === "chrome";
var IS_CHROMIUM = agent.browser.chromium;
var chromiumVersion = parseInt(agent.browser.chromiumVersion, 10) || 0;
var IS_CHROMIUM109 = IS_CHROME && browserVersion >= 109 || IS_CHROMIUM && chromiumVersion >= 109;
var IS_FIREFOX = browserName === "firefox";
var IS_SAFARI_ABOVE15 = parseInt(agent.browser.webkitVersion, 10) >= 612 || browserVersion >= 15;
var PREFIX = "moveable-";
var directionCSS = DIRECTIONS.map(function (dir) {
  var top = "";
  var left = "";
  var originX = "center";
  var originY = "center";

  if (dir.indexOf("n") > -1) {
    top = "top: -20px;";
    originY = "bottom";
  }

  if (dir.indexOf("s") > -1) {
    top = "top: 0px;";
    originY = "top";
  }

  if (dir.indexOf("w") > -1) {
    left = "left: -20px;";
    originX = "right";
  }

  if (dir.indexOf("e") > -1) {
    left = "left: 0px;";
    originX = "left";
  }

  return ".around-control[data-direction*=\"".concat(dir, "\"] {\n        ").concat(left).concat(top, "\n        transform-origin: ").concat(originX, " ").concat(originY, ";\n    }");
}).join("\n");
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    outline: 1px solid transparent;\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.around-control {\n    position: absolute;\n    will-change: transform;\n    width: calc(var(--moveable-control-padding, 20) * 1px);\n    height: calc(var(--moveable-control-padding, 20) * 1px);\n    left: -10px;\n    top: -10px;\n    box-sizing: border-box;\n    background: transparent;\n    z-index: 8;\n    cursor: alias;\n    transform-origin: center center;\n}\n".concat(directionCSS, "\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.edge {\n    z-index: 1;\n    background: transparent;\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").concat([0, 15, 30, 45, 60, 75, 90, 105, 120, 135, 150, 165].map(function (degree) {
  return "\n.direction[data-rotation=\"".concat(degree, "\"], :global .view-control-rotation").concat(degree, " {\n\t").concat(getCursorCSS(degree), "\n}\n");
}).join("\n"), "\n\n.line.direction:before {\n    content: \"\";\n    position: absolute;\n    width: 100%;\n    height: calc(var(--moveable-line-padding, 0) * 1px);\n    bottom: 0;\n    left: 0;\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").concat(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 DIRECTION_REGION_TO_DIRECTION = {
  n: [0, -1],
  e: [1, 0],
  s: [0, 1],
  w: [-1, 0],
  nw: [-1, -1],
  ne: [1, -1],
  sw: [-1, 1],
  se: [1, 1]
};
var DIRECTION_INDEXES = {
  n: [0, 1],
  e: [1, 3],
  s: [3, 2],
  w: [2, 0],
  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", "forceUpdate", "waitToChangeTarget", "updateSelectors", "getTargets", "stopDrag"];

function setCustomDrag(e, state, delta, isPinch, isConvert, ableName) {
  var _a, _b;

  if (ableName === void 0) {
    ableName = "draggable";
  }

  var result = (_b = (_a = state.gestos[ableName]) === null || _a === void 0 ? void 0 : _a.move(delta, e.inputEvent)) !== null && _b !== void 0 ? _b : {};
  var datas = result.originalDatas || result.datas;
  var ableDatas = datas[ableName] || (datas[ableName] = {});
  return __assign(__assign({}, isConvert ? convertDragDist(state, result) : result), {
    isPinch: !!isPinch,
    parentEvent: true,
    datas: ableDatas,
    originalDatas: e.originalDatas
  });
}

var CustomGesto = /*#__PURE__*/function () {
  function CustomGesto(ableName) {
    var _a;

    if (ableName === void 0) {
      ableName = "draggable";
    }

    this.ableName = ableName;
    this.prevX = 0;
    this.prevY = 0;
    this.startX = 0;
    this.startY = 0;
    this.isDrag = false;
    this.isFlag = false;
    this.datas = {
      draggable: {}
    };
    this.datas = (_a = {}, _a[ableName] = {}, _a);
  }

  var __proto = CustomGesto.prototype;

  __proto.dragStart = function (client, e) {
    this.isDrag = false;
    this.isFlag = false;
    var originalDatas = e.originalDatas;
    this.datas = originalDatas;

    if (!originalDatas[this.ableName]) {
      originalDatas[this.ableName] = {};
    }

    return __assign(__assign({}, this.move(client, e.inputEvent)), {
      type: "dragstart"
    });
  };

  __proto.drag = function (client, inputEvent) {
    return this.move([client[0] - this.prevX, client[1] - this.prevY], inputEvent);
  };

  __proto.move = function (delta, inputEvent) {
    var clientX;
    var clientY;
    var isFirstDrag = false;

    if (!this.isFlag) {
      this.prevX = delta[0];
      this.prevY = delta[1];
      this.startX = delta[0];
      this.startY = delta[1];
      clientX = delta[0];
      clientY = delta[1];
      this.isFlag = true;
    } else {
      var isPrevDrag = this.isDrag;
      clientX = this.prevX + delta[0];
      clientY = this.prevY + delta[1];

      if (delta[0] || delta[1]) {
        this.isDrag = true;
      }

      if (!isPrevDrag && this.isDrag) {
        isFirstDrag = true;
      }
    }

    this.prevX = clientX;
    this.prevY = clientY;
    return {
      type: "drag",
      clientX: clientX,
      clientY: clientY,
      inputEvent: inputEvent,
      isFirstDrag: isFirstDrag,
      isDrag: this.isDrag,
      distX: clientX - this.startX,
      distY: clientY - this.startY,
      deltaX: delta[0],
      deltaY: delta[1],
      datas: this.datas[this.ableName],
      originalDatas: this.datas,
      parentEvent: true,
      parentGesto: this
    };
  };

  return CustomGesto;
}();

function calculatePointerDist(moveable, e) {
  var clientX = e.clientX,
      clientY = e.clientY,
      datas = e.datas;
  var _a = moveable.state,
      moveableClientRect = _a.moveableClientRect,
      rootMatrix = _a.rootMatrix,
      is3d = _a.is3d,
      pos1 = _a.pos1;
  var left = moveableClientRect.left,
      top = moveableClientRect.top;
  var n = is3d ? 4 : 3;

  var _b = matrix.minus(calculateInversePosition(rootMatrix, [clientX - left, clientY - top], n), pos1),
      posX = _b[0],
      posY = _b[1];

  var _c = getDragDist({
    datas: datas,
    distX: posX,
    distY: posY
  }),
      distX = _c[0],
      distY = _c[1];

  return [distX, distY];
}

function setDragStart(moveable, _a) {
  var datas = _a.datas;
  var _b = moveable.state,
      allMatrix = _b.allMatrix,
      beforeMatrix = _b.beforeMatrix,
      is3d = _b.is3d,
      left = _b.left,
      top = _b.top,
      origin = _b.origin,
      offsetMatrix = _b.offsetMatrix,
      targetMatrix = _b.targetMatrix,
      transformOrigin = _b.transformOrigin;
  var n = is3d ? 4 : 3;
  datas.is3d = is3d;
  datas.matrix = allMatrix;
  datas.targetMatrix = targetMatrix;
  datas.beforeMatrix = beforeMatrix;
  datas.offsetMatrix = offsetMatrix;
  datas.transformOrigin = transformOrigin;
  datas.inverseMatrix = matrix.invert(allMatrix, n);
  datas.inverseBeforeMatrix = matrix.invert(beforeMatrix, n);
  datas.absoluteOrigin = matrix.convertPositionMatrix(matrix.plus([left, top], origin), n);
  datas.startDragBeforeDist = matrix.calculate(datas.inverseBeforeMatrix, datas.absoluteOrigin, n);
  datas.startDragDist = matrix.calculate(datas.inverseMatrix, datas.absoluteOrigin, n);
}

function getTransformDirection(e) {
  return calculateMoveablePosition(e.datas.beforeTransform, [50, 50], 100, 100).direction;
}

function resolveTransformEvent(event, functionName) {
  var datas = event.datas,
      originalDatas = event.originalDatas.beforeRenderable;
  var index = datas.transformIndex;
  var nextTransforms = originalDatas.nextTransforms;
  var length = nextTransforms.length;
  var nextTransformAppendedIndexes = originalDatas.nextTransformAppendedIndexes;
  var nextIndex = 0;

  if (index === -1) {
    // translate => rotate => scale
    if (functionName === "translate") {
      nextIndex = 0;
    } else if (functionName === "rotate") {
      nextIndex = utils.findIndex(nextTransforms, function (text) {
        return text.match(/scale\(/g);
      });
    }

    if (nextIndex === -1) {
      nextIndex = nextTransforms.length;
    }

    datas.transformIndex = nextIndex;
  } else if (utils.find(nextTransformAppendedIndexes, function (info) {
    return info.index === index && info.functionName === functionName;
  })) {
    nextIndex = index;
  } else {
    nextIndex = index + nextTransformAppendedIndexes.filter(function (info) {
      return info.index < index;
    }).length;
  }

  var result = convertTransformInfo(nextTransforms, nextIndex);
  var targetFunction = result.targetFunction;
  var matFunctionName = functionName === "rotate" ? "rotateZ" : functionName;
  datas.beforeFunctionTexts = result.beforeFunctionTexts;
  datas.afterFunctionTexts = result.afterFunctionTexts;
  datas.beforeTransform = result.beforeFunctionMatrix;
  datas.beforeTransform2 = result.beforeFunctionMatrix2;
  datas.targetTansform = result.targetFunctionMatrix;
  datas.afterTransform = result.afterFunctionMatrix;
  datas.afterTransform2 = result.afterFunctionMatrix2;
  datas.targetAllTransform = result.allFunctionMatrix;

  if (targetFunction.functionName === matFunctionName) {
    datas.afterFunctionTexts.splice(0, 1);
    datas.isAppendTransform = false;
  } else if (length > nextIndex) {
    datas.isAppendTransform = true;
    originalDatas.nextTransformAppendedIndexes = __spreadArray(__spreadArray([], nextTransformAppendedIndexes, true), [{
      functionName: functionName,
      index: nextIndex,
      isAppend: true
    }], false);
  }
}

function convertTransformFormat(datas, value, dist) {
  return "".concat(datas.beforeFunctionTexts.join(" "), " ").concat(datas.isAppendTransform ? dist : value, " ").concat(datas.afterFunctionTexts.join(" "));
}

function getTransformDist(_a) {
  var datas = _a.datas,
      distX = _a.distX,
      distY = _a.distY;

  var _b = getBeforeDragDist({
    datas: datas,
    distX: distX,
    distY: distY
  }),
      bx = _b[0],
      by = _b[1]; // B * [tx, ty] * A = [bx, by] * targetMatrix;
  // [tx, ty] = B-1 * [bx, by] * targetMatrix * A-1 * [0, 0];


  var res = getTransfromMatrix(datas, matrix.fromTranslation([bx, by], 4));
  return matrix.calculate(res, matrix.convertPositionMatrix([0, 0, 0], 4), 4);
}

function getTransfromMatrix(datas, targetMatrix, isAfter) {
  var beforeTransform = datas.beforeTransform,
      afterTransform = datas.afterTransform,
      beforeTransform2 = datas.beforeTransform2,
      afterTransform2 = datas.afterTransform2,
      targetAllTransform = datas.targetAllTransform; // B * afterTargetMatrix * A = (targetMatrix * targetAllTransform)
  // afterTargetMatrix = B-1 * targetMatrix * targetAllTransform * A-1
  // nextTargetMatrix = (targetMatrix * targetAllTransform)

  var nextTargetMatrix = isAfter ? matrix.multiply(targetAllTransform, targetMatrix, 4) : matrix.multiply(targetMatrix, targetAllTransform, 4); // res1 = B-1 * nextTargetMatrix

  var res1 = matrix.multiply(matrix.invert(isAfter ? beforeTransform2 : beforeTransform, 4), nextTargetMatrix, 4); // res3 = res2 * A-1

  var afterTargetMatrix = matrix.multiply(res1, matrix.invert(isAfter ? afterTransform2 : afterTransform, 4), 4);
  return afterTargetMatrix;
}

function getBeforeDragDist(_a) {
  var datas = _a.datas,
      distX = _a.distX,
      distY = _a.distY; // TT = BT

  var inverseBeforeMatrix = datas.inverseBeforeMatrix,
      is3d = datas.is3d,
      startDragBeforeDist = datas.startDragBeforeDist,
      absoluteOrigin = datas.absoluteOrigin;
  var n = is3d ? 4 : 3; // ABS_ORIGIN * [distX, distY] = BM * (ORIGIN + [tx, ty])
  // BM -1 * ABS_ORIGIN * [distX, distY] - ORIGIN = [tx, ty]

  return matrix.minus(matrix.calculate(inverseBeforeMatrix, matrix.plus(absoluteOrigin, [distX, distY]), n), startDragBeforeDist);
}

function getDragDist(_a, isBefore) {
  var datas = _a.datas,
      distX = _a.distX,
      distY = _a.distY;
  var inverseBeforeMatrix = datas.inverseBeforeMatrix,
      inverseMatrix = datas.inverseMatrix,
      is3d = datas.is3d,
      startDragBeforeDist = datas.startDragBeforeDist,
      startDragDist = datas.startDragDist,
      absoluteOrigin = datas.absoluteOrigin;
  var n = is3d ? 4 : 3;
  return matrix.minus(matrix.calculate(isBefore ? inverseBeforeMatrix : inverseMatrix, matrix.plus(absoluteOrigin, [distX, distY]), n), isBefore ? startDragBeforeDist : startDragDist);
}

function getInverseDragDist(_a, isBefore) {
  var datas = _a.datas,
      distX = _a.distX,
      distY = _a.distY;
  var beforeMatrix = datas.beforeMatrix,
      matrix$1 = datas.matrix,
      is3d = datas.is3d,
      startDragBeforeDist = datas.startDragBeforeDist,
      startDragDist = datas.startDragDist,
      absoluteOrigin = datas.absoluteOrigin;
  var n = is3d ? 4 : 3;
  return matrix.minus(matrix.calculate(isBefore ? beforeMatrix : matrix$1, matrix.plus(isBefore ? startDragBeforeDist : startDragDist, [distX, distY]), n), absoluteOrigin);
}

function calculateTransformOrigin(transformOrigin, width, height, prevWidth, prevHeight, prevOrigin) {
  if (prevWidth === void 0) {
    prevWidth = width;
  }

  if (prevHeight === void 0) {
    prevHeight = height;
  }

  if (prevOrigin === void 0) {
    prevOrigin = [0, 0];
  }

  if (!transformOrigin) {
    return prevOrigin;
  }

  return transformOrigin.map(function (pos, i) {
    var _a = utils.splitUnit(pos),
        value = _a.value,
        unit = _a.unit;

    var prevSize = i ? prevHeight : prevWidth;
    var size = i ? height : width;

    if (pos === "%" || isNaN(value)) {
      // no value but %
      var measureRatio = prevSize ? prevOrigin[i] / prevSize : 0;
      return size * measureRatio;
    } else if (unit !== "%") {
      return value;
    }

    return size * value / 100;
  });
}

function getPosIndexesByDirection(direction) {
  var indexes = [];

  if (direction[1] >= 0) {
    if (direction[0] >= 0) {
      indexes.push(3);
    }

    if (direction[0] <= 0) {
      indexes.push(2);
    }
  }

  if (direction[1] <= 0) {
    if (direction[0] >= 0) {
      indexes.push(1);
    }

    if (direction[0] <= 0) {
      indexes.push(0);
    }
  }

  return indexes;
}

function getPosesByDirection(poses, direction) {
  /*
  [-1, -1](pos1)       [0, -1](pos1,pos2)       [1, -1](pos2)
  [-1, 0](pos1, pos3)                           [1, 0](pos2, pos4)
  [-1, 1](pos3)        [0, 1](pos3, pos4)       [1, 1](pos4)
  */
  return getPosIndexesByDirection(direction).map(function (index) {
    return poses[index];
  });
}

function getPosByDirection(poses, direction) {
  var xRatio = (direction[0] + 1) / 2;
  var yRatio = (direction[1] + 1) / 2;
  var top = [utils.dot(poses[0][0], poses[1][0], xRatio, 1 - xRatio), utils.dot(poses[0][1], poses[1][1], xRatio, 1 - xRatio)];
  var bottom = [utils.dot(poses[2][0], poses[3][0], xRatio, 1 - xRatio), utils.dot(poses[2][1], poses[3][1], xRatio, 1 - xRatio)];
  return [utils.dot(top[0], bottom[0], yRatio, 1 - yRatio), utils.dot(top[1], bottom[1], yRatio, 1 - yRatio)];
}

function getDist(startPos, matrix, width, height, n, fixedDirection) {
  var poses = calculatePoses(matrix, width, height, n);
  var fixedPos = getPosByDirection(poses, fixedDirection);
  var distX = startPos[0] - fixedPos[0];
  var distY = startPos[1] - fixedPos[1];
  return [distX, distY];
}

function getNextMatrix(offsetMatrix, targetMatrix, origin, n) {
  return matrix.multiply(offsetMatrix, getAbsoluteMatrix(targetMatrix, n, origin), n);
}

function getNextTransformMatrix(state, datas, transform) {
  var transformOrigin = state.transformOrigin,
      offsetMatrix = state.offsetMatrix,
      is3d = state.is3d;
  var beforeTransform = datas.beforeTransform,
      afterTransform = datas.afterTransform;
  var n = is3d ? 4 : 3;
  var targetTransform = cssToMat.parseMat([transform]);
  return getNextMatrix(offsetMatrix, matrix.convertDimension(matrix.multiply(matrix.multiply(beforeTransform, targetTransform, 4), afterTransform, 4), 4, n), transformOrigin, n);
}

function scaleMatrix(state, scale) {
  var transformOrigin = state.transformOrigin,
      offsetMatrix = state.offsetMatrix,
      is3d = state.is3d,
      targetMatrix = state.targetMatrix;
  var n = is3d ? 4 : 3;
  return getNextMatrix(offsetMatrix, matrix.multiply(targetMatrix, matrix.createScaleMatrix(scale, n), n), transformOrigin, n);
}

function fillTransformStartEvent(e) {
  var originalDatas = getBeforeRenderableDatas(e);
  return {
    setTransform: function (transform, index) {
      if (index === void 0) {
        index = -1;
      }

      originalDatas.startTransforms = utils.isArray(transform) ? transform : utils.splitSpace(transform);
      setTransformIndex(e, index);
    },
    setTransformIndex: function (index) {
      setTransformIndex(e, index);
    }
  };
}

function setDefaultTransformIndex(e, property) {
  var originalDatas = getBeforeRenderableDatas(e);
  var startTransforms = originalDatas.startTransforms;
  setTransformIndex(e, utils.findIndex(startTransforms, function (func) {
    return func.indexOf("".concat(property, "(")) === 0;
  }));
}

function setTransformIndex(e, index) {
  var originalDatas = getBeforeRenderableDatas(e);
  var datas = e.datas;
  datas.transformIndex = index;

  if (index === -1) {
    return;
  }

  var transform = originalDatas.startTransforms[index];

  if (!transform) {
    return;
  }

  var info = cssToMat.parse([transform]);
  datas.startValue = info[0].functionValue;
}

function fillOriginalTransform(e, transform) {
  var originalDatas = getBeforeRenderableDatas(e);
  originalDatas.nextTransforms = utils.splitSpace(transform); // originalDatas.nextTargetMatrix = parseMat(transform);
}

function getBeforeRenderableDatas(e) {
  return e.originalDatas.beforeRenderable;
}

function getNextTransforms(e) {
  var originalDatas = e.originalDatas.beforeRenderable;
  return originalDatas.nextTransforms;
}

function getNextTransformText(e) {
  return getNextTransforms(e).join(" ");
}

function getNextStyle(e) {
  return getBeforeRenderableDatas(e).nextStyle;
}

function fillTransformEvent(moveable, nextTransform, delta, isPinch, e) {
  fillOriginalTransform(e, nextTransform);
  var drag = Draggable.drag(moveable, setCustomDrag(e, moveable.state, delta, isPinch, false));
  var afterTransform = drag ? drag.transform : nextTransform;
  return __assign(__assign({
    transform: nextTransform,
    drag: drag
  }, fillCSSObject({
    transform: afterTransform
  }, e)), {
    afterTransform: afterTransform
  });
}

function getTranslateDist(moveable, transform, fixedDirection, fixedPosition, datas) {
  var state = moveable.state;
  var left = state.left,
      top = state.top;
  var groupable = moveable.props.groupable;
  var nextMatrix = getNextTransformMatrix(moveable.state, datas, transform);
  var groupLeft = groupable ? left : 0;
  var groupTop = groupable ? top : 0;
  var nextFixedPosition = getDirectionOffset(moveable, fixedDirection, nextMatrix);
  var dist = matrix.minus(fixedPosition, nextFixedPosition);
  return matrix.minus(dist, [groupLeft, groupTop]);
}

function getScaleDist(moveable, scaleDist, fixedDirection, fixedPosition, datas) {
  var dist = getTranslateDist(moveable, "scale(".concat(scaleDist.join(", "), ")"), fixedDirection, fixedPosition, datas);
  return dist;
}

function getDirectionByPos(pos, width, height) {
  return [-1 + pos[0] / (width / 2), -1 + pos[1] / (height / 2)];
}

function getDirectionOffset(moveable, direction, nextMatrix) {
  if (nextMatrix === void 0) {
    nextMatrix = moveable.state.allMatrix;
  }

  var _a = moveable.state,
      width = _a.width,
      height = _a.height,
      is3d = _a.is3d;
  var n = is3d ? 4 : 3;
  var nextFixedOffset = [width / 2 * (1 + direction[0]), height / 2 * (1 + direction[1])];
  return calculatePosition(nextMatrix, nextFixedOffset, n);
}

function getRotateDist(moveable, rotateDist, datas) {
  var fixedDirection = datas.fixedDirection;
  var fixedPosition = datas.fixedPosition;
  return getTranslateDist(moveable, "rotate(".concat(rotateDist, "deg)"), fixedDirection, fixedPosition, datas);
}

function getResizeDist(moveable, width, height, fixedPosition, transformOrigin, datas) {
  var groupable = moveable.props.groupable;
  var state = moveable.state;
  var prevOrigin = state.transformOrigin,
      offsetMatrix = state.offsetMatrix,
      is3d = state.is3d,
      prevWidth = state.width,
      prevHeight = state.height,
      left = state.left,
      top = state.top;
  var fixedDirection = datas.fixedDirection;
  var targetMatrix = datas.nextTargetMatrix || state.targetMatrix;
  var n = is3d ? 4 : 3;
  var nextOrigin = calculateTransformOrigin(transformOrigin, width, height, prevWidth, prevHeight, prevOrigin);
  var groupLeft = groupable ? left : 0;
  var groupTop = groupable ? top : 0;
  var nextMatrix = getNextMatrix(offsetMatrix, targetMatrix, nextOrigin, n);
  var dist = getDist(fixedPosition, nextMatrix, width, height, n, fixedDirection);
  return matrix.minus(dist, [groupLeft, groupTop]);
}

function getAbsolutePosition(moveable, direction) {
  return getPosByDirection(getAbsolutePosesByState(moveable.state), direction);
}

function getGestoData(moveable, ableName) {
  var targetGesto = moveable.targetGesto;
  var controlGesto = moveable.controlGesto;
  var data;

  if (targetGesto === null || targetGesto === void 0 ? void 0 : targetGesto.isFlag()) {
    data = targetGesto.getEventData()[ableName];
  }

  if (!data && (controlGesto === null || controlGesto === void 0 ? void 0 : controlGesto.isFlag())) {
    data = controlGesto.getEventData()[ableName];
  }

  return data || {};
}

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, __spreadArray([PREFIX], classNames, false));
}

function defaultSync(fn) {
  fn();
}

function getTransformMatrix(transform) {
  if (!transform || transform === "none") {
    return [1, 0, 0, 1, 0, 0];
  }

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

  return cssToMat.parseMat(transform);
}

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$1(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 getElementTransform(target, computedStyle) {
  if (computedStyle === void 0) {
    computedStyle = getComputedStyle$1(target);
  }

  var computedTransform = computedStyle.transform;

  if (computedTransform && computedTransform !== "none") {
    return computedStyle.transform;
  }

  if ("transform" in target) {
    var list = target.transform;
    var baseVal = list.baseVal;

    if (!baseVal) {
      return "";
    }

    var length = baseVal.length;

    if (!length) {
      return "";
    }

    var matrixes = [];

    var _loop_1 = function (i) {
      var matrix = baseVal[i].matrix;
      matrixes.push("matrix(".concat(["a", "b", "c", "d", "e", "f"].map(function (chr) {
        return matrix[chr];
      }).join(", "), ")"));
    };

    for (var i = 0; i < length; ++i) {
      _loop_1(i);
    }

    return matrixes.join(" ");
  }

  return "";
}

function getOffsetInfo(el, lastParent, isParent, checkZoom, targetStyle) {
  var _a, _b, _c;

  var doc = el && el.ownerDocument ? el.ownerDocument : document;
  var documentElement = doc.documentElement || doc.body;
  var hasSlot = false;
  var target;
  var parentSlotElement;

  if (!el || isParent) {
    target = el;
  } else {
    var assignedSlotParentElement = (_a = el === null || el === void 0 ? void 0 : el.assignedSlot) === null || _a === void 0 ? void 0 : _a.parentElement;
    var parentElement = el.parentElement;

    if (assignedSlotParentElement) {
      hasSlot = true;
      parentSlotElement = parentElement;
      target = assignedSlotParentElement;
    } else {
      target = parentElement;
    }
  }

  var isCustomElement = false;
  var isEnd = el === lastParent || target === lastParent;
  var position = "relative";
  var offsetZoom = 1;
  var targetZoom = parseFloat((_b = targetStyle) === null || _b === void 0 ? void 0 : _b.zoom) || 1;
  var targetPosition = targetStyle === null || targetStyle === void 0 ? void 0 : targetStyle.position;

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

    var style = getComputedStyle$1(target);
    var tagName = target.tagName.toLowerCase();
    var transform = getElementTransform(target, style);
    var willChange = style.willChange;
    var zoom = parseFloat(style.zoom) || 1;
    position = style.position;

    if (checkZoom && zoom !== 1) {
      offsetZoom = zoom;
      break;
    }

    if ( // offsetParent is the parentElement if the target's zoom is not 1 and not absolute.
    !isParent && checkZoom && targetZoom !== 1 && targetPosition && targetPosition !== "absolute" || tagName === "svg" || position !== "static" || transform && transform !== "none" || willChange === "transform") {
      break;
    }

    var slotParentNode = (_c = el === null || el === void 0 ? void 0 : el.assignedSlot) === null || _c === void 0 ? void 0 : _c.parentNode;
    var targetParentNode = target.parentNode;

    if (slotParentNode) {
      hasSlot = true;
      parentSlotElement = targetParentNode;
    }

    var parentNode = targetParentNode;

    if (parentNode && parentNode.nodeType === 11) {
      // Shadow Root
      target = parentNode.host;
      isCustomElement = true;
      position = getComputedStyle$1(target).position;
      break;
    }

    target = parentNode;
    position = "relative";
  }

  return {
    offsetZoom: offsetZoom,
    hasSlot: hasSlot,
    parentSlotElement: parentSlotElement,
    isCustomElement: isCustomElement,
    isStatic: position === "static",
    isEnd: isEnd || !target || target === documentElement,
    offsetParent: target || documentElement
  };
}

function getOffsetPosInfo(el, target, style) {
  var _a;

  var tagName = el.tagName.toLowerCase();
  var offsetLeft = el.offsetLeft;
  var offsetTop = el.offsetTop; // 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, el === target && target.tagName.toLowerCase() === "g"), 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$1(el);
  }

  var bodyStyle = getComputedStyle$1(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 getPositionFixedInfo(el) {
  var fixedContainer = el.parentElement;
  var hasTransform = false;

  while (fixedContainer) {
    var transform = getComputedStyle$1(fixedContainer).transform;

    if (transform && transform !== "none") {
      hasTransform = true;
      break;
    }

    if (fixedContainer === document.body) {
      break;
    }

    fixedContainer = fixedContainer.parentElement;
  }

  return {
    fixedContainer: fixedContainer || document.body,
    hasTransform: hasTransform
  };
}

function makeMatrixCSS(matrix$1, is3d) {
  if (is3d === void 0) {
    is3d = matrix$1.length > 9;
  }

  return "".concat(is3d ? "matrix3d" : "matrix", "(").concat(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, isGTarget) {
  if (!el.getBBox || !isGTarget && el.tagName.toLowerCase() === "g") {
    return [0, 0, 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),
      width = _b.offsetWidth,
      height = _b.offsetHeight;

  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 calculateMoveableClientPositions(rootMatrix, poses, rootClientRect) {
  var is3d = rootMatrix.length === 16;
  var n = is3d ? 4 : 3;
  var rootPoses = poses.map(function (pos) {
    return calculatePosition(rootMatrix, pos, n);
  });
  var left = rootClientRect.left,
      top = rootClientRect.top;
  return rootPoses.map(function (pos) {
    return [pos[0] + left, pos[1] + top];
  });
}

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(calculatePoses(matrix, 100, 100, n));
  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(".concat(pos1[0], "px, ").concat(pos1[1], "px) rotate(").concat(rad, "rad) scaleY(").concat(zoom, ")"),
    width: "".concat(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(".concat(x, "px, ").concat(y, "px) rotate(").concat(rotation, "rad) scale(").concat(zoom, ")")
  };
}

function getProps(props, ableName) {
  var self = props[ableName];

  if (utils.isObject(self)) {
    return __assign(__assign({}, props), self);
  }

  return props;
}

function getSize(target, style) {
  if (style === void 0) {
    style = target ? getComputedStyle$1(target) : null;
  }

  var hasOffset = target && !utils.isUndefined(target.offsetWidth);
  var offsetWidth = 0;
  var offsetHeight = 0;
  var clientWidth = 0;
  var clientHeight = 0;
  var cssWidth = 0;
  var cssHeight = 0;
  var contentWidth = 0;
  var contentHeight = 0;
  var minWidth = 0;
  var minHeight = 0;
  var minOffsetWidth = 0;
  var minOffsetHeight = 0;
  var maxWidth = Infinity;
  var maxHeight = Infinity;
  var maxOffsetWidth = Infinity;
  var maxOffsetHeight = Infinity;
  var inlineCSSWidth = 0;
  var inlineCSSHeight = 0;
  var svg = false;

  if (target) {
    if (!hasOffset && target.tagName.toLowerCase() !== "svg") {
      var bbox = target.getBBox();
      svg = true;
      offsetWidth = bbox.width;
      offsetHeight = bbox.height;
      cssWidth = offsetWidth;
      cssHeight = offsetHeight;
      contentWidth = offsetWidth;
      contentHeight = offsetHeight;
      clientWidth = offsetWidth;
      clientHeight = offsetHeight;
    } else {
      var targetStyle = target.style;
      var boxSizing = style.boxSizing === "border-box";
      var borderLeft = parseFloat(style.borderLeftWidth) || 0;
      var borderRight = parseFloat(style.borderRightWidth) || 0;
      var borderTop = parseFloat(style.borderTopWidth) || 0;
      var borderBottom = parseFloat(style.borderBottomWidth) || 0;
      var paddingLeft = parseFloat(style.paddingLeft) || 0;
      var paddingRight = parseFloat(style.paddingRight) || 0;
      var paddingTop = parseFloat(style.paddingTop) || 0;
      var paddingBottom = parseFloat(style.paddingBottom) || 0;
      var horizontalPadding = paddingLeft + paddingRight;
      var verticalPadding = paddingTop + paddingBottom;
      var horizontalBorder = borderLeft + borderRight;
      var verticalBorder = borderTop + borderBottom;
      var horizontalOffset = horizontalPadding + horizontalBorder;
      var verticalOffset = verticalPadding + verticalBorder;
      var position = style.position;
      var containerWidth = 0;
      var containerHeight = 0; // SVGSVGElement, HTMLElement

      if ("clientLeft" in target) {
        var parentElement = null;

        if (position === "absolute") {
          var offsetInfo = getOffsetInfo(target, document.body);
          parentElement = offsetInfo.offsetParent;
        } else {
          parentElement = target.parentElement;
        }

        if (parentElement) {
          var parentStyle = getComputedStyle$1(parentElement);
          containerWidth = parseFloat(parentStyle.width);
          containerHeight = parseFloat(parentStyle.height);
        }
      }

      minWidth = Math.max(horizontalPadding, utils.convertUnitSize(style.minWidth, containerWidth) || 0);
      minHeight = Math.max(verticalPadding, utils.convertUnitSize(style.minHeight, containerHeight) || 0);
      maxWidth = utils.convertUnitSize(style.maxWidth, containerWidth);
      maxHeight = utils.convertUnitSize(style.maxHeight, containerHeight);

      if (isNaN(maxWidth)) {
        maxWidth = Infinity;
      }

      if (isNaN(maxHeight)) {
        maxHeight = Infinity;
      }

      inlineCSSWidth = utils.convertUnitSize(targetStyle.width, 0) || 0;
      inlineCSSHeight = utils.convertUnitSize(targetStyle.height, 0) || 0;
      cssWidth = parseFloat(style.width) || 0;
      cssHeight = parseFloat(style.height) || 0;
      contentWidth = Math.abs(cssWidth - inlineCSSWidth) < 1 ? utils.between(minWidth, inlineCSSWidth || cssWidth, maxWidth) : cssWidth;
      contentHeight = Math.abs(cssHeight - inlineCSSHeight) < 1 ? utils.between(minHeight, inlineCSSHeight || cssHeight, maxHeight) : cssHeight;
      offsetWidth = contentWidth;
      offsetHeight = contentHeight;
      clientWidth = contentWidth;
      clientHeight = contentHeight;

      if (boxSizing) {
        maxOffsetWidth = maxWidth;
        maxOffsetHeight = maxHeight;
        minOffsetWidth = minWidth;
        minOffsetHeight = minHeight;
        contentWidth = offsetWidth - horizontalOffset;
        contentHeight = offsetHeight - verticalOffset;
      } else {
        maxOffsetWidth = maxWidth + horizontalOffset;
        maxOffsetHeight = maxHeight + verticalOffset;
        minOffsetWidth = minWidth + horizontalOffset;
        minOffsetHeight = minHeight + verticalOffset;
        offsetWidth = contentWidth + horizontalOffset;
        offsetHeight = contentHeight + verticalOffset;
      }

      clientWidth = contentWidth + horizontalPadding;
      clientHeight = contentHeight + verticalPadding;
    }
  }

  return {
    svg: svg,
    offsetWidth: offsetWi