feat: packages/core add drawBg

docs/usage/README.md

@@ -0,0 +1,3 @@
+# idraw
+
+// TODO

packages/board/src/util/context.ts

@@ -37,6 +37,14 @@ class Context implements TypeContext {
     }
   }
 
+  getSize() {
+    return  {
+      width: this._opts.width,
+      height: this._opts.height,
+      devicePixelRatio: this._opts.devicePixelRatio,
+    }
+  }
+
   setConfig(config: Config) {
     this._conf = {...this._conf, ...config};
   }

packages/core/example/lib/data.js

@@ -1,5 +1,6 @@
 
 const data = {
+  bgColor: '#ffffff',
   elements: [
     {
       x: 10,

packages/core/src/index.ts

@@ -1,4 +1,4 @@
-import { TypeData } from '@idraw/types';
+import { TypeData, TypePoint } from '@idraw/types';
 import Board from '@idraw/board';
 import Renderer from './lib/renderer';
 import { Element } from './lib/element';
@@ -60,10 +60,21 @@ class Core {
     if (this._hasInited === true) {
       return;
     }
-    this._board.on('point', (p) => {
-      const idx = this._element.isPointInElement(p, this._data);
-      console.log('idx ====', idx);
+    // let prevPoint: TypePoint | null;
+    let selectedIndex: number = -1;
+    this._board.on('point', (p: TypePoint) => {
+      selectedIndex = this._element.isPointInElement(p, this._data);
+      console.log('selectedIndex =', selectedIndex);
     });
+    // this._board.on('moveStart', (p) => {
+    //   prevPoint = p;
+    // });
+    // this._board.on('move', (p) => {
+    //   prevPoint = p;
+    // });
+    // this._board.on('moveEnd', (p) => {
+    //   prevPoint = null;
+    // })
   }
 }
 

packages/core/src/lib/draw.ts

@@ -1,6 +1,12 @@
 import { TypeContext, TypeData, TypeElement, TypeElemDesc } from '@idraw/types';
+import util from './../util';
+
+const { isColorStr } = util.color;
 
 export function drawContext(ctx: TypeContext, data: TypeData) {
+  if (typeof data.bgColor === 'string' && isColorStr(data.bgColor)) {
+    drawBgColor(ctx, data.bgColor);
+  }
   for (let i = 0; i < data.elements.length; i++) {
     const ele = data.elements[i];
     switch (ele.type) {
@@ -19,4 +25,10 @@ function drawRect<T extends keyof TypeElemDesc>(ctx: TypeContext, ele: TypeEleme
   const desc = ele.desc as TypeElemDesc['rect'];
   ctx.setFillStyle(desc.color);
   ctx.fillRect(ele.x, ele.y, ele.w, ele.h);
+}
+
+function drawBgColor(ctx: TypeContext, color: string) {
+  const size = ctx.getSize();
+  ctx.setFillStyle(color);
+  ctx.fillRect(0, 0, size.width, size.height);
 }

packages/core/src/lib/element.ts

@@ -25,4 +25,8 @@ export class Element {
     }
     return idx;
   }
+
+  moveElement() {
+    
+  }
 }

packages/core/src/util/color.ts

@@ -4,4 +4,8 @@ export function toColorHexNum(color: string): number {
 
 export function toColorHexStr(color: number): string {
   return '#' + color.toString(16);
+}
+
+export function isColorStr(color?: string): boolean {
+  return  typeof color === 'string' && /^\#[0-9a-z]{3,8}$/i.test(color);
 }

packages/core/src/util/index.ts

@@ -1,7 +1,7 @@
 import { loadImage } from './loader';
 import { delay, compose, throttle } from './time';
 import { downloadImageFromCanvas } from './file';
-import { toColorHexStr, toColorHexNum } from './color';
+import { toColorHexStr, toColorHexNum, isColorStr } from './color';
 
 export default {
   time: {
@@ -18,5 +18,6 @@ export default {
   color: {
     toColorHexStr,
     toColorHexNum,
+    isColorStr,
   }
 }

packages/types/src/lib/board.ts

@@ -9,6 +9,11 @@ interface TypeContext {
     scrollX?: number;
     scrollY?: number;
   }): void;
+  getSize(): {
+    width: number;
+    height: number;
+    devicePixelRatio: number;
+  };
   setFillStyle(color: string): void;
   fillRect(x: number, y: number, w: number, h: number): void;
   clearRect(x: number, y: number, w: number, h: number): void;

packages/types/src/lib/data.ts

@@ -3,8 +3,9 @@ import { TypeElemDesc, TypeElement } from './element';
 
 
 type TypeData = {
-  elements: TypeElement<keyof TypeElemDesc>[]
-  selectedElements?: string[] // uuids
+  elements: TypeElement<keyof TypeElemDesc>[];
+  bgColor?: string;
+  selectedElements?: string[]; // uuids
 }
 
 export {