@movable/studio-framework 3.1.0-canary.0 → 3.1.1-error-logging

package/dist/index.es.js

@@ -1701,13 +1701,13 @@ function convertToEms(insertProperties, baseFontSize) {
     };
   });
 }
-function shrinkToFit(element, richTextStructure, baseFontSize, minFontSize) {
+function shrinkToFit(element, richTextStructure, baseFontSize, minFontSize, yPosition) {
   const {
     parentElement
   } = element;
   const parentBox = parentElement.getBoundingClientRect(); // It fits already; no need to resize.
 
-  if (!overflowsParent(parentBox, element)) {
+  if (!overflowsParent(parentBox, element, yPosition)) {
     return true;
   }
 
@@ -1722,7 +1722,7 @@ function shrinkToFit(element, richTextStructure, baseFontSize, minFontSize) {
 
     return smallest;
   }, 1);
-  const didFit = resizeToFit(baseFontSize - 1, element, parentBox, minFontSize, smallestFontRatio);
+  const didFit = resizeToFit(baseFontSize - 1, element, parentBox, minFontSize, smallestFontRatio, yPosition);
 
   if (!didFit) {
     // Reset the parent's font size
@@ -1732,7 +1732,7 @@ function shrinkToFit(element, richTextStructure, baseFontSize, minFontSize) {
   return didFit;
 }
 
-function resizeToFit(currentFontSize, selfElement, parentBox, minimumFontSize, smallestRatio) {
+function resizeToFit(currentFontSize, selfElement, parentBox, minimumFontSize, smallestRatio, yPosition) {
   const cannotReduceAnymore = smallestRatio * currentFontSize <= minimumFontSize;
 
   if (currentFontSize <= minimumFontSize || cannotReduceAnymore) {
@@ -1742,21 +1742,21 @@ function resizeToFit(currentFontSize, selfElement, parentBox, minimumFontSize, s
 
   selfElement.style.fontSize = `${currentFontSize}px`; // Re-run if still outside of parent container
 
-  if (overflowsParent(parentBox, selfElement)) {
+  if (overflowsParent(parentBox, selfElement, yPosition)) {
     // truncate if min font size reached
     const nextFontSize = currentFontSize - 1;
-    return resizeToFit(nextFontSize, selfElement, parentBox, minimumFontSize, smallestRatio);
+    return resizeToFit(nextFontSize, selfElement, parentBox, minimumFontSize, smallestRatio, yPosition);
   }
 
   return true;
 }
 
-function overflowsParent(parentBox, selfElement) {
+function overflowsParent(parentBox, selfElement, yPosition) {
   const range = document.createRange();
   range.selectNode(selfElement);
   const selfBox = range.getBoundingClientRect();
   range.detach();
-  return !(selfBox.left >= parentBox.left && selfBox.right <= parentBox.right && selfBox.bottom <= parentBox.bottom);
+  return !(selfBox.left >= parentBox.left && selfBox.right <= parentBox.right && (yPosition === 'bottom' || selfBox.bottom <= parentBox.bottom) && (yPosition === 'top' || selfBox.top >= parentBox.top));
 }
 
 function getFontRatio(op) {
@@ -1885,6 +1885,18 @@ function getMinFontSize(ops, defaultSize) {
   }, defaultSize);
 }
 
+const getYPosition = justifyContent => {
+  if (justifyContent === 'flex-start') {
+    return 'top';
+  } else if (justifyContent === 'center') {
+    return 'center';
+  } else if (justifyContent === 'flex-end') {
+    return 'bottom';
+  } else {
+    return 'top';
+  }
+};
+
 const RichTextSpan = ({
   attributes,
   insert,
@@ -1942,7 +1954,8 @@ class RichTextElement extends StudioTool {
       } = this.lastRichText;
       const minFontsize = tag.minimumFontSize || 12;
       const rtElement = this.elementRef.current;
-      const didFit = shrinkToFit(rtElement, ops, baseFontSize, minFontsize);
+      const yPosition = getYPosition(tag.justifyContent);
+      const didFit = shrinkToFit(rtElement, ops, baseFontSize, minFontsize, yPosition);
       this.setState({
         didOverflow: !didFit
       });

package/dist/index.js

@@ -1711,13 +1711,13 @@ function convertToEms(insertProperties, baseFontSize) {
     };
   });
 }
-function shrinkToFit(element, richTextStructure, baseFontSize, minFontSize) {
+function shrinkToFit(element, richTextStructure, baseFontSize, minFontSize, yPosition) {
   const {
     parentElement
   } = element;
   const parentBox = parentElement.getBoundingClientRect(); // It fits already; no need to resize.
 
-  if (!overflowsParent(parentBox, element)) {
+  if (!overflowsParent(parentBox, element, yPosition)) {
     return true;
   }
 
@@ -1732,7 +1732,7 @@ function shrinkToFit(element, richTextStructure, baseFontSize, minFontSize) {
 
     return smallest;
   }, 1);
-  const didFit = resizeToFit(baseFontSize - 1, element, parentBox, minFontSize, smallestFontRatio);
+  const didFit = resizeToFit(baseFontSize - 1, element, parentBox, minFontSize, smallestFontRatio, yPosition);
 
   if (!didFit) {
     // Reset the parent's font size
@@ -1742,7 +1742,7 @@ function shrinkToFit(element, richTextStructure, baseFontSize, minFontSize) {
   return didFit;
 }
 
-function resizeToFit(currentFontSize, selfElement, parentBox, minimumFontSize, smallestRatio) {
+function resizeToFit(currentFontSize, selfElement, parentBox, minimumFontSize, smallestRatio, yPosition) {
   const cannotReduceAnymore = smallestRatio * currentFontSize <= minimumFontSize;
 
   if (currentFontSize <= minimumFontSize || cannotReduceAnymore) {
@@ -1752,21 +1752,21 @@ function resizeToFit(currentFontSize, selfElement, parentBox, minimumFontSize, s
 
   selfElement.style.fontSize = `${currentFontSize}px`; // Re-run if still outside of parent container
 
-  if (overflowsParent(parentBox, selfElement)) {
+  if (overflowsParent(parentBox, selfElement, yPosition)) {
     // truncate if min font size reached
     const nextFontSize = currentFontSize - 1;
-    return resizeToFit(nextFontSize, selfElement, parentBox, minimumFontSize, smallestRatio);
+    return resizeToFit(nextFontSize, selfElement, parentBox, minimumFontSize, smallestRatio, yPosition);
   }
 
   return true;
 }
 
-function overflowsParent(parentBox, selfElement) {
+function overflowsParent(parentBox, selfElement, yPosition) {
   const range = document.createRange();
   range.selectNode(selfElement);
   const selfBox = range.getBoundingClientRect();
   range.detach();
-  return !(selfBox.left >= parentBox.left && selfBox.right <= parentBox.right && selfBox.bottom <= parentBox.bottom);
+  return !(selfBox.left >= parentBox.left && selfBox.right <= parentBox.right && (yPosition === 'bottom' || selfBox.bottom <= parentBox.bottom) && (yPosition === 'top' || selfBox.top >= parentBox.top));
 }
 
 function getFontRatio(op) {
@@ -1895,6 +1895,18 @@ function getMinFontSize(ops, defaultSize) {
   }, defaultSize);
 }
 
+const getYPosition = justifyContent => {
+  if (justifyContent === 'flex-start') {
+    return 'top';
+  } else if (justifyContent === 'center') {
+    return 'center';
+  } else if (justifyContent === 'flex-end') {
+    return 'bottom';
+  } else {
+    return 'top';
+  }
+};
+
 const RichTextSpan = ({
   attributes,
   insert,
@@ -1952,7 +1964,8 @@ class RichTextElement extends StudioTool {
       } = this.lastRichText;
       const minFontsize = tag.minimumFontSize || 12;
       const rtElement = this.elementRef.current;
-      const didFit = shrinkToFit(rtElement, ops, baseFontSize, minFontsize);
+      const yPosition = getYPosition(tag.justifyContent);
+      const didFit = shrinkToFit(rtElement, ops, baseFontSize, minFontsize, yPosition);
       this.setState({
         didOverflow: !didFit
       });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@movable/studio-framework",
-  "version": "3.1.0-canary.0",
+  "version": "3.1.1-error-logging",
   "description": "A Component library for reactive Studio apps.",
   "author": "Movable Ink",
   "repository": "movableink/studio-framework",
@@ -31,8 +31,8 @@
     "@babel/preset-react": "^7.14.5",
     "@babel/preset-typescript": "^7.13.0",
     "@movable/eslint-config-react": "^1.0.1",
-    "@movable/framework-types": "^3.1.0-canary.0",
-    "@movable/studio-framework-test-helpers": "^3.1.0-canary.0",
+    "@movable/framework-types": "^3.1.1-error-logging",
+    "@movable/studio-framework-test-helpers": "^3.1.1-error-logging",
     "@types/qunit": "^2.11.1",
     "@types/qunit-dom": "^0.7.0",
     "@types/react": "^17.0.6",
@@ -64,5 +64,5 @@
   "volta": {
     "extends": "../../package.json"
   },
-  "gitHead": "ce8a4be9c3ee254bbd4f958f61225d42220fa19a"
+  "gitHead": "2bec2fbb76f33c38f10c8b26fafd065c2bc0a8a6"
 }