feat: add draw and getSize methods

inottn · Sep 20, 2023 · 640b044 · 640b044
1 parent 48b59b3
commit 640b044
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 8 deletions.
diff --git a/src/index.ts b/src/index.ts
@@ -4,6 +4,7 @@ import type {
   Canvas,
   Config,
   ContainerConfig,
+  Element,
   ExportOptions,
   ImageConfig,
   Options,
@@ -20,6 +21,7 @@ export class MiniPoster {
 
   images = new Map();
   fonts = new Map();
+  sizes = new Map<string, { width: number; height: number }>();
 
   constructor(canvas: Canvas, options: Options) {
     this.canvas = canvas;
@@ -49,6 +51,18 @@ export class MiniPoster {
     });
   }
 
+  async draw(data: Element | Element[]) {
+    if (Array.isArray(data)) {
+      for (const item of data) {
+        await this.draw(item);
+      }
+    } else {
+      if (data.type === 'container') await this.renderContainer(data);
+      if (data.type === 'image') await this.renderImage(data);
+      if (data.type === 'text') await this.renderText(data);
+    }
+  }
+
   async renderContainer(data: ContainerConfig) {
     const { context } = this;
     const {
@@ -79,10 +93,8 @@ export class MiniPoster {
       this.loadAssets(children);
 
       for (const item of children) {
-        const _itme = mergePosition(item, { left, top });
-        if (_itme.type === 'container') await this.renderContainer(_itme);
-        if (_itme.type === 'image') await this.renderImage(_itme);
-        if (_itme.type === 'text') await this.renderText(_itme);
+        const _item = mergePosition(item, { left, top });
+        await this.draw(_item);
       }
     }
 
@@ -137,6 +149,8 @@ export class MiniPoster {
   async renderText(data: TextConfig) {
     const { context } = this;
     const {
+      id,
+      content,
       left,
       top,
       width,
@@ -161,7 +175,7 @@ export class MiniPoster {
     context.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
 
     const leftOffset = calculateLeftOffset({ left, textAlign, width });
-    const lines = width ? this.getAllLines(data) : [data.content];
+    const lines = width ? this.getAllLines(data) : [content];
 
     lines.forEach((text, index) => {
       const topOffset = top + (lineHeight - fontSize) / 2 + lineHeight * index;
@@ -185,6 +199,13 @@ export class MiniPoster {
       }
     });
     context.restore();
+
+    if (id) {
+      this.sizes.set(id, {
+        width: width ? width : context.measureText(content).width,
+        height: lineHeight * lines.length,
+      });
+    }
   }
 
   getAllLines(data: TextConfig) {
@@ -217,6 +238,10 @@ export class MiniPoster {
     return lines;
   }
 
+  getSize(id: string) {
+    return this.sizes.get(id);
+  }
+
   drawRoundedRect(
     x: number,
     y: number,
@@ -257,7 +282,7 @@ export class MiniPoster {
     context.restore();
   }
 
-  loadAssets(data: NonNullable<Config['children']>) {
+  loadAssets(data: Element[]) {
     data.forEach((item) => {
       const { type } = item;
 

diff --git a/src/types.ts b/src/types.ts
@@ -30,11 +30,13 @@ export type Radius =
   | [number, number, number]
   | [number, number, number, number];
 
+export type Element = ContainerConfig | ImageConfig | TextConfig;
+
 export type Config = {
   backgroundColor?: string;
   borderRadius?: Radius;
   overflow?: 'visible' | 'hidden';
-  children?: (ContainerConfig | ImageConfig | TextConfig)[];
+  children?: Element[];
 };
 
 export type PositionConfig = {
@@ -59,7 +61,7 @@ export type ContainerConfig = PositionConfig &
     backgroundColor?: string;
     borderRadius?: Radius;
     overflow?: 'visible' | 'hidden';
-    children?: (ContainerConfig | ImageConfig | TextConfig)[];
+    children?: Element[];
   };
 
 export type ImageConfig = PositionConfig &
@@ -75,6 +77,7 @@ export type TextConfig = PositionConfig & {
   width?: number;
 } & {
   type: 'text';
+  id?: string;
   content: string;
   color?: string;
   fontSize?: number;