feat: core init drawing-text

docs/features/core.md

@@ -2,34 +2,29 @@
 
 - [x] Scale canvas
 - [x] Scroll canvas
-- [] Render by requestAnimateFrame
-- [] Image load queue
+- [x] Render by requestAnimateFrame
+- [x] Image load queue
 - Render data's elements
+  - Basic box
+    - [x] Border
+    - [x] Radius
+    - [] Gradient Color
   - [] Text
     - [] Text content
     - [] Font size
     - [] Font family
     - [] Font color
-    - [] Border
   - Rect
     - [x] Rect content
-    - [] border
-    - [] Radius
-  - [] Circle
+  - Circle
+    - [] Rect content
   - Image
     - [x] Image content
-    - [] Border 
-    - [] Radius
   - [x] SVG
-    - [] Border 
-    - [] Radius
-  - [] Write
-    - [] Brush
-    - [] Border 
-    - [] Radius
+    - [x] SVG content
 - [x] Drag elements
 - [x] Move elements' index
 - [x] Rotate elements
 - [x] Transform elements's size
+- [] Loader update image/svg resource
 - [] Undo action record
-- [] Controll elements by data

packages/core/example/lib/data/index.js

@@ -1,6 +1,7 @@
 import dataRect from './rect.js';
 import dataImage from './image.js';
 import dataSVG from './svg.js';
+import dataText from './text.js';
 
 const url = new URLSearchParams(window.location.search);
 
@@ -8,6 +9,7 @@ const dataMap = {
   'rect': dataRect,
   'image': dataImage,
   'svg': dataSVG, 
+  'text': dataText
 }
 
 export function getData() {

packages/core/example/lib/data/text.js

@@ -0,0 +1,73 @@
+
+const data = {
+  // bgColor: '#ffffff',
+  elements: [
+    {
+      name: 'text-001',
+      x: 10,
+      y: 10,
+      w: 200,
+      h: 100,
+      type: 'text',
+      radius: 20,
+      borderWidth: 2,
+      borderColor: '#bd0b64',
+      desc: {
+        size: 20,
+        color: '#333333',
+        text: 'Hello World',
+        fontFamily: ''
+      }
+    },
+    {
+      name: 'text-002',
+      x: 80,
+      y: 80,
+      w: 200,
+      h: 120,
+      // angle: 30,
+      type: 'text',
+      radius: 60,
+      borderWidth: 10,
+      borderColor: '#bd0b64',
+      desc: {
+        size: 20,
+        text: 'Hello Text',
+        color: '#666666',
+      }
+    },
+    // {
+    //   name: 'text-003',
+    //   x: 160,
+    //   y: 160,
+    //   w: 200,
+    //   h: 20,
+    //   type: 'text',
+    //   angle: 80,
+    //   radius: 20,
+    //   borderWidth: 10,
+    //   borderColor: '#bd0b64',
+    //   desc: {
+    //     color: '#c0c0c0',
+    //   }
+    // },
+    // {
+    //   name: 'text-004',
+    //   x: 400 - 10,
+    //   y: 300 - 10,
+    //   w: 200,
+    //   h: 100,
+    //   type: 'text',
+    //   radius: 20,
+    //   borderWidth: 10,
+    //   borderColor: '#bd0b64',
+    //   desc: {
+    //     color: '#e0e0e0',
+    //   }
+    // }
+  ]
+}
+
+
+
+export default data;

packages/core/src/lib/draw/image.ts

@@ -1,43 +1,15 @@
-// import {
-//   TypeContext,
-//   TypeElement,
-//   TypeElemDesc,
-//   // TypePoint,
-// } from '@idraw/types';
-// import { rotateElement } from '../transform';
-// import Loader from '../loader';
- 
-
-// export function drawImage<T extends keyof TypeElemDesc>(
-//   ctx: TypeContext,
-//   elem: TypeElement<T>,
-//   loader: Loader,
-// ) {
-//   // const desc = elem.desc as TypeElemDesc['rect'];
-//   const content = loader.getContent(elem.uuid);
-//   rotateElement(ctx, elem, () => {
-//     // ctx.setFillStyle(desc.color);
-//     // ctx.fillRect(elem.x, elem.y, elem.w, elem.h);
-//     if (content) {
-//       // ctx.drawImage(content, 0, 0, elem.w, elem.h, elem.x, elem.y, elem.w, elem.h);
-//       ctx.drawImage(content, elem.x, elem.y, elem.w, elem.h);
-//     }
-//   });
-// }
-
 
 import {
   TypeContext, 
   TypeElement,
-  TypeElemDesc,
   TypeHelperConfig,
 } from '@idraw/types';
 import Loader from '../loader';
 import { drawBox } from './base';
 
-export function drawImage<T extends keyof TypeElemDesc>(
+export function drawImage(
   ctx: TypeContext,
-  elem: TypeElement<T>,
+  elem: TypeElement<'image'>,
   loader: Loader,
   helperConfig: TypeHelperConfig
 ) {

packages/core/src/lib/draw/index.ts

@@ -11,6 +11,7 @@ import { clearContext, drawBgColor } from './base';
 import { drawRect } from './rect';
 import { drawImage } from './image';
 import { drawSVG } from './svg';
+import { drawText } from './text';
 import { drawElementWrapper } from './wrapper';
 
 const { isColorStr } = util.color;
@@ -34,11 +35,14 @@ export function drawContext(
       case 'rect': {
         drawRect(ctx, elem as TypeElement<'rect'>);
       }
+      case 'text': {
+        drawText(ctx, elem as TypeElement<'text'>, loader, helperConfig);
+      }
       case 'image': {
-        drawImage<'image'>(ctx, elem as TypeElement<'image'>, loader, helperConfig);
+        drawImage(ctx, elem as TypeElement<'image'>, loader, helperConfig);
       }
       case 'svg': {
-        drawSVG<'svg'>(ctx, elem as TypeElement<'svg'>, loader, helperConfig);
+        drawSVG(ctx, elem as TypeElement<'svg'>, loader, helperConfig);
       }
       default: {
         // nothing

packages/core/src/lib/draw/svg.ts

@@ -1,15 +1,14 @@
 import {
   TypeContext, 
   TypeElement,
-  TypeElemDesc,
   TypeHelperConfig,
 } from '@idraw/types';
 import Loader from '../loader';
 import { drawBox } from './base';
 
-export function drawSVG<T extends keyof TypeElemDesc>(
+export function drawSVG(
   ctx: TypeContext,
-  elem: TypeElement<T>,
+  elem: TypeElement<'svg'>,
   loader: Loader,
   helperConfig: TypeHelperConfig
 ) {

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

@@ -1,20 +1,35 @@
 import {
-  TypeContext,
+  TypeContext, 
   TypeElement,
-  TypeElemDesc,
+  TypeHelperConfig,
 } from '@idraw/types';
-import { rotateElement } from '../transform';
-import { clearContext } from './base';
- 
-export function drawText<T extends keyof TypeElemDesc>(ctx: TypeContext, elem: TypeElement<T>) {
-  clearContext(ctx);
-  const desc = elem.desc as TypeElemDesc['rect'];
-  rotateElement(ctx, elem, () => {
-    ctx.setFillStyle(desc.color);
-    ctx.fillRect(elem.x, elem.y, elem.w, elem.h);
+import Loader from '../loader';
+import { drawBox } from './base';
+
+export function drawText(
+  ctx: TypeContext,
+  elem: TypeElement<'text'>,
+  loader: Loader,
+  helperConfig: TypeHelperConfig
+) {
+  const content = loader.getPattern(elem, {
+    forceUpdate: helperConfig?.selectedElementWrapper?.uuid === elem.uuid
   });
+  drawBox(ctx, elem, content);
 }
 
+
+export function createTextSVG(elem: TypeElement<'text'>): string {
+  const svg = `
+  <svg xmlns="http://www.w3.org/2000/svg" width="${elem.w}" height = "${elem.h}">
+    <foreignObject width="100%" height="100%">
+      <div xmlns = "http://www.w3.org/1999/xhtml" style="font-size: ${elem.desc.size}px; color:${elem.desc.color};">
+        <span>${elem.desc.text || ''}</span>
+      </div>
+    </foreignObject>
+  </svg>
+  `;
+  return svg;
+}
  
 
- 

packages/core/src/lib/helper.ts

@@ -143,7 +143,7 @@ export class Helper implements TypeHelper {
         },
         rotate: {
           x: elem.x + elem.w / 2,
-          y: elem.y - dotSize - (dotSize * 2 + rotateLimit),
+          y: elem.y - dotSize - (dotSize * 2 + rotateLimit) - borderWidth,
         }
       },
       lineWidth: lineWidth,

packages/core/src/lib/loader.ts

@@ -2,6 +2,7 @@ import { TypeData, TypeElement, TypeElemDesc } from '@idraw/types';
 import Board from '@idraw/board';
 import util from '@idraw/util';
 import { LoaderEvent, TypeLoadData, TypeLoaderEventArgMap } from './loader-event';
+import { createTextSVG } from './draw/text';
 
 const { loadImage, loadSVG } = util.loader;
 
@@ -99,7 +100,7 @@ export default class Loader {
     // add new load-data
     for (let i = data.elements.length - 1; i >= 0; i --) {
       const elem = data.elements[i];
-      if (['image', 'svg'].includes(elem.type) && !loadData[elem.uuid]) {
+      if (['image', 'svg', 'text'].includes(elem.type) && !loadData[elem.uuid]) {
         loadData[elem.uuid] = this._createEmptyLoadItem(elem);
         uuidQueue.push(elem.uuid);
       }
@@ -124,6 +125,9 @@ export default class Loader {
     } else if (elem.type === 'svg') {
       const _elem = elem as TypeElement<'svg'>;
       source = _elem.desc.svg || '';
+    } else if (elem.type === 'text') {
+      const _elem = elem as TypeElement<'text'>;
+      source = createTextSVG(_elem);
     }
     return {
       type: type,
@@ -220,8 +224,14 @@ export default class Loader {
       return image;
     } else if (params.type === 'svg') {
       const image = await loadSVG(
-        params.source,
-        {
+        params.source, {
+          width: params.elemW, height: params.elemH
+        }
+      );
+      return image;
+    } else if (params.type === 'text') {
+      const image = await loadSVG(
+        params.source, {
           width: params.elemW, height: params.elemH
         }
       );

packages/types/src/lib/element.ts

@@ -29,8 +29,11 @@ type TypeElemDescRect = {
 }
 
 type TypeElemDescText = {
+  text: string;
   size: number;
   color: number;
+  fontFamily: string;
+  backgroundColor?: string;
 }
 
 type TypeElemDescCircle = {