@arbisoft/react-design-tool 1.0.18 → 1.0.20

package/README.md

@@ -36,11 +36,11 @@ yarn add @arbisoft/react-design-tool
 #### ⚠️ Important: Installation Guide for React 18 and Below
 
 ```bash
-npm install @arbisoft/react-design-tool@1.0.17
+npm install @arbisoft/react-design-tool@1.0.19
 ```
 OR
 ```bash
-yarn add @arbisoft/react-design-tool@1.0.17
+yarn add @arbisoft/react-design-tool@1.0.19
 
 ```
 ## 🚀 Quick Start

package/dist/cjs/index.js

@@ -2767,7 +2767,7 @@ var OpacityPicker = function OpacityPicker(_ref) {
     src: IconOpacity
   })), /*#__PURE__*/React.createElement(StyledText, {
     fontFamily: fontFamily
-  }, varient === 'opacity' ? "".concat(value * 100, "%") : value), rightChild && rightChild), opacityPickerVisible && /*#__PURE__*/React.createElement("div", {
+  }, varient === 'opacity' ? "".concat(value * 100, "%") : Math.round(value)), rightChild && rightChild), opacityPickerVisible && /*#__PURE__*/React.createElement("div", {
     style: {
       position: 'absolute',
       bottom: -50,
@@ -4204,31 +4204,35 @@ TextEditor.propTypes = propTypes$c;
 
 var EditableText = function EditableText(_ref) {
   var element = _ref.element,
+    trRef = _ref.trRef,
     onClick = _ref.onClick,
     _onDragEnd = _ref.onDragEnd,
     onTransformEnd = _ref.onTransformEnd,
     id = _ref.id,
     onTransform = _ref.onTransform,
     onChangeTextContent = _ref.onChangeTextContent,
-    onChangeTextProperty = _ref.onChangeTextProperty,
     onDragMove = _ref.onDragMove;
   var textRef = React.useRef();
   var _useState = React.useState(element === null || element === void 0 ? void 0 : element.width),
     _useState2 = _slicedToArray(_useState, 2),
     textWidth = _useState2[0],
     setTextWidth = _useState2[1];
-  var _useState3 = React.useState(false),
+  var _useState3 = React.useState(element === null || element === void 0 ? void 0 : element.fontSize),
     _useState4 = _slicedToArray(_useState3, 2),
-    isEditing = _useState4[0],
-    setIsEditing = _useState4[1];
-  var _useState5 = React.useState(element === null || element === void 0 ? void 0 : element.text),
+    textFontSize = _useState4[0],
+    setTextFontSize = _useState4[1];
+  var _useState5 = React.useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
-    text = _useState6[0],
-    setText = _useState6[1];
-  var _useState7 = React.useState(false),
+    isEditing = _useState6[0],
+    setIsEditing = _useState6[1];
+  var _useState7 = React.useState(element === null || element === void 0 ? void 0 : element.text),
     _useState8 = _slicedToArray(_useState7, 2),
-    isFontLoaded = _useState8[0],
-    setIsFontLoaded = _useState8[1];
+    text = _useState8[0],
+    setText = _useState8[1];
+  var _useState9 = React.useState(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    isFontLoaded = _useState10[0],
+    setIsFontLoaded = _useState10[1];
   React.useEffect(function () {
     setIsFontLoaded(false);
     setTimeout(function () {
@@ -4238,23 +4242,49 @@ var EditableText = function EditableText(_ref) {
   React.useEffect(function () {
     setTextWidth(element === null || element === void 0 ? void 0 : element.width);
     setText(element === null || element === void 0 ? void 0 : element.text);
+    setTextFontSize(element === null || element === void 0 ? void 0 : element.fontSize);
   }, [element]);
   var tranform = function tranform(e) {
-    var node = e.target;
+    var transformer = trRef.current;
+    var activeAnchor = transformer.getActiveAnchor();
+    if (activeAnchor === 'middle-right' || activeAnchor === 'middle-left') {
+      var node = e.target;
+      var scaleX = sanitizeNumber(node.scaleX(), 1);
+      var updatedWidth = sanitizeNumber(node.width() * scaleX, element.width);
+      var updatedObject = _objectSpread2(_objectSpread2({}, node.attrs), {}, {
+        width: updatedWidth,
+        scaleX: 1,
+        scaleY: 1
+      });
+      delete updatedObject['ref'];
+      setTextWidth(updatedWidth);
+      onTransform && onTransform(updatedObject);
+      node.scaleX(1);
+      node.scaleY(1);
+    }
+  };
+  var handleTransformEnd = function handleTransformEnd(e) {
+    var transformer = trRef.current;
+    var activeAnchor = transformer.getActiveAnchor();
+    if (activeAnchor === 'middle-right' || activeAnchor === 'middle-left') {
+      onTransformEnd && onTransformEnd(e);
+      return;
+    }
+    var node = textRef.current;
+    var nodeAttrs = node.attrs;
     var scaleX = sanitizeNumber(node.scaleX(), 1);
-    var updatedWidth = sanitizeNumber(node.width() * scaleX, element.width);
-    var updatedObject = _objectSpread2(_objectSpread2({}, node.attrs), {}, {
+    var newFontSize = nodeAttrs.fontSize * scaleX;
+    var updatedWidth = sanitizeNumber(node.width() * scaleX, nodeAttrs.width);
+    node.scaleX(1);
+    node.scaleY(1);
+    var updatedObject = _objectSpread2(_objectSpread2({}, nodeAttrs), {}, {
       width: updatedWidth,
-      scaleX: 1,
-      scaleY: 1
+      fontSize: newFontSize
     });
-    delete updatedObject['ref'];
+    setTextFontSize(newFontSize);
     setTextWidth(updatedWidth);
+    delete updatedObject['ref'];
     onTransform && onTransform(updatedObject);
-    node.scaleX(1);
-    node.scaleY(1);
-  };
-  var transformEnd = function transformEnd(e) {
     onTransformEnd && onTransformEnd(e);
   };
   var handleTextDblClick = function handleTextDblClick() {
@@ -4270,7 +4300,7 @@ var EditableText = function EditableText(_ref) {
     var width = textRef === null || textRef === void 0 || (_textRef$current = textRef.current) === null || _textRef$current === void 0 ? void 0 : _textRef$current.getWidth();
     if (width) {
       setTextWidth(width);
-      onChangeTextProperty('width', width);
+      // onChangeTextProperty('width', width);
     }
     // const scaleX = sanitizeNumber(node?.scaleX(), 1);
     // const updatedWidth = sanitizeNumber(node?.width() * scaleX, element?.width);
@@ -4287,6 +4317,7 @@ var EditableText = function EditableText(_ref) {
       fontVariant: element === null || element === void 0 ? void 0 : element.fontWeight,
       align: element === null || element === void 0 ? void 0 : element.textAlign,
       width: textWidth,
+      fontSize: textFontSize,
       text: text,
       fill: element === null || element === void 0 ? void 0 : element.color,
       opacity: 0,
@@ -4301,6 +4332,7 @@ var EditableText = function EditableText(_ref) {
     fontVariant: element === null || element === void 0 ? void 0 : element.fontWeight,
     align: element === null || element === void 0 ? void 0 : element.textAlign,
     width: textWidth,
+    fontSize: textFontSize,
     text: text,
     fill: element === null || element === void 0 ? void 0 : element.color,
     onClick: function onClick() {
@@ -4313,7 +4345,7 @@ var EditableText = function EditableText(_ref) {
       return _onDragEnd && _onDragEnd(e);
     },
     onTransformEnd: function onTransformEnd(e) {
-      transformEnd(e);
+      handleTransformEnd(e);
     },
     onDragMove: onDragMove,
     onDblClick: handleTextDblClick,
@@ -4963,6 +4995,7 @@ var Editor = function Editor(_ref) {
         });
       case elementTypes.text:
         return /*#__PURE__*/React.createElement(EditableText, {
+          trRef: transformerRef,
           key: el.id,
           id: el.id,
           element: el,
@@ -4977,8 +5010,7 @@ var Editor = function Editor(_ref) {
             handleDragEnd(e);
           },
           onDragMove: handleDragging,
-          onChangeTextContent: onChangeTextContent,
-          onChangeTextProperty: onChangeTextProperty
+          onChangeTextContent: onChangeTextContent
         });
       default:
         return null;
@@ -5067,7 +5099,7 @@ var Editor = function Editor(_ref) {
     ref: transformerRef,
     onTransform: handleResizing,
     onTransformEnd: handleResizeEnd,
-    enabledAnchors: selectedElement !== null && selectedElement !== void 0 && selectedElement.draggable ? (selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.text) ? ['middle-left', 'middle-right'] : ['top-left', 'top-right', 'bottom-left', 'bottom-right', 'middle-left', 'middle-right', 'top-center', 'bottom-center'] : [],
+    enabledAnchors: selectedElement !== null && selectedElement !== void 0 && selectedElement.draggable ? (selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.text) ? ['top-left', 'top-right', 'bottom-left', 'bottom-right', 'middle-left', 'middle-right'] : ['top-left', 'top-right', 'bottom-left', 'bottom-right', 'middle-left', 'middle-right', 'top-center', 'bottom-center'] : [],
     borderStroke: theme.color.primary,
     borderStrokeWidth: 2
     // add anchors
@@ -5082,7 +5114,9 @@ var Editor = function Editor(_ref) {
     ,
     boundBoxFunc: function boundBoxFunc(oldBox, newBox) {
       // limit resize
-      if (!(selectedElement !== null && selectedElement !== void 0 && selectedElement.draggable)) {
+      if (!(selectedElement !== null && selectedElement !== void 0 && selectedElement.draggable) ||
+      // Handle element flliping
+      newBox.width < 1 || newBox.height < 1) {
         return oldBox;
       }
       return newBox;