@threedddplus/logoeditor 0.0.126 → 0.0.128

package/dist/logoeditor.esm.js

@@ -4047,9 +4047,9 @@ var converterSlice = function converterSlice(set, get) {
       var canvas = (_canvasToLoad = canvasToLoad) != null ? _canvasToLoad : use3dddPlus.getState().popupCanv;
       var canvasWidth = canvas.width;
       var canvasHeight = canvas.height;
-      var val = 300;
+      var val = 600;
       if ((loadedObject.width <= 200 || loadedObject.height <= 200) && (loadedObject.minX === -0 || loadedObject.minX)) {
-        val = 600;
+        val = 900;
       }
       if (Math.ceil(loadedObject.width + loadedObject.left + 45) >= Math.floor(canvasWidth)) {
         loadedObject.scaleToWidth(val);
@@ -4373,6 +4373,9 @@ var converterSlice = function converterSlice(set, get) {
       if (convert) {
         if (isSVG) {
           if (ext === "vectorSVG") {
+            use3dddPlus.setState({
+              loading: true
+            });
             use3dddPlus.setState({
               imageData: data
             });
@@ -6536,17 +6539,16 @@ var Initpopup = function Initpopup() {
       popUpCanvasAllColor: popUpCanvasAllColor
     });
   };
-  // const cursorUrl =
-  //   'https://storage.googleapis.com/3ddplusgcp/logoEditor/assets/icons/eyedropper.svg';
+  var cursorUrl = 'https://storage.googleapis.com/3ddplusgcp/logoEditor/assets/icons/eyedropper.svg';
   var outerCanvasContainer = document.getElementById('imageCanvas');
   var popupcanvas = new fabric.Canvas('popupCanvas', {
     centeredScaling: true,
     preserveObjectStacking: true,
     //backgroundColor: '#F7F7F7',
-    // defaultCursor: `url(" ${cursorUrl} "), auto`,
-    // hoverCursor: `url(" ${cursorUrl} "), auto`,
-    defaultCursor: 'pointer',
-    hoverCursor: 'pointer',
+    defaultCursor: "url(\" " + cursorUrl + " \")0 21.6, auto",
+    hoverCursor: "url(\" " + cursorUrl + " \")0 21.6, auto",
+    // defaultCursor: 'pointer',
+    // hoverCursor: 'pointer',
     // width: 500,
     // height: 300,
     width: outerCanvasContainer.clientWidth,
@@ -6587,17 +6589,21 @@ var PopUpCanvas = function PopUpCanvas() {
     isNextClicked = _useState4[0],
     setIsNextClicked = _useState4[1];
   var defaultColorFillRef = useRef([]);
-  var _useState5 = useState({
+  var _useState5 = useState(1),
+    zoomLevel = _useState5[0],
+    setZoomLevel = _useState5[1];
+  var panSpeed = 30;
+  var _useState6 = useState({
       visible: false,
       property: '',
       color: '',
       callback: null
     }),
-    displayPallet = _useState5[0],
-    setDisplayPallet = _useState5[1];
-  var _useState6 = useState(null),
-    position = _useState6[0],
-    setPosition = _useState6[1];
+    displayPallet = _useState6[0],
+    setDisplayPallet = _useState6[1];
+  var _useState7 = useState(null),
+    position = _useState7[0],
+    setPosition = _useState7[1];
   useEffect(function () {
     if (!displayPallet || !displayPallet.visible) {
       setDefaultColorFill(defaultColorFill.map(function (cf) {
@@ -6721,16 +6727,24 @@ var PopUpCanvas = function PopUpCanvas() {
     //FOR REMOVING COLOR
     popupCanv.on('mouse:down', function (event) {
       // popupCanv.discardActiveObject();
-      var mouseClick = popupCanv.getPointer(event.e);
+      var pointer = popupCanv.getPointer(event.e);
+      console.log(event.target.fill);
+      var target = popupCanv.findTarget(event.e, true);
+      if (target.type !== "line") {
+        console.log('Object selected:', target.type);
+        target.bringToFront();
+      } else {
+        console.log('No object selected at', pointer);
+      }
       // console.log('MOUSE-CLICK-->',mouseClick);
       // Iterate through objects on the canvas and check if any intersect with the mouse click
       var removedColors = [];
       use3dddPlus.getState().popUpCanvasUpdateModification(true);
       var color;
       popupCanv.forEachObject(function (obj) {
-        if (obj.type === 'path') {
+        if (obj.type !== "line") {
           //@ts-ignore
-          if (obj.containsPoint(mouseClick) && !color) {
+          if (obj.containsPoint(pointer) && !color) {
             removedColors.push(obj.fill);
             popupCanv.remove(obj);
             popupCanv.renderAll();
@@ -6749,23 +6763,7 @@ var PopUpCanvas = function PopUpCanvas() {
         }
       });
       setDefaultColorFill(defaultColorsCopy);
-      /*
-          let availableColors = [];
-          defaultColorFillRef.current.map((dcf: any) => {
-            let objColorCount = 0;
-            popupCanv.forEachObject(function (obj) {
-              if (RGBToHex(obj.fill) === dcf.updated) {
-                objColorCount += 1;
-              }
-            });
-            if (objColorCount > 0) {
-              availableColors.push(dcf);
-            }
-          });
-          setDefaultColorFill(availableColors);
-      */
     });
-
     return function () {
       setHasUploadScreen(false);
       window.removeEventListener('click', removeColorPalatte);
@@ -6958,6 +6956,41 @@ var PopUpCanvas = function PopUpCanvas() {
       });
     }));
   };
+  var canvasZoomIn = function canvasZoomIn() {
+    var newZoomLevel = zoomLevel + 0.1;
+    setZoomLevel(newZoomLevel);
+    var center = popupCanvas.getCenter();
+    popupCanvas.zoomToPoint({
+      x: center.left,
+      y: center.top
+    }, newZoomLevel);
+  };
+  var canvasZoomOut = function canvasZoomOut() {
+    if (zoomLevel == 1) return;
+    var newZoomLevel = zoomLevel - 0.1;
+    setZoomLevel(newZoomLevel);
+    var center = popupCanvas.getCenter();
+    popupCanvas.zoomToPoint({
+      x: center.left,
+      y: center.top
+    }, newZoomLevel);
+  };
+  var canvasPan = function canvasPan(direction) {
+    switch (direction) {
+      case 'Left':
+        popupCanvas.relativePan(new fabric.Point(-panSpeed, 0));
+        break;
+      case 'Right':
+        popupCanvas.relativePan(new fabric.Point(panSpeed, 0));
+        break;
+      case 'Up':
+        popupCanvas.relativePan(new fabric.Point(0, -panSpeed));
+        break;
+      case 'Down':
+        popupCanvas.relativePan(new fabric.Point(0, panSpeed));
+        break;
+    }
+  };
   var onSelectColor = function onSelectColor(item, event) {
     setDefaultColorFill(defaultColorFill.map(function (cf) {
       return cf.property === item.property ? _extends({}, cf, {
@@ -6981,11 +7014,6 @@ var PopUpCanvas = function PopUpCanvas() {
       y: window.innerHeight < event.clientY + 280 ? event.clientY - 300 : event.clientY
     });
   };
-  // const onClosePalette = () => {
-  //   setDefaultColorFill(
-  //     defaultColorFill.map((c: any) => ({ ...c, hasPallet: false }))
-  //   );
-  // };
   var onPopUpCanvasUndo = function onPopUpCanvasUndo() {
     var colors = popUpCanvasUndo();
     if (colors !== null) {
@@ -6994,18 +7022,6 @@ var PopUpCanvas = function PopUpCanvas() {
           updated: colors[c.property]
         }) : c;
       });
-      // Object.keys(colors).forEach((c: any) => {
-      //   if (
-      //     defaultColorFill.filter((dc: any) => dc.updated === colors[c])
-      //       .length < 1
-      //   ) {
-      //     currentColors.push({
-      //       property: c,
-      //       default: colors[c],
-      //       updated: colors[c],
-      //     });
-      //   }
-      // });
       Object.keys(colors).forEach(function (c) {
         if (defaultColorFill.filter(function (dc) {
           return dc.updated === colors[c];
@@ -7050,6 +7066,140 @@ var PopUpCanvas = function PopUpCanvas() {
       width: '100%'
     }
   }, React.createElement("div", {
+    className: "zoomIn cursor-pointer mr-4",
+    onClick: function onClick() {
+      return canvasPan("Left");
+    }
+  }, React.createElement("div", {
+    className: "left float-left"
+  }, React.createElement("svg", {
+    fill: "#727272",
+    width: "16px",
+    height: "16px",
+    viewBox: "0 0 330 330",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, React.createElement("path", {
+    id: "XMLID_92_",
+    d: "M111.213,165.004L250.607,25.607c5.858-5.858,5.858-15.355,0-21.213c-5.858-5.858-15.355-5.858-21.213,0.001\r\n                              l-150,150.004C76.58,157.211,75,161.026,75,165.004c0,3.979,1.581,7.794,4.394,10.607l150,149.996\r\n                              C232.322,328.536,236.161,330,240,330s7.678-1.464,10.607-4.394c5.858-5.858,5.858-15.355,0-21.213L111.213,165.004z"
+  }))), React.createElement("span", {
+    className: "iconLabel float-left text-[#727272] ml-2 text-[13px] font-bold "
+  }, "Left")), React.createElement("div", {
+    className: "zoomIn cursor-pointer mr-4",
+    onClick: function onClick() {
+      return canvasPan("Right");
+    }
+  }, React.createElement("div", {
+    className: "right float-left"
+  }, React.createElement("svg", {
+    fill: "#727272",
+    width: "16px",
+    height: "16px",
+    viewBox: "0 0 330 330",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, React.createElement("path", {
+    id: "XMLID_222_",
+    d: "M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001\r\n                              c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213\r\n                              C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606\r\n                              C255,161.018,253.42,157.202,250.606,154.389z"
+  }))), React.createElement("span", {
+    className: "iconLabel float-left text-[#727272] ml-2 text-[13px] font-bold "
+  }, "Right")), React.createElement("div", {
+    className: "zoomIn cursor-pointer mr-4",
+    onClick: function onClick() {
+      return canvasPan("Up");
+    }
+  }, React.createElement("div", {
+    className: "left float-left"
+  }, React.createElement("svg", {
+    fill: "#727272",
+    width: "16px",
+    height: "16px",
+    viewBox: "0 0 330 330",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, React.createElement("path", {
+    id: "XMLID_224_",
+    d: "M325.606,229.393l-150.004-150C172.79,76.58,168.974,75,164.996,75c-3.979,0-7.794,1.581-10.607,4.394\r\n                              l-149.996,150c-5.858,5.858-5.858,15.355,0,21.213c5.857,5.857,15.355,5.858,21.213,0l139.39-139.393l139.397,139.393\r\n                              C307.322,253.536,311.161,255,315,255c3.839,0,7.678-1.464,10.607-4.394C331.464,244.748,331.464,235.251,325.606,229.393z"
+  }))), React.createElement("span", {
+    className: "iconLabel float-left text-[#727272] ml-2 text-[13px] font-bold "
+  }, "Up")), React.createElement("div", {
+    className: "down cursor-pointer mr-4",
+    onClick: function onClick() {
+      return canvasPan("Down");
+    }
+  }, React.createElement("div", {
+    className: "down float-left"
+  }, React.createElement("svg", {
+    fill: "#727272",
+    width: "16px",
+    height: "16px",
+    viewBox: "0 0 330 330",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, React.createElement("path", {
+    id: "XMLID_225_",
+    d: "M325.607,79.393c-5.857-5.857-15.355-5.858-21.213,0.001l-139.39,139.393L25.607,79.393\r\n                              c-5.857-5.857-15.355-5.858-21.213,0.001c-5.858,5.858-5.858,15.355,0,21.213l150.004,150c2.813,2.813,6.628,4.393,10.606,4.393\r\n                              s7.794-1.581,10.606-4.394l149.996-150C331.465,94.749,331.465,85.251,325.607,79.393z"
+  }))), React.createElement("span", {
+    className: "iconLabel float-left text-[#727272] ml-2 text-[13px] font-bold "
+  }, "Down")), React.createElement("div", {
+    className: "zoomIn cursor-pointer mr-4",
+    onClick: canvasZoomIn
+  }, React.createElement("div", {
+    className: "zoomIn float-left"
+  }, React.createElement("svg", {
+    fill: "#727272",
+    width: "16px",
+    height: "16px",
+    viewBox: "0 0 24 24",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, React.createElement("path", {
+    "fill-rule": "evenodd",
+    d: "M16.3198574,14.9056439 L21.7071068,20.2928932 L20.2928932,21.7071068 L14.9056439,16.3198574 C13.5509601,17.3729184 11.8487115,18 10,18 C5.581722,18 2,14.418278 2,10 C2,5.581722 5.581722,2 10,2 C14.418278,2 18,5.581722 18,10 C18,11.8487115 17.3729184,13.5509601 16.3198574,14.9056439 Z M10,16 C13.3137085,16 16,13.3137085 16,10 C16,6.6862915 13.3137085,4 10,4 C6.6862915,4 4,6.6862915 4,10 C4,13.3137085 6.6862915,16 10,16 Z M9,9 L9,6 L11,6 L11,9 L14,9 L14,11 L11,11 L11,14 L9,14 L9,11 L6,11 L6,9 L9,9 Z"
+  }))), React.createElement("span", {
+    className: "iconLabel float-left text-[#727272] ml-2 text-[13px] font-bold "
+  }, "Zoom-In")), React.createElement("div", {
+    className: "zoomIn cursor-pointer mr-4",
+    onClick: canvasZoomOut
+  }, React.createElement("div", {
+    className: "zoomIn float-left"
+  }, React.createElement("svg", {
+    fill: "#727272",
+    width: "16px",
+    height: "16px",
+    viewBox: "0 0 24 24",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, React.createElement("g", {
+    id: "Complete"
+  }, React.createElement("g", {
+    id: "zoom-out"
+  }, React.createElement("g", null, React.createElement("circle", {
+    cx: "10.1",
+    cy: "10.1",
+    fill: "none",
+    r: "8",
+    stroke: "#727272",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round",
+    "stroke-width": "2"
+  }), React.createElement("line", {
+    fill: "none",
+    stroke: "#727272",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round",
+    "stroke-width": "2",
+    x1: "21.9",
+    x2: "16.3",
+    y1: "21.9",
+    y2: "16.3"
+  }), React.createElement("line", {
+    fill: "none",
+    stroke: "#727272",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round",
+    "stroke-width": "2",
+    x1: "13.1",
+    x2: "7.1",
+    y1: "10.1",
+    y2: "10.1"
+  })))))), React.createElement("span", {
+    className: "iconLabel float-left text-[#727272] ml-2 text-[13px] font-bold "
+  }, "Zoom-Out")), React.createElement("div", {
     className: "undoBtn cursor-pointer mr-4",
     onClick: onPopUpCanvasUndo
   }, React.createElement("div", {
@@ -7313,6 +7463,8 @@ var PopUpCanvas = function PopUpCanvas() {
   }));
 };
 
+// import {fabric} from 'fabric';
+// import axios, { AxiosRequestConfig } from 'axios';
 var UploadLogo = function UploadLogo() {
   var _useState = useState(null),
     setSelectedFile = _useState[1];