@threedddplus/logoeditor 0.0.104 → 0.0.106

package/dist/logoeditor.esm.js

@@ -2795,8 +2795,19 @@ var fabricSlice = function fabricSlice(set, get) {
         defaultColorFillCopy: dcf
       });
     },
+    // updateModifaction: (toSet) => {
+    //   if (toSet) {
+    //     get().storeHistory.push(get().applyColorFill());
+    //   }
+    // },
     updateModifaction: function updateModifaction(toSet) {
       if (toSet) {
+        if (get().count > 1 && get().storeHistory.length > 1) {
+          for (var i = 1; i < get().count; i++) {
+            get().storeHistory.pop();
+          }
+          get().count = 1;
+        }
         get().storeHistory.push(get().applyColorFill());
       }
     },
@@ -3974,18 +3985,75 @@ var converterSlice = function converterSlice(set, get) {
     fabric.loadSVGFromString(
     //@ts-ignore
     new String(svgstr), function (objects, options) {
+      var svgData = getDesignConceptSVGData(svgstr);
+      console.log(svgData);
       var loadedObject = fabric.util.groupSVGElements(objects, options);
-      loadedObject.scaleToHeight(300);
-      loadedObject.scaleToWidth(300);
+      svgData.forEach(function (resItem) {
+        var path;
+        var node;
+        objects == null ? void 0 : objects.forEach(function (item) {
+          //@ts-ignore
+          // console.log(item.id, res[0].path.replace("#", ""));
+          //@ts-ignore
+          if (item.id === resItem.path) {
+            path = item;
+            //@ts-ignore
+          } else if (item.id === resItem.element) {
+            node = item;
+          }
+        });
+        if (node && path) {
+          var _resItem$node$childre, _resItem$node$childre2;
+          var fontSize = (_resItem$node$childre = resItem.node.children[0]) == null ? void 0 : (_resItem$node$childre2 = _resItem$node$childre.getAttribute('font-size')) == null ? void 0 : _resItem$node$childre2.replace('px', '');
+          console.log('fontSize', resItem.node.children[0], fontSize, path.top, path.left, path.textWidth, path.width);
+          node.set({
+            path: path,
+            top: path.top,
+            left: path.left,
+            pathStartOffset: path.width * parseFloat(resItem.node.startOffset.baseVal.valueAsString) / 100,
+            // fontFamily: resItem.node.children[0].getAttribute("font-family"),
+            fontSize: fontSize || 25 //convertToFabricUnits("25px"),
+            //   charSpacing: resItem.node.getAttribute("letter-spacing") //convertToFabricUnits(resItem.node.getAttribute("letter-spacing")),
+            // stroke: resItem.node.children[0].getAttribute("stroke"),
+            // fill: '#040404'
+          });
+
+          node.setCoords();
+        }
+      });
+      // loadedObject.scaleToHeight(300);
+      // loadedObject.scaleToWidth(300);
+      var canvas = use3dddPlus.getState().popupCanv;
+      var canvasWidth = canvas.width;
+      var canvasHeight = canvas.height;
+      var val = 300;
+      if ((loadedObject.width <= 200 || loadedObject.height <= 200) && (loadedObject.minX === -0 || loadedObject.minX)) {
+        val = 600;
+      }
+      if (Math.ceil(loadedObject.width + loadedObject.left + 45) >= Math.floor(canvasWidth)) {
+        loadedObject.scaleToWidth(val);
+      } else if (Math.ceil(loadedObject.height + loadedObject.top + 10) >= Math.floor(canvasHeight)) {
+        loadedObject.scaleToHeight(val);
+      } else if (Math.ceil(loadedObject.left) < 0) {
+        loadedObject.scaleToWidth(val);
+      } else if (Math.ceil(loadedObject.top) < 0) {
+        loadedObject.scaleToHeight(val);
+      } else if (loadedObject.width < 200 || loadedObject.height < 200) {
+        loadedObject.scaleToWidth(val);
+      }
       //@ts-ignore
       var objImage = loadedObject == null ? void 0 : loadedObject._objects;
       var _Fills = [];
       var fillCounts = {};
+      var colorObjects = {};
       if (objImage) {
         objImage.forEach(function (ele) {
           ele.set({
             strokeWidth: 0
           });
+          ele.set({
+            id: use3dddPlus.getState().guid()
+          });
           if (typeof ele.fill === "string" && ele.fill !== "") {
             set({
               fillColor: [].concat(ele.fill)
@@ -3993,6 +4061,13 @@ var converterSlice = function converterSlice(set, get) {
             var fillColor = ele.fill.toString();
             var pixelCount = ele.width * ele.height;
             fillCounts[fillColor] = (fillCounts[fillColor] || 0) + pixelCount;
+            if (colorObjects[fillColor]) {
+              colorObjects[fillColor].objects.push(ele.get("id"));
+            } else {
+              colorObjects[fillColor] = {
+                objects: [ele.get("id")]
+              };
+            }
           }
         });
       }
@@ -4003,12 +4078,17 @@ var converterSlice = function converterSlice(set, get) {
         return fillCounts[b] - fillCounts[a];
       });
       var topColors = sortedFillColors.slice(0, colorValue);
+      var colorObjectsHex = {};
       topColors.map(function (e) {
         if (e.search("#") === -1) {
           var _C = get().RGBToHex(e);
           _Fills.push(_C);
+          colorObjects[e].hex = _C;
+          colorObjectsHex[_C] = colorObjects[e];
         } else {
           _Fills.push(e);
+          colorObjects[e].hex = e;
+          colorObjectsHex[e] = colorObjects[e];
         }
       });
       //@ts-ignore
@@ -4030,7 +4110,8 @@ var converterSlice = function converterSlice(set, get) {
         defaultCF.push({
           property: cf,
           "default": fillColors[cf],
-          updated: fillColors[cf]
+          updated: fillColors[cf],
+          objects: colorObjectsHex[fillColors[cf]].objects
         });
       });
       use3dddPlus.setState({
@@ -4089,10 +4170,10 @@ var converterSlice = function converterSlice(set, get) {
       //       backgroundRepeat: 'repeat',
       //     }
       //   );  
-      var canvas = use3dddPlus.getState().popupCanv;
+      // const canvas = use3dddPlus.getState().popupCanv;
       var gridSize = 15; // Size of each grid cell
-      var canvasWidth = canvas.width;
-      var canvasHeight = canvas.height;
+      // var canvasWidth = canvas.width;
+      // var canvasHeight = canvas.height;
       var numCols = Math.ceil(canvasWidth / gridSize);
       var numRows = Math.ceil(canvasHeight / gridSize);
       // Function to create a rectangle with checkerboard pattern
@@ -4159,6 +4240,45 @@ var converterSlice = function converterSlice(set, get) {
       use3dddPlus.getState().popUpCanvasUpdateModification(true);
     });
   };
+  // function convertToFabricUnits(valueWithUnit, canvasHeight = 500) {
+  //   // Parse the value and unit from the string
+  //   const matches = valueWithUnit.match(/^([\d.]+)(\D+)$/);
+  //   if (!matches) {
+  //       throw new Error("Invalid value format. Value must be in the format 'numberunit', e.g., '10px'.");
+  //   }
+  //   const value = parseFloat(matches[1]);
+  //   const unit = matches[2];
+  //   // Define conversion ratios for different units
+  //   const conversionTable = {
+  //       'px': 1,
+  //       'em': 16,  // Assuming 1em = 16px (default browser font size)
+  //       'rem': 16, // Same as em
+  //       'vh': canvasHeight / 100  // 1vh is 1% of canvas height
+  //   };
+  //   // Convert the value to pixels
+  //   if (unit in conversionTable) {
+  //       return value * conversionTable[unit];
+  //   } else {
+  //       throw new Error("Unsupported unit. Supported units are 'px', 'em', 'rem', 'vh'.");
+  //   }
+  // }
+  var getDesignConceptSVGData = function getDesignConceptSVGData(svgData) {
+    var parser = new DOMParser();
+    var xmlDoc = parser.parseFromString(svgData, 'image/svg+xml');
+    var textElements = xmlDoc.querySelectorAll('textPath');
+    var href = [];
+    textElements.forEach(function (textElement) {
+      var _textElement$getAttri, _textElement$parentNo;
+      var hrefValue = (_textElement$getAttri = textElement == null ? void 0 : textElement.getAttribute('xlink:href')) != null ? _textElement$getAttri : textElement == null ? void 0 : textElement.getAttribute('href');
+      if (hrefValue) href.push({
+        path: hrefValue.replace('#', ''),
+        //@ts-ignore
+        element: textElement == null ? void 0 : (_textElement$parentNo = textElement.parentNode) == null ? void 0 : _textElement$parentNo.id,
+        node: textElement
+      });
+    });
+    return href;
+  };
   return {
     fillColor: [],
     file: {},
@@ -4353,7 +4473,7 @@ var converterSlice = function converterSlice(set, get) {
     changeSVGColor: function changeSVGColor(property, color) {
       use3dddPlus.getState().popUpCanvasUpdateModification(true);
       var fillColor = _extends({}, use3dddPlus.getState().colorFill);
-      var previousColor = fillColor[property];
+      // const previousColor = fillColor[property];
       //const SelectedObjet = use3dddPlus.getState().activeSelection;
       // console.log("Color_CHANGING--->",SelectedObjet.colorFill);
       // let _newObj = SelectedObjet.colorFill;
@@ -4375,27 +4495,45 @@ var converterSlice = function converterSlice(set, get) {
       //  .getState()
       //  .popupCanv.getActiveObject()._objects;
       if (use3dddPlus.getState().loadedObject) {
-        var objImage = use3dddPlus.getState().popupCanv.getObjects();
-        objImage.forEach(function (ele) {
-          if (typeof ele.fill === "string" && ele.fill !== "") {
-            var _C = ele.fill === 'transparent' || typeof ele.fill === 'string' && ele.fill.includes('#') ? ele.fill : get().RGBToHex(ele.fill);
-            if (_C === previousColor) {
+        // let objImage1 = use3dddPlus.getState().popupCanv.getObjects();
+        var objImage = use3dddPlus.getState().popupCanv.getActiveObject();
+        if (objImage && objImage._objects) {
+          objImage._objects.forEach(function (ele) {
+            var defaultColorObject = null;
+            if (use3dddPlus.getState().defaultColorFill) {
+              defaultColorObject = use3dddPlus.getState().defaultColorFill.find(function (dcf) {
+                return dcf.property === property;
+              });
+            }
+            if (ele.id && defaultColorObject && defaultColorObject.objects && defaultColorObject.objects.includes(ele.id) && typeof ele.fill === "string" && ele.fill !== "") {
+              // const _C = (ele.fill === 'transparent' || (typeof ele.fill === 'string' && ele.fill.includes('#')) ? ele.fill : get().RGBToHex(ele.fill));
+              // if (_C === previousColor) {
               ele.set({
                 fill: color
               });
+              // }
             }
-          }
-        });
-        use3dddPlus.getState().popupCanv.renderAll();
-        // fillColor[property] = color;
-        Object.keys(fillColor).forEach(function (fc) {
-          if (fillColor[fc] === previousColor) {
-            fillColor[fc] = color;
-          }
-        });
-        use3dddPlus.setState({
-          colorFill: fillColor
-        });
+            //   if(typeof ele.fill === "string" && ele.fill !== ""){
+            //   const _C = (ele.fill === 'transparent' || (typeof ele.fill === 'string' && ele.fill.includes('#')) ? ele.fill : get().RGBToHex(ele.fill));
+            //   if (_C === previousColor) {
+            //     ele.set({
+            //       fill: color,
+            //     });
+            //   }
+            // }
+          });
+
+          use3dddPlus.getState().popupCanv.renderAll();
+          fillColor[property] = color;
+          // Object.keys(fillColor).forEach((fc: any) => {
+          //   if(fillColor[fc] === previousColor){
+          //     fillColor[fc] = color;
+          //   }
+          // });
+          use3dddPlus.setState({
+            colorFill: fillColor
+          });
+        }
         return true;
       } else {
         return false;
@@ -5372,7 +5510,6 @@ var initCanvas = function initCanvas() {
   });
   canv.on('object:scaling', function (e) {
     var obj = e.target;
-    console.log("++++", e);
     if (isNaN(e.pointer.x) || isNaN(e.pointer.y)) {
       obj.set({
         top: use3dddPlus.getState().lastPosition.top,
@@ -6495,10 +6632,14 @@ var PopUpCanvas = function PopUpCanvas() {
         setColorFillCount(Object.keys(colorFill).length);
         var defaultCF = [];
         Object.keys(colorFill).map(function (cf) {
+          var _defaultColorFill$fin;
           defaultCF.push({
             property: cf,
             "default": colorFill[cf],
-            updated: colorFill[cf]
+            updated: colorFill[cf],
+            objects: (_defaultColorFill$fin = defaultColorFill.find(function (dcf) {
+              return dcf.property === cf;
+            })) == null ? void 0 : _defaultColorFill$fin.objects
           });
         });
         setDefaultColorFill(defaultCF);
@@ -6535,21 +6676,20 @@ var PopUpCanvas = function PopUpCanvas() {
     // }
     if (changeSVGColor(property, color)) {
       setDefaultColorFill(defaultColorFill.map(function (c) {
-        return (
-          // c.property === property ? { ...c, updated: color } : c
-          colorFill[property] === c.updated ? _extends({}, c, {
-            updated: color
-          }) : c
-        );
-      }));
+        return c.property === property ? _extends({}, c, {
+          updated: color
+        }) : c;
+      }
+      // colorFill[property] === c.updated ? { ...c, updated: color } : c
+      ));
+
       setDefaultColorFillCopy(defaultColorFillCopy.map(function (c) {
-        return (
-          // c.property === property ? { ...c, updated: color } : c
-          colorFill[property] === c.updated ? _extends({}, c, {
-            updated: color
-          }) : c
-        );
-      }));
+        return c.property === property ? _extends({}, c, {
+          updated: color
+        }) : c;
+      }
+      // colorFill[property] === c.updated ? { ...c, updated: color } : c
+      ));
     }
   };
   // const colors = [
@@ -8753,7 +8893,7 @@ var Rightmenu = function Rightmenu() {
   };
   var textShapeChange = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(e, textChange, fontSize, charSpacing, strokeWidth, fontWeight, textAlign, fontStyle) {
-      var pathData, p, shapeType, text, _text, fabricPath, dims, newTextPath, activeObj, _dims, brNew, _activeObj;
+      var pathData, p, shapeType, text, _text, fabricPath, dims, newTextPath, activeObj, _dims;
       return _regeneratorRuntime().wrap(function _callee2$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {
           case 0:
@@ -9076,27 +9216,30 @@ var Rightmenu = function Rightmenu() {
               updateStoreAllObject(newTextPath);
             }
             canvas.renderAll();
-            brNew = use3dddPlus.getState().activeSelection.getBoundingRect();
+            // setTimeout(() => {
+            //   reduceFontSize();
+            // }, 500);
+            reduceFontSize();
+            // canvas.renderAll();
+            // let brNew = use3dddPlus.getState().activeSelection.getBoundingRect();
+            // while (
+            //   Math.ceil(brNew.width + brNew.left + 45) >= Math.floor(canvas.width) ||
+            //   Math.ceil(brNew.height + brNew.top + 10) >= Math.floor(canvas.height) ||
+            //   Math.ceil(brNew.left) < 0 ||
+            //   Math.ceil(brNew.top) < 0
+            // ) {
+            //   textSelected.set('fontSize', textSelected.fontSize - 0.1);
+            //   canvas.remove(canvas.getActiveObject());
+            //   await textShapeChange(textSelected.shapeType, true);
+            //   const activeObj = canvas.getActiveObject();
+            //   brNew.left = activeObj.left;
+            //   brNew.width = activeObj.width;
+            //   brNew.top = activeObj.top;
+            //   brNew.height = activeObj.height;
+            //   textSelected.setCoords();
+            //   canvas.renderAll();
+            // }
           case 103:
-            if (!(Math.ceil(brNew.width + brNew.left + 45) >= Math.floor(canvas.width) || Math.ceil(brNew.height + brNew.top + 10) >= Math.floor(canvas.height) || Math.ceil(brNew.left) < 0 || Math.ceil(brNew.top) < 0)) {
-              _context2.next = 117;
-              break;
-            }
-            textSelected.set('fontSize', textSelected.fontSize - 0.1);
-            canvas.remove(canvas.getActiveObject());
-            _context2.next = 108;
-            return textShapeChange(textSelected.shapeType, true);
-          case 108:
-            _activeObj = canvas.getActiveObject();
-            brNew.left = _activeObj.left;
-            brNew.width = _activeObj.width;
-            brNew.top = _activeObj.top;
-            brNew.height = _activeObj.height;
-            textSelected.setCoords();
-            canvas.renderAll();
-            _context2.next = 103;
-            break;
-          case 117:
           case "end":
             return _context2.stop();
         }
@@ -9141,9 +9284,44 @@ var Rightmenu = function Rightmenu() {
       return;
     }
   };
+  /*
+  const reduceFontSize = async () => {
+    let brNew = textSelected.getBoundingRect();
+    let canvasWidth = 0;
+    let canvasHeight = 0;
+    if (textSelected && textSelected.canvas && textSelected.canvas.width) {
+      canvasWidth = textSelected.canvas.width;
+      canvasHeight = textSelected.canvas.height;
+    } else {
+      canvasWidth = canvas.width;
+      canvasHeight = canvas.height;
+    }
+    while (
+      Math.ceil(brNew.width + brNew.left + 45) > Math.floor(canvasWidth) ||
+      Math.ceil(brNew.height + brNew.top + 10) > Math.floor(canvasHeight) ||
+      Math.ceil(brNew.left) < 0 ||
+      Math.ceil(brNew.top) < 0
+    ) {
+      textSelected.set('fontSize', textSelected.fontSize - 0.1);
+      if (currentSelection === 'path') {
+        await textShapeChange(textSelected.shapeType, true);
+        canvas.renderAll();
+        const activeObj = canvas.getActiveObject();
+        brNew.left = activeObj.left;
+        brNew.width = activeObj.width;
+        brNew.top = activeObj.top;
+        brNew.height = activeObj.height;
+      } else {
+        brNew = textSelected.getBoundingRect();
+      }
+      textSelected.setCoords();
+      // canvas.renderAll();
+    }
+  };
+  */
   var reduceFontSize = /*#__PURE__*/function () {
     var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
-      var brNew, canvasWidth, canvasHeight, _activeObj2;
+      var brNew, canvasWidth, canvasHeight, _activeObj;
       return _regeneratorRuntime().wrap(function _callee3$(_context3) {
         while (1) switch (_context3.prev = _context3.next) {
           case 0:
@@ -9157,35 +9335,16 @@ var Rightmenu = function Rightmenu() {
               canvasWidth = canvas.width;
               canvasHeight = canvas.height;
             }
-          case 4:
-            if (!(Math.ceil(brNew.width + brNew.left + 45) > Math.floor(canvasWidth) || Math.ceil(brNew.height + brNew.top + 10) > Math.floor(canvasHeight) || Math.ceil(brNew.left) < 0 || Math.ceil(brNew.top) < 0)) {
-              _context3.next = 21;
-              break;
-            }
-            textSelected.set('fontSize', textSelected.fontSize - 0.1);
-            if (!(currentSelection === 'path')) {
-              _context3.next = 17;
-              break;
+            while (Math.ceil(brNew.width + brNew.left + 45) >= Math.floor(canvasWidth) || Math.ceil(brNew.height + brNew.top + 10) >= Math.floor(canvasHeight) || Math.ceil(brNew.left) < 0 || Math.ceil(brNew.top) < 0) {
+              _activeObj = canvas.getActiveObject();
+              _activeObj.scale(_activeObj.scaleX * 0.99);
+              _activeObj.setCoords();
+              _activeObj = canvas.getActiveObject();
+              brNew = _activeObj.getBoundingRect();
+              canvas.renderAll();
             }
-            _context3.next = 9;
-            return textShapeChange(textSelected.shapeType, true);
-          case 9:
             canvas.renderAll();
-            _activeObj2 = canvas.getActiveObject();
-            brNew.left = _activeObj2.left;
-            brNew.width = _activeObj2.width;
-            brNew.top = _activeObj2.top;
-            brNew.height = _activeObj2.height;
-            _context3.next = 18;
-            break;
-          case 17:
-            brNew = textSelected.getBoundingRect();
-          case 18:
-            textSelected.setCoords();
-            // canvas.renderAll();
-            _context3.next = 4;
-            break;
-          case 21:
+          case 6:
           case "end":
             return _context3.stop();
         }
@@ -9224,10 +9383,10 @@ var Rightmenu = function Rightmenu() {
             canvas.renderAll();
             reduceFontSize();
             canvas.renderAll();
-            // use3dddPlus.getState().updateModifaction(true);
+            use3dddPlus.getState().updateModifaction(true);
             use3dddPlus.getState().forIconCapture();
             textSelected.icon = use3dddPlus.getState().iconImage;
-          case 14:
+          case 15:
           case "end":
             return _context4.stop();
         }
@@ -9244,7 +9403,7 @@ var Rightmenu = function Rightmenu() {
     if (currentSelection === 'path') {
       textShapeChange(textSelected.shapeType, true);
     }
-    // use3dddPlus.getState().updateModifaction(true);
+    use3dddPlus.getState().updateModifaction(true);
     use3dddPlus.getState().forIconCapture();
     textSelected.icon = use3dddPlus.getState().iconImage;
     canvas.renderAll();
@@ -9302,71 +9461,68 @@ var Rightmenu = function Rightmenu() {
   //     // setSliderValue(event.target.value);
   //   }
   // };
-  var reduceLeft = /*#__PURE__*/function () {
-    var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5() {
-      var canvasWidth, canvasHeight, brNew, _activeObj3;
-      return _regeneratorRuntime().wrap(function _callee5$(_context5) {
-        while (1) switch (_context5.prev = _context5.next) {
-          case 0:
-            canvasWidth = textSelected.canvas.width;
-            canvasHeight = textSelected.canvas.height;
-            brNew = textSelected.getBoundingRect();
-          case 3:
-            if (!(Math.ceil(brNew.width + brNew.left + 45) >= Math.floor(canvasWidth) || Math.ceil(brNew.height + brNew.top + 10) >= Math.floor(canvasHeight) || Math.ceil(brNew.left) < 0 || Math.ceil(brNew.top) < 0)) {
-              _context5.next = 21;
-              break;
-            }
-            textSelected.set('fontSize', textSelected.fontSize - 0.1);
-            if (!(currentSelection === 'path')) {
-              _context5.next = 16;
-              break;
-            }
-            _context5.next = 8;
-            return textShapeChange(textSelected.shapeType, true);
-          case 8:
-            canvas.renderAll();
-            _activeObj3 = canvas.getActiveObject();
-            brNew.left = _activeObj3.left;
-            brNew.width = _activeObj3.width;
-            brNew.top = _activeObj3.top;
-            brNew.height = _activeObj3.height;
-            _context5.next = 17;
-            break;
-          case 16:
-            brNew = textSelected.getBoundingRect();
-          case 17:
-            textSelected.setCoords();
-            canvas.renderAll();
-            _context5.next = 3;
-            break;
-          case 21:
-          case "end":
-            return _context5.stop();
-        }
-      }, _callee5);
-    }));
-    return function reduceLeft() {
-      return _ref5.apply(this, arguments);
-    };
-  }();
+  // const reduceLeft = async () => {
+  //   const canvasWidth = textSelected.canvas.width;
+  //   const canvasHeight = textSelected.canvas.height;
+  //   let brNew = textSelected.getBoundingRect();
+  //   while (
+  //     Math.ceil(brNew.width + brNew.left + 45) >= Math.floor(canvasWidth) ||
+  //     Math.ceil(brNew.height + brNew.top + 10) >= Math.floor(canvasHeight) ||
+  //     Math.ceil(brNew.left) < 0 ||
+  //     Math.ceil(brNew.top) < 0
+  //   ) {
+  //     textSelected.set('fontSize', textSelected.fontSize - 0.1);
+  //     if (currentSelection === 'path') {
+  //       await textShapeChange(textSelected.shapeType, true);
+  //       canvas.renderAll();
+  //       const activeObj = canvas.getActiveObject();
+  //       brNew.left = activeObj.left;
+  //       brNew.width = activeObj.width;
+  //       brNew.top = activeObj.top;
+  //       brNew.height = activeObj.height;
+  //     } else {
+  //       brNew = textSelected.getBoundingRect();
+  //     }
+  //     textSelected.setCoords();
+  //     canvas.renderAll();
+  //   }
+  // };
   var fontChange = function fontChange(e) {
     fontFamilies.map(function (item) {
       if (item.name == e.target.value) {
         var font = new FontFace(item.name, "url('" + item.src + "')");
-        font.load().then(function (value) {
-          var _document$fonts;
-          //@ts-ignore
-          (_document$fonts = document.fonts) == null ? void 0 : _document$fonts.add(value);
-          document.body.classList.add('fonts-loaded');
-          textSelected.set('fontFamily', item.name);
-          if (currentSelection === 'path') {
-            textShapeChange(textSelected.shapeType, true);
-          }
-          canvas.renderAll();
-          use3dddPlus.getState().forIconCapture();
-          textSelected.icon = use3dddPlus.getState().iconImage;
-          reduceLeft();
-        });
+        font.load().then( /*#__PURE__*/function () {
+          var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5(value) {
+            var _document$fonts;
+            return _regeneratorRuntime().wrap(function _callee5$(_context5) {
+              while (1) switch (_context5.prev = _context5.next) {
+                case 0:
+                  //@ts-ignore
+                  (_document$fonts = document.fonts) == null ? void 0 : _document$fonts.add(value);
+                  document.body.classList.add('fonts-loaded');
+                  textSelected.set('fontFamily', item.name);
+                  if (!(currentSelection === 'path')) {
+                    _context5.next = 6;
+                    break;
+                  }
+                  _context5.next = 6;
+                  return textShapeChange(textSelected.shapeType, true);
+                case 6:
+                  canvas.renderAll();
+                  use3dddPlus.getState().forIconCapture();
+                  textSelected.icon = use3dddPlus.getState().iconImage;
+                  reduceFontSize();
+                  use3dddPlus.getState().updateModifaction(true);
+                case 11:
+                case "end":
+                  return _context5.stop();
+              }
+            }, _callee5);
+          }));
+          return function (_x11) {
+            return _ref5.apply(this, arguments);
+          };
+        }());
       }
     });
   };
@@ -9409,7 +9565,7 @@ var Rightmenu = function Rightmenu() {
     if (currentSelection === 'path') {
       textShapeChange(textSelected.shapeType, true);
     }
-    // use3dddPlus.getState().updateModifaction(true);
+    use3dddPlus.getState().updateModifaction(true);
     use3dddPlus.getState().forIconCapture();
     textSelected.icon = use3dddPlus.getState().iconImage;
     canvas.renderAll();
@@ -9434,7 +9590,7 @@ var Rightmenu = function Rightmenu() {
         if (currentSelection === 'path') {
           textShapeChange(textSelected.shapeType, true);
         }
-        // use3dddPlus.getState().updateModifaction(true);
+        use3dddPlus.getState().updateModifaction(true);
         use3dddPlus.getState().forIconCapture();
         textSelected.icon = use3dddPlus.getState().iconImage;
         canvas.renderAll();
@@ -9447,13 +9603,13 @@ var Rightmenu = function Rightmenu() {
       if (currentSelection === 'path') {
         textShapeChange(textSelected.shapeType, true);
       }
-      // use3dddPlus.getState().updateModifaction(true);
       use3dddPlus.getState().forIconCapture();
       textSelected.icon = use3dddPlus.getState().iconImage;
       var _brNew = textSelected.getBoundingRect();
       if (_brNew.width + _brNew.left + 45 >= dublicateText.canvas.width || _brNew.height + _brNew.top >= dublicateText.canvas.height || _brNew.left < 0 || _brNew.top < 0) {
         textSelected.charSpacing = oldCharSpacing;
       }
+      use3dddPlus.getState().updateModifaction(true);
       canvas.renderAll();
       if (textSelected.aCoords.tr.x > 480) {
         return;
@@ -9486,6 +9642,7 @@ var Rightmenu = function Rightmenu() {
     }
     canvas.sendToBack(use3dddPlus.getState().verticalLine);
     canvas.sendToBack(use3dddPlus.getState().horizontalLine);
+    use3dddPlus.getState().updateModifaction(true);
   };
   var changeArr = function changeArr(arr, fromIndex, toIndex) {
     var element = arr.splice(fromIndex, 1)[0];
@@ -9495,6 +9652,7 @@ var Rightmenu = function Rightmenu() {
   var deleteElement = function deleteElement(item) {
     canvas.remove(item);
     canvas.requestRenderAll();
+    use3dddPlus.getState().updateModifaction(true);
     removeItem(item);
   };
   var removeItem = function removeItem(value) {