main.2944bdd3b3d97fde4b0f.bundle.js.map

{"version":3,"file":"main.2944bdd3b3d97fde4b0f.bundle.js","sources":["webpack:///./src/index.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Resizer, Direction } from './resizer';\nimport memoize from 'fast-memoize';\n\nconst DEFAULT_SIZE = {\n  width: 'auto',\n  height: 'auto',\n};\n\nexport type ResizeDirection = Direction;\n\nexport interface Enable {\n  top?: boolean;\n  right?: boolean;\n  bottom?: boolean;\n  left?: boolean;\n  topRight?: boolean;\n  bottomRight?: boolean;\n  bottomLeft?: boolean;\n  topLeft?: boolean;\n}\n\nexport interface HandleStyles {\n  top?: React.CSSProperties;\n  right?: React.CSSProperties;\n  bottom?: React.CSSProperties;\n  left?: React.CSSProperties;\n  topRight?: React.CSSProperties;\n  bottomRight?: React.CSSProperties;\n  bottomLeft?: React.CSSProperties;\n  topLeft?: React.CSSProperties;\n}\n\nexport interface HandleClassName {\n  top?: string;\n  right?: string;\n  bottom?: string;\n  left?: string;\n  topRight?: string;\n  bottomRight?: string;\n  bottomLeft?: string;\n  topLeft?: string;\n}\n\nexport interface Size {\n  width: string | number;\n  height: string | number;\n}\n\ninterface NumberSize {\n  width: number;\n  height: number;\n}\n\nexport interface HandleComponent {\n  top?: React.ReactElement<any>;\n  right?: React.ReactElement<any>;\n  bottom?: React.ReactElement<any>;\n  left?: React.ReactElement<any>;\n  topRight?: React.ReactElement<any>;\n  bottomRight?: React.ReactElement<any>;\n  bottomLeft?: React.ReactElement<any>;\n  topLeft?: React.ReactElement<any>;\n}\n\nexport type ResizeCallback = (\n  event: MouseEvent | TouchEvent,\n  direction: Direction,\n  elementRef: HTMLDivElement,\n  delta: NumberSize,\n) => void;\n\nexport type ResizeStartCallback = (\n  e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n  dir: Direction,\n  elementRef: HTMLDivElement,\n) => void;\n\nexport interface ResizableProps {\n  style?: React.CSSProperties;\n  className?: string;\n  grid?: [number, number];\n  snap?: {\n    x?: number[];\n    y?: number[];\n  };\n  snapGap: number;\n  bounds?: 'parent' | 'window' | HTMLElement;\n  size?: Size;\n  minWidth?: string | number;\n  minHeight?: string | number;\n  maxWidth?: string | number;\n  maxHeight?: string | number;\n  lockAspectRatio?: boolean | number;\n  lockAspectRatioExtraWidth: number;\n  lockAspectRatioExtraHeight: number;\n  enable?: Enable;\n  handleStyles?: HandleStyles;\n  handleClasses?: HandleClassName;\n  handleWrapperStyle?: React.CSSProperties;\n  handleWrapperClass?: string;\n  handleComponent?: HandleComponent;\n  children?: React.ReactNode;\n  onResizeStart?: ResizeStartCallback;\n  onResize?: ResizeCallback;\n  onResizeStop?: ResizeCallback;\n  defaultSize?: Size;\n  scale?: number;\n  resizeRatio?: number;\n}\n\ninterface State {\n  isResizing: boolean;\n  resizeCursor: string;\n  direction: Direction;\n  original: {\n    x: number;\n    y: number;\n    width: number;\n    height: number;\n  };\n  width: number | string;\n  height: number | string;\n}\n\nconst clamp = memoize((n: number, min: number, max: number): number => Math.max(Math.min(n, max), min));\nconst snap = memoize((n: number, size: number): number => Math.round(n / size) * size);\nconst hasDirection = memoize(\n  (dir: 'top' | 'right' | 'bottom' | 'left', target: string): boolean => new RegExp(dir, 'i').test(target),\n);\n\nconst findClosestSnap = memoize(\n  (n: number, snapArray: number[], snapGap: number = 0): number => {\n    const closestGapIndex = snapArray.reduce(\n      (prev, curr, index) => (Math.abs(curr - n) < Math.abs(snapArray[prev] - n) ? index : prev),\n      0,\n    );\n    const gap = Math.abs(snapArray[closestGapIndex] - n);\n\n    return snapGap === 0 || gap < snapGap ? snapArray[closestGapIndex] : n;\n  },\n);\n\nconst endsWith = memoize(\n  (str: string, searchStr: string): boolean =>\n    str.substr(str.length - searchStr.length, searchStr.length) === searchStr,\n);\n\nconst getStringSize = memoize(\n  (n: number | string): string => {\n    n = n.toString();\n    if (n === 'auto') {\n      return n;\n    }\n    if (endsWith(n, 'px')) {\n      return n;\n    }\n    if (endsWith(n, '%')) {\n      return n;\n    }\n    if (endsWith(n, 'vh')) {\n      return n;\n    }\n    if (endsWith(n, 'vw')) {\n      return n;\n    }\n    if (endsWith(n, 'vmax')) {\n      return n;\n    }\n    if (endsWith(n, 'vmin')) {\n      return n;\n    }\n    return `${n}px`;\n  },\n);\n\nconst calculateNewMax = memoize(\n  (\n    parentSize: { width: number; height: number },\n    maxWidth?: string | number,\n    maxHeight?: string | number,\n    minWidth?: string | number,\n    minHeight?: string | number,\n  ) => {\n    if (maxWidth && typeof maxWidth === 'string' && endsWith(maxWidth, '%')) {\n      const ratio = Number(maxWidth.replace('%', '')) / 100;\n      maxWidth = parentSize.width * ratio;\n    }\n    if (maxHeight && typeof maxHeight === 'string' && endsWith(maxHeight, '%')) {\n      const ratio = Number(maxHeight.replace('%', '')) / 100;\n      maxHeight = parentSize.height * ratio;\n    }\n    if (minWidth && typeof minWidth === 'string' && endsWith(minWidth, '%')) {\n      const ratio = Number(minWidth.replace('%', '')) / 100;\n      minWidth = parentSize.width * ratio;\n    }\n    if (minHeight && typeof minHeight === 'string' && endsWith(minHeight, '%')) {\n      const ratio = Number(minHeight.replace('%', '')) / 100;\n      minHeight = parentSize.height * ratio;\n    }\n    return {\n      maxWidth: typeof maxWidth === 'undefined' ? undefined : Number(maxWidth),\n      maxHeight: typeof maxHeight === 'undefined' ? undefined : Number(maxHeight),\n      minWidth: typeof minWidth === 'undefined' ? undefined : Number(minWidth),\n      minHeight: typeof minHeight === 'undefined' ? undefined : Number(minHeight),\n    };\n  },\n);\n\nconst definedProps = [\n  'style',\n  'className',\n  'grid',\n  'snap',\n  'bounds',\n  'size',\n  'defaultSize',\n  'minWidth',\n  'minHeight',\n  'maxWidth',\n  'maxHeight',\n  'lockAspectRatio',\n  'lockAspectRatioExtraWidth',\n  'lockAspectRatioExtraHeight',\n  'enable',\n  'handleStyles',\n  'handleClasses',\n  'handleWrapperStyle',\n  'handleWrapperClass',\n  'children',\n  'onResizeStart',\n  'onResize',\n  'onResizeStop',\n  'handleComponent',\n  'scale',\n  'resizeRatio',\n  'snapGap',\n];\n\n// HACK: This class is used to calculate % size.\nconst baseClassName = '__resizable_base__';\n\ninterface NewSize {\n  newHeight: number | string;\n  newWidth: number | string;\n}\nexport class Resizable extends React.Component<ResizableProps, State> {\n  get parentNode(): HTMLElement | null {\n    if (!this.resizable) {\n      return null;\n    }\n    return this.resizable.parentNode as HTMLElement;\n  }\n\n  get propsSize(): Size {\n    return this.props.size || this.props.defaultSize || DEFAULT_SIZE;\n  }\n\n  get base(): HTMLElement | undefined {\n    const parent = this.parentNode;\n    if (!parent) {\n      return undefined;\n    }\n    const children = [].slice.call(parent.children) as Node[];\n    for (const n of children) {\n      if (n instanceof HTMLElement) {\n        if (n.classList.contains(baseClassName)) {\n          return n;\n        }\n      }\n    }\n    return undefined;\n  }\n\n  get size(): NumberSize {\n    let width = 0;\n    let height = 0;\n    if (typeof window !== 'undefined' && this.resizable) {\n      const orgWidth = this.resizable.offsetWidth;\n      const orgHeight = this.resizable.offsetHeight;\n      // HACK: Set position `relative` to get parent size.\n      //       This is because when re-resizable set `absolute`, I can not get base width correctly.\n      const orgPosition = this.resizable.style.position;\n      if (orgPosition !== 'relative') {\n        this.resizable.style.position = 'relative';\n      }\n      // INFO: Use original width or height if set auto.\n      width = this.resizable.style.width !== 'auto' ? this.resizable.offsetWidth : orgWidth;\n      height = this.resizable.style.height !== 'auto' ? this.resizable.offsetHeight : orgHeight;\n      // Restore original position\n      this.resizable.style.position = orgPosition;\n    }\n    return { width, height };\n  }\n\n  get sizeStyle(): { width: string; height: string } {\n    const { size } = this.props;\n    const getSize = (key: 'width' | 'height'): string => {\n      if (typeof this.state[key] === 'undefined' || this.state[key] === 'auto') {\n        return 'auto';\n      }\n      if (this.propsSize && this.propsSize[key] && endsWith(this.propsSize[key].toString(), '%')) {\n        if (endsWith(this.state[key].toString(), '%')) {\n          return this.state[key].toString();\n        }\n        const parentSize = this.getParentSize();\n        const value = Number(this.state[key].toString().replace('px', ''));\n        const percent = (value / parentSize[key]) * 100;\n        return `${percent}%`;\n      }\n      return getStringSize(this.state[key]);\n    };\n    const width =\n      size && typeof size.width !== 'undefined' && !this.state.isResizing\n        ? getStringSize(size.width)\n        : getSize('width');\n    const height =\n      size && typeof size.height !== 'undefined' && !this.state.isResizing\n        ? getStringSize(size.height)\n        : getSize('height');\n    return { width, height };\n  }\n\n  public static defaultProps = {\n    onResizeStart: () => {},\n    onResize: () => {},\n    onResizeStop: () => {},\n    enable: {\n      top: true,\n      right: true,\n      bottom: true,\n      left: true,\n      topRight: true,\n      bottomRight: true,\n      bottomLeft: true,\n      topLeft: true,\n    },\n    style: {},\n    grid: [1, 1],\n    lockAspectRatio: false,\n    lockAspectRatioExtraWidth: 0,\n    lockAspectRatioExtraHeight: 0,\n    scale: 1,\n    resizeRatio: 1,\n    snapGap: 0,\n  };\n  public ratio = 1;\n  public resizable: HTMLDivElement | null = null;\n  public extendsProps: { [key: string]: React.HTMLProps<'div'> } = {};\n  // For parent boundary\n  public parentLeft = 0;\n  public parentTop = 0;\n  // For boundary\n  public resizableLeft = 0;\n  public resizableTop = 0;\n  // For target boundary\n  public targetLeft = 0;\n  public targetTop = 0;\n\n  constructor(props: ResizableProps) {\n    super(props);\n    this.state = {\n      isResizing: false,\n      resizeCursor: 'auto',\n      width:\n        typeof (this.propsSize && this.propsSize.width) === 'undefined'\n          ? 'auto'\n          : this.propsSize && this.propsSize.width,\n      height:\n        typeof (this.propsSize && this.propsSize.height) === 'undefined'\n          ? 'auto'\n          : this.propsSize && this.propsSize.height,\n      direction: 'right',\n      original: {\n        x: 0,\n        y: 0,\n        width: 0,\n        height: 0,\n      },\n    };\n\n    this.updateExtendsProps(props);\n    this.onResizeStart = this.onResizeStart.bind(this);\n    this.onMouseMove = this.onMouseMove.bind(this);\n    this.onMouseUp = this.onMouseUp.bind(this);\n\n    if (typeof window !== 'undefined') {\n      window.addEventListener('mouseup', this.onMouseUp);\n      window.addEventListener('mousemove', this.onMouseMove);\n      window.addEventListener('mouseleave', this.onMouseUp);\n      window.addEventListener('touchmove', this.onMouseMove);\n      window.addEventListener('touchend', this.onMouseUp);\n    }\n  }\n\n  public updateExtendsProps(props: ResizableProps) {\n    this.extendsProps = Object.keys(props).reduce(\n      (acc, key) => {\n        if (definedProps.indexOf(key) !== -1) {\n          return acc;\n        }\n        acc[key] = props[key as keyof ResizableProps];\n        return acc;\n      },\n      {} as { [key: string]: any },\n    );\n  }\n\n  public getParentSize(): { width: number; height: number } {\n    if (!this.base || !this.parentNode) {\n      return { width: window.innerWidth, height: window.innerHeight };\n    }\n    // INFO: To calculate parent width with flex layout\n    let wrapChanged = false;\n    const wrap = this.parentNode.style.flexWrap;\n    const minWidth = this.base.style.minWidth;\n    if (wrap !== 'wrap') {\n      wrapChanged = true;\n      this.parentNode.style.flexWrap = 'wrap';\n      // HACK: Use relative to get parent padding size\n    }\n    this.base.style.position = 'relative';\n    this.base.style.minWidth = '100%';\n    const size = {\n      width: this.base.offsetWidth,\n      height: this.base.offsetHeight,\n    };\n    this.base.style.position = 'absolute';\n    if (wrapChanged) {\n      this.parentNode.style.flexWrap = wrap;\n    }\n    this.base.style.minWidth = minWidth;\n    return size;\n  }\n\n  public componentDidMount() {\n    this.setState({\n      width: this.state.width || this.size.width,\n      height: this.state.height || this.size.height,\n    });\n    const parent = this.parentNode;\n    if (!(parent instanceof HTMLElement)) {\n      return;\n    }\n    if (this.base) {\n      return;\n    }\n    const element = document.createElement('div');\n    element.style.width = '100%';\n    element.style.height = '100%';\n    element.style.position = 'absolute';\n    element.style.transform = 'scale(0, 0)';\n    element.style.left = '0';\n    element.style.flex = '0';\n    if (element.classList) {\n      element.classList.add(baseClassName);\n    } else {\n      element.className += baseClassName;\n    }\n    parent.appendChild(element);\n  }\n\n  public componentWillReceiveProps(next: ResizableProps) {\n    this.updateExtendsProps(next);\n  }\n\n  public componentWillUnmount() {\n    if (typeof window !== 'undefined') {\n      window.removeEventListener('mouseup', this.onMouseUp);\n      window.removeEventListener('mousemove', this.onMouseMove);\n      window.removeEventListener('mouseleave', this.onMouseUp);\n      window.removeEventListener('touchmove', this.onMouseMove);\n      window.removeEventListener('touchend', this.onMouseUp);\n      const parent = this.parentNode;\n      if (!this.base || !parent) {\n        return;\n      }\n      if (!(parent instanceof HTMLElement) || !(this.base instanceof Node)) {\n        return;\n      }\n      parent.removeChild(this.base);\n    }\n  }\n\n  public createSizeForCssProperty(newSize: number | string, kind: 'width' | 'height'): number | string {\n    const propsSize = this.propsSize && this.propsSize[kind];\n    return this.state[kind] === 'auto' &&\n      this.state.original[kind] === newSize &&\n      (typeof propsSize === 'undefined' || propsSize === 'auto')\n      ? 'auto'\n      : newSize;\n  }\n\n  public calculateNewMaxFromBoundary(maxWidth?: number, maxHeight?: number) {\n    if (this.props.bounds === 'parent') {\n      const parent = this.parentNode;\n      if (parent instanceof HTMLElement) {\n        const boundWidth = parent.offsetWidth + (this.parentLeft - this.resizableLeft);\n        const boundHeight = parent.offsetHeight + (this.parentTop - this.resizableTop);\n        maxWidth = maxWidth && maxWidth < boundWidth ? maxWidth : boundWidth;\n        maxHeight = maxHeight && maxHeight < boundHeight ? maxHeight : boundHeight;\n      }\n    } else if (this.props.bounds === 'window') {\n      if (typeof window !== 'undefined') {\n        const boundWidth = window.innerWidth - this.resizableLeft;\n        const boundHeight = window.innerHeight - this.resizableTop;\n        maxWidth = maxWidth && maxWidth < boundWidth ? maxWidth : boundWidth;\n        maxHeight = maxHeight && maxHeight < boundHeight ? maxHeight : boundHeight;\n      }\n    } else if (this.props.bounds instanceof HTMLElement) {\n      const boundWidth = this.props.bounds.offsetWidth + (this.targetLeft - this.resizableLeft);\n      const boundHeight = this.props.bounds.offsetHeight + (this.targetTop - this.resizableTop);\n      maxWidth = maxWidth && maxWidth < boundWidth ? maxWidth : boundWidth;\n      maxHeight = maxHeight && maxHeight < boundHeight ? maxHeight : boundHeight;\n    }\n    return { maxWidth, maxHeight };\n  }\n\n  public calculateNewSizeFromDirection(clientX: number, clientY: number) {\n    const scale = this.props.scale || 1;\n    const resizeRatio = this.props.resizeRatio || 1;\n    const { direction, original } = this.state;\n    const { lockAspectRatio, lockAspectRatioExtraHeight, lockAspectRatioExtraWidth } = this.props;\n    let newWidth = original.width;\n    let newHeight = original.height;\n    if (hasDirection('right', direction)) {\n      newWidth = original.width + ((clientX - original.x) * resizeRatio) / scale;\n      if (lockAspectRatio) {\n        newHeight = (newWidth - lockAspectRatioExtraWidth) / this.ratio + lockAspectRatioExtraHeight;\n      }\n    }\n    if (hasDirection('left', direction)) {\n      newWidth = original.width - ((clientX - original.x) * resizeRatio) / scale;\n      if (lockAspectRatio) {\n        newHeight = (newWidth - lockAspectRatioExtraWidth) / this.ratio + lockAspectRatioExtraHeight;\n      }\n    }\n    if (hasDirection('bottom', direction)) {\n      newHeight = original.height + ((clientY - original.y) * resizeRatio) / scale;\n      if (lockAspectRatio) {\n        newWidth = (newHeight - lockAspectRatioExtraHeight) * this.ratio + lockAspectRatioExtraWidth;\n      }\n    }\n    if (hasDirection('top', direction)) {\n      newHeight = original.height - ((clientY - original.y) * resizeRatio) / scale;\n      if (lockAspectRatio) {\n        newWidth = (newHeight - lockAspectRatioExtraHeight) * this.ratio + lockAspectRatioExtraWidth;\n      }\n    }\n    return { newWidth, newHeight };\n  }\n\n  public calculateNewSizeFromAspectRatio(\n    newWidth: number,\n    newHeight: number,\n    max: { width?: number; height?: number },\n    min: { width?: number; height?: number },\n  ) {\n    const { lockAspectRatio, lockAspectRatioExtraHeight, lockAspectRatioExtraWidth } = this.props;\n    const computedMinWidth = typeof min.width === 'undefined' ? 10 : min.width;\n    const computedMaxWidth = typeof max.width === 'undefined' || max.width < 0 ? newWidth : max.width;\n    const computedMinHeight = typeof min.height === 'undefined' ? 10 : min.height;\n    const computedMaxHeight = typeof max.height === 'undefined' || max.height < 0 ? newHeight : max.height;\n    if (lockAspectRatio) {\n      const extraMinWidth = (computedMinHeight - lockAspectRatioExtraHeight) * this.ratio + lockAspectRatioExtraWidth;\n      const extraMaxWidth = (computedMaxHeight - lockAspectRatioExtraHeight) * this.ratio + lockAspectRatioExtraWidth;\n      const extraMinHeight = (computedMinWidth - lockAspectRatioExtraWidth) / this.ratio + lockAspectRatioExtraHeight;\n      const extraMaxHeight = (computedMaxWidth - lockAspectRatioExtraWidth) / this.ratio + lockAspectRatioExtraHeight;\n      const lockedMinWidth = Math.max(computedMinWidth, extraMinWidth);\n      const lockedMaxWidth = Math.min(computedMaxWidth, extraMaxWidth);\n      const lockedMinHeight = Math.max(computedMinHeight, extraMinHeight);\n      const lockedMaxHeight = Math.min(computedMaxHeight, extraMaxHeight);\n      newWidth = clamp(newWidth, lockedMinWidth, lockedMaxWidth);\n      newHeight = clamp(newHeight, lockedMinHeight, lockedMaxHeight);\n    } else {\n      newWidth = clamp(newWidth, computedMinWidth, computedMaxWidth);\n      newHeight = clamp(newHeight, computedMinHeight, computedMaxHeight);\n    }\n    return { newWidth, newHeight };\n  }\n\n  public setBoundingClientRect() {\n    // For parent boundary\n    if (this.props.bounds === 'parent') {\n      const parent = this.parentNode;\n      if (parent instanceof HTMLElement) {\n        const parentRect = parent.getBoundingClientRect();\n        this.parentLeft = parentRect.left;\n        this.parentTop = parentRect.top;\n      }\n    }\n\n    // For target(html element) boundary\n    if (this.props.bounds instanceof HTMLElement) {\n      const targetRect = this.props.bounds.getBoundingClientRect();\n      this.targetLeft = targetRect.left;\n      this.targetTop = targetRect.top;\n    }\n\n    // For boundary\n    if (this.resizable) {\n      const { left, top } = this.resizable.getBoundingClientRect();\n      this.resizableLeft = left;\n      this.resizableTop = top;\n    }\n  }\n\n  public onResizeStart(\n    event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n    direction: Direction,\n  ) {\n    let clientX = 0;\n    let clientY = 0;\n    if (event.nativeEvent instanceof MouseEvent) {\n      clientX = event.nativeEvent.clientX;\n      clientY = event.nativeEvent.clientY;\n\n      // When user click with right button the resize is stuck in resizing mode\n      // until users clicks again, dont continue if right click is used.\n      // HACK: MouseEvent does not have `which` from flow-bin v0.68.\n      if (event.nativeEvent.which === 3) {\n        return;\n      }\n    } else if (event.nativeEvent instanceof TouchEvent) {\n      clientX = event.nativeEvent.touches[0].clientX;\n      clientY = event.nativeEvent.touches[0].clientY;\n    }\n    if (this.props.onResizeStart) {\n      if (this.resizable) {\n        this.props.onResizeStart(event, direction, this.resizable);\n      }\n    }\n\n    // Fix #168\n    if (this.props.size) {\n      if (typeof this.props.size.height !== 'undefined' && this.props.size.height !== this.state.height) {\n        this.setState({ height: this.props.size.height });\n      }\n      if (typeof this.props.size.width !== 'undefined' && this.props.size.width !== this.state.width) {\n        this.setState({ width: this.props.size.width });\n      }\n    }\n\n    // For lockAspectRatio case\n    this.ratio =\n      typeof this.props.lockAspectRatio === 'number' ? this.props.lockAspectRatio : this.size.width / this.size.height;\n\n    // For boundary\n    this.setBoundingClientRect();\n\n    this.setState({\n      original: {\n        x: clientX,\n        y: clientY,\n        width: this.size.width,\n        height: this.size.height,\n      },\n      isResizing: true,\n      resizeCursor: window.getComputedStyle(event.target as HTMLElement).cursor || 'auto',\n      direction,\n    });\n  }\n\n  public onMouseMove(event: MouseEvent | TouchEvent) {\n    if (!this.state.isResizing || !this.resizable) {\n      return;\n    }\n    let { maxWidth, maxHeight, minWidth, minHeight } = this.props;\n    const clientX = event instanceof MouseEvent ? event.clientX : event.touches[0].clientX;\n    const clientY = event instanceof MouseEvent ? event.clientY : event.touches[0].clientY;\n    const { direction, original, width, height } = this.state;\n    const parentSize = this.getParentSize();\n    const max = calculateNewMax(parentSize, maxWidth, maxHeight, minWidth, minHeight);\n\n    maxWidth = max.maxWidth;\n    maxHeight = max.maxHeight;\n    minWidth = max.minWidth;\n    minHeight = max.minHeight;\n\n    // Calculate new size\n    let { newHeight, newWidth }: NewSize = this.calculateNewSizeFromDirection(clientX, clientY);\n\n    // Calculate max size from boundary settings\n    const boundaryMax = this.calculateNewMaxFromBoundary(maxWidth, maxHeight);\n\n    // Calculate new size from aspect ratio\n    const newSize = this.calculateNewSizeFromAspectRatio(\n      newWidth,\n      newHeight,\n      { width: boundaryMax.maxWidth, height: boundaryMax.maxHeight },\n      { width: minWidth, height: minHeight },\n    );\n    newWidth = newSize.newWidth;\n    newHeight = newSize.newHeight;\n\n    if (this.props.grid) {\n      const newGridWidth = snap(newWidth, this.props.grid[0]);\n      const newGridHeight = snap(newHeight, this.props.grid[1]);\n      newWidth =\n        this.props.snapGap === 0 || Math.abs(newGridWidth - newWidth) <= this.props.snapGap ? newGridWidth : newWidth;\n      newHeight =\n        this.props.snapGap === 0 || Math.abs(newGridHeight - newHeight) <= this.props.snapGap\n          ? newGridHeight\n          : newHeight;\n    }\n\n    if (this.props.snap && this.props.snap.x) {\n      newWidth = findClosestSnap(newWidth, this.props.snap.x, this.props.snapGap);\n    }\n    if (this.props.snap && this.props.snap.y) {\n      newHeight = findClosestSnap(newHeight, this.props.snap.y, this.props.snapGap);\n    }\n\n    const delta = {\n      width: newWidth - original.width,\n      height: newHeight - original.height,\n    };\n\n    if (width && typeof width === 'string') {\n      if (endsWith(width, '%')) {\n        const percent = (newWidth / parentSize.width) * 100;\n        newWidth = `${percent}%`;\n      } else if (endsWith(width, 'vw')) {\n        const vw = (newWidth / window.innerWidth) * 100;\n        newWidth = `${vw}vw`;\n      } else if (endsWith(width, 'vh')) {\n        const vh = (newWidth / window.innerHeight) * 100;\n        newWidth = `${vh}vh`;\n      }\n    }\n\n    if (height && typeof height === 'string') {\n      if (endsWith(height, '%')) {\n        const percent = (newHeight / parentSize.height) * 100;\n        newHeight = `${percent}%`;\n      } else if (endsWith(height, 'vw')) {\n        const vw = (newHeight / window.innerWidth) * 100;\n        newHeight = `${vw}vw`;\n      } else if (endsWith(height, 'vh')) {\n        const vh = (newHeight / window.innerHeight) * 100;\n        newHeight = `${vh}vh`;\n      }\n    }\n\n    this.setState({\n      width: this.createSizeForCssProperty(newWidth, 'width'),\n      height: this.createSizeForCssProperty(newHeight, 'height'),\n    });\n\n    if (this.props.onResize) {\n      this.props.onResize(event, direction, this.resizable, delta);\n    }\n  }\n\n  public onMouseUp(event: MouseEvent | TouchEvent) {\n    const { isResizing, direction, original } = this.state;\n    if (!isResizing || !this.resizable) {\n      return;\n    }\n    const delta = {\n      width: this.size.width - original.width,\n      height: this.size.height - original.height,\n    };\n    if (this.props.onResizeStop) {\n      this.props.onResizeStop(event, direction, this.resizable, delta);\n    }\n    if (this.props.size) {\n      this.setState(this.props.size);\n    }\n    this.setState({ isResizing: false, resizeCursor: 'auto' });\n  }\n\n  public updateSize(size: Size) {\n    this.setState({ width: size.width, height: size.height });\n  }\n\n  public renderResizer() {\n    const { enable, handleStyles, handleClasses, handleWrapperStyle, handleWrapperClass, handleComponent } = this.props;\n    if (!enable) {\n      return null;\n    }\n    const resizers = Object.keys(enable).map(dir => {\n      if (enable[dir as Direction] !== false) {\n        return (\n          <Resizer\n            key={dir}\n            direction={dir as Direction}\n            onResizeStart={this.onResizeStart}\n            replaceStyles={handleStyles && handleStyles[dir as Direction]}\n            className={handleClasses && handleClasses[dir as Direction]}\n          >\n            {handleComponent && handleComponent[dir as Direction] ? handleComponent[dir as Direction] : null}\n          </Resizer>\n        );\n      }\n      return null;\n    });\n    // #93 Wrap the resize box in span (will not break 100% width/height)\n    return (\n      <span className={handleWrapperClass} style={handleWrapperStyle}>\n        {resizers}\n      </span>\n    );\n  }\n\n  public render() {\n    return (\n      <div\n        ref={c => {\n          if (c) {\n            this.resizable = c;\n          }\n        }}\n        style={{\n          position: 'relative',\n          userSelect: this.state.isResizing ? 'none' : 'auto',\n          ...this.props.style,\n          ...this.sizeStyle,\n          maxWidth: this.props.maxWidth,\n          maxHeight: this.props.maxHeight,\n          minWidth: this.props.minWidth,\n          minHeight: this.props.minHeight,\n          boxSizing: 'border-box',\n        }}\n        className={this.props.className}\n        {...this.extendsProps}\n      >\n        {this.state.isResizing && (\n          <div\n            style={{\n              height: '100%',\n              width: '100%',\n              backgroundColor: 'rgba(0,0,0,0)',\n              cursor: `${this.state.resizeCursor || 'auto'}`,\n              opacity: 0,\n              position: 'fixed',\n              zIndex: 9999,\n              top: '0',\n              left: '0',\n              bottom: '0',\n              right: '0',\n            }}\n          />\n        )}\n\n        {this.props.children}\n        {this.renderResizer()}\n      </div>\n    );\n  }\n}\n"],"mappings":"AAAA","sourceRoot":""}