@threedddplus/logoeditor 0.0.2 → 0.0.3

package/dist/logoeditor.esm.js

@@ -1237,40 +1237,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 () {
@@ -2486,7 +2523,7 @@ var AddMascots = function AddMascots(props) {
     }, {
       tag: 'g',
       attr: {
-        'clip-path': 'url(#a)'
+        'clipPath': 'url(#a)'
       },
       child: [{
         tag: 'path',
@@ -2568,7 +2605,7 @@ var ProductColor = function ProductColor(props) {
     }, {
       tag: 'g',
       attr: {
-        'clip-path': 'url(#a)'
+        'clipPath': 'url(#a)'
       },
       child: [{
         tag: 'path',
@@ -2617,7 +2654,7 @@ var FlipH = function FlipH(props) {
       tag: 'g',
       attr: {
         'data-name': 'Group 577',
-        'clip-path': 'url(#a)',
+        'clipPath': 'url(#a)',
         fill: '#353535'
       },
       child: [{
@@ -2753,7 +2790,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)'
           },
@@ -3166,7 +3203,7 @@ var EyeDropper = function EyeDropper(props) {
     }, {
       tag: 'g',
       attr: {
-        'clip-path': 'url(#a)'
+        'clipPath': 'url(#a)'
       },
       child: [{
         tag: 'path',
@@ -3532,9 +3569,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
@@ -3928,6 +3969,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.createElement(ColorBox, {
+      key: "main-" + mainIndex + "-" + index,
       color: color,
       index: index,
       onClick: function onClick() {
@@ -3943,6 +3985,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.createElement(ColorBox, {
+      key: "previous-" + mainIndex + "-" + index,
       color: color,
       index: 'previous' + index,
       onClick: function onClick() {
@@ -4581,7 +4624,6 @@ var MyLogo$1 = function MyLogo(_ref) {
     if (logo) {
       onApply();
       setLogoSelected(false);
-      console.log('handleApplyLogo', logo);
     }
   };
   return React.createElement(React.Fragment, null, React.createElement("div", {
@@ -4601,8 +4643,10 @@ var MyLogo$1 = function MyLogo(_ref) {
     className: "flex ml-[33px]  mt-[30px] overflow-y-auto overflow-x-hidden h-[65vh]"
   }, React.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.createElement(React.Fragment, null, React.createElement(Card, {
+  }, retriveLogoDesign.length > 0 ? retriveLogoDesign.map(function (logo, index) {
+    return React.createElement(React.Fragment, {
+      key: index
+    }, React.createElement(Card, {
       cardClass: "rounded-none bg-white cursor-pointer",
       style: {
         boxShadow: '0px 0px 6px #98989829'
@@ -4793,14 +4837,14 @@ var ImageEdit = function ImageEdit(_ref) {
   }, "Flip"), React.createElement("div", {
     className: "flex gap-x-[1rem] mt-[12px]"
   }, React.createElement(IconButton, {
-    key: "index",
+    key: "index_flipX",
     label: "",
     icon: React.createElement(FlipH, null),
     onClick: flipX,
     className: "w-[45px] h-[45px] bg-[#fff] cursor-pointer border border-[#EBEBEB]",
     size: "1.8rem"
   }), React.createElement(IconButton, {
-    key: "index",
+    key: "index_flipY",
     label: "",
     onClick: flipY,
     icon: React.createElement(FlipV, null),
@@ -5226,9 +5270,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.createElement(React.Fragment, null, React.createElement("option", {
-      value: list.name
+      value: list.name,
+      key: index
     }, list.name));
   })), React.createElement("div", {
     className: "uppercase font-bold text-sm mb-[8.5px]"
@@ -5365,7 +5410,7 @@ var Rightmenu = function Rightmenu() {
     className: "uppercase font-bold pt-[17px]"
   }, "Color in Canvas"), React.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.createElement(ColorImpl, {
       mClass: 'ml-[36px]',
       key: item,
@@ -5373,7 +5418,7 @@ var Rightmenu = function Rightmenu() {
       property: item,
       color: item
     });
-  })), React.createElement("button", {
+  }))), React.createElement("button", {
     onClick: nudgeMove,
     id: "down",
     className: "font-medium text-orange-400"
@@ -5417,7 +5462,7 @@ var Rightmenu = function Rightmenu() {
     className: "uppercase font-bold pt-[17px]"
   }, "Color in Canvas"), React.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.createElement(ColorImpl, {
       mClass: 'ml-[36px]',
       key: item,
@@ -5425,7 +5470,7 @@ var Rightmenu = function Rightmenu() {
       property: item,
       color: item
     });
-  })))), React.createElement("button", {
+  }))))), 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",
     onClick: onSave
@@ -5864,7 +5909,6 @@ var LogoEditor = function LogoEditor(_ref) {
     setSelectedStepper(stepperId);
     if (stepperId == undefined) {
       myLogoHandler(logoData);
-      console.log('logoData', logoData);
     }
   }, [stepperId]);
   React.useEffect(function () {
@@ -5877,7 +5921,6 @@ var LogoEditor = function LogoEditor(_ref) {
       defaultColorList: defaultColorList
     });
   }, [defaultColorList]);
-  console.log('defaultColorList', defaultColorList);
   return (
     // <Modal
     //   backdropStyle={`z-[7]`}