@threedddplus/logoeditor 0.0.171 → 0.0.172

package/dist/logoeditor.esm.js

@@ -4648,7 +4648,7 @@ var converterSlice = function converterSlice(set, get) {
         fontWeight: 'normal',
         top: use3dddPlus.getState().fabricCanvas.height / 2 - 40,
         left: use3dddPlus.getState().fabricCanvas.width / 2 - 205,
-        stroke: '#eb4034',
+        stroke: 'transparent',
         strokeWidth: 0,
         paintFirst: 'stroke',
         //charSpacing: 0,
@@ -5602,13 +5602,14 @@ var initCanvas = function initCanvas() {
     }
     var colors = [];
     use3dddPlus.getState().fabricCanvas.traverse(function (node) {
-      if (node.type === "text" || node.type === "group" || node.type === "path") {
+      if (node.type === "text" || node.type === "path") {
         if (node.fill && (node.fill === 'rgb(0,0,0)' || node.fill === "#000" || node.fill === "#000000")) {
           node.set({
             fill: '#040404'
           });
         }
       }
+      if (node.stroke && node.type !== 'line' && node.strokeWidth !== 0 && node.stroke !== '' && !colors.includes(node.stroke) && node.stroke !== 'rgb(0,0,0)') colors.push(node.stroke);
       if (node.fill && node.fill !== '' && !colors.includes(node.fill) && node.fill !== 'rgb(0,0,0)') colors.push(node.fill);
     });
     use3dddPlus.setState({
@@ -7521,14 +7522,19 @@ var PopUpCanvas = function PopUpCanvas() {
     })), React.createElement("div", {
       className: "mx-[10px]  text-[#c2c2c2]"
     }, React.createElement(CgArrowRight, null)), React.createElement("div", {
-      className: "flex flex-row border-[1px] border-[#D6D6D6]"
+      className: "flex flex-row border-[1px] border-[#D6D6D6]",
+      onClick: function onClick(event) {
+        event.stopPropagation();
+        event.preventDefault();
+        onSelectColor(item, event);
+      }
     }, React.createElement("span", {
       className: " border-r-[1px] border-[#D6D6D6] bg-[#fce8eb]",
       style: {
         cursor: 'pointer'
       }
     }, item["default"] === item.updated ? React.createElement(IconButton, {
-      label: "Select Color",
+      label: "",
       icon: React.createElement(GiDrop, null),
       className: '!rounded-none pointer-events-auto cursor-pointer flex  text-[#E11A38]  w-[30px] h-[30px] p-[6px]',
       size: "1.125rem"
@@ -7542,12 +7548,7 @@ var PopUpCanvas = function PopUpCanvas() {
       setPosition: setPosition,
       callback: onColorUpdate
     })), React.createElement("span", {
-      className: "py-[5px] pl-[10px] pr-[6px] font-medium text-[13px] bg-[#F1F1F1] cursor-pointer",
-      onClick: function onClick(event) {
-        event.stopPropagation();
-        event.preventDefault();
-        onSelectColor(item, event);
-      }
+      className: "py-[5px] pl-[10px] pr-[6px] font-medium text-[13px] bg-[#F1F1F1] cursor-pointer"
     }, "Select Color")), React.createElement("span", {
       className: ""
     }, React.createElement(IconButton, {
@@ -9465,82 +9466,105 @@ var Properties = function Properties(_ref2) {
   var changeSVGTextColor = function changeSVGTextColor(property, color) {
     var previousColor = property;
     canvas.getObjects().map(function (data) {
-      if (data.type === 'text') {
-        console.log(data);
-        var _C = data.fill;
-        // if (data.fill === previousColor || data.stroke ===  previousColor) {
-        if (_C === previousColor) {
-          data.set({
-            fill: color,
-            // stroke:color,
-            // colorFill: { layer0: color ,layer1: color },
-            colorFill: {
-              layer0: color
-            }
-          });
-        }
-        //  canvas.renderAll();
-      } else if (data.type === 'path') {
-        var _C2 = data.fill;
-        if (_C2 === previousColor) {
-          data.set({
-            fill: color,
-            colorFill: {
-              layer0: color
-            }
-          });
-        }
-        //  canvas.renderAll();
-      } else if (data.type === 'group') {
-        // console.log(data);
-        var objImage = data._objects;
-        objImage.forEach(function (ele) {
-          var _C = ele.fill === 'transparent' || typeof ele.fill === 'string' && ele.fill.includes('#') ? ele.fill : RGBToHex(ele.fill);
-          if (_C === previousColor) {
-            ele.set({
-              fill: color,
-              colorFill: {
-                layer0: color
-              }
-            });
-          }
-        });
-        var _colorFill = _extends({}, data.colorFill);
-        Object.keys(_colorFill).forEach(function (item) {
-          if (_colorFill[item] === previousColor) {
-            _colorFill[item] = color;
-          }
-        });
-        data.set({
-          colorFill: _colorFill
-        });
-      }
-      if (data && data.icon) {
-        data.icon = data.toDataURL('image/png');
-      } else if (data._objects && data._objects.length) {
-        data._objects[0].icon = data.toDataURL('image/png');
-      }
+      var _C = data.fill;
+      setPropertyColor({
+        data: data,
+        previousColor: previousColor,
+        _C: _C,
+        color: color,
+        property: 'fill',
+        setColorFill: true
+      });
+      setPropertyColor({
+        data: data,
+        previousColor: previousColor,
+        _C: data.stroke,
+        color: color,
+        property: 'stroke',
+        setColorFill: false
+      });
     });
     canvas.renderAll();
     use3dddPlus.getState().updateModifaction(true);
   };
+  //@ts-ignore
+  var setPropertyColor = function setPropertyColor(_ref6) {
+    var data = _ref6.data,
+      previousColor = _ref6.previousColor,
+      _C = _ref6._C,
+      color = _ref6.color,
+      property = _ref6.property,
+      setColorFill = _ref6.setColorFill;
+    if (data.type === 'text') {
+      if (_C === previousColor) {
+        var _updated;
+        var updated = (_updated = {}, _updated[property] = color, _updated);
+        if (setColorFill) updated.colorFill = {
+          layer0: color
+        };
+        data.set(updated);
+      }
+    } else if (data.type === 'path') {
+      if (_C === previousColor) {
+        var _updated3;
+        var _updated2 = (_updated3 = {}, _updated3[property] = color, _updated3);
+        if (setColorFill) _updated2.colorFill = {
+          layer0: color
+        };
+        data.set(_updated2);
+      }
+    } else if (data.type === 'group') {
+      // console.log(data);
+      var objImage = data._objects;
+      objImage.forEach(function (ele) {
+        var _C = ele[property] === 'transparent' || typeof ele[property] === 'string' && ele[property].includes('#') ? ele.fill : RGBToHex(ele[property]);
+        if (_C === previousColor) {
+          var _updated5;
+          var _updated4 = (_updated5 = {}, _updated5[property] = color, _updated5);
+          if (setColorFill) _updated4.colorFill = {
+            layer0: color
+          };
+          ele.set(_updated4);
+        }
+      });
+      var _colorFill = _extends({}, data.colorFill);
+      setColorFill && Object.keys(_colorFill).forEach(function (item) {
+        if (_colorFill[item] === previousColor) {
+          _colorFill[item] = color;
+        }
+      });
+      setColorFill && data.set({
+        colorFill: _colorFill
+      });
+    }
+    if (data && data.icon) {
+      data.icon = data.toDataURL('image/png');
+    } else if (data._objects && data._objects.length) {
+      data._objects[0].icon = data.toDataURL('image/png');
+    }
+  };
   var changeSVGColor = function changeSVGColor(property, color) {
     console.log(property, color);
     var fillColor = colorFill;
     var previousColor = fillColor[property];
     var SelectedObjet = use3dddPlus.getState().activeSelection;
     // let objImage = SelectedObjet._objects;
+    // const colors = new Set()
     SelectedObjet.traverse(function (ele) {
-      var _C = ele.fill === 'transparent' || typeof ele.fill === 'string' && ele.fill.includes('#') ? ele.fill : RGBToHex(ele.fill);
-      if (_C === previousColor) {
-        ele.set({
-          fill: color,
-          colorFill: {
-            layer0: color
-          }
-        });
+      if (ele.id !== SelectedObjet.id && SelectedObjet.type === 'group' || SelectedObjet.type !== 'group') {
+        var _C = ele.fill === 'transparent' || typeof ele.fill === 'string' && ele.fill.includes('#') ? ele.fill : RGBToHex(ele.fill);
+        if (_C === previousColor) {
+          ele.set({
+            fill: color,
+            colorFill: {
+              layer0: color
+            }
+          });
+          // colors.add(ele.fill)
+        }
       }
     });
+    // alert(Array.from(colors).join(","))
     var tempColorFill = _extends({}, SelectedObjet.colorFill);
     Object.keys(tempColorFill).forEach(function (item) {
       if (tempColorFill[item] === previousColor) {
@@ -9561,7 +9585,7 @@ var Properties = function Properties(_ref2) {
     use3dddPlus.getState().updateModifaction(true);
   };
   var textToPath = /*#__PURE__*/function () {
-    var _ref6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(objects) {
+    var _ref7 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(objects) {
       var promises, pathObj;
       return _regeneratorRuntime().wrap(function _callee4$(_context4) {
         while (1) switch (_context4.prev = _context4.next) {
@@ -9607,7 +9631,7 @@ var Properties = function Properties(_ref2) {
       }, _callee4);
     }));
     return function textToPath(_x4) {
-      return _ref6.apply(this, arguments);
+      return _ref7.apply(this, arguments);
     };
   }();
   var bridgeShapeChange = function bridgeShapeChange() {
@@ -9633,7 +9657,7 @@ var Properties = function Properties(_ref2) {
     }
   };
   var textShapeChange = /*#__PURE__*/function () {
-    var _ref7 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5(e, textChange, fontSize, charSpacing, strokeWidth, fontWeight, textAlign, fontStyle) {
+    var _ref8 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5(e, textChange, fontSize, charSpacing, strokeWidth, fontWeight, textAlign, fontStyle) {
       var pathData, p, shapeType, activeObj, currentSelection, text, _text, fabricPath, dims, newTextPath, _dims;
       return _regeneratorRuntime().wrap(function _callee5$(_context5) {
         while (1) switch (_context5.prev = _context5.next) {
@@ -9971,7 +9995,7 @@ var Properties = function Properties(_ref2) {
       }, _callee5);
     }));
     return function textShapeChange(_x5, _x6, _x7, _x8, _x9, _x10, _x11, _x12) {
-      return _ref7.apply(this, arguments);
+      return _ref8.apply(this, arguments);
     };
   }();
   var updateStoreAllObject = function updateStoreAllObject(text) {
@@ -9985,7 +10009,7 @@ var Properties = function Properties(_ref2) {
     use3dddPlus.getState().storeAllObject.splice(index, 0, text);
   };
   var reduceFontSize = /*#__PURE__*/function () {
-    var _ref8 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee6() {
+    var _ref9 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee6() {
       var brNew, canvasWidth, canvasHeight, _activeObj;
       return _regeneratorRuntime().wrap(function _callee6$(_context6) {
         while (1) switch (_context6.prev = _context6.next) {
@@ -10016,7 +10040,7 @@ var Properties = function Properties(_ref2) {
       }, _callee6);
     }));
     return function reduceFontSize() {
-      return _ref8.apply(this, arguments);
+      return _ref9.apply(this, arguments);
     };
   }();
   var RGBToHex = function RGBToHex(rgb) {