@threedddplus/logoeditor 0.0.111 → 0.0.112-0

package/dist/logoeditor.esm.js

@@ -3973,19 +3973,23 @@ var converterSlice = function converterSlice(set, get) {
     if (canvasToLoad === void 0) {
       canvasToLoad = use3dddPlus.getState().popupCanv;
     }
-    fabric.loadSVGFromString(String(svgstr), function (objects, options) {
-      var _canvasToLoad, _loadedObject$id;
+    fabric.loadSVGFromString(
+    //@ts-ignore
+    new String(svgstr), function (objects, options) {
+      var _canvasToLoad, _use3dddPlus$getState;
       var svgData = getDesignConceptSVGData(svgstr);
       console.log(svgData);
       var loadedObject = fabric.util.groupSVGElements(objects, options);
-      // Process each SVG data item to adjust object properties
       svgData.forEach(function (resItem) {
-        var path, node;
-        objects.forEach(function (item) {
-          // @ts-ignore
+        var path;
+        var node;
+        objects == null ? void 0 : objects.forEach(function (item) {
+          //@ts-ignore
+          // console.log(item.id, res[0].path.replace("#", ""));
+          //@ts-ignore
           if (item.id === resItem.path) {
             path = item;
-            // @ts-ignore
+            //@ts-ignore
           } else if (item.id === resItem.element) {
             node = item;
           }
@@ -3993,100 +3997,247 @@ var converterSlice = function converterSlice(set, get) {
         if (node && path) {
           var _resItem$node$childre, _resItem$node$childre2;
           var fontSize = (_resItem$node$childre = resItem.node.children[0]) == null ? void 0 : (_resItem$node$childre2 = _resItem$node$childre.getAttribute('font-size')) == null ? void 0 : _resItem$node$childre2.replace('px', '');
+          // console.log(
+          //   'fontSize',
+          //   resItem.node.children[0],
+          //   fontSize,
+          //   path.top,
+          //   path.left,
+          //   path.textWidth,
+          //   path.width
+          // );
           node.set({
             path: path,
             top: path.top,
             left: path.left,
             pathStartOffset: path.width * parseFloat(resItem.node.startOffset.baseVal.valueAsString) / 100,
+            // fontFamily: resItem.node.children[0].getAttribute("font-family"),
             fontSize: fontSize || 25
           });
           node.setCoords();
         }
       });
-      // Adjust the loaded object's dimensions based on its content
+      // loadedObject.scaleToHeight(300);
+      // loadedObject.scaleToWidth(300);
       var canvas = (_canvasToLoad = canvasToLoad) != null ? _canvasToLoad : use3dddPlus.getState().popupCanv;
-      adjustObjectSize(loadedObject, canvas);
-      // Process and analyze color data from the loaded objects
-      // @ts-ignore
-      var objImage = loadedObject._objects;
+      var canvasWidth = canvas.width;
+      var canvasHeight = canvas.height;
+      var val = 300;
+      if ((loadedObject.width <= 200 || loadedObject.height <= 200) && (loadedObject.minX === -0 || loadedObject.minX)) {
+        val = 600;
+      }
+      if (Math.ceil(loadedObject.width + loadedObject.left + 45) >= Math.floor(canvasWidth)) {
+        loadedObject.scaleToWidth(val);
+      } else if (Math.ceil(loadedObject.height + loadedObject.top + 10) >= Math.floor(canvasHeight)) {
+        loadedObject.scaleToHeight(val);
+      } else if (Math.ceil(loadedObject.left) < 0) {
+        loadedObject.scaleToWidth(val);
+      } else if (Math.ceil(loadedObject.top) < 0) {
+        loadedObject.scaleToHeight(val);
+      } else if (loadedObject.width < 200 || loadedObject.height < 200) {
+        loadedObject.scaleToWidth(val);
+      }
+      //@ts-ignore
+      var objImage = loadedObject == null ? void 0 : loadedObject._objects;
+      var _Fills = [];
       var fillCounts = {};
       var colorObjects = {};
-      objImage.forEach(function (ele) {
-        ele.set({
-          strokeWidth: 0,
-          id: ele.id || use3dddPlus.getState().guid()
-        });
-        if (typeof ele.fill === 'string' && ele.fill !== '') {
-          var fillColor = ele.fill.toString();
-          var pixelCount = ele.width * ele.height;
-          fillCounts[fillColor] = (fillCounts[fillColor] || 0) + pixelCount;
-          if (!colorObjects[fillColor]) {
-            colorObjects[fillColor] = {
-              objects: []
-            };
+      if (objImage) {
+        objImage.forEach(function (ele) {
+          var _ele$id;
+          ele.set({
+            strokeWidth: 0
+          });
+          ele.set({
+            id: (_ele$id = ele.id) != null ? _ele$id : use3dddPlus.getState().guid()
+          });
+          if (typeof ele.fill === 'string' && ele.fill !== '') {
+            set({
+              fillColor: [].concat(ele.fill)
+            });
+            var fillColor = ele.fill.toString();
+            var pixelCount = ele.width * ele.height;
+            fillCounts[fillColor] = (fillCounts[fillColor] || 0) + pixelCount;
+            if (colorObjects[fillColor]) {
+              colorObjects[fillColor].objects.push(ele.get('id'));
+            } else {
+              colorObjects[fillColor] = {
+                objects: [ele.get('id')]
+              };
+            }
           }
-          colorObjects[fillColor].objects.push(ele.id);
-        }
+        });
+      }
+      use3dddPlus.setState({
+        loadedObject: objImage
       });
-      // Determine top used colors and map them
       var sortedFillColors = Object.keys(fillCounts).sort(function (a, b) {
         return fillCounts[b] - fillCounts[a];
       });
       var topColors = sortedFillColors.slice(0, colorValue);
       var colorObjectsHex = {};
-      topColors.forEach(function (e) {
-        var colorHex = e.startsWith('#') ? e : get().RGBToHex(e);
-        colorObjectsHex[colorHex] = {
-          objects: colorObjects[e].objects
-        };
-        colorObjects[e].hex = colorHex;
+      topColors.map(function (e) {
+        if (e.search('#') === -1) {
+          var _C = get().RGBToHex(e);
+          _Fills.push(_C);
+          colorObjects[e].hex = _C;
+          colorObjectsHex[_C] = colorObjects[e];
+        } else {
+          _Fills.push(e);
+          colorObjects[e].hex = e;
+          colorObjectsHex[e] = colorObjects[e];
+        }
       });
-      // Assign colors to objects and adjust display settings
-      objImage.forEach(function (ele) {
-        ele.set({
-          fill: colorObjects[ele.fill.toString()].hex
+      //@ts-ignore
+      set({
+        fillColor: get().removeDuplicates(_Fills)
+      });
+      //@ts-ignore
+      _Fills = get().removeDuplicates(_Fills);
+      var fillColors = {};
+      _Fills.map(function (item, index) {
+        fillColors['layer' + index] = item;
+      });
+      use3dddPlus.setState({
+        colorFill: fillColors
+      });
+      // Update colors in default color fill
+      var defaultCF = [];
+      Object.keys(fillColors).map(function (cf) {
+        defaultCF.push({
+          property: cf,
+          "default": fillColors[cf],
+          updated: fillColors[cf],
+          objects: colorObjectsHex[fillColors[cf]].objects
+        });
+      });
+      use3dddPlus.setState({
+        defaultColorFill: defaultCF
+      });
+      use3dddPlus.setState({
+        defaultColorFillCopy: defaultCF
+      });
+      function euclideanDistance(color1, color2) {
+        var c1 = new fabric.Color(color1).getSource();
+        var c2 = new fabric.Color(color2).getSource();
+        var diffR = c1[0] - c2[0];
+        var diffG = c1[1] - c2[1];
+        var diffB = c1[2] - c2[2];
+        return Math.sqrt(Math.pow(diffR, 2) + Math.pow(diffG, 2) + Math.pow(diffB, 2));
+      }
+      var colorMap = {};
+      sortedFillColors.forEach(function (color) {
+        var closestColor = topColors.reduce(function (prev, curr) {
+          var prevDiff = euclideanDistance(color, prev);
+          var currDiff = euclideanDistance(color, curr);
+          return prevDiff < currDiff ? prev : curr;
         });
+        colorMap[color] = closestColor;
       });
+      if (objImage) {
+        objImage.forEach(function (ele) {
+          ele.set({
+            fill: colorMap[ele.fill.toString()]
+          });
+        });
+      }
       loadedObject.set({
+        colorFill: fillColors,
         //@ts-ignore
-        colorFill: Object.keys(colorObjectsHex).reduce(function (acc, hex) {
-          var _extends2;
-          return _extends({}, acc, (_extends2 = {}, _extends2[hex] = colorObjectsHex[hex].objects, _extends2));
-        }, {}),
-        hasControls: false
+        setControlVisible: false
       });
-      // loadedObject.setControlVisible()
-      // @ts-ignore
-      loadedObject.id = (_loadedObject$id = loadedObject.id) != null ? _loadedObject$id : use3dddPlus.getState().guid();
+      loadedObject.id = use3dddPlus.getState().guid();
+      // loadedObject = new fabric.Group(objImage, options);
+      (_use3dddPlus$getState = use3dddPlus.getState().popupCanv) == null ? void 0 : _use3dddPlus$getState.clear();
+      // use3dddPlus
+      //   .getState()
+      //   .popupCanv.setBackgroundColor(
+      //     {
+      //       source:
+      //         'https://storage.googleapis.com/3ddplusgcp/logoEditor/assets/icons/checkerBoxBG.png',
+      //       repeat: 'repeat',
+      //     },
+      //     use3dddPlus
+      //       .getState()
+      //       .popupCanv.renderAll.bind(use3dddPlus.getState().popupCanv),
+      //     {
+      //       backgroundImageOpacity: 1,
+      //       scaleX: 1.1,
+      //       scaleY: 1.1,
+      //       backgroundRepeat: 'repeat',
+      //     }
+      //   );
+      // const canvas = use3dddPlus.getState().popupCanv;
+      var gridSize = 15; // Size of each grid cell
+      // var canvasWidth = canvas.width;
+      // var canvasHeight = canvas.height;
+      var numCols = Math.ceil(canvasWidth / gridSize);
+      var numRows = Math.ceil(canvasHeight / gridSize);
+      // Function to create a rectangle with checkerboard pattern
+      function createCheckerboardRect(left, top, width, height, isEvenRow) {
+        var rect = new fabric.Rect({
+          left: left,
+          top: top,
+          width: width,
+          height: height,
+          type: 'line',
+          lockMovementX: true,
+          lockMovementY: true,
+          lockScalingX: true,
+          lockScalingY: true,
+          // backgroundColor:'#ccc',
+          fill: isEvenRow && left / gridSize % 2 === 0 || !isEvenRow && left / gridSize % 2 !== 0 ? '#ffffff' : '#dadadac7'
+        });
+        return rect;
+      }
+      // Create grid lines
+      for (var i = 0; i < numCols; i++) {
+        var x = i * gridSize;
+        canvas.add(new fabric.Line([x, 0, x, canvasHeight], {
+          stroke: '#dadadac7',
+          selectable: false,
+          lockMovementX: true,
+          lockMovementY: true,
+          lockScalingX: true,
+          lockScalingY: true,
+          type: 'line'
+        }));
+      }
+      for (var j = 0; j < numRows; j++) {
+        var y = j * gridSize;
+        canvas.add(new fabric.Line([0, y, canvasWidth, y], {
+          stroke: '#FFFFFF',
+          selectable: false,
+          lockMovementX: true,
+          lockMovementY: true,
+          lockScalingX: true,
+          lockScalingY: true,
+          type: 'line'
+        }));
+      }
+      // Fill grid with checkerboard pattern
+      for (var i = 0; i < numCols; i++) {
+        for (var j = 0; j < numRows; j++) {
+          var _use3dddPlus$getState2, _use3dddPlus$getState3;
+          var left = i * gridSize;
+          var top = j * gridSize;
+          var isEvenRow = j % 2 === 0;
+          var rect = createCheckerboardRect(left, top, gridSize, gridSize, isEvenRow);
+          (_use3dddPlus$getState2 = use3dddPlus.getState()) == null ? void 0 : (_use3dddPlus$getState3 = _use3dddPlus$getState2.popupCanv) == null ? void 0 : _use3dddPlus$getState3.add(rect);
+        }
+      }
       canvas.add(loadedObject).renderAll();
       canvas.centerObject(loadedObject);
       canvas.setActiveObject(loadedObject);
       use3dddPlus.setState({
-        activeSelection: loadedObject,
+        activeSelection: loadedObject
+      });
+      use3dddPlus.setState({
         loading: false
       });
-      // Update canvas with modifications
       use3dddPlus.getState().popUpCanvasUpdateModification(true);
     });
   };
-  function adjustObjectSize(loadedObject, canvas) {
-    var scale = 300;
-    var canvasWidth = canvas.width;
-    var canvasHeight = canvas.height;
-    if (loadedObject.width <= 200 || loadedObject.height <= 200) {
-      scale = 600;
-    }
-    // Scale the object to fit within the canvas dimensions
-    if (Math.ceil(loadedObject.width + loadedObject.left + 45) >= Math.floor(canvasWidth)) {
-      loadedObject.scaleToWidth(scale);
-    } else if (Math.ceil(loadedObject.height + loadedObject.top + 10) >= Math.floor(canvasHeight)) {
-      loadedObject.scaleToHeight(scale);
-    } else if (Math.ceil(loadedObject.left) < 0 || Math.ceil(loadedObject.top) < 0) {
-      loadedObject.scaleToWidth(scale);
-    } else if (loadedObject.width < 200 || loadedObject.height < 200) {
-      loadedObject.scaleToWidth(scale);
-    }
-  }
   // function convertToFabricUnits(valueWithUnit, canvasHeight = 500) {
   //   // Parse the value and unit from the string
   //   const matches = valueWithUnit.match(/^([\d.]+)(\D+)$/);
@@ -10280,12 +10431,12 @@ var style = {
       // border: '1px solid #BEBEBE',
       border: state.isFocused ? 0 : 0,
       // This line disable the blue border
-      boxShadow: state.isFocused ? 'none' : 'none',
+      boxShadow: state.isFocused ? 'none !important' : 'none !important',
       '&:hover': {
         border: state.isFocused ? 0 : 0
       },
       '&:focus': {
-        boxShadow: 'none'
+        boxShadow: 'none !important'
       }
     });
   },