@yorab/react-paint 0.4.0 → 0.5.0

package/README.md

@@ -4,6 +4,7 @@
 
 - Text tool broken since 0.2.2
 - double click not working with touch (fix: fake it counting delay between touch)
+- selected style not saved when changing tool (since presets)
 
 ## mobile/touch
 

package/dist/components/App.js

@@ -19,10 +19,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _fp = _interopRequireDefault(require("lodash/fp"));
-
-var _Shapes = require("../types/Shapes");
-
 var _Canvas = _interopRequireDefault(require("./Canvas"));
 
 var _Layouts = _interopRequireDefault(require("./settings/Layouts"));
@@ -59,6 +55,10 @@ var _useResizeObserver = _interopRequireDefault(require("../hooks/useResizeObser
 
 var _shapes = require("../constants/shapes");
 
+var _toolbar = require("../utils/toolbar");
+
+var _tools = require("../constants/tools");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -69,49 +69,49 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 var StyledApp = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledApp",
-  "class": "s1v9piyg",
+  "class": "sdhgr8u",
   vars: {
-    "s1v9piyg-0": [function (props) {
+    "sdhgr8u-0": [function (props) {
       return props.toolbarBackgroundColor;
     }],
-    "s1v9piyg-1": [function (props) {
+    "sdhgr8u-1": [function (props) {
       return props.dividerColor;
     }],
-    "s1v9piyg-2": [function (props) {
+    "sdhgr8u-2": [function (props) {
       return props.fontRadius;
     }, "px"],
-    "s1v9piyg-3": [function (props) {
+    "sdhgr8u-3": [function (props) {
       return props.fontDisabledColor;
     }],
-    "s1v9piyg-4": [function (props) {
+    "sdhgr8u-4": [function (props) {
       return props.fontDisabledBackgroundColor;
     }],
-    "s1v9piyg-5": [function (props) {
+    "sdhgr8u-5": [function (props) {
       return props.fontColor;
     }],
-    "s1v9piyg-6": [function (props) {
+    "sdhgr8u-6": [function (props) {
       return props.fontBackgroundColor;
     }],
-    "s1v9piyg-7": [function (props) {
+    "sdhgr8u-7": [function (props) {
       return props.fontSelectedColor;
     }],
-    "s1v9piyg-8": [function (props) {
+    "sdhgr8u-8": [function (props) {
       return props.fontSelectedBackgroundColor;
     }],
-    "s1v9piyg-9": [function (props) {
+    "sdhgr8u-9": [function (props) {
       return props.fontHoverColor;
     }],
-    "s1v9piyg-10": [function (props) {
+    "sdhgr8u-10": [function (props) {
       return props.fontHoverBackgroundColor;
     }],
-    "s1v9piyg-11": [function (props) {
+    "sdhgr8u-11": [function (props) {
       return props.canvasBackgroundColor;
     }],
-    "s1v9piyg-12": [function (_ref) {
+    "sdhgr8u-12": [function (_ref) {
       var canvasWidth = _ref.canvasWidth;
       return "min(100%, ".concat(canvasWidth, "px)");
     }],
-    "s1v9piyg-13": [function (_ref2) {
+    "sdhgr8u-13": [function (_ref2) {
       var canvasWidth = _ref2.canvasWidth;
       return canvasWidth;
     }, "px"]
@@ -119,19 +119,18 @@ var StyledApp = /*#__PURE__*/(0, _react2.styled)("div")({
 });
 var StyledRow = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledRow",
-  "class": "s6o5tmu",
+  "class": "sm24hcl",
   vars: {
-    "s6o5tmu-1": [function (_ref3) {
+    "sm24hcl-1": [function (_ref3) {
       var width = _ref3.width;
       return width;
     }, "px"],
-    "s6o5tmu-2": [function (_ref4) {
+    "sm24hcl-2": [function (_ref4) {
       var aspectRatio = _ref4.aspectRatio;
       return aspectRatio;
     }]
   }
 });
-var DEFAULT_TOOLS = [_Shapes.ShapeEnum.brush, _Shapes.ShapeEnum.line, _Shapes.ShapeEnum.polygon, _Shapes.ShapeEnum.curve, _Shapes.ShapeEnum.rect, _Shapes.ShapeEnum.square, _Shapes.ShapeEnum.circle, _Shapes.ShapeEnum.ellipse, _Shapes.ShapeEnum.text, _Shapes.ShapeEnum.picture];
 var DEFAULT_OPTIONS = {
   layersManipulation: true,
   gridVisible: false,
@@ -139,7 +138,9 @@ var DEFAULT_OPTIONS = {
   canShrink: true,
   withExport: true,
   withLoadAndSave: true,
-  availableTools: DEFAULT_TOOLS,
+  withUploadPicture: true,
+  withUrlPicture: false,
+  availableTools: _tools.DEFAULT_SHAPE_TOOLS,
   uiStyle: {
     toolbarBackgroundColor: 'white',
     dividerColor: '#36418129',
@@ -183,6 +184,8 @@ var App = function App(_ref5) {
       canShrink = _DEFAULT_OPTIONS$opti.canShrink,
       withExport = _DEFAULT_OPTIONS$opti.withExport,
       withLoadAndSave = _DEFAULT_OPTIONS$opti.withLoadAndSave,
+      withUploadPicture = _DEFAULT_OPTIONS$opti.withUploadPicture,
+      withUrlPicture = _DEFAULT_OPTIONS$opti.withUrlPicture,
       availableToolsFromProps = _DEFAULT_OPTIONS$opti.availableTools;
 
   var _DEFAULT_OPTIONS$uiSt = _objectSpread(_objectSpread({}, DEFAULT_OPTIONS.uiStyle), (_options$uiStyle = options === null || options === void 0 ? void 0 : options.uiStyle) !== null && _options$uiStyle !== void 0 ? _options$uiStyle : {}),
@@ -216,7 +219,7 @@ var App = function App(_ref5) {
       canvasSize = _useState2[0],
       setCanvasSize = _useState2[1];
 
-  var availableTools = _fp["default"].intersection(DEFAULT_TOOLS, availableToolsFromProps);
+  var availableTools = (0, _toolbar.sanitizeTools)(availableToolsFromProps, withUploadPicture || withUrlPicture);
 
   var _useComponent = (0, _useComponent2["default"])({
     disabled: disabled,
@@ -224,58 +227,42 @@ var App = function App(_ref5) {
   }),
       isInsideComponent = _useComponent.isInsideComponent;
 
-  var _useState3 = (0, _react.useState)({
-    style: {
-      fillColor: 'transparent',
-      strokeColor: 'black',
-      globalAlpha: 100,
-      lineWidth: 1,
-      lineDash: 0,
-      lineArrow: 0,
-      pointsCount: 3,
-      fontFamily: _style.STYLE_FONT_DEFAULT
-    }
-  }),
+  var _useState3 = (0, _react.useState)(false),
       _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-      defaultConf = _useState4[0],
-      setDefaultConf = _useState4[1];
+      isLoading = _useState4[0],
+      setIsLoading = _useState4[1];
 
   var _useState5 = (0, _react.useState)(false),
       _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-      isLoading = _useState6[0],
-      setIsLoading = _useState6[1];
+      isLayoutPanelShown = _useState6[0],
+      setIsLayoutPanelShown = _useState6[1];
 
-  var _useState7 = (0, _react.useState)(false),
+  var _useState7 = (0, _react.useState)([0, 0]),
       _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-      isLayoutPanelShown = _useState8[0],
-      setIsLayoutPanelShown = _useState8[1];
+      canvasOffset = _useState8[0],
+      setCanvasOffset = _useState8[1];
 
-  var _useState9 = (0, _react.useState)([0, 0]),
+  var _useState9 = (0, _react.useState)(undefined),
       _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
-      canvasOffset = _useState10[0],
-      setCanvasOffset = _useState10[1];
+      canvasOffsetStartPosition = _useState10[0],
+      setCanvasOffsetStartPosition = _useState10[1];
 
-  var _useState11 = (0, _react.useState)(undefined),
+  var _useState11 = (0, _react.useState)(_tools.SELECTION_TOOL),
       _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
-      canvasOffsetStartPosition = _useState12[0],
-      setCanvasOffsetStartPosition = _useState12[1];
+      activeTool = _useState12[0],
+      setActiveTool = _useState12[1];
 
-  var _useState13 = (0, _react.useState)(_Shapes.ToolEnum.selection),
-      _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
-      activeTool = _useState14[0],
-      setActiveTool = _useState14[1];
-
-  var _useState15 = (0, _react.useState)({
+  var _useState13 = (0, _react.useState)({
     mode: _Mode.SelectionModeLib["default"]
   }),
-      _useState16 = (0, _slicedToArray2["default"])(_useState15, 2),
-      selectionMode = _useState16[0],
-      setSelectionMode = _useState16[1];
+      _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
+      selectionMode = _useState14[0],
+      setSelectionMode = _useState14[1];
 
-  var _useState17 = (0, _react.useState)(gridVisible),
-      _useState18 = (0, _slicedToArray2["default"])(_useState17, 2),
-      withGrid = _useState18[0],
-      setWithGrid = _useState18[1];
+  var _useState15 = (0, _react.useState)(gridVisible),
+      _useState16 = (0, _slicedToArray2["default"])(_useState15, 2),
+      withGrid = _useState16[0],
+      setWithGrid = _useState16[1];
 
   var _useShapes = (0, _useShapes2["default"])(onDataChanged),
       shapesRef = _useShapes.shapesRef,
@@ -305,22 +292,22 @@ var App = function App(_ref5) {
     setActiveTool(tool);
   }, [setSelectedShape]);
   var undoAction = (0, _react.useCallback)(function () {
-    selectTool(_Shapes.ToolEnum.selection);
+    selectTool(_tools.SELECTION_TOOL);
     backwardShape();
   }, [selectTool, backwardShape]);
   var redoAction = (0, _react.useCallback)(function () {
-    selectTool(_Shapes.ToolEnum.selection);
+    selectTool(_tools.SELECTION_TOOL);
     forwardShape();
   }, [selectTool, forwardShape]);
   var clearCanvas = (0, _react.useCallback)(function () {
     var shapesToInit = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
     var clearHistory = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     clearShapes(shapesToInit, clearHistory);
-    selectTool(_Shapes.ToolEnum.selection);
+    selectTool(_tools.SELECTION_TOOL);
     setCanvasOffset([0, 0]);
   }, [selectTool, clearShapes]);
   var selectShape = (0, _react.useCallback)(function (shape) {
-    setActiveTool(_Shapes.ToolEnum.selection);
+    setActiveTool(_tools.SELECTION_TOOL);
     setSelectedShape(shape);
   }, [setSelectedShape]);
   var pasteShape = (0, _react.useCallback)(function (shape) {
@@ -568,6 +555,7 @@ var App = function App(_ref5) {
     fontHoverBackgroundColor: fontHoverBackgroundColor,
     canvasBackgroundColor: canvasBackgroundColor
   }, isEditMode && /*#__PURE__*/_react["default"].createElement(_Toolbar["default"], {
+    width: canvasSize.width,
     disabled: disabled,
     activeTool: activeTool,
     clearCanvas: clearCanvas,
@@ -583,7 +571,9 @@ var App = function App(_ref5) {
     redoAction: redoAction,
     availableTools: availableTools,
     withExport: withExport,
-    withLoadAndSave: withLoadAndSave
+    withLoadAndSave: withLoadAndSave,
+    withUploadPicture: withUploadPicture,
+    withUrlPicture: withUrlPicture
   }), /*#__PURE__*/_react["default"].createElement(StyledRow, {
     "data-grow": canGrow,
     width: canvasSize.width,
@@ -604,7 +594,6 @@ var App = function App(_ref5) {
     setSelectedShape: setSelectedShape,
     canvasOffset: canvasOffset,
     setCanvasOffset: setCanvasOffset,
-    defaultConf: defaultConf,
     saveShapes: saveShapes,
     ref: canvasRef,
     canvasSize: canvasSize,
@@ -612,7 +601,8 @@ var App = function App(_ref5) {
     setSelectionMode: setSelectionMode,
     selectionColor: canvasSelectionColor,
     selectionWidth: canvasSelectionWidth,
-    selectionPadding: canvasSelectionPadding
+    selectionPadding: canvasSelectionPadding,
+    isEditMode: isEditMode
   }), isEditMode && layersManipulation && /*#__PURE__*/_react["default"].createElement(_Layouts["default"], {
     withGrid: withGrid,
     setWithGrid: setWithGrid,
@@ -628,11 +618,10 @@ var App = function App(_ref5) {
   })), isEditMode && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_SettingsBar["default"], {
     disabled: disabled,
     activeTool: activeTool,
+    availableTools: availableTools,
     selectedShape: selectedShape,
     removeShape: removeShape,
     updateShape: updateShape,
-    defaultConf: defaultConf,
-    setDefaultConf: setDefaultConf,
     canvas: canvasRef.current,
     layersManipulation: layersManipulation,
     toggleLayoutPanel: function toggleLayoutPanel() {

package/dist/components/Canvas.js

@@ -31,6 +31,8 @@ var _useDrawableCanvas2 = _interopRequireDefault(require("../hooks/useDrawableCa
 
 var _icons = require("../constants/icons");
 
+var _tools = require("../types/tools");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -39,20 +41,25 @@ 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, canvasSize, activeTool, canvasOffset, shapes, selectionPadding, selectionWidth, selectionColor, selectedShape) {
+var renderDrawCanvas = function renderDrawCanvas(drawCtx, selectionMode, canvasSize, canvasOffset, shapes, selectionPadding, 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], scaleRatio, canvasOffset, selectionPadding);
     }
   }
+};
 
-  selectedShape && activeTool !== _Shapes.ShapeEnum.brush && (0, _draw.drawSelection)({
+var renderSelectionCanvas = function renderSelectionCanvas(selectionCtx, selectionMode, canvasSize, activeTool, canvasOffset, selectionPadding, selectionWidth, selectionColor, selectedShape) {
+  var width = canvasSize.width,
+      height = canvasSize.height,
+      scaleRatio = canvasSize.scaleRatio;
+  selectionCtx.clearRect(0, 0, width, height);
+  selectedShape && activeTool.type !== _Shapes.ShapeEnum.brush && (0, _draw.drawSelection)({
     ctx: selectionCtx,
     shape: selectedShape,
     scaleRatio: scaleRatio,
@@ -66,21 +73,21 @@ var drawCanvas = function drawCanvas(drawCtx, selectionCtx, selectionMode, canva
 
 var StyledCanvasBox = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledCanvasBox",
-  "class": "s9czb9p"
+  "class": "s14cny8z"
 });
 var StyledCanvasContainer = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledCanvasContainer",
-  "class": "s1538eht"
+  "class": "s16bxms6"
 });
 var StyledDrawCanvas = /*#__PURE__*/(0, _react2.styled)("canvas")({
   name: "StyledDrawCanvas",
-  "class": "s101qxdc"
+  "class": "spzzsat"
 });
 var StyledSelectionCanvas = /*#__PURE__*/(0, _react2.styled)("canvas")({
   name: "StyledSelectionCanvas",
-  "class": "sa4oq48",
+  "class": "s1egrskk",
   vars: {
-    "sa4oq48-0": [function (_ref) {
+    "s1egrskk-0": [function (_ref) {
       var cursor = _ref.cursor;
       return cursor;
     }]
@@ -105,13 +112,13 @@ var Canvas = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
       setCanvasOffsetStartPosition = _ref2.setCanvasOffsetStartPosition,
       canvasOffset = _ref2.canvasOffset,
       setCanvasOffset = _ref2.setCanvasOffset,
-      defaultConf = _ref2.defaultConf,
       isInsideComponent = _ref2.isInsideComponent,
       selectionMode = _ref2.selectionMode,
       setSelectionMode = _ref2.setSelectionMode,
       selectionWidth = _ref2.selectionWidth,
       selectionColor = _ref2.selectionColor,
-      selectionPadding = _ref2.selectionPadding;
+      selectionPadding = _ref2.selectionPadding,
+      isEditMode = _ref2.isEditMode;
   var drawCanvasRef = (0, _react.useRef)(null);
   var selectionCanvasRef = (0, _react.useRef)(null); // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 
@@ -126,7 +133,6 @@ var Canvas = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
     drawCanvasRef: drawCanvasRef,
     setActiveTool: setActiveTool,
     shapes: shapes,
-    defaultConf: defaultConf,
     selectionMode: selectionMode,
     activeTool: activeTool,
     isInsideComponent: isInsideComponent,
@@ -163,14 +169,21 @@ var Canvas = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
     updateSingleShape(resizedShape);
   }, [updateSingleShape, selectedShape]);
   (0, _react.useEffect)(function () {
-    var _drawCanvasRef$curren2, _selectionCanvasRef$c;
+    var _drawCanvasRef$curren2;
 
     var drawCtx = (_drawCanvasRef$curren2 = drawCanvasRef.current) === null || _drawCanvasRef$curren2 === void 0 ? void 0 : _drawCanvasRef$curren2.getContext('2d');
+    drawCtx && window.requestAnimationFrame(function () {
+      return renderDrawCanvas(drawCtx, selectionMode, canvasSize, canvasOffset, shapes, selectionPadding, selectedShape);
+    });
+  }, [shapes, selectionMode, selectedShape, canvasOffset, canvasSize, selectionPadding]);
+  (0, _react.useEffect)(function () {
+    var _selectionCanvasRef$c;
+
     var selectionCtx = (_selectionCanvasRef$c = selectionCanvasRef.current) === null || _selectionCanvasRef$c === void 0 ? void 0 : _selectionCanvasRef$c.getContext('2d');
-    drawCtx && selectionCtx && window.requestAnimationFrame(function () {
-      return drawCanvas(drawCtx, selectionCtx, selectionMode, canvasSize, activeTool, canvasOffset, shapes, selectionPadding, selectionWidth, selectionColor, selectedShape);
+    selectionCtx && window.requestAnimationFrame(function () {
+      return renderSelectionCanvas(selectionCtx, selectionMode, canvasSize, activeTool, canvasOffset, selectionPadding, selectionWidth, selectionColor, selectedShape);
     });
-  }, [shapes, selectionMode, selectedShape, activeTool, canvasOffset, canvasSize, selectionPadding, selectionWidth, selectionColor]);
+  }, [selectionMode, selectedShape, activeTool, canvasOffset, canvasSize, selectionPadding, selectionWidth, selectionColor]);
   return /*#__PURE__*/_react["default"].createElement(StyledCanvasBox, null, /*#__PURE__*/_react["default"].createElement(StyledCanvasContainer, {
     "data-grid": withGrid,
     "data-grow": canGrow
@@ -179,13 +192,13 @@ var Canvas = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
     "data-grow": canGrow,
     width: canvasSize.width,
     height: canvasSize.height
-  }), /*#__PURE__*/_react["default"].createElement(StyledSelectionCanvas, {
+  }), isEditMode && /*#__PURE__*/_react["default"].createElement(StyledSelectionCanvas, {
     ref: selectionCanvasRef,
     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"], {
+    cursor: activeTool.type !== _tools.ActionsEnum.selection && activeTool.type !== _tools.ActionsEnum.move || hoverMode.mode === _Mode.SelectionModeLib.resize ? 'crosshair' : activeTool.type === _tools.ActionsEnum.move || hoverMode.mode === _Mode.SelectionModeLib.translate ? 'move' : hoverMode.mode === _Mode.SelectionModeLib.rotate ? 'grab' : 'default'
+  }), isEditMode && 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,

package/dist/components/common/Button.js

@@ -19,19 +19,19 @@ var _excluded = ["hidden", "disabled", "selected", "icon", "children", "classNam
     _excluded2 = ["hidden", "disabled", "selected", "icon", "children", "type"];
 var StyledButton = /*#__PURE__*/(0, _react2.styled)("button")({
   name: "StyledButton",
-  "class": "sq3bzv4"
+  "class": "sc6yefj"
 });
 var StyledButtonContent = /*#__PURE__*/(0, _react2.styled)("span")({
   name: "StyledButtonContent",
-  "class": "sst453j"
+  "class": "s2aizej"
 });
 var StyledIcon = /*#__PURE__*/(0, _react2.styled)("span")({
   name: "StyledIcon",
-  "class": "s1q5lsc2"
+  "class": "s13rkw3s"
 });
 var StyledChildren = /*#__PURE__*/(0, _react2.styled)("span")({
   name: "StyledChildren",
-  "class": "s1dis2j8"
+  "class": "s1qkcrgj"
 });
 
 var Button = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {

package/dist/components/common/Loading.js

@@ -24,15 +24,15 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var TRANSITION_DURATION = 300;
 var StyledLoading = /*#__PURE__*/(0, _react.styled)("div")({
   name: "StyledLoading",
-  "class": "s9j48u3"
+  "class": "s15r7ba"
 });
 var StyledLoader = /*#__PURE__*/(0, _react.styled)("div")({
   name: "StyledLoader",
-  "class": "s4auclc"
+  "class": "s19n4ela"
 });
 var StyledShape = /*#__PURE__*/(0, _react.styled)("div")({
   name: "StyledShape",
-  "class": "s1l3fbq"
+  "class": "ssemdwq"
 });
 
 var Loading = function Loading(_ref) {

package/dist/components/common/Modal.js

@@ -15,15 +15,15 @@ var _style = require("../../constants/style");
 
 var StyledModal = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledModal",
-  "class": "s1c8tp02"
+  "class": "s1hezj2d"
 });
 var StyledPanel = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledPanel",
-  "class": "svkxpz4"
+  "class": "spuj31h"
 });
 var StyledMask = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledMask",
-  "class": "s1s9jyyg"
+  "class": "s1ulcd40"
 });
 
 var Modal = function Modal(_ref) {

package/dist/components/common/Panel.js

@@ -19,11 +19,11 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var StyledPanel = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledPanel",
-  "class": "s1xzg253"
+  "class": "s2dsyaf"
 });
 var StyledTitle = /*#__PURE__*/(0, _react2.styled)("h3")({
   name: "StyledTitle",
-  "class": "s17qj3jh"
+  "class": "s1f032bv"
 });
 
 var Panel = function Panel(_ref) {

package/dist/components/common/Snackbar.js

@@ -27,11 +27,11 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var StyledSnackbar = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledSnackbar",
-  "class": "s1xssqat"
+  "class": "s1xg1lj6"
 });
 var StyledSnackbarContainer = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledSnackbarContainer",
-  "class": "s1bgtt22"
+  "class": "sg1lk71"
 });
 
 var Snackbar = function Snackbar(_ref) {

package/dist/components/settings/ColorField.js

@@ -21,8 +21,6 @@ var _Button = _interopRequireDefault(require("../common/Button"));
 
 var _Panel = _interopRequireDefault(require("../common/Panel"));
 
-var _style = require("../../constants/style");
-
 var _icons = require("../../constants/icons");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -31,9 +29,9 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var StyledColor = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledColor",
-  "class": "snh2jyk",
+  "class": "s1dqu4j7",
   vars: {
-    "snh2jyk-0": [function (_ref) {
+    "s1dqu4j7-0": [function (_ref) {
       var color = _ref.color;
       return color;
     }]
@@ -41,18 +39,14 @@ var StyledColor = /*#__PURE__*/(0, _react2.styled)("div")({
 });
 var StyledCustomColor = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledCustomColor",
-  "class": "sfm1cqx",
+  "class": "s1j0ldko",
   vars: {
-    "sfm1cqx-0": [function (_ref2) {
+    "s1j0ldko-0": [function (_ref2) {
       var color = _ref2.color;
       return color;
     }]
   }
 });
-var StyledColorButton = /*#__PURE__*/(0, _react2.styled)(_Button["default"])({
-  name: "StyledColorButton",
-  "class": "sttf061"
-});
 
 var ColorField = function ColorField(_ref3) {
   var selectedSettings = _ref3.selectedSettings,
@@ -61,6 +55,7 @@ var ColorField = function ColorField(_ref3) {
       title = _ref3$title === void 0 ? 'Choisissez une couleur' : _ref3$title,
       _ref3$disabled = _ref3.disabled,
       disabled = _ref3$disabled === void 0 ? false : _ref3$disabled,
+      values = _ref3.values,
       field = _ref3.field,
       _ref3$value = _ref3.value,
       value = _ref3$value === void 0 ? '' : _ref3$value,
@@ -87,6 +82,7 @@ var ColorField = function ColorField(_ref3) {
   };
 
   var isPanelVisible = selectedSettings === customKey;
+  if (_fp["default"].isEmpty(values)) return null;
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
     selected: isPanelVisible,
     title: title,
@@ -97,8 +93,8 @@ var ColorField = function ColorField(_ref3) {
   })), isPanelVisible && /*#__PURE__*/_react["default"].createElement(_Panel["default"], {
     title: title,
     alignment: "left"
-  }, /*#__PURE__*/_react["default"].createElement("div", null, _style.STYLE_COLORS.map(function (color, index) {
-    return /*#__PURE__*/_react["default"].createElement(StyledColorButton, {
+  }, /*#__PURE__*/_react["default"].createElement("div", null, values.map(function (color, index) {
+    return /*#__PURE__*/_react["default"].createElement(_Button["default"], {
       title: color,
       key: index,
       selected: color === value,
@@ -109,14 +105,14 @@ var ColorField = function ColorField(_ref3) {
     }, /*#__PURE__*/_react["default"].createElement(StyledColor, {
       color: color === 'transparent' ? "url('data:image/svg+xml,".concat(_icons.encodedTransparentIcon, "')") : color
     }));
-  }), /*#__PURE__*/_react["default"].createElement(StyledColorButton, {
+  }), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
     type: "color",
     title: "Custom color",
-    selected: !_fp["default"].includes(value, _style.STYLE_COLORS),
+    selected: !_fp["default"].includes(value, values),
     value: value,
     onChange: handleChange
   }, /*#__PURE__*/_react["default"].createElement(StyledCustomColor, {
-    color: _fp["default"].includes(value, _style.STYLE_COLORS) ? 'black' : value
+    color: _fp["default"].includes(value, values) ? 'var(--font-color)' : value
   }, /*#__PURE__*/_react["default"].createElement("span", {
     dangerouslySetInnerHTML: {
       __html: _icons.paletteIcon

package/dist/components/settings/FontFamilyField.js

@@ -11,15 +11,15 @@ var _react = _interopRequireDefault(require("react"));
 
 var _SelectField = _interopRequireDefault(require("./SelectField"));
 
-var _style = require("../../constants/style");
-
 var _react2 = require("@linaria/react");
 
+var _fp = _interopRequireDefault(require("lodash/fp"));
+
 var StyledOption = /*#__PURE__*/(0, _react2.styled)("span")({
   name: "StyledOption",
-  "class": "smpmxx5",
+  "class": "s16o63ah",
   vars: {
-    "smpmxx5-0": [function (_ref) {
+    "s16o63ah-0": [function (_ref) {
       var family = _ref.family;
       return family;
     }]
@@ -38,8 +38,10 @@ var FontFamilyField = function FontFamilyField(_ref3) {
       setSelectedSettings = _ref3.setSelectedSettings,
       _ref3$disabled = _ref3.disabled,
       disabled = _ref3$disabled === void 0 ? false : _ref3$disabled,
+      values = _ref3.values,
       defaultValue = _ref3.defaultValue,
       valueChanged = _ref3.valueChanged;
+  if (_fp["default"].isEmpty(values)) return null;
   return /*#__PURE__*/_react["default"].createElement(_SelectField["default"], {
     selectedSettings: selectedSettings,
     setSelectedSettings: setSelectedSettings,
@@ -47,7 +49,7 @@ var FontFamilyField = function FontFamilyField(_ref3) {
     title: "Font",
     disabled: disabled,
     field: "style.fontFamily",
-    values: _style.STYLE_FONTS,
+    values: values,
     defaultValue: defaultValue,
     valueChanged: valueChanged
   });