fix: @idraw/core select element list

docs/todo/board.md

@@ -1,4 +1,4 @@
 # @idraw/board
 
-* [] Calculate screen position to context position
+* [x] Calculate screen position to context position
 * [x] Reset board's size

docs/todo/idraw.md

@@ -1,6 +1,6 @@
 # idraw
 
-* BUG: Undo/Redo need trigger "changeData" event
+* [] BUG: Undo/Redo need trigger "changeData" event
 * Export
   * [] Export image
   * [] Source file

packages/board/src/lib/context.ts

@@ -139,6 +139,10 @@ class Context implements TypeContext {
     return this._ctx.isPointInPath(this._doX(x), this._doY(y));
   }
 
+  isPointInPathWithoutScroll(x: number, y: number) {
+    return this._ctx.isPointInPath(this._doSize(x), this._doSize(y));
+  }
+
   setStrokeStyle(color: string) {
     this._ctx.strokeStyle = color;
   }

packages/core/examples/features/lib/data/rect.js

@@ -1,5 +1,5 @@
 const data = {
-  // bgColor: '#ffffff',
+  bgColor: '#f0f0f0',
   elements: [
     {
       name: "rect-001",
@@ -56,7 +56,7 @@ const data = {
       desc: {
         color: "#e0e0e0",
         borderRadius: 20,
-        borderWidth: 10,
+        borderWidth: 2,
         borderColor: "#bd0b64",
       },
     },

packages/core/examples/features/lib/main.js

@@ -8,7 +8,7 @@ const data = getData();
 const mount = document.querySelector('#mount');
 
 const defaultConf = {
-  scale: 1,
+  scale: 0.5,
   scrollX: 0,
   scrollY: 0,
 };

packages/core/src/lib/helper.ts

@@ -149,14 +149,20 @@ export class Helper implements TypeHelper {
   }
 
   calcSelectedElements(data: TypeData) {
+    const transform = this._ctx.getTransform();
+    const { scale = 1, scrollX = 0, scrollY = 0 } = transform;
     const start = this._areaStart;
     const end = this._areaEnd;
-    const x = Math.min(start.x, end.x);
-    const y = Math.min(start.y, end.y);
-    const w = Math.abs(end.x - start.x);
-    const h = Math.abs(end.y - start.y);
+    const x = (Math.min(start.x, end.x) - scrollX) / scale;
+    const y = (Math.min(start.y, end.y) - scrollY) / scale;
+    const w = Math.abs(end.x - start.x) / scale;
+    const h = Math.abs(end.y - start.y) / scale;
     const uuids: string[] = [];
     const ctx = this._ctx;
+
+    console.log({x, y, w, h}, start, end);
+    console.log(this._board.getTransform());
+
     ctx.beginPath();
     ctx.moveTo(x, y);
     ctx.lineTo(x + w, y);
@@ -168,7 +174,7 @@ export class Helper implements TypeHelper {
     data.elements.forEach((elem) => {
       const centerX = elem.x + elem.w / 2;
       const centerY = elem.y + elem.h / 2;
-      if (ctx.isPointInPath(centerX, centerY)) {
+      if (ctx.isPointInPathWithoutScroll(centerX, centerY)) {
         uuids.push(elem.uuid);
       }
     });

packages/types/src/lib/context.ts

@@ -33,6 +33,7 @@ interface TypeContext {
   setLineWidth(w: number): void;
   setLineDash(nums: number[]): void;
   isPointInPath(x: number, y: number): boolean;
+  isPointInPathWithoutScroll(x: number, y: number): boolean;
   setStrokeStyle(color: string): void;
   stroke(): void;
   translate(x: number, y: number): void;