@threedddplus/logoeditor 0.0.172 → 0.0.174

package/dist/logoeditor.esm.js

@@ -14681,6 +14681,9 @@ var SaveDesign = function SaveDesign(_ref) {
   var _useState = useState(''),
     designNameValidation = _useState[0],
     setDesignNameValidation = _useState[1];
+  //@ts-ignore
+  var tempCanvas = new fabric.Canvas();
+  var dataURL = '';
   var _useState2 = useState(false),
     commaInTagName = _useState2[0],
     setCommaInTagName = _useState2[1];
@@ -14712,21 +14715,110 @@ var SaveDesign = function SaveDesign(_ref) {
       return nameValidation;
     } else return true;
   };
+  /*
+  const getBounds = (objects)=> {
+    const minX = Math.min(...objects.map(obj => obj.left));
+    const minY = Math.min(...objects.map(obj => obj.top));
+    const maxX = Math.max(...objects.map(obj => obj.left + obj.width * obj.scaleX));
+    const maxY = Math.max(...objects.map(obj => obj.top + obj.height * obj.scaleY));
+    return {
+        minX: minX,
+        minY: minY,
+        width: maxX - minX,
+        height: maxY - minY
+    };
+  }
+  const cropAndConvert = async()=>{
+  const activeObjects = canvas.getObjects();
+                       
+      if (activeObjects.length > 0) {
+    // Create a new canvas element to handle the selected objects
+    const croppedCanvas = document.createElement('canvas');
+    const croppedContext = croppedCanvas.getContext('2d');
+        // Calculate the size of the new canvas to fit all selected objects
+    const bounds = getBounds(activeObjects);
+    croppedCanvas.width = bounds.width;
+    croppedCanvas.height = bounds.height;
+        // Draw each object onto the new canvas
+    activeObjects.forEach((obj) => {
+        const left = obj.left - bounds.minX;
+        const top = obj.top - bounds.minY;
+            if (obj.type === 'group') {
+            obj._objects.forEach(element => {
+                const elLeft = element.left + obj.left - bounds.minX;
+                const elTop = element.top + obj.top - bounds.minY;
+                console.log(element.type)
+                if (element.type === 'image') {
+                    const imgElement = element._element;
+                    croppedContext.drawImage(
+                        imgElement,
+                        0, 0, imgElement.width, imgElement.height,
+                        elLeft, elTop,
+                        element.width * element.scaleX, element.height * element.scaleY
+                    );
+                } else if (element.type === 'text') {
+                    croppedContext.font = `${element.fontSize}px ${element.fontFamily}`;
+                    croppedContext.fillStyle = element.fill;
+                    croppedContext.fillText(
+                        element.text,
+                        elLeft,
+                        elTop + element.fontSize
+                    );
+                }else if (element.type === 'path') {
+                  const path = new Path2D(element.path);
+                  croppedContext.fillStyle = element.fill;
+                  croppedContext.translate(elLeft, elTop);
+                  croppedContext.fill(path);
+                  croppedContext.translate(-elLeft, -elTop);
+              }
+            });
+        }
+            if (obj.type === 'image') {
+            const imgElement = obj._element;
+            croppedContext.drawImage(
+                imgElement,
+                0, 0, imgElement.width, imgElement.height,
+                left, top,
+                obj.width * obj.scaleX, obj.height * obj.scaleY
+            );
+        } else if (obj.type === 'text') {
+            croppedContext.font = `${obj.fontSize}px ${obj.fontFamily}`;
+            croppedContext.fillStyle = obj.fill;
+            croppedContext.fillText(
+                obj.text,
+                left,
+                top + obj.fontSize
+            );
+        }else if (obj.type === 'path') {
+          const path = new Path2D(obj.path);
+          croppedContext.fillStyle = obj.fill;
+          croppedContext.translate(left, top);
+          croppedContext.fill(path);
+          croppedContext.translate(-left, -top);
+      }
+    });
+           
+                
+                // Convert the new canvas to a data URL in JPG format and download it
+                const dataUrl = croppedCanvas.toDataURL();
+                console.log(dataUrl);
+            }
+  }*/
   var onSaveHandler = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-      var canvasGetobject, pathTextsData, dataURL, canvasData, pathTextsKeys, i, pathData, o, obj, dataCh, S3UrlPath, canvasSvg, raw, horizontalLine, verticalLine;
-      return _regeneratorRuntime().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+      var canvasGetobject, pathTextsData, selectAllCanvasObjects, canvasData, pathTextsKeys, i, pathData, o, obj, dataCh, S3UrlPath, canvasSvg, raw, horizontalLine, verticalLine;
+      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
           case 0:
             if (isSaving) {
-              _context.next = 30;
+              _context2.next = 31;
               break;
             }
             if (checkValidations()) {
-              _context.next = 3;
+              _context2.next = 3;
               break;
             }
-            return _context.abrupt("return");
+            return _context2.abrupt("return");
           case 3:
             setIsSaving(true);
             canvas.backgroundColor = null;
@@ -14768,12 +14860,68 @@ var SaveDesign = function SaveDesign(_ref) {
                 };
               }
             });
-            dataURL = canvas.toDataURL();
-            canvasData = use3dddPlus.getState().applyColorFill(); // const canvasGetobject = canvas.getObjects();
-            // canvasData.objects.forEach((element, index) => {
-            //   element.colorFill = canvasGetobject[index].colorFill;
-            // });
-            // looping through the text shape objects & taking out text data to inject in the canvas json data & save
+            selectAllCanvasObjects = function selectAllCanvasObjects(padding) {
+              if (padding === void 0) {
+                padding = 20;
+              }
+              //@ts-ignore
+              return new Promise(function (resolve, reject) {
+                var objs = canvas.getObjects().map(function (obj) {
+                  return obj.set('active', true);
+                });
+                var group = new fabric.ActiveSelection(objs, {
+                  canvas: canvas,
+                  originX: 'center',
+                  originY: 'center'
+                });
+                canvas.setActiveObject(group);
+                canvas.requestRenderAll();
+                group.clone(function (clonedGroup) {
+                  var boundingRect = clonedGroup.getBoundingRect();
+                  var paddedWidth = boundingRect.width + 2 * padding;
+                  var paddedHeight = boundingRect.height + 2 * padding;
+                  tempCanvas.setWidth(paddedWidth);
+                  tempCanvas.setHeight(paddedHeight);
+                  clonedGroup.left = padding + boundingRect.left;
+                  clonedGroup.top = padding + boundingRect.top;
+                  clonedGroup.setCoords();
+                  tempCanvas.add(clonedGroup);
+                  clonedGroup.center();
+                  clonedGroup.setCoords();
+                  tempCanvas.requestRenderAll();
+                  var dataURL = tempCanvas.toDataURL();
+                  tempCanvas.clear();
+                  tempCanvas.dispose();
+                  clonedGroup = null;
+                  canvas.discardActiveObject();
+                  resolve(dataURL);
+                });
+              });
+            };
+            _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+              return _regeneratorRuntime().wrap(function _callee$(_context) {
+                while (1) switch (_context.prev = _context.next) {
+                  case 0:
+                    _context.prev = 0;
+                    _context.next = 3;
+                    return selectAllCanvasObjects();
+                  case 3:
+                    dataURL = _context.sent;
+                    console.log(dataURL); // This will log the data URL
+                    _context.next = 10;
+                    break;
+                  case 7:
+                    _context.prev = 7;
+                    _context.t0 = _context["catch"](0);
+                    console.error('Error capturing canvas objects:', _context.t0);
+                  case 10:
+                  case "end":
+                    return _context.stop();
+                }
+              }, _callee, null, [[0, 7]]);
+            }))();
+            //  const dataURL = canvas.toDataURL();
+            canvasData = use3dddPlus.getState().applyColorFill(); // looping through the text shape objects & taking out text data to inject in the canvas json data & save
             pathTextsKeys = Object.keys(pathTextsData);
             for (i = 0; i < pathTextsKeys.length; i++) {
               pathData = pathTextsData[pathTextsKeys[i]];
@@ -14785,10 +14933,10 @@ var SaveDesign = function SaveDesign(_ref) {
               }
             }
             dataCh = JSON.stringify(canvasData); // console.log('SAVE-->',dataCh);
-            _context.next = 16;
+            _context2.next = 17;
             return uploadLogoConfig(dataCh, use3dddPlus.getState().customerId);
-          case 16:
-            S3UrlPath = _context.sent;
+          case 17:
+            S3UrlPath = _context2.sent;
             canvasSvg = canvas.toSVG();
             closeModal('', false, '', {});
             raw = JSON.stringify({
@@ -14832,18 +14980,18 @@ var SaveDesign = function SaveDesign(_ref) {
               setIsSaving(false);
               console.log('ERROR in Save Logo:', ex);
             });
-          case 30:
+          case 31:
             use3dddPlus.setState({
               logoName: ''
             });
             use3dddPlus.setState({
               logoTag: []
             });
-          case 32:
+          case 33:
           case "end":
-            return _context.stop();
+            return _context2.stop();
         }
-      }, _callee);
+      }, _callee2);
     }));
     return function onSaveHandler() {
       return _ref2.apply(this, arguments);