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;