@threedddplus/logoeditor 0.0.54 → 0.0.56

package/dist/logoeditor.esm.js

@@ -1956,44 +1956,45 @@ var lambdaSlice = function lambdaSlice(_set, _get) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
               fabric.Object.prototype.hasControls = true;
-              _context2.prev = 1;
+              fabric.Object.prototype.hasBorders = true;
+              _context2.prev = 2;
               use3dddPlus.setState({
                 loading: true
               });
               if (requests) {
-                _context2.next = 5;
+                _context2.next = 6;
                 break;
               }
               throw new Error('lambdaClient Not Found');
-            case 5:
-              _context2.next = 7;
+            case 6:
+              _context2.next = 8;
               return requests.get('/mascot-logos');
-            case 7:
+            case 8:
               response = _context2.sent;
               use3dddPlus.setState({
                 loading: false
               });
-              _context2.next = 11;
+              _context2.next = 12;
               return response;
-            case 11:
+            case 12:
               res = _context2.sent;
               use3dddPlus.setState({
                 stockLogos: res
               });
               return _context2.abrupt("return", res);
-            case 16:
-              _context2.prev = 16;
-              _context2.t0 = _context2["catch"](1);
+            case 17:
+              _context2.prev = 17;
+              _context2.t0 = _context2["catch"](2);
               console.error(_context2.t0);
               use3dddPlus.setState({
                 loading: false
               });
               throw new Error(_context2.t0);
-            case 21:
+            case 22:
             case "end":
               return _context2.stop();
           }
-        }, _callee2, null, [[1, 16]]);
+        }, _callee2, null, [[2, 17]]);
       }));
       function getStockLogos() {
         return _getStockLogos.apply(this, arguments);
@@ -2392,6 +2393,10 @@ var fabricSlice = function fabricSlice(set, get) {
       }
     },
     nameCounter: 0,
+    guid: function guid() {
+      var u = Date.now().toString(16) + Math.random().toString(16) + '0'.repeat(16);
+      return [u.substr(0, 8), u.substr(8, 4), '4000-8' + u.substr(13, 3), u.substr(16, 12)].join('-');
+    },
     duplicateObject: function duplicateObject() {
       if (get().fabricCanvas.getActiveObject()) {
         var activeObj = get().fabricCanvas.getActiveObject();
@@ -2453,9 +2458,23 @@ var fabricSlice = function fabricSlice(set, get) {
         get().fabricCanvas.renderAll();
         get().count += 1;
         // }
+        // Update layers
+        use3dddPlus.getState().clearLayers();
+        var canvasGetobject = get().fabricCanvas.getObjects();
+        canvasGetobject.forEach(function (element) {
+          if (element.type !== "line") {
+            use3dddPlus.getState().forStoringAllObject(element);
+            if (element.type === "text") {
+              get().fabricCanvas.setActiveObject(element);
+              use3dddPlus.getState().forIconCapture();
+              //@ts-ignore
+              element.icon = use3dddPlus.getState().iconImage;
+              get().fabricCanvas.discardActiveObject();
+            }
+          }
+        });
       }
     },
-
     redo: function redo() {
       if (get().count > 2) {
         get().fabricCanvas.clear().renderAll();
@@ -2463,6 +2482,21 @@ var fabricSlice = function fabricSlice(set, get) {
         get().fabricCanvas.loadFromJSON(get().storeHistory[item]);
         get().fabricCanvas.renderAll();
         get().count -= 1;
+        // Update layers
+        use3dddPlus.getState().clearLayers();
+        var canvasGetobject = get().fabricCanvas.getObjects();
+        canvasGetobject.forEach(function (element) {
+          if (element.type !== "line") {
+            use3dddPlus.getState().forStoringAllObject(element);
+            if (element.type === "text") {
+              get().fabricCanvas.setActiveObject(element);
+              use3dddPlus.getState().forIconCapture();
+              //@ts-ignore
+              element.icon = use3dddPlus.getState().iconImage;
+              get().fabricCanvas.discardActiveObject();
+            }
+          }
+        });
       }
     },
     moveDown: function moveDown(element) {
@@ -2486,6 +2520,8 @@ var fabricSlice = function fabricSlice(set, get) {
       var canvasGetobject = get().fabricCanvas.getObjects();
       canvasData.objects.forEach(function (element, index) {
         element.colorFill = canvasGetobject[index].colorFill;
+        element.icon = canvasGetobject[index].icon;
+        element.id = canvasGetobject[index].id;
       });
       return canvasData;
     },
@@ -2569,6 +2605,7 @@ var fabricSlice = function fabricSlice(set, get) {
           //@ts-ignore
           colorFill: fillColors
         });
+        loadedObject.id = get().guid();
         get().fabricCanvas.add(loadedObject).renderAll();
         get().fabricCanvas.centerObject(loadedObject);
         get().fabricCanvas.setActiveObject(loadedObject);
@@ -2580,6 +2617,7 @@ var fabricSlice = function fabricSlice(set, get) {
         use3dddPlus.getState().forIconCapture();
         //@ts-ignore
         loadedObject.icon = use3dddPlus.getState().iconImage;
+        use3dddPlus.getState().updateModifaction(true);
       });
     },
     myLogoHandler: function myLogoHandler(logo) {
@@ -2602,13 +2640,19 @@ var fabricSlice = function fabricSlice(set, get) {
         use3dddPlus.setState({
           selectedStepper: undefined
         });
+        // Update layers
+        use3dddPlus.getState().clearLayers();
         canvas.getObjects().forEach(function (element) {
-          use3dddPlus.getState().forStoringAllObject(element);
+          element.id = use3dddPlus.getState().guid();
+          if (element.type !== "line") {
+            use3dddPlus.getState().forStoringAllObject(element);
+          }
           canvas.setActiveObject(element);
           canvas.renderAll();
           use3dddPlus.getState().forIconCapture();
           element.icon = use3dddPlus.getState().iconImage;
         });
+        use3dddPlus.getState().updateModifaction(true);
       });
       canvas.backgroundColor = null;
     },
@@ -2748,7 +2792,9 @@ var fabricSlice = function fabricSlice(set, get) {
     },
     forPopupCanvasReset: null,
     forPopupCanvasColor: {},
-    imageData: null
+    imageData: null,
+    horizontalLine: null,
+    verticalLine: null
   };
 };
 
@@ -3458,6 +3504,7 @@ var converterSlice = function converterSlice(set, get) {
         //@ts-ignore
         setControlVisible: false
       });
+      loadedObject.id = use3dddPlus.getState().guid();
       // loadedObject = new fabric.Group(objImage, options);
       use3dddPlus.getState().popupCanv.clear();
       use3dddPlus.getState().popupCanv.setBackgroundColor({
@@ -3708,6 +3755,7 @@ var converterSlice = function converterSlice(set, get) {
     },
     addText: function addText() {
       fabric.Object.prototype.hasControls = true;
+      fabric.Object.prototype.hasBorders = true;
       use3dddPlus.getState().fabricCanvas.discardActiveObject();
       var text = new fabric.Text('NEW TEXT', {
         lineHeight: 1,
@@ -3723,7 +3771,7 @@ var converterSlice = function converterSlice(set, get) {
         padding: -1,
         fontSize: 50,
         name: 'text',
-        charSpacing: -10,
+        charSpacing: 0,
         lockScalingFlip: true
       });
       var fillColors = {
@@ -3733,6 +3781,7 @@ var converterSlice = function converterSlice(set, get) {
         //@ts-ignore
         colorFill: fillColors
       });
+      text.id = use3dddPlus.getState().guid();
       use3dddPlus.getState().fabricCanvas.centerObject(text);
       use3dddPlus.getState().fabricCanvas.add(text);
       use3dddPlus.getState().fabricCanvas.setActiveObject(text);
@@ -3989,9 +4038,12 @@ var ActionButtons = function ActionButtons() {
   };
 
   var removeItem = function removeItem(value) {
+    // var index = use3dddPlus.getState().storeAllObject.indexOf(value);
     // @ts-ignore
-    var index = use3dddPlus.getState().storeAllObject.indexOf(value);
-    if (index === -1) {
+    var index = use3dddPlus.getState().storeAllObject.findIndex(function (obj) {
+      return obj.id === value.id;
+    });
+    if (index === -1 && value && value._objects && value._objects.length > 0) {
       var index = use3dddPlus.getState()
       //@ts-ignore
       .storeAllObject.indexOf(value._objects[0]);
@@ -4057,7 +4109,7 @@ var ActionButtons = function ActionButtons() {
     visible: true
   }];
   return React.createElement(React.Fragment, null, React.createElement("div", {
-    className: "w-100 flex px-3 items-center z-10 bg-[#ffffff] h-[40px]",
+    className: "w-100 flex px-3 items-center z-10 h-[40px]",
     style: {
       justifyContent: 'flex-end'
     }
@@ -4110,7 +4162,9 @@ var NudgeButtons = function NudgeButtons() {
   //   };
   //   const removeItem = (value: any) => {
   //     //@ts-ignore
-  //     var index = use3dddPlus.getState().storeAllObject.indexOf(value);
+  // var index = use3dddPlus
+  // .getState()
+  // .storeAllObject.findIndex((obj: any) => obj.id === value.id);
   //     if (index > -1) {
   //       use3dddPlus.getState().storeAllObject.splice(index, 1);
   //     }
@@ -4119,10 +4173,12 @@ var NudgeButtons = function NudgeButtons() {
   //     });
   //   };
   var textSelected = use3dddPlus.getState().activeSelection;
-  var canvas = use3dddPlus.getState().fabricCanvas;
+  // const canvas = use3dddPlus.getState().fabricCanvas;
   var nudgeMove = function nudgeMove(e) {
+    var brNew = textSelected.getBoundingRect();
     if (e.target.id === 'down') {
-      if (textSelected.aCoords.br.y > canvas.height - 2) return;
+      // if (textSelected.aCoords.br.y > canvas.height - 2) return;
+      if (brNew.height + brNew.top >= textSelected.canvas.height) return;
       use3dddPlus.getState().moveDown(textSelected);
       use3dddPlus.getState().updateModifaction(true);
     } else if (e.target.id === 'up') {
@@ -4130,7 +4186,8 @@ var NudgeButtons = function NudgeButtons() {
       use3dddPlus.getState().moveUp(textSelected);
       use3dddPlus.getState().updateModifaction(true);
     } else if (e.target.id === 'right') {
-      if (textSelected.aCoords.tr.x > canvas.height - 2) return;
+      // if (textSelected.aCoords.tr.x > canvas.height - 2) return;
+      if (brNew.width + brNew.left >= textSelected.canvas.width) return;
       use3dddPlus.getState().moveRight(textSelected);
       use3dddPlus.getState().updateModifaction(true);
     } else if (e.target.id === 'left') {
@@ -4293,12 +4350,9 @@ var initCanvas = function initCanvas() {
   var onObjectMoving = function onObjectMoving(e) {
     use3dddPlus.getState().updateModifaction(false);
     var obj = e.target;
-    // if (
-    //   obj.getBoundingRect().width > obj.canvas.height ||
-    //   obj.getBoundingRect().height > obj.canvas.width
-    // ) {
-    //   return;
-    // }
+    if (obj.getBoundingRect().width > obj.canvas.height || obj.getBoundingRect().height > obj.canvas.width) {
+      return;
+    }
     obj.setCoords();
     if (obj.getBoundingRect().top < 0 || obj.getBoundingRect().left < 0) {
       obj.top = Math.max(obj.top, obj.top - obj.getBoundingRect().top);
@@ -4314,8 +4368,8 @@ var initCanvas = function initCanvas() {
       obj.top = top1;
       obj.scaleX = scale1x;
       obj.scaleY = scale1y;
-      obj.width = width1;
-      obj.height = height1;
+      // obj.width = width1;
+      // obj.height = height1;
     } else {
       left1 = obj.left;
       top1 = obj.top;
@@ -4324,23 +4378,34 @@ var initCanvas = function initCanvas() {
       width1 = obj.width;
       height1 = obj.height;
     }
-    /*  if (isObjectInCenter(e.target)) {
-        use3dddPlus.getState().verticalLine.set({visible : true})
-      }else{
-        use3dddPlus.getState().verticalLine.set({visible : false})
-      }
-      if (isObjectInHorizontalCenter(e.target)) {
-        use3dddPlus.getState().verticalLine.set({visible : true});
-      }else{
-        use3dddPlus.getState().verticalLine.set({visible : false});
-      }
-      if (isObjectInVerticalCenter(e.target)) {
-        use3dddPlus.getState().horizontalLine.set({visible : true});
-      }else{
-        use3dddPlus.getState().horizontalLine.set({visible : false});
-      }*/
+    if (isObjectInCenter(e.target)) {
+      use3dddPlus.getState().verticalLine.set({
+        visible: true
+      });
+    } else {
+      use3dddPlus.getState().verticalLine.set({
+        visible: false
+      });
+    }
+    if (isObjectInHorizontalCenter(e.target)) {
+      use3dddPlus.getState().verticalLine.set({
+        visible: true
+      });
+    } else {
+      use3dddPlus.getState().verticalLine.set({
+        visible: false
+      });
+    }
+    if (isObjectInVerticalCenter(e.target)) {
+      use3dddPlus.getState().horizontalLine.set({
+        visible: true
+      });
+    } else {
+      use3dddPlus.getState().horizontalLine.set({
+        visible: false
+      });
+    }
   };
-
   var canv = new fabric.Canvas('canvas', {
     centeredScaling: true,
     preserveObjectStacking: true,
@@ -4349,45 +4414,45 @@ var initCanvas = function initCanvas() {
     width: 900,
     height: 500
   });
-  /* function isObjectInCenter(obj) {
-     var canvasCenterX = canv.width / 2;
-     var canvasCenterY = canv.height / 2;
-     var objCenterX = obj.left + obj.width / 2;
-     var objCenterY = obj.top + obj.height / 2;
-     var threshold = 5;
-     return Math.abs(objCenterY - canvasCenterY) < threshold && Math.abs(objCenterX - canvasCenterX) < threshold;
-   }
-  
-   function isObjectInVerticalCenter(obj) {
-     var canvasCenterY = canv.height / 2;
-     var scaledObjCenterY = obj.top + obj.height / 2;;
-     var threshold = 5;
-     return Math.abs(scaledObjCenterY - canvasCenterY) < threshold;
-   }
-  
-   function isObjectInHorizontalCenter(obj) {
-     var canvasCenterX = canv.width / 2;
-     var scaledObjCenterX = obj.left + obj.width / 2;
-     var threshold = 5;
-     return Math.abs(scaledObjCenterX - canvasCenterX) < threshold;
-   }
-  
-   const horizontalLine = new fabric.Line([0 , canv.height / 2 , canv.height , canv.height / 2], {
-     stroke: "red",
-     scaleX: 1000,
-     visible:false,
-     selectable: false,
-   });
-  
-   const verticalLine = new fabric.Line([canv.width / 2, 0 , canv.width/2 , canv.width], {
-     stroke: "red",
-     visible:false,
-     selectable: false,
-   });*/
-  // canv.add(horizontalLine); 
-  // canv.add(verticalLine); 
-  // use3dddPlus.setState({ horizontalLine: horizontalLine });
-  // use3dddPlus.setState({ verticalLine: verticalLine });
+  function isObjectInCenter(obj) {
+    var canvasCenterX = canv.width / 2;
+    var canvasCenterY = canv.height / 2;
+    var objCenterX = obj.left + obj.width / 2;
+    var objCenterY = obj.top + obj.height / 2;
+    var threshold = 5;
+    return Math.abs(objCenterY - canvasCenterY) < threshold && Math.abs(objCenterX - canvasCenterX) < threshold;
+  }
+  function isObjectInVerticalCenter(obj) {
+    var canvasCenterY = canv.height / 2;
+    var scaledObjCenterY = obj.top + obj.height / 2;
+    var threshold = 5;
+    return Math.abs(scaledObjCenterY - canvasCenterY) < threshold;
+  }
+  function isObjectInHorizontalCenter(obj) {
+    var canvasCenterX = canv.width / 2;
+    var scaledObjCenterX = obj.left + obj.width / 2;
+    var threshold = 5;
+    return Math.abs(scaledObjCenterX - canvasCenterX) < threshold;
+  }
+  var horizontalLine = new fabric.Line([0, canv.height / 2, canv.height, canv.height / 2], {
+    stroke: "red",
+    scaleX: 1000,
+    visible: false,
+    selectable: false
+  });
+  var verticalLine = new fabric.Line([canv.width / 2, 0, canv.width / 2, canv.width], {
+    stroke: "red",
+    visible: false,
+    selectable: false
+  });
+  canv.add(horizontalLine);
+  canv.add(verticalLine);
+  use3dddPlus.setState({
+    horizontalLine: horizontalLine
+  });
+  use3dddPlus.setState({
+    verticalLine: verticalLine
+  });
   // console.log('HISTORY-->',historyInit());
   var deleteImg = document.createElement('img');
   deleteImg.src = 'https://storage.googleapis.com/3ddplusgcp/logoEditor/assets/icons/delete.png';
@@ -4457,29 +4522,29 @@ var initCanvas = function initCanvas() {
   function deleteObject(eventData, transform) {
     var canvasTarget = transform.target;
     var canvas = canvasTarget.canvas;
-    if (use3dddPlus.getState().selectedAll || canvasTarget && !canvasTarget.icon) {
-      var target = transform.target._objects;
-      target.forEach(function (element) {
-        canvas.remove(element);
-        canvas.requestRenderAll();
-        removeItem(element);
-      });
-      use3dddPlus.setState({
-        selectedAll: false
-      });
-      canvas.discardActiveObject().renderAll();
-    } else {
-      canvas.remove(canvasTarget);
-      canvas.requestRenderAll();
-      removeItem(canvasTarget);
-    }
+    // if (use3dddPlus.getState().selectedAll || canvasTarget && !canvasTarget.icon) {
+    // const target = transform.target._objects;
+    // target.forEach((element) => {
+    //   canvas.remove(element);
+    //   canvas.requestRenderAll();
+    //   removeItem(element);
+    // });
+    // use3dddPlus.setState({ selectedAll: false });
+    // canvas.discardActiveObject().renderAll();
+    // } else {
+    canvas.remove(canvasTarget);
+    canvas.requestRenderAll();
+    removeItem(canvasTarget);
+    // }
     // use3dddPlus.setState({ defaultColorFill: [] });
   }
 
   var removeItem = function removeItem(value) {
-    //@ts-ignore
-    var index = use3dddPlus.getState().storeAllObject.indexOf(value);
-    if (index === -1) {
+    //@ts-ignore    
+    var index = use3dddPlus.getState().storeAllObject.findIndex(function (obj) {
+      return obj.id === value.id;
+    });
+    if (index === -1 && value && value._objects && value._objects.length > 0) {
       //@ts-ignore
       var index = use3dddPlus.getState().storeAllObject.indexOf(value._objects[0]);
     }
@@ -4546,25 +4611,36 @@ var initCanvas = function initCanvas() {
   canv.on('selection:cleared', onObjectDeselected);
   canv.on('selection:updated', onObjectUpdated);
   canv.on('object:moving', onObjectMoving);
-  canv.on('object:modified', function () {
+  canv.on('object:modified', function (e) {
     use3dddPlus.getState().updateModifaction(true);
-    /*  if (isObjectInCenter(e.target)) {
-        use3dddPlus.getState().verticalLine.set({visible : true})
-      }else{
-        use3dddPlus.getState().verticalLine.set({visible : false})
-      }
-      if (isObjectInHorizontalCenter(e.target)) {
-        use3dddPlus.getState().horizontalLine.set({visible : true});
-      }else{
-        use3dddPlus.getState().horizontalLine.set({visible : false});
-      }
-      if (isObjectInVerticalCenter(e.target)) {
-        use3dddPlus.getState().horizontalLine.set({visible : true});
-      }else{
-        use3dddPlus.getState().horizontalLine.set({visible : false});
-      }*/
+    if (isObjectInCenter(e.target)) {
+      use3dddPlus.getState().verticalLine.set({
+        visible: true
+      });
+    } else {
+      use3dddPlus.getState().verticalLine.set({
+        visible: false
+      });
+    }
+    if (isObjectInHorizontalCenter(e.target)) {
+      use3dddPlus.getState().horizontalLine.set({
+        visible: true
+      });
+    } else {
+      use3dddPlus.getState().horizontalLine.set({
+        visible: false
+      });
+    }
+    if (isObjectInVerticalCenter(e.target)) {
+      use3dddPlus.getState().horizontalLine.set({
+        visible: true
+      });
+    } else {
+      use3dddPlus.getState().horizontalLine.set({
+        visible: false
+      });
+    }
   });
-
   canv.on('object:scaling', function (e) {
     var obj = e.target;
     obj.setCoords();
@@ -4618,7 +4694,11 @@ var ContextMenu = function ContextMenu() {
   var sendBackwards = function sendBackwards() {
     canvas.sendBackwards(activeObj);
     //@ts-ignore
-    var index = use3dddPlus.getState().storeAllObject.indexOf(activeObj);
+    // var index = use3dddPlus.getState().storeAllObject.indexOf(activeObj);
+    //@ts-ignore
+    var index = use3dddPlus.getState().storeAllObject.findIndex(function (obj) {
+      return obj.id === activeObj.id;
+    });
     if (index > -1) {
       use3dddPlus.getState().storeAllObject.splice(index, 1);
       //@ts-ignore
@@ -4635,7 +4715,9 @@ var ContextMenu = function ContextMenu() {
   var bringForward = function bringForward() {
     canvas.bringForward(activeObj);
     //@ts-ignore
-    var index = use3dddPlus.getState().storeAllObject.indexOf(activeObj);
+    var index = use3dddPlus.getState().storeAllObject.findIndex(function (obj) {
+      return obj.id === activeObj.id;
+    });
     if (index > -1) {
       if (index !== 0) {
         use3dddPlus.getState().storeAllObject.splice(index, 1);
@@ -4654,7 +4736,9 @@ var ContextMenu = function ContextMenu() {
   var sendToBack = function sendToBack() {
     canvas.sendToBack(activeObj);
     //@ts-ignore
-    var index = use3dddPlus.getState().storeAllObject.indexOf(activeObj);
+    var index = use3dddPlus.getState().storeAllObject.findIndex(function (obj) {
+      return obj.id === activeObj.id;
+    });
     if (index > -1) {
       use3dddPlus.getState().storeAllObject.splice(index, 1);
       //@ts-ignore
@@ -4671,7 +4755,9 @@ var ContextMenu = function ContextMenu() {
   var bringToFront = function bringToFront() {
     canvas.bringToFront(activeObj);
     //@ts-ignore
-    var index = use3dddPlus.getState().storeAllObject.indexOf(activeObj);
+    var index = use3dddPlus.getState().storeAllObject.findIndex(function (obj) {
+      return obj.id === activeObj.id;
+    });
     if (index > -1) {
       use3dddPlus.getState().storeAllObject.splice(index, 1);
       //@ts-ignore
@@ -4790,6 +4876,7 @@ var canvas = function canvas() {
   };
   React.useEffect(function () {
     fabric.Object.prototype.hasControls = true;
+    fabric.Object.prototype.hasBorders = true;
     var canv = initCanvas();
     use3dddPlus.setState({
       fabricCanvas: canv
@@ -5408,6 +5495,7 @@ var ColorPalette = function ColorPalette(_ref) {
     handleColorChange(color, index);
   };
   return React.createElement(React.Fragment, null, React.createElement("div", {
+    id: "colorPalette",
     className: "right-[10.6rem] z-10 max-h-[16.4375rem] border border-[#FCE8EB] before:bg-[#ffffff] shadow-[0px_3px_6px_rgba(0,0,0,0.16)] py-[1.8125rem] px-[1.4063rem] bg-[#fff] mt-[1.875rem] mr-[1rem] absolute h-[300px]",
     style: style
   }, (colorList == null ? void 0 : colorList.length) > 0 && React.createElement(React.Fragment, null, React.createElement("p", {
@@ -5512,6 +5600,8 @@ var ColorImpl = function ColorImpl(props) {
       background: props.color === 'transparent' ? '#FFFFFF' : props.color
     },
     onClick: function onClick(event) {
+      event.stopPropagation();
+      event.preventDefault();
       setdisplayPallet(function (prev) {
         return !prev;
       });
@@ -5722,8 +5812,15 @@ var PopUpCanvas = function PopUpCanvas() {
       _canvas.renderAll();
     }
   };
+  var removeColorPalatte = function removeColorPalatte() {
+    var pallete = document.getElementById('colorPalette');
+    if (pallete) {
+      pallete.parentElement.click();
+    }
+  };
   useEffect(function () {
     fabric.Object.prototype.hasControls = false;
+    fabric.Object.prototype.hasBorders = false;
     setDefaultColorFill([]);
     setHasUploadScreen(true);
     var popupCanv = Initpopup();
@@ -5732,6 +5829,7 @@ var PopUpCanvas = function PopUpCanvas() {
     });
     resizeCanvas();
     window.addEventListener('resize', resizeCanvas);
+    window.addEventListener('click', removeColorPalatte);
     //FOR REMOVING COLOR
     popupCanv.on('mouse:down', function (event) {
       popupCanv.discardActiveObject();
@@ -5780,10 +5878,12 @@ var PopUpCanvas = function PopUpCanvas() {
 
     return function () {
       setHasUploadScreen(false);
+      window.removeEventListener('click', removeColorPalatte);
     };
   }, []);
   var popupCanvasCancel = function popupCanvasCancel() {
     fabric.Object.prototype.hasControls = true;
+    fabric.Object.prototype.hasBorders = true;
     setDefaultColorFill([]);
     use3dddPlus.setState({
       uploadImageModalDisplay: false
@@ -5798,6 +5898,7 @@ var PopUpCanvas = function PopUpCanvas() {
   };
   var popupCanvasContinue = function popupCanvasContinue() {
     fabric.Object.prototype.hasControls = true;
+    fabric.Object.prototype.hasBorders = true;
     //@ts-ignore
     use3dddPlus.setState({
       uploadImageModalDisplay: false
@@ -5860,6 +5961,7 @@ var PopUpCanvas = function PopUpCanvas() {
     use3dddPlus.setState({
       popupCanvasStoreHistory: []
     });
+    use3dddPlus.getState().updateModifaction(true);
   };
   var RGBToHex = function RGBToHex(rgb) {
     var sep = rgb.indexOf(',') > -1 ? ',' : ' ';
@@ -6098,7 +6200,9 @@ var PopUpCanvas = function PopUpCanvas() {
       label: "Select Color",
       icon: React.createElement(GiDrop, null),
       onClick: function onClick(event) {
-        return onSelectColor(item, event);
+        event.stopPropagation();
+        event.preventDefault();
+        onSelectColor(item, event);
       },
       className: '!rounded-none pointer-events-auto cursor-pointer flex  text-[#E11A38]  w-[30px] h-[30px] p-[6px]',
       size: "1.125rem"
@@ -6650,6 +6754,7 @@ var MyLogo$1 = function MyLogo(_ref) {
   }];
   var handleEditLogo = function handleEditLogo(logo) {
     fabric.Object.prototype.hasControls = true;
+    fabric.Object.prototype.hasBorders = true;
     if (logo) {
       use3dddPlus.setState({
         logoSearchText: '',
@@ -7529,6 +7634,7 @@ var Rightmenu = function Rightmenu() {
     canvas.add(newTextPath);
     newTextPath['pathData'] = textSelected.pathData;
     newTextPath['colorFill'] = textSelected.colorFill;
+    newTextPath['id'] = textSelected.id;
     newTextPath['shapeSize'] = val;
     newTextPath['shapeType'] = textSelected.shapeType;
     // carry forward the text properties over the path for further changes
@@ -7840,7 +7946,10 @@ var Rightmenu = function Rightmenu() {
   }();
   var updateStoreAllObject = function updateStoreAllObject(text) {
     // @ts-ignore
-    var index = use3dddPlus.getState().storeAllObject.indexOf(textSelected);
+    // var index = use3dddPlus.getState().storeAllObject.indexOf(textSelected);
+    var index = use3dddPlus.getState().storeAllObject.findIndex(function (obj) {
+      return obj.id === textSelected.id;
+    });
     if (index > -1) {
       use3dddPlus.getState().storeAllObject.splice(index, 1);
     }
@@ -7870,16 +7979,18 @@ var Rightmenu = function Rightmenu() {
     if (currentSelection === 'path') {
       textShapeChange(textSelected.shapeType, true);
     }
-    var textWidth = textSelected.width;
-    var canvasWidth = canvas.width - textSelected.left;
-    if (textWidth > canvasWidth) {
-      var newFontSize = canvasWidth / textWidth * textSelected.fontSize;
+    // let textWidth = textSelected.width;
+    var canvasWidth = canvas.width;
+    var brNew = textSelected.getBoundingRect();
+    if (brNew.width + brNew.left >= textSelected.canvas.width - 5) {
+      var newFontSize = canvasWidth / (brNew.width + brNew.left) * textSelected.fontSize;
       textSelected.set('fontSize', newFontSize);
     }
     textSelected.set('text', use3dddPlus.getState().textInfo);
     use3dddPlus.getState().forIconCapture();
     textSelected.icon = use3dddPlus.getState().iconImage;
     canvas.renderAll();
+    use3dddPlus.getState().updateModifaction(true);
   };
   var textAlignHandler = function textAlignHandler(e) {
     console.log(e.target.id);
@@ -7894,12 +8005,20 @@ var Rightmenu = function Rightmenu() {
     canvas.renderAll();
   };
   var handleSliderChange = function handleSliderChange(event) {
-    textSelected.set('fontSize', event.target.value);
-    if (currentSelection === 'path') {
-      textShapeChange(textSelected.shapeType, true);
+    var brNew = textSelected.getBoundingRect();
+    if (brNew.width + brNew.left >= textSelected.canvas.width || brNew.height + brNew.top >= textSelected.canvas.height || brNew.left < 0 || brNew.top < 0) {
+      textSelected.set('fontSize', event.target.value - 1);
+      if (currentSelection === 'path') {
+        textShapeChange(textSelected.shapeType, true);
+      }
+    } else {
+      textSelected.set('fontSize', event.target.value);
+      if (currentSelection === 'path') {
+        textShapeChange(textSelected.shapeType, true);
+      }
+      canvas.renderAll();
+      // setSliderValue(event.target.value);
     }
-    canvas.renderAll();
-    // setSliderValue(event.target.value);
   };
 
   var fontChange = function fontChange(e) {
@@ -8025,7 +8144,9 @@ var Rightmenu = function Rightmenu() {
   };
   var removeItem = function removeItem(value) {
     //@ts-ignore
-    var index = use3dddPlus.getState().storeAllObject.indexOf(value);
+    var index = use3dddPlus.getState().storeAllObject.findIndex(function (obj) {
+      return obj.id === value.id;
+    });
     if (index > -1) {
       use3dddPlus.getState().storeAllObject.splice(index, 1);
     }
@@ -8034,7 +8155,6 @@ var Rightmenu = function Rightmenu() {
     });
   };
   var changeSVGTextColor = function changeSVGTextColor(property, color) {
-    use3dddPlus.getState().updateModifaction(true);
     var previousColor = property;
     canvas.getObjects().map(function (data) {
       if (data.type === 'text') {
@@ -8055,7 +8175,10 @@ var Rightmenu = function Rightmenu() {
           var _C = ele.fill === 'transparent' ? ele.fill : ele.fill.includes('#') ? ele.fill : RGBToHex(ele.fill);
           if (_C === previousColor) {
             ele.set({
-              fill: color
+              fill: color,
+              colorFill: {
+                layer0: color
+              }
             });
           }
         });
@@ -8076,30 +8199,42 @@ var Rightmenu = function Rightmenu() {
       }
     });
     canvas.renderAll();
-    // use3dddPlus.getState().updateModifaction(true);
+    use3dddPlus.getState().updateModifaction(true);
   };
-
   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);
+      var _C = ele.fill === 'transparent' ? ele.fill : ele.fill.includes('#') ? ele.fill : RGBToHex(ele.fill);
       if (_C === previousColor) {
         ele.set({
-          fill: color
+          fill: color,
+          colorFill: {
+            layer0: color
+          }
         });
       }
     });
+    var tempColorFill = _extends({}, SelectedObjet.colorFill);
+    Object.keys(tempColorFill).forEach(function (item) {
+      if (tempColorFill[item] === previousColor) {
+        tempColorFill[item] = color;
+      }
+    });
+    SelectedObjet.set({
+      colorFill: tempColorFill
+    });
     canvas.renderAll();
-    fillColor[property] = color;
+    // fillColor[property] = color;
+    // use3dddPlus.setState({ colorFill: fillColor });
     use3dddPlus.setState({
-      colorFill: fillColor
+      colorFill: tempColorFill
     });
-    use3dddPlus.getState().updateModifaction(true);
     use3dddPlus.getState().forIconCapture();
-    textSelected.icon = use3dddPlus.getState().iconImage;
+    SelectedObjet.icon = use3dddPlus.getState().iconImage;
+    use3dddPlus.getState().updateModifaction(true);
   };
   var RGBToHex = function RGBToHex(rgb) {
     var sep = rgb.indexOf(',') > -1 ? ',' : ' ';
@@ -8145,14 +8280,24 @@ var Rightmenu = function Rightmenu() {
       use3dddPlus.getState().toastMessages.noIteminCanvas();
     }
   };
+  var removeColorPalatte = function removeColorPalatte() {
+    var pallete = document.getElementById('colorPalette');
+    if (pallete) {
+      pallete.parentElement.click();
+    }
+  };
   useEffect(function () {
+    window.addEventListener('click', removeColorPalatte);
     var unSub = use3dddPlus.subscribe(function (state) {
       return state.colorFill;
     }, function (_current, _previous) {
       // console.log("_PREVIUS_COLORFIL" , _previous);
       // console.log("_CURRENT_COLOR",_current);
     });
-    return unSub;
+    return function () {
+      window.removeEventListener('click', removeColorPalatte);
+      unSub();
+    };
   }, []);
   // console.log("====>",activeSelection,currentSelection)
   return React.createElement("div", {
@@ -8354,9 +8499,7 @@ var Rightmenu = function Rightmenu() {
       property: item,
       color: activeSelection.colorFill[item]
     });
-  }))), (allColor && allColor.includes('transparent') ? allColor.length - 1 : allColor.length) > 8 && React.createElement(errorPopup, {
-    allColor: allColor
-  }), React.createElement(React.Fragment, null, React.createElement("div", {
+  }))), React.createElement(React.Fragment, null, React.createElement("div", {
     className: "my-[24.5px]"
   }, React.createElement("p", {
     className: "text-[1rem] text-[#353535] flex text-left leading-[21px] font-bold mb-[12px] uppercase"