@threedddplus/logoeditor 0.0.7 → 0.0.9

package/dist/logoeditor.esm.js

@@ -1021,6 +1021,8 @@ var historySlice = function historySlice(set, _get) {
 
 var fabricSlice = function fabricSlice(set, get) {
   return {
+    popUpCanvasCount: 0,
+    popupCanvasStoreHistory: [],
     availableMascots: [],
     filteredMascots: [],
     logoData: null,
@@ -1071,12 +1073,13 @@ var fabricSlice = function fabricSlice(set, get) {
     forIconCapture: function forIconCapture() {
       var activeObject = get().fabricCanvas.getActiveObject();
       if (activeObject) {
-        var dataURL = get().fabricCanvas.toDataURL({
-          left: activeObject.left,
-          top: activeObject.top,
-          width: activeObject.width * activeObject.scaleX,
-          height: activeObject.height * activeObject.scaleY
-        });
+        // const dataURL = get().fabricCanvas.toDataURL({
+        //   left: activeObject.left,
+        //   top: activeObject.top,
+        //   width: activeObject.width * activeObject.scaleX,
+        //   height: activeObject.height * activeObject.scaleY,
+        // });
+        var dataURL = activeObject.toDataURL('image/png');
         set({
           iconImage: dataURL
         });
@@ -1341,7 +1344,51 @@ var fabricSlice = function fabricSlice(set, get) {
         };
       });
     },
-    popUpCanvasAllColor: []
+    popUpCanvasAllColor: [],
+    popUpCanvasApplyColorFill: function popUpCanvasApplyColorFill() {
+      var popUpCanvasData = get().popupCanv.toJSON();
+      var popUpCanvasGetobject = get().popupCanv.getObjects();
+      popUpCanvasData.objects.forEach(function (element, index) {
+        element.colorFill = popUpCanvasGetobject[index].colorFill;
+      });
+      console.log(popUpCanvasGetobject);
+      return popUpCanvasData;
+    },
+    popUpCanvasUpdateModification: function popUpCanvasUpdateModification(toSet) {
+      if (toSet) {
+        var historyObject = {
+          colorFill: get().colorFill,
+          json: get().popUpCanvasApplyColorFill()
+        };
+        set(function (state) {
+          return _extends({}, state, {
+            popupCanvasStoreHistory: [].concat(state.popupCanvasStoreHistory, [historyObject])
+          });
+        });
+      }
+    },
+    popUpCanvasUndo: function popUpCanvasUndo() {
+      if (get().popUpCanvasCount < get().popupCanvasStoreHistory.length) {
+        var _V = get().popupCanvasStoreHistory.length - 1 - get().popUpCanvasCount - 1;
+        get().popupCanv.clear().renderAll();
+        get().popupCanv.loadFromJSON(get().popupCanvasStoreHistory[_V].json);
+        set({
+          colorFill: get().popupCanvasStoreHistory[_V].colorFill
+        });
+        get().popupCanv.renderAll();
+        get().popUpCanvasCount += 1;
+      }
+    },
+    popUpCanvasRedo: function popUpCanvasRedo() {
+      if (get().popUpCanvasCount > 0) {
+        get().popupCanv.clear().renderAll();
+        get().popupCanv.loadFromJSON(get().popupCanvasStoreHistory[get().popupCanvasStoreHistory.length - 1 - get().popUpCanvasCount + 1]);
+        get().popupCanv.renderAll();
+        get().popUpCanvasCount -= 1;
+      }
+    },
+    forPopupCanvasReset: null,
+    forPopupCanvasColor: {}
   };
 };
 
@@ -2040,7 +2087,78 @@ var converterSlice = function converterSlice(set, get) {
     imageToSVG: function imageToSVG(data) {
       use3dddPlus.setState({
         uploadImageModalDisplay: true
-      }); // FOR POPUP CANVAS VISIBLE
+      });
+      //  ImageTracer.imageToSVG(
+      //    data,
+      //    function (svgstr) {
+      //      fabric.loadSVGFromString(
+      //        //@ts-ignore
+      //        new String(svgstr),
+      //        function (objects, options) {
+      //          let loadedObject = fabric.util.groupSVGElements(
+      //            objects,
+      //            options
+      //          );
+      //          // console.log("LOADEDOBJECT--->",data);
+      //          loadedObject.scaleToHeight(300);
+      //          loadedObject.scaleToWidth(300);
+      //          //@ts-ignore
+      //          let objImage = loadedObject._objects;
+      //          let _Fills = [];
+      //          objImage.forEach((ele) => {
+      //            ele.set({ strokeWidth: 0 });
+      //            set({ fillColor: [...ele.fill] });
+      //            let _C = get().RGBToHex(ele.fill);
+      //            _Fills.push(_C);
+      //          });
+      //          //@ts-ignore
+      //          set({ fillColor: get().removeDuplicates(_Fills) });
+      //          //@ts-ignore
+      //          _Fills = get().removeDuplicates(_Fills);
+      //          const fillColors = {};
+      //          _Fills.map((item, index) => {
+      //            fillColors['layer' + index] = item;
+      //          });
+      //          use3dddPlus.setState({ colorFill: fillColors });
+      //          //FOR POPUP CANVAS
+      //          loadedObject.set({
+      //            //@ts-ignore
+      //            colorFill: fillColors,
+      //            hasControls: false,
+      //            hasBorders: false,
+      //            lockMovementX: true,
+      //            lockMovementY: true,
+      //          });
+      //          // for main canvas use this
+      //          console.log('fillColors-->', fillColors);
+      //          loadedObject.set({
+      //            colorFill: fillColors,
+      //            //@ts-ignore
+      //            setControlVisible: false,
+      //          });
+      //          //-------- use CANVAS INSTEAD OF POPCANVAS--------
+      //          use3dddPlus.getState().popupCanv.add(loadedObject).renderAll();
+      //          use3dddPlus.getState().popupCanv.centerObject(loadedObject);
+      //          let _U = use3dddPlus.getState().popupCanv.toJSON();
+      //          const _G = use3dddPlus.getState().popupCanv.getObjects();
+      //          _U.objects.forEach((element, index) => {
+      //            element.colorFill = _G[index].colorFill;
+      //          });
+      //          use3dddPlus.setState({
+      //            forPopupCanvasReset: JSON.stringify(_U),
+      //            forPopupCanvasColor: { ...fillColors },
+      //          });
+      //          // popupCanvas.setActiveObject(loadedObject);
+      //          // use3dddPlus.setState({activeSelection: loadedObject});
+      //          // loadedObject.setControlVisible("mtr", false);
+      //          // use3dddPlus.getState().forStoringAllObject(loadedObject);//for pushing the data into array for layers
+      //        }
+      //      );
+      //    },
+      //    // options
+      //    //@ts-ignore
+      //    optionpresets.default
+      //  );// FOR POPUP CANVAS VISIBLE
       ImageTracer.imageToSVG(data, function (svgstr) {
         fabric.loadSVGFromString(
         //@ts-ignore
@@ -4263,12 +4381,13 @@ var Initpopup = function Initpopup() {
 var PopUpCanvas = function PopUpCanvas() {
   var _Object$keys;
   var _use3dddPlus = use3dddPlus(function (state) {
-      return [state.popupCanv, state.fabricCanvas, state.colorFill, state.changeSVGColor];
+      return [state.popupCanv, state.fabricCanvas, state.colorFill, state.changeSVGColor, state.popUpCanvasUndo];
     }, shallow),
     popupCanvas = _use3dddPlus[0],
     canvas = _use3dddPlus[1],
     colorFill = _use3dddPlus[2],
-    changeSVGColor = _use3dddPlus[3];
+    changeSVGColor = _use3dddPlus[3],
+    popUpCanvasUndo = _use3dddPlus[4];
   var _useState = useState(3),
     colorCount = _useState[0],
     setColorCount = _useState[1];
@@ -4347,6 +4466,23 @@ var PopUpCanvas = function PopUpCanvas() {
     popupCanvas.getActiveObject().clone(function (cloned) {
       clipboard = cloned;
     });
+    // if (clipboard.type === 'activeSelection') {
+    //   clipboard.canvas = canvas;
+    //   const objs = [];
+    //   clipboard.forEachObject(function (obj) {
+    //     objs.push(obj);
+    //   });
+    //   const alltogetherObj = new fabric.Group(objs, {});
+    //   canvas.centerObject(alltogetherObj);
+    //   canvas.add(alltogetherObj);
+    //   canvas.setActiveObject(alltogetherObj);
+    //   alltogetherObj.setCoords();
+    //   use3dddPlus.getState().forStoringAllObject(alltogetherObj); //for pushing the data into array for layers
+    // } else {
+    //   canvas.add(clipboard);
+    // }
+    // canvas.requestRenderAll();
+    // popupCanvas.clear();
     if (clipboard.type === 'activeSelection') {
       clipboard.canvas = canvas;
       var objs = [];
@@ -4357,13 +4493,33 @@ var PopUpCanvas = function PopUpCanvas() {
       canvas.centerObject(alltogetherObj);
       canvas.add(alltogetherObj);
       canvas.setActiveObject(alltogetherObj);
+      alltogetherObj.set({
+        //@ts-ignore
+        colorFill: use3dddPlus.getState().colorFill
+      });
       alltogetherObj.setCoords();
       use3dddPlus.getState().forStoringAllObject(alltogetherObj); //for pushing the data into array for layers
+      use3dddPlus.getState().forIconCapture();
+      //@ts-ignore
+      alltogetherObj.icon = use3dddPlus.getState().iconImage;
     } else {
       canvas.add(clipboard);
     }
     canvas.requestRenderAll();
     popupCanvas.clear();
+    use3dddPlus.setState({
+      popupCanvasStoreHistory: []
+    });
+  };
+  var resetHandler = function resetHandler() {
+    console.log(use3dddPlus.getState().forPopupCanvasReset);
+    popupCanvas.clear();
+    popupCanvas.loadFromJSON(use3dddPlus.getState().forPopupCanvasReset, function () {
+      use3dddPlus.setState({
+        colorFill: _extends({}, use3dddPlus.getState().forPopupCanvasColor)
+      });
+      popupCanvas.renderAll();
+    });
   };
   return React.createElement(React.Fragment, null, React.createElement("div", {
     className: "flex z-10 overflow-y-auto"
@@ -4387,7 +4543,8 @@ var PopUpCanvas = function PopUpCanvas() {
   })), React.createElement("div", {
     className: "btnCont absolute flex flex-wrap top-0 right-0 p-10"
   }, React.createElement("div", {
-    className: "undoBtn cursor-pointer mr-4"
+    className: "undoBtn cursor-pointer mr-4",
+    onClick: popUpCanvasUndo
   }, React.createElement("div", {
     className: "undoIcon float-left"
   }, React.createElement("svg", {
@@ -4402,7 +4559,8 @@ var PopUpCanvas = function PopUpCanvas() {
   }))), React.createElement("span", {
     className: "iconLabel float-left text-[#727272] ml-2 text-[13px] font-bold "
   }, "Undo")), React.createElement("div", {
-    className: "resetBtn cursor-pointer"
+    className: "resetBtn cursor-pointer",
+    onClick: resetHandler
   }, React.createElement("div", {
     className: "resetBtn float-left"
   }, React.createElement("svg", {
@@ -5146,6 +5304,13 @@ var Rightmenu = function Rightmenu() {
       textInfo: activeSelection.text
     });
   }, [activeSelection]);
+  useEffect(function () {
+    if (currentSelection === 'text' || currentSelection === 'group' || currentSelection === 'selectAll' || currentSelection === 'none') {
+      setActiveTab(1);
+    } else if (currentSelection === 'layer') {
+      setActiveTab(2);
+    }
+  }, [currentSelection]);
   var onTextChange = function onTextChange(e) {
     var lines = e.target.value.split('\n');
     lines.length == 1 ? setTextAlignDisplay(false) : setTextAlignDisplay(true);
@@ -5419,322 +5584,332 @@ var Rightmenu = function Rightmenu() {
       key: tab.id,
       className: (activeTab === tab.id ? 'bg-[#E11A38] text-white' : 'bg-[#fff] text-gray-800') + " py-[10px] px-[40px]  focus:outline-none uppercase text-[13px] font-bold",
       onClick: function onClick() {
-        return setActiveTab(tab.id);
+        setActiveTab(tab.id);
+        if (tab.id === 1) {
+          use3dddPlus.setState({
+            currentSelection: 'none'
+          });
+          canvas.discardActiveObject();
+          canvas.renderAll();
+        }
+        if (tab.id === 2) {
+          use3dddPlus.setState({
+            currentSelection: 'layer'
+          });
+        }
       }
     }, tab.label);
   })), React.createElement("div", {
     className: "bg-gray-100 p-4"
-  }, tabs.map(function (tab) {
-    return activeTab === 1 && tab.id === 1 ? React.createElement("div", {
-      key: tab.id
-    }, React.createElement("div", {
-      className: "h-[50vh] sm:h-[55vh] 2xl:h-[60vh] overflow-y-auto overflow-x-hidden"
-    }, currentSelection === 'text' && React.createElement("div", {
-      className: " "
+  }, activeTab === 1 && React.createElement("div", {
+    key: activeTab
+  }, React.createElement("div", {
+    className: "h-[50vh] sm:h-[55vh] 2xl:h-[60vh] overflow-y-auto overflow-x-hidden"
+  }, currentSelection === 'text' && React.createElement("div", {
+    className: " "
+  }, React.createElement("div", {
+    className: "uppercase font-bold text-sm mb-[8.5px]"
+  }, "Enter Text"), React.createElement("textarea", {
+    value: textInfo,
+    onChange: onTextChange,
+    className: "w-[100%] border border-solid-[1px] border-[#9A9A9A] py-[10px] pl-[16px] mb-[16.5px]",
+    placeholder: "LOGO TEXT"
+  }), React.createElement("div", {
+    className: "uppercase font-bold text-sm mb-[8.5px]"
+  }, "Select Font"), React.createElement("select", {
+    name: "FontStyleNumber",
+    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) {
+    return React.createElement(React.Fragment, null, React.createElement("option", {
+      value: list.name
+    }, list.name));
+  })), React.createElement("div", {
+    className: "uppercase font-bold text-sm mb-[8.5px]"
+  }, "TEXT SIZE"), React.createElement("input", {
+    type: "range",
+    value: sliderValue,
+    onChange: handleSliderChange,
+    className: " rangeSlider w-full mb-[16.5px]",
+    id: "slider",
+    style: {
+      background: "linear-gradient(to right, #e11a38 0%, #e11a38 " + sliderValue + "%, #fff " + sliderValue + "%, #fff 100%)"
+    }
+  }), React.createElement("div", {
+    className: "uppercase font-bold text-sm mb-[8.5px]"
+  }, "Style"), React.createElement("div", {
+    className: "flex gap-x-[15px] mb-[16.5px]"
+  }, ' ', React.createElement("button", {
+    className: fontStyle.bold ? SELECT_BG_COLOR + " text-[#fff] text-base cursor-pointer border font-bold border-[#EBEBEB]  py-[7px] px-[39px] " : 'bg-[#fff]  font-bold text-base cursor-pointer border border-[#EBEBEB] py-[7px] px-[39px]',
+    onClick: function onClick(e) {
+      return textStyle(e, 'fontWeight', 'bold');
+    },
+    id: "bold"
+  }, "B"), React.createElement("button", {
+    className: fontStyle.italic ? SELECT_BG_COLOR + " text-[#fff] text-base cursor-pointer border italic border-[#EBEBEB]  py-[7px] px-[39px] " : 'bg-[#fff]  italic text-base cursor-pointer border border-[#EBEBEB] py-[7px] px-[39px]',
+    onClick: function onClick(e) {
+      return textStyle(e, 'fontStyle', 'italic');
+    },
+    id: "italic"
+  }, "I"), React.createElement("button", {
+    className: fontStyle.underline ? SELECT_BG_COLOR + " text-[#fff] text-base cursor-pointer border underline border-[#EBEBEB]  py-[7px] px-[39px] " : 'bg-[#fff]  underline text-base cursor-pointer border border-[#EBEBEB] py-[7px] px-[39px]',
+    onClick: function onClick(e) {
+      return textStyle(e, 'underline', !fontStyle.underline);
+    },
+    id: "underline"
+  }, "U")), textAlignDisplay === true && React.createElement("div", {
+    className: "textAlign"
+  }, React.createElement("div", {
+    className: "uppercase font-bold text-sm mb-[8.5px]"
+  }, "Align"), React.createElement("div", {
+    className: "flex gap-x-[15px] mb-[16.5px]"
+  }, React.createElement("button", {
+    type: "button",
+    className: 'left' === activeButton ? SELECT_BG_COLOR + " text-[#fff] cursor-pointer border border-[#EBEBEB]  py-[7px] px-[39px] " : 'bg-[#fff]  cursor-pointer border border-[#EBEBEB] py-[7px] px-[39px]',
+    id: "left",
+    onClick: textAlignHandler
+  }, React.createElement(FiAlignLeft, {
+    id: "left",
+    onClick: textAlignHandler
+  })), React.createElement("button", {
+    type: "button",
+    className: 'center' === activeButton ? SELECT_BG_COLOR + " text-[#fff] cursor-pointer border border-[#EBEBEB]  y-[7px] px-[39px] " : 'bg-[#fff]  cursor-pointer border border-[#EBEBEB] py-[7px] px-[39px]',
+    id: "center",
+    onClick: textAlignHandler
+  }, React.createElement(FiAlignCenter, {
+    id: "center",
+    onClick: textAlignHandler
+  })), React.createElement("button", {
+    type: "button",
+    className: 'right' === activeButton ? SELECT_BG_COLOR + " text-[#fff] cursor-pointer border border-[#EBEBEB]  y-[7px] px-[39px] " : 'bg-[#fff]  cursor-pointer border border-[#EBEBEB] py-[7px] px-[39px]',
+    id: "right",
+    onClick: textAlignHandler
+  }, React.createElement(FiAlignRight, {
+    id: "right",
+    onClick: textAlignHandler
+  })))), React.createElement("div", {
+    className: "uppercase font-bold text-sm mb-[8.5px]"
+  }, "Text Color"), React.createElement("div", {
+    className: "relative"
+  }, React.createElement(ColorImpl, {
+    mClass: 'ml-0',
+    handleChange: textColorChange,
+    property: 'backgroundColor',
+    name: 'backgroundColor',
+    color: activeSelection.fill
+  })), React.createElement("div", {
+    className: "flex gap-2 mt-4"
+  }, React.createElement("div", null, React.createElement("div", {
+    className: "uppercase font-bold text-sm mb-[8.5px]"
+  }, "Outline Size"), React.createElement("input", {
+    type: "number",
+    id: "outlineSize",
+    name: "outlineSize",
+    step: "0.2",
+    value: outlineVal,
+    className: "border border-[#EBEBEB] py-[10px] pl-[16px] mb-[16.5px] w-[145px]",
+    onChange: textOutlineHandler
+  })), React.createElement("div", null, React.createElement("div", {
+    className: "uppercase font-bold text-sm mb-[8.5px]"
+  }, "Outline Color"), React.createElement("div", {
+    className: "relative"
+  }, ' ', React.createElement(ColorImpl, {
+    mClass: 'ml-0',
+    handleChange: strokeColorChange,
+    property: 'backgroundColor',
+    name: 'backgroundColor',
+    color: activeSelection.stroke
+  })))), React.createElement("div", {
+    className: "flex gap-2"
+  }, React.createElement("div", null, React.createElement("div", {
+    className: "uppercase font-bold text-sm mb-[8.5px]"
+  }, "Letter Spacing"), React.createElement("input", {
+    type: "number",
+    id: "spacing",
+    name: "spacing",
+    step: "10",
+    value: spacingVal,
+    className: "border border-[#EBEBEB] py-[10px] pl-[16px] mb-[16.5px] w-[145px]",
+    onChange: textSpacingHandler
+  })))), currentSelection === 'group' && React.createElement(ImageEdit, {
+    flipX: flipX,
+    flipY: flipY,
+    changeSVGColor: changeSVGColor,
+    // nudgeMove={nudgeMove}
+    activeSelection: activeSelection
+  }), currentSelection === 'selectAll' && React.createElement(React.Fragment, null, React.createElement("div", {
+    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) {
+    return React.createElement(ColorImpl, {
+      mClass: 'ml-[36px]',
+      key: item,
+      handleChange: changeSVGTextColor,
+      property: item,
+      color: item
+    });
+  })), React.createElement("button", {
+    onClick: nudgeMove,
+    id: "down",
+    className: "font-medium text-orange-400"
+  }, "DOWN"), React.createElement("button", {
+    onClick: nudgeMove,
+    id: "up",
+    className: "font-medium text-orange-300 text-lime-400 px-1"
+  }, "UP"), React.createElement("button", {
+    onClick: nudgeMove,
+    id: "left",
+    className: "font-medium text-orange-300 text-teal-500"
+  }, "LEFT"), React.createElement("button", {
+    onClick: nudgeMove,
+    id: "right",
+    className: "font-medium text-orange-300 text-violet-600 px-1"
+  }, "RIGHT"),
+  // console.log(storeAllObject);
+  storeAllObject.map(function (item, index) {
+    return React.createElement("div", {
+      className: "innerLayer bg-slate-300 my-1"
+    }, React.createElement("img", {
+      className: "rounded-lg w-14 h-8",
+      src: item ? item['icon'] : ''
+    }), React.createElement("button", {
+      className: "up mx-1 px-2 border-solid border-2 border-slate-500 ",
+      onClick: function onClick() {
+        return layerHandle(item, index, 'plus');
+      }
+    }, "UP"), React.createElement("button", {
+      className: "down mx-1 px-2 border-solid border-2 border-slate-500",
+      onClick: function onClick() {
+        return layerHandle(item, index, 'minus');
+      }
+    }, "DOWN"), React.createElement("button", {
+      className: "close mx-1 px-2 border-solid border-2 border-slate-500",
+      onClick: function onClick() {
+        return deleteElement(item);
+      }
+    }, "DELETE"));
+  })), currentSelection === 'none' && React.createElement(React.Fragment, null, React.createElement("div", {
+    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) {
+    return React.createElement(ColorImpl, {
+      mClass: 'ml-[36px]',
+      key: item,
+      handleChange: changeSVGTextColor,
+      property: item,
+      color: item
+    });
+  })))), 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
+  }, "Save")), activeTab === 2 && React.createElement("div", {
+    key: activeTab
+  }, currentSelection === 'layer' && React.createElement("div", {
+    className: ""
+  }, storeAllObject.map(function (item, index) {
+    return React.createElement(React.Fragment, null, React.createElement("div", {
+      className: "innerLayer border border-[#D7D7D7] my-[16px] h-[80px] flex justify-between"
     }, React.createElement("div", {
-      className: "uppercase font-bold text-sm mb-[8.5px]"
-    }, "Enter Text"), React.createElement("textarea", {
-      value: textInfo,
-      onChange: onTextChange,
-      className: "w-[100%] border border-solid-[1px] border-[#9A9A9A] py-[10px] pl-[16px] mb-[16.5px]",
-      placeholder: "LOGO TEXT"
-    }), React.createElement("div", {
-      className: "uppercase font-bold text-sm mb-[8.5px]"
-    }, "Select Font"), React.createElement("select", {
-      name: "FontStyleNumber",
-      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) {
-      return React.createElement(React.Fragment, null, React.createElement("option", {
-        value: list.name
-      }, list.name));
+      className: "imgBox border border-r-[#D7D7D7] bg-slate-200 flex w-[80px]"
+    }, React.createElement("img", {
+      className: "rounded-lg w-14 h-8",
+      src: item ? item['icon'] : ''
     })), React.createElement("div", {
-      className: "uppercase font-bold text-sm mb-[8.5px]"
-    }, "TEXT SIZE"), React.createElement("input", {
-      type: "range",
-      value: sliderValue,
-      onChange: handleSliderChange,
-      className: " rangeSlider w-full mb-[16.5px]",
-      id: "slider",
-      style: {
-        background: "linear-gradient(to right, #e11a38 0%, #e11a38 " + sliderValue + "%, #fff " + sliderValue + "%, #fff 100%)"
-      }
-    }), React.createElement("div", {
-      className: "uppercase font-bold text-sm mb-[8.5px]"
-    }, "Style"), React.createElement("div", {
-      className: "flex gap-x-[15px] mb-[16.5px]"
-    }, ' ', React.createElement("button", {
-      className: fontStyle.bold ? SELECT_BG_COLOR + " text-[#fff] text-base cursor-pointer border font-bold border-[#EBEBEB]  py-[7px] px-[39px] " : 'bg-[#fff]  font-bold text-base cursor-pointer border border-[#EBEBEB] py-[7px] px-[39px]',
-      onClick: function onClick(e) {
-        return textStyle(e, 'fontWeight', 'bold');
-      },
-      id: "bold"
-    }, "B"), React.createElement("button", {
-      className: fontStyle.italic ? SELECT_BG_COLOR + " text-[#fff] text-base cursor-pointer border italic border-[#EBEBEB]  py-[7px] px-[39px] " : 'bg-[#fff]  italic text-base cursor-pointer border border-[#EBEBEB] py-[7px] px-[39px]',
-      onClick: function onClick(e) {
-        return textStyle(e, 'fontStyle', 'italic');
-      },
-      id: "italic"
-    }, "I"), React.createElement("button", {
-      className: fontStyle.underline ? SELECT_BG_COLOR + " text-[#fff] text-base cursor-pointer border underline border-[#EBEBEB]  py-[7px] px-[39px] " : 'bg-[#fff]  underline text-base cursor-pointer border border-[#EBEBEB] py-[7px] px-[39px]',
-      onClick: function onClick(e) {
-        return textStyle(e, 'underline', !fontStyle.underline);
+      className: "delBtnBox flex-auto "
+    }, React.createElement("button", {
+      onClick: function onClick() {
+        return deleteElement(item);
       },
-      id: "underline"
-    }, "U")), textAlignDisplay === true && React.createElement("div", {
-      className: "textAlign"
+      className: "h-full w-full"
     }, React.createElement("div", {
-      className: "uppercase font-bold text-sm mb-[8.5px]"
-    }, "Align"), React.createElement("div", {
-      className: "flex gap-x-[15px] mb-[16.5px]"
+      className: "delBtn pointer-events-none flex justify-center "
+    }, React.createElement("div", {
+      className: "upIcon m-auto"
+    }, React.createElement("svg", {
+      width: "25px",
+      height: "25px",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, React.createElement("path", {
+      d: "M10 11V17",
+      stroke: "#9a9a9a",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    }), React.createElement("path", {
+      d: "M14 11V17",
+      stroke: "#9a9a9a",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    }), React.createElement("path", {
+      d: "M4 7H20",
+      stroke: "#9a9a9a",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    }), React.createElement("path", {
+      d: "M6 7H12H18V18C18 19.6569 16.6569 21 15 21H9C7.34315 21 6 19.6569 6 18V7Z",
+      stroke: "#9a9a9a",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    }), React.createElement("path", {
+      d: "M9 5C9 3.89543 9.89543 3 11 3H13C14.1046 3 15 3.89543 15 5V7H9V5Z",
+      stroke: "#9a9a9a",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    })))))), React.createElement("div", {
+      className: "delBox flex flex-col w-[40px] justify-between items-stretch"
     }, React.createElement("button", {
-      type: "button",
-      className: 'left' === activeButton ? SELECT_BG_COLOR + " text-[#fff] cursor-pointer border border-[#EBEBEB]  py-[7px] px-[39px] " : 'bg-[#fff]  cursor-pointer border border-[#EBEBEB] py-[7px] px-[39px]',
-      id: "left",
-      onClick: textAlignHandler
-    }, React.createElement(FiAlignLeft, {
-      id: "left",
-      onClick: textAlignHandler
-    })), React.createElement("button", {
-      type: "button",
-      className: 'center' === activeButton ? SELECT_BG_COLOR + " text-[#fff] cursor-pointer border border-[#EBEBEB]  y-[7px] px-[39px] " : 'bg-[#fff]  cursor-pointer border border-[#EBEBEB] py-[7px] px-[39px]',
-      id: "center",
-      onClick: textAlignHandler
-    }, React.createElement(FiAlignCenter, {
-      id: "center",
-      onClick: textAlignHandler
-    })), React.createElement("button", {
-      type: "button",
-      className: 'right' === activeButton ? SELECT_BG_COLOR + " text-[#fff] cursor-pointer border border-[#EBEBEB]  y-[7px] px-[39px] " : 'bg-[#fff]  cursor-pointer border border-[#EBEBEB] py-[7px] px-[39px]',
-      id: "right",
-      onClick: textAlignHandler
-    }, React.createElement(FiAlignRight, {
-      id: "right",
-      onClick: textAlignHandler
-    })))), React.createElement("div", {
-      className: "uppercase font-bold text-sm mb-[8.5px]"
-    }, "Text Color"), React.createElement("div", {
-      className: "relative"
-    }, React.createElement(ColorImpl, {
-      mClass: 'ml-0',
-      handleChange: textColorChange,
-      property: 'backgroundColor',
-      name: 'backgroundColor',
-      color: activeSelection.fill
-    })), React.createElement("div", {
-      className: "flex gap-2 mt-4"
-    }, React.createElement("div", null, React.createElement("div", {
-      className: "uppercase font-bold text-sm mb-[8.5px]"
-    }, "Outline Size"), React.createElement("input", {
-      type: "number",
-      id: "outlineSize",
-      name: "outlineSize",
-      step: "0.2",
-      value: outlineVal,
-      className: "border border-[#EBEBEB] py-[10px] pl-[16px] mb-[16.5px] w-[145px]",
-      onChange: textOutlineHandler
-    })), React.createElement("div", null, React.createElement("div", {
-      className: "uppercase font-bold text-sm mb-[8.5px]"
-    }, "Outline Color"), React.createElement("div", {
-      className: "relative"
-    }, ' ', React.createElement(ColorImpl, {
-      mClass: 'ml-0',
-      handleChange: strokeColorChange,
-      property: 'backgroundColor',
-      name: 'backgroundColor',
-      color: activeSelection.stroke
-    })))), React.createElement("div", {
-      className: "flex gap-2"
-    }, React.createElement("div", null, React.createElement("div", {
-      className: "uppercase font-bold text-sm mb-[8.5px]"
-    }, "Letter Spacing"), React.createElement("input", {
-      type: "number",
-      id: "spacing",
-      name: "spacing",
-      step: "10",
-      value: spacingVal,
-      className: "border border-[#EBEBEB] py-[10px] pl-[16px] mb-[16.5px] w-[145px]",
-      onChange: textSpacingHandler
-    })))), currentSelection === 'group' && React.createElement(ImageEdit, {
-      flipX: flipX,
-      flipY: flipY,
-      changeSVGColor: changeSVGColor,
-      // nudgeMove={nudgeMove}
-      activeSelection: activeSelection
-    }), currentSelection === 'selectAll' && React.createElement(React.Fragment, null, React.createElement("div", {
-      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) {
-      return React.createElement(ColorImpl, {
-        mClass: 'ml-[36px]',
-        key: item,
-        handleChange: changeSVGTextColor,
-        property: item,
-        color: item
-      });
-    })), React.createElement("button", {
-      onClick: nudgeMove,
-      id: "down",
-      className: "font-medium text-orange-400"
-    }, "DOWN"), React.createElement("button", {
-      onClick: nudgeMove,
-      id: "up",
-      className: "font-medium text-orange-300 text-lime-400 px-1"
-    }, "UP"), React.createElement("button", {
-      onClick: nudgeMove,
-      id: "left",
-      className: "font-medium text-orange-300 text-teal-500"
-    }, "LEFT"), React.createElement("button", {
-      onClick: nudgeMove,
-      id: "right",
-      className: "font-medium text-orange-300 text-violet-600 px-1"
-    }, "RIGHT"),
-    // console.log(storeAllObject);
-    storeAllObject.map(function (item, index) {
-      return React.createElement("div", {
-        className: "innerLayer bg-slate-300 my-1"
-      }, React.createElement("img", {
-        className: "rounded-lg w-14 h-8",
-        src: item ? item['icon'] : ''
-      }), React.createElement("button", {
-        className: "up mx-1 px-2 border-solid border-2 border-slate-500 ",
-        onClick: function onClick() {
-          return layerHandle(item, index, 'plus');
-        }
-      }, "UP"), React.createElement("button", {
-        className: "down mx-1 px-2 border-solid border-2 border-slate-500",
-        onClick: function onClick() {
-          return layerHandle(item, index, 'minus');
-        }
-      }, "DOWN"), React.createElement("button", {
-        className: "close mx-1 px-2 border-solid border-2 border-slate-500",
-        onClick: function onClick() {
-          return deleteElement(item);
-        }
-      }, "DELETE"));
-    })), currentSelection === 'none' && React.createElement(React.Fragment, null, React.createElement("div", {
-      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) {
-      return React.createElement(ColorImpl, {
-        mClass: 'ml-[36px]',
-        key: item,
-        handleChange: changeSVGTextColor,
-        property: item,
-        color: item
-      });
-    })))), 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
-    }, "Save")) : React.createElement("div", {
-      key: tab.id
-    }, currentSelection === 'layer' && React.createElement("div", {
-      className: ""
-    }, storeAllObject.map(function (item, index) {
-      return React.createElement(React.Fragment, null, React.createElement("div", {
-        className: "innerLayer border border-[#D7D7D7] my-[16px] h-[80px] flex justify-between"
-      }, React.createElement("div", {
-        className: "imgBox border border-r-[#D7D7D7] bg-slate-200 flex w-[80px]"
-      }, React.createElement("img", {
-        className: "rounded-lg w-14 h-8",
-        src: item ? item['icon'] : ''
-      })), React.createElement("div", {
-        className: "delBtnBox flex-auto "
-      }, React.createElement("button", {
-        onClick: function onClick() {
-          return deleteElement(item);
-        },
-        className: "h-full w-full"
-      }, React.createElement("div", {
-        className: "delBtn pointer-events-none flex justify-center "
-      }, React.createElement("div", {
-        className: "upIcon m-auto"
-      }, React.createElement("svg", {
-        width: "25px",
-        height: "25px",
-        viewBox: "0 0 24 24",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg"
-      }, React.createElement("path", {
-        d: "M10 11V17",
-        stroke: "#9a9a9a",
-        "stroke-width": "2",
-        "stroke-linecap": "round",
-        "stroke-linejoin": "round"
-      }), React.createElement("path", {
-        d: "M14 11V17",
-        stroke: "#9a9a9a",
-        "stroke-width": "2",
-        "stroke-linecap": "round",
-        "stroke-linejoin": "round"
-      }), React.createElement("path", {
-        d: "M4 7H20",
-        stroke: "#9a9a9a",
-        "stroke-width": "2",
-        "stroke-linecap": "round",
-        "stroke-linejoin": "round"
-      }), React.createElement("path", {
-        d: "M6 7H12H18V18C18 19.6569 16.6569 21 15 21H9C7.34315 21 6 19.6569 6 18V7Z",
-        stroke: "#9a9a9a",
-        "stroke-width": "2",
-        "stroke-linecap": "round",
-        "stroke-linejoin": "round"
-      }), React.createElement("path", {
-        d: "M9 5C9 3.89543 9.89543 3 11 3H13C14.1046 3 15 3.89543 15 5V7H9V5Z",
-        stroke: "#9a9a9a",
-        "stroke-width": "2",
-        "stroke-linecap": "round",
-        "stroke-linejoin": "round"
-      })))))), React.createElement("div", {
-        className: "delBox flex flex-col w-[40px] justify-between items-stretch"
-      }, React.createElement("button", {
-        onClick: function onClick() {
-          return layerHandle(item, index, 'plus');
-        }
-      }, React.createElement("div", {
-        className: "upBtn pointer-events-none flex h-[35px] justify-center "
-      }, React.createElement("div", {
-        className: "upIcon m-auto"
-      }, React.createElement("svg", {
-        fill: "#9a9a9a",
-        height: "25px",
-        width: "25px",
-        version: "1.1",
-        id: "Layer_1",
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 512 512"
-      }, React.createElement("g", null, React.createElement("g", null, React.createElement("g", null, React.createElement("path", {
-        d: "M0,0v512h512V0H0z M469.333,469.333H42.667V42.667h426.667V469.333z"
-      }), React.createElement("path", {
-        d: "M121.752,335.085L256,200.837l134.248,134.248c8.331,8.331,21.839,8.331,30.17,0c8.331-8.331,8.331-21.839,0-30.17     L271.085,155.582c-8.331-8.331-21.839-8.331-30.17,0L91.582,304.915c-8.331,8.331-8.331,21.839,0,30.17     S113.42,343.416,121.752,335.085z"
-      })))))))), React.createElement("button", {
-        onClick: function onClick() {
-          return layerHandle(item, index, 'minus');
-        }
-      }, React.createElement("div", {
-        className: "downBtn pointer-events-none flex  h-[35px] justify-center"
-      }, React.createElement("div", {
-        className: "downIcon m-auto"
-      }, React.createElement("svg", {
-        transform: "rotate(180)",
-        fill: "#9a9a9a",
-        height: "25px",
-        width: "25px",
-        version: "1.1",
-        id: "Layer_1",
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 512 512"
-      }, React.createElement("g", null, React.createElement("g", null, React.createElement("g", null, React.createElement("path", {
-        d: "M0,0v512h512V0H0z M469.333,469.333H42.667V42.667h426.667V469.333z"
-      }), React.createElement("path", {
-        d: "M121.752,335.085L256,200.837l134.248,134.248c8.331,8.331,21.839,8.331,30.17,0c8.331-8.331,8.331-21.839,0-30.17     L271.085,155.582c-8.331-8.331-21.839-8.331-30.17,0L91.582,304.915c-8.331,8.331-8.331,21.839,0,30.17     S113.42,343.416,121.752,335.085z"
-      })))))))))));
-    })));
-  })))));
+      onClick: function onClick() {
+        return layerHandle(item, index, 'plus');
+      }
+    }, React.createElement("div", {
+      className: "upBtn pointer-events-none flex h-[35px] justify-center "
+    }, React.createElement("div", {
+      className: "upIcon m-auto"
+    }, React.createElement("svg", {
+      fill: "#9a9a9a",
+      height: "25px",
+      width: "25px",
+      version: "1.1",
+      id: "Layer_1",
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 512 512"
+    }, React.createElement("g", null, React.createElement("g", null, React.createElement("g", null, React.createElement("path", {
+      d: "M0,0v512h512V0H0z M469.333,469.333H42.667V42.667h426.667V469.333z"
+    }), React.createElement("path", {
+      d: "M121.752,335.085L256,200.837l134.248,134.248c8.331,8.331,21.839,8.331,30.17,0c8.331-8.331,8.331-21.839,0-30.17     L271.085,155.582c-8.331-8.331-21.839-8.331-30.17,0L91.582,304.915c-8.331,8.331-8.331,21.839,0,30.17     S113.42,343.416,121.752,335.085z"
+    })))))))), React.createElement("button", {
+      onClick: function onClick() {
+        return layerHandle(item, index, 'minus');
+      }
+    }, React.createElement("div", {
+      className: "downBtn pointer-events-none flex  h-[35px] justify-center"
+    }, React.createElement("div", {
+      className: "downIcon m-auto"
+    }, React.createElement("svg", {
+      transform: "rotate(180)",
+      fill: "#9a9a9a",
+      height: "25px",
+      width: "25px",
+      version: "1.1",
+      id: "Layer_1",
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 512 512"
+    }, React.createElement("g", null, React.createElement("g", null, React.createElement("g", null, React.createElement("path", {
+      d: "M0,0v512h512V0H0z M469.333,469.333H42.667V42.667h426.667V469.333z"
+    }), React.createElement("path", {
+      d: "M121.752,335.085L256,200.837l134.248,134.248c8.331,8.331,21.839,8.331,30.17,0c8.331-8.331,8.331-21.839,0-30.17     L271.085,155.582c-8.331-8.331-21.839-8.331-30.17,0L91.582,304.915c-8.331,8.331-8.331,21.839,0,30.17     S113.42,343.416,121.752,335.085z"
+    })))))))))));
+  })))))));
 };
 
 var ListDropdown = function ListDropdown(props) {