feat: add desc.verticalAlign to Text Element

packages/board/src/index.ts

@@ -36,8 +36,7 @@ import {
   _doScrollY,
   _doMoveScroll,
   _resetContext,
-  _screen,
-  _tempData
+  _screen
 } from './names';
 
 type PrivateOptions = TypeBoardOptions & {
@@ -237,6 +236,7 @@ export default class Board {
     width: number;
     height: number;
     devicePixelRatio: number;
+    // eslint-disable-next-line indent
   } {
     return this[_screen].calcScreen();
   }

packages/idraw/dev/data.ts

@@ -1,4 +1,6 @@
-const data = {
+import type { TypeDataBase } from '@idraw/types';
+
+const data: TypeDataBase = {
   bgColor: '#ffffff',
   elements: [
     {
@@ -63,6 +65,27 @@ const data = {
         // disableRotate: true,
         limitRatio: true
       }
+    },
+    {
+      name: 'text-002',
+      x: 200,
+      y: 200,
+      w: 300,
+      h: 100,
+      // angle: 30,
+      type: 'text',
+      desc: {
+        fontSize: 16,
+        // text: 'Hello Text Hello Text Hello Text Hello Text Hello Text Hello Text',
+        text: 'Hello Text',
+        fontWeight: 'bold',
+        color: '#666666',
+        borderRadius: 30,
+        borderWidth: 2,
+        borderColor: '#ff5722',
+        textAlign: 'center',
+        verticalAlign: 'middle'
+      }
     }
   ]
 };

packages/renderer/src/lib/draw/text.ts

@@ -1,28 +1,22 @@
-import {
-  TypeContext, 
-  TypeElemDescText, 
-  TypeElement,
-} from '@idraw/types';
+import { TypeContext, TypeElemDescText, TypeElement } from '@idraw/types';
 import { is, isColorStr } from '@idraw/util';
 import Loader from '../loader';
 import { clearContext, drawBox } from './base';
 import { rotateElement } from './../transform';
- 
 
 export function drawText(
   ctx: TypeContext,
   elem: TypeElement<'text'>,
-  loader: Loader,
+  loader: Loader
 ) {
   clearContext(ctx);
   drawBox(ctx, elem, elem.desc.bgColor || 'transparent');
   rotateElement(ctx, elem, () => {
-
     const desc: TypeElemDescText = {
       ...{
         fontSize: 12,
         fontFamily: 'sans-serif',
-        textAlign: 'center',
+        textAlign: 'center'
       },
       ...elem.desc
     };
@@ -33,26 +27,29 @@ export function drawText(
       fontSize: desc.fontSize,
       fontFamily: desc.fontFamily
     });
-    const descText = desc.text.replace(/\r\n/ig, '\n');
+    const descText = desc.text.replace(/\r\n/gi, '\n');
     const fontHeight = desc.lineHeight || desc.fontSize;
     const descTextList = descText.split('\n');
-    const lines: {text: string, width: number}[] = [];
-    
+    const lines: { text: string; width: number }[] = [];
+
     let lineNum = 0;
     descTextList.forEach((tempText: string, idx: number) => {
       let lineText = '';
-      
+
       if (tempText.length > 0) {
         for (let i = 0; i < tempText.length; i++) {
-          if (ctx.measureText(lineText + (tempText[i] || '')).width < ctx.calcDeviceNum(elem.w)) {
-            lineText += (tempText[i] || '');
+          if (
+            ctx.measureText(lineText + (tempText[i] || '')).width <
+            ctx.calcDeviceNum(elem.w)
+          ) {
+            lineText += tempText[i] || '';
           } else {
             lines.push({
               text: lineText,
-              width: ctx.calcScreenNum(ctx.measureText(lineText).width),
+              width: ctx.calcScreenNum(ctx.measureText(lineText).width)
             });
-            lineText = (tempText[i] || '');
-            lineNum ++;
+            lineText = tempText[i] || '';
+            lineNum++;
           }
           if ((lineNum + 1) * fontHeight > elem.h) {
             break;
@@ -61,10 +58,10 @@ export function drawText(
             if ((lineNum + 1) * fontHeight < elem.h) {
               lines.push({
                 text: lineText,
-                width: ctx.calcScreenNum(ctx.measureText(lineText).width),
+                width: ctx.calcScreenNum(ctx.measureText(lineText).width)
               });
-              if(idx < descTextList.length - 1){
-                lineNum ++
+              if (idx < descTextList.length - 1) {
+                lineNum++;
               }
               break;
             }
@@ -73,25 +70,42 @@ export function drawText(
       } else {
         lines.push({
           text: '',
-          width: 0,
+          width: 0
         });
       }
-      
     });
 
+    let startY = 0;
+    if (lines.length * fontHeight < elem.h) {
+      if (elem.desc.verticalAlign === 'top') {
+        startY = 0;
+      } else if (elem.desc.verticalAlign === 'bottom') {
+        startY += elem.h - lines.length * fontHeight;
+      } else {
+        // middle and default
+        startY += (elem.h - lines.length * fontHeight) / 2;
+      }
+    }
+
     // draw text lines
     {
-      let _y = elem.y;
-      if (lines.length * fontHeight < elem.h) {
-        _y += ((elem.h - lines.length * fontHeight) / 2);
-      }
-      if (desc.textShadowColor !== undefined && isColorStr(desc.textShadowColor)) {
+      const _y = elem.y + startY;
+      if (
+        desc.textShadowColor !== undefined &&
+        isColorStr(desc.textShadowColor)
+      ) {
         ctx.setShadowColor(desc.textShadowColor);
       }
-      if (desc.textShadowOffsetX !== undefined && is.number(desc.textShadowOffsetX)) {
+      if (
+        desc.textShadowOffsetX !== undefined &&
+        is.number(desc.textShadowOffsetX)
+      ) {
         ctx.setShadowOffsetX(desc.textShadowOffsetX);
       }
-      if (desc.textShadowOffsetY !== undefined && is.number(desc.textShadowOffsetY)) {
+      if (
+        desc.textShadowOffsetY !== undefined &&
+        is.number(desc.textShadowOffsetY)
+      ) {
         ctx.setShadowOffsetY(desc.textShadowOffsetY);
       }
       if (desc.textShadowBlur !== undefined && is.number(desc.textShadowBlur)) {
@@ -110,11 +124,12 @@ export function drawText(
     }
 
     // draw text stroke
-    if (isColorStr(desc.strokeColor) && desc.strokeWidth !== undefined && desc.strokeWidth > 0) {
-      let _y = elem.y;
-      if (lines.length * fontHeight < elem.h) {
-        _y += ((elem.h - lines.length * fontHeight) / 2);
-      }
+    if (
+      isColorStr(desc.strokeColor) &&
+      desc.strokeWidth !== undefined &&
+      desc.strokeWidth > 0
+    ) {
+      const _y = elem.y + startY;
       lines.forEach((line, i) => {
         let _x = elem.x;
         if (desc.textAlign === 'center') {
@@ -131,12 +146,9 @@ export function drawText(
         ctx.strokeText(line.text, _x, _y + fontHeight * i);
       });
     }
-
   });
 }
 
-
-
 // export function createTextSVG(elem: TypeElement<'text'>): string {
 //   const svg = `
 //   <svg xmlns="http://www.w3.org/2000/svg" width="${elem.w}" height = "${elem.h}">
@@ -149,5 +161,3 @@ export function drawText(
 //   `;
 //   return svg;
 // }
- 
-

packages/types/src/lib/element.ts

@@ -5,7 +5,7 @@ type TypeElementAttrs = {
   y: number;
   w: number;
   h: number;
-  angle: number;
+  angle?: number;
   operation?: {
     lock?: boolean;
     invisible?: boolean;
@@ -75,6 +75,7 @@ type TypeElemDescText = {
   fontWeight?: 'bold' | '';
   fontFamily?: string;
   textAlign?: 'center' | 'left' | 'right';
+  verticalAlign?: 'middle' | 'top' | 'bottom';
   bgColor?: string;
   strokeColor?: string;
   strokeWidth?: number;