maintain size of font shapes when text is blank

TODO.md

@@ -2,6 +2,8 @@
 
 - get rectangular preview image from Jeff
 - bug: wiper, 90 degrees with noise effect; change wiper size from 4 to 40, hangs browser
+- bug: create rectangular mask, resize it so aspect ratio isn't 1, change to circle; dimension of mask do not change to match 1:1 aspect ratio.
+- bug: border on rectangular mask doesn't always look right
 
 - review/test
   - all shapes/effects

src/features/shapes/FancyText.js

@@ -108,14 +108,23 @@ export default class FancyText extends Shape {
 
   // hook to modify updates to a layer before they affect the state
   handleUpdate(layer, changes) {
-    if (changes.fancyText || changes.fancyFont || changes.fancyLineSpacing) {
-      const props = {
+    if (
+      changes.fancyText !== undefined ||
+      changes.fancyFont ||
+      changes.fancyLineSpacing
+    ) {
+      // default "a" value handles the empty string case to prevent weird resizing
+      const newProps = {
         ...layer,
-        fancyText: changes.fancyText || layer.fancyText,
+        fancyText: changes.fancyText || "a",
         fancyFont: changes.fancyFont || layer.fancyFont,
       }
-      const oldVertices = this.getVertices({ shape: layer, creating: true })
-      const vertices = this.getVertices({ shape: props, creating: true })
+      const oldProps = {
+        ...layer,
+        fancyText: layer.fancyText || "a",
+      }
+      const oldVertices = this.getVertices({ shape: oldProps, creating: true })
+      const vertices = this.getVertices({ shape: newProps, creating: true })
       const { width: oldWidth, height: oldHeight } = dimensions(oldVertices)
       const { width, height } = dimensions(vertices)
 

src/features/shapes/input_text/InputText.js

@@ -236,14 +236,22 @@ export default class InputText extends Shape {
 
   // hook to modify updates to a layer
   handleUpdate(layer, changes) {
-    if (changes.inputText || changes.inputFont || changes.rotateDir) {
-      const props = {
+    if (
+      changes.inputText !== undefined ||
+      changes.inputFont ||
+      changes.rotateDir
+    ) {
+      const newProps = {
         ...layer,
-        inputText: changes.inputText || layer.inputText,
+        inputText: changes.inputText || "a",
         inputFont: changes.inputFont || layer.inputFont,
       }
-      const oldVertices = this.getVertices({ shape: layer, creating: true })
-      const vertices = this.getVertices({ shape: props, creating: true })
+      const oldProps = {
+        ...layer,
+        inputText: layer.inputText || "a",
+      }
+      const oldVertices = this.getVertices({ shape: oldProps, creating: true })
+      const vertices = this.getVertices({ shape: newProps, creating: true })
       const { width: oldWidth, height: oldHeight } = dimensions(oldVertices)
       const { width, height } = dimensions(vertices)