@threedddplus/logoeditor 0.0.62 → 0.0.64

package/dist/logoeditor.cjs.development.js

@@ -2463,6 +2463,37 @@ var fabricSlice = function fabricSlice(set, get) {
         // if(get().count + 1 !== get().storeHistory.length){
         get().fabricCanvas.clear().renderAll();
         get().fabricCanvas.loadFromJSON(get().storeHistory[get().storeHistory.length - 1 - (get().count > 1 ? get().count - 1 : 0)]);
+        // Remove lines
+        get().fabricCanvas.getObjects().forEach(function (obj) {
+          if (obj.type === 'line') {
+            get().fabricCanvas.remove(obj);
+          }
+        });
+        // Add lines
+        var horizontalLine = new fabric.fabric.Line([0, get().fabricCanvas.height / 2, get().fabricCanvas.height, get().fabricCanvas.height / 2], {
+          stroke: "red",
+          scaleX: 11,
+          visible: false,
+          selectable: false,
+          type: 'line'
+        });
+        var verticalLine = new fabric.fabric.Line([get().fabricCanvas.width / 2, 0, get().fabricCanvas.width / 2, get().fabricCanvas.width], {
+          stroke: "red",
+          visible: false,
+          selectable: false,
+          type: 'line'
+        });
+        horizontalLine.centerH();
+        get().fabricCanvas.add(horizontalLine);
+        get().fabricCanvas.add(verticalLine);
+        get().fabricCanvas.sendToBack(horizontalLine);
+        get().fabricCanvas.sendToBack(verticalLine);
+        use3dddPlus.setState({
+          horizontalLine: horizontalLine
+        });
+        use3dddPlus.setState({
+          verticalLine: verticalLine
+        });
         get().fabricCanvas.renderAll();
         get().count += 1;
         // }
@@ -2488,6 +2519,37 @@ var fabricSlice = function fabricSlice(set, get) {
         get().fabricCanvas.clear().renderAll();
         var item = Math.abs(get().count - get().storeHistory.length - 2);
         get().fabricCanvas.loadFromJSON(get().storeHistory[item]);
+        // Remove lines
+        get().fabricCanvas.getObjects().forEach(function (obj) {
+          if (obj.type === 'line') {
+            get().fabricCanvas.remove(obj);
+          }
+        });
+        // Add lines
+        var horizontalLine = new fabric.fabric.Line([0, get().fabricCanvas.height / 2, get().fabricCanvas.height, get().fabricCanvas.height / 2], {
+          stroke: "red",
+          scaleX: 11,
+          visible: false,
+          selectable: false,
+          type: 'line'
+        });
+        var verticalLine = new fabric.fabric.Line([get().fabricCanvas.width / 2, 0, get().fabricCanvas.width / 2, get().fabricCanvas.width], {
+          stroke: "red",
+          visible: false,
+          selectable: false,
+          type: 'line'
+        });
+        horizontalLine.centerH();
+        get().fabricCanvas.add(horizontalLine);
+        get().fabricCanvas.add(verticalLine);
+        get().fabricCanvas.sendBackwards(horizontalLine);
+        get().fabricCanvas.sendBackwards(verticalLine);
+        use3dddPlus.setState({
+          horizontalLine: horizontalLine
+        });
+        use3dddPlus.setState({
+          verticalLine: verticalLine
+        });
         get().fabricCanvas.renderAll();
         get().count -= 1;
         // Update layers
@@ -2660,6 +2722,8 @@ var fabricSlice = function fabricSlice(set, get) {
         horizontalLine.centerH();
         canvas.add(horizontalLine);
         canvas.add(verticalLine);
+        get().fabricCanvas.sendBackwards(horizontalLine);
+        get().fabricCanvas.sendBackwards(verticalLine);
         use3dddPlus.setState({
           horizontalLine: horizontalLine
         });
@@ -2667,6 +2731,7 @@ var fabricSlice = function fabricSlice(set, get) {
           verticalLine: verticalLine
         });
         canvas.renderAll.bind(canvas);
+        canvas.discardActiveObject();
         use3dddPlus.setState({
           selectedStepper: undefined
         });
@@ -3450,7 +3515,7 @@ var optionpresets = {
     pathomit: 8,
     rightangleenhance: true,
     // Color quantization
-    colorsampling: 1,
+    colorsampling: 10,
     numberofcolors: 8,
     mincolorratio: 0,
     colorquantcycles: 3,
@@ -4185,7 +4250,9 @@ var ActionButtons = function ActionButtons() {
     activeSelection = _use3dddPlus[1];
   var selectAllHandler = function selectAllHandler() {
     canvas.discardActiveObject();
-    var sel = new fabric.fabric.ActiveSelection(canvas.getObjects(), {
+    var sel = new fabric.fabric.ActiveSelection(canvas.getObjects().filter(function (obj) {
+      return obj.type !== 'line';
+    }), {
       canvas: canvas
     });
     canvas.setActiveObject(sel);
@@ -4219,6 +4286,7 @@ var ActionButtons = function ActionButtons() {
       use3dddPlus.setState({
         selectedAll: false
       });
+      canvas.discardActiveObject();
       // removeItem(activeSelection);
     }
   };
@@ -4541,6 +4609,7 @@ var initCanvas = function initCanvas() {
     getAllColors();
   };
   var onObjectMoving = function onObjectMoving(e) {
+    console.log("logoeditor on moving function", e);
     use3dddPlus.getState().updateModifaction(false);
     var obj = e.target;
     // if (
@@ -4553,10 +4622,12 @@ var initCanvas = function initCanvas() {
     if (obj.getBoundingRect().top < 0 || obj.getBoundingRect().left < 0) {
       obj.top = Math.max(obj.top, obj.top - obj.getBoundingRect().top);
       obj.left = Math.max(obj.left, obj.left - obj.getBoundingRect().left);
+      obj.setCoords();
     }
     if (obj.getBoundingRect().top + obj.getBoundingRect().height > obj.canvas.height || obj.getBoundingRect().left + obj.getBoundingRect().width > obj.canvas.width) {
       obj.top = Math.min(obj.top, obj.canvas.height - obj.getBoundingRect().height + obj.top - obj.getBoundingRect().top);
       obj.left = Math.min(obj.left, obj.canvas.width - obj.getBoundingRect().width + obj.left - obj.getBoundingRect().left);
+      obj.setCoords();
     }
     var brNew = obj.getBoundingRect();
     if (brNew.width + brNew.left >= obj.canvas.width || brNew.height + brNew.top >= obj.canvas.height || brNew.left < 0 || brNew.top < 0) ; else {
@@ -4730,11 +4801,31 @@ var initCanvas = function initCanvas() {
     // use3dddPlus.setState({ selectedAll: false });
     // canvas.discardActiveObject().renderAll();
     // } else {
-    canvas.remove(canvasTarget);
-    canvas.requestRenderAll();
-    removeItem(canvasTarget);
+    // canvas.remove(canvasTarget);
+    // canvas.requestRenderAll();
+    // removeItem(canvasTarget);
     // }
     // use3dddPlus.setState({ defaultColorFill: [] });
+    var activeSelection = use3dddPlus.getState().activeSelection;
+    if (activeSelection) {
+      if (activeSelection.icon) {
+        canvas.remove(activeSelection);
+        removeItem(activeSelection);
+      } else if (activeSelection._objects) {
+        activeSelection._objects.map(function (obj) {
+          canvas.remove(obj);
+          removeItem(obj);
+        });
+      }
+      // canvas.remove(activeSelection);
+      use3dddPlus.getState().updateModifaction(true);
+      canvas.requestRenderAll();
+      use3dddPlus.setState({
+        selectedAll: false
+      });
+      canvas.discardActiveObject();
+      // removeItem(activeSelection);
+    }
   }
 
   var removeItem = function removeItem(value) {
@@ -4909,6 +5000,8 @@ var ContextMenu = function ContextMenu() {
     use3dddPlus.setState({
       showContextMenu: false
     });
+    canvas.sendBackwards(use3dddPlus.getState().verticalLine);
+    canvas.sendBackwards(use3dddPlus.getState().horizontalLine);
   };
   var bringForward = function bringForward() {
     canvas.bringForward(activeObj);
@@ -4949,6 +5042,8 @@ var ContextMenu = function ContextMenu() {
     use3dddPlus.setState({
       showContextMenu: false
     });
+    canvas.sendToBack(use3dddPlus.getState().verticalLine);
+    canvas.sendToBack(use3dddPlus.getState().horizontalLine);
   };
   var bringToFront = function bringToFront() {
     canvas.bringToFront(activeObj);
@@ -6052,12 +6147,12 @@ var PopUpCanvas = function PopUpCanvas() {
       // 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);
       popupCanv.forEachObject(function (obj) {
         if (obj.type === 'path') {
           //@ts-ignore
           if (obj.containsPoint(mouseClick)) {
             removedColors.push(obj.fill);
-            use3dddPlus.getState().popUpCanvasUpdateModification(true);
             popupCanv.remove(obj);
             popupCanv.renderAll();
           }
@@ -6110,6 +6205,9 @@ var PopUpCanvas = function PopUpCanvas() {
     use3dddPlus.setState({
       popupCanvasStoreHistory: []
     });
+    use3dddPlus.setState({
+      popUpCanvasCount: 1
+    });
   };
   var popupCanvasContinue = function popupCanvasContinue() {
     if (!conflictColors || conflictColors.length < 1) {
@@ -8904,11 +9002,10 @@ var Rightmenu = function Rightmenu() {
     className: "uppercase font-bold pt-[17px]"
   }, "Colors"), React__default.createElement("div", {
     className: "flex flex-wrap gap-x-[1rem] mt-[12px]"
-  }, activeSelection.colorFill && ((_Object$keys = Object.keys(activeSelection == null ? void 0 : activeSelection.colorFill)) == null ? void 0 : _Object$keys.map(function (item) {
-    var _activeSelection$ownM;
+  }, activeSelection.colorFill && ((_Object$keys = Object.keys(activeSelection == null ? void 0 : activeSelection.colorFill)) == null ? void 0 : _Object$keys.map(function (item, i) {
     return React__default.createElement(ColorImpl, {
       mClass: 'mb-[10px]',
-      key: activeSelection.colorFill[item] + (activeSelection == null ? void 0 : (_activeSelection$ownM = activeSelection.ownMatrixCache) == null ? void 0 : _activeSelection$ownM.key),
+      key: 'color-' + i,
       handleChange: changeSVGColor,
       property: item,
       color: activeSelection.colorFill[item]
@@ -8946,10 +9043,10 @@ var Rightmenu = function Rightmenu() {
     className: "uppercase font-bold pt-[17px]"
   }, "Color in Canvas"), React__default.createElement("div", {
     className: "flex flex-wrap gap-x-[1rem] mt-[12px] mb-[12px]"
-  }, allColor == null ? void 0 : allColor.map(function (item) {
+  }, allColor == null ? void 0 : allColor.map(function (item, i) {
     return React__default.createElement(ColorImpl, {
       mClass: 'mb-[10px]',
-      key: item,
+      key: 'color-' + i,
       handleChange: changeSVGTextColor,
       property: item,
       color: item
@@ -8960,10 +9057,10 @@ var Rightmenu = function Rightmenu() {
     className: "uppercase font-bold pt-[17px]"
   }, "Color in Canvas"), React__default.createElement("div", {
     className: "flex flex-wrap gap-x-[1rem] mt-[12px]"
-  }, allColor == null ? void 0 : allColor.map(function (item) {
+  }, allColor == null ? void 0 : allColor.map(function (item, i) {
     return React__default.createElement(ColorImpl, {
       mClass: 'mb-[10px]',
-      key: item,
+      key: 'color-' + i,
       handleChange: changeSVGTextColor,
       property: item,
       color: item
@@ -9444,7 +9541,7 @@ var SaveDesign = function SaveDesign(_ref) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
             if (isSaving) {
-              _context.next = 28;
+              _context.next = 30;
               break;
             }
             if (checkValidations()) {
@@ -9530,6 +9627,8 @@ var SaveDesign = function SaveDesign(_ref) {
             horizontalLine.centerH();
             canvas.add(horizontalLine);
             canvas.add(verticalLine);
+            canvas.sendBackwards(horizontalLine);
+            canvas.sendBackwards(verticalLine);
             use3dddPlus.setState({
               horizontalLine: horizontalLine
             });
@@ -9545,7 +9644,7 @@ var SaveDesign = function SaveDesign(_ref) {
               setIsSaving(false);
               console.log('ERROR in Save Logo:', ex);
             });
-          case 28:
+          case 30:
           case "end":
             return _context.stop();
         }