feat: fix point at scale status

packages/board/example/features/lib/action.js

@@ -1,5 +1,7 @@
 import { getData } from "./data.js";
 import { drawData } from './draw.js';
+import { getScale } from './scale.js';
+import opts from './opts.js'
 
 function isPointInElement(board, p = {x, y}) {
   const ctx = board.getContext();
@@ -13,6 +15,7 @@ function isPointInElement(board, p = {x, y}) {
     ctx.lineTo(ele.x + ele.w, ele.y + ele.h);
     ctx.lineTo(ele.x, ele.y + ele.h);
     ctx.closePath();
+    
     if (ctx.isPointInPath(p.x, p.y)) {
       idx = i;
       break;
@@ -23,9 +26,12 @@ function isPointInElement(board, p = {x, y}) {
 
 function moveElement(board, idx, moveX, moveY) {
   const data = getData();
+  const scale = getScale();
   if (data.elements[idx]) {
-    data.elements[idx].x += moveX;
-    data.elements[idx].y += moveY;
+    // data.elements[idx].x += (moveX * scale * opts.devicePixelRatio);
+    // data.elements[idx].y += (moveY * scale * opts.devicePixelRatio);
+    data.elements[idx].x += (moveX / scale);
+    data.elements[idx].y += (moveY / scale);
   }
   drawData(board)
 }

packages/board/example/features/lib/draw.js

@@ -6,6 +6,8 @@ export function drawData(board) {
   const data = getData();
   board.clear();
   ctx.clearRect(0, 0, opts.width, opts.height);
+  ctx.setFillStyle('#ffffff');
+  ctx.fillRect(0, 0, opts.width, opts.height);
   data.elements.forEach(ele => {
     ctx.setFillStyle(ele.desc.color);
     ctx.fillRect(ele.x, ele.y, ele.w, ele.h);

packages/board/example/features/lib/scale.js

@@ -1,8 +1,13 @@
 const input = document.querySelector('#scale');
 let hasInited = false;
 
-export function doScale(board) {
+export function doScale(board, scale) {
   if (hasInited === true)  return;
+  if (scale > 0) {
+    input.value = scale;
+    board.scale(scale);
+    board.draw();
+  }
   input.addEventListener('change', () => {
     const val = input.value * 1;
     if (val > 0) {
@@ -11,4 +16,12 @@ export function doScale(board) {
     }
   });
   hasInited = true;
+}
+
+export function getScale() {
+  let val = 1;
+  if (input.value * 1 > 0) {
+    val = input.value * 1;
+  }
+  return val;
 }

packages/board/example/features/lib/scroll.js

@@ -2,18 +2,31 @@ const inputX = document.querySelector('#scrollX');
 const inputY = document.querySelector('#scrollY');
 let hasInited = false;
 
-export function doScroll(board) {
+export function doScroll(board, conf = {}) {
   if (hasInited === true)  return;
+  
+  if (conf.scrollX >= 0) {
+    inputX.value = conf.scrollX;
+    board.scrollX(conf.scrollX);
+    board.draw();
+  }
+
+  if (conf.scrollY >= 0) {
+    inputY.value = conf.scrollY;
+    board.scrollY(conf.scrollY);
+    board.draw();
+  }
+
   inputX.addEventListener('change', () => {
     const val = inputX.value * 1;
-    if (val > 0) {
+    if (val >= 0) {
       board.scrollX(val);
       board.draw();
     }
   });
   inputY.addEventListener('change', () => {
     const val = inputY.value * 1;
-    if (val > 0) {
+    if (val >= 0) {
       board.scrollY(val);
       board.draw();
     }

packages/board/example/features/main.js

@@ -9,11 +9,23 @@ const { Board } = window.iDraw;
 const mount = document.querySelector('#mount');
 const board = new Board(mount, opts);
 
+const conf = {
+  scale: 0.5,
+  scrollX: 100,
+  scrollY: 200,
+}
+
+// const conf = {
+//   scale: 1,
+//   scrollX: 0,
+//   scrollY: 0,
+// }
+
 drawData(board);
 
 initEvent(board);
-doScale(board);
-doScroll(board);
+doScale(board, conf.scale);
+doScroll(board, conf);
 
 
 // board.scale(2);

packages/board/src/index.ts

@@ -47,15 +47,24 @@ class Board {
   }
 
   scale(scaleRatio: number) {
-    if (scaleRatio > 0) this._scaleRatio = scaleRatio;
+    if (scaleRatio > 0) {
+      this._scaleRatio = scaleRatio;
+      this._ctx.setConfig({ scale: scaleRatio });
+    }
   }
 
   scrollX(x: number) {
-    if (x > 0) this._scrollX = x;
+    if (x >= 0) {
+      this._scrollX = x;
+      this._ctx.setConfig({ scrollX: x });
+    }
   }
 
   scrollY(y: number) {
-    if (y > 0) this._scrollY = y;
+    if (y >= 0) {
+      this._scrollY = y;
+      this._ctx.setConfig({ scrollY: y });
+    }
   }
 
   draw() {

packages/board/src/util/context.ts

@@ -4,9 +4,22 @@ type Options = {
   devicePixelRatio: number;
 }
 
+type Config = {
+  scale?: number;
+  scrollX?: number;
+  scrollY?: number;
+}
+
+type PrivateConfig = {
+  scale: number;
+  scrollX: number;
+  scrollY: number;
+}
+
 class Context {
   private _opts: Options;
   private _ctx: CanvasRenderingContext2D;
+  private _conf: PrivateConfig; 
 
   // private _scale: number;
   // private _scrollX: number;
@@ -15,6 +28,15 @@ class Context {
   constructor(ctx: CanvasRenderingContext2D, opts: Options) {
     this._opts = opts;
     this._ctx = ctx;
+    this._conf = {
+      scale: 1,
+      scrollX: 0,
+      scrollY: 0,
+    }
+  }
+
+  setConfig(config: Config) {
+    this._conf = {...this._conf, ...config};
   }
 
   setFillStyle(color: string) {
@@ -51,14 +73,38 @@ class Context {
     return this._ctx.lineTo(this._doSize(x), this._doSize(y));
   }
 
+  setLineWidth(w: number) {
+    this._ctx.lineWidth = w;
+  }
+
   isPointInPath(x: number, y: number) {
-    return this._ctx.isPointInPath(this._doSize(x), this._doSize(y));
+    return this._ctx.isPointInPath(this._doX(x), this._doY(y));
+  }
+
+  setStrokeStyle(color: string) {
+    this._ctx.strokeStyle = color;
+  }
+
+  stroke() {
+    return this._ctx.stroke();
   }
 
   private _doSize(num: number) {
     return this._opts.devicePixelRatio * num;
   }
 
+  private _doX(x: number) {
+    const { scale, scrollX } = this._conf;
+    const _x = (x - scrollX * scale) / scale;
+    return this._doSize(_x);
+  }
+
+  private _doY(y: number) {
+    const { scale, scrollY } = this._conf;
+    const _y = (y - scrollY * scale) / scale;
+    return this._doSize(_y);
+  }
+
 }
 
 export default Context;