react-resizable 1.7.4 → 1.10.1

package/build/Resizable.js.flow

@@ -2,14 +2,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {DraggableCore} from 'react-draggable';
-import cloneElement from './cloneElement';
+import {cloneElement} from './utils';
 import type {Element as ReactElement, Node as ReactNode} from 'react';
 
 type Axis = 'both' | 'x' | 'y' | 'none';
+type ResizeHandle = 's' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne';
 type State = {
-  resizing: boolean,
-  width: number, height: number,
-  slackW: number, slackH: number
+  slackW: number, slackH: number,
 };
 type DragCallbackData = {
   node: HTMLElement,
@@ -19,13 +18,15 @@ type DragCallbackData = {
 };
 export type ResizeCallbackData = {
   node: HTMLElement,
-  size: {width: number, height: number}
+  size: {width: number, height: number},
+  handle: ResizeHandle
 };
 export type Props = {
   children: ReactElement<any>,
   className?: ?string,
   width: number,
   height: number,
+  handle: ReactElement<any> | (resizeHandle: ResizeHandle) => ReactElement<any>,
   handleSize: [number, number],
   lockAspectRatio: boolean,
   axis: Axis,
@@ -34,7 +35,9 @@ export type Props = {
   onResizeStop?: ?(e: SyntheticEvent<>, data: ResizeCallbackData) => any,
   onResizeStart?: ?(e: SyntheticEvent<>, data: ResizeCallbackData) => any,
   onResize?: ?(e: SyntheticEvent<>, data: ResizeCallbackData) => any,
-  draggableOpts?: ?Object
+  draggableOpts?: ?Object,
+  resizeHandles: ResizeHandle[],
+  transformScale: number,
 };
 
 export default class Resizable extends React.Component<Props, State> {
@@ -54,9 +57,25 @@ export default class Resizable extends React.Component<Props, State> {
     // Optional props
     //
 
+    // Custom resize handle
+    handle: PropTypes.element,
+
     // If you change this, be sure to update your css
     handleSize: PropTypes.array,
 
+    // Defines which resize handles should be rendered (default: 'se')
+    // Allows for any combination of:
+    // 's' - South handle (bottom-center)
+    // 'w' - West handle (left-center)
+    // 'e' - East handle (right-center)
+    // 'n' - North handle (top-center)
+    // 'sw' - Southwest handle (bottom-left)
+    // 'nw' - Northwest handle (top-left)
+    // 'se' - Southeast handle (bottom-right)
+    // 'ne' - Northeast handle (top-center)
+    resizeHandles: PropTypes.arrayOf(PropTypes.oneOf(['s', 'w', 'e', 'n', 'sw', 'nw', 'se', 'ne'])),
+    transformScale: PropTypes.number,
+
     // If true, will only allow width/height to move in lockstep
     lockAspectRatio: PropTypes.bool,
 
@@ -85,26 +104,15 @@ export default class Resizable extends React.Component<Props, State> {
     lockAspectRatio: false,
     axis: 'both',
     minConstraints: [20, 20],
-    maxConstraints: [Infinity, Infinity]
+    maxConstraints: [Infinity, Infinity],
+    resizeHandles: ['se'],
+    transformScale: 1
   };
 
   state: State = {
-    resizing: false,
-    width: this.props.width, height: this.props.height,
     slackW: 0, slackH: 0
   };
 
-  componentWillReceiveProps(nextProps: Object) {
-    // If parent changes height/width, set that in our state.
-    if (!this.state.resizing &&
-        (nextProps.width !== this.props.width || nextProps.height !== this.props.height)) {
-      this.setState({
-        width: nextProps.width,
-        height: nextProps.height
-      });
-    }
-  }
-
   lockAspectRatio(width: number, height: number, aspectRatio: number): [number, number] {
     height = width / aspectRatio;
     width = height * aspectRatio;
@@ -114,15 +122,23 @@ export default class Resizable extends React.Component<Props, State> {
   // If you do this, be careful of constraints
   runConstraints(width: number, height: number): [number, number] {
     const [min, max] = [this.props.minConstraints, this.props.maxConstraints];
+    if (!min && !max) return [width, height];
 
+    // Fit width & height to aspect ratio
     if (this.props.lockAspectRatio) {
-      const ratio = this.state.width / this.state.height;
-      height = width / ratio;
-      width = height * ratio;
+      if (height === this.props.height) {
+        const ratio = this.props.width / this.props.height;
+        height = width / ratio;
+        width = height * ratio;
+      } else {
+        // Take into account vertical resize with N/S handles on locked aspect
+        // ratio. Calculate the change height-first, instead of width-first
+        const ratio = this.props.height / this.props.width;
+        width = height / ratio;
+        height = width * ratio;
+      }
     }
 
-    if (!min && !max) return [width, height];
-
     const [oldW, oldH] = [width, height];
 
     // Add slack to the values used to calculate bound position. This will ensure that if
@@ -157,19 +173,29 @@ export default class Resizable extends React.Component<Props, State> {
    * @param  {String} handlerName Handler name to wrap.
    * @return {Function}           Handler function.
    */
-  resizeHandler(handlerName: string): Function {
+  resizeHandler(handlerName: string, axis: ResizeHandle): Function {
     return (e: SyntheticEvent<> | MouseEvent, {node, deltaX, deltaY}: DragCallbackData) => {
+      deltaX /= this.props.transformScale;
+      deltaY /= this.props.transformScale;
 
       // Axis restrictions
-      const canDragX = this.props.axis === 'both' || this.props.axis === 'x';
-      const canDragY = this.props.axis === 'both' || this.props.axis === 'y';
+      const canDragX = (this.props.axis === 'both' || this.props.axis === 'x') && ['n', 's'].indexOf(axis) === -1;
+      const canDragY = (this.props.axis === 'both' || this.props.axis === 'y') && ['e', 'w'].indexOf(axis) === -1;
+
+      // reverse delta if using top or left drag handles
+      if (canDragX && axis[axis.length - 1] === 'w') {
+        deltaX = -deltaX;
+      }
+      if (canDragY && axis[0] === 'n') {
+        deltaY = -deltaY;
+      }
 
       // Update w/h
-      let width = this.state.width + (canDragX ? deltaX : 0);
-      let height = this.state.height + (canDragY ? deltaY : 0);
+      let width = this.props.width + (canDragX ? deltaX : 0);
+      let height = this.props.height + (canDragY ? deltaY : 0);
 
       // Early return if no change
-      const widthChanged = width !== this.state.width, heightChanged = height !== this.state.height;
+      const widthChanged = width !== this.props.width, heightChanged = height !== this.props.height;
       if (handlerName === 'onResize' && !widthChanged && !heightChanged) return;
 
       [width, height] = this.runConstraints(width, height);
@@ -177,32 +203,41 @@ export default class Resizable extends React.Component<Props, State> {
       // Set the appropriate state for this handler.
       const newState = {};
       if (handlerName === 'onResizeStart') {
-        newState.resizing = true;
+        // nothing
       } else if (handlerName === 'onResizeStop') {
-        newState.resizing = false;
         newState.slackW = newState.slackH = 0;
       } else {
         // Early return if no change after constraints
-        if (width === this.state.width && height === this.state.height) return;
-        newState.width = width;
-        newState.height = height;
+        if (width === this.props.width && height === this.props.height) return;
       }
 
       const hasCb = typeof this.props[handlerName] === 'function';
       if (hasCb) {
+        // $FlowIgnore isn't refining this correctly to SyntheticEvent
         if (typeof e.persist === 'function') e.persist();
-        this.setState(newState, () => this.props[handlerName](e, {node, size: {width, height}}));
+        this.setState(newState, () => this.props[handlerName](e, {node, size: {width, height}, handle: axis}));
       } else {
         this.setState(newState);
       }
     };
   }
 
+  renderResizeHandle(resizeHandle: ResizeHandle): ReactNode {
+    const {handle} = this.props;
+    if (handle) {
+      if (typeof handle === 'function') {
+        return handle(resizeHandle);
+      }
+      return handle;
+    }
+    return <span className={`react-resizable-handle react-resizable-handle-${resizeHandle}`} />;
+  }
+
   render(): ReactNode {
     // eslint-disable-next-line no-unused-vars
     const {children, draggableOpts, width, height, handleSize,
         lockAspectRatio, axis, minConstraints, maxConstraints, onResize,
-        onResizeStop, onResizeStart, ...p} = this.props;
+        onResizeStop, onResizeStart, resizeHandles, transformScale, ...p} = this.props;
 
     const className = p.className ?
       `${p.className} react-resizable`:
@@ -211,21 +246,23 @@ export default class Resizable extends React.Component<Props, State> {
     // What we're doing here is getting the child of this element, and cloning it with this element's props.
     // We are then defining its children as:
     // Its original children (resizable's child's children), and
-    // A draggable handle.
+    // One or more draggable handles.
     return cloneElement(children, {
       ...p,
       className,
       children: [
         children.props.children,
-        <DraggableCore
-          {...draggableOpts}
-          key="resizableHandle"
-          onStop={this.resizeHandler('onResizeStop')}
-          onStart={this.resizeHandler('onResizeStart')}
-          onDrag={this.resizeHandler('onResize')}
+        resizeHandles.map(h => (
+          <DraggableCore
+            {...draggableOpts}
+            key={`resizableHandle-${h}`}
+            onStop={this.resizeHandler('onResizeStop', h)}
+            onStart={this.resizeHandler('onResizeStart', h)}
+            onDrag={this.resizeHandler('onResize', h)}
           >
-          <span className="react-resizable-handle" />
-        </DraggableCore>
+            {this.renderResizeHandle(h)}
+          </DraggableCore>
+        ))
       ]
     });
   }

package/build/ResizableBox.js

@@ -1,118 +1,135 @@
-'use strict';
+"use strict";
 
 exports.__esModule = true;
+exports.default = void 0;
 
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+var _react = _interopRequireDefault(require("react"));
 
-var _react = require('react');
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _react2 = _interopRequireDefault(_react);
-
-var _propTypes = require('prop-types');
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
-var _Resizable = require('./Resizable');
-
-var _Resizable2 = _interopRequireDefault(_Resizable);
+var _Resizable = _interopRequireDefault(require("./Resizable"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 // An example use of Resizable.
-var ResizableBox = function (_React$Component) {
-  _inherits(ResizableBox, _React$Component);
+var ResizableBox =
+/*#__PURE__*/
+function (_React$Component) {
+  _inheritsLoose(ResizableBox, _React$Component);
 
   function ResizableBox() {
-    var _temp, _this, _ret;
-
-    _classCallCheck(this, ResizableBox);
+    var _this;
 
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, _React$Component.call.apply(_React$Component, [this].concat(args))), _this), _this.state = {
+    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+
+    _defineProperty(_assertThisInitialized(_this), "state", {
       width: _this.props.width,
-      height: _this.props.height
-    }, _this.onResize = function (e, data) {
+      height: _this.props.height,
+      propsWidth: _this.props.width,
+      propsHeight: _this.props.height
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onResize", function (e, data) {
       var size = data.size;
       var width = size.width,
           height = size.height;
 
-
       if (_this.props.onResize) {
         e.persist && e.persist();
+
         _this.setState(size, function () {
           return _this.props.onResize && _this.props.onResize(e, data);
         });
       } else {
         _this.setState(size);
       }
-    }, _temp), _possibleConstructorReturn(_this, _ret);
+    });
+
+    return _this;
   }
 
-  ResizableBox.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
-    if (nextProps.width !== this.props.width || nextProps.height !== this.props.height) {
-      this.setState({
-        width: nextProps.width,
-        height: nextProps.height
-      });
+  ResizableBox.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
+    // If parent changes height/width, set that in our state.
+    if (state.propsWidth !== props.width || state.propsHeight !== props.height) {
+      return {
+        width: props.width,
+        height: props.height,
+        propsWidth: props.width,
+        propsHeight: props.height
+      };
     }
+
+    return null;
   };
 
-  ResizableBox.prototype.render = function render() {
+  var _proto = ResizableBox.prototype;
+
+  _proto.render = function render() {
     // Basic wrapper around a Resizable instance.
     // If you use Resizable directly, you are responsible for updating the child component
     // with a new width and height.
-    var _props = this.props,
-        handleSize = _props.handleSize,
-        onResize = _props.onResize,
-        onResizeStart = _props.onResizeStart,
-        onResizeStop = _props.onResizeStop,
-        draggableOpts = _props.draggableOpts,
-        minConstraints = _props.minConstraints,
-        maxConstraints = _props.maxConstraints,
-        lockAspectRatio = _props.lockAspectRatio,
-        axis = _props.axis,
-        width = _props.width,
-        height = _props.height,
-        props = _objectWithoutProperties(_props, ['handleSize', 'onResize', 'onResizeStart', 'onResizeStop', 'draggableOpts', 'minConstraints', 'maxConstraints', 'lockAspectRatio', 'axis', 'width', 'height']);
-
-    return _react2.default.createElement(
-      _Resizable2.default,
-      {
-        handleSize: handleSize,
-        width: this.state.width,
-        height: this.state.height,
-        onResizeStart: onResizeStart,
-        onResize: this.onResize,
-        onResizeStop: onResizeStop,
-        draggableOpts: draggableOpts,
-        minConstraints: minConstraints,
-        maxConstraints: maxConstraints,
-        lockAspectRatio: lockAspectRatio,
-        axis: axis
-      },
-      _react2.default.createElement('div', _extends({ style: { width: this.state.width + 'px', height: this.state.height + 'px' } }, props))
-    );
+    var _this$props = this.props,
+        handle = _this$props.handle,
+        handleSize = _this$props.handleSize,
+        onResize = _this$props.onResize,
+        onResizeStart = _this$props.onResizeStart,
+        onResizeStop = _this$props.onResizeStop,
+        draggableOpts = _this$props.draggableOpts,
+        minConstraints = _this$props.minConstraints,
+        maxConstraints = _this$props.maxConstraints,
+        lockAspectRatio = _this$props.lockAspectRatio,
+        axis = _this$props.axis,
+        width = _this$props.width,
+        height = _this$props.height,
+        resizeHandles = _this$props.resizeHandles,
+        props = _objectWithoutPropertiesLoose(_this$props, ["handle", "handleSize", "onResize", "onResizeStart", "onResizeStop", "draggableOpts", "minConstraints", "maxConstraints", "lockAspectRatio", "axis", "width", "height", "resizeHandles"]);
+
+    return _react.default.createElement(_Resizable.default, {
+      handle: handle,
+      handleSize: handleSize,
+      width: this.state.width,
+      height: this.state.height,
+      onResizeStart: onResizeStart,
+      onResize: this.onResize,
+      onResizeStop: onResizeStop,
+      draggableOpts: draggableOpts,
+      minConstraints: minConstraints,
+      maxConstraints: maxConstraints,
+      lockAspectRatio: lockAspectRatio,
+      axis: axis,
+      resizeHandles: resizeHandles
+    }, _react.default.createElement("div", _extends({
+      style: {
+        width: this.state.width + 'px',
+        height: this.state.height + 'px'
+      }
+    }, props)));
   };
 
   return ResizableBox;
-}(_react2.default.Component);
+}(_react.default.Component);
+
+exports.default = ResizableBox;
+
+_defineProperty(ResizableBox, "propTypes", {
+  height: _propTypes.default.number,
+  width: _propTypes.default.number
+});
 
-ResizableBox.propTypes = {
-  height: _propTypes2.default.number,
-  width: _propTypes2.default.number
-};
-ResizableBox.defaultProps = {
+_defineProperty(ResizableBox, "defaultProps", {
   handleSize: [20, 20]
-};
-exports.default = ResizableBox;
+});

package/build/ResizableBox.js.flow

@@ -5,7 +5,10 @@ import Resizable from './Resizable';
 import type {Props as ResizableProps, ResizeCallbackData} from './Resizable';
 import type {Node as ReactNode} from 'react';
 
-type State = {width: number, height: number};
+type State = {
+  width: number, height: number,
+  propsWidth: number, propsHeight: number,
+};
 
 // An example use of Resizable.
 export default class ResizableBox extends React.Component<ResizableProps, State> {
@@ -21,8 +24,23 @@ export default class ResizableBox extends React.Component<ResizableProps, State>
   state: State = {
     width: this.props.width,
     height: this.props.height,
+    propsWidth: this.props.width,
+    propsHeight: this.props.height,
   };
 
+  static getDerivedStateFromProps(props: ResizableProps, state: State) {
+    // If parent changes height/width, set that in our state.
+    if (state.propsWidth !== props.width || state.propsHeight !== props.height) {
+      return {
+        width: props.width,
+        height: props.height,
+        propsWidth: props.width,
+        propsHeight: props.height,
+      };
+    }
+    return null;
+  }
+
   onResize = (e: SyntheticEvent<>, data: ResizeCallbackData) => {
     const {size} = data;
     const {width, height} = size;
@@ -35,23 +53,15 @@ export default class ResizableBox extends React.Component<ResizableProps, State>
     }
   };
 
-  componentWillReceiveProps(nextProps: ResizableProps) {
-    if (nextProps.width !== this.props.width || nextProps.height !== this.props.height) {
-      this.setState({
-        width: nextProps.width,
-        height: nextProps.height
-      });
-    }
-  }
-
   render(): ReactNode {
     // Basic wrapper around a Resizable instance.
     // If you use Resizable directly, you are responsible for updating the child component
     // with a new width and height.
-    const {handleSize, onResize, onResizeStart, onResizeStop, draggableOpts,
-         minConstraints, maxConstraints, lockAspectRatio, axis, width, height, ...props} = this.props;
+    const {handle, handleSize, onResize, onResizeStart, onResizeStop, draggableOpts, minConstraints,
+      maxConstraints, lockAspectRatio, axis, width, height, resizeHandles, ...props} = this.props;
     return (
       <Resizable
+        handle={handle}
         handleSize={handleSize}
         width={this.state.width}
         height={this.state.height}
@@ -63,7 +73,8 @@ export default class ResizableBox extends React.Component<ResizableProps, State>
         maxConstraints={maxConstraints}
         lockAspectRatio={lockAspectRatio}
         axis={axis}
-        >
+        resizeHandles={resizeHandles}
+      >
         <div style={{width: this.state.width + 'px', height: this.state.height + 'px'}} {...props} />
       </Resizable>
     );

package/build/utils.js

@@ -0,0 +1,27 @@
+"use strict";
+
+exports.__esModule = true;
+exports.cloneElement = cloneElement;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+// React.addons.cloneWithProps look-alike that merges style & className.
+function cloneElement(element, props) {
+  if (props.style && element.props.style) {
+    props.style = _objectSpread({}, element.props.style, {}, props.style);
+  }
+
+  if (props.className && element.props.className) {
+    props.className = element.props.className + " " + props.className;
+  }
+
+  return _react.default.cloneElement(element, props);
+}

package/build/{cloneElement.js.flow → utils.js.flow}

@@ -3,7 +3,7 @@ import React from 'react';
 import type {Element as ReactElement} from 'react';
 
 // React.addons.cloneWithProps look-alike that merges style & className.
-module.exports = function cloneElement(element: ReactElement<any>, props: Object): ReactElement<any> {
+export function cloneElement(element: ReactElement<any>, props: Object): ReactElement<any> {
   if (props.style && element.props.style) {
     props.style = {...element.props.style, ...props.style};
   }
@@ -11,4 +11,4 @@ module.exports = function cloneElement(element: ReactElement<any>, props: Object
     props.className = `${element.props.className} ${props.className}`;
   }
   return React.cloneElement(element, props);
-};
+}

package/css/styles.css

@@ -5,13 +5,61 @@
   position: absolute;
   width: 20px;
   height: 20px;
-  bottom: 0;
-  right: 0;
-  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+');
-  background-position: bottom right;
-  padding: 0 3px 3px 0;
   background-repeat: no-repeat;
   background-origin: content-box;
   box-sizing: border-box;
+  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+');
+  background-position: bottom right;
+  padding: 0 3px 3px 0;
+}
+.react-resizable-handle-sw {
+  bottom: 0;
+  left: 0;
+  cursor: sw-resize;
+  transform: rotate(90deg);
+}
+.react-resizable-handle-se {
+  bottom: 0;
+  right: 0;
   cursor: se-resize;
 }
+.react-resizable-handle-nw {
+  top: 0;
+  left: 0;
+  cursor: nw-resize;
+  transform: rotate(180deg);
+}
+.react-resizable-handle-ne {
+  top: 0;
+  right: 0;
+  cursor: ne-resize;
+  transform: rotate(270deg);
+}
+.react-resizable-handle-w,
+.react-resizable-handle-e {
+  top: 50%;
+  margin-top: -10px;
+  cursor: ew-resize;
+}
+.react-resizable-handle-w {
+  left: 0;
+  transform: rotate(135deg);
+}
+.react-resizable-handle-e {
+  right: 0;
+  transform: rotate(315deg);
+}
+.react-resizable-handle-n,
+.react-resizable-handle-s {
+  left: 50%;
+  margin-left: -10px;
+  cursor: ns-resize;
+}
+.react-resizable-handle-n {
+  top: 0;
+  transform: rotate(225deg);
+}
+.react-resizable-handle-s {
+  bottom: 0;
+  transform: rotate(45deg);
+}

package/index.html

@@ -0,0 +1,15 @@
+<html>
+<head>
+  <style>
+    body {
+      background: darkblue;
+      color: white;
+      font-size: 32px;
+    }
+  </style>
+</head>
+<body>
+Hello! This is a website wow
+<div style="background-color: black; width: 200px; height: 200px">BOX</div>
+</body>
+</html>