@threedddplus/logoeditor 0.0.8 → 0.0.10

package/dist/components/middleMenu/middleMenu.d.ts

@@ -1,2 +1,4 @@
 import React from 'react';
-export declare const MiddleMenu: () => React.JSX.Element;
+export declare const MiddleMenu: ({ onApply }: {
+    onApply: any;
+}) => React.JSX.Element;

package/dist/components/myLogo/myLogo.d.ts

@@ -9,4 +9,6 @@ export interface LogoProps {
     logo_svg_url: string;
     created_at: string;
 }
-export declare const MyLogo: () => React.JSX.Element;
+export declare const MyLogo: ({ onApply }: {
+    onApply: any;
+}) => React.JSX.Element;

package/dist/index.d.ts

@@ -6,7 +6,11 @@ import * as services from './services';
 /**
  * A custom App component. Neat!
  */
-declare const LogoEditor: ({ stepperId }: {
+declare const LogoEditor: ({ stepperId, onApply, customLogoColorList, defaultColorList, logoData, }: {
     stepperId: any;
+    onApply: any;
+    customLogoColorList: any;
+    defaultColorList: any;
+    logoData: any;
 }) => React.JSX.Element;
 export { LogoEditor, Components, use3dddPlus, services };

package/dist/logoeditor.cjs.development.js

@@ -13,7 +13,6 @@ var CryptoJS = _interopDefault(require('crypto-js'));
 var fabric = require('fabric');
 var AWS = _interopDefault(require('aws-sdk'));
 var ImageTracer = _interopDefault(require('imagetracerjs'));
-var client = require('react-dom/client');
 var reakit = require('reakit');
 var reactIcons = require('react-icons');
 var io = require('react-icons/io');
@@ -4963,7 +4962,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__default.useState(),
     logoSelected = _React$useState[0],
     setLogoSelected = _React$useState[1];
@@ -4988,7 +4988,12 @@ var MyLogo$1 = function MyLogo() {
   };
 
   var handleApplyLogo = function handleApplyLogo(logo) {
+    if (logo) {
+      onApply();
+      // setLogoSelected(logo);
+    }
   };
+
   return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
     className: "bg-[#F7F7F7] absolute z-100 w-[90%] h-full pr-[56px]"
   }, React__default.createElement("div", {
@@ -5049,7 +5054,7 @@ var MyLogo$1 = function MyLogo() {
     }
   }, "Edit"), React__default.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__default.createElement(Loader, null));
@@ -6097,7 +6102,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:
@@ -6117,18 +6122,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();
         }
@@ -6351,7 +6358,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.shallow),
@@ -6367,7 +6375,9 @@ var MiddleMenu = function MiddleMenu() {
     className: "flex w-[70%]  h-[100%]"
   }, React__default.createElement(canvas, null)), toggleSaveDesign.status && React__default.createElement(SaveDesign, null), React__default.createElement("div", {
     className: "flex-1 z-10  h-[100%] "
-  }, React__default.createElement(Rightmenu, null))), selectedStepper === 1 && React__default.createElement(UploadLogo, null), selectedStepper === 4 && React__default.createElement(AddMascot, null), selectedStepper === 2 && React__default.createElement(MyLogo$1, null), selectedStepper === 5 && React__default.createElement(ColorPicker, null));
+  }, React__default.createElement(Rightmenu, null))), selectedStepper === 1 && React__default.createElement(UploadLogo, null), selectedStepper === 4 && React__default.createElement(AddMascot, null), selectedStepper === 2 && React__default.createElement(MyLogo$1, {
+    onApply: onApply
+  }), selectedStepper === 5 && React__default.createElement(ColorPicker, null));
 };
 
 // import { Modal } from './components';
@@ -6378,14 +6388,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__default.useEffect(function () {
     setSelectedStepper(stepperId);
+    if (stepperId == undefined) {
+      myLogoHandler(logoData);
+      console.log('logoData', logoData);
+    }
   }, [stepperId]);
+  React__default.useEffect(function () {
+    use3dddPlus.setState({
+      customUploadLogoColorList: customLogoColorList
+    });
+  }, [customLogoColorList]);
+  React__default.useEffect(function () {
+    use3dddPlus.setState({
+      defaultColorList: defaultColorList
+    });
+  }, [defaultColorList]);
+  console.log('defaultColorList', defaultColorList);
   return (
     // <Modal
     //   backdropStyle={`z-[7]`}
@@ -6399,17 +6429,13 @@ var LogoEditor = function LogoEditor(_ref) {
       className: "lg:w-[10%]"
     }, React__default.createElement(LeftMenu, null)), React__default.createElement("div", {
       className: " flex h-full w-[90%]"
-    }, React__default.createElement(MiddleMenu, null)))
+    }, React__default.createElement(MiddleMenu, {
+      onApply: onApply
+    })))
     // </Modal>
   );
 };
 
-var container = /*#__PURE__*/document.getElementById('root');
-var root = /*#__PURE__*/client.createRoot(container); // createRoot(container!) if you use TypeScript
-root.render(React__default.createElement(LogoEditor, {
-  stepperId: 1
-}));
-
 exports.Components = index$1;
 exports.LogoEditor = LogoEditor;
 exports.services = index;