feat: @idraw/board add screen point translate

packages/board/__tests__/point.test.ts

@@ -0,0 +1,41 @@
+import Board from '../src';
+
+describe('@idraw/board', () => {
+
+
+  document.body.innerHTML = `
+    <div id="mount"></div>
+  `;
+  const opts = {
+    width: 800,
+    height: 600,
+    contextWidth: 600,
+    contextHeight: 400,
+    devicePixelRatio: 4,
+    canScroll: true,
+  };
+  const transform = {
+    scale: 2,
+    scrollX: -200,
+    scrollY: -100,
+  };
+  const mount = document.querySelector('#mount') as HTMLDivElement;
+  const board = new Board(mount, opts);
+
+  test('scroll', async () => {  
+    
+    board.scale(transform.scale);
+    board.scrollX(transform.scrollX);
+    board.scrollY(transform.scrollY);
+    board.draw();
+
+    const p1 = {x: 400, y: 300};
+    const p2 = {x: 300, y: 200};
+
+    expect(board.pointScreenToContext(p1)).toStrictEqual(p2);
+    expect(board.pointContextToScreen(p2)).toStrictEqual(p1);
+  });
+
+
+});
+

packages/board/examples/features/lib/data.js

@@ -1,4 +1,3 @@
-
 const data = {
   elements: [
     {
@@ -6,58 +5,56 @@ const data = {
       y: 10,
       w: 200,
       h: 120,
-      type: 'rect',
+      type: "rect",
       desc: {
-        color: '#f0f0f0',
-      }
+        color: "#f0f0f0",
+      },
     },
     {
       x: 80,
       y: 80,
       w: 200,
       h: 120,
-      type: 'rect',
+      type: "rect",
       desc: {
-        color: '#cccccc',
-      }
+        color: "#cccccc",
+      },
     },
     {
       x: 160,
       y: 160,
       w: 200,
       h: 120,
-      type: 'rect',
+      type: "rect",
       desc: {
-        color: '#c0c0c0',
-      }
+        color: "#c0c0c0",
+      },
     },
     {
       x: 400 - 10,
       y: 300 - 10,
       w: 200,
       h: 100,
-      type: 'rect',
+      type: "rect",
       desc: {
-        color: '#e0e0e0',
-      }
+        color: "#e0e0e0",
+      },
     },
     {
       x: 300 - 10,
       y: 200 - 10,
       w: 20,
       h: 20,
-      type: 'rect',
+      type: "rect",
       desc: {
-        color: '#000000',
-      }
-    }
-  ]
-}
+        color: "#000000",
+      },
+    },
+  ],
+};
 
 function getData() {
   return data;
 }
 
-export {
-  getData
-};
+export { getData };

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

@@ -6,8 +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);
+  // 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/examples/features/main.js

@@ -1,13 +1,13 @@
-import opts from './lib/opts.js';
-import { drawData } from './lib/draw.js';
-import { doScale } from './lib/scale.js';
-import { doScroll } from './lib/scroll.js';
-import { initEvent } from './lib/event.js';
-import { doCursor } from './lib/action.js';
+import opts from "./lib/opts.js";
+import { drawData } from "./lib/draw.js";
+import { doScale } from "./lib/scale.js";
+import { doScroll } from "./lib/scroll.js";
+import { initEvent } from "./lib/event.js";
+import { doCursor } from "./lib/action.js";
 
-const { Board } = window.iDraw; 
+const { Board } = window.iDraw;
 
-const mount = document.querySelector('#mount');
+const mount = document.querySelector("#mount");
 const board = new Board(mount, opts);
 
 // const conf = {
@@ -20,15 +20,18 @@ const conf = {
   scale: 2,
   scrollX: -200,
   scrollY: -100,
-}
+};
 
 drawData(board);
 
 initEvent(board);
 doScale(board, conf.scale);
 doScroll(board, conf);
-doCursor(board)
+doCursor(board);
 
+console.log('pointScreenToContext = ', board.pointScreenToContext({ x: 400, y: 300 }));
+
+console.log('pointContextToScreen = ', board.pointContextToScreen({ x: 300, y: 200 }));
 
 // board.scale(2);
-// board.draw();
+// board.draw();

packages/board/src/index.ts

@@ -170,6 +170,24 @@ class Board {
     return lineWidth;
   }
 
+  pointScreenToContext(screenPoint: TypePoint): TypePoint {
+    const { scrollX, scrollY, scale } = this.getTransform();
+    const ctxPoint = {
+      x: (screenPoint.x - scrollX) / scale,
+      y: (screenPoint.y - scrollY) / scale,
+    };
+    return ctxPoint;
+  }
+
+  pointContextToScreen(ctxPoint: TypePoint): TypePoint {
+    const { scrollX, scrollY, scale } = this.getTransform();
+    const screenPoint = {
+      x: ctxPoint.x * scale + scrollX,
+      y: ctxPoint.y * scale + scrollY,
+    };
+    return screenPoint;
+  }
+
   private [_render]() {
     if (this[_hasRendered] === true) {
       return;