@threedddplus/logoeditor 0.0.86 → 0.0.88

package/dist/logoeditor.cjs.development.js

@@ -4695,6 +4695,7 @@ var initCanvas = function initCanvas() {
     getAllColors();
   };
   var onObjectMoving = function onObjectMoving(e) {
+    console.log(e);
     use3dddPlus.getState().updateModifaction(false);
     var obj = e.target;
     // if (
@@ -4704,18 +4705,18 @@ var initCanvas = function initCanvas() {
     //   return;
     // }
     obj.setCoords();
-    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);
+    if (obj.getBoundingRect().top < 10 || obj.getBoundingRect().left < 45) {
+      obj.top = Math.max(obj.top, obj.top - obj.getBoundingRect().top + 10);
+      obj.left = Math.max(obj.left, obj.left - obj.getBoundingRect().left + 45);
       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);
+    if (obj.getBoundingRect().top + obj.getBoundingRect().height + 10 > obj.canvas.height || obj.getBoundingRect().left + obj.getBoundingRect().width + 45 > obj.canvas.width) {
+      obj.top = Math.min(obj.top, obj.canvas.height - obj.getBoundingRect().height + obj.top - obj.getBoundingRect().top - 10);
+      obj.left = Math.min(obj.left, obj.canvas.width - obj.getBoundingRect().width + obj.left - obj.getBoundingRect().left - 45);
       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 {
+    if (brNew.width + brNew.left + 45 >= obj.canvas.width || brNew.height + brNew.top + 10 >= obj.canvas.height || brNew.left < 45 || brNew.top < 10) ; else {
       left1 = obj.left;
       top1 = obj.top;
       scale1x = obj.scaleX;
@@ -4786,14 +4787,14 @@ var initCanvas = function initCanvas() {
     return Math.abs(scaledObjCenterX - canvasCenterX) < threshold;
   }
   var horizontalLine = new fabric.fabric.Line([0, canv.height / 2, canv.height, canv.height / 2], {
-    stroke: "red",
+    stroke: 'red',
     scaleX: 11,
     visible: false,
     selectable: false,
     type: 'line'
   });
   var verticalLine = new fabric.fabric.Line([canv.width / 2, 0, canv.width / 2, canv.width], {
-    stroke: "red",
+    stroke: 'red',
     visible: false,
     selectable: false,
     type: 'line'
@@ -4914,13 +4915,14 @@ var initCanvas = function initCanvas() {
   }
 
   var removeItem = function removeItem(value) {
-    //@ts-ignore    
+    //@ts-ignore
     var index = use3dddPlus.getState().storeAllObject.findIndex(function (obj) {
       return obj.id === value.id;
     });
     if (index === -1 && value && value._objects && value._objects.length > 0) {
+      var index = use3dddPlus.getState()
       //@ts-ignore
-      var index = use3dddPlus.getState().storeAllObject.indexOf(value._objects[0]);
+      .storeAllObject.indexOf(value._objects[0]);
     }
     if (index > -1) {
       use3dddPlus.getState().storeAllObject.splice(index, 1);
@@ -4986,6 +4988,7 @@ var initCanvas = function initCanvas() {
   canv.on('selection:updated', onObjectUpdated);
   canv.on('object:moving', onObjectMoving);
   canv.on('object:modified', function (e) {
+    e.target.lockRotation = false;
     use3dddPlus.getState().updateModifaction(true);
     if (isObjectInCenter(e.target)) {
       use3dddPlus.getState().verticalLine.set({
@@ -5019,7 +5022,7 @@ var initCanvas = function initCanvas() {
     var obj = e.target;
     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) {
+    if (brNew.width + brNew.left + 45 >= obj.canvas.width || brNew.height + brNew.top + 10 >= obj.canvas.height || brNew.left < 45 || brNew.top < 10) {
       obj.left = left1;
       obj.top = top1;
       obj.scaleX = scale1x;
@@ -5043,9 +5046,13 @@ var initCanvas = function initCanvas() {
       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();
+      if (obj.getBoundingRect().top < 0 || obj.getBoundingRect().left < 0) {
+        obj.lockRotation = true;
+      } else {
+        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();
+      }
     }
   });
   return canv;
@@ -5898,7 +5905,7 @@ var ColorPalette = function ColorPalette(_ref) {
   };
   return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
     id: "colorPalette",
-    className: "right-[10.6rem] z-10 max-h-[16.4375rem] border border-[#FCE8EB] before:bg-[#ffffff] shadow-[0px_3px_6px_rgba(0,0,0,0.16)] py-[1.8125rem] px-[1.4063rem] bg-[#fff] mt-[1.875rem] mr-[1rem] absolute h-[300px]",
+    className: "colorPalette right-[10.6rem] z-10 max-h-[16.4375rem] border border-[#FCE8EB] before:bg-[#ffffff] shadow-[0px_3px_6px_rgba(0,0,0,0.16)] py-[1.8125rem] px-[1.4063rem] bg-[#fff] mt-[1.875rem] mr-[1rem] absolute h-[300px]",
     style: style
   }, (colorList == null ? void 0 : colorList.length) > 0 && React__default.createElement(React__default.Fragment, null, React__default.createElement("p", {
     className: TEXT_SIZE_9 + " leading-[1.125rem] font-bold pb-[1.125rem] text-left"
@@ -5964,24 +5971,6 @@ var ColorBox = function ColorBox(_ref2) {
 };
 
 var ColorImpl = function ColorImpl(props) {
-  var _useState = React.useState(props.displayPallet ? true : false),
-    displayPallet = _useState[0],
-    setdisplayPallet = _useState[1];
-  var _useState2 = React.useState(props.color),
-    setColor = _useState2[1];
-  var _useState3 = React.useState(props.position),
-    position = _useState3[0],
-    setPosition = _useState3[1];
-  React.useEffect(function () {
-    if (!displayPallet && props.onClose) {
-      props.onClose();
-    }
-  }, [displayPallet]);
-  var handleColorClick = function handleColorClick(color) {
-    // console.log(color);
-    setColor(color);
-    props.handleChange(props.property, color);
-  };
   var getLable = function getLable(colorCode) {
     var color = defaultColorNames.find(function (c) {
       return colorCode === c.color;
@@ -6004,16 +5993,16 @@ var ColorImpl = function ColorImpl(props) {
     onClick: function onClick(event) {
       event.stopPropagation();
       event.preventDefault();
-      setdisplayPallet(function (prev) {
-        return !prev;
+      props.setDisplayPallet({
+        visible: true,
+        property: props.property,
+        color: '',
+        callback: props.callback
       });
-      setPosition({
+      props.setPosition({
         x: event.clientX,
         y: event.clientY
       });
-    },
-    onBlur: function onBlur() {
-      return setdisplayPallet(false);
     }
   }, props.color === 'transparent' && React__default.createElement("div", {
     style: {
@@ -6024,31 +6013,7 @@ var ColorImpl = function ColorImpl(props) {
       marginLeft: '13px',
       marginTop: '-6px'
     }
-  }, "\xA0"), displayPallet && React__default.createElement(ColorPalette, {
-    mainClass: "left-0 " + props.mClass,
-    handleColorChange: handleColorClick,
-    style: position ? {
-      position: 'fixed',
-      left: position.x - 450,
-      top: position.y - 5,
-      width: '450px'
-    } : {}
-  })
-  // <div
-  //   className="absolute"
-  //   style={{ zIndex: '100' }}
-  //   tabIndex={0}
-  //   onBlur={() => setdisplayPallet(false)}
-  // >
-  //   <ChromePicker
-  //     color={color.hex}
-  //     onChangeComplete={onChangeComplete}
-  //     onChange={onChangeComplete}
-  //     disableAlpha={true}
-  //   />
-  //   <hr />
-  // </div>
-  )));
+  }, "\xA0"))));
 };
 
 var Initpopup = function Initpopup() {
@@ -6123,6 +6088,26 @@ var PopUpCanvas = function PopUpCanvas() {
     isNextClicked = _useState4[0],
     setIsNextClicked = _useState4[1];
   var defaultColorFillRef = React.useRef([]);
+  var _useState5 = React.useState({
+      visible: false,
+      property: '',
+      color: '',
+      callback: null
+    }),
+    displayPallet = _useState5[0],
+    setDisplayPallet = _useState5[1];
+  var _useState6 = React.useState(null),
+    position = _useState6[0],
+    setPosition = _useState6[1];
+  React.useEffect(function () {
+    if (!displayPallet || !displayPallet.visible) {
+      setDefaultColorFill(defaultColorFill.map(function (cf) {
+        return _extends({}, cf, {
+          hasPallet: false
+        });
+      }));
+    }
+  }, [displayPallet]);
   React.useEffect(function () {
     defaultColorFillRef.current = defaultColorFill;
   }, [defaultColorFill]);
@@ -6154,6 +6139,7 @@ var PopUpCanvas = function PopUpCanvas() {
         }, 100);
       }
     }
+    setColorFillCount(-1);
   }, [colorFill]);
   React.useEffect(function () {
     if (colorFillCount && colorFillCount > 0) {
@@ -6221,10 +6207,12 @@ var PopUpCanvas = function PopUpCanvas() {
     }
   };
   var removeColorPalatte = function removeColorPalatte() {
-    var pallete = document.getElementById('colorPalette');
-    if (pallete) {
-      pallete.parentElement.click();
-    }
+    setDisplayPallet({
+      visible: false,
+      property: '',
+      color: '',
+      callback: null
+    });
   };
   React.useEffect(function () {
     fabric.fabric.Object.prototype.hasControls = false;
@@ -6438,16 +6426,26 @@ var PopUpCanvas = function PopUpCanvas() {
           x: event.clientX,
           y: event.clientY
         }
-      }) : cf;
-    }));
-  };
-  var onClosePalette = function onClosePalette() {
-    setDefaultColorFill(defaultColorFill.map(function (c) {
-      return _extends({}, c, {
+      }) : _extends({}, cf, {
         hasPallet: false
       });
     }));
+    setDisplayPallet({
+      visible: true,
+      property: item.property,
+      color: item.updated,
+      callback: onColorUpdate
+    });
+    setPosition({
+      x: event.clientX,
+      y: event.clientY
+    });
   };
+  // const onClosePalette = () => {
+  //   setDefaultColorFill(
+  //     defaultColorFill.map((c: any) => ({ ...c, hasPallet: false }))
+  //   );
+  // };
   var onPopUpCanvasUndo = function onPopUpCanvasUndo() {
     var colors = popUpCanvasUndo();
     if (colors !== null) {
@@ -6633,9 +6631,10 @@ var PopUpCanvas = function PopUpCanvas() {
       handleChange: onColorUpdate,
       property: item.property,
       color: item.updated,
-      onClose: onClosePalette,
-      displayPallet: true,
-      position: item.position
+      // onClose={onClosePalette}
+      setDisplayPallet: setDisplayPallet,
+      setPosition: setPosition,
+      callback: onColorUpdate
     }) : React__default.createElement(IconButton, {
       label: "Select Color",
       icon: React__default.createElement(gi.GiDrop, null),
@@ -6651,7 +6650,10 @@ var PopUpCanvas = function PopUpCanvas() {
       handleChange: onColorUpdate,
       property: item.property,
       color: item.updated,
-      onClose: onClosePalette
+      // onClose={onClosePalette}
+      setDisplayPallet: setDisplayPallet,
+      setPosition: setPosition,
+      callback: onColorUpdate
     })), React__default.createElement("span", {
       className: "py-[5px] pl-[10px] pr-[6px] font-medium text-[13px] bg-[#F1F1F1]"
     }, "Select Color")), React__default.createElement("span", {
@@ -6754,7 +6756,26 @@ var PopUpCanvas = function PopUpCanvas() {
     style: {
       marginTop: '10px'
     }
-  }, "Cancel"))))))))));
+  }, "Cancel"))))))))), displayPallet && displayPallet.visible && React__default.createElement(ColorPalette, {
+    mainClass: "left-0",
+    handleColorChange: function handleColorChange(color) {
+      displayPallet.callback(displayPallet.property, color);
+      setDisplayPallet({
+        visible: false,
+        property: '',
+        color: '',
+        callback: null
+      });
+    },
+    style: position ? {
+      position: 'fixed',
+      left: position.x - 450,
+      top: position.y - 5,
+      width: '450px'
+    } : {
+      display: 'none'
+    }
+  }));
 };
 
 var UploadLogo = function UploadLogo() {
@@ -8004,6 +8025,17 @@ var Rightmenu = function Rightmenu() {
   var _useState6 = React.useState(false),
     isNextClicked = _useState6[0],
     setIsNextClicked = _useState6[1];
+  var _useState7 = React.useState({
+      visible: false,
+      property: '',
+      color: '',
+      callback: null
+    }),
+    displayPallet = _useState7[0],
+    setDisplayPallet = _useState7[1];
+  var _useState8 = React.useState(null),
+    position = _useState8[0],
+    setPosition = _useState8[1];
   var tabs = [{
     id: 1,
     label: 'Properties'
@@ -8560,6 +8592,13 @@ var Rightmenu = function Rightmenu() {
     // textSelected.set('text', use3dddPlus.getState().textInfo);
     use3dddPlus.getState().forIconCapture();
     textSelected.icon = use3dddPlus.getState().iconImage;
+    var dublicateText = textSelected;
+    var brNewD = textSelected.getBoundingRect();
+    if (brNewD.width + brNewD.left + 45 >= dublicateText.canvas.width || brNewD.height + brNewD.top + 10 >= dublicateText.canvas.height || brNewD.left < 0 || brNewD.top < 0) {
+      var newFontSize = canvasWidth / (brNew.width + brNew.left) * textSelected.fontSize;
+      textSelected.set('fontSize', textSelected.fontSize - 3);
+    }
+    textSelected.setCoords();
     canvas.renderAll();
     use3dddPlus.getState().updateModifaction(true);
   };
@@ -8588,7 +8627,7 @@ var Rightmenu = function Rightmenu() {
     //   brNew = dublicateText.getBoundingRect();
     // }
     var brNew = dublicateText.getBoundingRect();
-    if (brNew.width + brNew.left >= textSelected.canvas.width || brNew.height + brNew.top >= textSelected.canvas.height || brNew.left < 0 || brNew.top < 0) {
+    if (brNew.width + brNew.left + 45 >= textSelected.canvas.width || brNew.height + brNew.top + 10 >= textSelected.canvas.height || brNew.left < 45 || brNew.top < 10) {
       if (currentSelection === 'path') {
         textSelected.set('fontSize', event.target.value - (Math.sign(toReduceSize) >= 0 ? toReduceSize : 1));
         textShapeChange(textSelected.shapeType, true);
@@ -8692,16 +8731,40 @@ var Rightmenu = function Rightmenu() {
   };
   var textSpacingHandler = function textSpacingHandler(e) {
     // setSpacinglineVal(e.target.valueAsNumber);
-    textSelected.charSpacing = e.target.valueAsNumber;
-    if (currentSelection === 'path') {
-      textShapeChange(textSelected.shapeType, true);
-    }
-    use3dddPlus.getState().updateModifaction(true);
-    use3dddPlus.getState().forIconCapture();
-    textSelected.icon = use3dddPlus.getState().iconImage;
-    canvas.renderAll();
-    if (textSelected.aCoords.tr.x > 480) {
-      return;
+    var dublicateText = textSelected;
+    var oldCharSpacing = dublicateText.charSpacing;
+    dublicateText.charSpacing = e.target.valueAsNumber;
+    var brNew = dublicateText.getBoundingRect();
+    if (brNew.width + brNew.left + 45 >= dublicateText.canvas.width || brNew.height + brNew.top >= dublicateText.canvas.height || brNew.left < 0 || brNew.top < 0) {
+      if (textSelected.charSpacing > e.target.valueAsNumber) {
+        textSelected.charSpacing = e.target.valueAsNumber;
+        if (currentSelection === 'path') {
+          textShapeChange(textSelected.shapeType, true);
+        }
+        use3dddPlus.getState().updateModifaction(true);
+        use3dddPlus.getState().forIconCapture();
+        textSelected.icon = use3dddPlus.getState().iconImage;
+        canvas.renderAll();
+        if (textSelected.aCoords.tr.x > 480) {
+          return;
+        }
+      }
+    } else {
+      textSelected.charSpacing = e.target.valueAsNumber;
+      if (currentSelection === 'path') {
+        textShapeChange(textSelected.shapeType, true);
+      }
+      use3dddPlus.getState().updateModifaction(true);
+      use3dddPlus.getState().forIconCapture();
+      textSelected.icon = use3dddPlus.getState().iconImage;
+      var _brNew = textSelected.getBoundingRect();
+      if (_brNew.width + _brNew.left + 45 >= dublicateText.canvas.width || _brNew.height + _brNew.top >= dublicateText.canvas.height || _brNew.left < 0 || _brNew.top < 0) {
+        textSelected.charSpacing = oldCharSpacing;
+      }
+      canvas.renderAll();
+      if (textSelected.aCoords.tr.x > 480) {
+        return;
+      }
     }
   };
   var textStyle = function textStyle(e, key, value) {
@@ -8765,6 +8828,17 @@ var Rightmenu = function Rightmenu() {
           });
         }
         //  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;
@@ -8901,10 +8975,12 @@ var Rightmenu = function Rightmenu() {
     }
   };
   var removeColorPalatte = function removeColorPalatte() {
-    var pallete = document.getElementById('colorPalette');
-    if (pallete) {
-      pallete.parentElement.click();
-    }
+    setDisplayPallet({
+      visible: false,
+      property: '',
+      color: '',
+      callback: null
+    });
   };
   React.useEffect(function () {
     window.addEventListener('click', removeColorPalatte);
@@ -9000,7 +9076,8 @@ var Rightmenu = function Rightmenu() {
     className: textSelected.fontWeight === 'bold' ? SELECT_BG_COLOR + " text-[#fff] text-base cursor-pointer border font-bold border-[#EBEBEB]  py-[7px] px-[25px] " : 'bg-[#fff]  font-bold text-base cursor-pointer border border-[#EBEBEB] py-[7px] px-[25px]',
     style: textSelected && textSelected.shapeType && textSelected.shapeType !== 'none' ? {
       color: '#cccccc',
-      cursor: 'default'
+      cursor: 'default',
+      backgroundColor: '#ffffff'
     } : {},
     onClick: function onClick(e) {
       return textStyle(e, 'fontWeight', 'bold');
@@ -9011,7 +9088,8 @@ var Rightmenu = function Rightmenu() {
     className: textSelected.fontStyle && textSelected.fontStyle === 'italic' ? SELECT_BG_COLOR + " text-[#fff] text-base cursor-pointer border italic border-[#EBEBEB]  py-[7px] px-[25px] " : 'bg-[#fff]  italic text-base cursor-pointer border border-[#EBEBEB] py-[7px] px-[25px]',
     style: textSelected && textSelected.shapeType && textSelected.shapeType !== 'none' ? {
       color: '#cccccc',
-      cursor: 'default'
+      cursor: 'default',
+      backgroundColor: '#ffffff'
     } : {},
     onClick: function onClick(e) {
       return textStyle(e, 'fontStyle', 'italic');
@@ -9022,7 +9100,8 @@ var Rightmenu = function Rightmenu() {
     className: textSelected.underline && textSelected.underline === true ? SELECT_BG_COLOR + " text-[#fff] text-base cursor-pointer border underline border-[#EBEBEB]  py-[7px] px-[25px] " : 'bg-[#fff]  underline text-base cursor-pointer border border-[#EBEBEB] py-[7px] px-[25px]',
     style: textSelected && textSelected.shapeType && textSelected.shapeType !== 'none' ? {
       color: '#cccccc',
-      cursor: 'default'
+      cursor: 'default',
+      backgroundColor: '#ffffff'
     } : {},
     onClick: function onClick(e) {
       return textStyle(e, 'underline', !fontStyle.underline);
@@ -9067,7 +9146,10 @@ var Rightmenu = function Rightmenu() {
     handleChange: textColorChange,
     property: 'backgroundColor',
     name: 'backgroundColor',
-    color: activeSelection.fill
+    color: activeSelection.fill,
+    setDisplayPallet: setDisplayPallet,
+    setPosition: setPosition,
+    callback: textColorChange
   })), React__default.createElement("div", {
     className: "flex gap-2 mt-4"
   }, React__default.createElement("div", null, React__default.createElement("div", {
@@ -9089,7 +9171,10 @@ var Rightmenu = function Rightmenu() {
     handleChange: strokeColorChange,
     property: 'backgroundColor',
     name: 'backgroundColor',
-    color: activeSelection.stroke
+    color: activeSelection.stroke,
+    setDisplayPallet: setDisplayPallet,
+    setPosition: setPosition,
+    callback: strokeColorChange
   })))), React__default.createElement("div", {
     className: "flex gap-2"
   }, React__default.createElement("div", null, React__default.createElement("div", {
@@ -9135,7 +9220,10 @@ var Rightmenu = function Rightmenu() {
       key: 'color-' + i,
       handleChange: changeSVGColor,
       property: item,
-      color: activeSelection.colorFill[item]
+      color: activeSelection.colorFill[item],
+      setDisplayPallet: setDisplayPallet,
+      setPosition: setPosition,
+      callback: changeSVGColor
     });
   }))), React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
     className: "my-[24.5px]"
@@ -9171,13 +9259,25 @@ var Rightmenu = function Rightmenu() {
   }, "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, i) {
-    return React__default.createElement(ColorImpl, {
-      mClass: 'mb-[10px]',
-      key: 'color-' + i,
-      handleChange: changeSVGTextColor,
-      property: item,
-      color: item
-    });
+    return (
+      // <ColorImpl
+      //   mClass={'mb-[10px]'}
+      //   key={'color-' + i}
+      //   handleChange={changeSVGTextColor}
+      //   property={item}
+      //   color={item}
+      // />
+      React__default.createElement(ColorImpl, {
+        mClass: 'mb-[10px]',
+        key: 'color-' + i,
+        handleChange: changeSVGTextColor,
+        property: item,
+        color: item,
+        setDisplayPallet: setDisplayPallet,
+        setPosition: setPosition,
+        callback: changeSVGTextColor
+      })
+    );
   })), (allColor && allColor.includes('transparent') ? allColor.length - 1 : allColor.length) > 8 && React__default.createElement(errorPopup, {
     allColor: allColor
   })), currentSelection === 'none' && React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
@@ -9185,13 +9285,25 @@ var Rightmenu = function Rightmenu() {
   }, "Color in Canvas"), React__default.createElement("div", {
     className: "flex flex-wrap gap-x-[1rem] mt-[12px]"
   }, allColor == null ? void 0 : allColor.map(function (item, i) {
-    return React__default.createElement(ColorImpl, {
-      mClass: 'mb-[10px]',
-      key: 'color-' + i,
-      handleChange: changeSVGTextColor,
-      property: item,
-      color: item
-    });
+    return (
+      // <ColorImpl
+      //   mClass={'mb-[10px]'}
+      //   key={'color-' + i}
+      //   handleChange={changeSVGTextColor}
+      //   property={item}
+      //   color={item}
+      // />
+      React__default.createElement(ColorImpl, {
+        mClass: 'mb-[10px]',
+        key: 'color-' + i,
+        handleChange: changeSVGTextColor,
+        property: item,
+        color: item,
+        setDisplayPallet: setDisplayPallet,
+        setPosition: setPosition,
+        callback: changeSVGTextColor
+      })
+    );
   })), (allColor && allColor.includes('transparent') ? allColor.length - 1 : allColor.length) > 8 && React__default.createElement(errorPopup, {
     allColor: allColor
   }))), isNextClicked && conflictColors && conflictColors.length > 0 && React__default.createElement("div", {
@@ -9362,7 +9474,26 @@ var Rightmenu = function Rightmenu() {
     }), React__default.createElement("path", {
       d: "M121.752,335.085L256,200.837l134.248,134.248c8.331,8.331,21.839,8.331,30.17,0c8.331-8.331,8.331-21.839,0-30.17     L271.085,155.582c-8.331-8.331-21.839-8.331-30.17,0L91.582,304.915c-8.331,8.331-8.331,21.839,0,30.17     S113.42,343.416,121.752,335.085z"
     })))))))))));
-  })))))));
+  })))))), displayPallet && displayPallet.visible && React__default.createElement(ColorPalette, {
+    mainClass: "left-0",
+    handleColorChange: function handleColorChange(color) {
+      displayPallet.callback(displayPallet.property, color);
+      setDisplayPallet({
+        visible: false,
+        property: '',
+        color: '',
+        callback: null
+      });
+    },
+    style: position ? {
+      position: 'fixed',
+      left: position.x - 450,
+      top: position.y - 5,
+      width: '450px'
+    } : {
+      display: 'none'
+    }
+  }));
 };
 
 var css_248z$5 = "#ls{//top:8rem;background-color:#fff;background:radial-gradient(#eee,#ccc);height:100%;left:0;opacity:1;position:relative;transition:opacity 1s;width:100%;z-index:100}#ls.fade-out{opacity:0}#l{animation:spin 2s linear infinite;border:3px solid transparent;border-radius:50%;border-top-color:#b16b6b;display:block;height:100px;left:50%;margin:-50px 0 0 -50px;position:relative;top:50%;width:100px}#l:before{animation:spin 3s linear infinite;border:3px solid transparent;border-radius:50%;border-top-color:#c10909;bottom:5px;left:5px;right:5px;top:5px}#l:after,#l:before{content:\"\";position:absolute}#l:after{animation:spin 1.5s linear infinite;border:3px solid transparent;border-radius:50%;border-top-color:#bb4646;bottom:15px;left:15px;right:15px;top:15px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}";