@movable/studio-framework 3.1.0 → 3.1.1-error-logging

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/index.es.js +22 -9
  2. package/dist/index.js +22 -9
  3. package/package.json +4 -4
  4. package/dist/index.es.js.map +0 -7
package/dist/index.es.js CHANGED
@@ -1701,13 +1701,13 @@ function convertToEms(insertProperties, baseFontSize) {
1701
1701
  };
1702
1702
  });
1703
1703
  }
1704
- function shrinkToFit(element, richTextStructure, baseFontSize, minFontSize) {
1704
+ function shrinkToFit(element, richTextStructure, baseFontSize, minFontSize, yPosition) {
1705
1705
  const {
1706
1706
  parentElement
1707
1707
  } = element;
1708
1708
  const parentBox = parentElement.getBoundingClientRect(); // It fits already; no need to resize.
1709
1709
 
1710
- if (!overflowsParent(parentBox, element)) {
1710
+ if (!overflowsParent(parentBox, element, yPosition)) {
1711
1711
  return true;
1712
1712
  }
1713
1713
 
@@ -1722,7 +1722,7 @@ function shrinkToFit(element, richTextStructure, baseFontSize, minFontSize) {
1722
1722
 
1723
1723
  return smallest;
1724
1724
  }, 1);
1725
- const didFit = resizeToFit(baseFontSize - 1, element, parentBox, minFontSize, smallestFontRatio);
1725
+ const didFit = resizeToFit(baseFontSize - 1, element, parentBox, minFontSize, smallestFontRatio, yPosition);
1726
1726
 
1727
1727
  if (!didFit) {
1728
1728
  // Reset the parent's font size
@@ -1732,7 +1732,7 @@ function shrinkToFit(element, richTextStructure, baseFontSize, minFontSize) {
1732
1732
  return didFit;
1733
1733
  }
1734
1734
 
1735
- function resizeToFit(currentFontSize, selfElement, parentBox, minimumFontSize, smallestRatio) {
1735
+ function resizeToFit(currentFontSize, selfElement, parentBox, minimumFontSize, smallestRatio, yPosition) {
1736
1736
  const cannotReduceAnymore = smallestRatio * currentFontSize <= minimumFontSize;
1737
1737
 
1738
1738
  if (currentFontSize <= minimumFontSize || cannotReduceAnymore) {
@@ -1742,21 +1742,21 @@ function resizeToFit(currentFontSize, selfElement, parentBox, minimumFontSize, s
1742
1742
 
1743
1743
  selfElement.style.fontSize = `${currentFontSize}px`; // Re-run if still outside of parent container
1744
1744
 
1745
- if (overflowsParent(parentBox, selfElement)) {
1745
+ if (overflowsParent(parentBox, selfElement, yPosition)) {
1746
1746
  // truncate if min font size reached
1747
1747
  const nextFontSize = currentFontSize - 1;
1748
- return resizeToFit(nextFontSize, selfElement, parentBox, minimumFontSize, smallestRatio);
1748
+ return resizeToFit(nextFontSize, selfElement, parentBox, minimumFontSize, smallestRatio, yPosition);
1749
1749
  }
1750
1750
 
1751
1751
  return true;
1752
1752
  }
1753
1753
 
1754
- function overflowsParent(parentBox, selfElement) {
1754
+ function overflowsParent(parentBox, selfElement, yPosition) {
1755
1755
  const range = document.createRange();
1756
1756
  range.selectNode(selfElement);
1757
1757
  const selfBox = range.getBoundingClientRect();
1758
1758
  range.detach();
1759
- return !(selfBox.left >= parentBox.left && selfBox.right <= parentBox.right && selfBox.bottom <= parentBox.bottom);
1759
+ return !(selfBox.left >= parentBox.left && selfBox.right <= parentBox.right && (yPosition === 'bottom' || selfBox.bottom <= parentBox.bottom) && (yPosition === 'top' || selfBox.top >= parentBox.top));
1760
1760
  }
1761
1761
 
1762
1762
  function getFontRatio(op) {
@@ -1885,6 +1885,18 @@ function getMinFontSize(ops, defaultSize) {
1885
1885
  }, defaultSize);
1886
1886
  }
1887
1887
 
1888
+ const getYPosition = justifyContent => {
1889
+ if (justifyContent === 'flex-start') {
1890
+ return 'top';
1891
+ } else if (justifyContent === 'center') {
1892
+ return 'center';
1893
+ } else if (justifyContent === 'flex-end') {
1894
+ return 'bottom';
1895
+ } else {
1896
+ return 'top';
1897
+ }
1898
+ };
1899
+
1888
1900
  const RichTextSpan = ({
1889
1901
  attributes,
1890
1902
  insert,
@@ -1942,7 +1954,8 @@ class RichTextElement extends StudioTool {
1942
1954
  } = this.lastRichText;
1943
1955
  const minFontsize = tag.minimumFontSize || 12;
1944
1956
  const rtElement = this.elementRef.current;
1945
- const didFit = shrinkToFit(rtElement, ops, baseFontSize, minFontsize);
1957
+ const yPosition = getYPosition(tag.justifyContent);
1958
+ const didFit = shrinkToFit(rtElement, ops, baseFontSize, minFontsize, yPosition);
1946
1959
  this.setState({
1947
1960
  didOverflow: !didFit
1948
1961
  });
package/dist/index.js CHANGED
@@ -1711,13 +1711,13 @@ function convertToEms(insertProperties, baseFontSize) {
1711
1711
  };
1712
1712
  });
1713
1713
  }
1714
- function shrinkToFit(element, richTextStructure, baseFontSize, minFontSize) {
1714
+ function shrinkToFit(element, richTextStructure, baseFontSize, minFontSize, yPosition) {
1715
1715
  const {
1716
1716
  parentElement
1717
1717
  } = element;
1718
1718
  const parentBox = parentElement.getBoundingClientRect(); // It fits already; no need to resize.
1719
1719
 
1720
- if (!overflowsParent(parentBox, element)) {
1720
+ if (!overflowsParent(parentBox, element, yPosition)) {
1721
1721
  return true;
1722
1722
  }
1723
1723
 
@@ -1732,7 +1732,7 @@ function shrinkToFit(element, richTextStructure, baseFontSize, minFontSize) {
1732
1732
 
1733
1733
  return smallest;
1734
1734
  }, 1);
1735
- const didFit = resizeToFit(baseFontSize - 1, element, parentBox, minFontSize, smallestFontRatio);
1735
+ const didFit = resizeToFit(baseFontSize - 1, element, parentBox, minFontSize, smallestFontRatio, yPosition);
1736
1736
 
1737
1737
  if (!didFit) {
1738
1738
  // Reset the parent's font size
@@ -1742,7 +1742,7 @@ function shrinkToFit(element, richTextStructure, baseFontSize, minFontSize) {
1742
1742
  return didFit;
1743
1743
  }
1744
1744
 
1745
- function resizeToFit(currentFontSize, selfElement, parentBox, minimumFontSize, smallestRatio) {
1745
+ function resizeToFit(currentFontSize, selfElement, parentBox, minimumFontSize, smallestRatio, yPosition) {
1746
1746
  const cannotReduceAnymore = smallestRatio * currentFontSize <= minimumFontSize;
1747
1747
 
1748
1748
  if (currentFontSize <= minimumFontSize || cannotReduceAnymore) {
@@ -1752,21 +1752,21 @@ function resizeToFit(currentFontSize, selfElement, parentBox, minimumFontSize, s
1752
1752
 
1753
1753
  selfElement.style.fontSize = `${currentFontSize}px`; // Re-run if still outside of parent container
1754
1754
 
1755
- if (overflowsParent(parentBox, selfElement)) {
1755
+ if (overflowsParent(parentBox, selfElement, yPosition)) {
1756
1756
  // truncate if min font size reached
1757
1757
  const nextFontSize = currentFontSize - 1;
1758
- return resizeToFit(nextFontSize, selfElement, parentBox, minimumFontSize, smallestRatio);
1758
+ return resizeToFit(nextFontSize, selfElement, parentBox, minimumFontSize, smallestRatio, yPosition);
1759
1759
  }
1760
1760
 
1761
1761
  return true;
1762
1762
  }
1763
1763
 
1764
- function overflowsParent(parentBox, selfElement) {
1764
+ function overflowsParent(parentBox, selfElement, yPosition) {
1765
1765
  const range = document.createRange();
1766
1766
  range.selectNode(selfElement);
1767
1767
  const selfBox = range.getBoundingClientRect();
1768
1768
  range.detach();
1769
- return !(selfBox.left >= parentBox.left && selfBox.right <= parentBox.right && selfBox.bottom <= parentBox.bottom);
1769
+ return !(selfBox.left >= parentBox.left && selfBox.right <= parentBox.right && (yPosition === 'bottom' || selfBox.bottom <= parentBox.bottom) && (yPosition === 'top' || selfBox.top >= parentBox.top));
1770
1770
  }
1771
1771
 
1772
1772
  function getFontRatio(op) {
@@ -1895,6 +1895,18 @@ function getMinFontSize(ops, defaultSize) {
1895
1895
  }, defaultSize);
1896
1896
  }
1897
1897
 
1898
+ const getYPosition = justifyContent => {
1899
+ if (justifyContent === 'flex-start') {
1900
+ return 'top';
1901
+ } else if (justifyContent === 'center') {
1902
+ return 'center';
1903
+ } else if (justifyContent === 'flex-end') {
1904
+ return 'bottom';
1905
+ } else {
1906
+ return 'top';
1907
+ }
1908
+ };
1909
+
1898
1910
  const RichTextSpan = ({
1899
1911
  attributes,
1900
1912
  insert,
@@ -1952,7 +1964,8 @@ class RichTextElement extends StudioTool {
1952
1964
  } = this.lastRichText;
1953
1965
  const minFontsize = tag.minimumFontSize || 12;
1954
1966
  const rtElement = this.elementRef.current;
1955
- const didFit = shrinkToFit(rtElement, ops, baseFontSize, minFontsize);
1967
+ const yPosition = getYPosition(tag.justifyContent);
1968
+ const didFit = shrinkToFit(rtElement, ops, baseFontSize, minFontsize, yPosition);
1956
1969
  this.setState({
1957
1970
  didOverflow: !didFit
1958
1971
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@movable/studio-framework",
3
- "version": "3.1.0",
3
+ "version": "3.1.1-error-logging",
4
4
  "description": "A Component library for reactive Studio apps.",
5
5
  "author": "Movable Ink",
6
6
  "repository": "movableink/studio-framework",
@@ -31,8 +31,8 @@
31
31
  "@babel/preset-react": "^7.14.5",
32
32
  "@babel/preset-typescript": "^7.13.0",
33
33
  "@movable/eslint-config-react": "^1.0.1",
34
- "@movable/framework-types": "^3.1.0",
35
- "@movable/studio-framework-test-helpers": "^3.1.0",
34
+ "@movable/framework-types": "^3.1.1-error-logging",
35
+ "@movable/studio-framework-test-helpers": "^3.1.1-error-logging",
36
36
  "@types/qunit": "^2.11.1",
37
37
  "@types/qunit-dom": "^0.7.0",
38
38
  "@types/react": "^17.0.6",
@@ -64,5 +64,5 @@
64
64
  "volta": {
65
65
  "extends": "../../package.json"
66
66
  },
67
- "gitHead": "75f8d8736f83e89488ef7221113b37e3bd9fe874"
67
+ "gitHead": "2bec2fbb76f33c38f10c8b26fafd065c2bc0a8a6"
68
68
  }