feat: horizontal/vertical align with flexbox (#119)

Author: raduwen

src/components/TextWidget/editor.tsx

@@ -172,14 +172,24 @@ class TextWidgetEditor extends Component<Props, TextWidgetProps> {
             />
             <TextField
               type="text"
-              label="text align"
+              label="text horizontal align"
               fullWidth
               variant="outlined"
               onChange={(e) => {
-                this.setState({ ...this.state, textAlign: e.target.value as Property.TextAlign });
+                this.setState({ ...this.state, textAlign: e.target.value as Property.JustifyContent });
               }}
               value={this.state.textAlign}
             />
+            <TextField
+              type="text"
+              label="text vertical align"
+              fullWidth
+              variant="outlined"
+              onChange={(e) => {
+                this.setState({ ...this.state, verticalAlign: e.target.value as Property.AlignItems });
+              }}
+              value={this.state.verticalAlign}
+            />
           </FormGroup>
           <FormGroup>
             <TextField

src/components/TextWidget/types.ts

@@ -11,7 +11,8 @@ type TextWidgetProps = {
   text: string;
   textColor?: string;
   fontSize?: string;
-  textAlign?: Property.TextAlign;
+  textAlign?: Property.JustifyContent;
+  verticalAlign?: Property.AlignItems;
   backgroundColor?: string;
   edgeWeight?: number; // px
   edgeColor?: string;

src/components/TextWidget/widget.tsx

@@ -16,13 +16,15 @@ const calcTextShadow = (weight, color) => {
 };
 
 const defaultStyle: CSSProperties = {
+  display: 'flex',
   boxSizing: 'border-box',
   whiteSpace: 'pre-wrap',
   overflow: 'hidden',
   color: '#ffffff',
   backgroundColor: 'rgba(0,0,0,0.1)',
   textShadow: calcTextShadow(1, '#000000'),
-  textAlign: 'left',
+  textAlign: 'start',
+  verticalAlign: 'start',
   width: 320,
   height: 540,
   padding: '0.25rem 0.5rem',
@@ -34,6 +36,7 @@ const TextWidget: VFC<TextWidgetProps> = ({
   textColor,
   fontSize,
   textAlign,
+  verticalAlign,
   backgroundColor,
   edgeWeight,
   edgeColor,
@@ -55,9 +58,10 @@ const TextWidget: VFC<TextWidgetProps> = ({
     color: textColor || '#ffffff',
     fontSize: fontSize || '1rem',
     textShadow: edge,
-    textAlign: textAlign || 'left',
+    justifyContent: textAlign || 'start',
+    alignItems: verticalAlign || 'start',
     backgroundColor: backgroundColor || 'rgba(0,0,0,0.1)',
-    display: hidden || autoHidden && text.length === 0 ? 'none' : 'block',
+    display: hidden || autoHidden && text.length === 0 ? 'none' : 'flex',
     zIndex,
   };