@arbisoft/react-design-tool 1.0.19 → 1.0.21

package/README.md

@@ -36,7 +36,7 @@ yarn add @arbisoft/react-design-tool
 #### ⚠️ Important: Installation Guide for React 18 and Below
 
 ```bash
-npm install @arbisoft/react-design-tool@1.0.19
+npm install @arbisoft/react-design-tool@1.0.21
 ```
 OR
 ```bash

package/dist/cjs/index.js

@@ -961,7 +961,7 @@ var COLLAPSE$6 = "Collapse";
 var TEXT$6 = "Text";
 var STROKE_WIDTH_AND_COLOR$6 = "Stroke Width & Color";
 var NEW_TEMPLATE$6 = "New Template";
-var CUSTOM_TEMPLATES$6 = "Custom Templates";
+var CUSTOM_TEMPLATES$6 = "My Designs";
 var PAGE_SIZE$6 = "Page size";
 var BACKGROUND_COLOR$6 = "Background Color";
 var BACKGROUND_IMAGE$6 = "Background Image";
@@ -1090,7 +1090,7 @@ var COLLAPSE$5 = "Свернуть";
 var TEXT$5 = "Текст";
 var STROKE_WIDTH_AND_COLOR$5 = "Толщина и цвет обводки";
 var NEW_TEMPLATE$5 = "Новый шаблон";
-var CUSTOM_TEMPLATES$5 = "Пользовательские шаблоны";
+var CUSTOM_TEMPLATES$5 = "Мои дизайны";
 var PAGE_SIZE$5 = "Размер страницы";
 var BACKGROUND_COLOR$5 = "Цвет фона";
 var BACKGROUND_IMAGE$5 = "Фоновое изображение";
@@ -1219,7 +1219,7 @@ var COLLAPSE$4 = "Zwiń";
 var TEXT$4 = "Tekst";
 var STROKE_WIDTH_AND_COLOR$4 = "Szerokość i kolor obramowania";
 var NEW_TEMPLATE$4 = "Nowy szablon";
-var CUSTOM_TEMPLATES$4 = "Niestandardowe szablony";
+var CUSTOM_TEMPLATES$4 = "Moje projekty";
 var PAGE_SIZE$4 = "Rozmiar strony";
 var BACKGROUND_COLOR$4 = "Kolor tła";
 var BACKGROUND_IMAGE$4 = "Obraz tła";
@@ -1348,7 +1348,7 @@ var COLLAPSE$3 = "Einklappen";
 var TEXT$3 = "Text";
 var STROKE_WIDTH_AND_COLOR$3 = "Strichbreite und -farbe";
 var NEW_TEMPLATE$3 = "Neue Vorlage";
-var CUSTOM_TEMPLATES$3 = "Benutzerdefinierte Vorlagen";
+var CUSTOM_TEMPLATES$3 = "Meine Designs";
 var PAGE_SIZE$3 = "Seitengröße";
 var BACKGROUND_COLOR$3 = "Hintergrundfarbe";
 var BACKGROUND_IMAGE$3 = "Hintergrundbild";
@@ -1477,7 +1477,7 @@ var COLLAPSE$2 = "Colapsar";
 var TEXT$2 = "Texto";
 var STROKE_WIDTH_AND_COLOR$2 = "Grosor y color del trazo";
 var NEW_TEMPLATE$2 = "Nueva plantilla";
-var CUSTOM_TEMPLATES$2 = "Plantillas personalizadas";
+var CUSTOM_TEMPLATES$2 = "Mis diseños";
 var PAGE_SIZE$2 = "Tamaño de página";
 var BACKGROUND_COLOR$2 = "Color de fondo";
 var BACKGROUND_IMAGE$2 = "Imagen de fondo";
@@ -1606,7 +1606,7 @@ var COLLAPSE$1 = "Réduire";
 var TEXT$1 = "Texte";
 var STROKE_WIDTH_AND_COLOR$1 = "Largeur et couleur du trait";
 var NEW_TEMPLATE$1 = "Nouveau modèle";
-var CUSTOM_TEMPLATES$1 = "Modèles personnalisés";
+var CUSTOM_TEMPLATES$1 = "Mes créations";
 var PAGE_SIZE$1 = "Taille de page";
 var BACKGROUND_COLOR$1 = "Couleur d’arrière-plan";
 var BACKGROUND_IMAGE$1 = "Image d’arrière-plan";
@@ -1735,7 +1735,7 @@ var COLLAPSE = "Comprimi";
 var TEXT = "Testo";
 var STROKE_WIDTH_AND_COLOR = "Spessore e colore del tratto";
 var NEW_TEMPLATE = "Nuovo modello";
-var CUSTOM_TEMPLATES = "Modelli personalizzati";
+var CUSTOM_TEMPLATES = "I miei progetti";
 var PAGE_SIZE = "Dimensione della pagina";
 var BACKGROUND_COLOR = "Colore di sfondo";
 var BACKGROUND_IMAGE = "Immagine di sfondo";
@@ -5375,7 +5375,7 @@ var TemplateSideBar = function TemplateSideBar(_ref) {
   }), /*#__PURE__*/React.createElement(Collapsable, {
     title: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang2 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang2 === void 0 ? void 0 : _TEXT_DICTIONARY$lang2.DEFAULT,
     content: renderDefaultContent
-  }), /*#__PURE__*/React.createElement(Collapsable, {
+  }), customTemplatesList.length > 0 && /*#__PURE__*/React.createElement(Collapsable, {
     title: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang3 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang3 === void 0 ? void 0 : _TEXT_DICTIONARY$lang3.CUSTOM_TEMPLATES,
     content: renderCustomContent
   }));
@@ -5935,110 +5935,132 @@ var Studio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$locale = _ref.locale,
     locale = _ref$locale === void 0 ? 'en' : _ref$locale;
   var stageRef = React.useRef(null);
-  var _useState = React.useState(sideBarpillsList.template),
+  var _useState = React.useState(null),
     _useState2 = _slicedToArray(_useState, 2),
-    selectedTab = _useState2[0],
-    setSelectedTab = _useState2[1];
-  var _useState3 = React.useState(validateLocale(locale)),
+    copiedElement = _useState2[0],
+    setCopiedElement = _useState2[1];
+  var _useState3 = React.useState(sideBarpillsList.template),
     _useState4 = _slicedToArray(_useState3, 2),
-    languageLocale = _useState4[0],
-    setLanguageLocale = _useState4[1];
-  var _useState5 = React.useState(true),
+    selectedTab = _useState4[0],
+    setSelectedTab = _useState4[1];
+  var _useState5 = React.useState(validateLocale(locale)),
     _useState6 = _slicedToArray(_useState5, 2),
-    loadingFonts = _useState6[0],
-    setLoadingFonts = _useState6[1];
+    languageLocale = _useState6[0],
+    setLanguageLocale = _useState6[1];
   var _useState7 = React.useState(true),
     _useState8 = _slicedToArray(_useState7, 2),
-    loadingImages = _useState8[0],
-    setLoadingImages = _useState8[1];
-  var _useState9 = React.useState(false),
+    loadingFonts = _useState8[0],
+    setLoadingFonts = _useState8[1];
+  var _useState9 = React.useState(true),
     _useState10 = _slicedToArray(_useState9, 2),
-    loading = _useState10[0],
-    setLoading = _useState10[1];
+    loadingImages = _useState10[0],
+    setLoadingImages = _useState10[1];
   var _useState11 = React.useState(false),
     _useState12 = _slicedToArray(_useState11, 2),
-    loadingUploadImage = _useState12[0],
-    setLoadingUploadImage = _useState12[1];
-  var _useState13 = React.useState(true),
+    loading = _useState12[0],
+    setLoading = _useState12[1];
+  var _useState13 = React.useState(false),
     _useState14 = _slicedToArray(_useState13, 2),
-    helperSideBarVisible = _useState14[0],
-    setHelperSideBarVisible = _useState14[1];
-  var _useState15 = React.useState(100),
+    loadingUploadImage = _useState14[0],
+    setLoadingUploadImage = _useState14[1];
+  var _useState15 = React.useState(true),
     _useState16 = _slicedToArray(_useState15, 2),
-    zoomPercentage = _useState16[0],
-    setZoomPercentage = _useState16[1];
-  var _useState17 = React.useState(elementsList),
+    helperSideBarVisible = _useState16[0],
+    setHelperSideBarVisible = _useState16[1];
+  var _useState17 = React.useState(100),
     _useState18 = _slicedToArray(_useState17, 2),
-    elements = _useState18[0],
-    setElements = _useState18[1];
-  var _useState19 = React.useState(1),
+    zoomPercentage = _useState18[0],
+    setZoomPercentage = _useState18[1];
+  var _useState19 = React.useState(elementsList),
     _useState20 = _slicedToArray(_useState19, 2),
-    backgroundImageOpacity = _useState20[0],
-    setBackgroundImageOpacity = _useState20[1];
-  var _useState21 = React.useState([]),
+    elements = _useState20[0],
+    setElements = _useState20[1];
+  var _useState21 = React.useState(1),
     _useState22 = _slicedToArray(_useState21, 2),
-    history = _useState22[0],
-    setHistory = _useState22[1];
+    backgroundImageOpacity = _useState22[0],
+    setBackgroundImageOpacity = _useState22[1];
   var _useState23 = React.useState([]),
     _useState24 = _slicedToArray(_useState23, 2),
-    redoStack = _useState24[0],
-    setRedoStack = _useState24[1];
-  var _useState25 = React.useState(theme.color.white),
+    history = _useState24[0],
+    setHistory = _useState24[1];
+  var _useState25 = React.useState([]),
     _useState26 = _slicedToArray(_useState25, 2),
-    shapeFillColor = _useState26[0],
-    setShapeFillColor = _useState26[1];
-  var _useState27 = React.useState(1),
+    redoStack = _useState26[0],
+    setRedoStack = _useState26[1];
+  var _useState27 = React.useState(theme.color.white),
     _useState28 = _slicedToArray(_useState27, 2),
-    shapeStrokeWidth = _useState28[0],
-    setShapeStrokeWidth = _useState28[1];
-  var _useState29 = React.useState(theme.color.black),
+    shapeFillColor = _useState28[0],
+    setShapeFillColor = _useState28[1];
+  var _useState29 = React.useState(1),
     _useState30 = _slicedToArray(_useState29, 2),
-    shapeStrokeColor = _useState30[0],
-    setShapeStrokeColor = _useState30[1];
-  var _useState31 = React.useState(1),
+    shapeStrokeWidth = _useState30[0],
+    setShapeStrokeWidth = _useState30[1];
+  var _useState31 = React.useState(theme.color.black),
     _useState32 = _slicedToArray(_useState31, 2),
-    shapeOpacity = _useState32[0],
-    setShapeOpacity = _useState32[1];
-  var _useState33 = React.useState(0),
+    shapeStrokeColor = _useState32[0],
+    setShapeStrokeColor = _useState32[1];
+  var _useState33 = React.useState(1),
     _useState34 = _slicedToArray(_useState33, 2),
-    imageStrokeWidth = _useState34[0],
-    setImageStrokeWidth = _useState34[1];
-  var _useState35 = React.useState(theme.color.black),
+    shapeOpacity = _useState34[0],
+    setShapeOpacity = _useState34[1];
+  var _useState35 = React.useState(0),
     _useState36 = _slicedToArray(_useState35, 2),
-    imageStrokeColor = _useState36[0],
-    setImageStrokeColor = _useState36[1];
-  var _useState37 = React.useState(1),
+    imageStrokeWidth = _useState36[0],
+    setImageStrokeWidth = _useState36[1];
+  var _useState37 = React.useState(theme.color.black),
     _useState38 = _slicedToArray(_useState37, 2),
-    imageOpacity = _useState38[0],
-    setImageOpacity = _useState38[1];
-  var _useState39 = React.useState(2),
+    imageStrokeColor = _useState38[0],
+    setImageStrokeColor = _useState38[1];
+  var _useState39 = React.useState(1),
     _useState40 = _slicedToArray(_useState39, 2),
-    qrStrokeWidth = _useState40[0],
-    setQrStrokeWidth = _useState40[1];
-  var _useState41 = React.useState(theme.color.black),
+    imageOpacity = _useState40[0],
+    setImageOpacity = _useState40[1];
+  var _useState41 = React.useState(2),
     _useState42 = _slicedToArray(_useState41, 2),
-    qrStrokeColor = _useState42[0],
-    setQrStrokeColor = _useState42[1];
-  var _useState43 = React.useState(1),
+    qrStrokeWidth = _useState42[0],
+    setQrStrokeWidth = _useState42[1];
+  var _useState43 = React.useState(theme.color.black),
     _useState44 = _slicedToArray(_useState43, 2),
-    qrOpacity = _useState44[0],
-    setQrOpacity = _useState44[1];
-  var _useState45 = React.useState(null),
+    qrStrokeColor = _useState44[0],
+    setQrStrokeColor = _useState44[1];
+  var _useState45 = React.useState(1),
     _useState46 = _slicedToArray(_useState45, 2),
-    selectedElement = _useState46[0],
-    setSelectedElement = _useState46[1];
-  var _useState47 = React.useState(customImages || []),
+    qrOpacity = _useState46[0],
+    setQrOpacity = _useState46[1];
+  var _useState47 = React.useState(null),
     _useState48 = _slicedToArray(_useState47, 2),
-    customImagesList = _useState48[0],
-    setCustomImagesList = _useState48[1];
-  var _useState49 = React.useState(null),
+    selectedElement = _useState48[0],
+    setSelectedElement = _useState48[1];
+  var _useState49 = React.useState(customImages || []),
     _useState50 = _slicedToArray(_useState49, 2),
-    qrLogo = _useState50[0],
-    setQrLogo = _useState50[1];
-  var _useState51 = React.useState(basicTextProps),
+    customImagesList = _useState50[0],
+    setCustomImagesList = _useState50[1];
+  var _useState51 = React.useState(null),
     _useState52 = _slicedToArray(_useState51, 2),
-    defaultTextProps = _useState52[0],
-    setDefaultTextProps = _useState52[1];
+    qrLogo = _useState52[0],
+    setQrLogo = _useState52[1];
+  var _useState53 = React.useState(basicTextProps),
+    _useState54 = _slicedToArray(_useState53, 2),
+    defaultTextProps = _useState54[0],
+    setDefaultTextProps = _useState54[1];
+  var undo = React.useCallback(function () {
+    if (history.length > 0) {
+      setSelectedElement(null);
+      var previousState = history[history.length - 1];
+      setRedoStack([elements].concat(_toConsumableArray(redoStack)));
+      setHistory(history.slice(0, -1));
+      setElements(previousState);
+    }
+  }, [history, elements, redoStack, setRedoStack, setHistory, setElements]);
+  var redo = React.useCallback(function () {
+    if (redoStack.length > 0) {
+      setSelectedElement(null);
+      var nextState = redoStack[0];
+      setHistory([].concat(_toConsumableArray(history), [elements]));
+      setRedoStack(redoStack.slice(1));
+      setElements(nextState);
+    }
+  }, [history, elements, redoStack, setHistory, setRedoStack, setElements]);
   React.useImperativeHandle(ref, function () {
     return {
       onSave: function () {
@@ -6078,6 +6100,61 @@ var Studio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       }()
     };
   });
+  React.useEffect(function () {
+    var handleKeyDown = function handleKeyDown(e) {
+      var isMac = navigator.platform.toUpperCase().includes('MAC');
+      var ctrlOrCmd = isMac ? e.metaKey : e.ctrlKey;
+      var shiftKey = e.shiftKey;
+
+      // Delete
+      if ((e.key === 'Delete' || e.key === 'Backspace') && selectedElement && (selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.draggable) !== false && !['INPUT', 'TEXTAREA'].includes(document.activeElement.tagName) && !document.activeElement.isContentEditable) {
+        e.preventDefault();
+        onDeleteSelectedElement();
+      }
+
+      // Copy
+      if (ctrlOrCmd && e.key.toLowerCase() === 'c') {
+        if (selectedElement) {
+          e.preventDefault();
+          var copied = _objectSpread2({}, selectedElement);
+          delete copied.ref;
+          setCopiedElement(copied);
+        }
+      }
+
+      // Paste
+      if (ctrlOrCmd && e.key.toLowerCase() === 'v') {
+        if (copiedElement) {
+          e.preventDefault();
+          var newElement = _objectSpread2(_objectSpread2({}, copiedElement), {}, {
+            id: "element".concat(Date.now()),
+            x: copiedElement.x + 10,
+            y: copiedElement.y + 10,
+            draggable: true
+          });
+          addElement(newElement);
+          setSelectedElement(newElement);
+        }
+      }
+
+      // Undo: Ctrl/Cmd + Z
+      if (ctrlOrCmd && !shiftKey && e.key.toLowerCase() === 'z') {
+        e.preventDefault();
+        undo();
+      }
+
+      // Redo: Ctrl/Cmd + Shift + Z or Ctrl + Y
+      if (ctrlOrCmd && shiftKey && e.key.toLowerCase() === 'z' || ctrlOrCmd && e.key.toLowerCase() === 'y') {
+        e.preventDefault();
+        redo();
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return function () {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [selectedElement, copiedElement, undo, redo]);
+
   // console.log(isPropValid('onClick'));
   React.useEffect(function () {
     setLanguageLocale(validateLocale(locale));
@@ -6324,27 +6401,6 @@ var Studio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }
     setBackgroundImageOpacity(val);
   };
-  var undo = React.useCallback(function () {
-    if (history.length > 0) {
-      // if (history.length === 1) {
-      //     setSelectedElement(null);
-      // }
-      setSelectedElement(null);
-      var previousState = history[history.length - 1];
-      setRedoStack([elements].concat(_toConsumableArray(redoStack)));
-      setHistory(history.slice(0, -1));
-      setElements(previousState);
-    }
-  }, [history, elements, redoStack, setRedoStack, setHistory, setElements]);
-  var redo = React.useCallback(function () {
-    if (redoStack.length > 0) {
-      setSelectedElement(null);
-      var nextState = redoStack[0];
-      setHistory([].concat(_toConsumableArray(history), [elements]));
-      setRedoStack(redoStack.slice(1));
-      setElements(nextState);
-    }
-  }, [history, elements, redoStack, setHistory, setRedoStack, setElements]);
   var onSelectElement = function onSelectElement(element) {
     if (isElementShape(element)) {
       setSelectedTab(sideBarpillsList === null || sideBarpillsList === void 0 ? void 0 : sideBarpillsList.shape);
@@ -6444,7 +6500,22 @@ var Studio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     saveHistory(_toConsumableArray(copyElements));
   };
   var createNewTemplate = function createNewTemplate() {
-    var elems = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _toConsumableArray(defaultElements);
+    var elems = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [].concat(_toConsumableArray(defaultElements), [{
+      type: elementTypes.qr,
+      id: "element".concat(Date.now() + 1),
+      width: 110,
+      height: 110,
+      x: 194.5,
+      y: 280,
+      fill: theme.color.green_80D965,
+      stroke: theme.color.black,
+      strokeWidth: 2,
+      draggable: true,
+      qrLogo: null,
+      qrText: qrLink,
+      opacity: 1,
+      logoVisible: false
+    }]);
     setElements(_toConsumableArray(elems));
     setHistory([]);
     setRedoStack([]);