@threedddplus/logoeditor 0.0.45 → 0.0.46

package/dist/logoeditor.esm.js

@@ -1757,7 +1757,8 @@ var graphqlSlice = function graphqlSlice(set, get) {
     logoSortBy: 'updated_at',
     logoSortDir: 'DESC',
     logoPageNo: 1,
-    logoPageSize: 14
+    logoPageSize: 14,
+    showCrossSave: false
   };
 };
 
@@ -4507,7 +4508,7 @@ var canvas = function canvas() {
   }, []);
   return React.createElement("div", {
     className: " w-full h-full relative"
-  }, React.createElement(ActionButtons, null), allColor && allColor.length > 8 && React.createElement(errorPopup, {
+  }, React.createElement(ActionButtons, null), allColor && allColor.includes('transparent') ? allColor.length - 1 > 8 : allColor.length > 8 && React.createElement(errorPopup, {
     allColor: allColor
   }), React.createElement(NudgeButtons, null), React.createElement(React.Fragment, null), React.createElement("div", {
     id: "fabCanvas",
@@ -7346,8 +7347,15 @@ var Rightmenu = function Rightmenu() {
     canvas.renderAll();
   };
   var onSave = function onSave() {
+    use3dddPlus.setState({
+      showCrossSave: true
+    });
     if (canvas.getObjects().length > 0) {
-      if (allColor.length < 9) setToggleSaveLogo('save', true, 'Save Logo', {});else use3dddPlus.getState().toastMessages.noOfColors();
+      if (allColor.includes('transparent')) {
+        if (allColor.length - 1 < 9) setToggleSaveLogo('save', true, 'Save Logo', {});else use3dddPlus.getState().toastMessages.noOfColors();
+      } else {
+        if (allColor.length < 9) setToggleSaveLogo('save', true, 'Save Logo', {});else use3dddPlus.getState().toastMessages.noOfColors();
+      }
     } else {
       use3dddPlus.getState().toastMessages.noIteminCanvas();
     }
@@ -7601,31 +7609,7 @@ var Rightmenu = function Rightmenu() {
       property: item,
       color: item
     });
-  })),
-  // 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", {
+  }))), currentSelection === 'none' && React.createElement(React.Fragment, null, React.createElement("div", {
     className: "uppercase font-bold pt-[17px]"
   }, "Color in Canvas"), React.createElement("div", {
     className: "flex flex-wrap gap-x-[1rem] mt-[12px]"
@@ -8302,6 +8286,44 @@ var SaveDesign = function SaveDesign(_ref) {
   }, "Cancel"))))))));
 };
 
+/**
+ * Hook that alerts clicks outside of the passed ref
+ */
+function useOutsideAlerter(ref, onClick) {
+  useEffect(function () {
+    /**
+     * Alert if clicked on outside of element
+     */
+    function handleClickOutside(event) {
+      if (ref.current && !ref.current.contains(event.target)) {
+        // alert('You clicked outside of me!');
+        onClick(event);
+      }
+    }
+    function handleEscape(event) {
+      if (event.key == 'Escape') onClick(event);
+    }
+    // Bind the event listener
+    document.addEventListener('keydown', handleEscape);
+    document.addEventListener('mousedown', handleClickOutside);
+    return function () {
+      // Unbind the event listener on clean up
+      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('keydown', handleEscape);
+    };
+  }, [ref]);
+}
+/**
+ * Component that alerts if you click outside of it
+ */
+function OutsideAlerter(props) {
+  var wrapperRef = useRef(null);
+  useOutsideAlerter(wrapperRef, props.onClick);
+  return React.createElement("div", {
+    ref: wrapperRef
+  }, props.children);
+}
+
 var ColorPicker = function ColorPicker() {
   var _use3dddPlus = use3dddPlus(function (state) {
       return [state.setDisplayProductColor, state.displayProductColor];
@@ -8321,16 +8343,19 @@ var ColorPicker = function ColorPicker() {
     className: "absolute"
   }, displayProductColor && React.createElement("div", {
     className: "relative top-[25vh] left-5 flex"
+  }, React.createElement(OutsideAlerter, {
+    onClick: function onClick() {
+      return setDisplayProductColor();
+    }
   }, React.createElement(ChromePicker, {
     color: currentColor,
     onChange: handleOnChange,
     // onChangeComplete={handleOnChange}
     disableAlpha: true,
-    // onBlur={() => setdisplayPallet(false)}
     onClose: function onClose() {
       return setDisplayProductColor();
     }
-  })));
+  }))));
 };
 
 var MiddleMenu = function MiddleMenu(_ref) {