feat: 新增删除方法

main/src/view/canvas/index.vue

@@ -16,6 +16,11 @@ onMounted(() => {
 
 <template>
   <div class="wrapper">
+    <div class="tools">
+      <button @click="app.remove(...app.selected)">删除</button>
+      <button @click="app.undo()">回退</button>
+      <button @click="app.redo()">恢复</button>
+    </div>
     <div class="tools">
       <button @click="app.setTool(selectTool())">选择🖱️</button>
       <button @click="app.setTool(rectTool())">矩形⬜️</button>

packages/core/src/app.ts

@@ -45,6 +45,10 @@ export class App extends BaseService<EventArgs> {
     return new Point(x, y);
   }
 
+  public get selected(): ChildType[] {
+    return this.selector.selected;
+  }
+
   public mount(element: HTMLElement) {
     element.appendChild(this.containerElement);
     this.stage.setSize({
@@ -71,11 +75,11 @@ export class App extends BaseService<EventArgs> {
   }
 
   public remove(...children: ChildType[]): void {
-    console.log('====>', children);
-
-    this.mainLayer.find((node: any) => {
-      console.log('=====>', node);
+    children.forEach((child) => {
+      child.remove();
     });
+    this.render();
+    this.emit('shape:removed', { object: children });
   }
 
   public triggerSelector(enable?: boolean): void {

packages/core/src/services/selector.ts

@@ -71,15 +71,18 @@ export class Selector extends Service {
     });
     this.optionLayer.add(this.rubberRect);
 
-    (['onMouseDown', 'onMouseUp', 'onMouseMove', 'onMouseClick'] as (keyof this)[]).forEach((method) => {
-      method = method as keyof Selector;
-      this[method] = (this[method] as Function).bind(this);
-    });
+    (['onMouseDown', 'onMouseUp', 'onMouseMove', 'onMouseClick', 'onShapeRemoved'] as (keyof this)[]).forEach(
+      (method) => {
+        method = method as keyof Selector;
+        this[method] = (this[method] as Function).bind(this);
+      }
+    );
 
     this.app.on('mouse:down', this.onMouseDown);
     this.app.on('mouse:move', this.onMouseMove);
     this.app.on('mouse:up', this.onMouseUp);
     this.app.on('mouse:click', this.onMouseClick);
+    this.app.on('shape:removed', this.onShapeRemoved);
   }
 
   public select(...children: ChildType[]): void {
@@ -165,6 +168,12 @@ export class Selector extends Service {
     this.select(event.target);
   }
 
+  private onShapeRemoved({ object }: EventArgs['shape:removed']): void {
+    const removed = object.map((child) => child.id());
+    const result = this.selected.filter((child) => !removed.includes(child.id()));
+    this.select(...result);
+  }
+
   public dispose(): void {
     this.app.off('mouse:down', this.onMouseDown);
     this.app.off('mouse:move', this.onMouseMove);

packages/plugin-history/src/commands/add-object-cmd.ts

@@ -14,8 +14,7 @@ export class AddObjectCmd extends BaseCmd<Cmd.AddObjectOptions> {
   }
 
   public undo(): void {
-    // this.app.mainLayer.find((obj) => {})?.destroy();
-    this.app.render();
+    this.app.remove(...this.options.object);
   }
 }
 

packages/plugin-history/src/commands/remove-object-cmd.ts

@@ -10,8 +10,7 @@ export class RemoveObjectCmd extends BaseCmd<Cmd.RemoveObjectOptions> {
   }
 
   public execute(): void {
-    // this.app.mainLayer.findOne(this.options.object.id())?.destroy();
-    this.app.render();
+    this.app.remove(...this.options.object);
   }
 
   public undo(): void {