fix: 修复矩形绘制重复添加逻辑

JessYan0913 · Jul 31, 2023 · 7509af2 · 7509af2
1 parent 7d2ea34
commit 7509af2
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 13 deletions.
diff --git a/packages/core/src/app.ts b/packages/core/src/app.ts
@@ -102,10 +102,11 @@ export class App extends BaseService<EventArgs> {
 
   public select(...children: ChildType[]): void {
     this.selected.forEach((child) => child.draggable(false));
+    this.selected = [];
     this.selector.nodes([]);
-    this.selected = children.map((child) => {
+    children.forEach((child) => {
       child.draggable(true);
-      return child;
+      this.selected.push(child);
     });
     this.selector.nodes(children);
     this.selector.moveToTop();

diff --git a/packages/core/src/tools/rect-tool.ts b/packages/core/src/tools/rect-tool.ts
@@ -5,27 +5,28 @@ import { Point } from '../utils';
 import { selectTool } from './select-tool';
 
 export const rectTool = (): Tool => {
-  let startPointer: Point = new Point(0, 0);
-  let rectangle: Rect | null = null;
+  const startPointer: Point = new Point(0, 0);
+  const rectangle: Rect = new Rect({
+    fill: 'transparent',
+    stroke: 'black',
+    strokeWidth: 2,
+  });
 
   return {
     name: 'rectTool',
     onActive(app) {
       app.select();
     },
     onInactive() {
-      rectangle = null;
       startPointer.setXY(0, 0);
     },
     onMouseDown({ app }: AppMouseEvent): void {
-      startPointer = app.pointer;
-      rectangle = new Rect({
-        x: startPointer.x,
-        y: startPointer.y,
-        fill: 'transparent',
-        stroke: 'black',
-        strokeWidth: 2,
-      });
+      startPointer.clone(app.pointer);
+      rectangle.setPosition(
+        new Point(Math.min(startPointer.x, app.pointer.x), Math.min(startPointer.y, app.pointer.y))
+      );
+      rectangle.width(0);
+      rectangle.height(0);
       app.add(rectangle);
     },
     onMouseMove({ app }: AppMouseEvent): void {

diff --git a/packages/core/src/tools/select-tool.ts b/packages/core/src/tools/select-tool.ts
@@ -16,13 +16,15 @@ export const selectTool = (...shapes: ChildType[]): Tool => {
     listening: false,
   });
   let isRubberSelector: boolean = false;
+
   return {
     name: 'selectTool',
     onActive(app) {
       app.select(...shapes);
       app.add(rubberRect);
     },
     onInactive() {
+      rubberRect.destroy();
       startPointer.setXY(0, 0);
     },
     onMouseDown({ app }) {

diff --git a/packages/core/src/utils/math.ts b/packages/core/src/utils/math.ts
@@ -29,4 +29,8 @@ export class Point implements Konva.Vector2d {
   public toArray(): number[] {
     return [this.x, this.y];
   }
+
+  public clone(point: Point): void {
+    this.setXY(point.x, point.y);
+  }
 }