@threedddplus/logoeditor 0.0.29 → 0.0.30

package/dist/components/Rightmenu/imageEdit.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-export declare const ImageEdit: ({ flipX, flipY, changeSVGColor, activeSelection, }: {
+export declare const ImageEdit: ({ flipX, flipY, changeSVGTextColor, allColor, }: {
     flipX: any;
     flipY: any;
-    changeSVGColor: any;
-    activeSelection: any;
+    changeSVGTextColor: any;
+    allColor: any;
 }) => React.JSX.Element;

package/dist/logoeditor.cjs.development.js

@@ -2056,6 +2056,7 @@ var fabricSlice = function fabricSlice(set, get) {
     activeSelection: null,
     selectedAll: false,
     colorFill: {},
+    defaultColorFill: [],
     // colorFillPopup : {},
     storeAllObject: [],
     iconImage: '',
@@ -2170,6 +2171,11 @@ var fabricSlice = function fabricSlice(set, get) {
       });
       return canvasData;
     },
+    setDefaultColorFill: function setDefaultColorFill(dcf) {
+      use3dddPlus.setState({
+        defaultColorFill: dcf
+      });
+    },
     updateModifaction: function updateModifaction(toSet) {
       if (toSet) {
         get().storeHistory.push(get().applyColorFill());
@@ -3071,6 +3077,18 @@ var converterSlice = function converterSlice(set, get) {
       use3dddPlus.setState({
         colorFill: fillColors
       });
+      // Update colors in default color fill
+      var defaultCF = [];
+      Object.keys(fillColors).map(function (cf) {
+        defaultCF.push({
+          property: cf,
+          "default": fillColors[cf],
+          updated: fillColors[cf]
+        });
+      });
+      use3dddPlus.setState({
+        defaultColorFill: defaultCF
+      });
       function euclideanDistance(color1, color2) {
         var c1 = new fabric.fabric.Color(color1).getSource();
         var c2 = new fabric.fabric.Color(color2).getSource();
@@ -3115,6 +3133,10 @@ var converterSlice = function converterSlice(set, get) {
       use3dddPlus.setState({
         activeSelection: loadedObject
       });
+      use3dddPlus.setState({
+        loading: false
+      });
+      use3dddPlus.getState().popUpCanvasUpdateModification(true);
     });
   };
   return {
@@ -3202,6 +3224,9 @@ var converterSlice = function converterSlice(set, get) {
       use3dddPlus.setState({
         uploadImageModalDisplay: true
       });
+      use3dddPlus.setState({
+        loading: true
+      });
       if (isSVG) {
         var reader = new FileReader();
         reader.onload = function (e) {
@@ -3240,6 +3265,7 @@ var converterSlice = function converterSlice(set, get) {
       return '#' + r + g + b;
     },
     changeSVGColor: function changeSVGColor(property, color) {
+      use3dddPlus.getState().popUpCanvasUpdateModification(true);
       var fillColor = _extends({}, use3dddPlus.getState().colorFill);
       var previousColor = fillColor[property];
       //const SelectedObjet = use3dddPlus.getState().activeSelection;
@@ -3269,7 +3295,6 @@ var converterSlice = function converterSlice(set, get) {
           }
         });
         use3dddPlus.getState().popupCanv.renderAll();
-        use3dddPlus.getState().popUpCanvasUpdateModification(true);
         // fillColor[property] = color;
         Object.keys(fillColor).forEach(function (fc) {
           if (fillColor[fc] === previousColor) {
@@ -3950,7 +3975,9 @@ var initCanvas = function initCanvas() {
       canvas.requestRenderAll();
       removeItem(canvasTarget);
     }
+    // use3dddPlus.setState({ defaultColorFill: [] });
   }
+
   var removeItem = function removeItem(value) {
     //@ts-ignore
     var index = use3dddPlus.getState().storeAllObject.indexOf(value);
@@ -4623,26 +4650,30 @@ var Initpopup = function Initpopup() {
 // import { Button } from 'reakit';
 var PopUpCanvas = function PopUpCanvas() {
   var _use3dddPlus = use3dddPlus(function (state) {
-      return [state.popupCanv, state.fabricCanvas, state.colorFill, state.changeSVGColor, state.popUpCanvasUndo, state.refreshColor];
+      return [state.popupCanv, state.fabricCanvas, state.colorFill, state.changeSVGColor, state.popUpCanvasUndo, state.refreshColor, state.defaultColorFill, state.setDefaultColorFill];
     }, shallow.shallow),
     popupCanvas = _use3dddPlus[0],
     canvas = _use3dddPlus[1],
     colorFill = _use3dddPlus[2],
     changeSVGColor = _use3dddPlus[3],
     popUpCanvasUndo = _use3dddPlus[4],
-    refreshColor = _use3dddPlus[5];
+    refreshColor = _use3dddPlus[5],
+    defaultColorFill = _use3dddPlus[6],
+    setDefaultColorFill = _use3dddPlus[7];
   var _useState = React.useState(8),
     colorCount = _useState[0],
     setColorCount = _useState[1];
   var _useState2 = React.useState(-1),
     colorFillCount = _useState2[0],
     setColorFillCount = _useState2[1];
-  var _useState3 = React.useState([]),
-    defaultColorFill = _useState3[0],
-    setDefaultColorFill = _useState3[1];
-  var _useState4 = React.useState(false),
-    isRefresh = _useState4[0],
-    setIsRefresh = _useState4[1];
+  // const [defaultColorFill, setDefaultColorFill] = useState([]);
+  var _useState3 = React.useState(false),
+    isRefresh = _useState3[0],
+    setIsRefresh = _useState3[1];
+  var defaultColorFillRef = React.useRef([]);
+  React.useEffect(function () {
+    defaultColorFillRef.current = defaultColorFill;
+  }, [defaultColorFill]);
   React.useEffect(function () {
     if (colorFill && Object.keys(colorFill).length) {
       if (colorFillCount === -1) {
@@ -4730,6 +4761,7 @@ var PopUpCanvas = function PopUpCanvas() {
     }
   };
   React.useEffect(function () {
+    setDefaultColorFill([]);
     var popupCanv = Initpopup();
     use3dddPlus.setState({
       popupCanv: popupCanv
@@ -4746,14 +4778,29 @@ var PopUpCanvas = function PopUpCanvas() {
         if (obj.type === 'path') {
           //@ts-ignore
           if (obj.containsPoint(mouseClick)) {
+            use3dddPlus.getState().popUpCanvasUpdateModification(true);
             popupCanv.remove(obj);
             popupCanv.renderAll();
           }
         }
       });
+      var availableColors = [];
+      defaultColorFillRef.current.map(function (dcf) {
+        var objColorCount = 0;
+        popupCanv.forEachObject(function (obj) {
+          if (RGBToHex(obj.fill) === dcf.updated) {
+            objColorCount += 1;
+          }
+        });
+        if (objColorCount > 0) {
+          availableColors.push(dcf);
+        }
+      });
+      setDefaultColorFill(availableColors);
     });
   }, []);
   var popupCanvasCancel = function popupCanvasCancel() {
+    setDefaultColorFill([]);
     use3dddPlus.setState({
       uploadImageModalDisplay: false
     });
@@ -4829,6 +4876,17 @@ var PopUpCanvas = function PopUpCanvas() {
       popupCanvasStoreHistory: []
     });
   };
+  var RGBToHex = function RGBToHex(rgb) {
+    var sep = rgb.indexOf(',') > -1 ? ',' : ' ';
+    rgb = rgb.substr(4).split(')')[0].split(sep);
+    var r = (+rgb[0]).toString(16),
+      g = (+rgb[1]).toString(16),
+      b = (+rgb[2]).toString(16);
+    if (r.length == 1) r = '0' + r;
+    if (g.length == 1) g = '0' + g;
+    if (b.length == 1) b = '0' + b;
+    return '#' + r + g + b;
+  };
   /*
   const resetHandler = () => {
     console.log(use3dddPlus.getState().forPopupCanvasReset);
@@ -5767,23 +5825,21 @@ var LeftMenu = function LeftMenu() {
 };
 
 var ImageEdit = function ImageEdit(_ref) {
-  var _Object$keys;
   var flipX = _ref.flipX,
     flipY = _ref.flipY,
-    changeSVGColor = _ref.changeSVGColor,
-    activeSelection = _ref.activeSelection;
+    changeSVGTextColor = _ref.changeSVGTextColor,
+    allColor = _ref.allColor;
   return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
     className: "uppercase font-bold pt-[17px]"
   }, "Color in Canvas"), React__default.createElement("div", {
     className: "flex flex-wrap gap-x-[1rem] mt-[12px]"
-  }, activeSelection.colorFill && ((_Object$keys = Object.keys(activeSelection == null ? void 0 : activeSelection.colorFill)) == null ? void 0 : _Object$keys.map(function (item) {
-    var _activeSelection$ownM;
+  }, allColor && (allColor == null ? void 0 : allColor.map(function (item) {
     return React__default.createElement(ColorImpl, {
       mClass: 'mb-[10px]',
-      key: activeSelection.colorFill[item] + (activeSelection == null ? void 0 : (_activeSelection$ownM = activeSelection.ownMatrixCache) == null ? void 0 : _activeSelection$ownM.key),
-      handleChange: changeSVGColor,
+      key: item,
+      handleChange: changeSVGTextColor,
       property: item,
-      color: activeSelection.colorFill[item]
+      color: item
     });
   }))), React__default.createElement("div", null, React__default.createElement("div", {
     className: "font-bold uppercase mt-[17px]"
@@ -6254,16 +6310,18 @@ var Rightmenu = function Rightmenu() {
   var textSelected = use3dddPlus.getState().activeSelection;
   var canvas = use3dddPlus.getState().fabricCanvas;
   var _use3dddPlus = use3dddPlus(function (state) {
-      return [state.colorFill, state.currentSelection, state.activeSelection, state.textInfo, state.activeSelection, state.storeAllObject, state.allColor, state.setToggleSaveDesign];
+      return [
+      // state.colorFill,
+      state.currentSelection, state.activeSelection, state.textInfo, state.activeSelection, state.storeAllObject, state.allColor, state.setToggleSaveDesign];
     }, shallow.shallow),
-    colorFill = _use3dddPlus[0],
-    currentSelection = _use3dddPlus[1],
-    activeSelection = _use3dddPlus[2],
-    textInfo = _use3dddPlus[3],
-    activeObj = _use3dddPlus[4],
-    storeAllObject = _use3dddPlus[5],
-    allColor = _use3dddPlus[6],
-    setToggleSaveDesign = _use3dddPlus[7];
+    // colorFill,
+    currentSelection = _use3dddPlus[0],
+    activeSelection = _use3dddPlus[1],
+    textInfo = _use3dddPlus[2],
+    activeObj = _use3dddPlus[3],
+    storeAllObject = _use3dddPlus[4],
+    allColor = _use3dddPlus[5],
+    setToggleSaveDesign = _use3dddPlus[6];
   var _useState = React.useState(false),
     textAlignDisplay = _useState[0],
     setTextAlignDisplay = _useState[1];
@@ -6937,42 +6995,40 @@ var Rightmenu = function Rightmenu() {
             });
           }
         });
-        var _colorFill = _extends({}, data.colorFill);
-        Object.keys(_colorFill).forEach(function (item) {
+        var colorFill = _extends({}, data.colorFill);
+        Object.keys(colorFill).forEach(function (item) {
           console.log(item);
-          if (_colorFill[item] === previousColor) {
-            _colorFill[item] = color;
+          if (colorFill[item] === previousColor) {
+            colorFill[item] = color;
           }
         });
         data.set({
-          colorFill: _colorFill
+          colorFill: colorFill
         });
       }
     });
     canvas.renderAll();
   };
-  var changeSVGColor = function changeSVGColor(property, color) {
-    var fillColor = colorFill;
-    var previousColor = fillColor[property];
-    var SelectedObjet = use3dddPlus.getState().activeSelection;
-    var objImage = SelectedObjet._objects;
-    objImage.forEach(function (ele) {
-      var _C = ele.fill.includes('#') ? ele.fill : RGBToHex(ele.fill);
-      if (_C === previousColor) {
-        ele.set({
-          fill: color
-        });
-      }
-    });
-    canvas.renderAll();
-    fillColor[property] = color;
-    use3dddPlus.setState({
-      colorFill: fillColor
-    });
-    use3dddPlus.getState().updateModifaction(true);
-    use3dddPlus.getState().forIconCapture();
-    textSelected.icon = use3dddPlus.getState().iconImage;
-  };
+  // const changeSVGColor = (property, color) => {
+  //   const fillColor = colorFill;
+  //   const previousColor = fillColor[property];
+  //   const SelectedObjet = use3dddPlus.getState().activeSelection;
+  //   let objImage = SelectedObjet._objects;
+  //   objImage.forEach((ele) => {
+  //     const _C = ele.fill.includes('#') ? ele.fill : RGBToHex(ele.fill);
+  //     if (_C === previousColor) {
+  //       ele.set({
+  //         fill: color,
+  //       });
+  //     }
+  //   });
+  //   canvas.renderAll();
+  //   fillColor[property] = color;
+  //   use3dddPlus.setState({ colorFill: fillColor });
+  //   use3dddPlus.getState().updateModifaction(true);
+  //   use3dddPlus.getState().forIconCapture();
+  //   textSelected.icon = use3dddPlus.getState().iconImage;
+  // };
   var RGBToHex = function RGBToHex(rgb) {
     var sep = rgb.indexOf(',') > -1 ? ',' : ' ';
     rgb = rgb.substr(4).split(')')[0].split(sep);
@@ -7207,9 +7263,11 @@ var Rightmenu = function Rightmenu() {
   })))), currentSelection === 'group' && React__default.createElement(ImageEdit, {
     flipX: flipX,
     flipY: flipY,
-    changeSVGColor: changeSVGColor,
+    // changeSVGColor={changeSVGColor}
+    changeSVGTextColor: changeSVGTextColor,
     // nudgeMove={nudgeMove}
-    activeSelection: activeSelection
+    // activeSelection={activeSelection}
+    allColor: allColor
   }), currentSelection === 'selectAll' && React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
     className: "uppercase font-bold pt-[17px]"
   }, "Color in Canvas"), React__default.createElement("div", {
@@ -7627,23 +7685,12 @@ var SaveDesign = function SaveDesign(_ref) {
   var _React$useState = React__default.useState(''),
     tagName = _React$useState[0],
     setTagName = _React$useState[1];
-  React.useEffect(function () {
-    return function () {};
-  }, []);
   var checkValidations = function checkValidations() {
-    var nameValidation = logoName.length >= 3;
+    var nameValidation = logoName.length >= 1;
     if (!nameValidation) {
       setDesignNameValidation('length');
       return nameValidation;
-    } else {
-      var reg = /^[a-zA-Z0-9 ]+$/;
-      var regTest = reg.test(logoName);
-      if (!!regTest) {
-        setDesignNameValidation('');
-        return nameValidation;
-      }
-      return false;
-    }
+    } else return true;
   };
   var onSaveHandler = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
@@ -7651,21 +7698,22 @@ var SaveDesign = function SaveDesign(_ref) {
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
+            console.log(checkValidations());
             if (checkValidations()) {
-              _context.next = 2;
+              _context.next = 3;
               break;
             }
             return _context.abrupt("return");
-          case 2:
+          case 3:
             dataURL = canvas.toDataURL();
             canvasData = use3dddPlus.getState().applyColorFill(); // const canvasGetobject = canvas.getObjects();
             // canvasData.objects.forEach((element, index) => {
             //   element.colorFill = canvasGetobject[index].colorFill;
             // });
             dataCh = JSON.stringify(canvasData);
-            _context.next = 7;
+            _context.next = 8;
             return uploadLogoConfig(dataCh, use3dddPlus.getState().customerId);
-          case 7:
+          case 8:
             S3UrlPath = _context.sent;
             canvasSvg = canvas.toSVG();
             raw = JSON.stringify({
@@ -7682,7 +7730,7 @@ var SaveDesign = function SaveDesign(_ref) {
               closeModal('', false, '', {});
               use3dddPlus.getState().toastMessages.saveSuccess();
             });
-          case 11:
+          case 12:
           case "end":
             return _context.stop();
         }
@@ -7705,19 +7753,19 @@ var SaveDesign = function SaveDesign(_ref) {
       setCommaInTagName(false);
     }
   }, [tagName]);
-  React.useEffect(function () {
-    if (logoName !== '') {
-      var reg = /^[a-zA-Z0-9 ]+$/;
-      var regTest = reg.test(logoName);
-      if (!regTest) {
-        setDesignNameValidation('specialCharacter');
-      } else if (designNameValidation === 'specialCharacter') {
-        setDesignNameValidation('');
-      }
-    } else if (designNameValidation === 'specialCharacter') {
-      setDesignNameValidation('');
-    }
-  }, [logoName]);
+  // useEffect(() => {
+  //   if (logoName !== '') {
+  //     const reg = /^[a-zA-Z0-9 ]+$/;
+  //     const regTest = reg.test(logoName);
+  //     if (!regTest) {
+  //       setDesignNameValidation('specialCharacter');
+  //     } else if (designNameValidation === 'specialCharacter') {
+  //       setDesignNameValidation('');
+  //     }
+  //   } else if (designNameValidation === 'specialCharacter') {
+  //     setDesignNameValidation('');
+  //   }
+  // }, [logoName]);
   var handleTagChange = function handleTagChange(event) {
     var _event$target;
     if ((event == null ? void 0 : (_event$target = event.target) == null ? void 0 : _event$target.value) !== ' ') {
@@ -7820,7 +7868,7 @@ var SaveDesign = function SaveDesign(_ref) {
   })), designNameValidation === 'length' && React__default.createElement("div", {
     role: "alert",
     className: "text-sm " + INPUT_ERROR_TEXT_COLOR + " mb-[1.25rem]"
-  }, "* Please enter a name with at least 3 characters"), designNameValidation === 'specialCharacter' && React__default.createElement("div", {
+  }, "* Please enter a name with at least 1 character"), designNameValidation === 'specialCharacter' && React__default.createElement("div", {
     role: "alert",
     className: "text-sm " + INPUT_ERROR_TEXT_COLOR + " mb-[1.25rem]"
   }, "* Design Name can not have any special characters"), React__default.createElement("label", {