@threedddplus/logoeditor 0.0.66 → 0.0.68

package/dist/logoeditor.esm.js

@@ -2412,15 +2412,45 @@ var fabricSlice = function fabricSlice(set, get) {
               clonedObj.canvas = get().fabricCanvas;
               clonedObj.forEachObject(function (obj, index) {
                 obj.colorFill = activeObj._objects[index].colorFill;
+                // copy all path text data & clone text props as well(text with shapes applied)
+                if (activeObj.type === 'path' && activeObj.pathData !== undefined) {
+                  obj.pathData = activeObj.pathData;
+                  obj.shapeSize = activeObj.shapeSize;
+                  obj.shapeType = activeObj.shapeType;
+                  obj.fontFamily = activeObj.fontFamily;
+                  obj.fontWeight = activeObj.fontWeight;
+                  obj.fontSize = activeObj.fontSize;
+                  obj.charSpacing = activeObj.charSpacing;
+                  obj.textAlign = activeObj.textAlign;
+                  obj.fontStyle = activeObj.fontStyle;
+                  obj.text = activeObj.text;
+                }
                 get().fabricCanvas.add(obj);
               });
               clonedObj.setCoords();
             } else {
               clonedObj.colorFill = activeObj.colorFill;
+              // copy all path text data & clone text props as well(text with shapes applied)
+              if (activeObj.type === 'path' && activeObj.pathData !== undefined) {
+                clonedObj.pathData = activeObj.pathData;
+                clonedObj.shapeSize = activeObj.shapeSize;
+                clonedObj.shapeType = activeObj.shapeType;
+                clonedObj.fontFamily = activeObj.fontFamily;
+                clonedObj.fontWeight = activeObj.fontWeight;
+                clonedObj.fontSize = activeObj.fontSize;
+                clonedObj.charSpacing = activeObj.charSpacing;
+                clonedObj.textAlign = activeObj.textAlign;
+                clonedObj.fontStyle = activeObj.fontStyle;
+                clonedObj.text = activeObj.text;
+              }
               get().fabricCanvas.add(clonedObj);
             }
             clipboard.top += 20;
             clipboard.left += 20;
+            if (activeObj && activeObj.shapeType && activeObj.shapeType.length > 0) {
+              clonedObj.shapeType = activeObj.shapeType;
+              clonedObj.shapeSize = activeObj.shapeSize;
+            }
             get().fabricCanvas.setActiveObject(clonedObj);
             clonedObj.set({
               left: clonedObj.left + 20,
@@ -3507,7 +3537,7 @@ var optionpresets = {
     pathomit: 8,
     rightangleenhance: true,
     // Color quantization
-    colorsampling: 10,
+    colorsampling: 1,
     numberofcolors: 8,
     mincolorratio: 0,
     colorquantcycles: 3,
@@ -3526,6 +3556,62 @@ var optionpresets = {
     blurradius: 0,
     blurdelta: 20
   },
+  'png': {
+    // Tracing
+    corsenabled: true,
+    ltres: 0.08,
+    qtres: 0.1,
+    pathomit: 8,
+    rightangleenhance: true,
+    // Color quantization
+    colorsampling: 10,
+    numberofcolors: 8,
+    mincolorratio: 0,
+    colorquantcycles: 3,
+    // Layering method
+    layering: 0,
+    // SVG rendering
+    strokewidth: 1,
+    linefilter: false,
+    scale: 1,
+    roundcoords: 1,
+    viewbox: false,
+    desc: false,
+    lcpr: 0,
+    qcpr: 0,
+    // Blur
+    blurradius: 0,
+    blurdelta: 20 //20
+  },
+
+  'jpg': {
+    // Tracing
+    corsenabled: true,
+    ltres: 0.9,
+    qtres: 0.9,
+    pathomit: 16,
+    rightangleenhance: true,
+    // Color quantization
+    colorsampling: 5,
+    numberofcolors: 8,
+    mincolorratio: 0,
+    colorquantcycles: 10,
+    // Layering method
+    layering: 0,
+    // SVG rendering
+    strokewidth: 1,
+    linefilter: false,
+    scale: 1,
+    roundcoords: 1,
+    viewbox: false,
+    desc: false,
+    lcpr: 0,
+    qcpr: 0,
+    // Blur
+    blurradius: 0.5,
+    blurdelta: 10 //20
+  },
+
   'posterized1': {
     colorsampling: 0,
     numberofcolors: 2
@@ -3880,7 +3966,7 @@ var converterSlice = function converterSlice(set, get) {
       }
       return loadImageFromURL;
     }(),
-    imageToSVG: function imageToSVG(data, isSVG, convert) {
+    imageToSVG: function imageToSVG(data, ext, isSVG, convert) {
       if (isSVG === void 0) {
         isSVG = false;
       }
@@ -3909,7 +3995,7 @@ var converterSlice = function converterSlice(set, get) {
               imageData: svgstr
             });
             processImage(svgstr, 8);
-          }, optionpresets["default"]);
+          }, ext && (ext.toLowerCase() === "jpg" || ext.toLowerCase() === "jpeg") ? optionpresets.jpg : ext.toLowerCase() === "png" ? optionpresets.png : optionpresets["default"]);
         }
       } else {
         processImage(data, 8);
@@ -4601,6 +4687,7 @@ var initCanvas = function initCanvas() {
     getAllColors();
   };
   var onObjectMoving = function onObjectMoving(e) {
+    console.log('onMoveing', e);
     use3dddPlus.getState().updateModifaction(false);
     var obj = e.target;
     // if (
@@ -4692,14 +4779,14 @@ var initCanvas = function initCanvas() {
     return Math.abs(scaledObjCenterX - canvasCenterX) < threshold;
   }
   var horizontalLine = new fabric.Line([0, canv.height / 2, canv.height, canv.height / 2], {
-    stroke: 'red',
+    stroke: "red",
     scaleX: 11,
     visible: false,
     selectable: false,
     type: 'line'
   });
   var verticalLine = new fabric.Line([canv.width / 2, 0, canv.width / 2, canv.width], {
-    stroke: 'red',
+    stroke: "red",
     visible: false,
     selectable: false,
     type: 'line'
@@ -4820,14 +4907,13 @@ var initCanvas = function initCanvas() {
   }
 
   var removeItem = function removeItem(value) {
-    //@ts-ignore
+    //@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) {
-      var index = use3dddPlus.getState()
       //@ts-ignore
-      .storeAllObject.indexOf(value._objects[0]);
+      var index = use3dddPlus.getState().storeAllObject.indexOf(value._objects[0]);
     }
     if (index > -1) {
       use3dddPlus.getState().storeAllObject.splice(index, 1);
@@ -4942,6 +5028,19 @@ var initCanvas = function initCanvas() {
       height1 = obj.height;
     }
   });
+  canv.on('object:rotating', function (e) {
+    var obj = e.target;
+    if (obj.getBoundingRect().top < 0 || obj.getBoundingRect().left < 0) {
+      obj.top = Math.max(obj.top, obj.top - obj.getBoundingRect().top);
+      obj.left = Math.max(obj.left, obj.left - obj.getBoundingRect().left);
+      obj.setCoords();
+    }
+    if (obj.getBoundingRect().top + obj.getBoundingRect().height > obj.canvas.height || obj.getBoundingRect().left + obj.getBoundingRect().width > obj.canvas.width) {
+      obj.top = Math.min(obj.top, obj.canvas.height - obj.getBoundingRect().height + obj.top - obj.getBoundingRect().top);
+      obj.left = Math.min(obj.left, obj.canvas.width - obj.getBoundingRect().width + obj.left - obj.getBoundingRect().left);
+      obj.setCoords();
+    }
+  });
   return canv;
 };
 
@@ -6140,13 +6239,15 @@ var PopUpCanvas = function PopUpCanvas() {
       // Iterate through objects on the canvas and check if any intersect with the mouse click
       var removedColors = [];
       use3dddPlus.getState().popUpCanvasUpdateModification(true);
+      var color;
       popupCanv.forEachObject(function (obj) {
         if (obj.type === 'path') {
           //@ts-ignore
-          if (obj.containsPoint(mouseClick)) {
+          if (obj.containsPoint(mouseClick) && !color) {
             removedColors.push(obj.fill);
             popupCanv.remove(obj);
             popupCanv.renderAll();
+            color = obj.fill;
           }
         }
       });
@@ -6602,7 +6703,12 @@ var PopUpCanvas = function PopUpCanvas() {
         textAlign: 'center',
         marginBottom: '3px'
       }
-    }, c.updated);
+    }, React.createElement("span", {
+      style: {
+        color: '#ffffff',
+        mixBlendMode: 'difference'
+      }
+    }, c.updated));
   })), React.createElement("div", {
     className: "text-[#E11A38]",
     style: {
@@ -6675,7 +6781,7 @@ var UploadLogo = function UploadLogo() {
               _context.next = 5;
               break;
             }
-            imageToSVG(data, true);
+            imageToSVG(data, ext, true);
             _context.next = 29;
             break;
           case 5:
@@ -6687,7 +6793,7 @@ var UploadLogo = function UploadLogo() {
             return pdfConverter(data);
           case 8:
             pdfData = _context.sent;
-            imageToSVG(pdfData);
+            imageToSVG(pdfData, ext);
             _context.next = 29;
             break;
           case 12:
@@ -6699,7 +6805,7 @@ var UploadLogo = function UploadLogo() {
             return tiffConvert(data);
           case 15:
             tiffData = _context.sent;
-            imageToSVG(tiffData);
+            imageToSVG(tiffData, ext);
             _context.next = 29;
             break;
           case 19:
@@ -6719,13 +6825,13 @@ var UploadLogo = function UploadLogo() {
             fetch(aiToSvg.s3_file_url).then(function (response) {
               return response.text();
             }).then(function (svgText) {
-              imageToSVG(svgText, false, false);
+              imageToSVG(svgText, ext, false, false);
             });
             _context.next = 29;
             break;
           case 27:
             objectURL = URL.createObjectURL(data);
-            imageToSVG(objectURL);
+            imageToSVG(objectURL, ext);
           case 29:
             setSelectedFile(null);
           case 30:
@@ -8228,8 +8334,8 @@ var Rightmenu = function Rightmenu() {
             });
             _text.left = textSelected.left;
             _text.top = textSelected.top;
-            _text.width = textSelected.width;
-            _text.height = textSelected.height;
+            _text.width = _text.getBoundingRect().width;
+            _text.height = _text.getBoundingRect().height;
             _text.scaleX = textSelected.scaleX;
             _text.scaleY = textSelected.scaleY;
             // delete the active text object
@@ -8240,14 +8346,17 @@ var Rightmenu = function Rightmenu() {
             // Add the text object keeping same properties
             canvas.add(_text);
             _text.setCoords();
-            //@ts-ignore
-            use3dddPlus.getState().forIconCapture();
-            _text['icon'] = use3dddPlus.getState().iconImage;
-            updateStoreAllObject(_text);
+            // set active object as path text
             canvas.setActiveObject(_text);
             use3dddPlus.setState({
               activeSelection: _text
             });
+            //@ts-ignore
+            use3dddPlus.getState().forIconCapture();
+            _text['icon'] = use3dddPlus.getState().iconImage;
+            updateStoreAllObject(_text);
+            // canvas.setActiveObject(text);
+            // use3dddPlus.setState({ activeSelection: text });
             canvas.renderAll();
             // cancel performing further functions & return back from function
             return _context2.abrupt("return");
@@ -8460,14 +8569,33 @@ var Rightmenu = function Rightmenu() {
     canvas.renderAll();
   };
   var handleSliderChange = function handleSliderChange(event) {
-    var brNew = textSelected.getBoundingRect();
+    var fontSize = textSelected.fontSize;
+    var toReduceSize = event.target.value - fontSize;
+    var dublicateText = textSelected;
+    // let brNew;
+    dublicateText.set('fontSize', event.target.value);
+    // if (currentSelection === 'path') {
+    //   textShapeChange(dublicateText.shapeType, true);
+    //   brNew = use3dddPlus.getState().activeSelection.getBoundingRect();
+    // } else {
+    //   brNew = dublicateText.getBoundingRect();
+    // }
+    var brNew = dublicateText.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') {
+        textSelected.set('fontSize', event.target.value - (Math.sign(toReduceSize) >= 0 ? toReduceSize : 1));
         textShapeChange(textSelected.shapeType, true);
+      } else {
+        if (brNew.left < 0) {
+          textSelected.set('left', textSelected.left + 1);
+        }
+        if (brNew.top < 0) {
+          textSelected.set('top', textSelected.top + 1);
+        }
+        textSelected.set('fontSize', event.target.value - (Math.sign(toReduceSize) >= 0 ? toReduceSize : 1));
       }
     } else {
-      if (textSelected.fontSize > event.target.value) {
+      if (fontSize > event.target.value) {
         textSelected.set('top', textSelected.top + 1);
         textSelected.set('left', textSelected.left + 1);
       } else {
@@ -8987,7 +9115,7 @@ var Rightmenu = function Rightmenu() {
     id: "shapeSize",
     name: "shapeSize",
     step: "10",
-    value: textSelected.shapeSize ? textSelected.shapeSize : shapeSizeVal,
+    value: shapeSizeVal,
     className: "border border-[#EBEBEB] py-[10px] pl-[16px] mb-[16.5px] w-[145px]",
     onChange: textShapeSizeHandler
   })))), currentSelection === 'group' && React.createElement(React.Fragment, null, React.createElement("div", {
@@ -9105,7 +9233,12 @@ var Rightmenu = function Rightmenu() {
         textAlign: 'center',
         marginBottom: '3px'
       }
-    }, c);
+    }, React.createElement("span", {
+      style: {
+        color: '#ffffff',
+        mixBlendMode: 'difference'
+      }
+    }, c));
   }))), React.createElement("button", {
     type: "button",
     className: "mt-3 inline-flex justify-center  bg-white px-[110px] py-2 text-sm font-medium text-[#E11A38] shadow-sm ring-1 ring-inset ring-[#E11A38] hover:bg-gray-50 sm:mt-0  w-full",