diff --git a/packages/core/src/app.ts b/packages/core/src/app.ts index 1275ac70..8acef987 100644 --- a/packages/core/src/app.ts +++ b/packages/core/src/app.ts @@ -102,10 +102,11 @@ export class App extends BaseService { 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 index dfe627d3..67f79ba6 100644 --- a/packages/core/src/tools/rect-tool.ts +++ b/packages/core/src/tools/rect-tool.ts @@ -5,8 +5,12 @@ 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', @@ -14,18 +18,15 @@ export const rectTool = (): Tool => { 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 index 19ef9777..d0a3d15e 100644 --- a/packages/core/src/tools/select-tool.ts +++ b/packages/core/src/tools/select-tool.ts @@ -16,6 +16,7 @@ export const selectTool = (...shapes: ChildType[]): Tool => { listening: false, }); let isRubberSelector: boolean = false; + return { name: 'selectTool', onActive(app) { @@ -23,6 +24,7 @@ export const selectTool = (...shapes: ChildType[]): Tool => { 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 index 62b3df2a..f6d0a427 100644 --- 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); + } }