feat: redraw add context clear

docs/features/core.md

@@ -11,7 +11,7 @@
   - [] Image
   - [] Point
 - [x] Drag elements
-- [] Move elements' index
+- [x] Move elements' index
 - [] Rotate elements
 - [x] Transform elements's size
 - [] Undo action record

packages/board/src/util/context.ts

@@ -123,6 +123,14 @@ class Context implements TypeContext {
     return this._ctx.stroke();
   }
 
+  translate(x: number, y: number) {
+    return this._ctx.translate(this._doX(x), this._doY(y));
+  }
+  
+  rotate(angle: number) {
+    return this._ctx.rotate(angle)
+  }
+
   private _doSize(num: number) {
     return this._opts.devicePixelRatio * num;
   }

packages/core/example/lib/data.js

@@ -1,6 +1,6 @@
 
 const data = {
-  bgColor: '#ffffff',
+  // bgColor: '#ffffff',
   elements: [
     {
       name: 'rect-001',
@@ -9,6 +9,7 @@ const data = {
       w: 200,
       h: 120,
       type: 'rect',
+      angle: 0,
       desc: {
         color: '#f0f0f0',
       }
@@ -19,6 +20,7 @@ const data = {
       y: 80,
       w: 200,
       h: 120,
+      angle: 40,
       type: 'rect',
       desc: {
         color: '#cccccc',

packages/core/src/index.ts

@@ -135,6 +135,9 @@ class Core {
   }
 
   private _handlePoint(point: TypePoint) {
+
+    // console.log('handlePoint = ', point);
+
     const [uuid, direction] = this[_helper].isPointInElementWrapperDot(point);
     if (uuid && direction) {
       this[_mode] = Mode.SELECT_ELEMENT_WRAPPER_DOT;

packages/core/src/lib/draw.ts

@@ -4,12 +4,16 @@ import {
   TypeElement,
   TypeElemDesc,
   TypeHelperConfig,
+  // TypePoint,
 } from '@idraw/types';
 import util from './../util';
 
 const { isColorStr } = util.color;
 
 export function drawContext(ctx: TypeContext, data: TypeData, config: TypeHelperConfig) {
+  const size = ctx.getSize();
+  ctx.clearRect(0, 0, size.width, size.height)
+
   if (typeof data.bgColor === 'string' && isColorStr(data.bgColor)) {
     drawBgColor(ctx, data.bgColor);
   }
@@ -31,6 +35,14 @@ export function drawContext(ctx: TypeContext, data: TypeData, config: TypeHelper
 
 function drawRect<T extends keyof TypeElemDesc>(ctx: TypeContext, ele: TypeElement<T>) {
   const desc = ele.desc as TypeElemDesc['rect'];
+
+  // const p = translateRotateCenter(ele);
+  // const angle = translateRotateAngle(ele.angle);
+  // // ctx.translate(p.x, p.y);
+  // // ctx.rotate(translateRotateAngle(ele.angle));
+
+  // console.log('p = ', p, 'angle = ',angle)
+ 
   ctx.setFillStyle(desc.color);
   ctx.fillRect(ele.x, ele.y, ele.w, ele.h);
 }
@@ -72,6 +84,23 @@ function drawElementWrapper(ctx: TypeContext, config: TypeHelperConfig) {
     ctx.arc(dot.x, dot.y, wrapper.dotSize, 0, Math.PI * 2);
     ctx.fill();
     ctx.closePath();
-  })
- 
-}
+  });
+}
+
+
+// function translateRotateCenter(elem: TypeElement<keyof TypeElemDesc>): TypePoint {
+//   const p = {
+//     x: elem.x + elem.w / 2,
+//     y: elem.y + elem.h / 2
+//   };
+//   return p;
+// }
+
+// function translateRotateAngle(angle?: number) {
+//   if (typeof angle === 'number' && (angle > 0 || angle <= 0)) {
+//     const _angle = (angle - 45) / 360 * (2 * Math.PI);
+//     return _angle;
+//   } else {
+//     return 0;
+//   }
+// }

packages/core/src/lib/element.ts

@@ -2,7 +2,9 @@ import {
   TypeContext,
   TypePoint,
   TypeData,
-  TypeHelperWrapperDotDirection
+  TypeHelperWrapperDotDirection,
+  // TypeElement,
+  // TypeElemDesc,
 } from '@idraw/types';
 import util from './../util';
 

packages/types/src/index.ts

@@ -1,4 +1,5 @@
 export * from './lib/data';
+export * from './lib/context';
 export * from './lib/board';
 export * from './lib/paint';
 export * from './lib/element';

packages/types/src/lib/board.ts

@@ -3,39 +3,6 @@ type TypePoint = {
   y: number;
 }
 
-interface TypeContext {
-  setTransform(config: {
-    scale?: number;
-    scrollX?: number;
-    scrollY?: number;
-  }): void;
-  getTransform(): {
-    scale: number;
-    scrollX: number;
-    scrollY: number;
-  }
-  getSize(): {
-    width: number;
-    height: number;
-    devicePixelRatio: number;
-  };
-  setFillStyle(color: string): void;
-  fill(fillRule?: CanvasFillRule | undefined): any;
-  arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean | undefined): void;
-  fillRect(x: number, y: number, w: number, h: number): void;
-  clearRect(x: number, y: number, w: number, h: number): void;
-  beginPath(): void;
-  closePath(): void;
-  moveTo(x: number, y: number): void;
-  lineTo(x: number, y: number): void;
-  setLineWidth(w: number): void;
-  setLineDash(nums: number[]): void;
-  isPointInPath(x: number, y: number): boolean;
-  setStrokeStyle(color: string): void;
-  stroke(): void;
-}
-
 export {
   TypePoint,
-  TypeContext
 }

packages/types/src/lib/context.ts

@@ -0,0 +1,37 @@
+interface TypeContext {
+  setTransform(config: {
+    scale?: number;
+    scrollX?: number;
+    scrollY?: number;
+  }): void;
+  getTransform(): {
+    scale: number;
+    scrollX: number;
+    scrollY: number;
+  }
+  getSize(): {
+    width: number;
+    height: number;
+    devicePixelRatio: number;
+  };
+  setFillStyle(color: string): void;
+  fill(fillRule?: CanvasFillRule | undefined): any;
+  arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean | undefined): void;
+  fillRect(x: number, y: number, w: number, h: number): void;
+  clearRect(x: number, y: number, w: number, h: number): void;
+  beginPath(): void;
+  closePath(): void;
+  moveTo(x: number, y: number): void;
+  lineTo(x: number, y: number): void;
+  setLineWidth(w: number): void;
+  setLineDash(nums: number[]): void;
+  isPointInPath(x: number, y: number): boolean;
+  setStrokeStyle(color: string): void;
+  stroke(): void;
+  translate(x: number, y: number): void;
+  rotate(angle: number): void;
+}
+
+export {
+  TypeContext
+}

packages/types/src/lib/element.ts

@@ -7,6 +7,7 @@ type TypeElement<T extends keyof TypeElemDesc> = {
   y: number;
   w: number;
   h: number;
+  angle?: number;
   type: T;
   desc: TypeElemDesc[T];
 }