@yorab/react-paint 0.2.2 → 0.3.0

package/dist/components/Canvas.js

@@ -25,8 +25,6 @@ var _Mode = require("../types/Mode");
 
 var _transform = require("../utils/transform");
 
-var _draw2 = require("../constants/draw");
-
 var _EditTextBox = _interopRequireDefault(require("./toolbox/EditTextBox"));
 
 var _useDrawableCanvas2 = _interopRequireDefault(require("../hooks/useDrawableCanvas"));
@@ -41,19 +39,23 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-var drawCanvas = function drawCanvas(drawCtx, selectionCtx, selectionMode, width, height, activeTool, canvasOffset, shapes, selectedShape) {
+var drawCanvas = function drawCanvas(drawCtx, selectionCtx, selectionMode, canvasSize, activeTool, canvasOffset, shapes, selectedShape) {
+  var width = canvasSize.width,
+      height = canvasSize.height,
+      scaleRatio = canvasSize.scaleRatio;
   drawCtx.clearRect(0, 0, width, height);
   selectionCtx.clearRect(0, 0, width, height);
 
   for (var i = shapes.length - 1; i >= 0; i--) {
     if (selectionMode.mode !== _Mode.SelectionModeLib.textedition || shapes[i] !== selectedShape) {
-      (0, _draw.drawShape)(drawCtx, shapes[i], canvasOffset);
+      (0, _draw.drawShape)(drawCtx, shapes[i], scaleRatio, canvasOffset);
     }
   }
 
   selectedShape && activeTool !== _Shapes.ShapeEnum.brush && (0, _draw.drawSelection)({
     ctx: selectionCtx,
     shape: selectedShape,
+    scaleRatio: scaleRatio,
     canvasOffset: canvasOffset,
     withAnchors: selectionMode.mode !== _Mode.SelectionModeLib.textedition
   });
@@ -87,8 +89,7 @@ var Canvas = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
       canGrow = _ref2.canGrow,
       _ref2$disabled = _ref2.disabled,
       disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
-      width = _ref2.width,
-      height = _ref2.height,
+      canvasSize = _ref2.canvasSize,
       shapes = _ref2.shapes,
       addShape = _ref2.addShape,
       updateSingleShape = _ref2.updateSingleShape,
@@ -115,13 +116,12 @@ var Canvas = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
   var _useDrawableCanvas = (0, _useDrawableCanvas2["default"])({
     disabled: disabled,
     addShape: addShape,
+    canvasSize: canvasSize,
     drawCanvasRef: drawCanvasRef,
     setActiveTool: setActiveTool,
     shapes: shapes,
     defaultConf: defaultConf,
     selectionMode: selectionMode,
-    width: width,
-    height: height,
     activeTool: activeTool,
     isInsideComponent: isInsideComponent,
     setCanvasOffset: setCanvasOffset,
@@ -160,23 +160,26 @@ var Canvas = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
 
     var drawCtx = (_drawCanvasRef$curren2 = drawCanvasRef.current) === null || _drawCanvasRef$curren2 === void 0 ? void 0 : _drawCanvasRef$curren2.getContext('2d');
     var selectionCtx = (_selectionCanvasRef$c = selectionCanvasRef.current) === null || _selectionCanvasRef$c === void 0 ? void 0 : _selectionCanvasRef$c.getContext('2d');
-    drawCtx && selectionCtx && _fp["default"].throttle(_draw2.FRAMERATE_DRAW, drawCanvas)(drawCtx, selectionCtx, selectionMode, width, height, activeTool, canvasOffset, shapes, selectedShape);
-  }, [shapes, selectionMode, selectedShape, activeTool, canvasOffset, width, height]);
+    drawCtx && selectionCtx && window.requestAnimationFrame(function () {
+      return drawCanvas(drawCtx, selectionCtx, selectionMode, canvasSize, activeTool, canvasOffset, shapes, selectedShape);
+    });
+  }, [shapes, selectionMode, selectedShape, activeTool, canvasOffset, canvasSize]);
   return /*#__PURE__*/_react["default"].createElement(StyledCanvasBox, null, /*#__PURE__*/_react["default"].createElement(StyledCanvasContainer, {
     "data-grid": withGrid,
     "data-grow": canGrow
   }, /*#__PURE__*/_react["default"].createElement(StyledDrawCanvas, {
     ref: drawCanvasRef,
     "data-grow": canGrow,
-    width: width,
-    height: height
+    width: canvasSize.width,
+    height: canvasSize.height
   }), /*#__PURE__*/_react["default"].createElement(StyledSelectionCanvas, {
     ref: selectionCanvasRef,
-    width: width,
-    height: height,
+    width: canvasSize.width,
+    height: canvasSize.height,
     "data-grow": canGrow,
     cursor: activeTool !== _Shapes.ToolEnum.selection && activeTool !== _Shapes.ToolEnum.move || hoverMode.mode === _Mode.SelectionModeLib.resize ? 'crosshair' : activeTool === _Shapes.ToolEnum.move || hoverMode.mode === _Mode.SelectionModeLib.translate ? 'move' : hoverMode.mode === _Mode.SelectionModeLib.rotate ? 'grab' : 'default'
   }), selectionMode.mode === _Mode.SelectionModeLib.textedition && (selectedShape === null || selectedShape === void 0 ? void 0 : selectedShape.type) === _Shapes.ShapeEnum.text && /*#__PURE__*/_react["default"].createElement(_EditTextBox["default"], {
+    scaleRatio: canvasSize.scaleRatio,
     disabled: disabled,
     shape: selectedShape,
     defaultValue: selectionMode.defaultValue,

package/dist/components/settings/LayoutButton.js

@@ -21,12 +21,12 @@ var StyleToggleLayoutButton = /*#__PURE__*/(0, _react2.styled)(_Button["default"
 });
 
 var LayoutButton = function LayoutButton(_ref) {
-  var withLayouts = _ref.withLayouts,
+  var layersManipulation = _ref.layersManipulation,
       disabled = _ref.disabled,
       toggleLayoutPanel = _ref.toggleLayoutPanel;
   return /*#__PURE__*/_react["default"].createElement(StyleToggleLayoutButton, {
-    title: "Toggle layout",
-    "data-hidden": +(withLayouts === 'always' || withLayouts === 'never'),
+    title: "Toggle layers panel",
+    "data-hidden": !layersManipulation,
     disabled: disabled,
     onClick: toggleLayoutPanel,
     icon: _icons.layersIcon

package/dist/components/settings/Layouts.js

@@ -133,16 +133,18 @@ var Layout = function Layout(_ref) {
     dangerouslySetInnerHTML: {
       __html: (0, _style.getShapePicture)(shape.type)
     }
-  }), /*#__PURE__*/_react["default"].createElement(StyledSeparator, null), /*#__PURE__*/_react["default"].createElement(StyledVisibleButton, {
+  }), /*#__PURE__*/_react["default"].createElement("span", null, shape.id), /*#__PURE__*/_react["default"].createElement(StyledSeparator, null), /*#__PURE__*/_react["default"].createElement(StyledVisibleButton, {
     title: shape.visible ? 'Hide' : 'Show',
     "data-visible": shape.visible !== false,
     disabled: disabled,
+    selected: selected,
     onClick: onToggleShapeVisibility,
     icon: shape.visible === false ? _icons.visibilityOffIcon : _icons.visibilityIcon
   }), /*#__PURE__*/_react["default"].createElement(StyledLockedButton, {
     title: shape.locked ? 'Locked' : 'Unlocked',
     "data-locked": !!shape.locked,
     disabled: disabled,
+    selected: selected,
     onClick: onToggleShapeLock,
     icon: shape.locked ? _icons.lockedIcon : _icons.unlockedIcon
   }));
@@ -160,7 +162,6 @@ var Layouts = function Layouts(_ref2) {
       selectedShape = _ref2.selectedShape,
       moveShapes = _ref2.moveShapes,
       selectShape = _ref2.selectShape,
-      withLayouts = _ref2.withLayouts,
       isLayoutPanelShown = _ref2.isLayoutPanelShown;
 
   var _useState = (0, _react.useState)(undefined),
@@ -174,22 +175,8 @@ var Layouts = function Layouts(_ref2) {
     });
   };
 
-  return isLayoutPanelShown ? withLayouts === 'always' ? /*#__PURE__*/_react["default"].createElement(StyledLayouts, null, _fp["default"].map(function (shape) {
-    return /*#__PURE__*/_react["default"].createElement(Layout, {
-      key: shape.id,
-      shape: shape,
-      disabled: disabled,
-      layoutDragging: layoutDragging,
-      setLayoutDragging: setLayoutDragging,
-      selected: (selectedShape === null || selectedShape === void 0 ? void 0 : selectedShape.id) === shape.id,
-      handleSelect: selectShape,
-      handleRemove: removeShape,
-      onMoveShapes: moveShapes,
-      toggleShapeVisibility: toggleShapeVisibility,
-      toggleShapeLock: toggleShapeLock
-    });
-  }, shapes)) : /*#__PURE__*/_react["default"].createElement(StyledPanelLayouts, {
-    title: "Layouts",
+  return isLayoutPanelShown ? /*#__PURE__*/_react["default"].createElement(StyledPanelLayouts, {
+    title: "Layers",
     alignment: "right"
   }, /*#__PURE__*/_react["default"].createElement(StyledScrollingContent, null, /*#__PURE__*/_react["default"].createElement(StyledGridButton, {
     title: withGrid ? 'Grid on' : 'Grid off',
@@ -197,7 +184,7 @@ var Layouts = function Layouts(_ref2) {
     disabled: disabled,
     onClick: onToggleGrid,
     icon: withGrid ? _icons.gridOnIcon : _icons.gridOffIcon
-  }, "Toggle grid"), /*#__PURE__*/_react["default"].createElement("hr", null), /*#__PURE__*/_react["default"].createElement(StyledLayouts, null, shapes.length === 0 ? /*#__PURE__*/_react["default"].createElement(StyledPlaceholder, null, "No layout yet") : _fp["default"].map(function (shape) {
+  }, "Toggle grid"), /*#__PURE__*/_react["default"].createElement("hr", null), /*#__PURE__*/_react["default"].createElement(StyledLayouts, null, shapes.length === 0 ? /*#__PURE__*/_react["default"].createElement(StyledPlaceholder, null, "No layer yet") : _fp["default"].map(function (shape) {
     return /*#__PURE__*/_react["default"].createElement(Layout, {
       key: shape.id,
       shape: shape,

package/dist/components/settings/SettingsBar.js

@@ -63,7 +63,7 @@ var SettingsBar = function SettingsBar(_ref) {
 
   var _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      withLayouts = _ref.withLayouts,
+      layersManipulation = _ref.layersManipulation,
       toggleLayoutPanel = _ref.toggleLayoutPanel,
       activeTool = _ref.activeTool,
       selectedShape = _ref.selectedShape,
@@ -251,8 +251,8 @@ var SettingsBar = function SettingsBar(_ref) {
     field: "style.globalAlpha",
     value: (_defaultConf$style7 = defaultConf.style) === null || _defaultConf$style7 === void 0 ? void 0 : _defaultConf$style7.globalAlpha,
     valueChanged: handleShapeStyleChange
-  })), /*#__PURE__*/_react["default"].createElement(StyledSeparator, null), /*#__PURE__*/_react["default"].createElement(_LayoutButton["default"], {
-    withLayouts: withLayouts,
+  })), /*#__PURE__*/_react["default"].createElement(StyledSeparator, null), layersManipulation && /*#__PURE__*/_react["default"].createElement(_LayoutButton["default"], {
+    layersManipulation: layersManipulation,
     disabled: disabled,
     toggleLayoutPanel: toggleLayoutPanel
   }));

package/dist/components/toolbox/EditTextBox.js

@@ -53,6 +53,7 @@ var EditTextBox = function EditTextBox(_ref5) {
 
   var _ref5$disabled = _ref5.disabled,
       disabled = _ref5$disabled === void 0 ? false : _ref5$disabled,
+      scaleRatio = _ref5.scaleRatio,
       shape = _ref5.shape,
       defaultValue = _ref5.defaultValue,
       updateValue = _ref5.updateValue;
@@ -76,8 +77,8 @@ var EditTextBox = function EditTextBox(_ref5) {
   }, [shape]);
   return /*#__PURE__*/_react["default"].createElement(StyledEditBox, {
     ref: ref,
-    transform: "translate3D(".concat(position[0], "px, ").concat(position[1], "px, 0) rotate(").concat((0, _transform.radiansToDegrees)(shape.rotation), "deg)"),
-    fontsize: shape.fontSize,
+    transform: "translate3D(".concat(position[0] * scaleRatio, "px, ").concat(position[1] * scaleRatio, "px, 0) rotate(").concat((0, _transform.radiansToDegrees)(shape.rotation), "deg)"),
+    fontsize: shape.fontSize * scaleRatio,
     color: (_shape$style$strokeCo = (_shape$style = shape.style) === null || _shape$style === void 0 ? void 0 : _shape$style.strokeColor) !== null && _shape$style$strokeCo !== void 0 ? _shape$style$strokeCo : 'inherit',
     fontfamily: (_shape$style$fontFami = (_shape$style2 = shape.style) === null || _shape$style2 === void 0 ? void 0 : _shape$style2.fontFamily) !== null && _shape$style$fontFami !== void 0 ? _shape$style$fontFami : _style.STYLE_FONT_DEFAULT,
     contentEditable: !disabled,

package/dist/components/toolbox/MenuGroup.js

@@ -117,6 +117,7 @@ var MenuGroup = function MenuGroup(_ref) {
       document.addEventListener('click', closePanel);
     }, 0);
     return function () {
+      clearTimeout(timeoutId);
       document.removeEventListener('click', closePanel);
     };
   }, [isOpen]);

package/dist/components/toolbox/PictureUrlInput.js

@@ -36,7 +36,7 @@ var PictureUrlModal = function PictureUrlModal(_ref) {
   var pictureUrlInputRef = (0, _react.useRef)(null);
 
   var addPictureFromUrl = /*#__PURE__*/function () {
-    var _ref2 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var _ref2 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(e) {
       var _pictureUrlInputRef$c;
 
       var url;
@@ -44,23 +44,24 @@ var PictureUrlModal = function PictureUrlModal(_ref) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
+              e.preventDefault();
               url = (_pictureUrlInputRef$c = pictureUrlInputRef.current) === null || _pictureUrlInputRef$c === void 0 ? void 0 : _pictureUrlInputRef$c.value;
 
               if (!url) {
-                _context.next = 5;
+                _context.next = 6;
                 break;
               }
 
-              _context.next = 4;
+              _context.next = 5;
               return addPicture(url);
 
-            case 4:
+            case 5:
               togglePictureUrlModal();
 
-            case 5:
+            case 6:
               return _context.abrupt("return");
 
-            case 6:
+            case 7:
             case "end":
               return _context.stop();
           }
@@ -68,7 +69,7 @@ var PictureUrlModal = function PictureUrlModal(_ref) {
       }, _callee);
     }));
 
-    return function addPictureFromUrl() {
+    return function addPictureFromUrl(_x) {
       return _ref2.apply(this, arguments);
     };
   }();

package/dist/hooks/useDrawableCanvas.js

@@ -23,23 +23,21 @@ var _Mode = require("../types/Mode");
 
 var _transform = require("../utils/transform");
 
-var _draw = require("../constants/draw");
-
 var _data = require("../utils/data");
 
-var handleMove = function handleMove(e, canvasRef, activeTool, canvasOffset, selectedShape, selectionMode, canvasOffsetStartPosition, width, height, setHoverMode, updateSingleShape, setCanvasOffset, setSelectedShape) {
+var handleMove = function handleMove(e, canvasRef, activeTool, canvasOffset, selectedShape, selectionMode, canvasOffsetStartPosition, width, height, scaleRatio, setHoverMode, updateSingleShape, setCanvasOffset, setSelectedShape) {
   if (activeTool === _Shapes.ToolEnum.move && canvasOffsetStartPosition !== undefined) {
-    var _cursorPosition = (0, _intersect.getCursorPosition)(e, canvasRef.current, width, height);
+    var _cursorPosition = (0, _intersect.getCursorPosition)(e, canvasRef.current, width, height, scaleRatio);
 
     setCanvasOffset([_cursorPosition[0] - canvasOffsetStartPosition[0], _cursorPosition[1] - canvasOffsetStartPosition[1]]);
   }
 
   if (selectedShape == undefined) return;
   if (selectedShape.locked) return;
-  var cursorPosition = (0, _intersect.getCursorPosition)(e, canvasRef.current, width, height);
+  var cursorPosition = (0, _intersect.getCursorPosition)(e, canvasRef.current, width, height, scaleRatio);
 
   if (selectionMode.mode === _Mode.SelectionModeLib["default"]) {
-    var positionIntersection = (0, _intersect.checkPositionIntersection)(selectedShape, cursorPosition, canvasOffset, true) || {
+    var positionIntersection = (0, _intersect.checkPositionIntersection)(selectedShape, cursorPosition, canvasOffset, scaleRatio, true) || {
       mode: _Mode.SelectionModeLib["default"]
     };
     setHoverMode(positionIntersection);
@@ -60,13 +58,12 @@ var useDrawableCanvas = function useDrawableCanvas(_ref) {
   var _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       addShape = _ref.addShape,
+      canvasSize = _ref.canvasSize,
       drawCanvasRef = _ref.drawCanvasRef,
       setActiveTool = _ref.setActiveTool,
       shapes = _ref.shapes,
       defaultConf = _ref.defaultConf,
       selectionMode = _ref.selectionMode,
-      width = _ref.width,
-      height = _ref.height,
       activeTool = _ref.activeTool,
       isInsideComponent = _ref.isInsideComponent,
       setCanvasOffset = _ref.setCanvasOffset,
@@ -79,6 +76,9 @@ var useDrawableCanvas = function useDrawableCanvas(_ref) {
       canvasOffset = _ref.canvasOffset,
       saveShapes = _ref.saveShapes,
       setSelectionMode = _ref.setSelectionMode;
+  var width = canvasSize.width,
+      height = canvasSize.height,
+      scaleRatio = canvasSize.scaleRatio;
 
   var _useState = (0, _react.useState)({
     mode: _Mode.SelectionModeLib["default"]
@@ -89,7 +89,9 @@ var useDrawableCanvas = function useDrawableCanvas(_ref) {
 
   (0, _react.useEffect)(function () {
     var handleMouseMove = function handleMouseMove(e) {
-      return _fp["default"].throttle(_draw.FRAMERATE_SELECTION, handleMove)(e, selectionCanvasRef, activeTool, canvasOffset, selectedShape, selectionMode, canvasOffsetStartPosition, width, height, setHoverMode, updateSingleShape, setCanvasOffset, setSelectedShape);
+      return window.requestAnimationFrame(function () {
+        return handleMove(e, selectionCanvasRef, activeTool, canvasOffset, selectedShape, selectionMode, canvasOffsetStartPosition, width, height, scaleRatio, setHoverMode, updateSingleShape, setCanvasOffset, setSelectedShape);
+      });
     };
 
     if (isInsideComponent) {
@@ -103,7 +105,7 @@ var useDrawableCanvas = function useDrawableCanvas(_ref) {
         document.removeEventListener('touchmove', handleMouseMove);
       }
     };
-  }, [isInsideComponent, selectionCanvasRef, selectedShape, selectionMode, setHoverMode, canvasOffset, canvasOffsetStartPosition, width, height, updateSingleShape, activeTool, setCanvasOffset, setSelectedShape]);
+  }, [isInsideComponent, selectionCanvasRef, selectedShape, selectionMode, setHoverMode, canvasOffset, canvasOffsetStartPosition, width, height, scaleRatio, updateSingleShape, activeTool, setCanvasOffset, setSelectedShape]);
   (0, _react.useEffect)(function () {
     var handleMouseUp = function handleMouseUp(e) {
       if (selectionMode.mode === _Mode.SelectionModeLib.textedition) return;
@@ -111,7 +113,7 @@ var useDrawableCanvas = function useDrawableCanvas(_ref) {
       if (activeTool === _Shapes.ShapeEnum.text) {
         var _drawCanvasRef$curren;
 
-        var cursorPosition = (0, _intersect.getCursorPosition)(e, selectionCanvasRef.current, width, height);
+        var cursorPosition = (0, _intersect.getCursorPosition)(e, selectionCanvasRef.current, width, height, scaleRatio);
         var drawCtx = (_drawCanvasRef$curren = drawCanvasRef.current) === null || _drawCanvasRef$curren === void 0 ? void 0 : _drawCanvasRef$curren.getContext('2d');
         if (!drawCtx) return;
 
@@ -146,7 +148,7 @@ var useDrawableCanvas = function useDrawableCanvas(_ref) {
         document.removeEventListener('touchend', handleMouseUp);
       }
     };
-  }, [isInsideComponent, selectionCanvasRef, drawCanvasRef, selectionMode, saveShapes, activeTool, addShape, defaultConf, width, height, setActiveTool, setSelectedShape, setSelectionMode]);
+  }, [isInsideComponent, selectionCanvasRef, drawCanvasRef, selectionMode, saveShapes, activeTool, addShape, defaultConf, width, height, scaleRatio, setActiveTool, setSelectedShape, setSelectionMode]);
   (0, _react.useEffect)(function () {
     var ref = selectionCanvasRef.current;
     if (!ref) return;
@@ -154,10 +156,10 @@ var useDrawableCanvas = function useDrawableCanvas(_ref) {
 
     var handleMouseDown = function handleMouseDown(e) {
       e.preventDefault();
-      var cursorPosition = (0, _intersect.getCursorPosition)(e, selectionCanvasRef.current, width, height);
+      var cursorPosition = (0, _intersect.getCursorPosition)(e, selectionCanvasRef.current, width, height, scaleRatio);
 
       if (activeTool === _Shapes.ToolEnum.selection) {
-        var _selectShape = (0, _selection.selectShape)(shapes, cursorPosition, canvasOffset, selectedShape),
+        var _selectShape = (0, _selection.selectShape)(shapes, cursorPosition, scaleRatio, canvasOffset, selectedShape),
             shape = _selectShape.shape,
             mode = _selectShape.mode;
 
@@ -211,7 +213,7 @@ var useDrawableCanvas = function useDrawableCanvas(_ref) {
       ref.removeEventListener('mousedown', handleMouseDown);
       ref.removeEventListener('touchstart', handleMouseDown);
     };
-  }, [disabled, selectionCanvasRef, drawCanvasRef, selectedShape, activeTool, canvasOffset, setCanvasOffsetStartPosition, shapes, defaultConf, width, height, updateSingleShape, addShape, setActiveTool, setSelectedShape, setSelectionMode]);
+  }, [disabled, selectionCanvasRef, drawCanvasRef, selectedShape, activeTool, canvasOffset, setCanvasOffsetStartPosition, shapes, defaultConf, width, height, scaleRatio, updateSingleShape, addShape, setActiveTool, setSelectedShape, setSelectionMode]);
   (0, _react.useEffect)(function () {
     var ref = selectionCanvasRef.current;
     if (!ref) return;
@@ -219,7 +221,7 @@ var useDrawableCanvas = function useDrawableCanvas(_ref) {
     var handleDoubleClick = function handleDoubleClick(e) {
       if (activeTool === _Shapes.ToolEnum.selection) {
         if ((selectedShape === null || selectedShape === void 0 ? void 0 : selectedShape.type) === _Shapes.ShapeEnum.text) {
-          var cursorPosition = (0, _intersect.getCursorPosition)(e, selectionCanvasRef.current, width, height);
+          var cursorPosition = (0, _intersect.getCursorPosition)(e, selectionCanvasRef.current, width, height, scaleRatio);
 
           if ((0, _intersect.checkPositionIntersection)(selectedShape, cursorPosition, canvasOffset)) {
             setSelectionMode({
@@ -240,7 +242,7 @@ var useDrawableCanvas = function useDrawableCanvas(_ref) {
         ref.removeEventListener('dblclick', handleDoubleClick);
       }
     };
-  }, [isInsideComponent, selectionCanvasRef, activeTool, selectedShape, width, height, canvasOffset, setSelectionMode]);
+  }, [isInsideComponent, selectionCanvasRef, activeTool, selectedShape, width, height, scaleRatio, canvasOffset, setSelectionMode]);
   return {
     hoverMode: hoverMode
   };

package/dist/hooks/useResizeObserver.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _fp = _interopRequireDefault(require("lodash/fp"));
+
+var _react = require("react");
+
+var useResizeObserver = function useResizeObserver(_ref) {
+  var onResized = _ref.onResized,
+      element = _ref.element;
+  (0, _react.useEffect)(function () {
+    var current = element.current;
+    if (!current) return;
+    var resizeObserver = new ResizeObserver(function (entries) {
+      var _ref2 = _fp["default"].get('0.borderBoxSize', entries) ? _fp["default"].flow(_fp["default"].get('0.borderBoxSize'), _fp["default"].castArray, _fp["default"].first, function (el) {
+        return {
+          width: _fp["default"].get('inlineSize', el),
+          height: _fp["default"].get('blockSize', el)
+        };
+      })(entries) : _fp["default"].get('0.contentRect', entries),
+          width = _ref2.width,
+          height = _ref2.height;
+
+      onResized(width, height);
+    });
+    resizeObserver.observe(current);
+    return function () {
+      resizeObserver.unobserve(current);
+    };
+  }, [element, onResized]);
+};
+
+var _default = useResizeObserver;
+exports["default"] = _default;

package/dist/hooks/useShapes.js

@@ -24,6 +24,8 @@ var _data = require("../utils/data");
 var useShapes = function useShapes() {
   var onDataChanged = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _fp["default"].noop;
   var shapesRef = (0, _react.useRef)([]);
+  var onDataChangedRef = (0, _react.useRef)(onDataChanged);
+  onDataChangedRef.current = onDataChanged;
 
   var _useState = (0, _react.useState)(undefined),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -60,23 +62,25 @@ var useShapes = function useShapes() {
   }, []);
   var addPictureShape = (0, _react.useCallback)( /*#__PURE__*/function () {
     var _ref = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(fileOrUrl) {
-      var maxSize,
+      var maxWidth,
+          maxHeight,
           pictureShape,
           _args = arguments;
       return _regenerator["default"].wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
-              maxSize = _args.length > 1 && _args[1] !== undefined ? _args[1] : 300;
-              _context.next = 3;
-              return (0, _data.createPicture)(fileOrUrl, maxSize);
+              maxWidth = _args.length > 1 && _args[1] !== undefined ? _args[1] : 300;
+              maxHeight = _args.length > 2 && _args[2] !== undefined ? _args[2] : 300;
+              _context.next = 4;
+              return (0, _data.createPicture)(fileOrUrl, maxWidth, maxHeight);
 
-            case 3:
+            case 4:
               pictureShape = _context.sent;
               addShape(pictureShape);
               return _context.abrupt("return", pictureShape);
 
-            case 6:
+            case 7:
             case "end":
               return _context.stop();
           }
@@ -202,8 +206,8 @@ var useShapes = function useShapes() {
     updateShapes(_fp["default"].set(shapeIndex, newShape, shapes));
   }, [updateShapes]);
   (0, _react.useEffect)(function () {
-    onDataChanged();
-  }, [onDataChanged, savedShapes]);
+    onDataChangedRef.current();
+  }, [savedShapes]);
   return {
     shapesRef: shapesRef,
     selectedShape: selectedShape,

package/dist/styles.css

@@ -1,33 +1,32 @@
-body {
+#react-paint-root {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
     'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
   background: #F3F3F3;
+
 }
 
-.examples {
+#react-paint-root .examples {
   display: flex;
 }
 
-.menu {
+#react-paint-root .menu {
   width: 250px;
   min-width: 0;
   display: flex;
   flex-direction: column;
 }
 
-.menu a {
+#react-paint-root .menu a {
   margin: 8px;
   padding: 4px;
 }
 
-.menu a.selected {
+#react-paint-root .menu a.selected {
   color: green;
 }
 
-.currentApp {
+#react-paint-root .currentApp {
   flex: 1;
   min-width: 0;
 }
@@ -41,28 +40,28 @@ body {
 .sst453j{width:100%;box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:2px 6px;}
 .s1q5lsc2{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
 .s1dis2j8{-webkit-flex:1;-ms-flex:1;flex:1;text-align:left;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.s1dis2j8 + .s1q5lsc2{margin-left:12px;}
-.s1xzg253{position:absolute;z-index:3;background:var(--bg-color);bottom:100%;box-shadow:0 3px 8px rgb(0 0 0 / 24%);padding:4px;border-radius:8px;white-space:nowrap;}.s1xzg253[data-alignment='left']{left:0;margin:4px;}.s1xzg253[data-alignment='center']{left:50%;-webkit-transform:translate3d(-50%,0px,0px);-ms-transform:translate3d(-50%,0px,0px);transform:translate3d(-50%,0px,0px);margin:4px 0px;}.s1xzg253[data-alignment='right']{right:0;margin:4px;}
+.s1xzg253{position:absolute;z-index:3;background:var(--bg-color);bottom:100%;box-shadow:0 3px 8px rgb(0 0 0 / 24%);padding:8px;border-radius:8px;white-space:nowrap;}.s1xzg253[data-alignment='left']{left:0;margin:4px;}.s1xzg253[data-alignment='center']{left:50%;-webkit-transform:translate3d(-50%,0px,0px);-ms-transform:translate3d(-50%,0px,0px);transform:translate3d(-50%,0px,0px);margin:4px 0px;}.s1xzg253[data-alignment='right']{right:0;margin:4px;}
 .s17qj3jh{margin-bottom:8px;margin-top:4px;font-size:18px;}
 .su3a8bs{display:inline-block;background:var(--bg-color);box-sizing:border-box;overflow-y:auto;min-width:200px;}
-.szboplp{border:3px solid transparent;padding:4px 0px;position:relative;background:var(--bg-color);box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}.szboplp[data-is-over='1']{border:3px dotted var(--btn-hover);}.szboplp[data-is-dragging='1']{opacity:0.4;}.szboplp[data-selected='1']{color:var(--text-color-selected);border:3px solid var(--bg-color-selected);}.szboplp[data-selected='0'][data-disabled='0']:hover{background:var(--btn-hover);}.szboplp[data-disabled='1']{opacity:0.25;cursor:default;}.szboplp[data-disabled='0']{cursor:move;}.szboplp > span{height:20px;}.szboplp > span > svg{fill:#8a8a8a;width:20px;height:20px;padding:0 16px;}
+.szboplp{border:3px solid transparent;padding:4px 0px;position:relative;background:var(--bg-color);box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}.szboplp[data-is-over='1']{border:3px dotted var(--btn-hover);}.szboplp[data-is-dragging='1']{opacity:0.4;}.szboplp[data-selected='1']{color:var(--text-color-selected);background:var(--bg-color-selected);}.szboplp[data-selected='0'][data-disabled='0']:hover{background:var(--btn-hover);}.szboplp[data-disabled='1']{opacity:0.25;cursor:default;}.szboplp[data-disabled='0']{cursor:move;}.szboplp > span{height:20px;}.szboplp > span > svg{fill:#8a8a8a;width:20px;height:20px;padding:0 16px;}
 .sff5xt[data-visible='false']{opacity:0.2;}
 .sj3bift[data-locked='false']{opacity:0.2;}
 .s10ip0a4[data-grid='false'] svg{opacity:0.2;}
 .s1j9uq9o{-webkit-flex:1;-ms-flex:1;flex:1;}
 .s156ddbb{bottom:0;left:unset;top:unset;max-height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
-.s11gt4hl{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;overflow-y:auto;}.s11gt4hl hr{opacity:0.6;width:100%;border:none;border-top:1px solid var(--text-color);}
+.s11gt4hl{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;overflow-y:auto;}
 .s13cxqhq{opacity:0.6;text-align:center;padding:12px 0px;}
 .s1bvz4xj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;bottom:unset;top:100%;}.s1bvz4xj[data-vertical='1']{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
 .siejlch{position:relative;display:inline-block;}
 .s1uphjfh{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;bottom:unset;top:100%;}.s1uphjfh[data-vertical='1']{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.s1uphjfh hr{width:100%;border:none;border-top:1px solid var(--text-color);opacity:0.6;}
 .s1e5a6k5{position:relative;display:inline-block;}
 .s1c8tp02{z-index:3;position:absolute;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;left:0;right:0;bottom:0;top:0;}
-.svkxpz4{display:grid;background:var(--bg-color);box-shadow:0 3px 8px rgb(0 0 0 / 24%);padding:4px;border-radius:8px;white-space:nowrap;position:relative;}
+.svkxpz4{display:grid;background:var(--bg-color);box-shadow:0 3px 8px rgb(0 0 0 / 24%);padding:12px;border-radius:8px;white-space:nowrap;position:relative;}
 .s1s9jyyg{position:absolute;left:0;top:0;right:0;bottom:0;background:#00000073;}
 .s95bkm9 form{grid-template-columns:3fr 1fr 1fr;}.s95bkm9 form input{color:var(--text-color);border:2px solid var(--text-color);outline:none;}
 .so6hnjf{-webkit-flex:1;-ms-flex:1;flex:1;position:relative;height:100%;text-align:center;max-height:72px;}
-.s1c1dllr{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;max-height:36px;background:var(--bg-color);}
-.s1g032mh{display:inline-block;text-align:left;background:var(--bg-color);margin-right:36px;text-align:right;}.s1g032mh + *{position:absolute;right:0;bottom:36px;}
+.s1c1dllr{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;max-height:36px;background:var(--bg-color);border-bottom:1px solid var(--border-color);box-sizing:border-box;}
+.s1g032mh{display:inline-block;text-align:left;margin-right:36px;text-align:right;}.s1g032mh + *{position:absolute;right:0;bottom:36px;}
 .s4owjrv{grid-template-columns:1fr 1fr 1fr;}
 .snh2jyk{width:24px;height:24px;box-sizing:border-box;border-radius:50%;border:1px solid gray;background:var(--snh2jyk-0);background-repeat:repeat;background-size:16px;}
 .sfm1cqx{width:36px;height:36px;box-sizing:border-box;border-radius:50%;color:var(--sfm1cqx-0);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:baseline;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;font-size:48px;line-height:36px;position:relative;bottom:6px;font-weight:bold;}
@@ -77,12 +76,12 @@ body {
 .s1xxj4yl{position:absolute;left:0;top:50%;-webkit-transform:translate3d(-25%,-50%,0px);-ms-transform:translate3d(-25%,-50%,0px);transform:translate3d(-25%,-50%,0px);display:inline-block;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:15px solid black;}
 .sbd6jc8{position:absolute;right:0;top:50%;-webkit-transform:translate3d(25%,-50%,0px);-ms-transform:translate3d(25%,-50%,0px);transform:translate3d(25%,-50%,0px);display:inline-block;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:15px solid black;}
 .scawaat{position:relative;display:inline-block;width:60px;height:2px;background:black;vertical-align:middle;}.scawaat[data-type='0'] .s1xxj4yl,.scawaat[data-type='1'] .s1xxj4yl{display:none;}.scawaat[data-type='0'] .sbd6jc8,.scawaat[data-type='2'] .sbd6jc8{display:none;}
-.s16z54di{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;background:var(--bg-color);position:relative;}
+.s16z54di{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;background:var(--bg-color);position:relative;height:36px;border-top:1px solid var(--border-color);box-sizing:border-box;}
 .sa7lzh9{-webkit-flex:1;-ms-flex:1;flex:1;}
 .s1xssqat{display:inline-block;padding:12px 48px;margin:4px;max-width:calc(100% - 24px);overflow-wrap:break-word;box-sizing:border-box;-webkit-transition:all 500ms;transition:all 500ms;opacity:0;-webkit-transform:translate3d(0px,40px,0px);-ms-transform:translate3d(0px,40px,0px);transform:translate3d(0px,40px,0px);}.s1xssqat[data-type='0']{background:#646464;color:white;}.s1xssqat[data-type='1']{background:#c3a200;color:black;}.s1xssqat[data-type='2']{background:#911717;color:white;}.s1xssqat[data-type='3']{background:#088900;color:white;}.s1xssqat[data-is-shown='1']{opacity:1;-webkit-transform:translate3d(0px,0px,0px);-ms-transform:translate3d(0px,0px,0px);transform:translate3d(0px,0px,0px);}.s1xssqat[data-is-shown='0']{opacity:0;-webkit-transform:translate3d(0px,40px,0px);-ms-transform:translate3d(0px,40px,0px);transform:translate3d(0px,40px,0px);}
 .s1bgtt22{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;position:absolute;z-index:4;bottom:0;left:0;right:0;height:0px;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
 .s9j48u3{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:absolute;z-index:2;top:0;bottom:0;left:0;right:0;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:#00000050;-webkit-transition:opacity 300ms linear;transition:opacity 300ms linear;opacity:0;}.s9j48u3[data-loading='visible']{opacity:1;}
-.s4auclc{width:40px;height:40px;position:relative;-webkit-transform:rotate(10deg);-ms-transform:rotate(10deg);transform:rotate(10deg);-webkit-animation:react-paint-editor-rotation-s4auclc 1s infinite;animation:react-paint-editor-rotation-s4auclc 1s infinite;}@-webkit-keyframes react-paint-editor-rotation-s4auclc{from{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes react-paint-editor-rotation-s4auclc{from{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}
+.s4auclc{width:40px;height:40px;position:relative;-webkit-transform:rotate(10deg);-ms-transform:rotate(10deg);transform:rotate(10deg);-webkit-animation:react-paint-rotation-s4auclc 1s infinite;animation:react-paint-rotation-s4auclc 1s infinite;}@-webkit-keyframes react-paint-rotation-s4auclc{from{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes react-paint-rotation-s4auclc{from{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}
 .s1l3fbq{border-radius:50%;position:absolute;width:15px;height:15px;}.s1l3fbq:nth-child(1){left:0;background-color:#5c6bc0;}.s1l3fbq:nth-child(2){right:0;background-color:#8bc34a;}.s1l3fbq:nth-child(3){bottom:0;background-color:#ffb74d;}.s1l3fbq:nth-child(4){bottom:0;right:0;background-color:#f44336;}
-.s1v9piyg{--bg-color:white;--text-color:#364181;--btn-hover:#afd8d8;--bg-color-selected:#364181;--text-color-selected:white;--shrinkedcanvas-bg-color:white;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;color:var(--text-color);position:relative;overflow:hidden;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.s1v9piyg[data-grow='false']{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;max-width:var(--s1v9piyg-0);}.s1v9piyg[data-shrink='false']{min-width:var(--s1v9piyg-1);}
+.s1v9piyg{--bg-color:white;--text-color:#364181;--btn-hover:#afd8d8;--bg-color-selected:#364181;--text-color-selected:white;--shrinkedcanvas-bg-color:white;--border-color:#36418129;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;color:var(--text-color);position:relative;overflow:hidden;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.s1v9piyg hr{width:100%;border:none;border-top:1px solid var(--border-color);}.s1v9piyg[data-grow='false']{max-width:var(--s1v9piyg-0);}.s1v9piyg[data-shrink='false']{min-width:var(--s1v9piyg-1);}
 .s6o5tmu{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;position:relative;max-width:100%;z-index:1;aspect-ratio:var(--s6o5tmu-2);}.layoutPanelOpened .s6o5tmu{background:var(--shrinkedcanvas-bg-color);}.s6o5tmu[data-grow='true']{width:100%;}.s6o5tmu[data-grow='false']{width:var(--s6o5tmu-1);}