@threedddplus/logoeditor 0.0.8 → 0.0.10

package/dist/logoeditor.esm.js

@@ -6,7 +6,6 @@ import CryptoJS from 'crypto-js';
 import { fabric } from 'fabric';
 import AWS from 'aws-sdk';
 import ImageTracer from 'imagetracerjs';
-import { createRoot } from 'react-dom/client';
 import { Button as Button$1, useTooltipState, TooltipReference, Tooltip, Input } from 'reakit';
 import { IconContext } from 'react-icons';
 import { IoMdCheckmarkCircle } from 'react-icons/io';
@@ -4956,7 +4955,8 @@ var Loader = function Loader(_ref) {
   }));
 };
 
-var MyLogo$1 = function MyLogo() {
+var MyLogo$1 = function MyLogo(_ref) {
+  var onApply = _ref.onApply;
   var _React$useState = React.useState(),
     logoSelected = _React$useState[0],
     setLogoSelected = _React$useState[1];
@@ -4981,7 +4981,12 @@ var MyLogo$1 = function MyLogo() {
   };
 
   var handleApplyLogo = function handleApplyLogo(logo) {
+    if (logo) {
+      onApply();
+      // setLogoSelected(logo);
+    }
   };
+
   return React.createElement(React.Fragment, null, React.createElement("div", {
     className: "bg-[#F7F7F7] absolute z-100 w-[90%] h-full pr-[56px]"
   }, React.createElement("div", {
@@ -5042,7 +5047,7 @@ var MyLogo$1 = function MyLogo() {
     }
   }, "Edit"), React.createElement("button", {
     onClick: function onClick() {
-      return handleApplyLogo();
+      return handleApplyLogo(logoData);
     },
     className: "border p-3 w-[160px] " + (logoSelected ? 'border-[#e11a38] text-[#e11a38]' : 'bg-[black] text-white font-bold')
   }, "Apply"))), loading && React.createElement(Loader, null));
@@ -6090,7 +6095,7 @@ var SaveDesign = function SaveDesign() {
   };
   var onSaveHandler = /*#__PURE__*/function () {
     var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-      var dataURL, canvasData, dataCh, S3UrlPath, raw;
+      var dataURL, canvasData, dataCh, S3UrlPath, canvasSvg, raw;
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
@@ -6110,18 +6115,20 @@ var SaveDesign = function SaveDesign() {
             return uploadLogoConfig(dataCh, 117015);
           case 7:
             S3UrlPath = _context.sent;
+            canvasSvg = canvas.toSVG();
             raw = JSON.stringify({
               customer_id: 117015,
               tag: designTag.join(''),
               name: designName,
               base64_image: dataURL,
+              svg_image: canvasSvg,
               logo_config_url: S3UrlPath
             });
             saveLogo(raw).then(function () {
               closeModal('', false, '', {});
               alert('Logo Saved Successfully');
             });
-          case 10:
+          case 11:
           case "end":
             return _context.stop();
         }
@@ -6344,7 +6351,8 @@ var ColorPicker = function ColorPicker() {
   })));
 };
 
-var MiddleMenu = function MiddleMenu() {
+var MiddleMenu = function MiddleMenu(_ref) {
+  var onApply = _ref.onApply;
   var _use3dddPlus = use3dddPlus(function (state) {
       return [state.selectedStepper, state.toggleSaveDesign, state.loadingLogo];
     }, shallow),
@@ -6360,7 +6368,9 @@ var MiddleMenu = function MiddleMenu() {
     className: "flex w-[70%]  h-[100%]"
   }, React.createElement(canvas, null)), toggleSaveDesign.status && React.createElement(SaveDesign, null), React.createElement("div", {
     className: "flex-1 z-10  h-[100%] "
-  }, React.createElement(Rightmenu, null))), selectedStepper === 1 && React.createElement(UploadLogo, null), selectedStepper === 4 && React.createElement(AddMascot, null), selectedStepper === 2 && React.createElement(MyLogo$1, null), selectedStepper === 5 && React.createElement(ColorPicker, null));
+  }, React.createElement(Rightmenu, null))), selectedStepper === 1 && React.createElement(UploadLogo, null), selectedStepper === 4 && React.createElement(AddMascot, null), selectedStepper === 2 && React.createElement(MyLogo$1, {
+    onApply: onApply
+  }), selectedStepper === 5 && React.createElement(ColorPicker, null));
 };
 
 // import { Modal } from './components';
@@ -6371,14 +6381,34 @@ var MiddleMenu = function MiddleMenu() {
  * A custom App component. Neat!
  */
 var LogoEditor = function LogoEditor(_ref) {
-  var stepperId = _ref.stepperId;
+  var stepperId = _ref.stepperId,
+    onApply = _ref.onApply,
+    customLogoColorList = _ref.customLogoColorList,
+    defaultColorList = _ref.defaultColorList,
+    logoData = _ref.logoData;
   var _use3dddPlus = use3dddPlus(function (state) {
-      return [state.setSelectedStepper];
+      return [state.setSelectedStepper, state.myLogoHandler];
     }),
-    setSelectedStepper = _use3dddPlus[0];
+    setSelectedStepper = _use3dddPlus[0],
+    myLogoHandler = _use3dddPlus[1];
   React.useEffect(function () {
     setSelectedStepper(stepperId);
+    if (stepperId == undefined) {
+      myLogoHandler(logoData);
+      console.log('logoData', logoData);
+    }
   }, [stepperId]);
+  React.useEffect(function () {
+    use3dddPlus.setState({
+      customUploadLogoColorList: customLogoColorList
+    });
+  }, [customLogoColorList]);
+  React.useEffect(function () {
+    use3dddPlus.setState({
+      defaultColorList: defaultColorList
+    });
+  }, [defaultColorList]);
+  console.log('defaultColorList', defaultColorList);
   return (
     // <Modal
     //   backdropStyle={`z-[7]`}
@@ -6392,16 +6422,12 @@ var LogoEditor = function LogoEditor(_ref) {
       className: "lg:w-[10%]"
     }, React.createElement(LeftMenu, null)), React.createElement("div", {
       className: " flex h-full w-[90%]"
-    }, React.createElement(MiddleMenu, null)))
+    }, React.createElement(MiddleMenu, {
+      onApply: onApply
+    })))
     // </Modal>
   );
 };
 
-var container = /*#__PURE__*/document.getElementById('root');
-var root = /*#__PURE__*/createRoot(container); // createRoot(container!) if you use TypeScript
-root.render(React.createElement(LogoEditor, {
-  stepperId: 1
-}));
-
 export { index$1 as Components, LogoEditor, index as services, use3dddPlus };
 //# sourceMappingURL=logoeditor.esm.js.map