@threedddplus/logoeditor 0.0.2 → 0.0.3

package/dist/logoeditor.cjs.development.js

@@ -1244,40 +1244,77 @@ var fabricSlice = function fabricSlice(set, get) {
         return console.log('error', error);
       });
     },
+    // loadingRetrivedFiles: (data: any) => {
+    //   let canvas = use3dddPlus.getState().fabricCanvas;
+    //   canvas.loadFromJSON(JSON.parse(data), function () {
+    //     canvas.renderAll.bind(canvas);
+    //     use3dddPlus.setState({ selectedStepper: undefined });
+    //     let objImage = canvas?.getObjects()._objects;
+    //     let _Fills = [];
+    //     objImage?.forEach((ele) => {
+    //       ele.set({ strokeWidth: 0 });
+    //       use3dddPlus.setState({ fillColor: [...ele.fill] });
+    //       _Fills.push(ele.fill);
+    //     });
+    //     use3dddPlus.setState({
+    //       //@ts-ignore
+    //       fillColor: use3dddPlus.getState().removeDuplicates(_Fills),
+    //     });
+    //     //@ts-ignore
+    //     _Fills = use3dddPlus.getState().removeDuplicates(_Fills);
+    //     const fillColors = {};
+    //     _Fills.map((item, index) => {
+    //       fillColors['layer' + index] = item;
+    //     });
+    //     use3dddPlus.setState({ colorFill: fillColors });
+    //     canvas?.getObjects().set({
+    //       colorFill: fillColors,
+    //       // setControlVisible:false,
+    //     });
+    //   });
+    // },
     loadingRetrivedFiles: function loadingRetrivedFiles(data) {
       var canvas = use3dddPlus.getState().fabricCanvas;
       canvas.loadFromJSON(JSON.parse(data), function () {
-        canvas.renderAll.bind(canvas);
+        canvas.renderAll();
         use3dddPlus.setState({
           selectedStepper: undefined
         });
-        var objImage = canvas.getObjects()._objects;
-        var _Fills = [];
+        var objImage = canvas == null ? void 0 : canvas.getObjects();
         objImage == null ? void 0 : objImage.forEach(function (ele) {
-          ele.set({
-            strokeWidth: 0
-          });
-          use3dddPlus.setState({
-            fillColor: [].concat(ele.fill)
-          });
-          _Fills.push(ele.fill);
+          if (ele.type === 'path') {
+            // Assuming SVG paths have fill property
+            var fillColor = ele.fill;
+            ele.set({
+              strokeWidth: 0
+            });
+            use3dddPlus.setState({
+              fillColor: [].concat(fillColor)
+            });
+          }
         });
-        use3dddPlus.setState({
-          //@ts-ignore
-          fillColor: use3dddPlus.getState().removeDuplicates(_Fills)
+        var _Fills = objImage == null ? void 0 : objImage.filter(function (ele) {
+          return ele.type === 'path';
+        }).map(function (ele) {
+          return ele.fill;
         });
-        //@ts-ignore
         _Fills = use3dddPlus.getState().removeDuplicates(_Fills);
-        var fillColors = {};
-        _Fills.map(function (item, index) {
-          fillColors['layer' + index] = item;
-        });
+        var fillColors = _Fills.reduce(function (colors, item, index) {
+          colors['layer' + index] = item;
+          return colors;
+        }, {});
         use3dddPlus.setState({
+          fillColor: _Fills,
           colorFill: fillColors
         });
-        canvas.getObjects().set({
-          colorFill: fillColors
+        objImage == null ? void 0 : objImage.filter(function (ele) {
+          return ele.type === 'path';
+        }).forEach(function (obj) {
+          obj.set({
+            colorFill: fillColors
+          });
         });
+        canvas == null ? void 0 : canvas.renderAll();
       });
     },
     uploadLogoConfig: function () {
@@ -2493,7 +2530,7 @@ var AddMascots = function AddMascots(props) {
     }, {
       tag: 'g',
       attr: {
-        'clip-path': 'url(#a)'
+        'clipPath': 'url(#a)'
       },
       child: [{
         tag: 'path',
@@ -2575,7 +2612,7 @@ var ProductColor = function ProductColor(props) {
     }, {
       tag: 'g',
       attr: {
-        'clip-path': 'url(#a)'
+        'clipPath': 'url(#a)'
       },
       child: [{
         tag: 'path',
@@ -2624,7 +2661,7 @@ var FlipH = function FlipH(props) {
       tag: 'g',
       attr: {
         'data-name': 'Group 577',
-        'clip-path': 'url(#a)',
+        'clipPath': 'url(#a)',
         fill: '#353535'
       },
       child: [{
@@ -2760,7 +2797,7 @@ var FlipV = function FlipV(props) {
           tag: 'g',
           attr: {
             'data-name': 'Group 577',
-            'clip-path': 'url(#a)',
+            'clipPath': 'url(#a)',
             fill: '#353535',
             transform: 'rotate(90 12.239 21.239)'
           },
@@ -3173,7 +3210,7 @@ var EyeDropper = function EyeDropper(props) {
     }, {
       tag: 'g',
       attr: {
-        'clip-path': 'url(#a)'
+        'clipPath': 'url(#a)'
       },
       child: [{
         tag: 'path',
@@ -3539,9 +3576,13 @@ var initCanvas = function initCanvas() {
     if (!(canv != null && canv.getObjects())) {
       return;
     }
-    var allColor = [].concat(new Set(canv == null ? void 0 : (_canv$getObjects = canv.getObjects()) == null ? void 0 : _canv$getObjects.map(function (item) {
-      return Object.values(item['colorFill']);
-    }).flat())); // FOR REMOVING ALL DUPLICATE COLOR CODES
+    var allColor = new Set(canv == null ? void 0 : (_canv$getObjects = canv.getObjects()) == null ? void 0 : _canv$getObjects.map(function (item) {
+      // Check if 'item' and 'colorFill' are not undefined or null
+      if (item && item['colorFill'] != null) {
+        return Object.values(item['colorFill']);
+      }
+      return [];
+    }).flat()); // FOR REMOVING ALL DUPLICATE COLOR CODES
     // const allColor =[];
     use3dddPlus.setState({
       allColor: allColor
@@ -3935,6 +3976,7 @@ var ColorPalette = function ColorPalette(_ref) {
     className: "flex flex-wrap gap-x-[0.8125rem] gap-y-[0.3125rem] pb-[2.0938rem] max-h-[3.75rem] overflow-y-auto"
   }, colorList == null ? void 0 : colorList.map(function (color, index) {
     return React__default.createElement(ColorBox, {
+      key: "main-" + mainIndex + "-" + index,
       color: color,
       index: index,
       onClick: function onClick() {
@@ -3950,6 +3992,7 @@ var ColorPalette = function ColorPalette(_ref) {
     className: "flex flex-wrap gap-x-[0.8125rem] gap-y-[0.3125rem] border-b border-b-[#EBEBEB] " + previousClass
   }, previousColor == null ? void 0 : previousColor.map(function (color, index) {
     return React__default.createElement(ColorBox, {
+      key: "previous-" + mainIndex + "-" + index,
       color: color,
       index: 'previous' + index,
       onClick: function onClick() {
@@ -4588,7 +4631,6 @@ var MyLogo$1 = function MyLogo(_ref) {
     if (logo) {
       onApply();
       setLogoSelected(false);
-      console.log('handleApplyLogo', logo);
     }
   };
   return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
@@ -4608,8 +4650,10 @@ var MyLogo$1 = function MyLogo(_ref) {
     className: "flex ml-[33px]  mt-[30px] overflow-y-auto overflow-x-hidden h-[65vh]"
   }, React__default.createElement("div", {
     className: "max-h-[140px] grid gap-3.5 grid-cols-3 md:grid-cols-4 lg:grid-cols-5  w-full "
-  }, retriveLogoDesign.length > 0 ? retriveLogoDesign.map(function (logo) {
-    return React__default.createElement(React__default.Fragment, null, React__default.createElement(Card, {
+  }, retriveLogoDesign.length > 0 ? retriveLogoDesign.map(function (logo, index) {
+    return React__default.createElement(React__default.Fragment, {
+      key: index
+    }, React__default.createElement(Card, {
       cardClass: "rounded-none bg-white cursor-pointer",
       style: {
         boxShadow: '0px 0px 6px #98989829'
@@ -4800,14 +4844,14 @@ var ImageEdit = function ImageEdit(_ref) {
   }, "Flip"), React__default.createElement("div", {
     className: "flex gap-x-[1rem] mt-[12px]"
   }, React__default.createElement(IconButton, {
-    key: "index",
+    key: "index_flipX",
     label: "",
     icon: React__default.createElement(FlipH, null),
     onClick: flipX,
     className: "w-[45px] h-[45px] bg-[#fff] cursor-pointer border border-[#EBEBEB]",
     size: "1.8rem"
   }), React__default.createElement(IconButton, {
-    key: "index",
+    key: "index_flipY",
     label: "",
     onClick: flipY,
     icon: React__default.createElement(FlipV, null),
@@ -5233,9 +5277,10 @@ var Rightmenu = function Rightmenu() {
     id: "FontStyleNumber",
     onChange: fontChange,
     className: INPUT_BG_COLOR + " font-bold " + TEXT_COLOR_1 + " " + TEXT_SIZE_3 + " border border-solid\t " + BORDER_COLOR_1 + " select select-bordered w-full rounded-none focus:outline-current focus:outline-offset-0 focus:rounded-sm  mb-[16.5px]"
-  }, fontFamilies.map(function (list) {
+  }, fontFamilies.map(function (list, index) {
     return React__default.createElement(React__default.Fragment, null, React__default.createElement("option", {
-      value: list.name
+      value: list.name,
+      key: index
     }, list.name));
   })), React__default.createElement("div", {
     className: "uppercase font-bold text-sm mb-[8.5px]"
@@ -5372,7 +5417,7 @@ var Rightmenu = function Rightmenu() {
     className: "uppercase font-bold pt-[17px]"
   }, "Color in Canvas"), React__default.createElement("div", {
     className: "flex gap-x-[1rem] mt-[12px] mb-[12px]"
-  }, allColor == null ? void 0 : allColor.map(function (item) {
+  }, allColor.length > 0 && (allColor == null ? void 0 : allColor.map(function (item) {
     return React__default.createElement(ColorImpl, {
       mClass: 'ml-[36px]',
       key: item,
@@ -5380,7 +5425,7 @@ var Rightmenu = function Rightmenu() {
       property: item,
       color: item
     });
-  })), React__default.createElement("button", {
+  }))), React__default.createElement("button", {
     onClick: nudgeMove,
     id: "down",
     className: "font-medium text-orange-400"
@@ -5424,7 +5469,7 @@ var Rightmenu = function Rightmenu() {
     className: "uppercase font-bold pt-[17px]"
   }, "Color in Canvas"), React__default.createElement("div", {
     className: "flex gap-x-[1rem] mt-[12px]"
-  }, allColor == null ? void 0 : allColor.map(function (item) {
+  }, allColor.length > 0 && (allColor == null ? void 0 : allColor.map(function (item) {
     return React__default.createElement(ColorImpl, {
       mClass: 'ml-[36px]',
       key: item,
@@ -5432,7 +5477,7 @@ var Rightmenu = function Rightmenu() {
       property: item,
       color: item
     });
-  })))), React__default.createElement("button", {
+  }))))), React__default.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",
     onClick: onSave
@@ -5871,7 +5916,6 @@ var LogoEditor = function LogoEditor(_ref) {
     setSelectedStepper(stepperId);
     if (stepperId == undefined) {
       myLogoHandler(logoData);
-      console.log('logoData', logoData);
     }
   }, [stepperId]);
   React__default.useEffect(function () {
@@ -5884,7 +5928,6 @@ var LogoEditor = function LogoEditor(_ref) {
       defaultColorList: defaultColorList
     });
   }, [defaultColorList]);
-  console.log('defaultColorList', defaultColorList);
   return (
     // <Modal
     //   backdropStyle={`z-[7]`}